:root {
      --bg: #0e0f0c;
      --bg-elev: #171912;
      --bg-card: #1c1f16;
      --bg-soft: #24281c;
      --line: rgba(232, 236, 210, 0.1);
      --line-strong: rgba(232, 236, 210, 0.18);
      --text: #e8ecd2;
      --muted: #9aa38a;
      --faint: #6b735c;
      --acid: #d6f34a;
      --acid-dim: rgba(214, 243, 74, 0.14);
      --ember: #ff7a45;
      --ember-dim: rgba(255, 122, 69, 0.15);
      --sky: #7ec8ff;
      --ok: #6ee7a8;
      --rest: #8b93a7;
      --radius: 14px;
      --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
      --font-display: "Barlow Condensed", system-ui, sans-serif;
      --font-body: "IBM Plex Sans", system-ui, sans-serif;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--text);
      background:
        radial-gradient(1000px 500px at 10% -10%, rgba(214, 243, 74, 0.08), transparent 55%),
        radial-gradient(800px 420px at 100% 0%, rgba(255, 122, 69, 0.07), transparent 50%),
        var(--bg);
      min-height: 100vh;
      min-height: 100dvh;
      /* iPhone / iPad home indicator */
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      -webkit-tap-highlight-color: rgba(214, 243, 74, 0.12);
      touch-action: manipulation;
    }

    /* grain */
    body::before {
      content: "";
      pointer-events: none;
      position: fixed;
      inset: 0;
      opacity: 0.04;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      z-index: 999;
    }

    .app {
      display: grid;
      grid-template-columns: 220px 1fr;
      min-height: 100vh;
    }

    /* Sidebar */
    .sidebar {
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, #12140f 0%, #0e0f0c 100%);
      padding: 22px 16px;
      display: flex;
      flex-direction: column;
      gap: 28px;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 4px 8px;
    }
    .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(145deg, var(--acid), #9bc41e);
      color: #111;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 18px;
      display: grid;
      place-items: center;
      letter-spacing: 0.02em;
    }
    .brand-text strong {
      display: block;
      font-family: var(--font-display);
      font-size: 22px;
      letter-spacing: 0.04em;
      line-height: 1;
    }
    .brand-text span {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .nav { display: flex; flex-direction: column; gap: 4px; }
    .nav button {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--muted);
      text-align: left;
      padding: 12px 14px;
      border-radius: 10px;
      font: 500 14px/1.2 var(--font-body);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: 0.15s ease;
    }
    .nav button:hover { background: var(--bg-soft); color: var(--text); }
    .nav button.active {
      background: var(--acid-dim);
      color: var(--acid);
      box-shadow: inset 0 0 0 1px rgba(214, 243, 74, 0.25);
    }
    .nav .ico { width: 18px; opacity: 0.9; }

    .sidebar-foot {
      margin-top: auto;
      padding: 14px;
      border-radius: 12px;
      background: var(--bg-card);
      border: 1px solid var(--line);
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }
    .sidebar-foot strong { color: var(--acid); font-weight: 600; }

    /* Main */
    .main {
      padding: 22px 28px 40px;
      max-width: 1280px;
    }

    .topbar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }
    .topbar h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 0.95;
    }
    .topbar p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
    }
    .top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .btn {
      appearance: none;
      border: 1px solid var(--line-strong);
      background: var(--bg-card);
      color: var(--text);
      border-radius: 999px;
      min-height: 44px; /* iOS HIG touch target */
      touch-action: manipulation;
      padding: 10px 16px;
      font: 500 13px/1 var(--font-body);
      cursor: pointer;
      transition: 0.15s ease;
    }
    .btn:hover { border-color: var(--muted); }
    .btn.primary {
      background: var(--acid);
      color: #14160d;
      border-color: transparent;
      font-weight: 600;
    }
    .btn.primary:hover { filter: brightness(1.05); }
    .btn.ghost { background: transparent; }
    .btn.danger {
      background: var(--ember-dim);
      border-color: rgba(255, 122, 69, 0.35);
      color: #ffb090;
    }

    .view { display: none; animation: fade 0.25s ease; }
    .view.active { display: block; }
    @keyframes fade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 16px;
    }
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .stack { display: flex; flex-direction: column; gap: 16px; }

    .card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow);
    }
    .card h2, .card h3 {
      margin: 0 0 12px;
      font-family: var(--font-display);
      letter-spacing: 0.04em;
      font-weight: 700;
    }
    .card h2 { font-size: 22px; }
    .card h3 { font-size: 18px; color: var(--muted); font-weight: 600; }
    .card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .card-head h2, .card-head h3 { margin: 0; }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .pill.acid { background: var(--acid-dim); color: var(--acid); }
    .pill.ember { background: var(--ember-dim); color: #ffb090; }
    .pill.rest { background: rgba(139, 147, 167, 0.18); color: #c4cad8; }
    .pill.ok { background: rgba(110, 231, 168, 0.12); color: var(--ok); }
    .pill.sky { background: rgba(126, 200, 255, 0.12); color: var(--sky); }

    /* Today hero */
    .hero {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(214, 243, 74, 0.12), transparent 45%),
        linear-gradient(320deg, rgba(255, 122, 69, 0.1), transparent 40%),
        var(--bg-card);
    }
    .hero::after {
      content: "TODAY";
      position: absolute;
      right: -8px;
      top: -18px;
      font-family: var(--font-display);
      font-size: 120px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: rgba(232, 236, 210, 0.035);
      line-height: 1;
      pointer-events: none;
    }
    .hero-date {
      font-family: var(--font-display);
      font-size: 48px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
      margin: 6px 0 14px;
    }
    .main-session {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: start;
      padding: 16px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.28);
      border: 1px solid var(--line);
    }
    .main-session .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }
    .main-session h4 {
      margin: 0 0 6px;
      font-size: 18px;
      font-weight: 600;
    }
    .main-session p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .kw {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }
    .kw span {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 6px;
      background: var(--bg-soft);
      color: var(--muted);
      border: 1px solid var(--line);
    }
    .session-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 120px;
    }
    .session-actions .btn { width: 100%; justify-content: center; text-align: center; }

    .extras {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .extra-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(126, 200, 255, 0.06);
      border: 1px dashed rgba(126, 200, 255, 0.28);
      font-size: 13px;
    }
    .extra-row span { color: var(--sky); font-weight: 500; }

    /* Stats strip */
    .stat {
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
    }
    .stat .label {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--faint);
      margin-bottom: 6px;
    }
    .stat .value {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
    }
    .stat .sub { margin-top: 6px; font-size: 12px; color: var(--muted); }

    /* Tracks */
    .track {
      padding: 14px;
      border-radius: 12px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      margin-bottom: 10px;
    }
    .track:last-child { margin-bottom: 0; }
    .track-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }
    .track-top strong { font-size: 14px; }
    .track-top span { font-size: 12px; color: var(--muted); }
    .bar {
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }
    .bar > i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--acid), #a8d623);
    }
    .bar.ember > i { background: linear-gradient(90deg, var(--ember), #ffb070); }
    .bar.sky > i { background: linear-gradient(90deg, var(--sky), #4aa3e0); }

    /* Calendar */
    .cal-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .cal-toolbar .month {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
    }
    .cal-dow {
      text-align: center;
      font-size: 11px;
      color: var(--faint);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding-bottom: 4px;
    }
    .day-cell {
      min-height: 92px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--bg-elev);
      padding: 8px;
      cursor: pointer;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-align: left;
      color: inherit;
      font: inherit;
      touch-action: manipulation;
      -webkit-user-select: none;
      user-select: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .day-cell:hover {
        border-color: rgba(214, 243, 74, 0.35);
        transform: translateY(-1px);
      }
    }
    .day-cell:active {
      border-color: rgba(214, 243, 74, 0.45);
    }
    .day-cell.muted { opacity: 0.35; pointer-events: none; }
    .day-cell.today { box-shadow: inset 0 0 0 1px rgba(214, 243, 74, 0.45); }
    .day-cell.rest {
      background: rgba(139, 147, 167, 0.08);
      border-style: dashed;
    }
    .day-cell.done { background: rgba(110, 231, 168, 0.06); }
    .day-cell.swap-selected {
      border-color: var(--acid) !important;
      box-shadow: inset 0 0 0 2px rgba(214, 243, 74, 0.65), 0 0 0 1px rgba(214, 243, 74, 0.35);
      background: rgba(214, 243, 74, 0.1);
    }
    .day-cell.drag-over {
      border-color: var(--acid) !important;
      box-shadow: inset 0 0 0 1px rgba(214, 243, 74, 0.5);
    }
    .day-cell.dragging { opacity: 0.45; }
    .swap-hint {
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--acid-dim);
      border: 1px solid rgba(214, 243, 74, 0.35);
      color: var(--acid);
      font-size: 13px;
      line-height: 1.4;
    }
    .cal-legend {
      margin: 14px 0 0;
      font-size: 12px;
      color: var(--faint);
      line-height: 1.45;
    }
    .day-num {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .day-tag {
      font-size: 10px;
      line-height: 1.25;
      color: var(--muted);
      word-break: break-word;
    }
    .day-tag b {
      color: var(--text);
      font-weight: 600;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .dot-row { display: flex; gap: 4px; margin-top: auto; }
    .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--acid);
    }
    .dot.extra { background: var(--sky); }
    .dot.rest { background: var(--rest); }

    /* Timeline / records */
    .timeline { display: flex; flex-direction: column; gap: 0; }
    .tl-item {
      display: grid;
      grid-template-columns: 88px 16px 1fr;
      gap: 12px;
      padding: 12px 0;
    }
    .tl-date {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      color: var(--muted);
      padding-top: 2px;
    }
    .tl-rail {
      position: relative;
      display: flex;
      justify-content: center;
    }
    .tl-rail::before {
      content: "";
      position: absolute;
      top: 0; bottom: -12px;
      width: 2px;
      background: var(--line-strong);
    }
    .tl-item:last-child .tl-rail::before { bottom: 50%; }
    .tl-dot {
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--acid);
      box-shadow: 0 0 0 4px var(--acid-dim);
      position: relative;
      z-index: 1;
      margin-top: 4px;
    }
    .tl-dot.rest { background: var(--rest); box-shadow: 0 0 0 4px rgba(139,147,167,.2); }
    .tl-body {
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
    }
    .tl-body strong { display: block; margin-bottom: 4px; }
    .tl-body p { margin: 0; font-size: 13px; color: var(--muted); }

    /* Review charts (fake) */
    .bars-chart {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;
      align-items: end;
      height: 140px;
      margin-top: 8px;
    }
    .bars-chart .col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
      justify-content: flex-end;
    }
    .bars-chart .col b {
      width: 100%;
      border-radius: 6px 6px 2px 2px;
      background: linear-gradient(180deg, var(--acid), rgba(214,243,74,.25));
      min-height: 8px;
    }
    .bars-chart .col span {
      font-size: 10px;
      color: var(--faint);
    }

    /* Dual metric week chart: count + duration */
    .week-dual-chart {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;
      align-items: end;
      height: 168px;
      margin-top: 4px;
      padding-bottom: 2px;
    }
    .week-dual-chart .col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      height: 100%;
      min-width: 0;
    }
    .week-dual-chart .pair {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 3px;
      width: 100%;
      height: 100%;
    }
    .week-dual-chart .bar-count,
    .week-dual-chart .bar-dur {
      width: 42%;
      max-width: 14px;
      border-radius: 5px 5px 2px 2px;
      min-height: 6px;
      cursor: default;
      transition: filter 0.15s ease;
    }
    .week-dual-chart .bar-count {
      background: linear-gradient(180deg, var(--acid), rgba(214, 243, 74, 0.28));
    }
    .week-dual-chart .bar-dur {
      background: linear-gradient(180deg, var(--sky), rgba(126, 200, 255, 0.25));
    }
    .week-dual-chart .col:hover .bar-count,
    .week-dual-chart .col:hover .bar-dur {
      filter: brightness(1.12);
    }
    .week-dual-chart .col span {
      font-size: 10px;
      color: var(--faint);
      letter-spacing: 0.02em;
    }
    .week-dual-totals {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .tag-cloud span {
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      font-size: 13px;
      color: var(--muted);
    }
    .tag-cloud span em {
      font-style: normal;
      color: var(--acid);
      font-weight: 600;
      margin-left: 6px;
    }

    /* Import strip */
    .import-box {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .import-box input {
      flex: 1;
      min-width: 220px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: var(--bg);
      color: var(--text);
      padding: 12px 16px;
      font: 400 13px var(--font-body);
      outline: none;
    }
    .import-box input:focus {
      border-color: rgba(214, 243, 74, 0.5);
    }

    /* Drawer */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      opacity: 0;
      pointer-events: none;
      transition: 0.2s ease;
      z-index: 40;
    }
    .overlay.open { opacity: 1; pointer-events: auto; }
    .drawer {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: min(420px, 100%);
      max-width: 100vw;
      background: #141610;
      border-left: 1px solid var(--line-strong);
      box-shadow: var(--shadow);
      transform: translateX(100%);
      transition: 0.25s ease;
      z-index: 50;
      padding: 22px;
      padding-top: max(22px, env(safe-area-inset-top));
      padding-bottom: max(22px, env(safe-area-inset-bottom));
      padding-right: max(22px, env(safe-area-inset-right));
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .drawer.open { transform: none; }
    .drawer h2 {
      margin: 0 0 4px;
      font-family: var(--font-display);
      font-size: 32px;
      letter-spacing: 0.03em;
    }
    .drawer .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
    .drawer section { margin-bottom: 18px; }
    .drawer section h3 {
      margin: 0 0 10px;
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .action-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .action-grid .btn { border-radius: 12px; padding: 14px 12px; }
    .note {
      font-size: 12px;
      color: var(--faint);
      line-height: 1.5;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--bg-soft);
      border: 1px solid var(--line);
    }

    .proto-banner {
      position: sticky;
      top: 0;
      z-index: 30;
      margin: -22px -28px 18px;
      padding: 10px 28px;
      background: linear-gradient(90deg, rgba(214,243,74,0.16), rgba(255,122,69,0.12));
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .proto-banner b { color: var(--acid); }

    /* —— Tablet / iPad portrait & narrow desktop —— */
    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; }
      .sidebar {
        height: auto;
        position: sticky;
        top: 0;
        z-index: 25;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 12px 12px 10px;
        gap: 12px;
        background: rgba(14, 15, 12, 0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .brand { padding: 0 4px; }
      .nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
      }
      .nav::-webkit-scrollbar { display: none; }
      .nav button {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;
        padding: 10px 14px;
      }
      .sidebar-foot { display: none; }
      .main {
        padding: 16px 16px 32px;
        max-width: none;
      }
      .proto-banner {
        margin: -16px -16px 14px;
        padding: 10px 16px;
        font-size: 11px;
      }
      .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      .top-actions .btn { min-height: 44px; }
      .grid-2, .grid-3 { grid-template-columns: 1fr; }
      .main-session { grid-template-columns: 1fr; }
      .session-actions { flex-direction: row; flex-wrap: wrap; }
      .session-actions .btn { width: auto; flex: 1 1 auto; min-width: 120px; }
      .cal-toolbar {
        flex-wrap: wrap;
        gap: 10px;
      }
      .cal-toolbar .month { font-size: 24px; }
      .cal-nav-actions { width: 100%; justify-content: flex-start; }
      .cal-grid { gap: 6px; }
      .day-cell {
        min-height: 88px;
        padding: 8px 6px;
      }
      .day-num { font-size: 17px; }
      .day-tag { font-size: 10px; }
      .tl-item {
        grid-template-columns: 72px 12px 1fr;
        gap: 8px;
      }
      .action-grid .btn { min-height: 48px; }
      .chart-bars { gap: 4px; }
    }

    /* —— Phone / small tablet —— */
    @media (max-width: 640px) {
      .main { padding: 12px 12px max(28px, env(safe-area-inset-bottom)); }
      .proto-banner {
        margin: -12px -12px 12px;
        padding: 8px 12px;
        gap: 6px;
      }
      #deploy-marker { display: none; }
      .topbar h1 { font-size: 30px; }
      .topbar p { font-size: 13px; }
      .cal-grid { gap: 4px; }
      .cal-dow { font-size: 10px; }
      .day-cell {
        min-height: 64px;
        padding: 5px 4px;
        border-radius: 10px;
        gap: 3px;
      }
      .day-num { font-size: 15px; }
      .day-tag {
        font-size: 9px;
        -webkit-line-clamp: 2;
      }
      .day-tag b {
        -webkit-line-clamp: 2;
      }
      .dot { width: 5px; height: 5px; }
      .drawer {
        width: 100%;
        border-left: 0;
      }
      .login-card { padding: 22px 18px; }
      .login-card h1 { font-size: 30px; }
      .import-box { flex-direction: column; }
      .import-box input { min-width: 0; width: 100%; }
      .stat { min-width: 0; }
      .tl-item {
        grid-template-columns: 56px 10px 1fr;
      }
      .tl-date { font-size: 14px; }
    }

    /* iPad landscape: keep usable two-column feel when wide enough */
    @media (min-width: 981px) and (max-width: 1180px) {
      .app { grid-template-columns: 200px 1fr; }
      .main { padding: 20px 20px 36px; }
      .day-cell { min-height: 84px; }
    }

    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }