/* ZEUS Hub — © אופיר ברנס (Ofir Baranes) 2026 */
:root{
  --bg:#070914; --panel:rgba(16,21,44,.62); --border:rgba(255,255,255,.09);
  --gold:#f2c86b; --gold-dim:#9a8250; --ink:#e6ecfc; --ink-dim:#8792b4;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Heebo',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  min-height:100dvh;overflow-x:hidden;
  background-image:radial-gradient(ellipse at 50% -10%,rgba(58,84,226,.16),transparent 55%);
}
a{color:inherit;text-decoration:none}

/* aurora */
#aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
#aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.28}
#aurora i:nth-child(1){background:radial-gradient(circle,rgba(58,84,226,.6),transparent 62%);top:-24%;right:-16%;animation:a1 28s ease-in-out infinite alternate}
#aurora i:nth-child(2){background:radial-gradient(circle,rgba(242,200,107,.4),transparent 62%);bottom:-28%;left:-14%;animation:a2 35s ease-in-out infinite alternate}
#aurora i:nth-child(3){background:radial-gradient(circle,rgba(122,64,210,.34),transparent 62%);top:30%;left:40%;animation:a3 44s ease-in-out infinite alternate}
@keyframes a1{to{transform:translate(-12vw,10vh) scale(1.18)}}
@keyframes a2{to{transform:translate(11vw,-8vh) scale(1.12)}}
@keyframes a3{to{transform:translate(-14vw,12vh) scale(.86)}}

/* ============ login gate ============ */
#gate{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:20px}
.gate-card{
  width:min(420px,94vw);background:linear-gradient(170deg,rgba(20,25,52,.9),rgba(10,13,30,.94));
  border:1px solid rgba(242,200,107,.3);border-radius:26px;padding:38px 30px;text-align:center;
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 70px rgba(242,200,107,.08),inset 0 1px 0 rgba(255,255,255,.07);
  animation:pop .5s var(--spring);
}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}}
.gate-bolt{font-size:52px;filter:drop-shadow(0 0 22px rgba(242,200,107,.6));animation:float 3.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-5deg)}}
.gate-card h1{font-size:46px;font-weight:900;letter-spacing:.22em;margin:6px 0 4px;
  background:linear-gradient(120deg,#fff,var(--gold),#fff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:sh 5s linear infinite}
@keyframes sh{to{background-position:200% 0}}
.gate-sub{color:var(--ink-dim);font-size:13px;margin-bottom:24px}
.gate-card label{display:block;text-align:right;font-size:12.5px;color:var(--ink-dim);margin-bottom:14px}
.gate-card input{
  width:100%;margin-top:6px;padding:13px 15px;border-radius:13px;border:1px solid var(--border);
  background:rgba(255,255,255,.05);color:var(--ink);font-size:15px;font-family:inherit;transition:.25s;
}
.gate-card input:focus{outline:none;border-color:var(--gold);background:rgba(242,200,107,.06);box-shadow:0 0 0 3px rgba(242,200,107,.12)}
.gate-card button{
  width:100%;margin-top:8px;padding:14px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),#e0a94a);color:#1a1205;font-weight:800;font-size:15px;font-family:inherit;
  box-shadow:0 12px 34px rgba(242,200,107,.25);transition:.25s var(--spring);
}
.gate-card button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 44px rgba(242,200,107,.38)}
.gate-err{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);color:#ff9b9b;border-radius:11px;padding:10px;font-size:13px;margin-bottom:14px}
.gate-foot{color:var(--ink-dim);font-size:11px;z-index:2}

/* ============ dashboard ============ */
#topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:rgba(7,9,20,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:baseline;gap:12px}
.brand-gr{font-size:26px;font-weight:900;letter-spacing:.18em;color:var(--gold);text-shadow:0 0 20px rgba(242,200,107,.4)}
.brand-he{font-size:13px;color:var(--ink-dim);font-weight:600;letter-spacing:.1em}
.top-actions{display:flex;align-items:center;gap:16px}
#clock{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:14px}
.logout{font-size:13px;color:var(--ink-dim);border:1px solid var(--border);border-radius:11px;padding:7px 13px;transition:.25s}
.logout:hover{color:#ff9b9b;border-color:rgba(255,90,90,.4)}

#tabs{position:relative;z-index:10;display:flex;gap:8px;padding:14px 22px 0;flex-wrap:wrap;max-width:1500px;margin:0 auto;width:100%}
.tab{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--ink-dim);
  border-radius:13px 13px 0 0;padding:11px 18px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.25s var(--spring);display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--ink);background:rgba(242,200,107,.08)}
.tab.active{color:var(--gold);background:var(--panel);border-color:rgba(242,200,107,.3);border-bottom-color:transparent}
.badge{background:rgba(242,200,107,.18);color:var(--gold);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:800}

#dash{position:relative;z-index:5;max-width:1500px;margin:0 auto;padding:22px;width:100%}
.pane{display:none;animation:fade .4s ease}
.pane.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}

.hero{display:flex;align-items:center;gap:20px;margin-bottom:26px;background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero-orb{font-size:46px;filter:drop-shadow(0 0 20px rgba(242,200,107,.5));animation:float 3.4s ease-in-out infinite}
.hero h2{font-size:24px;font-weight:800}
.hero p{color:var(--ink-dim);font-size:14px;margin-top:4px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.cat-card{display:flex;align-items:center;gap:16px;text-align:right;background:var(--panel);border:1px solid var(--border);
  border-radius:20px;padding:20px;cursor:pointer;transition:.3s var(--spring);font-family:inherit;color:inherit;width:100%}
.cat-card:hover{transform:translateY(-4px);border-color:rgba(242,200,107,.4);box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 40px rgba(242,200,107,.06)}
.cc-icon{font-size:34px;filter:drop-shadow(0 0 12px rgba(242,200,107,.35))}
.cc-body{flex:1}
.cc-title{font-size:17px;font-weight:800}
.cc-count{color:var(--ink-dim);font-size:13px;margin-top:2px}
.cc-arrow{color:var(--gold);font-size:20px;opacity:.5;transition:.3s}
.cat-card:hover .cc-arrow{opacity:1;transform:translateX(-6px)}

.pane-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.pane-head h2{font-size:22px;font-weight:800;color:var(--gold)}
.pane-sub{color:var(--ink-dim);font-size:13px}
.empty{text-align:center;color:var(--ink-dim);padding:60px 20px;font-size:15px;background:var(--panel);border:1px dashed var(--border);border-radius:20px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.shot{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:zoom-in;transition:.3s var(--spring)}
.shot:hover{transform:translateY(-4px) scale(1.02);border-color:rgba(242,200,107,.4);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.shot img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.shot figcaption{padding:10px 12px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.shot figcaption small{color:var(--ink-dim)}

/* files */
.filelist{display:flex;flex-direction:column;gap:9px}
.filerow{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 18px;transition:.25s var(--spring)}
.filerow:hover{transform:translateX(-4px);border-color:rgba(242,200,107,.35);background:rgba(242,200,107,.05)}
.fr-ico{font-size:24px}
.fr-name{flex:1;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-meta{color:var(--ink-dim);font-size:12px;white-space:nowrap}
.fr-open{color:var(--gold);font-size:13px;font-weight:700}

/* sites */
.sitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.site-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px;transition:.3s var(--spring)}
.site-card:hover{transform:translateY(-4px);border-color:rgba(242,200,107,.4);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.sc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sc-ico{font-size:24px}
.sc-name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-meta{color:var(--ink-dim);font-size:12px;margin-bottom:14px}
.sc-open{display:inline-block;background:rgba(242,200,107,.14);color:var(--gold);border:1px solid rgba(242,200,107,.3);border-radius:11px;padding:8px 14px;font-size:13px;font-weight:700;transition:.25s}
.sc-open:hover{background:rgba(242,200,107,.24)}

/* lightbox */
#lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(3,4,12,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:zoom-out;padding:24px}
#lightbox.open{display:flex;animation:fade .3s ease}
#lightbox img{max-width:95vw;max-height:92dvh;border-radius:16px;border:1px solid rgba(242,200,107,.4);box-shadow:0 30px 90px rgba(0,0,0,.8)}
#lb-x{position:absolute;top:20px;left:22px;font-size:22px;color:var(--gold);width:42px;height:42px;display:grid;place-items:center;background:rgba(255,255,255,.06);border-radius:50%;cursor:pointer}

#foot{position:relative;z-index:5;text-align:center;color:var(--ink-dim);font-size:11.5px;padding:26px 16px calc(26px + env(safe-area-inset-bottom))}

@media (max-width:640px){
  #topbar{padding:12px 16px}#tabs{padding:12px 12px 0}.tab{padding:10px 13px;font-size:13px}
  #dash{padding:14px}.hero{flex-direction:column;text-align:center}#clock{display:none}
}