:root{
    --bg: #F1F4EE;
    --bg-alt: #E6ECE1;
    --paper: #FFFFFF;
    --ink: #17302A;
    --ink-soft: #4C6259;
    --ink-faint: #5D7169;
    --line: #CFDACB;
    --accent: #D98E04;
    --accent-soft: #F6DFAE;
    --caution: #A8493D;
    --caution-bg: #F5E4E0;
    --morning: #D98E04;
    --lunch: #3E7D68;
    --afternoon: #8C6A3E;
    --evening: #364C78;
    --radius: 14px;
    --card-shadow: 0 10px 24px rgba(23,48,42,.09);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
    color:var(--ink);
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:var(--evening);}
  .wrap{max-width:980px;margin:0 auto;padding:0 24px;}
  button{font-family:inherit;cursor:pointer;}
  button:disabled{opacity:.45;cursor:default;pointer-events:none;}
  ::selection{background:var(--accent-soft);}

  /* ---------- FOCUS STATES ---------- */
  :focus{outline:none;}
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  summary:focus-visible, .goal-chip:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--evening);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- HERO ---------- */
  header.hero{
    padding:56px 0 40px;
    border-bottom:1px solid var(--line);
  }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:14px;
  }
  h1.title{font-size:clamp(34px,5.4vw,54px);line-height:1.02;max-width:14ch;}
  .lede{
    margin-top:16px;
    max-width:52ch;
    font-size:17px;
    color:var(--ink-soft);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:40px;
    align-items:center;
  }
  @media (max-width:760px){ .hero-grid{grid-template-columns:1fr;} }
  .arc-wrap{width:100%;}
  .arc-wrap svg{width:100%;height:auto;display:block;}
  .arc-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    fill:var(--ink-faint);
  }

  /* ---------- SECTION SHELLS ---------- */
  section{padding:52px 0;border-bottom:1px solid var(--line);}
  section:last-of-type{border-bottom:none;}
  .section-head{margin-bottom:28px;}
  .section-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--accent);
    margin-bottom:6px;
    letter-spacing:0.04em;
  }
  .section-head h2{font-size:clamp(24px,3.4vw,32px);}
  .section-sub{color:var(--ink-soft);margin-top:8px;max-width:60ch;font-size:15px;}

  /* ---------- DISCLAIMER BANNER ---------- */
  .banner{
    background:var(--caution-bg);
    border:1px solid #E3C4BC;
    border-radius:var(--radius);
    padding:16px 18px;
    font-size:13.5px;
    color:#6E3229;
    display:flex;
    gap:12px;
    align-items:flex-start;
  }
  .banner .dot{
    flex:none;
    width:8px;height:8px;border-radius:50%;
    background:var(--caution);
    margin-top:6px;
  }
  .banner.overlap-banner{
    background:var(--accent-soft);
    border:1px solid #E7C36F;
    color:#5C4408;
    margin-bottom:20px;
  }
  .banner.overlap-banner .dot{background:var(--accent);}

  /* ---------- GOAL CHIPS ---------- */
  .goal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
    gap:10px;
    margin-top:24px;
  }
  .goal-chip{
    text-align:left;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 16px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    transition:border-color .15s ease, background .15s ease, transform .1s ease;
  }
  .goal-chip:hover{border-color:var(--ink-faint);}
  .goal-chip:active{transform:scale(0.98);}
  .goal-chip .bar{
    flex:none;width:3px;align-self:stretch;border-radius:2px;
    background:var(--line);
  }
  .goal-chip strong{display:block;font-size:14.5px;font-weight:600;}
  .goal-chip span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;}
  .goal-chip.active{border-color:var(--ink);background:var(--bg-alt);}
  .goal-chip.active .bar{background:var(--accent);}

  .prefs-row{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:26px;
  }
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{font-size:12.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;letter-spacing:.03em;}
  .field select{
    font-family:'IBM Plex Sans',sans-serif;
    font-size:14px;
    padding:9px 12px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink);
    min-width:200px;
  }
  .field input[type="number"]{
    font-family:'IBM Plex Sans',sans-serif;
    font-size:14px;
    padding:9px 12px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink);
    width:120px;
  }

  .cta-row{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .btn-primary{
    background:var(--ink);
    color:#F4F6F2;
    border:none;
    padding:13px 26px;
    border-radius:999px;
    font-size:14.5px;
    font-weight:500;
    transition:background .15s ease, transform .1s ease;
  }
  .btn-primary:hover{background:#0D1F1A;}
  .btn-primary:active{transform:scale(0.97);}
  .btn-ghost{
    background:transparent;
    border:1px solid var(--line);
    color:var(--ink-soft);
    padding:12px 20px;
    border-radius:999px;
    font-size:13.5px;
    transition:border-color .15s ease, color .15s ease, transform .1s ease;
  }
  .btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
  .btn-ghost:active{transform:scale(0.97);}
  #validationMsg, #kostValidationMsg{font-size:13.5px;color:var(--caution);display:none;}

  /* ---------- RESULT HEADER ---------- */
  .hidden{display:none !important;}
  .result-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:14px;
  }
  .count-badge{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    color:var(--ink-faint);
  }

  /* ---------- SUPPLEMENT CARDS ---------- */
  .supp-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:16px;
    margin-top:24px;
  }
  .supp-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .supp-card:hover{border-color:var(--ink-faint);box-shadow:var(--card-shadow);transform:translateY(-2px);}
  .supp-card h3{font-size:18px;}
  .supp-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .evidence-badge{
    flex:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:4px 9px;
    border-radius:999px;
    white-space:nowrap;
    margin-top:3px;
  }
  .evidence-stark{background:#DCEEE3;color:#1F5C3D;}
  .evidence-mattlig{background:#F6E9C9;color:#7A5B12;}
  .evidence-begransad{background:#EDEDE8;color:#5C5C54;}
  .supp-why{font-size:14px;color:var(--ink-soft);}
  .supp-meta{font-size:13px;color:var(--ink-faint);}
  .supp-meta b{color:var(--ink);font-weight:600;}
  .supp-caution{
    font-size:12.5px;
    color:#6E3229;
    background:var(--caution-bg);
    border-radius:8px;
    padding:8px 10px;
  }
  .diet-note{
    font-size:12.5px;
    color:#3E5C4F;
    background:#E4EFE6;
    border-radius:8px;
    padding:8px 10px;
  }
  .age-note{
    font-size:12.5px;
    color:#324863;
    background:#E3EAF3;
    border-radius:8px;
    padding:8px 10px;
  }
  .supp-link{font-size:13px;font-weight:500;text-decoration:none;}
  .supp-link:hover{text-decoration:underline;}
  .supp-details summary{
    font-size:12.5px;
    font-family:'IBM Plex Mono',monospace;
    color:var(--ink-faint);
    cursor:pointer;
  }
  .supp-details p{
    font-size:13px;
    color:var(--ink-soft);
    margin:8px 0 0;
  }

  .slot-picker{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:auto;
    padding-top:8px;
    border-top:1px dashed var(--line);
  }
  .slot-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    padding:6px 10px;
    border-radius:7px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--ink-soft);
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .slot-btn:hover{border-color:var(--ink);color:var(--ink);}
  .slot-btn.active{
    color:#fff;
    border-color:transparent;
  }
  .slot-btn[data-slot="morgon"].active{background:var(--morning);}
  .slot-btn[data-slot="lunch"].active{background:var(--lunch);}
  .slot-btn[data-slot="eftermiddag"].active{background:var(--afternoon);}
  .slot-btn[data-slot="kvall"].active{background:var(--evening);}

  /* ---------- TIMELINE ---------- */
  .timeline{
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
  }
  @media (max-width:700px){ .timeline{grid-template-columns:1fr 1fr;} }
  .slot-col{
    border-top:3px solid var(--line);
    padding-top:12px;
  }
  .slot-col[data-slot="morgon"]{border-color:var(--morning);}
  .slot-col[data-slot="lunch"]{border-color:var(--lunch);}
  .slot-col[data-slot="eftermiddag"]{border-color:var(--afternoon);}
  .slot-col[data-slot="kvall"]{border-color:var(--evening);}
  .slot-col h4{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--ink-faint);
    margin-bottom:2px;
  }
  .slot-time{font-size:20px;font-family:'Fraunces',serif;margin-bottom:10px;display:flex;align-items:baseline;gap:6px;}
  .slot-time::before{content:'🕐';font-size:13px;}
  .slot-item{
    font-size:13.5px;
    padding:7px 0;
    border-bottom:1px solid var(--line);
  }
  .slot-item:last-child{border-bottom:none;}
  .slot-empty{font-size:13px;color:var(--ink-faint);font-style:italic;}

  /* ---------- TRAINING ---------- */
  .training-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
    gap:16px;
    margin-top:24px;
  }
  .training-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .training-card:hover{border-color:var(--ink-faint);box-shadow:var(--card-shadow);transform:translateY(-2px);}
  .training-day-label{
    font-size:11.5px;
    color:var(--accent);
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .training-card h4{font-size:17px;font-family:'Fraunces',serif;font-weight:600;}
  .training-focus{font-size:12.5px;color:var(--ink-faint);margin-bottom:6px;}
  .training-exercise-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .training-exercise-list li{border-top:1px solid var(--line);padding-top:10px;}
  .training-exercise-list li:first-child{border-top:none;padding-top:0;}
  .ex-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
  .ex-row .taken-toggle{margin-top:2px;}
  .ex-name{font-size:14px;font-weight:600;color:var(--ink);}
  .ex-reps{font-size:12.5px;color:var(--evening);margin-top:2px;}
  .ex-note{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
  .training-exercise-list li.done .ex-name{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--ink-faint);}
  .training-exercise-list li.done .ex-reps,
  .training-exercise-list li.done .ex-note{opacity:.65;}

  /* ---------- WEEK PROGRESSION ---------- */
  .week-progress-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
  }
  .week-label{
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    background:var(--bg-alt);
    padding:8px 14px;
    border-radius:999px;
  }
  #progressionTip{margin-top:14px;}
  #progressionTip .banner{margin-bottom:0;}

  /* ---------- CALORIE INFO ---------- */
  .calorie-box{
    margin-top:24px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
  }
  .calorie-box h4{font-size:16px;font-family:'Fraunces',serif;margin-bottom:12px;}
  .calorie-row{
    display:flex;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:6px;
  }
  .calorie-stat{font-size:13.5px;color:var(--ink-soft);min-width:160px;}
  .calorie-stat b{color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:15px;}
  .macro-progress{
    margin-top:6px;
    height:6px;
    border-radius:999px;
    background:var(--bg-alt);
    overflow:hidden;
  }
  .macro-progress-fill{
    height:100%;
    border-radius:999px;
    background:var(--lunch);
  }
  .macro-progress-fill.near{background:var(--accent);}
  .macro-progress-fill.over{background:var(--caution);}

  /* ---------- IDAG VIEW ---------- */
  .idag-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
  }
  .idag-item{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .idag-item:hover{border-color:var(--ink-faint);box-shadow:var(--card-shadow);}
  .idag-item .idag-time{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    color:var(--ink-faint);
    min-width:70px;
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .idag-item .idag-time::before{content:'🕐';font-size:11px;}
  .idag-item .idag-main{flex:1;font-size:14px;color:var(--ink);}
  .idag-item .idag-sub{font-size:12.5px;color:var(--ink-faint);margin-top:2px;}
  .idag-day-picker{margin-top:20px;margin-bottom:16px;}

  .idag-item.taken{background:var(--bg-alt);}
  .idag-item.taken .idag-main{color:var(--ink-soft);}
  .taken-toggle{
    flex:none;
    width:30px;
    height:30px;
    border-radius:50%;
    border:1.5px solid var(--line);
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transition:background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .taken-toggle:hover{border-color:var(--ink-faint);}
  .taken-toggle:active{transform:scale(0.92);}
  .taken-toggle .taken-check{
    font-size:14px;
    line-height:1;
    color:transparent;
    transition:color .15s ease;
  }
  .taken-toggle[aria-pressed="true"]{background:var(--lunch);border-color:var(--lunch);}
  .taken-toggle[aria-pressed="true"] .taken-check{color:#fff;}

  /* ---------- RECIPES ---------- */
  .recipe-slot-block{margin-top:34px;}
  .recipe-slot-block:first-child{margin-top:0;}
  .recipe-slot-head{
    display:flex;align-items:baseline;gap:10px;margin-bottom:14px;
  }
  .recipe-slot-head .swatch{width:10px;height:10px;border-radius:50%;}
  .recipe-slot-head h3{font-size:19px;}
  .recipe-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:16px;
  }
  .recipe-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .recipe-card:hover{border-color:var(--ink-faint);box-shadow:var(--card-shadow);transform:translateY(-2px);}
  .recipe-card h4{font-size:16.5px;font-family:'Fraunces',serif;font-weight:600;margin-bottom:8px;}
  .recipe-blurb{font-size:13.5px;color:var(--ink-soft);margin-bottom:12px;}
  .recipe-nutrition{
    font-size:11.5px;
    color:var(--ink-faint);
    margin-bottom:12px;
  }
  .recipe-sync{
    font-size:12.5px;
    color:#3E5C4F;
    background:#E4EFE6;
    border-radius:8px;
    padding:8px 10px;
    margin-bottom:12px;
  }
  .recipe-card details summary{
    font-size:12.5px;
    font-family:'IBM Plex Mono',monospace;
    color:var(--ink-faint);
    cursor:pointer;
    margin-bottom:6px;
  }
  .recipe-card ul, .recipe-card ol{
    margin:8px 0 0;
    padding-left:18px;
    font-size:13.5px;
    color:var(--ink-soft);
  }
  .recipe-card li{margin-bottom:4px;}
  .recipe-swap-btn{
    margin-top:14px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    background:none;
    border:1px dashed var(--line);
    border-radius:8px;
    padding:7px 10px;
    color:var(--ink-soft);
    transition:border-color .15s ease, color .15s ease;
  }
  .recipe-swap-btn:hover{border-color:var(--ink);color:var(--ink);}
  .recipe-card.flash{animation:flashBg 1.6s ease;}
  @keyframes flashBg{
    0%{background:var(--accent-soft);}
    100%{background:var(--paper);}
  }

  /* ---------- CHAT ---------- */
  .chat-window{
    max-height:420px;
    overflow-y:auto;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--paper);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .msg{
    max-width:80%;
    padding:10px 14px;
    border-radius:14px;
    font-size:14px;
    line-height:1.45;
    white-space:pre-wrap;
  }
  .msg.user{
    align-self:flex-end;
    background:var(--ink);
    color:#F4F6F2;
    border-bottom-right-radius:4px;
  }
  .msg.assistant{
    align-self:flex-start;
    background:var(--bg-alt);
    color:var(--ink);
    border-bottom-left-radius:4px;
  }
  .msg.error{
    align-self:flex-start;
    background:var(--caution-bg);
    color:#6E3229;
    border-bottom-left-radius:4px;
  }
  .msg.typing{display:flex;gap:4px;align-items:center;padding:14px 16px;}
  .msg.typing span{
    width:6px;height:6px;border-radius:50%;
    background:var(--ink-faint);
    animation:blinkDot 1.2s infinite ease-in-out;
  }
  .msg.typing span:nth-child(2){animation-delay:.2s;}
  .msg.typing span:nth-child(3){animation-delay:.4s;}
  @keyframes blinkDot{0%,80%,100%{opacity:.2;}40%{opacity:1;}}
  .chat-input-row{display:flex;gap:10px;margin-top:14px;}
  .chat-input-row input{
    flex:1;
    padding:11px 16px;
    border-radius:999px;
    border:1px solid var(--line);
    font-family:inherit;
    font-size:14px;
    background:var(--paper);
    color:var(--ink);
  }
  .chat-input-row button{
    padding:11px 24px;
    border-radius:999px;
    border:none;
    background:var(--ink);
    color:#F4F6F2;
    font-size:14px;
    font-weight:500;
    transition:background .15s ease, transform .1s ease;
  }
  .chat-input-row button:active{transform:scale(0.97);}
  .chat-caption{font-size:12.5px;color:var(--ink-faint);margin-top:10px;}

  /* ---------- REMINDERS ---------- */
  .slot-conflict{
    font-size:11.5px;
    line-height:1.4;
    color:#6E3229;
    background:var(--caution-bg);
    border-radius:8px;
    padding:7px 9px;
    margin-top:10px;
  }
  .reminder-toggle{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    cursor:pointer;
    user-select:none;
  }
  .reminder-toggle input{accent-color:var(--ink);cursor:pointer;}
  .toast{
    position:fixed;
    bottom:24px;
    right:24px;
    max-width:300px;
    background:var(--ink);
    color:#F4F6F2;
    padding:14px 18px;
    border-radius:12px;
    font-size:13.5px;
    line-height:1.4;
    box-shadow:0 12px 28px rgba(0,0,0,.22);
    z-index:999;
    animation:toastIn .25s ease;
  }
  .toast.toast-out{animation:toastOut .35s ease forwards;}
  @keyframes toastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  @keyframes toastOut{to{opacity:0;transform:translateY(8px);}}

  /* ---------- RATINGS ---------- */
  .recipe-rating{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:14px;
  }
  .rate-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    border:1px solid var(--line);
    background:transparent;
    border-radius:8px;
    padding:6px 11px;
    color:var(--ink-soft);
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .rate-btn:hover{border-color:var(--ink);color:var(--ink);}
  .rate-btn:disabled{cursor:default;}
  .rate-btn:disabled:hover{border-color:var(--line);color:var(--ink-soft);}
  .rate-btn.voted{
    background:var(--ink);
    color:#F4F6F2;
    border-color:var(--ink);
  }
  .rate-btn.voted:hover{border-color:var(--ink);color:#F4F6F2;}
  .rating-voted-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    color:var(--ink-faint);
  }
  .recipe-card.removed{background:var(--caution-bg);border-color:#E3C4BC;}
  .recipe-card.removed .recipe-blurb{color:#6E3229;}

  footer{
    padding:36px 0 60px;
    font-size:12.5px;
    color:var(--ink-faint);
  }
  footer a{color:var(--ink-faint);}
  .footer-flex{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}

  /* ---------- TOP NAV ---------- */
  .top-nav{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 24px;
    flex-wrap:wrap;
    gap:12px;
  }
  .nav-brand{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:19px;
    color:var(--ink);
  }
  .nav-tabs{display:flex;gap:6px;flex-wrap:wrap;}
  .nav-tab{
    background:none;
    border:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    letter-spacing:.02em;
    padding:9px 16px;
    border-radius:999px;
    color:var(--ink-soft);
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
  }
  .nav-tab:hover{color:var(--ink);}
  .nav-tab.active{background:var(--ink);color:#F4F6F2;}

  @media (max-width:700px){
    .nav-inner{flex-wrap:nowrap;}
    .nav-tabs{
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      max-width:100%;
    }
    .nav-tabs::-webkit-scrollbar{display:none;}
    .nav-brand{flex:none;}
    #logoutBtn{flex:none;}
  }

  /* ---------- VIEWS ---------- */
  .view{display:none;}
  .view.active{display:block;}