/* ===== Themes (skins). Default look = no data-skin rules (liquid). ===== */
.topbar{position:relative}
.skinmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:12;min-width:210px;padding:6px;border-radius:20px;background:var(--sheet);
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);box-shadow:var(--shadow),inset 0 1px 0 var(--edge);border:1px solid var(--low)}
.skinmenu[hidden]{display:none}
.skinmenu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:14px;background:none;color:var(--ink);font:600 .9rem var(--font);text-align:left;cursor:pointer;transition:background .2s}
.skinmenu button:hover{background:var(--strong)}
.skinmenu button[aria-checked="true"]::after{content:"\2713";margin-left:auto;color:var(--accent)}
.sw{display:inline-flex}.sw i{width:14px;height:14px;border-radius:50%;margin-right:-5px;box-shadow:0 0 0 2px var(--sheet)}
html:not([data-skin="liquid"]) #theme{display:none}
.field canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
@keyframes blink{50%{opacity:0}}

/* ---------- Gotham (dark knight) ---------- */
html[data-skin="gotham"]:root{--ink:#f2f2f2;--muted:rgba(242,242,242,.7);--glass:rgba(18,19,22,.74);--strong:rgba(255,255,255,.07);--sheet:rgba(14,15,18,.95);
  --edge:rgba(245,197,24,.55);--low:rgba(245,197,24,.16);--line:rgba(255,255,255,.12);--shadow:0 30px 70px -20px #000;--bg1:#05060a;--bg2:#16181d;
  --b1:#f5c518;--b2:#b88a00;--b3:#3a3d44;--b4:#6b6f76;--accent:#f5c518;--rim:rgba(245,197,24,.95);--font:"Oswald","Arial Narrow",system-ui,sans-serif;color-scheme:dark}
html[data-skin="gotham"] .field i{display:none}
html[data-skin="gotham"] .field::before{content:"";position:absolute;top:-12%;right:8%;width:70vmax;height:130vh;background:linear-gradient(to bottom,rgba(245,197,24,.3),transparent 72%);
  clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);transform:rotate(var(--beam,16deg));transform-origin:50% 0;filter:blur(10px);transition:transform .3s ease-out}
html[data-skin="gotham"] .field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 200' preserveAspectRatio='none'%3E%3Cg fill='%23050608'%3E%3Crect x='0' y='110' width='40' height='90'/%3E%3Crect x='40' y='70' width='34' height='130'/%3E%3Crect x='74' y='95' width='22' height='105'/%3E%3Crect x='96' y='40' width='30' height='160'/%3E%3Crect x='104' y='22' width='14' height='18'/%3E%3Crect x='126' y='85' width='36' height='115'/%3E%3Crect x='162' y='60' width='28' height='140'/%3E%3Crect x='190' y='100' width='44' height='100'/%3E%3Crect x='234' y='50' width='26' height='150'/%3E%3Crect x='260' y='80' width='40' height='120'/%3E%3Crect x='300' y='30' width='34' height='170'/%3E%3Crect x='310' y='12' width='10' height='18'/%3E%3Crect x='334' y='90' width='30' height='110'/%3E%3Crect x='364' y='65' width='38' height='135'/%3E%3Crect x='402' y='105' width='26' height='95'/%3E%3Crect x='428' y='45' width='32' height='155'/%3E%3Crect x='460' y='75' width='44' height='125'/%3E%3Crect x='504' y='95' width='30' height='105'/%3E%3Crect x='534' y='20' width='36' height='180'/%3E%3Crect x='544' y='6' width='10' height='16'/%3E%3Crect x='570' y='70' width='34' height='130'/%3E%3Crect x='604' y='100' width='40' height='100'/%3E%3Crect x='644' y='55' width='28' height='145'/%3E%3Crect x='672' y='85' width='28' height='115'/%3E%3C/g%3E%3Cg fill='%23f5c518' opacity='.55'%3E%3Crect x='8' y='122' width='3' height='4'/%3E%3Crect x='8' y='140' width='3' height='4'/%3E%3Crect x='104' y='52' width='3' height='4'/%3E%3Crect x='104' y='70' width='3' height='4'/%3E%3Crect x='170' y='72' width='3' height='4'/%3E%3Crect x='170' y='90' width='3' height='4'/%3E%3Crect x='268' y='92' width='3' height='4'/%3E%3Crect x='268' y='110' width='3' height='4'/%3E%3Crect x='342' y='102' width='3' height='4'/%3E%3Crect x='342' y='120' width='3' height='4'/%3E%3Crect x='436' y='57' width='3' height='4'/%3E%3Crect x='436' y='75' width='3' height='4'/%3E%3Crect x='542' y='32' width='3' height='4'/%3E%3Crect x='542' y='50' width='3' height='4'/%3E%3Crect x='612' y='112' width='3' height='4'/%3E%3Crect x='612' y='130' width='3' height='4'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom/700px 220px;opacity:.95}
html[data-skin="gotham"] .card,html[data-skin="gotham"] .sheet{border-radius:10px}
html[data-skin="gotham"] .photo{border-radius:8px;color:#111}
html[data-skin="gotham"] .photo img{filter:grayscale(1) contrast(1.15)}
html[data-skin="gotham"] .pill,html[data-skin="gotham"] .circ,html[data-skin="gotham"] .q,html[data-skin="gotham"] .mb,html[data-skin="gotham"] .chips li,
html[data-skin="gotham"] .seg,html[data-skin="gotham"] .thumb,html[data-skin="gotham"] .row,html[data-skin="gotham"] .ico,html[data-skin="gotham"] .pj,html[data-skin="gotham"] .skinmenu{border-radius:6px}
html[data-skin="gotham"] h1{text-transform:uppercase;letter-spacing:.05em;font-weight:700}
html[data-skin="gotham"] .q,html[data-skin="gotham"] .mb,html[data-skin="gotham"] .seg button{text-transform:uppercase;letter-spacing:.07em}
html[data-skin="gotham"] .q.main{color:#111}

/* ---------- Matrix ---------- */
html[data-skin="matrix"]:root{--ink:#c4ffd2;--muted:rgba(150,255,175,.78);--glass:rgba(0,16,4,.74);--strong:rgba(0,255,65,.09);--sheet:rgba(0,12,3,.95);
  --edge:rgba(0,255,65,.6);--low:rgba(0,255,65,.2);--line:rgba(0,255,65,.22);--shadow:0 0 44px -10px rgba(0,255,65,.4);--bg1:#000;--bg2:#001a06;
  --b1:#00ff41;--b2:#008f11;--b3:#00ff41;--b4:#008f11;--accent:#00ff41;--rim:rgba(0,255,65,.95);--font:"Share Tech Mono",ui-monospace,Consolas,monospace;color-scheme:dark}
html[data-skin="matrix"] .field i{display:none}
html[data-skin="matrix"] .field::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
html[data-skin="matrix"] .card,html[data-skin="matrix"] .sheet{border-radius:6px}
html[data-skin="matrix"] .photo{border-radius:6px;color:#001a06}
html[data-skin="matrix"] .photo img{filter:grayscale(1) contrast(1.15) sepia(.5) hue-rotate(70deg) saturate(2.6) brightness(.95)}
html[data-skin="matrix"] .pill,html[data-skin="matrix"] .circ,html[data-skin="matrix"] .q,html[data-skin="matrix"] .mb,html[data-skin="matrix"] .chips li,
html[data-skin="matrix"] .seg,html[data-skin="matrix"] .thumb,html[data-skin="matrix"] .row,html[data-skin="matrix"] .ico,html[data-skin="matrix"] .pj,html[data-skin="matrix"] .skinmenu{border-radius:4px}
html[data-skin="matrix"] h1{text-shadow:0 0 14px rgba(0,255,65,.7);letter-spacing:.02em}
html[data-skin="matrix"] .role::after{content:"_";margin-left:2px;animation:blink 1s steps(1) infinite}
html[data-skin="matrix"] .q.main{color:#001a06}

/* ---------- Future AI ---------- */
html[data-skin="future"]:root{--ink:#eaf6ff;--muted:rgba(200,225,255,.72);--glass:rgba(12,18,48,.56);--strong:rgba(120,200,255,.11);--sheet:rgba(8,12,36,.92);
  --edge:rgba(120,240,255,.55);--low:rgba(120,240,255,.15);--line:rgba(140,200,255,.17);--shadow:0 30px 80px -24px rgba(0,229,255,.45);--bg1:#030615;--bg2:#0b1038;
  --b1:#00e5ff;--b2:#7c4dff;--b3:#ff4de3;--b4:#2979ff;--accent:#5ef0ff;--rim:rgba(94,240,255,.95);--font:"Space Grotesk","Segoe UI",system-ui,sans-serif;color-scheme:dark}
html[data-skin="future"] .field i{opacity:.55}
html[data-skin="future"] .field::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(94,240,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(94,240,255,.08) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 75%)}
html[data-skin="future"] h1{background:linear-gradient(90deg,#fff,#5ef0ff 55%,#b794ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html[data-skin="future"] .q.main{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
html[data-skin="future"] .card{box-shadow:var(--shadow),0 0 0 1px rgba(94,240,255,.22),inset 0 1.5px 0 var(--edge)}

/* ---------- Cyberpunk ---------- */
html[data-skin="cyber"]:root{--ink:#fff6ff;--muted:rgba(255,230,255,.74);--glass:rgba(20,6,40,.7);--strong:rgba(255,42,109,.13);--sheet:rgba(14,4,32,.95);
  --edge:rgba(5,217,232,.7);--low:rgba(255,42,109,.38);--line:rgba(5,217,232,.26);--shadow:0 0 54px -12px rgba(255,42,109,.55);--bg1:#0d0221;--bg2:#2a0d45;
  --b1:#ff2a6d;--b2:#05d9e8;--b3:#f9f002;--b4:#7b2ff7;--accent:#05d9e8;--rim:rgba(249,240,2,.92);--font:"Rajdhani","Segoe UI",system-ui,sans-serif;color-scheme:dark}
html[data-skin="cyber"] body{font-size:17px}
html[data-skin="cyber"] .card,html[data-skin="cyber"] .sheet{border-radius:4px}
html[data-skin="cyber"] .photo{border-radius:4px}
html[data-skin="cyber"] .pill,html[data-skin="cyber"] .circ,html[data-skin="cyber"] .seg,html[data-skin="cyber"] .thumb,html[data-skin="cyber"] .row,html[data-skin="cyber"] .ico,html[data-skin="cyber"] .pj,html[data-skin="cyber"] .skinmenu{border-radius:3px}
html[data-skin="cyber"] .q,html[data-skin="cyber"] .mb,html[data-skin="cyber"] .chips li{border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
html[data-skin="cyber"] h1{text-transform:uppercase;letter-spacing:.03em;text-shadow:2px 0 #ff2a6d,-2px 0 #05d9e8}
html[data-skin="cyber"] .q,html[data-skin="cyber"] .mb{text-transform:uppercase;letter-spacing:.06em}
html[data-skin="cyber"] .q.main{color:#fff}

/* ---------- hover + motion effects ---------- */
.bat{position:fixed;left:0;top:0;z-index:15;pointer-events:none;will-change:transform,opacity}
.bat svg{display:block;width:100%;height:auto;animation:flap .2s ease-in-out infinite alternate;transform-origin:50% 55%;filter:drop-shadow(0 0 5px rgba(245,197,24,.55))}
@keyframes flap{to{transform:scaleY(.4) translateY(3px)}}
.ripple{position:fixed;width:24px;height:24px;margin:-12px 0 0 -12px;border:2px solid #5ef0ff;border-radius:50%;pointer-events:none;z-index:15;animation:rip .8s ease-out forwards}
html[data-skin="cyber"] .ripple{border-color:#ff2a6d;box-shadow:0 0 12px #ff2a6d}
@keyframes rip{to{transform:scale(6);opacity:0}}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,2px)}100%{transform:translate(0)}}
html[data-skin="gotham"] .q:hover,html[data-skin="gotham"] .mb:hover{box-shadow:inset 0 -2px 0 #f5c518,0 8px 24px -10px rgba(245,197,24,.55)}
html[data-skin="gotham"] .chips li:hover{background:rgba(245,197,24,.18)}
html[data-skin="matrix"] .q:hover,html[data-skin="matrix"] .mb:hover,html[data-skin="matrix"] .row:hover{box-shadow:0 0 20px rgba(0,255,65,.5),inset 0 0 0 1px rgba(0,255,65,.7)}
html[data-skin="future"] .q:hover,html[data-skin="future"] .mb:hover{box-shadow:inset 0 1.5px 0 var(--edge),0 0 24px rgba(0,229,255,.5)}
html[data-skin="future"] .photo{box-shadow:0 0 0 3px var(--low),0 0 0 4px var(--edge),0 0 34px rgba(0,229,255,.45)}
html[data-skin="cyber"] .card:hover h1{animation:glitch .35s steps(2) 2}
html[data-skin="cyber"] .q:hover,html[data-skin="cyber"] .mb:hover{animation:glitch .3s steps(2) 1;filter:drop-shadow(0 0 8px #ff2a6d)}
html[data-skin="cyber"] .photo:hover img{animation:glitch .4s steps(2) 2}
@media (prefers-reduced-motion:reduce){.bat,.ripple{display:none}}