:root{
    --paper:#EBEFEA;
    --paper-raised:#FBFCFA;
    --paper-deep:#DCE3DC;
    --ink:#1C2B27;
    --ink-soft:#54655F;
    --ink-faint:#8A9990;
    --line:#C4D0C6;
    --line-strong:#9FB1A3;
    --accent:#C1832E;
    --accent-deep:#93611E;
    --accent-soft:#F1DFC0;
    --teal:#2E6C63;
    --teal-soft:#DCEAE6;
    --error:#AE4630;
    --error-soft:#F4DED7;

    --money-ink:#8A5A12;   --money-bg:#FBEBCE;   --money-line:#E7C87E;
    --work-ink:#1F5A82;    --work-bg:#DCEBF6;    --work-line:#9BC6E3;
    --everyday-ink:#B4472C; --everyday-bg:#FBE3D9; --everyday-line:#EFAF95;
    --dev-ink:#5B3F9E;     --dev-bg:#E9E2F9;     --dev-line:#C0AEED;
    --fun-ink:#B0356A;     --fun-bg:#FBE0EC;     --fun-line:#EEA6C6;

    --radius-sm:6px;
    --radius:12px;
    --radius-lg:18px;
    --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --serif:'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --shadow-card: 0 1px 2px rgba(28,43,39,0.06), 0 6px 16px -8px rgba(28,43,39,0.18);
    --shadow-pop: 0 12px 32px -10px rgba(28,43,39,0.28);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:0.28;
    pointer-events:none;
    z-index:0;
  }
  h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; color:var(--ink);}
  p{margin:0;}
  button{font-family:inherit; cursor:pointer;}
  input,select,textarea{font-family:inherit; font-size:inherit; color:var(--ink);}
  a{color:inherit;}
  ::selection{background:var(--accent-soft);}

  :focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  .wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}

  /* ---------- Header ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background:rgba(235,239,234,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{display:flex; align-items:center; gap:20px; padding:14px 24px; max-width:1180px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
  .brand-mark{
    width:40px; height:34px; border-radius:8px; padding:0 3px;
    background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:-0.02em;
    transform:rotate(-4deg);
  }
  .brand-name{font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:-0.01em; color:var(--ink);}
  .search-shell{
    flex:1; display:flex; align-items:center; gap:8px;
    background:var(--paper-raised); border:1px solid var(--line-strong);
    border-radius:999px; padding:9px 16px; max-width:480px;
  }
  .search-shell svg{flex-shrink:0; opacity:0.55;}
  .search-shell input{
    border:none; outline:none; background:transparent; width:100%;
    font-size:14px; color:var(--ink);
  }
  .search-shell input::placeholder{color:var(--ink-faint);}
  .search-shell-form{flex:1; display:flex; align-items:center; gap:10px; min-width:0;}
  .search-go{
    flex-shrink:0; background:var(--teal); color:#fff; border:none; border-radius:999px;
    padding:9px 20px; font-size:13.5px; font-weight:600; transition:background .15s, transform .15s;
  }
  .search-go:hover{background:var(--accent-deep); transform:translateY(-1px);}

  .breadcrumb{
    font-family:var(--mono); font-size:12px; color:var(--ink-faint);
    padding:16px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .breadcrumb a{color:var(--ink-soft); text-decoration:none;}
  .breadcrumb a:hover{color:var(--ink); text-decoration:underline;}
  .breadcrumb span.sep{color:var(--line-strong);}
  .breadcrumb span.current{color:var(--ink);}

  .related-tools{margin-top:52px; padding-top:28px; border-top:1px solid var(--line);}
  .related-tools h4{
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:16px;
  }
  .related-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px;}
  .related-card{
    display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--paper-raised);
    border:1px solid var(--line); border-radius:var(--radius-sm); text-decoration:none; transition:border-color .15s, transform .15s;
  }
  .related-card:hover{border-color:var(--line-strong); transform:translateY(-2px);}
  .related-card .stamp{width:32px; height:32px; font-size:15px; border-radius:8px; flex-shrink:0; transform:none;}
  .related-card span.rname{font-size:13.5px; font-weight:600; color:var(--ink);}

  .subnav{border-bottom:1px solid var(--line); background:var(--paper-raised);}
  .subnav-inner{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; gap:4px; overflow-x:auto;}
  .subnav-link{
    display:flex; align-items:center; gap:6px; padding:11px 14px; font-size:13.5px; font-weight:600;
    color:var(--ink-soft); white-space:nowrap; border-bottom:2px solid transparent; flex-shrink:0;
    transition:color .15s, border-color .15s;
  }
  .subnav-link:hover{color:var(--ink);}
  .subnav-link.active{color:var(--ink); border-bottom-color:var(--accent);}
  @media (max-width:640px){ .subnav{display:none;} }

  .header-back{
    display:none; align-items:center; gap:6px; font-size:13.5px; font-weight:500;
    color:var(--ink-soft); background:none; border:none; padding:6px 4px;
  }
  .header-back svg{transition:transform .15s;}
  .header-back:hover{color:var(--ink);}
  .header-back:hover svg{transform:translateX(-3px);}

  /* ---------- Home / hero ---------- */
  #home{padding-bottom:80px;}
  .hero{padding:56px 0 36px;}
  .hero-eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--teal); display:flex; align-items:center; gap:8px; margin-bottom:14px;
  }
  .hero-eyebrow::before{content:""; width:20px; height:1px; background:var(--teal);}
  .hero h1{
    font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.6vw,46px);
    line-height:1.18; letter-spacing:-0.015em; max-width:780px;
  }
  .hero h1 em{ font-style:normal; font-weight:700; color:var(--accent-deep); }
  .hero-sub{margin-top:16px; max-width:560px; font-size:16.5px; color:var(--ink-soft); line-height:1.6;}

  .chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;}
  .chip{
    border:1px solid var(--line-strong); background:var(--paper-raised);
    padding:7px 15px; border-radius:999px; font-size:13.5px; font-weight:500;
    color:var(--ink-soft); transition:all .15s;
  }
  .chip:hover{border-color:var(--ink); color:var(--ink);}
  .chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

  .section-label{
    font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-faint); margin:40px 0 14px; display:flex; align-items:center; gap:10px;
  }
  .section-label span.count{color:var(--ink-soft);}

  .cat-section{margin-bottom:4px;}
  .cat-toggle{
    width:100%; background:none; border:none; padding:0; margin:40px 0 14px;
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-faint); transition:color .15s;
  }
  .cat-toggle:hover{color:var(--ink);}
  .cat-toggle span.count{color:var(--ink-soft);}
  .chevron{transition:transform .25s cubic-bezier(.2,.8,.2,1); flex-shrink:0;}
  .chevron.rotated{transform:rotate(-90deg);}
  .cat-body{
    display:grid; grid-template-rows:1fr; transition:grid-template-rows .32s ease;
  }
  .cat-body.collapsed{grid-template-rows:0fr;}
  .cat-body-inner{overflow:hidden; min-height:0;}

  .tool-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(258px,1fr)); gap:14px;
  }
  .tool-card{
    background:var(--paper-raised); border:1px solid var(--line);
    border-radius:var(--radius); padding:18px; text-align:left;
    display:flex; flex-direction:column; gap:12px; min-height:150px;
    box-shadow:var(--shadow-card); transition:transform .18s cubic-bezier(.2,.8,.3,1.3), box-shadow .18s, border-color .18s;
    text-decoration:none; position:relative; overflow:hidden;
    animation:cardIn .45s cubic-bezier(.2,.7,.2,1) backwards;
  }
  .tool-grid .tool-card:nth-child(1){animation-delay:.02s;} .tool-grid .tool-card:nth-child(2){animation-delay:.06s;}
  .tool-grid .tool-card:nth-child(3){animation-delay:.10s;} .tool-grid .tool-card:nth-child(4){animation-delay:.14s;}
  .tool-grid .tool-card:nth-child(5){animation-delay:.18s;} .tool-grid .tool-card:nth-child(6){animation-delay:.22s;}
  .tool-grid .tool-card:nth-child(7){animation-delay:.26s;} .tool-grid .tool-card:nth-child(8){animation-delay:.30s;}
  .tool-grid .tool-card:nth-child(n+9){animation-delay:.34s;}
  @keyframes cardIn{ from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
  @media (prefers-reduced-motion: reduce){ .tool-card{animation:none;} }
  .tool-card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
    background:radial-gradient(120px 90px at 20% 0%, var(--card-glow, rgba(193,131,46,0.14)), transparent 70%);
    transition:opacity .2s; pointer-events:none;
  }
  .tool-card:hover{transform:translateY(-4px) scale(1.015); border-color:var(--line-strong); box-shadow:var(--shadow-pop);}
  .tool-card:hover::before{opacity:1;}
  .tool-card:hover .stamp{transform:rotate(0deg) scale(1.06);}
  .tool-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
  .stamp{
    width:44px; height:44px; border-radius:11px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-size:21px; transform:rotate(-4deg); transition:transform .2s cubic-bezier(.2,.8,.3,1.3);
  }
  .tool-card:nth-child(odd) .stamp{transform:rotate(4deg);}
  .tool-card:nth-child(odd):hover .stamp{transform:rotate(0deg) scale(1.06);}
  .tool-card:nth-child(3n) .stamp{transform:rotate(-2deg);}
  .cat-money .stamp{background:var(--money-bg); box-shadow:inset 0 0 0 1.5px var(--money-line); --card-glow:rgba(138,90,18,0.16);}
  .cat-work .stamp{background:var(--work-bg); box-shadow:inset 0 0 0 1.5px var(--work-line); --card-glow:rgba(31,90,130,0.16);}
  .cat-everyday .stamp{background:var(--everyday-bg); box-shadow:inset 0 0 0 1.5px var(--everyday-line); --card-glow:rgba(180,71,44,0.16);}
  .cat-dev .stamp{background:var(--dev-bg); box-shadow:inset 0 0 0 1.5px var(--dev-line); --card-glow:rgba(91,63,158,0.16);}
  .cat-fun .stamp{background:var(--fun-bg); box-shadow:inset 0 0 0 1.5px var(--fun-line); --card-glow:rgba(176,53,106,0.16);}
  .cat-tag{
    font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em;
    padding:3px 8px; border-radius:5px; white-space:nowrap; font-weight:600;
  }
  .cat-money .cat-tag{color:var(--money-ink); background:var(--money-bg);}
  .cat-work .cat-tag{color:var(--work-ink); background:var(--work-bg);}
  .cat-everyday .cat-tag{color:var(--everyday-ink); background:var(--everyday-bg);}
  .cat-dev .cat-tag{color:var(--dev-ink); background:var(--dev-bg);}
  .cat-fun .cat-tag{color:var(--fun-ink); background:var(--fun-bg);}
  .tool-card h3{font-size:16.5px; letter-spacing:-0.01em;}
  .tool-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
  .tool-card .go{
    margin-top:auto; font-size:12.5px; font-family:var(--mono); color:var(--ink-faint);
    display:flex; align-items:center; gap:6px; transition:gap .15s, color .15s;
  }
  .tool-card:hover .go{color:var(--accent-deep); gap:9px;}

  .empty-state{
    padding:60px 20px; text-align:center; color:var(--ink-soft); border:1px dashed var(--line-strong);
    border-radius:var(--radius); background:var(--paper-raised);
  }
  .empty-state strong{display:block; color:var(--ink); font-family:var(--serif); font-size:19px; margin-bottom:6px;}

  footer.site{border-top:1px solid var(--line); padding:34px 0 44px; margin-top:40px;}
  .footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center;}
  .footer-note{font-size:12.5px; color:var(--ink-faint); max-width:520px; line-height:1.6;}
  .footer-legal{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px;}
  .footer-legal a{color:var(--ink-soft); text-decoration:none;}
  .footer-legal a:hover{color:var(--ink); text-decoration:underline;}
  .footer-legal .footer-dot{color:var(--line-strong);}
  .footer-copyright{margin-top:10px; font-size:11.5px; color:var(--ink-faint);}

  /* Cookie consent */
  #cookieConsent{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:300; max-width:640px; margin:0 auto;
    background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:16px 18px;
    box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    animation:consentIn .3s ease;
  }
  @keyframes consentIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
  #cookieConsent p{font-size:12.5px; line-height:1.5; color:var(--paper); flex:1; min-width:200px; margin:0;}
  #cookieConsent a{color:var(--accent-soft); text-decoration:underline;}
  #cookieConsent button{
    flex-shrink:0; background:var(--accent); color:var(--ink); border:none; border-radius:999px;
    padding:9px 18px; font-size:13px; font-weight:600;
  }
  #cookieConsent button:hover{background:var(--accent-soft);}
  @media (prefers-reduced-motion: reduce){ #cookieConsent{animation:none;} }

  /* Legal / static content pages */
  .legal-page{padding:20px 0 70px; max-width:760px;}
  .legal-page h1{font-size:clamp(26px,4vw,36px); margin-bottom:8px;}
  .legal-page .legal-updated{font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-bottom:32px;}
  .legal-page h2{font-size:19px; margin:32px 0 10px;}
  .legal-page p{margin-bottom:14px; line-height:1.7; color:var(--ink-soft); font-size:14.5px;}
  .legal-page ul{margin:0 0 14px; padding-left:20px; color:var(--ink-soft); font-size:14.5px; line-height:1.7;}
  .legal-page a{color:var(--teal); text-decoration:underline;}
  .legal-page strong{color:var(--ink);}
  .legal-note{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:14px 16px; font-size:13px; color:var(--ink-soft); margin:20px 0;
  }

  /* Text diff checker */
  .diff-line{padding:2px 8px; white-space:pre-wrap; word-break:break-word; border-radius:3px;}
  .diff-added{background:var(--teal-soft); color:#1D4B44;}
  .diff-removed{background:var(--error-soft); color:#7A2E1C; text-decoration:line-through; text-decoration-color:rgba(122,46,28,0.4);}

  /* Markdown preview */
  .md-preview{font-size:14px; line-height:1.7; color:var(--ink-soft); min-height:260px;}
  .md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4{font-family:var(--serif); color:var(--ink); margin:16px 0 8px;}
  .md-preview h1{font-size:26px;} .md-preview h2{font-size:21px;} .md-preview h3{font-size:17px;}
  .md-preview p{margin:0 0 12px;}
  .md-preview code{font-family:var(--mono); background:var(--paper); padding:1px 5px; border-radius:4px; font-size:13px;}
  .md-preview pre{background:var(--ink); color:var(--paper); padding:12px 14px; border-radius:8px; overflow-x:auto; margin:0 0 12px;}
  .md-preview pre code{background:none; color:inherit; padding:0;}
  .md-preview ul{margin:0 0 12px; padding-left:20px;}
  .md-preview blockquote{border-left:3px solid var(--accent); margin:0 0 12px; padding:2px 0 2px 14px; color:var(--ink-faint); font-style:italic;}
  .md-preview a{color:var(--teal);}

  /* FAQ accordion */
  .faq-section{margin-top:44px; padding-top:28px; border-top:1px solid var(--line);}
  .faq-section h4{font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item:first-of-type{border-top:1px solid var(--line);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding:16px 2px;
    display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
    font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink);
  }
  .faq-q:hover{color:var(--accent-deep);}
  .faq-chevron{transition:transform .25s cubic-bezier(.2,.8,.2,1); flex-shrink:0; color:var(--ink-faint);}
  .faq-chevron.open{transform:rotate(180deg);}
  .faq-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease;}
  .faq-body.open{grid-template-rows:1fr;}
  .faq-body-inner{overflow:hidden; min-height:0;}
  .faq-body p{padding:0 2px 18px; color:var(--ink-soft); font-size:14px; line-height:1.65; margin:0;}

  /* ---------- Tool view ---------- */
  .tool-page{padding:20px 0 80px;}
  .tool-header{display:flex; align-items:center; gap:14px; margin-bottom:26px;}
  .tool-header .stamp{width:46px; height:46px; font-size:22px; border-radius:12px; transform:rotate(-3deg);}
  .cat-money-solo{background:var(--money-bg); box-shadow:inset 0 0 0 1.5px var(--money-line);}
  .cat-work-solo{background:var(--work-bg); box-shadow:inset 0 0 0 1.5px var(--work-line);}
  .cat-everyday-solo{background:var(--everyday-bg); box-shadow:inset 0 0 0 1.5px var(--everyday-line);}
  .cat-dev-solo{background:var(--dev-bg); box-shadow:inset 0 0 0 1.5px var(--dev-line);}
  .cat-fun-solo{background:var(--fun-bg); box-shadow:inset 0 0 0 1.5px var(--fun-line);}
  .tool-header h2{font-size:26px; letter-spacing:-0.01em;}
  .tool-header .tsub{font-size:13.5px; color:var(--ink-soft); margin-top:2px;}

  .tool-layout{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;}
  @media (max-width:860px){ .tool-layout{grid-template-columns:1fr;} }
  .tool-layout.single{grid-template-columns:1fr; max-width:640px;}
  .tool-layout.wide-output{grid-template-columns:0.9fr 1.1fr;}

  .panel{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:24px; box-shadow:var(--shadow-card);
  }
  .panel h4{
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:16px;
  }

  .field{margin-bottom:16px;}
  .field:last-child{margin-bottom:0;}
  .field label{display:block; font-size:13px; font-weight:500; color:var(--ink-soft); margin-bottom:6px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .input-shell{
    display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
    background:var(--paper); overflow:hidden; transition:border-color .15s;
  }
  .input-shell:focus-within{border-color:var(--teal);}
  .input-shell .prefix, .input-shell .suffix{
    padding:0 12px; font-family:var(--mono); font-size:13px; color:var(--ink-faint); flex-shrink:0;
  }
  .input-shell input, .input-shell select{
    border:none; outline:none; background:transparent; padding:10px 4px; width:100%; font-size:14.5px;
    font-family:var(--mono);
  }
  .input-shell.text input{font-family:var(--sans);}
  textarea.ta{
    width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--paper);
    padding:12px; font-family:var(--mono); font-size:13.5px; resize:vertical; outline:none; min-height:140px;
  }
  textarea.ta:focus{border-color:var(--teal);}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:11px 20px; border-radius:999px; border:1px solid transparent;
    font-size:14px; font-weight:600; transition:all .15s;
  }
  .btn-primary{background:var(--ink); color:var(--paper);}
  .btn-primary:hover{background:var(--accent-deep);}
  .btn-secondary{background:var(--paper); color:var(--ink); border-color:var(--line-strong);}
  .btn-secondary:hover{border-color:var(--ink);}
  .btn-ghost{background:transparent; color:var(--ink-soft); border-color:transparent; padding:8px 12px;}
  .btn-ghost:hover{color:var(--ink); background:var(--paper-deep);}
  .btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
  .btn:disabled{opacity:0.5; cursor:not-allowed;}

  .quick-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
  .quick-btn{
    padding:6px 13px; border-radius:999px; border:1px solid var(--line-strong); background:var(--paper);
    font-size:12.5px; font-weight:500; color:var(--ink-soft);
  }
  .quick-btn.on, .quick-btn:hover{border-color:var(--ink); color:var(--ink); background:var(--paper-raised);}

  /* Receipt-style output */
  .receipt{font-family:var(--mono);}
  .receipt .headline{
    padding-bottom:16px; margin-bottom:16px; border-bottom:1px dashed var(--line-strong);
  }
  .receipt .headline .amt{font-family:var(--serif); font-size:34px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
  .receipt .headline .amt-label{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:4px;}
  .receipt-row{display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:13.5px;}
  .receipt-row .label{white-space:nowrap; color:var(--ink-soft);}
  .receipt-row .fill{flex:1; border-bottom:1px dotted var(--line-strong); margin-bottom:4px; min-width:12px;}
  .receipt-row .value{white-space:nowrap; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
  .receipt-row.total{border-top:1px solid var(--ink); margin-top:8px; padding-top:10px; font-size:15px;}
  .receipt-row.total .value{color:var(--accent-deep);}
  .receipt-row.error .value{color:var(--error);}
  .receipt-foot{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-strong); font-size:12px; color:var(--ink-faint); font-family:var(--sans); line-height:1.6;}

  .placeholder-note{color:var(--ink-faint); font-size:13.5px; font-family:var(--sans); padding:6px 0;}

  canvas.chart{width:100%; height:180px; margin-top:16px;}

  .table-mini{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; margin-top:14px;}
  .table-mini th{text-align:left; color:var(--ink-faint); font-weight:500; text-transform:uppercase; font-size:10.5px; letter-spacing:0.06em; padding-bottom:6px; border-bottom:1px solid var(--line-strong);}
  .table-mini td{padding:7px 0; border-bottom:1px solid var(--line); color:var(--ink-soft);}
  .table-mini td.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink);}
  .table-mini th.num{text-align:right;}

  .tabs{display:flex; gap:4px; background:var(--paper); border:1px solid var(--line-strong); border-radius:999px; padding:4px; margin-bottom:18px; width:fit-content;}
  .tab-btn{padding:7px 16px; border-radius:999px; font-size:13px; font-weight:500; color:var(--ink-soft); background:none; border:none;}
  .tab-btn.active{background:var(--ink); color:var(--paper);}

  .copy-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px;}
  .copy-row code{font-family:var(--mono); font-size:12.5px; word-break:break-all;}
  .copy-row button{flex-shrink:0; font-size:11.5px; padding:5px 10px; border-radius:6px; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft);}
  .copy-row button:hover{color:var(--ink); border-color:var(--ink);}

  .wheel-wrap{display:flex; flex-direction:column; align-items:center; gap:18px;}
  .wheel-stage{position:relative; width:min(320px, 80vw); height:min(320px, 80vw);}
  .wheel-rim-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:3; pointer-events:none;}
  .wheel-hub-img{
    position:absolute; top:50%; left:50%; width:19%; height:19%; transform:translate(-50%,-50%);
    z-index:5; pointer-events:none; object-fit:contain; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.38));
  }
  .wheel-canvas-wrap{
    position:absolute; top:50%; left:50%; width:60%; height:60%; transform:translate(-50%,-50%);
    border-radius:50%; overflow:hidden; z-index:1; box-shadow:0 6px 16px -6px rgba(28,43,39,0.35);
  }
  #wheelCanvas{width:100%; height:100%; display:block; background:var(--paper-raised); transform-origin:50% 50%; transform:rotate(0deg); will-change:transform;}
  .wheel-result{font-family:var(--serif); font-size:22px; font-weight:600; min-height:32px; text-align:center;}
  .wheel-appearance-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
  @media (max-width:420px){ .wheel-appearance-row{grid-template-columns:1fr;} }

  /* Confetti — shared programmatic-particle version, used by the wheel, slot machine, and race */
  .confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:400; overflow:hidden;}
  .confetti-piece{position:fixed; border-radius:2px; will-change:transform; top:0; left:0;}

  .wheel-overlay{
    position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    background:rgba(20,30,27,0.72); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .wheel-overlay.active{opacity:1; pointer-events:auto;}
  .wheel-overlay-stage{position:relative; width:min(72vmin,560px); height:min(72vmin,560px);}
  .wheel-overlay-result{
    font-family:var(--serif); font-size:clamp(22px,4vw,34px); font-weight:600; color:#fff; text-align:center;
    min-height:40px; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
  }
  .wheel-overlay-result.show{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){ .wheel-overlay, .wheel-overlay-result{transition:none;} }

  /* Slot machine */
  .slot-machine{
    display:inline-flex; align-items:center; gap:16px; padding:26px 30px 30px; position:relative;
    background:var(--ink); border-radius:20px; border:3px solid var(--accent-deep);
    box-shadow:0 16px 36px -10px rgba(28,43,39,0.5), inset 0 0 0 2px rgba(193,131,46,0.35);
  }
  .marquee-bulb{
    position:absolute; top:-7px; width:9px; height:9px; border-radius:50%; transform:translateX(-50%);
    background:var(--accent); box-shadow:0 0 5px 1px rgba(193,131,46,0.7); z-index:5;
    animation:bulbTwinkle 1.4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){ .marquee-bulb{animation:none;} }
  .slot-reel{
    width:120px; height:168px; overflow:hidden; position:relative;
    border:3px solid var(--paper-raised); border-radius:10px; background:var(--paper-raised);
    box-shadow:0 4px 14px -6px rgba(0,0,0,0.5), inset 0 0 0 2px var(--ink);
  }
  .slot-reel::after{
    content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
    background:linear-gradient(105deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 32%);
  }
  .slot-payline{
    position:absolute; left:0; right:0; top:56px; height:56px;
    border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);
    background:rgba(193,131,46,0.08); z-index:3; pointer-events:none;
  }
  .slot-reel-strip{position:absolute; left:0; right:0; top:0; will-change:transform;}
  .slot-row{
    height:56px; display:flex; align-items:center; justify-content:center; padding:0 8px;
    font-family:var(--sans); font-weight:700; font-size:13.5px; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
  }
  .slot-lever{position:relative; width:24px; height:140px; flex-shrink:0;}
  .slot-lever-track{
    position:absolute; left:50%; top:0; bottom:0; width:6px; transform:translateX(-50%);
    background:var(--paper-raised); border-radius:3px; box-shadow:inset 0 0 0 2px var(--ink-soft);
  }
  .slot-lever-handle{
    position:absolute; left:50%; top:0; width:28px; height:28px; border-radius:50%; transform:translate(-50%,0);
    background:radial-gradient(circle at 35% 30%, #E0463A, #93231A);
    box-shadow:0 3px 6px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.25);
    transition:top .28s cubic-bezier(0.3,0.5,0.3,1.5);
  }
  .slot-lever.pulled .slot-lever-handle{top:104px;}
  .slot-jackpot{
    margin-top:6px; text-align:center; font-family:var(--serif); font-size:23px; font-weight:600;
    color:var(--accent-deep); opacity:0; transform:scale(0.92); transition:opacity .3s, transform .3s; min-height:34px;
  }
  .slot-jackpot.show{opacity:1; transform:scale(1); animation:slotPulse 1s ease-in-out infinite alternate;}
  @keyframes slotPulse{ from{text-shadow:0 0 0 rgba(193,131,46,0);} to{text-shadow:0 0 16px rgba(193,131,46,0.45);} }
  @media (prefers-reduced-motion: reduce){ .slot-jackpot.show{animation:none;} }
  @media (max-width:480px){
    .slot-machine{padding:20px 12px 22px; gap:8px;}
    .slot-reel{width:84px; height:168px;}
    .slot-row{font-size:11.5px; padding:0 4px;}
    .slot-lever{width:16px; height:100px;}
    .slot-lever-handle{width:20px; height:20px;}
    .slot-lever.pulled .slot-lever-handle{top:76px;}
    .marquee-bulb{width:7px; height:7px;}
  }

  .slot-overlay{
    position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
    background:rgba(20,30,27,0.72); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .slot-overlay.active{opacity:1; pointer-events:auto;}
  .slot-overlay-stage{transform-origin:50% 50%; display:flex; align-items:center; justify-content:center;}
  .slot-overlay-jackpot{
    font-family:var(--serif); font-size:clamp(22px,4vw,32px); font-weight:600; color:#fff; text-align:center;
    min-height:40px; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
  }
  .slot-overlay-jackpot.show{opacity:1; transform:translateY(0); animation:slotPulse 1s ease-in-out infinite alternate;}
  @media (prefers-reduced-motion: reduce){ .slot-overlay, .slot-overlay-jackpot{transition:none; animation:none;} }

  /* Race randomizer */
  .race-track{
    position:relative; border:3px solid var(--ink); border-radius:12px;
    background:var(--paper-raised); padding:6px 0 6px 10px; overflow:hidden;
    box-shadow:0 10px 26px -10px rgba(28,43,39,0.42), inset 0 0 34px -12px rgba(28,43,39,0.18);
  }
  /* Track surfaces */
  .race-track[data-surface="asphalt"]{
    background-color:#2b3032;
    background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 44px);
  }
  .race-track[data-surface="dirt"]{
    background-color:#6b4a2f;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,0.18) 0 3px, transparent 4px),
      radial-gradient(circle at 60% 70%, rgba(0,0,0,0.14) 0 2px, transparent 3px),
      radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0 2px, transparent 3px);
    background-size:42px 42px, 30px 30px, 54px 54px;
  }
  .race-track[data-surface="sand"]{
    background-color:#D8C08A;
    background-image:
      radial-gradient(circle at 30% 40%, rgba(255,255,255,0.22) 0 2px, transparent 3px),
      radial-gradient(circle at 70% 60%, rgba(120,90,40,0.18) 0 2px, transparent 3px);
    background-size:22px 22px, 26px 26px;
  }
  .race-track::before{
    content:''; position:absolute; top:0; bottom:0; left:0; width:6px; z-index:2;
    background:repeating-linear-gradient(180deg, var(--ink) 0 8px, var(--accent) 8px 16px);
  }
  .race-finish-line{
    position:absolute; top:0; bottom:0; right:30px; width:12px; z-index:1;
    background-color:var(--paper-raised);
    background-image:
      linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
      linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
    background-size:8px 8px; background-position:0 0, 4px 4px;
    opacity:0.9; box-shadow:0 0 0 1px var(--line-strong);
  }
  .race-track::after{content:'🏁'; position:absolute; right:4px; top:6px; font-size:18px; z-index:3;}
  .race-lane{position:relative; border-bottom:1px dashed rgba(255,255,255,0.3);}
  .race-lane:last-child{border-bottom:none;}
  .race-token{
    position:absolute; left:8px; top:50%; transform:translateY(-50%); z-index:2;
    display:flex; flex-direction:row-reverse; align-items:center; gap:6px; transition:opacity .3s ease;
  }
  .race-token-pill{
    color:#fff; font-size:12.5px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;
    text-shadow:0 1px 2px rgba(0,0,0,0.75), 0 0 5px rgba(0,0,0,0.55);
  }
  .race-token.race-winner{outline:3px solid var(--accent); outline-offset:3px; border-radius:12px;}
  /* Live leaderboard spotlight — kicks in once a race has more than 5 racers */
  .race-token-faded{opacity:0.32;}
  .race-token-lead{opacity:1; z-index:3;}
  .race-token-lead .race-token-car svg{filter:drop-shadow(0 0 5px rgba(255,210,80,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.3));}
  .race-token-badge{
    position:absolute; top:-15px; left:50%; transform:translateX(-50%);
    font-size:13px; z-index:4; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45)); pointer-events:none;
  }
  .race-status{margin-top:16px; text-align:center; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--accent-deep); min-height:28px;}
  .race-count-label{font-family:var(--mono); font-size:12px; color:var(--ink-faint);}

  /* Vertical orientation — races run bottom to top */
  .race-track.vertical{padding:10px 6px 6px; height:440px;}
  .race-track.vertical::before{
    top:auto; bottom:0; left:0; right:0; width:auto; height:6px;
    background:repeating-linear-gradient(90deg, var(--ink) 0 8px, var(--accent) 8px 16px);
  }
  .race-track.vertical .race-finish-line{top:30px; bottom:auto; left:0; right:0; height:12px; width:auto;}
  .race-track.vertical::after{top:6px; bottom:auto; right:6px;}
  .race-lanes.vertical{display:flex; flex-direction:row; height:100%;}
  .race-lane.vertical{
    position:relative; flex:0 0 auto; height:100%;
    border-bottom:none; border-right:1px dashed rgba(255,255,255,0.3);
  }
  .race-lane.vertical:last-child{border-right:none;}
  .race-token.vertical{
    left:50%; bottom:10px; top:auto; transform:translateX(-50%); flex-direction:column; gap:4px; text-align:center;
  }
  .race-token.vertical .race-token-badge{top:-15px;}
  .race-token.vertical .race-token-car svg{transform:rotate(-90deg);}
  .race-token.vertical .race-token-pill{max-width:76px; font-size:11px;}

  /* Race results — ranked list from first place to last */
  .race-results{margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
  .race-results h4{margin-bottom:10px;}
  .race-results-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto;}
  .race-results-row{
    display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px;
    background:var(--paper-raised); font-size:14px; border:1px solid var(--line);
  }
  .race-results-row.is-first{background:rgba(193,131,46,0.14); border-color:rgba(193,131,46,0.4); font-weight:700;}
  .race-results-rank{font-family:var(--mono); font-weight:700; min-width:26px; text-align:center; font-size:13px; flex-shrink:0;}
  .race-results-dot{width:12px; height:12px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1px rgba(28,43,39,0.25);}
  .race-results-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* Live Rankings — a livestream-style overlay on the right side of the track, active only during a race */
  .race-live-rankings{
    flex-shrink:0; width:clamp(150px, 20vw, 220px); max-height:min(70vh, 460px); overflow-y:auto;
    background:rgba(10,16,14,0.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:12px;
    box-shadow:0 14px 32px -10px rgba(0,0,0,0.55);
  }
  .race-live-rankings-title{
    display:flex; align-items:center; gap:6px; margin-bottom:9px;
    font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.65);
  }
  .race-live-dot{width:7px; height:7px; border-radius:50%; background:#E0463A; flex-shrink:0; animation:raceLivePulse 1.2s ease-in-out infinite;}
  @keyframes raceLivePulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }
  .race-live-rankings-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;}
  .race-live-rankings-row{
    display:flex; align-items:center; gap:7px; padding:6px 9px; border-radius:8px;
    background:rgba(255,255,255,0.07); font-size:12.5px; color:#fff; line-height:1.3;
  }
  .race-live-rankings-row.is-first{background:rgba(193,131,46,0.4);}
  .race-live-rankings-rank{font-family:var(--mono); font-weight:700; min-width:16px; text-align:center; font-size:11.5px; opacity:0.85; flex-shrink:0;}
  .race-live-rankings-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,0.3);}
  .race-live-rankings-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .race-live-rankings-more{font-size:11px; color:rgba(255,255,255,0.55); text-align:center; padding:4px 0 0;}
  @media (prefers-reduced-motion: reduce){ .race-live-dot{animation:none;} }

  /* Race settings modal */
  .race-settings-overlay{
    position:fixed; inset:0; z-index:250; display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(20,30,27,0.6); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .race-settings-overlay.active{opacity:1; pointer-events:auto;}
  .race-settings-panel{
    background:var(--paper-raised); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
    width:100%; max-width:460px; max-height:86vh; overflow-y:auto;
    transform:translateY(10px) scale(0.98); transition:transform .25s ease;
  }
  .race-settings-overlay.active .race-settings-panel{transform:translateY(0) scale(1);}
  .race-settings-header{
    display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
    border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper-raised); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  .race-settings-close{background:none; border:none; font-size:18px; color:var(--ink-soft); padding:4px 8px; border-radius:6px;}
  .race-settings-close:hover{color:var(--ink); background:var(--paper);}
  .race-settings-body{padding:20px;}
  @media (prefers-reduced-motion: reduce){ .race-settings-overlay, .race-settings-panel{transition:none;} }

  /* Fullscreen race overlay */
  .race-fullscreen-overlay{
    position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    background:rgba(20,30,27,0.72); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .race-fullscreen-overlay.active{opacity:1; pointer-events:auto;}
  .race-fullscreen-row{display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; max-width:96vw;}
  .race-fullscreen-stage{position:relative; max-width:94vw; display:flex; align-items:center; justify-content:center;}
  .race-fullscreen-result{
    font-family:var(--serif); font-size:clamp(20px,4vw,30px); font-weight:600; color:#fff; text-align:center;
    min-height:38px; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
  }
  .race-fullscreen-result.show{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){ .race-fullscreen-overlay, .race-fullscreen-result{transition:none;} }

  .qr-preview{display:flex; flex-direction:column; align-items:center; gap:14px; padding:10px 0;}
  #qrBox{background:#fff; padding:14px; border-radius:var(--radius-sm); border:1px solid var(--line); min-height:220px; min-width:220px; display:flex; align-items:center; justify-content:center;}

  /* Calculator */
  .calc-shell{max-width:340px; margin:0 auto;}
  .calc-screen{
    background:var(--ink); color:var(--paper); border-radius:var(--radius-sm); padding:22px 18px 16px;
    text-align:right; font-family:var(--mono); position:relative; margin-bottom:12px;
  }
  .calc-mem-flag{position:absolute; top:8px; left:14px; font-size:11px; letter-spacing:0.08em; color:var(--accent-soft); visibility:hidden;}
  .calc-screen-val{font-size:36px; font-weight:500; line-height:1.1; word-break:break-all;}
  .calc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
  .calc-key{
    padding:16px 0; border-radius:10px; border:1px solid var(--line-strong); background:var(--paper);
    font-family:var(--mono); font-size:16px; font-weight:600; color:var(--ink); transition:transform .1s, background .1s;
  }
  .calc-key:active{transform:scale(0.94);}
  .calc-key:hover{background:var(--paper-raised); border-color:var(--ink);}
  .calc-key.op{background:var(--everyday-bg); color:var(--everyday-ink); border-color:var(--everyday-line);}
  .calc-key.op:hover{background:var(--everyday-line);}
  .calc-key.eq{background:var(--ink); color:var(--paper); grid-row:span 1;}
  .calc-key.eq:hover{background:var(--accent-deep);}
  .calc-key.fn{font-size:12.5px; color:var(--ink-soft);}

  /* BMI gauge */
  .bmi-gauge{margin-top:16px;}
  .bmi-gauge-track{height:10px; border-radius:999px; background:linear-gradient(90deg, #7BA6C9 0%, #6FAE8A 22%, #6FAE8A 45%, #E0B84E 65%, #D97757 85%); position:relative;}
  .bmi-gauge-dot{position:absolute; top:-4px; width:18px; height:18px; border-radius:50%; background:var(--ink); border:3px solid var(--paper-raised); box-shadow:0 1px 4px rgba(0,0,0,0.3); transform:translateX(-50%); transition:left .3s ease;}
  .bmi-gauge-labels{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-faint); margin-top:6px; font-family:var(--mono);}

  /* World clock */
  .wc-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 4px; border-bottom:1px solid var(--line);}
  .wc-row:last-child{border-bottom:none;}
  .wc-city{font-weight:600; font-size:14.5px;}
  .wc-date{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
  .wc-time{font-family:var(--mono); font-size:19px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}

  /* Timer / stopwatch */
  .big-display{font-family:var(--mono); font-size:clamp(44px,10vw,64px); font-weight:600; text-align:center; letter-spacing:-0.01em; margin:20px 0; font-variant-numeric:tabular-nums;}
  .timer-controls{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .timer-status{text-align:center; font-family:var(--serif); font-size:18px; color:var(--accent-deep); min-height:26px; margin-top:6px;}

  /* Shared: full-width panel following a .tool-layout grid */
  .panel-full{margin-top:22px;}

  /* Expense splitter */
  .es-positive{color:var(--teal); font-weight:700;}
  .es-negative{color:var(--error); font-weight:700;}

  /* Time zone planner */
  .tzp-scroll{overflow-x:auto; margin-top:14px;}
  .tzp-table{border-collapse:collapse; font-family:var(--mono); font-size:11px; width:100%;}
  .tzp-table th, .tzp-table td{padding:5px 7px; text-align:center; border:1px solid var(--line); white-space:nowrap;}
  .tzp-table th{color:var(--ink-faint); font-weight:600;}
  .tzp-city-label{text-align:left !important; font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink);}
  .tzp-cell.tzp-in{background:var(--everyday-bg); color:var(--everyday-ink);}
  .tzp-cell.tzp-overlap-col{background:var(--teal); color:#fff; font-weight:700;}
  .tzp-table th.tzp-overlap-col{background:var(--teal-soft); color:var(--teal);}
  .tzp-window{margin-bottom:18px;}
  .tzp-window:last-child{margin-bottom:0;}
  #tzpCityList{margin-top:16px;}

  /* Image compressor */
  .ic-dropzone{
    border:2px dashed var(--line-strong); border-radius:var(--radius); background:var(--paper);
    padding:36px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .ic-dropzone:hover, .ic-dropzone.ic-dragover{border-color:var(--teal); background:var(--teal-soft);}
  .ic-dropzone strong{display:block; font-family:var(--serif); font-size:17px; color:var(--ink); margin-bottom:4px;}
  .ic-dropzone span{font-size:13px; color:var(--ink-faint);}
  .ic-meta{margin-top:10px; font-size:12.5px; color:var(--ink-soft); word-break:break-all;}
  .ic-preview{max-width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); margin-bottom:16px; display:block;}
  .ic-hidden-input{display:none;}

  /* Long-form explanatory content on tool pages (distinct from the FAQ accordion) */
  .tool-article{margin-top:44px; padding-top:28px; border-top:1px solid var(--line); max-width:760px;}
  .tool-article h3{font-size:19px; margin:28px 0 10px;}
  .tool-article h3:first-child{margin-top:0;}
  .tool-article p{margin-bottom:14px; line-height:1.7; color:var(--ink-soft); font-size:14.5px;}
  .tool-article strong{color:var(--ink);}
  .tool-article .table-mini{margin-bottom:18px;}

  @media (max-width:640px){
    .header-inner{padding:12px 16px; gap:12px;}
    .brand-name{display:none;}
    .wrap{padding:0 16px;}
    .hero{padding:34px 0 22px;}
    .field-row{grid-template-columns:1fr;}
  }