:root {
          --bg-0: #0f1724;
          --bg-1: #071026;
          --card: rgba(255, 255, 255, 0.03);
          --muted: #98a6bf;
          --accent: linear-gradient(90deg, #7c5cff, #4fd1c5);
          --positive: #22c55e;
          --danger: #ef4444;
          --glass: rgba(255, 255, 255, 0.02);
          --radius: 14px;
          --shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
          color-scheme: dark;
        }

        * {
          box-sizing: border-box;
          font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        }

        html,
        body {
          height: 100%;
          margin: 0;
          background: linear-gradient(135deg, #071026 0%, #0f1724 100%);
          color: #e6eef8;
          -webkit-font-smoothing: antialiased;
        }

        .wrap {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 28px;
        }

        .container {
          width: 100%;
          max-width: 980px;
          display: grid;
          grid-template-columns: 1fr 360px;
          gap: 24px;
        }

        @media (max-width:980px) {
          .container {
            grid-template-columns: 1fr;
          }
        }

        .card {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
          padding: 20px;
          border-radius: var(--radius);
          box-shadow: var(--shadow);
          border: 1px solid rgba(255, 255, 255, 0.03);
        }

        header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 16px
        }

        header h1 {
          font-size: 18px;
          margin: 0
        }

        .muted {
          color: var(--muted);
          font-size: 13px
        }

        label {
          display: block;
          font-size: 14px;
          margin-bottom: 6px
        }

        input[type=date],
        input[type=number],
        select {
          width: 100%;
          padding: 12px;
          border-radius: 10px;
          border: 1px solid rgba(255, 255, 255, 0.04);
          background: transparent;
          color: inherit;
          font-size: 15px;
        }

        .controls {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          margin-top: 12px
        }

        .btn {
          padding: 10px 12px;
          border-radius: 10px;
          border: none;
          font-weight: 700;
          cursor: pointer;
          background: transparent;
          color: inherit;
          border: 1px solid rgba(255, 255, 255, 0.06)
        }

        .btn.primary {
          background: var(--accent);
          color: #071026;
          border: none;
          box-shadow: 0 8px 20px rgba(124, 92, 255, 0.12)
        }

        .result {
          margin-top: 14px;
          padding: 14px;
          border-radius: 10px;
          background: var(--glass);
          border: 1px solid rgba(255, 255, 255, 0.02)
        }

        .big {
          font-size: 20px;
          font-weight: 800
        }

        .stats {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          margin-top: 10px
        }

        .tile {
          flex: 1;
          min-width: 120px;
          background: rgba(255, 255, 255, 0.02);
          padding: 10px;
          border-radius: 10px;
          border: 1px solid rgba(255, 255, 255, 0.02);
          text-align: center
        }

        .small {
          font-size: 13px;
          color: var(--muted)
        }

        .side-panel {
          display: flex;
          flex-direction: column;
          gap: 12px
        }

        .progress-wrap {
          height: 12px;
          background: rgba(255, 255, 255, 0.03);
          border-radius: 999px;
          overflow: hidden
        }

        .progress-bar {
          height: 100%;
          border-radius: 999px;
          background: linear-gradient(90deg, #4fd1c5, #7c5cff)
        }

        .history-list {
          max-height: 220px;
          overflow: auto;
          padding-right: 6px
        }

        .history-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px;
          border-radius: 8px;
          margin-bottom: 8px;
          background: rgba(255, 255, 255, 0.01)
        }

        .links {
          display: flex;
          gap: 8px
        }

        footer {
          font-size: 12px;
          color: var(--muted);
          margin-top: 8px;
          text-align: center
        }

        /* light theme variables toggled by JS */
        .light {
          --bg-0: #f1f5f9;
          --bg-1: #f8fafc;
          --card: rgba(2, 6, 23, 0.03);
          --muted: #475569;
          --accent: linear-gradient(90deg, #7c5cff, #06b6d4);
          color-scheme: light;
        }

        /* focus & accessibility */
        input:focus,
        button:focus {
          box-shadow: 0 0 0 6px rgba(124, 92, 255, 0.08);
          outline: none;
        }