/* Fonts are bundled locally (SIL Open Font License): IBM Plex Sans Arabic, Bricolage Grotesque */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fonts are bundled locally (SIL Open Font License): IBM Plex Sans Arabic, Bricolage Grotesque */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
  --bg:#F3F5F9; --surface:#FFFFFF; --ink:#141B34; --muted:#56607C; --line:#DCE1EC;
  --organize:#3B3FE0; --optimize:#C93A21; --convert:#08776B; --edit:#9A6500;
  --on-tone:#FFFFFF; --danger:#B3261E; --warn:#8A5A00;
  --gutter:clamp(16px,4vw,40px);
  --display:'Bricolage Grotesque','IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1220; --surface:#171D30; --ink:#EDF0FA; --muted:#A2ACC8; --line:#2A3250;
    --organize:#9B9EFF; --optimize:#FF8F76; --convert:#3CD0BC; --edit:#F0B84A;
    --on-tone:#0E1220; --danger:#FF8A80; --warn:#F0B84A;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1220; --surface:#171D30; --ink:#EDF0FA; --muted:#A2ACC8; --line:#2A3250;
  --organize:#9B9EFF; --optimize:#FF8F76; --convert:#3CD0BC; --edit:#F0B84A;
  --on-tone:#0E1220; --danger:#FF8A80; --warn:#F0B84A;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-text-size-adjust:100%}
html[dir="rtl"] *{letter-spacing:0!important}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tone,var(--organize));outline-offset:2px}
svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.g-organize{--tone:var(--organize)} .g-optimize{--tone:var(--optimize)}
.g-convert{--tone:var(--convert)} .g-edit{--tone:var(--edit)}

.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--gutter)}
.top{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font:800 1.35rem var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.brand svg{width:30px;height:30px}
.langbtn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 14px;min-height:40px;cursor:pointer;font-weight:500}

.hero{padding-block:clamp(28px,7vw,72px) 28px}
h1{font:800 clamp(2.2rem,7vw,4rem)/1.04 var(--display);letter-spacing:-.03em;margin:0 0 16px;max-width:15ch;text-wrap:balance}
.lead{color:var(--muted);font-size:1.1rem;max-width:56ch;margin:0}
.privacy{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;color:var(--convert)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:8px 0 6px;color:var(--muted);font-size:.92rem}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend span::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--tone)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 16px;padding-block:14px 48px}
.tile{position:relative;margin-top:10px;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:18px 18px 20px;display:grid;gap:6px;align-content:start;cursor:pointer;min-height:132px;color:var(--ink)}
.tile::before{content:'';position:absolute;top:-10px;inset-inline-start:-1px;width:54px;height:10px;background:var(--tone);border-radius:8px 8px 0 0}
.tile:hover{border-color:var(--tone)}
.tile svg{color:var(--tone);width:26px;height:26px;margin-bottom:4px}
.tt{font:700 1.15rem var(--display)}
.td{color:var(--muted);font-size:.93rem;line-height:1.45}

.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:10px 0;cursor:pointer;color:var(--muted);font-weight:500;min-height:44px}
html[dir="rtl"] .back svg{transform:scaleX(-1)}
#tool{padding-block:8px 56px}
#toolTitle{font:800 clamp(1.8rem,5vw,2.6rem)/1.1 var(--display);letter-spacing:-.02em;margin:8px 0 8px;color:var(--ink)}
#toolTitle::before{content:'';display:block;width:54px;height:10px;background:var(--tone);border-radius:8px 8px 0 0;margin-bottom:14px}
#status{margin-block:16px 0}
.note{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--tone) 9%,var(--surface))}
.note.err{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
.note.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.panel{position:relative;margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,3vw,28px)}

.drop{display:grid;place-items:center;gap:10px;text-align:center;width:100%;padding:clamp(36px,8vw,64px) 20px;background:transparent;border:2px dashed color-mix(in srgb,var(--tone) 55%,var(--line));border-radius:14px;cursor:pointer}
.drop strong{font:700 1.3rem var(--display)}
.drop .hint{color:var(--muted);font-size:.9rem}
.pill{display:inline-block;background:var(--tone);color:var(--on-tone);border-radius:10px;padding:11px 22px;font-weight:600}
.panel.over .drop{background:color-mix(in srgb,var(--tone) 10%,transparent);border-color:var(--tone)}

.files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.file,.out{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.fi{color:var(--tone);display:grid;place-items:center;width:36px;height:36px}
.out img{width:36px;height:48px;object-fit:cover;border-radius:4px;border:1px solid var(--line);background:#fff}
.fm{display:grid;min-width:0}
.fn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs{color:var(--muted);font-size:.88rem}
.fa{display:flex;gap:4px}
.ib{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.ib:disabled{opacity:.35;cursor:default}
.ib svg{width:18px;height:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:10px;border:1px solid transparent;font-weight:600;cursor:pointer}
.btn-primary{background:var(--tone);color:var(--on-tone)}
.btn-quiet{background:transparent;border-color:var(--line)}
.btn.sm{min-height:40px;padding:8px 14px}
.btn:disabled{opacity:.5;cursor:default}
.add{margin-top:10px}
.bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

.opts{display:grid;gap:18px;margin-top:22px}
.field{display:grid;gap:8px;justify-items:start}
.lbl{font-weight:600}
.inp{width:100%;max-width:420px;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-align:start}
input[type=range]{accent-color:var(--tone);width:100%;max-width:420px}
input[type=checkbox]{accent-color:var(--tone);width:20px;height:20px}
.chk{display:inline-flex;align-items:center;gap:10px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.seg input:checked+span{background:var(--tone);border-color:var(--tone);color:var(--on-tone);font-weight:600}
.seg input:focus-visible+span{outline:3px solid var(--tone);outline-offset:2px}
.hint{color:var(--muted);font-size:.92rem;margin:0}

.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin-top:20px}
.pg{position:relative;border:2px solid var(--line);border-radius:10px;background:var(--bg);padding:8px;display:grid;gap:6px;justify-items:center;font:inherit;color:inherit;text-align:center}
button.pg{cursor:pointer}
.pg .box{width:100%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.pg canvas{max-width:100%;max-height:100%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.pg .pn{font-size:.85rem;color:var(--muted)}
.pg.sel{border-color:var(--tone)}
.pg.sel canvas{opacity:.3}
.pg.sel::after{content:'\00D7';position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;line-height:1;color:var(--tone);font-weight:700;padding-bottom:22px}
.mini{width:36px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.mini svg{width:16px;height:16px}

.result{display:grid;gap:16px}
.result h3{display:flex;align-items:center;gap:10px;margin:0;font:800 1.6rem var(--display);color:var(--tone)}
.outs{list-style:none;margin:0;padding:0;display:grid;gap:8px}

.busy{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:14px;background:color-mix(in srgb,var(--surface) 90%,transparent);border-radius:inherit;font-weight:600}
.track{width:min(260px,70vw);height:8px;border-radius:99px;background:var(--line);overflow:hidden}
#busyBar{height:100%;width:0;background:var(--tone);transition:width .15s}

footer{border-top:1px solid var(--line);padding-block:24px 40px;color:var(--muted);font-size:.92rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.hdr-actions{display:flex;align-items:center;gap:8px}

/* ---- v2 additions ---- */
a.brand{text-decoration:none}
a.langbtn{text-decoration:none;color:inherit;display:inline-flex;align-items:center}
a.tile{text-decoration:none}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding:0;font-weight:600}
.trust li{display:inline-flex;align-items:center;gap:8px}
.trust svg{color:var(--convert);width:20px;height:20px}
.try{color:var(--muted);margin:14px 0 0;max-width:60ch;font-size:.95rem}
.prose{max-width:70ch;margin-top:44px}
.prose h2{font:800 1.5rem/1.2 var(--display);letter-spacing:-.01em;margin:32px 0 12px}
.prose h3{font:700 1.1rem/1.3 var(--display);margin:22px 0 6px}
.prose p,.prose li{line-height:1.7}
.prose ol{padding-inline-start:1.3em}
.more{margin-top:44px}
.more h2{font:800 1.5rem/1.2 var(--display);margin:0 0 6px}
.tiles.small{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));padding-block:14px 8px}
.tiles.small .tile{min-height:0;padding:14px 16px 16px}
.tiles.small .td{display:none}
.sigpad{width:100%;max-width:520px;aspect-ratio:640/220;border:2px dashed var(--line);border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
.pager{display:flex;align-items:center;gap:12px}
.prev{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:none;cursor:crosshair}
.prev canvas{max-width:100%;height:auto;display:block;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
#sigOverlay{position:absolute;transform:translate(-50%,-50%);pointer-events:none;height:auto;outline:1px dashed var(--tone)}
.pages.org{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pc{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
html[dir="rtl"] .flipx svg{transform:scaleX(-1)}
.pg.sel::after{pointer-events:none}
/* ---- scan ---- */
.scanstart{display:grid;gap:14px;justify-items:center;text-align:center;padding:clamp(28px,6vw,52px) 16px;border:2px dashed color-mix(in srgb,var(--tone) 55%,var(--line));border-radius:14px}
.btn.big{min-height:56px;font-size:1.1rem;padding:14px 28px}
.scanbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.scanlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.scard{border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--bg);display:grid;gap:6px;justify-items:center;align-content:start}
.scard .pv{width:100%;display:grid;place-items:center}
.scard canvas{max-width:100%;height:auto;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.scard .pn{font-size:.85rem;color:var(--muted)}
.cropwrap{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:none;user-select:none;margin-top:8px}
.cropwrap canvas{max-width:100%;height:auto;display:block;background:#222}
.cropsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#cropPoly{fill:color-mix(in srgb,var(--tone) 14%,transparent);stroke:var(--tone);stroke-width:2;vector-effect:non-scaling-stroke}
.handle{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:3px solid var(--tone);background:color-mix(in srgb,var(--tone) 30%,#fff);touch-action:none;cursor:grab;padding:0}
.editing #opts,.editing>.bar,.editing #files{display:none}
.txt{max-width:none;font-family:var(--body);line-height:1.55;resize:vertical}

/* ---- about/privacy pages + footer nav + numbered steps ---- */
footer .wrap{display:flex;flex-direction:column;gap:10px}
.footnav{display:flex;flex-wrap:wrap;gap:4px 18px}
.footnav a{color:var(--ink);text-decoration:none;font-weight:600}
.footnav a:hover,.footnav a:focus-visible{text-decoration:underline}
footer p{margin:0}
#static{max-width:1080px}
#static h1{font:800 2rem/1.15 var(--display);letter-spacing:-.01em;margin:18px 0 6px}
.prose.wide{max-width:72ch}
.prose .lead-p{font-size:1.05rem;color:var(--muted);line-height:1.65;margin-top:4px}
.prose ol.steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;counter-reset:step}
.prose ol.steps li{position:relative;padding-inline-start:40px;line-height:1.6;counter-increment:step}
.prose ol.steps li::before{content:counter(step);position:absolute;inset-inline-start:0;top:0;width:28px;height:28px;border-radius:999px;background:var(--convert);color:var(--on-tone);font:700 .95rem/28px var(--display);text-align:center}

/* ---- guides, contact, legal pages ---- */
.footnav{gap:6px 18px}
.guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:16px}
.guide-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
.guide-card:hover,.guide-card:focus-visible{border-color:var(--organize)}
.guide-card .gt{font:700 1.05rem/1.3 var(--display)}
.guide-card .gd{color:var(--muted);font-size:.95rem;line-height:1.5}
.home-guides{margin-top:48px}
.home-guides h2{font:800 1.5rem/1.2 var(--display);margin:0}
.prose.wide .guide-list{max-width:none}
#static .prose.wide:has(.guide-list){max-width:1080px}
.prose ul{padding-inline-start:1.3em}
.prose li+li{margin-top:6px}
.prose a{color:var(--organize)}
.contact-box{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;font-size:1.05rem}
.contact-box span{color:var(--muted);font-weight:600}
.contact-box a{font-weight:700;word-break:break-all}
.muted-small{color:var(--muted);font-size:.9rem;margin-top:28px}
.cta-row{margin-top:28px}
.cta-row .btn{text-decoration:none;display:inline-flex}
#static{--tone:var(--organize)}
#static h1{max-width:28ch}
.cta-row .btn{background:var(--organize);color:var(--on-tone);border-color:var(--organize)}
.home-guides{margin-bottom:40px}
.support-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--optimize) 8%,var(--surface));border:1px solid var(--line);width:100%}
.support-note svg{width:18px;height:18px;color:var(--optimize);flex:none}
.support-note a{font-weight:700;color:var(--organize)}
.footnav a[data-donate]{color:var(--optimize)}
.aff{max-width:72ch;margin-top:32px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.aff-tag{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.aff-t{font:700 1.1rem/1.3 var(--display);margin:0}
.aff-d{margin:0 0 6px;line-height:1.6}
.aff .btn{text-decoration:none;display:inline-flex}
.aff-disc{margin:6px 0 0;font-size:.82rem;color:var(--muted)}

/* ---- language menu ---- */
.langmenu{position:relative}
.langmenu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary svg{width:18px;height:18px}
.langlist{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;min-width:170px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.langlist a{padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:500}
.langlist a:hover,.langlist a:focus-visible{background:var(--bg)}
.langlist a[aria-current]{font-weight:700;color:var(--organize)}
.langsel{appearance:auto;color:var(--ink);background:var(--surface)}
html[lang^="zh"] body{line-height:1.7}
a.brand{white-space:nowrap}
@media (max-width:380px){.langmenu summary span{display:none}.langmenu summary{padding-inline:10px}}