/* ============================================================
   photoh — dark anonymous image drop
   Inspired by Aygün Nakliye tokens (orange accent), but flipped
   onto a near-black shell.
   ============================================================ */

:root{
  /* DS-inspired */
  --orange-500:#E8590C; --orange-400:#F47A2E; --orange-600:#D44C0A;

  /* dark shell */
  --bg-0:#050505;
  --bg-1:#0B0B0C;
  --bg-2:#121214;
  --bg-3:#1A1A1D;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --txt-0:#F6F6F4;
  --txt-1:#C7C7C2;
  --txt-2:#7A7A75;
  --txt-3:#4B4B47;
  --accent:#E8590C;
  --accent-soft:rgba(232,89,12,.14);
  --danger:#FF5147;
  --good:#3ee07e;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;

  --sans:'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fam: var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-0); color:var(--txt-0);
  font-family:var(--fam); -webkit-font-smoothing:antialiased;
  min-height:100vh; line-height:1.45; overflow-x:hidden;
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(232,89,12,.07), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(60,60,90,.10), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

.shell{position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:28px 32px 80px}

/* ---------- top bar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:6px 0 28px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em}
.brand .dot{width:10px; height:10px; border-radius:3px; background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,89,12,.12), 0 0 22px 4px rgba(232,89,12,.55);}
.brand .name{font-size:15px}
.brand .name span{color:var(--txt-2); font-weight:400; margin-left:6px}

.topnav{display:flex; align-items:center; gap:2px; padding:4px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:999px}
.topnav button{appearance:none; border:0; background:transparent; color:var(--txt-2);
  font:500 12px/1 var(--fam); padding:8px 14px; border-radius:999px; cursor:pointer; letter-spacing:.02em}
.topnav button:hover{color:var(--txt-0)}
.topnav button.on{background:var(--bg-3); color:var(--txt-0); box-shadow:inset 0 0 0 1px var(--line-strong)}

.meta-pill{display:flex; align-items:center; gap:8px; color:var(--txt-2); font:500 11px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase}
.meta-pill .live{width:6px; height:6px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:liveblink 2.2s infinite}
@keyframes liveblink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- screens ---------- */
.screen{display:none}
.screen.active{display:block; animation:fadeUp .35s ease-out}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ===== SCREEN: UPLOAD ===== */
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:36px; align-items:start; margin-top:18px}
@media (max-width: 980px){ .hero{grid-template-columns:1fr; gap:24px} }

.hero-copy .eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid var(--line-strong); border-radius:999px;
  color:var(--txt-1); font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:22px; background:rgba(255,255,255,.02);
}
.hero-copy .eyebrow .d{width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

.hero-copy h1{font-family:var(--fam); font-weight:600; letter-spacing:-.035em;
  font-size:clamp(40px, 5.6vw, 76px); line-height:.98; margin:0 0 18px}
.hero-copy h1 em{font-style:normal; color:var(--accent)}
.hero-copy .sub{color:var(--txt-1); font-size:17px; max-width:46ch; margin:0 0 26px; text-wrap:pretty}

.points{display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 18px; color:var(--txt-1); font-size:13.5px;
  border-top:1px solid var(--line); padding-top:18px; max-width:520px}
.points div{display:flex; align-items:center; gap:10px}
.points b{color:var(--txt-0); font-weight:500}
.points kbd{font:500 11px/1 var(--mono); padding:3px 6px; border-radius:6px;
  background:var(--bg-2); color:var(--txt-0); border:1px solid var(--line-strong)}

/* drop zone */
.drop{position:relative; background:var(--bg-1); border-radius:var(--r-xl); padding:18px; border:1px solid var(--line)}
.drop .zone{
  position:relative; aspect-ratio: 4/3;
  border-radius:calc(var(--r-xl) - 6px);
  background: radial-gradient(80% 60% at 50% 40%, rgba(232,89,12,.08), transparent 70%), var(--bg-2);
  overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  text-align:center; transition: background .25s ease, transform .25s ease;
  cursor:pointer;
}
.drop .zone .dashring{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible}
.drop .zone .dashring rect{fill:none; stroke:var(--line-strong); stroke-width:1.25;
  stroke-dasharray:8 8; stroke-linecap:round; animation: spin 24s linear infinite;
  x:6px; y:6px; width:calc(100% - 12px); height:calc(100% - 12px); rx:12px; ry:12px}
@keyframes spin{to{stroke-dashoffset:-320}}

.drop .zone::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(60% 50% at 50% 50%, rgba(232,89,12,.18), transparent 70%);
  opacity:.55; animation: breathe 4.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.3; transform:scale(.94)}50%{opacity:.7; transform:scale(1.04)}}

.particles{position:absolute; inset:0; z-index:2; pointer-events:none}
.particles i{position:absolute; bottom:-14px; width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:0; filter:blur(.4px);
  animation: rise var(--d, 7s) linear infinite; animation-delay: var(--delay, 0s);
  left: var(--x, 50%)}
.particles i.dim{background:rgba(255,255,255,.6); width:3px; height:3px}
@keyframes rise{
  0%{transform:translateY(0) translateX(0); opacity:0}
  10%{opacity:.9}
  90%{opacity:.7}
  100%{transform:translateY(-110%) translateX(var(--drift,12px)); opacity:0}
}

.drop .label{position:relative; z-index:4; padding:24px}
.drop .label .icon{width:64px; height:64px; margin:0 auto 18px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  transition: border-color .25s ease, box-shadow .25s ease}
.drop .label .title{font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px}
.drop .label .help{color:var(--txt-2); font-size:13.5px; margin:0 0 18px}
.drop .label .help span{color:var(--txt-0)}

.browse{appearance:none; display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff; border:0; font:600 13px/1 var(--fam); letter-spacing:.01em;
  padding:12px 18px; border-radius:var(--r-md); cursor:pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px rgba(232,89,12,.35);
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease}
.browse:hover{background:var(--orange-400); transform:translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px rgba(232,89,12,.45)}
.browse:active{transform:translateY(0)}

.drop.over .zone{background: radial-gradient(80% 60% at 50% 40%, rgba(232,89,12,.22), transparent 70%), var(--bg-2); transform:scale(1.005)}
.drop.over .zone .dashring rect{stroke:var(--accent); animation-duration:6s}
.drop.over .zone::before{animation-duration:1.6s; opacity:.9}
.drop.over .label .icon{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 12px 40px rgba(0,0,0,.6)}

/* options grid beneath drop */
.opts{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:14px}
.opt{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 12px 10px; display:flex; flex-direction:column; gap:8px; min-height:78px; justify-content:space-between}
.opt .opt-l{display:flex; align-items:center; gap:8px; color:var(--txt-2);
  font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.opt .opt-l svg{opacity:.7}
.opt .opt-v{display:flex; align-items:center; justify-content:space-between; gap:8px}
.opt input[type="text"], .opt input[type="password"], .opt input[type="number"]{
  appearance:none; background:transparent; border:0; outline:0;
  color:var(--txt-0); font:500 14px/1 var(--fam); width:100%; padding:2px 0}
.opt input::placeholder{color:var(--txt-3)}

.seg{display:flex; align-items:center; gap:2px; background:var(--bg-3);
  border-radius:8px; padding:3px; border:1px solid var(--line)}
.seg button{appearance:none; background:transparent; border:0; color:var(--txt-2);
  font:600 11.5px/1 var(--mono); letter-spacing:.04em;
  padding:6px 10px; border-radius:6px; cursor:pointer}
.seg button.on{background:var(--bg-1); color:var(--txt-0); box-shadow:inset 0 0 0 1px var(--line-strong)}

.desc-row{margin-top:10px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px 14px}
.desc-row .opt-l{margin-bottom:6px}
.desc-row textarea{appearance:none; background:transparent; border:0; outline:0; resize:none;
  color:var(--txt-0); font:400 14px/1.4 var(--fam); width:100%; min-height:48px}
.desc-row textarea::placeholder{color:var(--txt-3)}

.ribbon{margin-top:30px; padding-top:18px; border-top:1px dashed var(--line-strong);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;
  color:var(--txt-2); font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.ribbon .item{display:flex; align-items:center; gap:8px}
.ribbon .item b{color:var(--txt-0); font-weight:500}
.ribbon .sep{width:4px; height:4px; border-radius:50%; background:var(--txt-3)}

/* ===== SCREEN: UPLOADING ===== */
.uploading{margin:40px auto 0; max-width:760px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px}
.uploading h2{font-size:24px; letter-spacing:-.02em; font-weight:600; margin:0 0 4px}
.uploading p{color:var(--txt-2); margin:0 0 22px; font-size:14px}
.file-row{display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:center;
  padding:12px 0; border-top:1px solid var(--line)}
.file-row:first-of-type{border-top:0}
.thumb{width:48px; height:48px; border-radius:8px; border:1px solid var(--line); overflow:hidden; position:relative}
.thumb.a{background:radial-gradient(120% 80% at 20% 20%, rgba(232,89,12,.7), rgba(20,20,20,1) 70%)}
.thumb.b{background:radial-gradient(100% 100% at 80% 10%, rgba(120,140,200,.6), rgba(20,20,30,1) 70%)}
.thumb.c{background:radial-gradient(100% 100% at 30% 80%, rgba(60,180,140,.55), rgba(15,25,20,1) 70%)}
.thumb.d{background:radial-gradient(100% 100% at 70% 70%, rgba(200,80,200,.55), rgba(20,15,25,1) 70%)}
.file-row .name{font-size:13.5px; font-weight:500}
.file-row .meta{color:var(--txt-2); font:500 11px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; margin-top:4px}
.bar{height:4px; background:var(--bg-3); border-radius:99px; overflow:hidden; margin-top:8px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--orange-400));
  width:0%; transition: width .25s linear; box-shadow:0 0 14px rgba(232,89,12,.45)}
.file-row .pct{font:600 12px/1 var(--mono); color:var(--txt-1); min-width:46px; text-align:right}

/* ===== SCREEN: SUCCESS ===== */
.success{margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:24px}
.success > *{min-width:0}
@media (max-width:980px){ .success{grid-template-columns:1fr} }

.succ-main{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px}
.succ-eyebrow{display:flex; align-items:center; gap:10px; color:var(--accent);
  font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase}
.succ-eyebrow .blip{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); animation:liveblink 1.6s infinite}
.succ-main h2{font-size:36px; letter-spacing:-.025em; font-weight:600; margin:14px 0 8px; line-height:1}
.succ-main p.lead{color:var(--txt-1); margin:0 0 22px; font-size:15px; max-width:48ch}

.link-box{display:flex; align-items:stretch; background:var(--bg-2);
  border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden}
.link-box .url{flex:1; padding:14px 16px; font:500 14px/1.2 var(--mono); color:var(--txt-0);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; min-width:0}
.link-box .url b{color:var(--accent); font-weight:500}
.link-box button{appearance:none; border:0; border-left:1px solid var(--line);
  background:var(--bg-3); color:var(--txt-0); font:600 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:0 18px; cursor:pointer; display:flex; align-items:center; gap:8px; white-space:nowrap}
.link-box button:hover{background:var(--bg-1)}
.link-box button.copy.ok{color:var(--good)}

.succ-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.btn{appearance:none; border:0; cursor:pointer; font:500 13px/1 var(--fam); letter-spacing:.005em;
  padding:11px 16px; border-radius:var(--r-md); display:inline-flex; align-items:center; gap:8px}
.btn.ghost{background:transparent; color:var(--txt-1); box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.ghost:hover{color:var(--txt-0); background:rgba(255,255,255,.03)}
.btn.danger{background:transparent; color:var(--danger); box-shadow:inset 0 0 0 1px rgba(255,81,71,.4)}
.btn.danger:hover{background:rgba(255,81,71,.08)}

.succ-side{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:22px; display:flex; flex-direction:column; gap:18px}
.qr{display:flex; align-items:center; justify-content:center;
  padding:14px; background:#fff; border-radius:var(--r-md); aspect-ratio:1/1; max-width:220px; margin:0 auto; width:100%}
.qr svg{width:100%; height:100%; display:block}
.succ-side .lbl{color:var(--txt-2); font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; text-align:center}

.rules{display:flex; flex-direction:column; gap:0;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.rule{display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid var(--line); font-size:13px}
.rule:first-child{border-top:0}
.rule svg{flex:0 0 auto; color:var(--accent)}
.rule .v{margin-left:auto; color:var(--txt-1); font:500 12px/1 var(--mono); letter-spacing:.02em}
.rule .v.on{color:var(--good)}

.succ-thumbs{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap}
.succ-thumbs .t{width:62px; height:62px; border-radius:10px; border:1px solid var(--line); position:relative; overflow:hidden}
.succ-thumbs .t.a{background:radial-gradient(120% 80% at 20% 20%, rgba(232,89,12,.65), rgba(20,20,20,1) 70%)}
.succ-thumbs .t.b{background:radial-gradient(100% 100% at 80% 10%, rgba(120,140,200,.55), rgba(20,20,30,1) 70%)}
.succ-thumbs .t.c{background:radial-gradient(100% 100% at 30% 80%, rgba(60,180,140,.5), rgba(15,25,20,1) 70%)}
.succ-thumbs .t.d{background:radial-gradient(100% 100% at 70% 70%, rgba(200,80,200,.5), rgba(20,15,25,1) 70%)}

/* ===== SCREEN: PASSWORD GATE ===== */
.gate{margin:40px auto 0; max-width:460px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:36px 32px; text-align:center}
.gate .lock{width:62px; height:62px; margin:0 auto 18px; border-radius:18px;
  background:var(--bg-2); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 6px rgba(232,89,12,.06), 0 14px 40px rgba(0,0,0,.6); color:var(--accent)}
.gate h2{font-size:24px; letter-spacing:-.02em; font-weight:600; margin:0 0 6px}
.gate p{color:var(--txt-2); margin:0 0 22px; font-size:13.5px}
.codebox{display:flex; gap:8px; justify-content:center; margin-bottom:16px}
.codebox input{width:42px; height:52px; text-align:center; background:var(--bg-2); border:1px solid var(--line-strong);
  border-radius:10px; color:var(--txt-0); font:600 18px/1 var(--mono); outline:0}
.codebox input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.unlock{width:100%; justify-content:center}
.gate .hint{color:var(--txt-3); font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; margin-top:16px}
.gate.shake{animation: shake .42s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
  40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}
}

/* ===== SCREEN: VIEW ===== */
.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin:8px 0 18px; padding-bottom:18px; border-bottom:1px dashed var(--line-strong); flex-wrap:wrap}
.view-head h2{margin:0; font-size:30px; letter-spacing:-.025em; font-weight:600}
.view-head .ttl-meta{color:var(--txt-2); font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; margin-top:6px}
.view-head .desc{color:var(--txt-1); margin-top:8px; max-width:60ch; font-size:14.5px; text-wrap:pretty}

.view{display:grid; grid-template-columns: 1fr 320px; gap:24px}
@media (max-width: 980px){ .view{grid-template-columns:1fr} }

.view-grid{display:grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap:10px}
.view-grid .cell{border-radius:var(--r-md); border:1px solid var(--line); overflow:hidden; position:relative}
.view-grid .cell.big{grid-row: span 2; grid-column: span 1}
.view-grid .cell.tall{grid-row: span 2}
.view-grid .a{background:radial-gradient(120% 80% at 20% 20%, rgba(232,89,12,.6), rgba(20,20,20,1) 70%)}
.view-grid .b{background:radial-gradient(100% 100% at 80% 10%, rgba(120,140,200,.55), rgba(20,20,30,1) 70%)}
.view-grid .c{background:radial-gradient(100% 100% at 30% 80%, rgba(60,180,140,.5), rgba(15,25,20,1) 70%)}
.view-grid .d{background:radial-gradient(100% 100% at 70% 70%, rgba(200,80,200,.5), rgba(20,15,25,1) 70%)}
.view-grid .e{background:radial-gradient(100% 100% at 20% 70%, rgba(255,180,90,.5), rgba(25,15,5,1) 70%)}

.view-side{display:flex; flex-direction:column; gap:14px}
.panel{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px}
.panel h3{margin:0 0 12px; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-2); font-family:var(--mono)}

.timer{display:flex; align-items:baseline; gap:8px; margin-bottom:10px}
.timer .num{font:600 38px/1 var(--mono); letter-spacing:-.02em; color:var(--accent)}
.timer .unit{color:var(--txt-2); font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.timer-bar{height:4px; background:var(--bg-3); border-radius:99px; overflow:hidden}
.timer-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--orange-400)); width:62%}
.timer-foot{display:flex; justify-content:space-between; margin-top:8px; color:var(--txt-2); font:500 11px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase}

.kv{display:flex; flex-direction:column; gap:8px; font-size:13px}
.kv .row{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--line)}
.kv .row:first-child{border-top:0; padding-top:0}
.kv .row .k{color:var(--txt-2); font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.kv .row .v{color:var(--txt-0); font:500 12px/1 var(--mono)}

/* ---------- footer ---------- */
.foot{margin-top:60px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  color:var(--txt-3); font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.foot a{color:var(--txt-2); text-decoration:none}
.foot a:hover{color:var(--txt-0)}

/* mono variant override (Tweaks) */
body.mono { --fam: var(--mono); }
body.mono h1, body.mono h2, body.mono h3 { letter-spacing:-.01em }

/* density */
body.compact .shell{padding:18px 24px 60px}
body.compact .hero{gap:24px}
body.compact .succ-main, body.compact .succ-side{padding:20px}
body.compact .drop{padding:12px}
body.compact .opts{gap:8px}

/* radius variant */
body.sharp{--r-sm:2px; --r-md:4px; --r-lg:6px; --r-xl:8px}
body.round{--r-sm:12px; --r-md:18px; --r-lg:22px; --r-xl:30px}

/* accent variant — overridden via inline style on :root if needed (handled by Tweaks) */