/* Emporiant Tools – shared UI for hub, account and admin · powered by IRIDIMAX */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#000;--panel:#0a0b0b;--panel2:#101212;--line:#1e2222;--line2:#2c3232;
  --ink:#f3f4f4;--ink2:#a4abab;--ink3:#667070;
  --accent:#36C4AF;--accent-dim:rgba(54,196,175,.12);--accent-line:rgba(54,196,175,.35);
  --danger:#e05d5d;--warn:#e2b24f;--ok:#36C4AF;
  --top-bg:rgba(0,0,0,.92);--accent-btn:#36C4AF;--sans:'Open Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--sans);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
[hidden]{display:none!important}
code{font-family:var(--mono);font-size:.9em;background:var(--panel2);border:1px solid var(--line);padding:1px 6px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 clamp(16px,4vw,48px);height:64px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--top-bg);backdrop-filter:blur(8px);z-index:20}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;display:block}
.brand b{font-weight:800;letter-spacing:.22em;font-size:.82rem;text-transform:uppercase}
.brand span{font:400 .7rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border-left:1px solid var(--line2);padding-left:.8rem}
.nav{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.nav .who{font:400 .72rem var(--mono);color:var(--ink3);margin-right:.6rem;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* buttons / inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--accent-btn);color:#000;border:1px solid var(--accent-btn);padding:.62rem 1.2rem;font:700 .76rem var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:0;transition:background .15s,color .15s}
.btn:hover{background:#4fd6c2;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.small{padding:.4rem .8rem;font-size:.68rem}
.btn.danger{background:transparent;color:var(--danger);border-color:rgba(224,93,93,.5)}
.btn.danger:hover{background:rgba(224,93,93,.12)}
label{display:block;font:400 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:.4rem}
input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);padding:.7rem .85rem;font:400 .95rem var(--sans);border-radius:0;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
small{display:block;color:var(--ink3);font-size:.76rem;margin-top:.3rem}
.field{margin-bottom:1rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.msg{font-size:.85rem;margin-top:.8rem;min-height:1.2em}
.msg.error{color:var(--danger)}.msg.success{color:var(--ok)}.msg.info{color:var(--ink2)}

/* layout */
main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,56px) clamp(16px,4vw,48px)}
.eyebrow{font:400 .72rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
h1{font-weight:300;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.12;letter-spacing:-.01em}
h1 b{font-weight:800;color:var(--accent)}
h2{font-weight:600;font-size:1.25rem}
.lead{color:var(--ink2);max-width:60ch;margin-top:1rem}
.notice{border:1px solid var(--accent-line);background:var(--accent-dim);padding:.9rem 1.1rem;margin-bottom:1.6rem;font-size:.92rem}
.notice.warn{border-color:rgba(226,178,79,.5);background:rgba(226,178,79,.08)}
.notice.err{border-color:rgba(224,93,93,.5);background:rgba(224,93,93,.08)}

/* login */
.auth-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,6vw,80px);align-items:center;min-height:calc(100vh - 64px - 90px)}
.auth-card{border:1px solid var(--line2);background:var(--panel);padding:2rem}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.tabs button{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--ink3);padding:.7rem;font:700 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.auth-card .btn{width:100%;margin-top:.4rem}
.alt{display:block;text-align:center;margin-top:1rem;font-size:.85rem;color:var(--ink2);cursor:pointer}
.plans{display:grid;gap:.7rem;margin-top:2rem;max-width:520px}
.plans div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:.7rem;font-size:.9rem;color:var(--ink2)}
.plans b{color:var(--ink);font-weight:600}.plans span:last-child{font-family:var(--mono);font-size:.78rem;color:var(--accent);white-space:nowrap}

/* packages + tiles */
.pkg{margin-top:3rem}
.pkg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--line2);margin-bottom:1.2rem}
.pkg-head p{color:var(--ink2);font-size:.92rem;margin-top:.2rem}
.badge{display:inline-block;font:400 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.badge.accent{color:var(--accent);border-color:var(--accent-line);background:var(--accent-dim)}
.badge.warn{color:var(--warn);border-color:rgba(226,178,79,.45)}
.badge.danger{color:var(--danger);border-color:rgba(224,93,93,.45)}
.pkg-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tile{background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;min-height:170px;color:var(--ink);transition:background .15s}
a.tile:hover{background:var(--panel2);text-decoration:none}
a.tile:hover .go{color:var(--accent);transform:translateX(4px)}
.tile .cat{font:400 .66rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.tile h3{font-weight:700;font-size:1.08rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.tile p{color:var(--ink2);font-size:.88rem;flex:1}
.tile .go{font:400 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);transition:.15s}
.tile.locked{opacity:.62}
.tile.locked .go{color:var(--warn)}

/* panels (account/admin) */
.panel{border:1px solid var(--line2);background:var(--panel);padding:1.6rem;margin-bottom:1.4rem}
.panel h2{margin-bottom:1rem;font-size:1.05rem}
.panel.danger{border-color:rgba(224,93,93,.4)}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.kv:last-child{border-bottom:none}.kv span{color:var(--ink2)}.kv b{font-weight:600;text-align:right;word-break:break-word}
.meter{height:4px;background:var(--line2);margin:.5rem 0 .3rem}.meter i{display:block;height:100%;background:var(--accent)}.meter.full i{background:var(--warn)}
.qr{background:#fff;display:inline-block;padding:8px;margin:.6rem 0}.qr svg{display:block}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;margin:1rem 0}.codes code{padding:.4rem .6rem;text-align:center}
details.fold{margin-top:1rem}details.fold summary{cursor:pointer;color:var(--ink2);font-size:.9rem;margin-bottom:.8rem}
.bank{background:var(--panel2);border:1px solid var(--line2);padding:1rem 1.2rem;margin:.9rem 0}
.bank .kv{border-color:var(--line)}

/* modal */
.overlay{position:fixed;inset:0;background:var(--overlay,rgba(0,0,0,.78));display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:var(--panel);border:1px solid var(--accent-line);padding:2rem;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal h2{margin-bottom:.8rem}.modal .actions{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}

/* tables (admin) */
.tablewrap{overflow-x:auto;border:1px solid var(--line2)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font:400 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:.8rem .9rem;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr.click{cursor:pointer}tbody tr.click:hover{background:var(--panel2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1.6rem}
.stat{background:var(--panel);padding:1.1rem 1.2rem}.stat b{display:block;font-weight:300;font-size:1.9rem;line-height:1.1}.stat span{font:400 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.subtabs{display:flex;gap:.3rem;flex-wrap:wrap;margin:1.4rem 0}
.subtabs button{background:none;border:1px solid var(--line2);color:var(--ink2);padding:.5rem 1rem;font:700 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.subtabs button.active{color:#000;background:var(--accent-btn);border-color:var(--accent-btn)}
.toolbar{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}.toolbar input,.toolbar select{width:auto;flex:1;min-width:150px}
.actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}

footer{border-top:1px solid var(--line);padding:1.4rem clamp(16px,4vw,48px);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:400 .7rem var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
footer b{color:var(--accent);font-weight:400}

@media(max-width:820px){.auth-wrap{grid-template-columns:1fr;min-height:0}.row{grid-template-columns:1fr}.brand span{display:none}.nav .who{display:none}}

/* bright theme */
:root[data-theme="light"]{
  --bg:#fff;--panel:#f6f8f8;--panel2:#edf0f0;--line:#e0e5e5;--line2:#c9d1d1;
  --ink:#0a0d0d;--ink2:#444d4d;--ink3:#76807f;
  --accent:#12806f;--accent-dim:rgba(54,196,175,.14);--accent-line:rgba(18,128,111,.4);
  --danger:#c23a3a;--warn:#9a6d00;--ok:#12806f;--top-bg:rgba(255,255,255,.92);--overlay:rgba(255,255,255,.8)}
:root[data-theme="light"] .btn:hover{background:#2fb09c}
:root[data-theme="light"] .btn.ghost:hover{background:transparent}
.theme-toggle{background:none;border:1px solid var(--line2);color:var(--ink2);width:34px;height:34px;cursor:pointer;font-size:1rem;line-height:1;margin-left:.5rem;border-radius:0}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* glow + grid (same look as the Launch Control onboarding, with hard edges) */
:root{--grid:rgba(54,196,175,.035);--glow:rgba(54,196,175,.09);--grad:linear-gradient(135deg,#43d3be 0%,#36C4AF 45%,#25a392 100%)}
:root[data-theme="light"]{--grid:rgba(0,0,0,.035);--glow:rgba(54,196,175,.12);--grad:linear-gradient(135deg,#2fb09c 0%,#1a9985 100%)}
body{position:relative;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;background-attachment:fixed}
body::before{content:'';position:fixed;top:-220px;right:-220px;width:700px;height:700px;background:radial-gradient(circle,var(--glow) 0%,transparent 70%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;bottom:-260px;left:-200px;width:620px;height:620px;background:radial-gradient(circle,rgba(54,196,175,.05) 0%,transparent 70%);pointer-events:none;z-index:0}
.top,main,footer{position:relative;z-index:1}
.top{position:sticky}
.btn{background:var(--grad);border-color:transparent}
.btn:hover{background:var(--grad);filter:brightness(1.1);box-shadow:0 0 22px rgba(54,196,175,.35)}
.btn.ghost,.btn.danger{background:transparent}
.btn.ghost:hover{box-shadow:0 0 16px rgba(54,196,175,.2)}
.subtabs button.active{background:var(--grad);border-color:transparent}
.auth-card,.panel,.modal{position:relative;background:linear-gradient(180deg,rgba(54,196,175,.07) 0%,transparent 55%),var(--panel);box-shadow:0 0 40px rgba(54,196,175,.07)}
.panel.danger{background:linear-gradient(180deg,rgba(224,93,93,.06) 0%,transparent 55%),var(--panel);box-shadow:none}
.tile{background:linear-gradient(180deg,rgba(54,196,175,.04) 0%,transparent 60%),var(--panel)}
a.tile:hover{background:linear-gradient(180deg,rgba(54,196,175,.12) 0%,transparent 70%),var(--panel2);box-shadow:inset 0 2px 0 var(--accent),0 0 28px rgba(54,196,175,.12)}
.stat{background:linear-gradient(180deg,rgba(54,196,175,.06) 0%,transparent 70%),var(--panel)}
.pkg-head{border-image:linear-gradient(90deg,var(--accent),transparent 70%) 1}
h1 b{background:linear-gradient(90deg,#4fe0cb,#36C4AF 60%,#2aa896);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="light"] h1 b{background:linear-gradient(90deg,#1ea58f,#12806f);-webkit-background-clip:text;background-clip:text}
.badge.accent{background:linear-gradient(90deg,var(--accent-dim),transparent)}
.meter i{background:linear-gradient(90deg,#25a392,#4fe0cb);box-shadow:0 0 10px rgba(54,196,175,.5)}
.theme-toggle{background:transparent}