*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif}
body{perspective:1600px;perspective-origin:50% 50%}
#canvas{display:block;cursor:crosshair;touch-action:none;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;transform-origin:center center}
body.tilt3d-active #canvas{box-shadow:0 40px 120px rgba(0,0,0,0.65),0 0 0 1px rgba(255,255,255,0.05)}

/* ════════════════════════════════════════
   LIQUID GLASS DESIGN SYSTEM
   ════════════════════════════════════════ */
:root{
  --canvas-bg:#0a0a12;
  --grid-line:rgba(255,255,255,.04);
  --glass-bg:rgba(255,255,255,.07);
  --glass-bg-hover:rgba(255,255,255,.12);
  --glass-bg-active:rgba(255,255,255,.18);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.22);
  --glass-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  --glass-shadow-lg:0 20px 60px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.4);
  --glass-blur:blur(24px) saturate(180%);
  --glass-blur-sm:blur(12px) saturate(160%);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.15);
  --text:rgba(255,255,255,.92);
  --text2:rgba(255,255,255,.6);
  --text3:rgba(255,255,255,.3);
  --text-placeholder:rgba(255,255,255,.22);
  --input-bg:rgba(255,255,255,.06);
  --input-border:rgba(255,255,255,.12);
  --input-focus:rgba(255,255,255,.28);
  --accent:#ff4610;
  --accent-glow:rgba(110,180,255,.3);
  --success:#4ade80;
  --danger:#ff4610;
  --overlay:rgba(0,0,0,.55);
  --modal-bg:rgba(15,15,25,.78);
}
html.light{
  --canvas-bg:#eff6fd;
  --grid-line:rgba(0,0,60,.035);
  --glass-bg:rgba(255,255,255,.52);
  --glass-bg-hover:rgba(255,255,255,.72);
  --glass-bg-active:rgba(255,255,255,.88);
  --glass-border:rgba(255,255,255,.75);
  --glass-border-strong:rgba(255,255,255,.92);
  --glass-shadow:0 8px 32px rgba(0,20,80,.1),0 2px 8px rgba(0,20,80,.07);
  --glass-shadow-lg:0 20px 60px rgba(0,20,80,.15),0 4px 16px rgba(0,20,80,.1);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,80,.05);
  --text:rgba(0,10,40,.88);
  --text2:rgba(0,10,40,.55);
  --text3:rgba(0,10,40,.32);
  --text-placeholder:rgba(0,10,40,.22);
  --input-bg:rgba(255,255,255,.55);
  --input-border:rgba(0,10,40,.1);
  --input-focus:rgba(0,80,200,.25);
  --accent:#ff4610;
  --accent-glow:rgba(0,94,196,.18);
  --overlay:rgba(60,80,140,.3);
  --modal-bg:rgba(200,220,240,.72);
}
body{background:var(--canvas-bg)}

/* ── HUD center ── */
#hud{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow),var(--glass-inner);
  color:var(--text);padding:.7rem 2rem;border-radius:12px;
  font-size:.84rem;font-weight:500;letter-spacing:.03em;
  pointer-events:none;white-space:nowrap;z-index:10;transition:opacity 1s ease}

/* ── Counter ── */
#counter{position:fixed;top:1rem;left:1rem;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),var(--glass-inner);
  color:var(--text2);padding:.42rem .95rem;border-radius:12px;font-size:.75rem;z-index:10;cursor:default}
#counter strong{color:var(--text);font-weight:700}

/* ── Coords ── */
#coords{position:fixed;bottom:4.5rem;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.28);backdrop-filter:blur(8px);color:var(--text3);
  padding:.25rem .65rem;border-radius:6px;font-size:.68rem;font-family:monospace;
  pointer-events:none;z-index:10;letter-spacing:.05em}

/* ── Tooltip ── */
#tip{position:fixed;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  color:var(--text);border-radius:12px;padding:.7rem 1rem;font-size:.78rem;
  pointer-events:none;display:none;max-width:220px;line-height:1.55;z-index:50;
  transition:opacity .2s}
#tip.touch-active{pointer-events:auto;cursor:pointer}
#tip.touch-active::after{content:attr(data-tap-hint);display:block;font-size:.68rem;color:var(--accent);margin-top:4px;font-weight:600}
#tip strong{display:block;font-size:.85rem;color:var(--text);margin-bottom:3px;font-weight:600}
#tip span{display:block;color:var(--text2);word-break:break-all;font-size:.75rem}
#tip #tip-coords{font-size:.68rem;color:var(--text3);margin-top:3px;opacity:.7}



/* ── Mini-Popup (leere Felder) ── */
#mini-popup{position:fixed;z-index:9000;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  border-radius:12px;padding:.7rem 1rem;min-width:170px;max-width:220px;
  display:none;pointer-events:auto;animation:popIn .15s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
#mini-popup .mp-coords{font-size:.75rem;color:var(--text3);margin-bottom:2px;font-family:monospace}
#mini-popup .mp-title{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.6rem}
#mini-popup .mp-btn{
  position:relative;overflow:hidden;
  width:100%;
  background:linear-gradient(135deg,#ff4610 0%,#fb660c 100%);
  border:1px solid var(--glass-border-strong);
  color:#fff;
  border-radius:10px;padding:.45rem .9rem;
  font-size:.78rem;font-weight:600;cursor:pointer;
  letter-spacing:.01em;
  box-shadow:0 2px 12px rgba(255,80,60,.2);
  animation:ctaGlow 2.4s ease-in-out infinite;
  transition:opacity .15s,transform .12s;}
#mini-popup .mp-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.15) 50%,transparent 65%);
  background-size:200% 100%;
  animation:ctaShimmer 2.2s ease-in-out infinite;
  border-radius:inherit;pointer-events:none;}
#mini-popup .mp-btn:hover{opacity:.88;transform:translateY(-1px)}
html.light #mini-popup .mp-btn{background:linear-gradient(135deg,#ff4610,#fb660c);color:#fff;border-color:rgba(255,100,60,.5)}

/* ── Minimap ── */
#minimap{position:fixed;top:1rem;right:1rem;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),var(--glass-inner);
  border-radius:12px;z-index:20;cursor:pointer;overflow:hidden;
  transition:transform .15s,box-shadow .15s}
#minimap:hover{transform:scale(1.03);box-shadow:var(--glass-shadow-lg)}
#minimap canvas{display:block;border-radius:12px}
#minimap-label{font-size:.58rem;color:var(--text3);text-align:center;padding:3px 0 5px;letter-spacing:.05em}

/* ── Spotlight ── */
#spotlight-banner{position:fixed;bottom:7rem;left:50%;transform:translateX(-50%);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),var(--glass-inner);
  border-radius:12px;padding:.5rem 1.3rem;font-size:.78rem;color:var(--text2);
  z-index:30;display:none;cursor:pointer;max-width:300px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s}
#spotlight-banner:hover{background:var(--glass-bg-hover);color:var(--text)}
#spotlight-banner strong{color:var(--text);font-weight:600}

/* ── Latest panel ── */
#latest-panel{position:fixed;left:1.25rem;top:50%;transform:translateY(-50%);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  border-radius:12px;z-index:20;display:none;flex-direction:column;
  gap:5px;padding:8px;max-height:70vh;overflow-y:auto}
#latest-panel.open{display:flex}
.latest-thumb{width:40px;height:40px;border-radius:12px;cursor:pointer;
  border:1px solid var(--glass-border);overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;text-align:center;line-height:1.1;transition:transform .15s}
.latest-thumb:hover{transform:scale(1.08)}
.latest-thumb img{width:100%;height:100%;object-fit:cover}

/* ── Search ── */
#search-wrap{position:fixed;top:4.5rem;left:50%;transform:translateX(-50%);
  z-index:300;width:360px;max-width:92vw;display:none}
#search-wrap.open{display:block}
#search-input{width:100%;padding:.78rem 1.1rem;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  border-radius:12px;color:var(--text);font-size:.95rem;outline:none;
  transition:border-color .2s,box-shadow .2s}
#search-input::placeholder{color:var(--text-placeholder)}
#search-input:focus{border-color:var(--input-focus);box-shadow:var(--glass-shadow-lg),var(--glass-inner),0 0 0 3px var(--accent-glow)}
#search-results{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  border-radius:12px;margin-top:6px;overflow:hidden;display:none}
.search-item{padding:.6rem 1rem;cursor:pointer;font-size:.84rem;color:var(--text2);
  border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:.65rem;transition:background .12s}
.search-item:last-child{border-bottom:none}
.search-item:hover{background:var(--glass-bg-hover);color:var(--text)}
.search-dot{width:10px;height:10px;border-radius:12px;flex-shrink:0}
.search-name{font-weight:600;color:var(--text)}
.search-url{font-size:.72rem;color:var(--text3)}

/* ── Heatmap indicator ── */
#heatmap-indicator{position:fixed;top:9rem;right:1.25rem;width:144px;
  background:rgba(255,80,0,.12);backdrop-filter:blur(8px);
  border:1px solid rgba(255,80,0,.3);color:#ff4610;border-radius:12px;
  padding:.28rem .75rem;font-size:.7rem;display:none;z-index:999;pointer-events:none}

/* ── FABs ── */
.fab{position:fixed;width:36px;height:36px;border-radius:50%;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow),var(--glass-inner);
  color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:150;font-size:1.15rem;user-select:none;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .15s,box-shadow .15s}
.fab:hover{transform:scale(1.1);background:var(--glass-bg-hover);box-shadow:var(--glass-shadow-lg),var(--glass-inner)}
.fab:active{transform:scale(.95)}
#fab-menu{bottom:1rem;left:1rem}
#fab-info{bottom:1rem;left:4rem;font-size:1.25rem;display:none}
#fab-settings{bottom:1rem;left:1rem;font-size:1.2rem;display:none}
#fab-install{bottom:1rem;right:4rem;font-size:1.2rem;display:none}
#fab-game{bottom:1rem;left:7rem;font-size:1.2rem;display:none}
#fab-lang{bottom:1rem;right:4rem;display:none}
#fab-theme{bottom:1rem;right:1rem;display:none}
@keyframes fabPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.fab-pop{animation:fabPop .22s cubic-bezier(.34,1.56,.64,1) both}

/* ── Heart credit ── */
#heart-credit{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%);
  font-size:.72rem;color:var(--text3);pointer-events:auto;white-space:nowrap;z-index:10;letter-spacing:.03em}
#heart-credit a{color:var(--text3);text-decoration:none;transition:color .15s}
#heart-credit a:hover{color:var(--text2)}

/* ── Settings menu ── */
#settings-menu{position:fixed;bottom:6.25rem;left:1.5rem;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  border-radius:20px;padding:.5rem;z-index:160;display:none;flex-direction:column;gap:2px;min-width:190px}
#settings-menu.open{display:flex}
.smenu-item{padding:.62rem 1rem;border-radius:12px;cursor:pointer;
  font-size:.85rem;color:var(--text2);display:flex;align-items:center;gap:.75rem;
  transition:background .12s,color .12s;white-space:nowrap}
.smenu-item:hover{background:var(--glass-bg-hover);color:var(--text)}
.smenu-item.active{background:var(--glass-bg-active);color:var(--text);font-weight:600}
.smenu-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0}
.smenu-sep{height:1px;background:var(--glass-border);margin:.3rem .5rem}

/* ── iOS-style liquid glass toggle ── */
.smenu-toggle{display:flex;align-items:center;justify-content:space-between;
  padding:.62rem 1rem;border-radius:12px;cursor:pointer;
  font-size:.85rem;color:var(--text2);gap:.75rem;white-space:nowrap;
  transition:background .12s,color .12s;user-select:none}
.smenu-toggle:hover{background:var(--glass-bg-hover);color:var(--text)}
.smenu-toggle-left{display:flex;align-items:center;gap:.75rem}
.toggle-track{position:relative;width:42px;height:26px;flex-shrink:0;
  border-radius:13px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.07);
  transition:background .3s,border-color .3s,box-shadow .3s}
.toggle-track.on{
  background:linear-gradient(135deg,#fb660c,#ff4610);
  border-color:rgba(110,180,255,.4);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2),0 0 8px rgba(255,70,16,.25)}
html.light .toggle-track{background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.1)}
html.light .toggle-track.on{background:linear-gradient(135deg,#fb660c,#ff4610);border-color:#fb660c;box-shadow:0 0 8px rgba(255,70,16,.3)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.2);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),width .18s,background .2s}
.toggle-track.on .toggle-thumb{transform:translateX(16px)}

/* ── FAB panels ── */
.fab-panel{position:fixed;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  border-radius:20px;padding:.5rem;z-index:160;display:none;flex-direction:column;gap:2px;min-width:148px}
.fab-panel.open{display:flex}
#panel-lang{bottom:6.25rem;right:5.25rem}
#panel-theme{bottom:6.25rem;right:1.5rem}
.panel-item{padding:.58rem .9rem;border-radius:12px;cursor:pointer;
  font-size:.84rem;color:var(--text2);display:flex;align-items:center;gap:.6rem;
  transition:background .12s,color .12s;white-space:nowrap}
.panel-item:hover{background:var(--glass-bg-hover);color:var(--text)}
.panel-item.active{background:var(--glass-bg-active);color:var(--text);font-weight:600}
.panel-item .pi{font-size:1rem;width:18px;text-align:center}

/* ── Modal backdrop ── */
.modal-bg{display:none;position:fixed;inset:0;background:var(--overlay);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;z-index:200;padding:1rem}
.modal-bg.open{display:flex}

/* ── Modal box ── */
.modal-box{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow-lg),var(--glass-inner);
  border-radius:16px;width:100%;max-width:420px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}
.modal-box-inner{padding:1.9rem;overflow-y:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent}
.modal-box-inner::-webkit-scrollbar{width:4px}
.modal-box-inner::-webkit-scrollbar-track{background:transparent}
.modal-box-inner::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px}
.modal-box h2{font-size:1.12rem;font-weight:700;color:var(--text);margin-bottom:1.4rem;letter-spacing:-.01em}
.modal-box label{display:block;font-size:.78rem;color:var(--text2);margin:.9rem 0 .3rem;font-weight:500;letter-spacing:.01em}
.modal-box input[type=text],.modal-box input[type=url],.modal-box input[type=email]{
  width:100%;padding:.68rem .95rem;background:var(--input-bg);backdrop-filter:blur(8px);
  border:1px solid var(--input-border);border-radius:12px;font-size:.92rem;color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s}
.modal-box input::placeholder,.modal-box textarea::placeholder{color:var(--text-placeholder)}
.modal-box input:focus,.modal-box textarea:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--accent-glow)}
.modal-box select{width:100%;padding:.68rem .95rem;background:var(--input-bg);
  border:1px solid var(--input-border);border-radius:12px;font-size:.88rem;color:var(--text);outline:none;appearance:none;cursor:pointer}
.err-msg{font-size:.75rem;color:var(--danger);margin-top:.3rem;display:none}
.btn-row{display:flex;gap:.6rem;margin-top:1.4rem}
.btn{flex:1;padding:.68rem;border-radius:12px;border:none;font-size:.9rem;font-weight:600;cursor:pointer;
  letter-spacing:.01em;transition:transform .15s cubic-bezier(.34,1.56,.64,1),opacity .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-cancel{background:rgba(20,20,30,.75);backdrop-filter:var(--glass-blur-sm);
  border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.btn-cancel:hover{background:rgba(30,30,42,.85);color:rgba(255,255,255,.75)}
html.light .btn-cancel{background:rgba(30,30,40,.82);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.15)}
html.light .btn-cancel:hover{background:rgba(15,15,25,.9);color:#fff}

/* ── Primary CTA: Orange→Pink gradient + shimmer + glow pulse ── */
@keyframes ctaGlow{
  0%,100%{box-shadow:0 2px 10px rgba(255,80,60,.18)}
  50%{box-shadow:0 2px 18px rgba(255,61,127,.28)}
}
@keyframes ctaShimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}
.btn-submit{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#ff4610 0%,#fb660c 100%);
  border:1px solid var(--glass-border-strong);
  color:#fff;
  box-shadow:0 2px 12px rgba(255,80,60,.2);
  animation:ctaGlow 2.4s ease-in-out infinite;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),opacity .15s;
}
.btn-submit::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.15) 50%,transparent 65%);
  background-size:200% 100%;
  animation:ctaShimmer 2.2s ease-in-out infinite;
  border-radius:inherit;pointer-events:none;
}
.btn-submit:hover{opacity:.88;}
.btn-submit:disabled{
  background:var(--glass-bg);color:var(--text3);cursor:not-allowed;
  transform:none;box-shadow:none;border-color:var(--glass-border);opacity:.5;
  animation:none;filter:none;
}
.btn-submit:disabled::after{display:none}

/* Submit specific */
#preview-wrap{margin-top:.75rem;display:none}
#preview-wrap img{width:80px;height:80px;object-fit:cover;border-radius:12px;border:1px solid var(--glass-border)}
.drop-area{border:1.5px dashed var(--glass-border);border-radius:12px;padding:1.4rem;
  text-align:center;color:var(--text3);font-size:.8rem;cursor:pointer;
  background:var(--input-bg);transition:border-color .2s,color .2s,background .2s;margin-top:.3rem}
.drop-area:hover,.drop-area.dragover{border-color:var(--accent);color:var(--text2);background:var(--glass-bg-hover)}
.success-msg{text-align:center;padding:1.5rem 0;display:none}
.success-icon{font-size:2.5rem;margin-bottom:.75rem;color:var(--success)}
.success-msg p{color:var(--text2);font-size:.88rem;line-height:1.6}
.success-msg button{margin-top:1.25rem;padding:.5rem 1.5rem;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);color:var(--text2);border-radius:12px;cursor:pointer;font-size:.85rem}

/* Info modal */
#info-modal-body{font-size:.88rem;color:var(--text2);line-height:1.8}
#info-modal-body a{color:var(--accent)}
#info-modal-body p{margin-top:.75rem}
#info-modal-body p:first-child{margin-top:0}

/* Account-Block */
.account-block{margin-top:.9rem;padding:.75rem .95rem;
  background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:12px;transition:border-color .2s}
.account-block.active{border-color:var(--accent)}
.account-hint{font-size:.75rem;color:var(--text2);margin:.35rem 0 .6rem 1.5rem;line-height:1.5;display:none}
.account-email-wrap{display:none;margin-top:.5rem}

/* Captcha */
.captcha-row{display:flex;align-items:center;gap:.6rem;margin-top:.25rem}
.captcha-question{font-size:1rem;font-weight:700;color:var(--text);
  background:var(--input-bg);border:1px solid var(--input-border);
  padding:.42rem .95rem;border-radius:12px;white-space:nowrap}
.captcha-row input{width:80px;padding:.58rem .7rem;background:var(--input-bg);
  border:1px solid var(--input-border);border-radius:12px;font-size:1rem;
  color:var(--text);outline:none;text-align:center;transition:border-color .2s,box-shadow .2s}
.captcha-row input:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--accent-glow)}
.captcha-refresh{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.9rem;padding:.3rem;border-radius:6px;transition:color .15s}
.captcha-refresh:hover{color:var(--text2)}

/* ════════════════════════════════════════
   RTL SUPPORT (Arabic)
   ════════════════════════════════════════ */
body.rtl #fab-info    {left:auto !important;right:1.5rem !important}
body.rtl #fab-settings{left:auto !important;right:5.25rem !important}
body.rtl #fab-game    {left:auto !important;right:9rem !important}
body.rtl #fab-lang    {right:auto !important;left:5.25rem !important}
body.rtl #fab-theme   {right:auto !important;left:1.5rem !important}
body.rtl #counter          {left:auto !important;right:1.25rem !important}
body.rtl #minimap          {right:auto !important;left:1.25rem !important}
body.rtl #heatmap-indicator{right:auto !important;left:1.25rem !important}
body.rtl #latest-panel     {left:auto !important;right:1.25rem !important}
body.rtl #settings-menu    {left:auto !important;right:1.5rem !important}
body.rtl #panel-lang       {right:auto !important;left:5.25rem !important}
body.rtl #panel-theme      {right:auto !important;left:1.5rem !important}
body.rtl #hud,body.rtl #coords,body.rtl #spotlight-banner,body.rtl #heart-credit{direction:rtl}
body.rtl #tip,body.rtl #search-input,body.rtl #search-results{direction:rtl;text-align:right}
body.rtl .search-item,body.rtl .panel-item,body.rtl .smenu-item{flex-direction:row-reverse;text-align:right}
body.rtl .modal-box,body.rtl .modal-box h2,body.rtl .modal-box label,body.rtl .err-msg,body.rtl .drop-area,body.rtl .success-msg,body.rtl #info-modal-body{direction:rtl;text-align:right}
body.rtl .modal-box input,body.rtl .modal-box textarea,body.rtl .modal-box select{direction:rtl;text-align:right}
body.rtl .btn-row,body.rtl .captcha-row{flex-direction:row-reverse}

/* 3D Wrapper */
#canvas-3d-wrapper {
  position: fixed;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform-origin: center center;
  transition: none; /* lerp handled in JS */
}
#canvas-3d-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Intensiverer Schatten wenn 3D aktiv */
body.tilt3d-active #canvas-3d-wrapper {
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04);
  border-radius: 4px;
}

#game-modal-bg .btn-cancel { width:fit-content; flex:none; }

.dpad-btn {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  user-select: none;
}
.dpad-btn:active { background: rgba(255,255,255,0.18); }

#live-indicator {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,15,30,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .75rem;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 90;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: livepulse 1.5s ease-in-out infinite;
}
.live-dot.offline {
  background: #888;
  box-shadow: none;
  animation: none;
}
@keyframes livepulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ════════════════════════════════════════
   STANDALONE PAGES
   ════════════════════════════════════════ */

/* Override canvas fullscreen for standalone pages */
body.page-auth,body.page-profile,body.page-pub,
body.page-admin,body.page-admin-login,body.page-offline{overflow:auto;height:auto;width:auto}
html:has(body.page-auth),html:has(body.page-profile),html:has(body.page-pub),
html:has(body.page-admin),html:has(body.page-admin-login),html:has(body.page-offline){overflow:auto;height:auto}

/* ── Shared: auth + profile ── */
body.page-auth,body.page-profile{font-family:system-ui,sans-serif;background:#0d0d0d;color:#e8e8e8}
.page-auth input:focus,.page-auth textarea:focus,.page-auth select:focus,
.page-profile input:focus,.page-profile textarea:focus,.page-profile select:focus{border-color:#ff4610;outline:none}
.page-auth .btn,.page-profile .btn{background:#ff4610;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s}
.page-auth .btn:hover,.page-profile .btn:hover{background:#fb660c}
.page-auth .logo span,.page-profile .logo span,.page-pub .logo span{color:#ff4610}

/* ── Auth card pages (login, forgot-password, set-password) ── */
body.page-auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.page-auth .card{background:#1a1a1a;border:1px solid #2e2e2e;border-radius:12px;padding:2rem;width:100%;max-width:420px}
.page-auth .logo{text-align:center;font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:1.5rem}
.page-auth h1{font-size:1.3rem;margin-bottom:1.5rem;color:#fff;text-align:center}
.page-auth .hint{font-size:.85rem;color:#666;text-align:center;margin-bottom:1.5rem;line-height:1.5}
.page-auth label{display:block;font-size:.85rem;color:#aaa;margin-bottom:.3rem}
.page-auth input[type=email],.page-auth input[type=password]{width:100%;background:#111;border:1px solid #333;border-radius:8px;padding:.65rem .9rem;color:#fff;font-size:1rem;margin-bottom:1rem;outline:none;transition:border-color .2s}
.page-auth .btn{width:100%;padding:.75rem;font-size:1rem}
.page-auth .error{background:#3a1a1a;border:1px solid #7a2a2a;border-radius:8px;color:#f88;padding:.75rem 1rem;margin-bottom:1rem;font-size:.9rem}
.page-auth .links{text-align:center;margin-top:1.25rem;font-size:.85rem;color:#666}
.page-auth .links a{color:#ff4610;text-decoration:none}
.page-auth .links a:hover{text-decoration:underline}
.page-auth .sep{margin:0 .5rem}
.page-auth .success{text-align:center;padding:.5rem 0}
.page-auth .success .icon{font-size:2.5rem;margin-bottom:.75rem}
.page-auth .success p{color:#aaa;font-size:.9rem;line-height:1.6}
.page-auth .success a{color:#ff4610;text-decoration:none;font-weight:600}

/* ── Profile page ── */
body.page-profile{padding:1rem}
.page-profile .wrap{max-width:760px;margin:2rem auto}
.page-profile header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.page-profile .logo{font-size:1.5rem;font-weight:700;color:#fff;text-decoration:none}
.page-profile .nav-links{display:flex;gap:1rem;font-size:.9rem}
.page-profile .nav-links a{color:#aaa;text-decoration:none}
.page-profile .nav-links a:hover{color:#fff}
.page-profile h1{font-size:1.5rem;color:#fff;margin-bottom:.25rem}
.page-profile .sub{color:#666;font-size:.9rem;margin-bottom:2rem}
.page-profile .card{background:#1a1a1a;border:1px solid #2e2e2e;border-radius:12px;padding:1.75rem;margin-bottom:1.5rem}
.page-profile .card h2{font-size:1.1rem;color:#fff;margin-bottom:1.25rem}
.page-profile .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:500px){.page-profile .form-row{grid-template-columns:1fr}}
.page-profile .field{margin-bottom:.9rem}
.page-profile .field.full{grid-column:1/-1}
.page-profile label{display:block;font-size:.83rem;color:#aaa;margin-bottom:.28rem}
.page-profile input[type=text],.page-profile input[type=email],.page-profile input[type=password],
.page-profile input[type=tel],.page-profile textarea,.page-profile select{width:100%;background:#111;border:1px solid #333;border-radius:8px;padding:.6rem .85rem;color:#fff;font-size:.95rem;outline:none;transition:border-color .2s;font-family:inherit}
.page-profile textarea{resize:vertical;min-height:80px}
.page-profile select option{background:#1a1a1a}
.page-profile .img-upload-area{border:2px dashed #333;border-radius:10px;padding:1.1rem;text-align:center;cursor:pointer;font-size:.85rem;color:#666;transition:border-color .2s,color .2s;margin-bottom:.6rem}
.page-profile .img-upload-area:hover,.page-profile .img-upload-area.dragover{border-color:#ff4610;color:#aaa}
.page-profile .img-upload-area.has-file{border-color:#ff4610;border-style:solid}
.page-profile .img-current{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.page-profile .img-current img{width:60px;height:60px;object-fit:cover;border-radius:8px;border:1px solid #333}
.page-profile .img-current-label{font-size:.82rem;color:#888}
.page-profile .btn-del-img{background:none;border:1px solid #5a1a1a;color:#f88;border-radius:6px;padding:.25rem .6rem;font-size:.78rem;cursor:pointer;margin-top:.3rem;display:block}
.page-profile .btn-del-img:hover{background:#3a1010}
.page-profile #img-preview{display:none;align-items:center;gap:.5rem;margin-top:.5rem}
.page-profile #img-preview img{width:60px;height:60px;object-fit:cover;border-radius:8px;border:1px solid #ff4610}
.page-profile #img-preview span{font-size:.78rem;color:#ff4610}
.page-profile .btn{padding:.65rem 1.5rem;font-size:.95rem}
.page-profile .alert-ok{background:#1a3a1a;border:1px solid #2a7a2a;border-radius:8px;color:#6f6;padding:.65rem 1rem;margin-bottom:1rem;font-size:.9rem}
.page-profile .alert-err{background:#3a1a1a;border:1px solid #7a2a2a;border-radius:8px;color:#f88;padding:.65rem 1rem;margin-bottom:1rem;font-size:.9rem}
.page-profile .alert-pending{background:#1a1a3a;border:1px solid #4a4aaa;border-radius:8px;color:#aaf;padding:.75rem 1rem;margin-bottom:1rem;font-size:.88rem;line-height:1.6}
.page-profile .alert-pending strong{color:#ccf;display:block;margin-bottom:.25rem}
.page-profile .changes-summary{margin-top:.6rem;background:#111;border-radius:8px;padding:.6rem .9rem;font-size:.82rem;line-height:1.8}
.page-profile .changes-summary dt{color:#666;display:inline}
.page-profile .changes-summary dd{color:#ccf;display:inline;margin:0 0 0 .4rem}
.page-profile .changes-summary dd::after{content:'';display:block}
.page-profile .pixel-table{width:100%;border-collapse:collapse;font-size:.9rem}
.page-profile .pixel-table th{text-align:left;color:#666;font-weight:500;padding:.4rem .5rem;border-bottom:1px solid #2e2e2e}
.page-profile .pixel-table td{padding:.6rem .5rem;border-bottom:1px solid #1e1e1e;vertical-align:middle}
.page-profile .pixel-table tr:last-child td{border-bottom:none}
.page-profile .pixel-table a{color:#ff4610;text-decoration:none}
.page-profile .badge{display:inline-block;font-size:.73rem;padding:.12rem .5rem;border-radius:20px;font-weight:600}
.page-profile .badge-pending{background:#3a3a10;color:#cca}
.page-profile .badge-approved{background:#103a10;color:#6f6}
.page-profile .badge-rejected{background:#3a1010;color:#f88}
.page-profile .badge-inactive{background:#222;color:#888}
.page-profile .badge-changes{background:#1a1a4a;color:#aaf;margin-left:.3rem}
.page-profile .empty-state{color:#555;font-size:.9rem}

/* ── Public pages (directory, imprint, faq) ── */
body.page-pub{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;background:#0a0a12;color:rgba(255,255,255,.88);min-height:100vh;padding:2rem 1rem 4rem}
body.page-pub a{color:#ffffff;text-decoration:none}
.page-pub .wrap{max-width:900px;margin:0 auto}
.page-pub .logo{font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:2.5rem;display:inline-block}
.page-pub h1{font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:.6rem}
.page-pub h2{font-size:1.05rem;font-weight:600;color:#fff;margin:2rem 0 .6rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08)}
.page-pub h2:first-of-type{border-top:none;margin-top:0}
.page-pub p{font-size:.93rem;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:.5rem}
.page-pub address{font-style:normal;font-size:.93rem;color:rgba(255,255,255,.7);line-height:1.9;margin-bottom:.5rem}
.page-pub .subtitle{font-size:.88rem;color:rgba(255,255,255,.35);margin-bottom:2rem}
.page-pub .subtitle strong{color:rgba(255,255,255,.55)}
.page-pub .todo{background:rgba(255,180,0,.08);border:1px dashed rgba(255,180,0,.35);border-radius:6px;padding:.4rem .8rem;font-size:.8rem;color:rgba(255,180,0,.8);margin:.25rem 0}
.page-pub .footer-nav{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;display:flex;gap:1.5rem;flex-wrap:wrap}
.page-pub .footer-nav a{color:rgba(255,255,255,.4)}
.page-pub .footer-nav a:hover{color:rgba(255,255,255,.7);text-decoration:none}
/* Directory */
.page-pub .top-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:.5rem}
.page-pub .lang-sw{display:flex;gap:.4rem}
.page-pub .lang-sw a{font-size:.75rem;color:rgba(255,255,255,.3);padding:.2rem .55rem;border-radius:6px;border:1px solid rgba(255,255,255,.1);transition:color .15s,border-color .15s}
.page-pub .lang-sw a:hover{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.3);text-decoration:none}
.page-pub .lang-sw a.active{color:#fff;border-color:rgba(255,70,16,.5);font-weight:600}
.page-pub .search-form{display:flex;gap:.5rem;margin-bottom:2rem}
.page-pub .search-form input{flex:1;padding:.6rem 1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:rgba(255,255,255,.9);font-size:.9rem;outline:none;transition:border-color .2s}
.page-pub .search-form input::placeholder{color:rgba(255,255,255,.25)}
.page-pub .search-form input:focus{border-color:#ff4610}
.page-pub .search-form button{padding:.6rem 1.15rem;background:#ff4610;color:#0a0a12;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-size:.88rem;white-space:nowrap;transition:background .15s}
.page-pub .search-form button:hover{background:#fb660c}
.page-pub .clear-btn{padding:.6rem .9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:rgba(255,255,255,.45);font-size:.82rem;cursor:pointer;white-space:nowrap;transition:background .15s}
.page-pub .clear-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);text-decoration:none}
.page-pub .list-head{display:grid;grid-template-columns:32px 1fr 200px 90px 90px;gap:.5rem 1rem;padding:.4rem 1rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.25);text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.07)}
.page-pub .entry-list{display:flex;flex-direction:column;margin-bottom:2rem}
.page-pub .entry{display:grid;grid-template-columns:32px 1fr 200px 90px 90px;gap:.5rem 1rem;align-items:center;padding:.7rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);transition:background .12s;text-decoration:none;color:inherit}
.page-pub .entry:first-child{border-top:1px solid rgba(255,255,255,.07)}
.page-pub .entry:hover{background:rgba(255,255,255,.04);text-decoration:none}
.page-pub .entry:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.page-pub .e-dot{width:18px;height:18px;border-radius:5px;flex-shrink:0}
.page-pub .e-name{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-pub .e-url{font-size:.8rem;color:#ff4610;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-pub .e-coords{font-size:.75rem;color:rgba(255,255,255,.3);font-family:monospace;white-space:nowrap}
.page-pub .e-date{font-size:.75rem;color:rgba(255,255,255,.28);white-space:nowrap}
.page-pub .pagination{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}
.page-pub .page-link{padding:.38rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45);font-size:.82rem;background:transparent;transition:background .12s,color .12s}
.page-pub .page-link:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);text-decoration:none}
.page-pub .page-link.active{background:#ff4610;color:#0a0a12;border-color:#ff4610;font-weight:700}
.page-pub .page-info{font-size:.78rem;color:rgba(255,255,255,.22);text-align:center;margin-top:.65rem}
.page-pub .no-results{text-align:center;padding:3rem;font-size:.92rem;color:rgba(255,255,255,.25)}
@media(max-width:640px){
  .page-pub .list-head{grid-template-columns:18px 1fr 80px;gap:.4rem .75rem}
  .page-pub .list-head .h-url,.page-pub .list-head .h-date{display:none}
  .page-pub .entry{grid-template-columns:18px 1fr 80px;gap:.4rem .75rem}
  .page-pub .e-url,.page-pub .e-date{display:none}
  .page-pub .e-dot{width:14px;height:14px}
}
/* FAQ */
.page-pub .accordion{display:flex;flex-direction:column;gap:.75rem}
.page-pub .acc-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;transition:border-color .2s}
.page-pub .acc-item.open{border-color:rgba(255,70,16,.4)}
.page-pub .acc-btn{width:100%;background:none;border:none;padding:1.1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;text-align:left;color:rgba(255,255,255,.9);font-size:.97rem;font-weight:600;font-family:inherit;transition:background .15s}
.page-pub .acc-btn:hover{background:rgba(255,255,255,.04)}
.page-pub .acc-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(255,70,16,.1);border:1px solid rgba(255,70,16,.25);display:flex;align-items:center;justify-content:center;color:#ff4610;font-size:.85rem;font-weight:700;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.page-pub .acc-item.open .acc-icon{transform:rotate(45deg);background:rgba(255,70,16,.2)}
.page-pub .acc-body{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.page-pub .acc-item.open .acc-body{max-height:600px}
.page-pub .acc-inner{padding:.1rem 1.3rem 1.3rem;font-size:.91rem;color:rgba(255,255,255,.65);line-height:1.8}
.page-pub .acc-inner p{margin-bottom:.7rem}
.page-pub .acc-inner p:last-child{margin-bottom:0}
.page-pub .acc-inner ul{margin:.4rem 0 .7rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.page-pub .acc-inner li{color:rgba(255,255,255,.6)}
.page-pub .acc-inner strong{color:rgba(255,255,255,.85)}

/* ── Admin ── */
body.page-admin{font-family:system-ui,sans-serif;background:#0f0f0f;color:#e0e0e0;padding:1.5rem 1rem;min-height:100vh}
body.page-admin a{color:inherit;text-decoration:none}
.page-admin .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem}
.page-admin h1{font-size:1.25rem;font-weight:700;color:#fff}
.page-admin .btn-logout{background:none;border:1px solid #333;color:#aaa;border-radius:7px;padding:.35rem .85rem;cursor:pointer;font-size:.8rem}
.page-admin .stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.5rem}
.page-admin .stat-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:.85rem 1rem}
.page-admin .stat-label{font-size:.72rem;color:#666;margin-bottom:.25rem}
.page-admin .stat-num{font-size:1.6rem;font-weight:700;color:#fff}
.page-admin .stat-num.pending{color:#f59e0b}
.page-admin .stat-num.approved{color:#22c55e}
.page-admin .stat-num.inactive{color:#6366f1}
.page-admin .stat-num.rejected{color:#ef4444}
.page-admin .chart-wrap{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:1rem;margin-bottom:1.5rem}
.page-admin .chart-title{font-size:.8rem;color:#666;margin-bottom:.75rem}
.page-admin #chart-canvas{width:100%;height:80px;display:block}
.page-admin .tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.page-admin .tab{padding:.4rem 1rem;border-radius:999px;border:1px solid #333;text-decoration:none;color:#aaa;font-size:.82rem;background:#1a1a1a}
.page-admin .tab.active{background:#fff;color:#111;border-color:#fff}
.page-admin .badge{display:inline-block;background:#ef4444;color:#fff;border-radius:999px;font-size:.68rem;padding:1px 6px;margin-left:4px}
.page-admin .bulk-bar{display:none;align-items:center;gap:.75rem;padding:.65rem 1rem;background:#1e1e1e;border:1px solid #2a2a2a;border-radius:8px;margin-bottom:1rem;flex-wrap:wrap}
.page-admin .bulk-bar.visible{display:flex}
.page-admin .bulk-count{font-size:.82rem;color:#aaa}
.page-admin .btn-bulk{padding:.35rem .85rem;border-radius:7px;border:none;cursor:pointer;font-size:.8rem;font-weight:600}
.page-admin .btn-bulk-approve{background:#22c55e;color:#fff}
.page-admin .btn-bulk-reject{background:#ef4444;color:#fff}
.page-admin .btn-bulk-clear{background:#2a2a2a;color:#aaa}
.page-admin .select-all-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.8rem;color:#666}
.page-admin .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.page-admin .card{background:#1a1a1a;border-radius:10px;border:1px solid #2a2a2a;overflow:hidden;position:relative}
.page-admin .card-select{position:absolute;top:.5rem;left:.5rem;width:18px;height:18px;cursor:pointer;z-index:2}
.page-admin .card-img{width:100%;height:140px;object-fit:cover;display:block}
.page-admin .card-color{width:100%;height:140px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}
.page-admin .card-body{padding:.85rem 1rem}
.page-admin .card-name{font-weight:600;font-size:.95rem;color:#fff;margin-bottom:.2rem}
.page-admin .card-url{font-size:.76rem;color:#ff4610;word-break:break-all;margin-bottom:.35rem}
.page-admin .card-meta{font-size:.7rem;color:#444;margin-bottom:.75rem;line-height:1.6}
.page-admin .card-status{display:inline-block;font-size:.68rem;padding:2px 8px;border-radius:999px;margin-bottom:.5rem;font-weight:600}
.page-admin .cs-pending{background:#78350f;color:#fbbf24}
.page-admin .cs-approved{background:#14532d;color:#4ade80}
.page-admin .cs-inactive{background:#1e1b4b;color:#818cf8}
.page-admin .cs-rejected{background:#450a0a;color:#f87171}
.page-admin .btn-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.page-admin .btn{padding:.32rem .75rem;border-radius:7px;border:none;cursor:pointer;font-size:.76rem;font-weight:600;white-space:nowrap}
.page-admin .btn-approve{background:#22c55e;color:#fff}
.page-admin .btn-reject{background:#ef4444;color:#fff}
.page-admin .btn-inactive{background:#4f46e5;color:#fff}
.page-admin .btn-edit{background:#2a2a2a;color:#ccc;border:1px solid #333}
.page-admin .btn-delete{background:#1a0000;color:#ef4444;border:1px solid #3a0000}
.page-admin .empty{color:#444;text-align:center;padding:4rem}
.page-admin #edit-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);align-items:flex-start;justify-content:center;z-index:300;padding:1rem;overflow-y:auto}
.page-admin #edit-modal-bg.open{display:flex}
.page-admin #edit-modal{background:#1a1a1a;border:1px solid #2d2d2d;border-radius:16px;padding:1.75rem;width:100%;max-width:560px;margin:auto}
.page-admin #edit-modal h2{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:1.25rem}
.page-admin #edit-modal label{display:block;font-size:.78rem;color:#888;margin:.85rem 0 .25rem}
.page-admin #edit-modal input[type=text],.page-admin #edit-modal input[type=url],
.page-admin #edit-modal textarea,.page-admin #edit-modal select{width:100%;padding:.6rem .8rem;background:#111;border:1px solid #333;border-radius:8px;font-size:.88rem;color:#e0e0e0;outline:none;font-family:inherit}
.page-admin #edit-modal textarea{min-height:70px;resize:vertical}
.page-admin #edit-modal input:focus,.page-admin #edit-modal textarea:focus,.page-admin #edit-modal select:focus{border-color:#ff4610}
.page-admin .edit-row{display:flex;gap:.5rem}
.page-admin .edit-row>div{flex:1}
.page-admin .color-preview{display:flex;align-items:center;gap:.6rem;margin-top:.25rem}
.page-admin .color-preview input[type=color]{width:40px;height:32px;border:none;background:none;cursor:pointer;padding:0;border-radius:6px}
.page-admin .color-preview span{font-size:.8rem;color:#666;font-family:monospace}
.page-admin .edit-img-preview{width:80px;height:80px;object-fit:cover;border-radius:7px;border:1px solid #333;margin-top:.5rem;display:none}
.page-admin .edit-modal-btns{display:flex;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap}
.page-admin .btn-em{padding:.6rem 1.1rem;border-radius:9px;border:none;font-size:.88rem;font-weight:600;cursor:pointer}
.page-admin .btn-em-save{background:#fff;color:#111}
.page-admin .btn-em-cancel{background:#2a2a2a;color:#ccc}
.page-admin .btn-em-delete{background:#1a0000;color:#ef4444;border:1px solid #3a0000;margin-left:auto}
.page-admin #edit-error{font-size:.78rem;color:#ef4444;margin-top:.5rem;display:none}
/* Admin login */
body.page-admin-login{font-family:system-ui,sans-serif;background:#0f0f0f;display:flex;align-items:center;justify-content:center;min-height:100vh}
.page-admin-login .box{background:#1a1a1a;border:1px solid #333;border-radius:14px;padding:2rem;width:320px}
.page-admin-login h1{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:1.5rem}
.page-admin-login input[type=password]{width:100%;padding:.65rem .85rem;background:#111;border:1px solid #333;border-radius:8px;font-size:1rem;color:#fff;margin-bottom:1rem;outline:none;transition:border-color .2s}
.page-admin-login input[type=password]:focus{border-color:#ff4610}
.page-admin-login button{width:100%;padding:.65rem;background:#fff;color:#111;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer}
.page-admin-login button:hover{background:#eee}
.page-admin-login .err{color:#ff6b6b;font-size:.82rem;margin-bottom:.75rem}

/* ── Offline page ── */
body.page-offline{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;background:#0a0a12;display:flex;align-items:center;justify-content:center;min-height:100vh;color:rgba(255,255,255,.85)}
.page-offline .bg{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 30% 40%,rgba(60,100,200,.18) 0%,transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(100,60,200,.12) 0%,transparent 55%)}
.page-offline .card{position:relative;z-index:1;background:rgba(255,255,255,.07);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 60px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2);border-radius:28px;padding:3rem 2.5rem;text-align:center;max-width:360px;width:90%}
.page-offline .icon{font-size:3.5rem;margin-bottom:1.25rem;display:block;animation:offlineFloat 3s ease-in-out infinite}
@keyframes offlineFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.page-offline h1{font-size:1.35rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.02em;color:rgba(255,255,255,.95)}
.page-offline p{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:2rem}
.page-offline .btn{display:inline-block;padding:.72rem 1.75rem;background:linear-gradient(135deg,rgba(110,180,255,.35),rgba(80,140,255,.18));border:1px solid rgba(110,180,255,.4);color:rgba(255,255,255,.92);border-radius:14px;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;box-shadow:0 4px 20px rgba(110,180,255,.25),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .15s,box-shadow .15s;letter-spacing:.01em}
.page-offline .btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(110,180,255,.35)}
.page-offline .logo{position:absolute;top:1.5rem;left:50%;transform:translateX(-50%);font-size:.8rem;color:rgba(255,255,255,.25);letter-spacing:.05em;font-weight:500}
.page-offline .grid-dots{position:fixed;inset:0;z-index:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}