:root {
      --bg-1: #fff7fb;
      --bg-2: #eef6ff;
      --card: rgba(255, 255, 255, 0.82);
      --border: rgba(255, 255, 255, 0.62);
      --text: #1e2430;
      --muted: #667085;
      --accent: #2e9f44;
      --accent-2: #f5a000;
      --success: #16a34a;
      --danger: #dc2626;
      --shadow: 0 20px 50px rgba(31, 41, 55, 0.12);
      --radius: 24px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(245, 160, 0, 0.15), transparent 28%),
        radial-gradient(circle at top right, rgba(46, 159, 68, 0.16), transparent 30%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2));
      min-height: 100vh;
      padding: 32px 16px;
    }

    .container {
      width: min(1100px, 100%);
      margin: 0 auto;
    }

    .hero-card,
    .panel,
    .login-card {
      background: var(--card);
      border: 1px solid var(--border);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .hero-card {
      padding: 28px;
      display: grid;
      gap: 20px;
      margin-bottom: 22px;
    }

    .top-image-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 0 4px;
    }

    .top-image {
      width: min(100%, 760px);
      height: auto;
      display: block;
      filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.15));
    }

    .badge {
      width: fit-content;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(46, 159, 68, 0.12);
      color: var(--accent);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
    }

    h1, h2 {
      margin: 0;
    }

    h1 {
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.05;
    }

    .subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 760px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
    }

    .stat-box {
      padding: 18px 20px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.65);
    }

    .stat-label {
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .stat-value {
      font-size: 1.9rem;
      font-weight: 800;
    }

    .panel {
      padding: 22px;
    }

    .panel-header,
    .toolbar {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .panel-note,
    .helper-text,
    .footer-note,
    .status {
      color: var(--muted);
      font-size: 0.94rem;
      margin: 4px 0 0;
    }

    .status {
      margin-top: 14px;
    }

    .status.error,
    .error-box {
      color: #b42318;
    }

    .add-form,
    .login-form {
      display: grid;
      gap: 12px;
    }

    .add-form {
      grid-template-columns: minmax(0, 1fr) auto;
      margin-bottom: 18px;
    }

    .input {
      width: 100%;
      border: 1px solid rgba(148, 163, 184, 0.35);
      border-radius: 16px;
      padding: 14px 16px;
      font-size: 1rem;
      background: rgba(255,255,255,0.92);
      color: var(--text);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .input:focus {
      border-color: rgba(46, 159, 68, 0.6);
      box-shadow: 0 0 0 4px rgba(46, 159, 68, 0.12);
    }

    button,
    .link-button {
      border: 0;
      border-radius: 16px;
      padding: 12px 16px;
      font-size: 0.96rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease;
    }

    button:hover,
    .link-button:hover {
      transform: translateY(-1px);
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.48;
      transform: none;
    }

    .btn-primary {
      color: white;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 12px 24px rgba(46, 159, 68, 0.2);
    }

    .btn-success {
      color: white;
      background: linear-gradient(135deg, #22c55e, #16a34a);
    }

    .btn-warning {
      color: #1e2430;
      background: linear-gradient(135deg, #facc15, #f5a000);
    }

    .btn-secondary {
      color: var(--text);
      background: rgba(15, 23, 42, 0.06);
    }

    .btn-danger {
      color: white;
      background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    .table-wrap {
      overflow-x: auto;
      border-radius: 18px;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.5);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 860px;
    }

    th, td {
      text-align: left;
      padding: 16px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.18);
      vertical-align: middle;
    }

    th {
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      background: rgba(255,255,255,0.6);
    }

    tbody tr:hover {
      background: rgba(255, 255, 255, 0.55);
    }

    .person-cell {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
    }

    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: white;
      font-weight: 800;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
      flex-shrink: 0;
    }

    .misa-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 56px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(46, 159, 68, 0.12);
      color: var(--accent);
      font-weight: 800;
    }

    .misa-count.paid {
      background: rgba(22, 163, 74, 0.12);
      color: var(--success);
    }

    .misa-count.unpaid {
      background: rgba(220, 38, 38, 0.1);
      color: var(--danger);
    }

    .misa-count.pending {
      background: rgba(245, 160, 0, 0.12);
      color: #b45309;
    }

    .streak-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.25em;
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 0.85rem;
      background: linear-gradient(135deg, #ff6b35, #f7c948);
      color: white;
      white-space: nowrap;
    }

    .streak-badge.rescue {
      background: linear-gradient(135deg, #f59e0b, #fde68a);
      color: #78350f;
      animation: pulse-rescue 1.8s ease-in-out infinite;
    }

    @keyframes pulse-rescue {
      0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
      50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    }

    .row-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .spot-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      display: inline-block;
      animation: pulse-dot 1.4s ease-in-out infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.75); }
    }

    .spot-off .spot-dot {
      background: var(--muted);
      animation: none;
    }

    .stat-value.spot-price {
      background: linear-gradient(135deg, #ff6b35, #f7c948);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .btn-spot-on {
      color: white;
      background: linear-gradient(135deg, #ff6b35, #f7c948);
    }

    .btn-spot-off {
      color: var(--text);
      background: rgba(15, 23, 42, 0.08);
    }

    .price-chart {
      width: 100%;
      height: 200px;
      display: block;
    }

    .price-chart text {
      fill: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .price-chart .grid-line {
      stroke: rgba(148, 163, 184, 0.22);
      stroke-width: 1;
    }

    .price-chart .price-line {
      fill: none;
      stroke: url(#priceGradient);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .price-chart .price-area {
      fill: url(#priceAreaGradient);
    }

    .price-chart .base-line {
      stroke: rgba(148, 163, 184, 0.5);
      stroke-width: 1;
      stroke-dasharray: 4 4;
    }

    .price-chart .current-dot {
      fill: #ff6b35;
    }

    .charts-panel {
      margin-bottom: 22px;
    }

    .spot-live-row {
      display: flex;
      gap: 0;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.55);
      margin-bottom: 18px;
    }

    .spot-live-cell {
      flex: 1;
      padding: 14px 20px;
      border-right: 1px solid rgba(148,163,184,0.15);
      min-width: 0;
    }

    .spot-live-cell:last-child { border-right: none; }

    .spot-live-label {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }

    .spot-live-value {
      font-size: 1.45rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .spot-live-value.is-spot {
      background: linear-gradient(135deg, #ff6b35, #f7c948);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .day-ahead-section {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(148,163,184,0.15);
    }

    .day-ahead-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 12px;
    }

    .day-ahead-header h3 { margin: 0; font-size: 1rem; }
    .day-ahead-header span { color: var(--muted); font-size: 0.85rem; font-weight: 700; }

    .spot-params-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }

    .param-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .param-group label {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .param-group .param-unit {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .temp-price-chart {
      width: 100%;
      height: 180px;
      display: block;
      margin-bottom: 18px;
    }

    .temp-price-chart text {
      fill: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .temp-price-chart .tp-grid {
      stroke: rgba(148, 163, 184, 0.22);
      stroke-width: 1;
    }

    .temp-price-chart .tp-floor {
      stroke: var(--danger);
      stroke-width: 1.5;
      stroke-dasharray: 5 4;
      fill: none;
    }

    .temp-price-chart .tp-line {
      fill: none;
      stroke: #ff6b35;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .temp-price-chart .tp-area {
      fill: rgba(255, 107, 53, 0.1);
    }

    .temp-price-chart .tp-dot-baseline {
      fill: #f7c948;
    }

    .temp-price-chart .tp-dot-current {
      fill: #ff6b35;
    }

    .chart-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 18px;
    }

    .chart-block {
      min-width: 0;
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.55);
    }

    .chart-title {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 14px;
    }

    .chart-title h3 {
      margin: 0;
      font-size: 1rem;
    }

    .chart-title span {
      color: var(--muted);
      font-size: 0.85rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .bar-list {
      display: grid;
      gap: 12px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .bar-name {
      min-width: 0;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bar-track {
      height: 14px;
      display: flex;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.08);
    }

    .bar-paid,
    .bar-pending,
    .bar-unpaid {
      min-width: 0;
    }

    .bar-paid {
      background: linear-gradient(135deg, #22c55e, #16a34a);
    }

    .bar-unpaid {
      background: linear-gradient(135deg, #f97316, #dc2626);
    }

    .bar-pending {
      background: linear-gradient(135deg, #facc15, #f5a000);
    }

    .bar-value {
      min-width: 34px;
      text-align: right;
      color: var(--muted);
      font-weight: 800;
    }

    .chart-legend {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 14px;
      color: var(--muted);
      font-size: 0.84rem;
      font-weight: 700;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
    }

    .legend-swatch.paid {
      background: var(--success);
    }

    .legend-swatch.unpaid {
      background: var(--danger);
    }

    .legend-swatch.pending {
      background: var(--accent-2);
    }

    .weekly-chart {
      width: 100%;
      height: 260px;
      display: block;
    }

    .weekly-chart text {
      fill: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .weekly-chart .grid-line {
      stroke: rgba(148, 163, 184, 0.22);
      stroke-width: 1;
    }

    .weekly-chart .week-bar {
      fill: url(#weeklyGradient);
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(15, 23, 42, 0.42);
    }

    .modal.hidden {
      display: none;
    }

    .modal-card {
      width: min(440px, 100%);
      display: grid;
      gap: 16px;
      padding: 22px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .modal-close {
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 50%;
    }

    .payment-qr {
      width: min(100%, 280px);
      justify-self: center;
      border-radius: 12px;
      border: 1px solid rgba(148, 163, 184, 0.22);
    }

    .payment-amount {
      font-size: 1.2rem;
      font-weight: 800;
      text-align: center;
    }

    .pay-form {
      display: grid;
      gap: 12px;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .empty {
      text-align: center;
      padding: 40px 18px;
      color: var(--muted);
    }

    .login-shell {
      min-height: calc(100vh - 64px);
      display: grid;
      place-items: center;
    }

    .login-card {
      width: min(460px, 100%);
      padding: 28px;
      display: grid;
      gap: 18px;
    }

    .login-title {
      font-size: 2rem;
    }

    .error-box {
      background: rgba(254, 228, 226, 0.9);
      border: 1px solid rgba(240, 68, 56, 0.2);
      border-radius: 14px;
      padding: 12px 14px;
    }

    .credentials-box {
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.75);
      border-radius: 16px;
      padding: 14px 16px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    code {
      background: rgba(15, 23, 42, 0.06);
      padding: 2px 6px;
      border-radius: 8px;
    }

    @media (max-width: 720px) {
      body { padding: 18px 12px; }
      .hero-card, .panel, .login-card { padding: 18px; }
      .add-form { grid-template-columns: 1fr; }
      .login-shell { min-height: auto; padding-top: 20px; }
      .table-wrap { overflow-x: visible; }
      table, tbody, tr, td { display: block; }
      table { min-width: 0; }
      thead { display: none; }
      tbody {
        display: grid;
        gap: 10px;
        padding: 10px;
      }
      tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "person person"
          "total week"
          "streak streak"
          "paid pending"
          "unpaid unpaid"
          "action action";
        gap: 10px 12px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.68);
      }
      tbody tr:hover { background: rgba(255,255,255,0.78); }
      td {
        padding: 0;
        border-bottom: 0;
      }
      .person-column { grid-area: person; min-width: 0; }
      .count-column { grid-area: total; }
      .week-column { grid-area: week; }
      .streak-column { grid-area: streak; }
      .paid-column { grid-area: paid; }
      .pending-column { grid-area: pending; }
      .unpaid-column { grid-area: unpaid; }
      .action-column {
        grid-area: action;
        align-self: center;
      }
      .person-cell { min-width: 0; }
      .person-cell > div:last-child {
        min-width: 0;
        overflow-wrap: break-word;
      }
      .count-column,
      .week-column,
      .paid-column,
      .pending-column,
      .unpaid-column {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 0.82rem;
      }
      .count-column::before,
      .week-column::before,
      .paid-column::before,
      .pending-column::before,
      .unpaid-column::before {
        content: attr(data-label);
        font-weight: 700;
      }
      .row-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        justify-content: stretch;
      }
      .row-actions .btn-success,
      .row-actions .btn-warning,
      .row-actions .btn-primary {
        min-height: 42px;
        padding: 10px 12px;
        white-space: nowrap;
      }
      .chart-grid {
        grid-template-columns: 1fr;
      }
      .chart-block {
        padding: 14px;
      }
      .bar-row {
        grid-template-columns: minmax(78px, 0.38fr) minmax(0, 1fr) auto;
      }
      .weekly-chart {
        height: 220px;
      }
      .empty {
        grid-column: 1 / -1;
        padding: 24px 10px;
      }

      /* ── Workweek table: restore table layout (overrides the generic
            "table,tbody,tr,td { display:block }" rule above) ── */
      .ww-table           { display: table; width: 100%; min-width: 0 !important;
                            table-layout: fixed; }
      .ww-table thead     { display: table-header-group; }
      .ww-table tbody     { display: table-row-group; padding: 0; gap: 0; }
      .ww-table tbody tr  { display: table-row;
                            grid-template-columns: unset; grid-template-areas: unset;
                            padding: 0; background: none; border-radius: 0; }
      .ww-table tbody tr:hover { background: none; }
      .ww-table th,
      .ww-table td        { display: table-cell; padding: 4px 2px;
                            border-bottom: 1px solid rgba(148,163,184,0.09); }
      /* First column: fixed narrow width for "W20" label */
      .ww-table thead th:first-child,
      .ww-table .ww-week-label { width: 36px !important; padding-left: 6px !important;
                                 padding-right: 2px !important; }
      /* Remaining header cells: equal share of leftover width */
      .ww-table thead th  { padding: 6px 2px; font-size: 0.72rem; letter-spacing: 0;
                            border-bottom: 1px solid rgba(148,163,184,0.15); overflow: hidden; }

      /* week label: swap to short "W20" form */
      .ww-table .ww-week-label { font-size: 0.72rem; font-weight: 700; }
      .ww-table .ww-week-short { display: inline; }   /* 0,2,0 beats base display:none (0,1,0) */
      .ww-table .ww-week-full  { display: none; }

      /* cells: shrink to fit phone width */
      .ww-cell  { min-width: 0; width: 100%; padding: 5px 2px; border-radius: 8px;
                  box-sizing: border-box; }
      .ww-count { font-size: 0.95rem; }
      .ww-temp  { font-size: 0.62rem; margin-top: 2px; }

      /* ── Stats: 2 columns ── */
      .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .stat-box { padding: 14px; }
      .stat-label { font-size: 0.82rem; margin-bottom: 5px; }
      .stat-value { font-size: 1.45rem; }

      /* ── Spot live row: 2 × 2 grid ── */
      .spot-live-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .spot-live-cell { border-right: none; }
      .spot-live-cell:nth-child(odd)  { border-right: 1px solid rgba(148,163,184,0.15); }
      .spot-live-cell:nth-child(1),
      .spot-live-cell:nth-child(2)    { border-bottom: 1px solid rgba(148,163,184,0.15); }
    }

    /* ── Workweek analytics ───────────────────────────────────────────── */
    .ww-table-wrap {
      overflow-x: auto;
      border-radius: 16px;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.55);
      margin-top: 16px;
    }

    .ww-table {
      width: 100%;
      border-collapse: collapse;
    }

    .ww-table thead th {
      padding: 11px 10px;
      text-align: center;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-bottom: 1px solid rgba(148,163,184,0.15);
    }

    .ww-table thead th:first-child { text-align: left; padding-left: 16px; }

    .ww-table tbody tr:last-child td { border-bottom: none; }

    .ww-table tbody td {
      padding: 7px 6px;
      text-align: center;
      border-bottom: 1px solid rgba(148,163,184,0.09);
      vertical-align: middle;
    }

    .ww-week-label {
      text-align: left !important;
      padding-left: 16px !important;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
    }

    .ww-cell {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      border-radius: 12px;
      padding: 8px 10px;
      transition: background 0.15s;
    }

    .ww-count {
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      color: var(--text);
    }

    .ww-temp {
      font-size: 0.73rem;
      font-weight: 700;
      margin-top: 4px;
      letter-spacing: 0.01em;
    }

    .ww-cell.ww-today {
      outline: 2px solid var(--accent);
      outline-offset: 0px;
    }

    .ww-cell.ww-future .ww-count {
      color: rgba(148,163,184,0.35);
    }

    /* short/full week label variants — toggled via media query */
    .ww-week-short { display: none; }

    /* ── 480px — phone-specific ─────────────────────────────────────────── */
    @media (max-width: 480px) {
      body { padding: 12px 8px; }
      .hero-card, .panel, .login-card { padding: 14px; }
      .stats { gap: 8px; }
      .stat-box { padding: 11px 12px; }
      .stat-value { font-size: 1.2rem; }
      .stat-label { font-size: 0.78rem; }

      h2 { font-size: 1.1rem; }
      .panel-header { margin-bottom: 12px; gap: 8px; }
      .panel-note { font-size: 0.86rem; }

      /* Modals: use more of the screen */
      .modal { padding: 10px; }
      .modal-card { padding: 16px; border-radius: 18px; }

      /* Workweek table: no horizontal scroll on 360 px+ screens */
      .ww-table-wrap { border-radius: 12px; }
      .ww-table thead th { padding: 5px 2px; font-size: 0.68rem; letter-spacing: 0; }
      .ww-table thead th:first-child,
      .ww-table .ww-week-label { width: 30px !important; padding-left: 4px !important;
                                  padding-right: 2px !important; font-size: 0.67rem; }
      .ww-cell { padding: 4px 2px; border-radius: 7px; }
      .ww-count { font-size: 0.88rem; }
      .ww-temp  { font-size: 0.58rem; }

      /* Row action buttons */
      .row-actions { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
      .row-actions .btn-success,
      .row-actions .btn-warning,
      .row-actions .btn-primary { min-height: 38px; padding: 8px 8px; font-size: 0.88rem; }

      /* Reduce top image height so hero doesn't dominate the screen */
      .top-image { max-height: 160px; object-fit: contain; }
    }

/* ── Admin area ──────────────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-tab {
  color: var(--text);
  background: rgba(15, 23, 42, 0.06);
}

.admin-tab.active {
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 24px rgba(46, 159, 68, 0.2);
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.admin-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.admin-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.admin-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.stat-box.stat-link {
  text-decoration: none;
  color: inherit;
  display: block;
}