/* Extracted styles from index.html for CSP hardening */
:root { --bg:#0b0c10; --panel:#111218; --text:#e6e6e9; --muted:#a2a5b3; --accent:#5cc8ff; --accent-2:#7ef3a0; --wheel-text:#fff; }
/* Light theme (activated via [data-theme="light"]) */
html[data-theme="light"] { --bg:#f5f7fb; --panel:#ffffff; --text:#1f242d; --muted:#5b6474; --accent:#2563eb; --accent-2:#059669; --wheel-text:#182031; }
html[data-theme="light"] body{background:radial-gradient(1200px 800px at 10% 0%,#ffffff,#dbe3ef 65%);} 
html[data-theme="light"] header.topbar{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));border-color:rgba(0,0,0,0.06)}
html[data-theme="light"] .app, html[data-theme="light"] .seo-info, html[data-theme="light"] .site-footer{background:linear-gradient(180deg,rgba(0,0,0,0.03),rgba(0,0,0,0.015));border-color:rgba(0,0,0,0.08)}
html[data-theme="light"] button, html[data-theme="light"] .tab, html[data-theme="light"] #itemInput, html[data-theme="light"] .results, html[data-theme="light"] .gallery, html[data-theme="light"] .center-badge, html[data-theme="light"] .result-dialog, html[data-theme="light"] .consent-modal, html[data-theme="light"] #infoModal { background:#ffffff; border-color:rgba(0,0,0,0.12); color:var(--text); }
html[data-theme="light"] .tab:hover, html[data-theme="light"] button:hover{box-shadow:0 8px 24px rgba(0,0,0,0.12)}
html[data-theme="light"] .chip{background:#f3f6fa;border-color:rgba(0,0,0,0.08)}
html[data-theme="light"] .results{background:#ffffff;border-color:rgba(0,0,0,0.08)}
html[data-theme="light"] .gallery{background:#ffffff;border-color:rgba(0,0,0,0.12)}
html[data-theme="light"] .center-badge{background:#ffffff;box-shadow:0 10px 24px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,.7)}
html[data-theme="light"] #centerBtn{background:linear-gradient(180deg,#ffffff,#f1f5f9);color:#182031}
html[data-theme="light"] .pointer{border-top-color:#f59f00}
html[data-theme="light"] body::before{color:rgba(0,0,0,0.05);background:repeating-linear-gradient(45deg,rgba(0,0,0,0.03) 0 40px,rgba(0,0,0,0.015) 40px 80px);} 
html[data-theme="light"] .site-footer nav a:hover{background:#e7eef7}
html[data-theme="light"] .consent-modal a{color:#1d4ed8}
html[data-theme="light"] .consent-modal a:hover{color:#1e40af}
html[data-theme="light"] .brand-gradient{filter:drop-shadow(0 0 2px rgba(0,0,0,.15));}
html[data-theme="light"] .gallery-backdrop{background:rgba(0,0,0,.45)}
/* Light theme specific component tweaks */
html[data-theme="light"] .switch input{background:#d0d7e2;border:1px solid rgba(0,0,0,0.25);}
html[data-theme="light"] .switch input::after{background:#ffffff;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
html[data-theme="light"] .switch input:checked{background:#bfdbfe;}
html[data-theme="light"] .switch input:checked::after{background:#2563eb;}
html[data-theme="light"] .lang-select{background:#ffffff;border:1px solid rgba(0,0,0,0.25);color:var(--text);}
html[data-theme="light"] .ico{background:#f5f8fb;border-color:rgba(0,0,0,0.1);}
html[data-theme="light"] .ico:hover{box-shadow:0 10px 24px rgba(0,0,0,0.15);}
html[data-theme="light"] .ico.selected{background:#e3efff;}
html[data-theme="light"] .ico.at-capacity{background:#eceff3;}
html[data-theme="light"] .count-badge{background:#e8eef5;border:1px solid rgba(0,0,0,0.12);color:var(--muted);}
html[data-theme="light"] .results{scrollbar-color:#c8d2e0 #eef2f7;}
html[data-theme="light"] .results ul::-webkit-scrollbar-track{background:#eef2f7;}
html[data-theme="light"] .results ul::-webkit-scrollbar-thumb{background:#c8d2e0;border:2px solid #eef2f7;}
/* Theme transition */
html,body,.app,header.topbar,.site-footer,.seo-info,.results,.gallery,#infoModal,.result-dialog,.consent-modal,#centerBtn{transition:background .35s ease,color .25s ease, border-color .35s ease;}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;min-height:100vh;background:radial-gradient(1200px 800px at 10% 0%,#141622,#0a0b10 60%);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";display:flex;flex-direction:column;align-items:center;padding:0 0 0}
body.no-scroll{position:fixed;inset:0;width:100%;overflow:hidden;}
.page-content{flex:1 0 auto;width:100%;display:flex;flex-direction:column;align-items:center}
header.topbar{width:100%;max-width:1400px;padding:14px 32px 10px;display:flex;align-items:center;gap:24px;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,0.08);position:sticky;top:0;background:linear-gradient(180deg,rgba(10,11,16,.9),rgba(10,11,16,.6));backdrop-filter:blur(6px);z-index:20}
.brand{font-weight:800;letter-spacing:.3px;font-size:20px}
/* Gradient brand styling (single word) */
.brand-gradient{font-size:24px;font-weight:800;background:linear-gradient(92deg,#4dabf7 0%,#845ef7 28%,#ff6b6b 55%,#ffd43b 72%,#51cf66 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;letter-spacing:.5px;animation:brandShift 12s linear infinite}
@keyframes brandShift{0%{background-position:0 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.brand-gradient{animation:none}}
@media (max-width:600px){.brand-gradient{font-size:20px}}
.ad-wide{width:100%;max-width:1400px;margin:12px auto 12px;padding:0 32px;box-sizing:border-box}
.ad-wide .slot{width:100%;min-height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#18202c,#12161f);border:1px dashed rgba(255,255,255,0.25);border-radius:16px;font-size:13px;color:var(--muted);text-align:center;line-height:1.4;position:relative}
.ad-wide .slot .ad-label{position:absolute;top:6px;left:10px;font-size:10px;background:#222a36;padding:2px 6px;border-radius:6px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.main-row{width:100%;max-width:1600px;display:flex;align-items:flex-start;justify-content:center;gap:34px;padding:0 32px;box-sizing:border-box}
.ad-col{flex:0 0 180px;display:flex;flex-direction:column;gap:24px;min-height:100%;position:relative}
.ad-slot{width:100%;min-height:300px;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#18202c,#12161f);border:1px dashed rgba(255,255,255,0.25);border-radius:14px;font-size:12px;color:var(--muted);text-align:center;padding:8px;line-height:1.3;position:relative}
.ad-slot[data-size="skyscraper"]{min-height:600px}
.ad-slot .ad-label{position:absolute;top:6px;left:8px;font-size:10px;background:#222a36;padding:2px 6px;border-radius:6px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
@media (max-width:900px){ header.topbar{padding:12px 18px 8px} .ad-wide{padding:0 18px} }
@media (max-width:1250px){ .main-row{gap:24px} }
@media (max-width:1180px){ .ad-col.right{display:none} }
@media (max-width:1060px){ .ad-col.left{display:none} .main-row{padding:0 18px} }
.site-footer{width:100%;max-width:1400px;margin:40px auto 0;padding:28px 32px 50px;box-sizing:border-box;display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border-top:1px solid rgba(255,255,255,0.08);border-radius:24px 24px 0 0}
.site-footer .f-top{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start}
.site-footer .brand{font-size:22px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:14px;font-size:14px}
.site-footer nav a{color:var(--muted);text-decoration:none;padding:4px 8px;border-radius:8px;transition:background .2s}
.site-footer nav a:hover{background:#1b2231;color:var(--text)}
.site-footer .legal{font-size:12px;color:var(--muted)}
@media (max-width:900px){ .site-footer{padding:24px 20px 40px} }
.app{width:min(1100px,92vw);padding:0 24px 24px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 60px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.05)}
.tabs{display:flex;gap:8px;margin-left:auto}
.tab{padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:#151827;color:var(--text);cursor:pointer}
.tab:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.h1,h1{font-weight:700;letter-spacing:.2px;margin:12px 0 8px}
.caption{margin:0 0 16px;color:var(--muted)}
form#addForm{display:grid;grid-template-columns:1fr auto auto;gap:10px 12px;align-items:center;margin-bottom:10px}
#itemInput{padding:12px 14px;border-radius:12px;background:#0f1118;border:1px solid rgba(255,255,255,0.08);color:var(--text);outline:none}
#itemInput:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(92,200,255,0.12)}
button{padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:#151827;color:var(--text);cursor:pointer;transition:transform .06s ease,box-shadow .2s ease,background .2s}
button:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
button.ghost{background:transparent}
button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;transition:all 0.2s ease}
.hint{color:var(--muted);font-size:12px;transition:all 0.3s ease}
.hint.error{color:#ff5252;font-weight:500}
.options-row{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:10px}
.switch input{appearance:none;width:44px;height:26px;border-radius:999px;background:#21243a;position:relative;outline:none;border:1px solid rgba(255,255,255,0.12);transition:background .2s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#9aa0b3;transition:transform .2s}
.switch input:checked{background:#1e3852}
.switch input:checked::after{transform:translateX(18px);background:#7fe3a8}
.switch label{color:var(--muted);font-size:13px;user-select:none}
.count-badge{margin-left:auto;padding:4px 8px;border-radius:10px;background:#1b1f31;border:1px solid rgba(255,255,255,0.08);color:var(--muted);font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:#11141f;border:1px solid rgba(255,255,255,0.08);font-size:14px}
.chip .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.chip .thumb{width:16px;height:16px;display:inline-block;vertical-align:middle}
.chip button{padding:6px 10px;font-size:12px}
.stage{position:relative;display:flex;justify-content:center;align-items:center;margin:10px 0 20px;width:100%;}
.wheel-wrap{margin:0 auto;}
.wheel-wrap{position:relative;width:min(560px,86vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center;contain:layout paint;}
/* Ensure svg truly centered inside wheel-wrap */
.wheel-wrap > svg{margin:0 auto;}
.pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #ffd166;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35));z-index:5}
svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#wheelG{transition:transform 4.2s cubic-bezier(.18,.8,.08,1);transform-origin:50% 50%}
#wheelG{will-change:transform}
.slice-border{stroke:rgba(0,0,0,.35);stroke-width:1;fill:none}
.center-badge{position:absolute;inset:0;margin:auto;width:140px;height:140px;border-radius:50%;background:#0f1118;display:grid;place-items:center;text-align:center;padding:0;box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);z-index:3;border:none}
#centerBtn{width:100%;height:100%;border-radius:50%;border:none;background:linear-gradient(180deg,#1b1f31,#131728);font-weight:700;letter-spacing:.5px;font-size:18px;text-transform:uppercase;display:flex;align-items:center;justify-content:center}
#centerBtn:disabled{opacity:.6}
.result-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#151827;border-radius:16px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.6);z-index:100;width:320px;max-width:90vw;text-align:center;display:none;pointer-events:auto}
.result-dialog.active{display:block;animation:dialogFadeIn .3s ease forwards}
.dialog-buttons{display:flex;gap:10px;justify-content:center;margin-top:20px}
.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);z-index:99;display:none}
.dialog-backdrop.active{display:block}
@keyframes dialogFadeIn{from{opacity:0;transform:translate(-50%,-60%)}to{opacity:1;transform:translate(-50%,-50%)}}
.controls{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:6px;flex-wrap:wrap}
#result{text-align:center;min-height:28px;color:var(--text);font-weight:600}
.muted{color:var(--muted)}
.results{margin-top:14px;background:#0f1118;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px;max-height:300px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-color:#2a2f45 #0c0f18;scrollbar-width:thin;position:relative}
.results h3{margin:0 0 8px;font-size:15px;color:var(--muted);position:static;padding:0;background:transparent}
.results .meta{font-size:12px;color:var(--muted);margin:0 0 8px;position:static;padding:0;background:transparent}
.results ul{margin:0;padding-left:0;list-style:none}
.results li{padding-left:0}
.results .row{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.results .row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results-ctrls{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.results ul::-webkit-scrollbar{width:8px}
.results ul::-webkit-scrollbar-track{background:#0c0f18;border-radius:8px}
.results ul::-webkit-scrollbar-thumb{background:#2a2f45;border-radius:8px;border:2px solid #0c0f18}
.gallery-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;z-index:80}
.gallery-backdrop.active{display:block}
.gallery{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,92vw);max-height:min(72vh,720px);overflow:auto;background:#0f1118;border:1px solid rgba(255,255,255,0.1);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.6);padding:14px;display:none;z-index:90}
.gallery{overscroll-behavior:contain;touch-action:auto;-webkit-overflow-scrolling:touch;}
.gallery.active{display:block}
.gallery header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.gallery h3{margin:0;font-size:16px}
.gallery .spacer{flex:1}
.gallery .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.ico{display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px;cursor:pointer;background:#11141f;transition:all 0.2s ease}
.ico:hover{box-shadow:0 10px 24px rgba(0,0,0,.35);transform:translateY(-1px)}
.ico.selected{ outline:2px solid var(--accent); background:#151b2a; }
.ico.error{ outline:2px solid #ff5252; animation: shake 0.5s; }
.ico.at-capacity{opacity:.6;cursor:not-allowed;position:relative}
.ico.at-capacity:hover{box-shadow:none;transform:none}
.ico.at-capacity::after{content:"✕";position:absolute;top:8px;right:8px;color:#ff5252;font-size:14px;font-weight:700}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-6px)}100%{transform:translateX(0)}}
.ico svg{width:48px;height:48px}
.ico span{font-size:12px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file{display:none}
.ghost.small{padding:8px 10px;font-size:12px}
.lang-select{margin-left:auto;padding:6px 8px;border-radius:8px;background:#151827;color:var(--text);border:1px solid rgba(255,255,255,0.1)}
#dialogSelectedItem{font-size:24px;margin:20px 0}
#dialogOkBtn{background:var(--accent);color:#fff}
#dialogRemoveBtn{background:var(--accent-2);color:#000}
#remainCount{margin-left:8px}
#remainCount.remain-zero{color:#ff5252;font-weight:600}
#remainCount.remain-low{color:#ffab40}
#galleryMsg{margin:6px 0 10px 2px}
#infoBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:10050}
#infoModal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(680px,92vw);max-height:70vh;overflow:auto;background:#151c27;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px 26px;box-shadow:0 30px 70px rgba(0,0,0,.6);z-index:10060}
.chip [class^="dot c"], .chip [class*=" dot c"]{display:inline-block}
/* Predefined palette classes (match golden angle sequence approx). */
.dot.c0{background:hsl(0 72% 62%)}
.dot.c1{background:hsl(137 72% 50%)}
.dot.c2{background:hsl(275 72% 62%)}
.dot.c3{background:hsl(52 72% 50%)}
.dot.c4{background:hsl(190 72% 62%)}
.dot.c5{background:hsl(327 72% 50%)}
.dot.c6{background:hsl(105 72% 62%)}
.dot.c7{background:hsl(242 72% 50%)}
.dot.c8{background:hsl(10 72% 62%)}
.dot.c9{background:hsl(147 72% 50%)}
.dot.c10{background:hsl(285 72% 62%)}
.dot.c11{background:hsl(62 72% 50%)}
.dot.c12{background:hsl(200 72% 62%)}
.dot.c13{background:hsl(337 72% 50%)}
.dot.c14{background:hsl(115 72% 62%)}
.dot.c15{background:hsl(252 72% 50%)}
.dot.c16{background:hsl(20 72% 62%)}
.dot.c17{background:hsl(157 72% 50%)}
.dot.c18{background:hsl(295 72% 62%)}
.dot.c19{background:hsl(72 72% 50%)}

.dialog-item-flex{display:inline-flex;align-items:center;gap:10px}
#infoTitle{margin:0 0 14px 0;font-size:20px}
#infoContent{white-space:pre-line;font-size:14px;line-height:1.45}
#infoCloseBtn{background:var(--accent);color:#fff;padding:10px 18px;border:none;border-radius:10px;cursor:pointer}
.text-right{ text-align:right; }
.mt-22{ margin-top:22px; }
.center-badge button{font-weight:700;letter-spacing:.5px;font-size:18px}

/* === Anti-copy (light deterrent, easily bypassed) === */
html, body { -webkit-user-select:none; user-select:none; }
body::before { content:'RANDOM WHEEL'; position:fixed; inset:0; pointer-events:none; font-size:6rem; font-weight:700; display:grid; place-items:center; letter-spacing:.5rem; color:rgba(255,255,255,0.035); mix-blend-mode:overlay; z-index:0; text-align:center; padding:4rem; line-height:1.1; background:repeating-linear-gradient(45deg,rgba(255,255,255,0.03) 0 40px,rgba(255,255,255,0.01) 40px 80px); }
.page-content, header, footer, .app, .wheel-wrap { position:relative; z-index:1; }

/* Consent Modal */
.consent-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:9998;pointer-events:auto}
.consent-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#151c27;border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:26px 28px;width:min(560px,92vw);max-height:75vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.6);z-index:9999;display:flex;flex-direction:column;gap:14px;pointer-events:auto}
.consent-modal h2{margin:0 0 4px;font-size:20px}
.consent-intro{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.consent-list{margin:4px 0 8px;padding-left:18px;font-size:14px;line-height:1.5}
.consent-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:6px}
.consent-note{margin:6px 0 0;font-size:12px;color:#ff7676}
/* Improve link contrast inside consent modal */
.consent-modal a{color:#7ec8ff;text-decoration:underline;text-underline-offset:3px}
.consent-modal a:focus,.consent-modal a:hover{color:#b4e2ff;outline:none}

/* SEO descriptive section */
.seo-info{width:100%;max-width:1100px;margin:50px auto 0;padding:28px 32px;background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);border-radius:20px;line-height:1.55}
.seo-info h2{margin:0 0 14px;font-size:22px;line-height:1.25;letter-spacing:.3px}
.seo-info p{margin:0;font-size:15px;color:var(--muted)}
@media (max-width:700px){.seo-info{padding:22px 22px;margin-top:40px}.seo-info h2{font-size:20px}.seo-info p{font-size:14px}}

/* ===== Mobile Enhancements ===== */
@media (max-width:640px){
	body{font-size:15px;}
	header.topbar{flex-wrap:wrap;gap:10px;padding:10px 14px 8px;}
	.tabs{order:3;width:100%;overflow-x:auto;gap:6px;padding:4px 2px;margin:4px -2px 0;scrollbar-width:none;}
	.tabs::-webkit-scrollbar{display:none}
	.tab{flex:0 0 auto;font-size:13px;padding:8px 14px;}
	.lang-select{margin-left:0;}
	.main-row{flex-direction:column;gap:24px;padding:0 14px;}
	.app{width:100%;padding:0 16px 20px;border-radius:14px;}
	form#addForm{grid-template-columns:1fr auto;}
	.options-row{flex-direction:column;align-items:flex-start;gap:10px;margin-top:6px;}
	.count-badge{margin-left:0;}
	.chips{gap:6px;}
	.chip{font-size:13px;padding:7px 9px;}
	.wheel-wrap{width:min(520px,94vw);margin-left:auto;margin-right:auto;}
	.stage{padding-left:0;padding-right:0;}
	.center-badge{width:120px;height:120px;}
	#centerBtn{font-size:16px;}
	.result-dialog{width:92vw;padding:20px;}
	.gallery{top:auto;left:0;right:0;bottom:0;transform:none;width:100%;max-height:68vh;border-radius:20px 20px 0 0;animation:slideUp .35s ease;}
	@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
	.gallery header{flex-wrap:wrap;}
	.gallery .grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
	.ico{padding:10px 8px;}
	.seo-info{margin-top:30px;padding:22px 18px;}
	body::before{font-size:3.5rem;}
}

@media (max-width:400px){
	.tab{padding:7px 12px;font-size:12px;}
	.switch label{font-size:12px;}
	#itemInput{padding:11px 12px;font-size:14px;}
	button{padding:11px 14px;font-size:14px;}
	.center-badge{width:108px;height:108px;}
	#centerBtn{font-size:15px;}
	.chip{font-size:12px;}
}

/* Improve tap targets: ensure buttons not too small */
@media (hover:none){
	button, .tab, .ico{ -webkit-tap-highlight-color: rgba(255,255,255,0.1); }
}

/* High-density screens: subtle wheel shadow reduction to improve performance */
@media (max-width:640px) and (min-resolution:2dppx){
	.center-badge{box-shadow:0 8px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);}
	.gallery{box-shadow:0 18px 55px rgba(0,0,0,.65);}
}