:root{
    /* Black & White (default theme) — true monochrome, dark */
    --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c; --border:#333333;
    --text:#f5f5f5; --dim:#a3a3a3; --accent:#ffffff; --accent-dim:#2a2a2a; --accent-rgb:255,255,255;
    --red:#ff5c5c; --red-dim:#3a1a1a; --yellow:#ffd166; --yellow-dim:#3a3320;
    --green:#4ade80; --green-dim:#1a3a24;
    --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
    --border-w:0px;
    --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.03);
    --bg-gradient:
      radial-gradient(1100px circle at 12% -8%, rgba(255,255,255,.10), transparent 55%),
      radial-gradient(900px circle at 100% 8%, rgba(255,255,255,.06), transparent 55%),
      radial-gradient(1000px circle at 50% 120%, rgba(255,255,255,.04), transparent 60%);
  }
  :root[data-theme="mono-light"]{
    /* White & Black — inverse monochrome, light */
    --bg:#fafafa; --panel:#ffffff; --panel2:#f0f0f0; --border:#d4d4d4;
    --text:#0a0a0a; --dim:#525252; --accent:#000000; --accent-dim:#e5e5e5; --accent-rgb:0,0,0;
    --red:#dc2626; --red-dim:#fee2e2; --yellow:#ca8a04; --yellow-dim:#fef3c7;
    --green:#16a34a; --green-dim:#dcfce7;
    --glass:rgba(255,255,255,.65); --glass2:rgba(255,255,255,.42);
    --bg-gradient:
      radial-gradient(1100px circle at 10% -10%, rgba(0,0,0,.06), transparent 55%),
      radial-gradient(900px circle at 100% 10%, rgba(0,0,0,.04), transparent 55%);
  }
  :root[data-theme="blue-white"]{
    /* Blue & White — light, crisp blue accent */
    --bg:#f5f9ff; --panel:#ffffff; --panel2:#eaf2ff; --border:#c7dbf5;
    --text:#0b1e33; --dim:#3d5875; --accent:#0066ff; --accent-dim:#dbe9ff; --accent-rgb:0,102,255;
    --red:#dc2626; --red-dim:#fee2e2; --yellow:#ca8a04; --yellow-dim:#fef3c7;
    --green:#16a34a; --green-dim:#dcfce7;
    --glass:rgba(255,255,255,.65); --glass2:rgba(255,255,255,.42);
    --bg-gradient:
      radial-gradient(1100px circle at 10% -10%, rgba(0,102,255,.14), transparent 55%),
      radial-gradient(900px circle at 100% 10%, rgba(0,102,255,.08), transparent 55%);
  }
  :root[data-theme="black-gold"]{
    /* Black & Gold — dark, luxe amber accent */
    --bg:#0d0b06; --panel:#171310; --panel2:#211a12; --border:#4a3c20;
    --text:#f5ecd8; --dim:#b8a67c; --accent:#d4af37; --accent-dim:#4a3a12; --accent-rgb:212,175,55;
    --red:#ff6b5b; --red-dim:#4a1f1a; --yellow:#ffd166; --yellow-dim:#4a3a1a;
    --green:#4ade80; --green-dim:#173a26;
    --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.03);
    --bg-gradient:
      radial-gradient(1100px circle at 12% -8%, rgba(212,175,55,.18), transparent 55%),
      radial-gradient(900px circle at 100% 8%, rgba(212,175,55,.10), transparent 55%),
      radial-gradient(1000px circle at 50% 120%, rgba(212,175,55,.06), transparent 60%);
  }
  :root[data-theme="black-emerald"]{
    /* Black & Emerald — dark, sharp green accent */
    --bg:#080b09; --panel:#11150f; --panel2:#171d15; --border:#2a3a26;
    --text:#e3ede3; --dim:#94b39a; --accent:#22c55e; --accent-dim:#0f3a20; --accent-rgb:34,197,94;
    --red:#ff5c5c; --red-dim:#3a1a1a; --yellow:#ffd166; --yellow-dim:#3a3320;
    --green:#4ade80; --green-dim:#173a26;
    --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.03);
    --bg-gradient:
      radial-gradient(1100px circle at 12% -10%, rgba(34,197,94,.16), transparent 55%),
      radial-gradient(900px circle at 100% 10%, rgba(34,197,94,.09), transparent 55%),
      radial-gradient(1000px circle at 50% 120%, rgba(34,197,94,.06), transparent 60%);
  }
  :root[data-theme="midnight"]{
    /* Midnight Elegance — deep navy, soft indigo-blue accent */
    --bg:#0a0e1c; --panel:#131a2e; --panel2:#1a2340; --border:#2b3760;
    --text:#eef1fb; --dim:#8b9ac4; --accent:#7c93f0; --accent-dim:#232e57; --accent-rgb:124,147,240;
    --red:#ff7373; --red-dim:#3a1e2b; --yellow:#ffd166; --yellow-dim:#3a331f;
    --green:#4ade80; --green-dim:#183a2b;
    --glass:rgba(124,147,240,.07); --glass2:rgba(124,147,240,.035);
    --bg-gradient:
      radial-gradient(1100px circle at 12% -8%, rgba(124,147,240,.16), transparent 55%),
      radial-gradient(900px circle at 100% 8%, rgba(124,147,240,.10), transparent 55%),
      radial-gradient(1000px circle at 50% 120%, rgba(124,147,240,.07), transparent 60%);
  }
  :root{ --font:'Nunito','Segoe UI',Arial,sans-serif; --font-num:'Bricolage Grotesque','Archivo Black','Space Grotesk',var(--font); --font-display:'Anton','Archivo Black',var(--font); }
  :root[data-font="arial"]{ --font:Arial,'Helvetica Neue',Helvetica,sans-serif; }
  :root[data-font="mono"]{ --font:'SF Mono','Consolas','Menlo',monospace; }
  :root[data-font="grotesk"]{ --font:'Space Grotesk','Segoe UI',Arial,sans-serif; }
  :root[data-font="playfair"]{ --font:'Playfair Display',Georgia,'Times New Roman',serif; }
  *{box-sizing:border-box;}
  html{font-size:17px;}
  body{
    background-color:var(--bg); color:var(--text); font-family:var(--font);
    margin:0; padding:0; min-height:100vh; position:relative;
    transition:opacity .18s ease;
    /* content has a natural (not viewport-stretched) size — on taller 16:9/16:10 monitors that
       leaves empty space below it; center it instead so the page reads the same on any monitor
       size. The column track is capped so .app-frame still fills it (rather than shrinking to
       its own content, which auto margins would do inside a grid) and centers as a whole.
       "safe" falls back to top/start-aligned if content ever exceeds the viewport, so nothing
       gets clipped or becomes unreachable. */
    display:grid;
    grid-template-columns:min(1900px, 100%);
    justify-content:safe center;
    align-content:safe center;
  }
  /* staggered "rise from below" entrance for header + top-level content blocks */
  @keyframes riseIn{
    0%{ opacity:0; transform:translateY(26px); }
    100%{ opacity:1; transform:translateY(0); }
  }
  header.appbar{ animation:riseIn .6s cubic-bezier(.2,.7,.2,1) both; }
  .app-grid > *{ animation:riseIn .6s cubic-bezier(.2,.7,.2,1) both; }
  .app-grid > *:nth-child(1){ animation-delay:.06s; }
  .app-grid > *:nth-child(2){ animation-delay:.14s; }
  .app-grid > *:nth-child(3){ animation-delay:.22s; }
  .journal-wrap > *{ animation:riseIn .6s cubic-bezier(.2,.7,.2,1) both; }
  .journal-wrap > *:nth-child(1){ animation-delay:.05s; }
  .journal-wrap > *:nth-child(2){ animation-delay:.13s; }
  .journal-wrap > *:nth-child(3){ animation-delay:.21s; }
  .journal-wrap > *:nth-child(4){ animation-delay:.29s; }
  @media (prefers-reduced-motion: reduce){
    header.appbar, .app-grid > *, .journal-wrap > *{ animation:none; }
  }
  body::before{
    content:''; position:fixed; inset:-15%; z-index:-1; pointer-events:none;
    background:var(--bg-gradient);
    animation: bgDrift 28s ease-in-out infinite alternate;
    will-change: transform;
    transition: background .5s ease;
  }
  @keyframes bgDrift{
    0%{ transform:translate3d(0,0,0) scale(1); }
    100%{ transform:translate3d(-2.5%,2%,0) scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce){ body::before{ animation:none; } }
  /* background drift/twinkle are paused (not removed) while the tab is hidden or the device
     signals it's resource-constrained — a background tab, or many tabs open, shouldn't keep
     burning GPU/CPU on decorative motion nobody's looking at. Interactive UI animations
     (hovers, reveals) are untouched — they only ever run in response to something the user did. */
  body.bg-paused::before{ animation-play-state:paused; }

  /* background style variants — all low-poly SVG landscape scenes, faceted and recolored via the theme's accent color */
  body[data-bg="peaks"]::before,
  body[data-bg="space"]::before,
  body[data-bg="mesa"]::before{
    opacity:.55;
  }
  .scene-bg{
    /* overscanned past the viewport on every edge so the drift/scale animation, browser
       toolbars resizing the viewport, or any rounding never reveals a sliver of bare page
       background at the edge (most visible as a dark bar along the top). */
    position:fixed; inset:-4%; z-index:-1; pointer-events:none; overflow:hidden;
    animation: bgDrift 34s ease-in-out infinite alternate;
    transform-origin:50% 100%;
  }
  body.bg-paused .scene-bg{ animation-play-state:paused; }
  .scene-bg svg{ width:100%; height:100%; display:block; }
  .scene-bg g{ display:none; }
  .scene-space .star{ animation:twinkle 3.6s ease-in-out infinite; transform-origin:center; }
  .scene-space .star:nth-child(3n){ animation-duration:4.4s; animation-delay:.4s; }
  .scene-space .star:nth-child(3n+1){ animation-duration:2.8s; animation-delay:1.1s; }
  .scene-space .star:nth-child(3n+2){ animation-duration:5.2s; animation-delay:.7s; }
  @keyframes twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  @media (prefers-reduced-motion: reduce){ .scene-space .star{ animation:none; } }
  body.bg-paused .scene-space .star{ animation-play-state:paused; }
  body[data-bg="peaks"] .scene-peaks,
  body[data-bg="space"] .scene-space,
  body[data-bg="mesa"] .scene-mesa{ display:block; }
  @media (prefers-reduced-motion: reduce){ .scene-bg{ animation:none; } }

  ::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-thumb{background:var(--border);}
  a{color:var(--accent);}
  .hidden{display:none !important;}
  button{
    font-family:var(--font); font-weight:600; background:var(--panel2); color:var(--text);
    border:1px solid var(--border); padding:11px 18px; cursor:pointer; border-radius:var(--radius-md);
    font-size:14px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
  }
  button:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.22);}
  button:active{transform:translateY(0); box-shadow:none;}
  button.primary{background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:700;}
  button.primary:hover{opacity:.92;}
  button.ghost{background:transparent;}
  button.danger:hover{border-color:var(--red); color:var(--red);}
  input, select, textarea{
    font-family:var(--font); background:var(--bg); color:var(--text);
    border:1px solid var(--border); padding:11px; border-radius:var(--radius-sm); width:100%; font-size:15px;
    transition:border-color .16s ease, box-shadow .16s ease;
  }
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);}

  /* clean, minimalist number inputs — no native spinner arrows */
  input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

  /* custom checkboxes */
  input[type=checkbox]{
    appearance:none; -webkit-appearance:none; width:19px; height:19px; min-width:19px; padding:0;
    border:1.5px solid var(--border); border-radius:6px; background:var(--glass2); cursor:pointer;
    position:relative; display:inline-block; vertical-align:middle; transition:all .16s ease;
  }
  input[type=checkbox]:hover{ border-color:var(--accent); }
  input[type=checkbox]:checked{ background:var(--accent); border-color:var(--accent); }
  input[type=checkbox]:checked::after{
    content:''; position:absolute; left:6px; top:2px; width:5px; height:9px;
    border:solid var(--bg); border-width:0 2px 2px 0; transform:rotate(45deg);
  }

  label{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:6px; font-weight:600;}
  fieldset{border:none; padding:0; margin:0;}

  .theme-controls{display:flex; gap:10px; align-items:center;}
  .theme-controls select{width:auto; padding:8px 10px; font-size:12px;}

  /* custom dropdown (replaces native <select> menu everywhere) */
  select.csel-native{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
  .csel{ position:relative; }
  .csel-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-family:var(--font); background:var(--bg); color:var(--text); border:1px solid var(--border);
    padding:11px; border-radius:var(--radius-sm); font-size:15px; cursor:pointer; text-align:left;
  }
  .csel-trigger:hover{ border-color:var(--accent); }
  .csel.open .csel-trigger{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
  .csel-trigger .chev{ flex:none; transition:transform .18s ease; color:var(--dim); }
  .csel.open .csel-trigger .chev{ transform:rotate(180deg); color:var(--accent); }
  .csel-sm .csel-trigger{ padding:8px 10px; font-size:12px; }
  @media(max-width:900px){
    .csel-sm .csel-trigger{ padding:12px 10px; min-height:44px; }
    .csel-option{ padding:12px 10px; min-height:20px; }
  }
  .csel-menu{
    position:fixed; min-width:180px; z-index:200;
    background:var(--panel); border:var(--border-w) solid var(--border); border-radius:var(--radius-md);
    box-shadow:0 16px 36px rgba(0,0,0,.35); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    padding:6px; max-height:280px; overflow-y:auto;
    opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
  }
  .csel-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .csel-option{ padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; transition:background .12s ease, color .12s ease; }
  .csel-option:hover{ background:var(--accent-dim); color:var(--accent); }
  .csel-option.selected{ font-weight:800; color:var(--accent); }

  /* modal */
  .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex;
    align-items:center; justify-content:center; z-index:100; padding:16px;
  }
  .modal{
    background:var(--glass); backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
    border:var(--border-w) solid var(--border); border-radius:var(--radius-lg);
    padding:24px; width:420px; max-width:100%; max-height:90vh; overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
    animation: modalIn .2s ease-out;
  }
  @keyframes modalIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .modal h2{margin-top:0; font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; color:var(--accent); font-size:20px; display:flex; align-items:center;}
  .modal .row{margin-bottom:14px;}
  .modal .actions{display:flex; gap:8px; margin-top:16px;}

  /* medium square modal — trade screenshot capture, etc. */
  .modal-square{ width:460px; }
  .screenshot-dropzone{
    width:100%; aspect-ratio:1/1; border:1.5px dashed var(--border); border-radius:var(--radius-md);
    background:var(--glass2); display:flex; align-items:center; justify-content:center;
    cursor:pointer; overflow:hidden; transition:border-color .16s ease;
  }
  .screenshot-dropzone:hover{ border-color:var(--accent); }
  .screenshot-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--dim); font-size:13px; }
  .screenshot-dropzone img{ width:100%; height:100%; object-fit:contain; }

  /* vertical trade detail / edit modal */
  .modal-detail{ width:420px; }
  .trade-detail-badges{ display:flex; gap:8px; margin-bottom:16px; }
  .trade-detail-figs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
  .trade-detail-figs .out-box{ padding:12px; }
  .trade-detail-figs .out-box .val{ font-size:18px; }
  .trade-detail-screenshot{
    width:100%; border-radius:var(--radius-md); overflow:hidden; cursor:zoom-in;
    border:1px solid var(--border); margin-top:6px;
  }
  .trade-detail-screenshot img{ width:100%; display:block; }

  /* image lightbox */
  .lightbox{
    position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:110;
    display:flex; align-items:center; justify-content:center; padding:32px; cursor:zoom-out;
  }
  .lightbox img{ max-width:100%; max-height:100%; border-radius:var(--radius-md); box-shadow:0 20px 60px rgba(0,0,0,.5); }

  /* top nav icons */
  .nav-icons{display:flex; gap:8px; align-items:center;}
  .nav-icon-btn{
    display:flex; align-items:center; justify-content:center; width:42px; height:42px;
    border-radius:var(--radius-md); background:var(--glass2); border:1px solid var(--border);
    cursor:pointer; color:var(--dim); padding:0;
  }
  .nav-icon-btn:hover{ color:var(--accent); border-color:var(--accent); }
  .nav-icon-btn.active{ color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
  /* themed tooltip replacing the browser's native title="" bubble (always black/white, ignores theme) */
  [data-tooltip]{ position:relative; }
  [data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
    background:var(--panel2); color:var(--text); border:1px solid var(--border);
    font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
    padding:6px 10px; border-radius:var(--radius-sm); box-shadow:0 8px 20px rgba(0,0,0,.22);
    opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:200;
  }
  [data-tooltip]::before{
    content:''; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%) translateY(4px);
    border:5px solid transparent; border-top-color:var(--panel2);
    opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:200;
  }
  [data-tooltip]:hover::after, [data-tooltip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }

  #feedbackFab{
    position:fixed; right:22px; bottom:22px; z-index:150;
    width:50px; height:50px; border-radius:50%;
    background:var(--accent); color:var(--bg); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  #feedbackFab:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 14px 30px rgba(0,0,0,.32); }
  #feedbackFab::after{ bottom:auto; top:50%; right:calc(100% + 9px); left:auto; transform:translateY(-50%) translateX(4px); }
  #feedbackFab::before{ bottom:auto; top:50%; right:calc(100% + 4px); left:auto; transform:translateY(-50%) translateX(4px); border-top-color:transparent; border-left-color:var(--panel2); }
  #feedbackFab:hover::after, #feedbackFab:hover::before{ transform:translateY(-50%) translateX(0); }
  @media(max-width:700px){ #feedbackFab{ right:16px; bottom:16px; width:46px; height:46px; } }

  /* Journal calendar view */
  .modal-calendar{ width:760px; max-width:95vw; transition:width .2s ease; }
  .modal-calendar.has-day-panel{ width:1040px; }
  .cal-body{ display:flex; gap:20px; }
  .cal-main{ flex:1; min-width:0; }
  .cal-day-panel{
    width:270px; flex:none; border-left:1px solid var(--border); padding-left:20px;
    max-height:520px; overflow-y:auto;
  }
  .cal-day-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-weight:800; font-size:14px; }
  .cal-day-panel-head button{ width:26px; height:26px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .cal-day-trade{
    background:var(--glass2); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px;
    font-size:12px; border:1px solid transparent;
  }
  .cal-day-trade.chip-win{ background:var(--green-dim); }
  .cal-day-trade.chip-loss{ background:var(--red-dim); }
  .cal-day-trade.chip-be{ background:var(--yellow-dim); }
  .cal-day-trade .cdt-top{ display:flex; justify-content:space-between; font-weight:800; margin-bottom:2px; }
  .cal-day-trade .cdt-meta{ color:var(--dim); font-size:11px; }
  .cal-day.has-trades{ cursor:pointer; }
  @media(max-width:760px){
    .modal-calendar.has-day-panel{ width:95vw; }
    .cal-body{ flex-direction:column; }
    .cal-day-panel{ width:100%; border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:14px; max-height:220px; }
  }
  .cal-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
  .cal-nav{ display:flex; align-items:center; gap:8px; }
  .cal-nav button{ width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
  .cal-label{ font-weight:800; font-size:14px; min-width:130px; text-align:center; }
  #calTodayBtn{ font-size:12px; padding:6px 12px; }
  .cal-head .hint{ margin:0; text-transform:none; font-size:12px; }
  .cal-close{ margin-left:auto; width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; }
  .cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
  .cal-weekdays span{ text-align:center; font-size:11px; text-transform:uppercase; color:var(--dim); font-weight:700; }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .cal-day{
    aspect-ratio:1/1; border-radius:var(--radius-sm); padding:7px; display:flex; flex-direction:column;
    background:var(--glass2); border:1px solid var(--border); font-size:11px; position:relative; min-width:0;
  }
  .cal-day.empty{ background:transparent; border-color:transparent; }
  .cal-day .cal-date{ font-weight:700; font-size:11px; color:var(--dim); }
  .cal-day.weekend{ background-image:repeating-linear-gradient(45deg, rgba(var(--accent-rgb),.06), rgba(var(--accent-rgb),.06) 4px, transparent 4px, transparent 9px); }
  .cal-day.win{ background:var(--green-dim); border-color:transparent; }
  .cal-day.loss{ background:var(--red-dim); border-color:transparent; }
  .cal-day .cal-pl{ margin-top:auto; font-weight:800; font-family:var(--font-num); font-size:12px; line-height:1.2; }
  .cal-day.win .cal-pl{ color:var(--green); }
  .cal-day.loss .cal-pl{ color:var(--red); }
  .cal-day .cal-count{ font-size:9px; color:var(--dim); }
  @media(max-width:700px){
    .cal-day{ padding:4px; font-size:9px; }
    .cal-day .cal-pl{ font-size:10px; }
    .cal-day .cal-count{ display:none; }
  }
  .beta-badge{ font-size:9px; background:var(--yellow-dim); color:var(--yellow); padding:2px 7px; border-radius:8px; text-transform:uppercase; font-weight:800; letter-spacing:.05em; margin-left:8px; vertical-align:middle; }

  /* layout — each section is its own small transparent glass card with its own outline;
     no single page-sized frame (that caused a heavy blur repaint glitch on background change,
     read as too opaque, and clipped dropdown menus at its edges). Normal page scroll. */
  body{ padding:20px; }
  @media(max-width:700px){ body{ padding:12px; } }
  .app-frame{ width:100%; }
  header.appbar{
    max-width:1800px; margin:0 auto 22px;
    /* grid (not flex justify-content:space-between) so the center column is mathematically the
       row's true midpoint — with flex, unequal left/right content widths still produce equal
       gaps either side of the center item, but that doesn't put the center item's own midpoint
       on the row's midpoint. The two outer tracks absorb any left/right size difference, so the
       nav icons stay dead-center regardless of title length or how many theme controls show.
       Each of the 3 children is its own glass card (see below) rather than the header being one
       big bar, so on index.html they can be sized to line up with the columns underneath. */
    display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:14px;
    position:relative; z-index:80;
  }
  /* the 3 header cards use the exact same glass treatment as .panel below them, so nothing in
     the header reads as "less see-through" than the rest of the page. */
  .appbar-left, .appbar-center, .theme-controls{
    background:var(--glass); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
    border:var(--border-w) solid var(--border); border-radius:var(--radius-lg);
    box-shadow:0 10px 28px rgba(0,0,0,.14);
    padding:14px 20px;
  }
  header.appbar h1{font-family:var(--font-display); font-size:30px; margin:0; color:var(--accent); letter-spacing:.01em; font-weight:400; display:flex; align-items:center; gap:10px; text-transform:uppercase;}
  .brand-icon{color:var(--accent); flex:none;}
  .header-doodle{color:var(--dim); opacity:.55; flex:none; transform:rotate(-6deg);}
  .empty-doodle-row{display:flex; align-items:center; gap:8px;}
  .empty-doodle{color:var(--dim); opacity:.6; flex:none;}
  header.appbar .sub{font-size:13px; color:var(--dim); margin-top:2px;}
  /* left/right cards stretch to fill their whole grid track (rather than shrinking to content)
     so on index.html they land exactly as wide as the columns underneath them. */
  .appbar-left{display:flex; flex-direction:column; justify-content:center; min-width:0;}
  .appbar-center{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; justify-self:center; }
  .theme-controls{ display:flex; align-items:center; justify-content:flex-end; }
  @media(max-width:900px){
    header.appbar{ grid-template-columns:1fr; justify-items:stretch; text-align:center; }
    .appbar-left, .appbar-center, .theme-controls{ justify-self:stretch; justify-content:center; }
    .appbar-left{ align-items:center; }
  }

  .app-grid{
    display:grid; grid-template-columns:360px 1fr 360px; gap:26px;
    padding:0 0 32px; max-width:1800px; margin:0 auto; align-items:stretch;
    transition:opacity .2s ease;
  }
  .app-grid > aside, .app-grid > main{ display:flex; flex-direction:column; min-height:0; }
  .fade-swap{ animation:fadeSwap .3s ease; }
  @keyframes fadeSwap{ 0%{opacity:.4;} 100%{opacity:1;} }
  @media(max-width:1300px){ .app-grid{ grid-template-columns:340px 1fr; } .app-grid > aside:nth-child(3){ grid-column:1 / -1; } }
  @media(max-width:900px){ .app-grid{ grid-template-columns:1fr; } .app-grid > aside:nth-child(3){ grid-column:auto; } }

  .panel{
    background:var(--glass); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
    border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); padding:26px;
    /* layered "floating" shadow — a soft wide ambient layer plus a tighter contact layer reads as
       real elevation, instead of one flat blur underneath. */
    box-shadow:0 30px 60px -20px rgba(0,0,0,.35), 0 10px 24px -6px rgba(0,0,0,.22);
  }
  .panel + .panel{margin-top:24px;}
  /* the last panel in a shorter column stretches to meet the bottom edge of the tallest column,
     instead of leaving a gap; its trailing button anchors to the bottom of that extra room. */
  .panel-fill{ flex:1; min-height:0; display:flex; flex-direction:column; }
  /* rather than pushing the trailing button down with one big empty gap, the stat/output grid
     itself grows to soak up the extra room, so leftover column height becomes taller cards. */
  .panel-fill .calc-bottom, .panel-fill .today-summary{ flex:1; align-content:stretch; }
  .panel-fill .outputs{ grid-auto-rows:1fr; height:100%; }
  .panel-fill .today-summary{ display:grid; grid-auto-rows:1fr; }
  .panel-fill .out-box, .panel-fill .mini-stat{ display:flex; flex-direction:column; justify-content:center; }

  /* bottom row of the calculator: result boxes on the left, a bigger balance readout bottom-right —
     the number a trader glances at most, so it gets more visual weight than the other outputs. */
  .calc-bottom{ display:grid; grid-template-columns:2.1fr 1fr; gap:14px; margin-top:18px; }
  .calc-bottom .outputs{ grid-template-columns:repeat(2,1fr); margin-top:0; }
  .calc-balance-box{
    background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.25);
    border-radius:var(--radius-md); padding:18px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; gap:6px;
  }
  .calc-balance-box .lbl{font-size:12px; color:var(--dim); text-transform:uppercase; font-weight:700; letter-spacing:.04em;}
  .calc-balance-box .val{font-size:34px; font-weight:800; font-family:var(--font-num); letter-spacing:-.01em; color:var(--accent);}
  .calc-balance-box .hint{font-size:11px;}
  @media(max-width:700px){ .calc-bottom{ grid-template-columns:1fr; } }
  .panel h2{margin:0 0 18px; font-family:var(--font-display); font-size:19px; color:var(--accent); text-transform:uppercase; letter-spacing:.02em; font-weight:400;}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  @media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.grid3,.grid2,.grid4{grid-template-columns:1fr;}}
  .balance-display{background:var(--glass2); border:var(--border-w) solid var(--border); border-radius:var(--radius-sm); padding:11px; font-size:15px; font-weight:800; color:var(--accent); font-family:var(--font-num); letter-spacing:-.01em;}

  .outputs{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px;}
  @media(max-width:700px){.outputs{grid-template-columns:repeat(2,1fr);}}
  .out-box{background:var(--glass); border:var(--border-w) solid var(--border); border-radius:var(--radius-md); padding:20px 14px; text-align:center;}
  .out-box .lbl{font-size:12px; color:var(--dim); text-transform:uppercase; font-weight:700; letter-spacing:.04em;}
  .out-box .val{font-size:28px; margin-top:8px; font-weight:800; font-family:var(--font-num); letter-spacing:-.01em;}
  .val-pop{ animation: valuePop .3s ease; }
  @keyframes valuePop{ 0%{ opacity:.35; transform:scale(.92); } 100%{ opacity:1; transform:scale(1); } }
  .status-good{color:var(--accent);} .status-bad{color:var(--red);} .status-warn{color:var(--yellow);}

  .direction-toggle{display:flex; gap:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
  .direction-toggle button{flex:1; border:none; border-radius:0; background:var(--bg);}
  .direction-toggle button.active[data-dir="Long"]{background:var(--green-dim); color:var(--green);}
  .direction-toggle button.active[data-dir="Short"]{background:var(--red-dim); color:var(--red);}

  .log-row{margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
  .copy-row{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dim); margin-top:14px;}
  .copy-row input{width:auto;}
  #logForm{margin-top:18px; padding-top:18px; border-top:1px dashed var(--border);}
  #logForm.reveal, .panel-reveal.reveal{ animation:slideDownFade .22s ease-out; }
  @keyframes slideDownFade{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }

  .tabs{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
  .tabs button.active{background:var(--accent); color:var(--bg); border-color:var(--accent);}

  .trade-card{
    background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:16px 18px; margin-bottom:12px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .trade-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.18); }
  .trade-card.chip-win{ background:var(--green-dim); }
  .trade-card.chip-win:hover{ border-color:var(--green); }
  .trade-card.chip-loss{ background:var(--red-dim); }
  .trade-card.chip-loss:hover{ border-color:var(--red); }
  .trade-card.chip-be{ background:var(--yellow-dim); }
  .trade-card.chip-be:hover{ border-color:var(--yellow); }
  .trade-card .main{flex:1; min-width:220px; display:flex; gap:14px;}
  .trade-card .main-text{flex:1; min-width:180px;}
  .trade-card .meta{font-size:13px; color:var(--dim); margin-bottom:6px;}
  .trade-card .figs{font-size:15px;}
  .trade-card .notes{font-size:13px; color:var(--dim); margin-top:8px;}
  .trade-card-thumb{
    flex:none; width:56px; height:56px; border-radius:var(--radius-sm); overflow:hidden;
    border:1px solid var(--border); cursor:zoom-in;
  }
  .trade-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .badge{font-weight:800; padding:0; background:none; font-size:11px; text-transform:uppercase; display:inline-block;}
  .badge.win{color:var(--green);}
  .badge.loss{color:var(--red);}
  .badge.breakeven{color:var(--yellow);}
  .badge.long{background:var(--accent-dim); color:var(--accent);}
  .badge.short{background:var(--red-dim); color:var(--red);}
  .card-badges{display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
  .card-actions{display:flex; gap:8px; align-items:flex-start;}
  .card-actions button{padding:6px 10px; font-size:12px;}

  .stats-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px;}
  .stat.locked{ position:relative; }
  .stat.locked .val, .stat.locked .lbl{ filter:blur(4px); user-select:none; }
  .stat.locked::after{
    content:'Pro'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent);
    background:rgba(var(--accent-rgb),.06); border-radius:var(--radius-md); cursor:pointer;
  }
  .stat{text-align:center; background:var(--glass); border:var(--border-w) solid var(--border); border-radius:var(--radius-md); padding:18px;}
  .stat .val{font-size:26px; font-weight:800; font-family:var(--font-num); letter-spacing:-.01em;}
  .stat .lbl{font-size:11px; color:var(--dim); text-transform:uppercase; margin-top:6px; font-weight:700;}
  .pl-pos{color:var(--accent);} .pl-neg{color:var(--red);}

  .mini-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;}
  .mini-stat{background:var(--glass2); border-radius:var(--radius-sm); padding:12px; text-align:center;}
  .mini-stat .val{font-size:18px; font-weight:800; font-family:var(--font-num); letter-spacing:-.01em;}
  .mini-stat .lbl{font-size:10px; color:var(--dim); text-transform:uppercase; margin-top:4px; font-weight:700;}

  .split-bar{display:flex; height:14px; border-radius:7px; overflow:hidden; margin-top:8px; background:var(--bg);}
  .split-bar .long{background:var(--accent);} .split-bar .short{background:var(--red);}
  .split-legend{display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin-top:8px;}

  .progress-track{height:10px; border-radius:5px; background:var(--bg); overflow:hidden; margin-top:8px;}
  .progress-fill{height:100%; background:var(--accent); transition:width .4s ease, background-color .3s ease;}
  .progress-fill.danger{background:var(--red);}
  .progress-fill.warn{background:var(--yellow);}
  .progress-label{display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin-top:6px;}

  /* small animated level meters — react live as the user types numbers */
  .mini-meter{height:4px; border-radius:2px; background:var(--bg); overflow:hidden; margin-top:9px;}
  .mini-meter-fill{
    height:100%; width:0%; background:var(--accent); border-radius:2px;
    transition:width .45s cubic-bezier(.2,.7,.2,1), background-color .3s ease;
  }
  .mini-meter-fill.warn{background:var(--yellow);}
  .mini-meter-fill.danger{background:var(--red);}
  .mini-meter-fill.strong{background:var(--green);}

  /* equity curve + streak/best-worst callouts */
  .equity-svg{width:100%; height:74px; display:block;}
  .equity-svg path{transition:d .3s ease;}
  .callout-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  @media(max-width:560px){ .callout-grid{grid-template-columns:1fr;} }
  .callout{background:var(--glass2); border-radius:var(--radius-md); padding:14px; text-align:center;}
  .callout .lbl{font-size:10px; color:var(--dim); text-transform:uppercase; font-weight:700; letter-spacing:.05em; margin-bottom:8px;}
  .callout .val{font-size:17px; font-weight:800; font-family:var(--font-num); letter-spacing:-.01em;}
  .streak-badge{
    display:inline-block; font-size:14px; font-weight:800; font-family:var(--font-num);
    padding:6px 14px; border-radius:20px; background:var(--panel2); color:var(--dim);
  }
  .streak-badge.streak-win{background:var(--accent-dim); color:var(--accent);}
  .streak-badge.streak-loss{background:var(--red-dim); color:var(--red);}

  .empty{color:var(--dim); font-size:14px; text-align:center; padding:26px;}
  .err{color:var(--red); font-size:13px;}
  .hint{font-size:12px; color:var(--dim); margin-top:5px; line-height:1.4;}

  /* account panel */
  .account-chips{display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; margin-bottom:18px;}
  /* when the Accounts panel stretches to match the calculator column, a short chip list
     centers in the extra room instead of hugging the top with dead space below it. */
  .panel-fill > .account-chips{ flex:1; align-content:center; }
  .account-chip{
    background:var(--glass); border:var(--border-w) solid var(--border); border-radius:24px;
    padding:9px 16px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:8px;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
  }
  .account-chip:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); }
  .account-chip:active{ transform:translateY(0) scale(.97); }
  .account-chip .icon{display:flex; align-items:center;}
  .account-chip.active{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}
  .mode-pill{font-size:11px; padding:3px 9px; border-radius:10px; text-transform:uppercase; font-weight:700;}
  .mode-pill.eval{background:var(--yellow-dim); color:var(--yellow);}
  .mode-pill.funded{background:var(--accent-dim); color:var(--accent);}

  .account-status-card{background:var(--glass); border:var(--border-w) solid var(--border); border-radius:var(--radius-md); padding:18px; margin-bottom:18px; transition:opacity .18s ease;}
  .account-status-card .name-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:8px;}
  .account-status-card .name-row .name{font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px;}
  .rule-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13px; margin-top:14px;}
  .rule-grid .k{color:var(--dim); text-transform:uppercase; font-size:11px; font-weight:700;}
  .rule-grid .v{font-size:15px; margin-top:2px; font-family:var(--font-num); letter-spacing:-.01em;}

  .balance-sync-note{
    margin-top:14px; padding:10px 12px; border-radius:var(--radius-sm); font-size:12px; line-height:1.5;
    background:var(--glass2); color:var(--dim);
  }
  .balance-sync-note.warn{ color:var(--yellow); }
  .balance-sync-note.danger{ color:var(--red); }
  .balance-sync-note strong{ font-family:var(--font-num); }

  /* today strip — full-width bottom row: horizontal timeline of today's trades.
     No entrance animation here (unlike the 3 columns above it) and an explicit margin-top
     (not just relying on .app-grid's gap) plus its own stacking context, so nothing above it
     can ever visually bleed over its content at any aspect ratio. */
  .today-strip{ min-height:0; animation:none !important; margin-top:26px; position:relative; z-index:1; }
  .today-strip-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .today-trades-row{
    display:flex; gap:10px; overflow-x:auto; padding-bottom:10px;
    scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.4) var(--glass2);
    scroll-behavior:smooth;
  }
  .today-trades-row::-webkit-scrollbar{height:7px;}
  .today-trades-row::-webkit-scrollbar-track{ background:var(--glass2); border-radius:10px; }
  .today-trades-row::-webkit-scrollbar-thumb{
    background:rgba(var(--accent-rgb),.4); border-radius:10px;
    transition:background .2s ease, box-shadow .2s ease;
  }
  .today-trades-row::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.65); }
  .today-trades-row::-webkit-scrollbar-thumb:active{
    background:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),.5);
  }
  .today-trade-chip{
    flex:none; display:flex; flex-direction:column; gap:5px; min-width:118px;
    background:var(--glass2); border-radius:var(--radius-sm); padding:11px 14px;
    border:1px solid transparent; cursor:default;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .today-trade-chip:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.16); }
  .today-trade-chip.chip-win{ background:var(--green-dim); }
  .today-trade-chip.chip-win:hover{ border-color:var(--green); }
  .today-trade-chip.chip-loss{ background:var(--red-dim); }
  .today-trade-chip.chip-loss:hover{ border-color:var(--red); }
  .today-trade-chip.chip-be{ background:var(--yellow-dim); }
  .today-trade-chip.chip-be:hover{ border-color:var(--yellow); }
  .today-trade-chip .ttc-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .today-trade-chip .ttc-instrument{font-size:12px; color:var(--dim);}
  .today-trade-chip .ttc-pl{font-size:13px; font-weight:800; font-family:var(--font-num);}

  /* while editing an account, the left column grows tall — shrink this strip so the page doesn't stretch */
  .today-strip{ transition:padding .2s ease; }
  .today-strip.compact{ padding:16px 26px; }
  .today-strip.compact .today-strip-head{ margin-bottom:10px; }
  .today-strip.compact .today-strip-head h2{ font-size:15px; }
  .today-strip.compact .today-trade-chip{ padding:7px 10px; min-width:96px; gap:3px; }
  .today-strip.compact .today-trade-chip .ttc-pl{ font-size:12px; }
  .today-strip.compact .today-trade-chip .ttc-instrument{ font-size:11px; }
  .today-strip.compact .today-trade-chip .hint{ display:none; }

  /* today's stats, embedded inside the Journal panel */
  .today-summary{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;}
  .today-summary:empty{ display:none; }
  .today-summary .mini-stat{padding:13px 10px; border-radius:var(--radius-sm);}
  .today-summary .mini-stat .val{font-size:16px;}
  .today-summary .mini-stat .lbl{font-size:10px; margin-top:3px;}

  /* cap at ~4 visible rows (4 * ~42px), scroll internally beyond that so a long account list can't stretch the page */
  .linked-accounts{
    transition:opacity .18s ease; flex:1; min-height:0; overflow-y:auto; padding-right:6px;
    scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.4) var(--glass2);
  }
  .linked-accounts::-webkit-scrollbar{width:7px;}
  .linked-accounts::-webkit-scrollbar-track{ background:var(--glass2); border-radius:10px; }
  .linked-accounts::-webkit-scrollbar-thumb{
    background:rgba(var(--accent-rgb),.4); border-radius:10px;
    transition:background .2s ease, box-shadow .2s ease;
  }
  .linked-accounts::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.65); }
  .linked-accounts::-webkit-scrollbar-thumb:active{
    background:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),.5);
  }
  .linked-accounts .row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px;}
  .linked-accounts .row:last-child{border-bottom:none;}
  .linked-accounts .name{font-weight:800; display:flex; align-items:center; gap:6px;}

  /* dll toggle */
  .dll-toggle-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; color:var(--dim);}

  /* journal: scope tabs + month nav */
  .scope-tabs{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
  .scope-tabs button.active{background:var(--accent); color:var(--bg); border-color:var(--accent);}
  .scope-tabs button.locked::after, #openCalendarBtn.locked::after{
    content:'🔒'; font-size:9px; margin-left:5px; opacity:.7; vertical-align:1px;
  }
  .month-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin:6px 0 18px;}
  .month-nav button{width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%;}
  .month-nav .label{font-weight:800; font-family:var(--font-num); font-size:16px; min-width:170px; text-align:center;}

  /* membership */
  .tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  @media(max-width:560px){ .tier-grid{grid-template-columns:1fr;} }
  .tier-card{background:var(--glass2); border-radius:var(--radius-md); padding:16px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.14);}
  .tier-card.highlight{box-shadow:0 0 0 1.5px var(--accent), 0 8px 20px rgba(0,0,0,.14);}
  .tier-card .tier-name{font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);}
  .tier-card .tier-price{font-size:22px; font-weight:800; font-family:var(--font-num); margin:8px 0;}
  .tier-card ul{list-style:none; margin:10px 0 0; padding:0; font-size:12px; color:var(--dim); text-align:left; line-height:1.9;}