/* ============================================================
   TekGeminus Insights — premium UI
   Brand: orange is an ACCENT on light/dark neutrals. Dark ink on
   light; warm off-white on dark. Orange never carries body text.
   ============================================================ */
:root{
  /* brand */
  --orange:#E99E4F; --orange-2:#F0B978; --orange-deep:#B45309; --orange-ink:#7A3D0A;
  --navy:#37356A; --green:#3E8E5A; --red:#B23B43;
  /* light neutrals */
  --bg:#F6F3EE; --bg-2:#FBF9F5; --surface:#FFFFFF; --surface-2:#FAF7F2;
  --ink:#241D16; --ink-2:#5E5648; --ink-3:#8C8375;
  --line:rgba(36,29,22,.10); --line-2:rgba(36,29,22,.06);
  --glass:rgba(255,255,255,.72);
  --shadow-1:0 1px 2px rgba(36,29,22,.05),0 2px 8px rgba(36,29,22,.05);
  --shadow-2:0 4px 14px rgba(36,29,22,.08),0 12px 34px rgba(36,29,22,.09);
  --shadow-3:0 18px 50px rgba(36,29,22,.16);
  --ring:0 0 0 3px rgba(233,158,79,.35);
  --r:16px; --r-sm:11px; --r-xs:8px;
  --tb-h:60px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
}
:root[data-theme="dark"]{
  --bg:#100E14; --bg-2:#15121A; --surface:#1A1721; --surface-2:#211D2A;
  --ink:#F1ECE4; --ink-2:#B7AC9E; --ink-3:#847B70;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
  --navy:#9d9be0; --glass:rgba(26,23,33,.7);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 6px 22px rgba(0,0,0,.45);
  --shadow-3:0 20px 60px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(233,158,79,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
  background:
    radial-gradient(1100px 600px at 88% -8%, color-mix(in srgb,var(--orange) 12%,transparent), transparent 60%),
    radial-gradient(900px 500px at -6% 4%, color-mix(in srgb,var(--navy) 10%,transparent), transparent 55%),
    linear-gradient(var(--bg),var(--bg-2));
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
h1{margin:0;font-size:1.15rem;letter-spacing:-.015em}

/* ------------------------------------------------ top bar ------- */
.topbar{
  height:var(--tb-h);flex:0 0 auto;display:flex;align-items:center;gap:1rem;
  padding:0 clamp(.7rem,2.2vw,1.3rem);position:sticky;top:0;z-index:60;
  background:var(--glass);backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand-mark{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--orange-2),var(--orange) 42%,var(--orange-deep));
  color:#fff;font-weight:800;font-size:.86rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(180,83,9,.35),inset 0 1px 0 rgba(255,255,255,.4);
}
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%)}
.brand-text{display:flex;flex-direction:column;line-height:1.06}
.brand-name{font-weight:750;font-size:.8rem;color:var(--ink)}
.brand-product{font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--orange-deep)}

.tb-mid{flex:1 1 auto;display:flex;align-items:center;min-width:0}
.tb-right{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}

/* project switcher */
.psw{position:relative}
.psw-btn{display:flex;align-items:center;gap:.55rem;padding:.4rem .7rem;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow-1);transition:.16s}
.psw-btn:hover{border-color:color-mix(in srgb,var(--orange) 55%,var(--line))}
.psw-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 65%,transparent);animation:pulse 2.4s infinite}
.psw-btn .pn{font-weight:750;font-size:.86rem}
.psw-btn .chev{color:var(--ink-3)}
.psw-btn.static{cursor:default}
.psw-menu{position:absolute;left:0;top:calc(100% + .5rem);min-width:260px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);padding:.4rem;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.99);transition:.16s;z-index:70}
.psw-menu.open{opacity:1;visibility:visible;transform:none}
.psw-item{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .65rem;border-radius:10px}
.psw-item:hover{background:color-mix(in srgb,var(--orange) 9%,transparent)}
.psw-item.active{background:color-mix(in srgb,var(--orange) 13%,transparent)}
.psw-item b{font-size:.86rem}
.psw-item span{font-size:.75rem;color:var(--ink-2)}

/* icon buttons */
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-1);transition:.16s}
.iconbtn:hover{color:var(--orange-deep);border-color:color-mix(in srgb,var(--orange) 55%,var(--line));
  transform:translateY(-1px)}
.iconbtn:active{transform:translateY(0)}
.iconbtn.spin svg{animation:spin .7s linear infinite}
#themeBtn .ic-sun{display:none}
#themeBtn .ic-moon{display:block}
:root[data-theme="dark"] #themeBtn .ic-sun{display:block}
:root[data-theme="dark"] #themeBtn .ic-moon{display:none}

/* user chip */
.userchip{position:relative}
.userchip-btn{display:flex;align-items:center;gap:.5rem;padding:.26rem .55rem .26rem .3rem;
  border:1px solid var(--line);background:var(--surface);border-radius:99px;cursor:pointer;color:var(--ink);
  box-shadow:var(--shadow-1);transition:.16s;max-width:220px}
.userchip-btn:hover{border-color:color-mix(in srgb,var(--orange) 55%,var(--line))}
.avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:750;font-size:.8rem;color:#fff;background:linear-gradient(140deg,var(--navy),#565397)}
.avatar.sm{width:26px;height:26px;flex:0 0 26px;font-size:.72rem}
.uname{font-size:.83rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{flex:0 0 auto;color:var(--ink-3)}
@media (max-width:680px){.uname{display:none}.brand-text{display:none}}

.usermenu{position:absolute;right:0;top:calc(100% + .5rem);min-width:236px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);padding:.4rem;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.99);transition:.16s;z-index:70}
.usermenu.open{opacity:1;visibility:visible;transform:none}
.um-head{padding:.6rem;border-bottom:1px solid var(--line);margin-bottom:.3rem;display:flex;flex-direction:column;gap:.12rem}
.um-head b{font-size:.9rem}
.um-head .em{font-size:.76rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-role{align-self:flex-start;margin-top:.35rem;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:800;color:var(--orange-ink);background:color-mix(in srgb,var(--orange) 22%,transparent);
  padding:.14rem .5rem;border-radius:6px}
.um-item{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;border-radius:9px;font-size:.85rem;font-weight:650}
.um-item:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.um-item.danger{color:var(--red)}

/* ------------------------------------------------ main ---------- */
main{flex:1 1 auto;min-height:0}
main.center{display:flex;align-items:center;justify-content:center;padding:2rem}
.flash{margin:1rem auto 0;max-width:1080px;display:flex;align-items:center;gap:.5rem;
  background:color-mix(in srgb,var(--green) 13%,var(--surface));
  border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));color:var(--ink);
  padding:.7rem 1rem;border-radius:11px;font-size:.87rem;font-weight:650;box-shadow:var(--shadow-1);
  animation:slidedown .3s ease}

/* ------------------------------------------------ viewer -------- */
main.viewer{display:flex;flex-direction:column}
.proj-strip{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.7rem clamp(.9rem,2.4vw,1.4rem) .2rem}
.proj-title{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.proj-title h1{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.proj-full{font-size:.82rem;color:var(--ink-2)}
.proj-desc{margin:.15rem 0 0;font-size:.85rem;color:var(--ink-2);flex-basis:100%}
.freshness{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--ink-2);font-weight:600}
.freshness .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 65%,transparent);animation:pulse 2.4s infinite}

.frame-wrap{flex:1 1 auto;position:relative;min-height:0;margin:clamp(.5rem,1.5vw,1rem);
  border-radius:var(--r);overflow:hidden;background:#0b0e14;
  box-shadow:var(--shadow-3);border:1px solid var(--line)}
.frame-wrap::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.frame-wrap:fullscreen{margin:0;border-radius:0}
#dash{width:100%;height:100%;border:0;display:block}

/* shimmer skeleton */
.skeleton{position:absolute;inset:0;z-index:2;background:var(--surface);padding:1rem;display:grid;gap:1rem;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;transition:opacity .35s}
.skeleton.hide{opacity:0;pointer-events:none}
.sk-card{border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);position:relative;overflow:hidden}
.sk-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--orange) 12%,transparent) 45%,transparent 70%);
  transform:translateX(-100%);animation:shimmer 1.5s infinite}
.sk-note{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;color:var(--ink-2);
  font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.55rem}
.sk-note .spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--orange-deep);
  border-radius:50%;animation:spin .7s linear infinite}
@media (max-width:760px){.skeleton{grid-template-columns:repeat(2,1fr)}}

.frame-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:.9rem;
  align-items:center;justify-content:center;background:var(--surface);color:var(--ink-2);font-size:.9rem}
.frame-overlay[hidden]{display:none}
.err-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);font-size:1.5rem}

/* ------------------------------------------------ buttons ------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.58rem 1.1rem;border-radius:11px;border:1px solid transparent;
  background:linear-gradient(180deg,var(--orange-deep),#9a4708);color:#fff;font-weight:750;font-size:.85rem;cursor:pointer;
  box-shadow:0 2px 8px rgba(180,83,9,.28);transition:.16s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-1)}
.btn.ghost:hover{border-color:color-mix(in srgb,var(--orange) 55%,var(--line));color:var(--orange-deep);filter:none}

/* ------------------------------------------------ empty --------- */
.card.empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-3);
  padding:2.6rem 2.1rem;max-width:460px;text-align:center;animation:pop .35s ease}
.empty-ic{width:64px;height:64px;margin:0 auto .8rem;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;background:color-mix(in srgb,var(--orange) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 30%,transparent)}
.card.empty h1{font-size:1.35rem;margin-bottom:.5rem}
.card.empty p{color:var(--ink-2);font-size:.92rem;margin:0 0 1.4rem}
.empty-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* ------------------------------------------------ admin --------- */
main.admin{max-width:1120px;width:100%;margin:0 auto;padding:clamp(1rem,3vw,2rem)}
.admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.admin-head h1{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.admin-head p{color:var(--ink-2);font-size:.9rem;margin:.35rem 0 0;max-width:62ch}
.admin-tools{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem;position:sticky;top:calc(var(--tb-h) + .4rem);z-index:20}
#userSearch{flex:1;max-width:440px;padding:.62rem .95rem;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--ink);font-size:.9rem;box-shadow:var(--shadow-1)}
.notice{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:1.3rem;color:var(--ink-2);font-size:.9rem}
.grid-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);overflow:hidden}
.grid-scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;min-width:540px}
.grid thead th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:800;
  padding:.9rem 1rem;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0}
.grid th.col-proj{text-align:center}
.grid td{padding:.72rem 1rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.grid tr:last-child td{border-bottom:0}
.grid tr.urow{transition:background .12s}
.grid tr.urow:hover{background:color-mix(in srgb,var(--orange) 6%,transparent)}
.u-cell{display:flex;align-items:center;gap:.6rem}
.u-meta{display:flex;flex-direction:column;line-height:1.25}
.u-meta b{font-size:.88rem}
.muted{color:var(--ink-3);font-size:.77rem}
.tag{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);
  background:color-mix(in srgb,var(--navy) 15%,transparent);padding:.16rem .5rem;border-radius:6px}
.chkcell{text-align:center}
.noresult{padding:1.6rem;text-align:center;color:var(--ink-2);font-size:.9rem}

/* toggle switch */
.switch{position:relative;display:inline-block;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{display:block;width:44px;height:25px;border-radius:99px;background:color-mix(in srgb,var(--ink) 20%,transparent);transition:.2s;position:relative}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:.2s}
.switch input:checked + .track{background:var(--green)}
.switch input:checked + .track::after{transform:translateX(19px)}
.switch input:focus-visible + .track{box-shadow:var(--ring)}

/* ------------------------------------------------ anim ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes slidedown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}