/* ============================================================
   ShadowGames — Internal pages (dashboard, lists, detail,
   purchase flows, auth, wizards). Loads AFTER sg.css.
   ============================================================ */

/* ---- breadcrumb ---- */
.crumbs{border-bottom:1px solid var(--line);background:rgba(8,8,13,.5);}
.crumbs-in{max-width:var(--maxw);margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);flex-wrap:wrap;}
.crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);transition:.18s;}
.crumbs a:hover{color:var(--red-bright);}
.crumbs .sep{color:var(--dim);font-size:11px;}
.crumbs .cur{color:var(--red-bright);font-weight:600;}

/* ---- page wrapper + head ---- */
.page{max-width:var(--maxw);margin:0 auto;padding:34px 20px 80px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:30px;}
.page-head .h1{font-family:var(--font-display);font-size:clamp(26px,3.4vw,40px);color:var(--ink);line-height:1.1;}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:6px;}
.page-head .sub b{color:var(--red-bright);}

/* section label inside page */
.block-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:34px 0 16px;}
.block-head h2{font-size:18px;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:9px;margin:0;}
.block-head h2 i{color:var(--red);}

/* ---- stat cards ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat{display:flex;align-items:center;gap:15px;padding:18px;}
.stat .n{font-family:var(--font-hud);font-size:26px;color:var(--ink);line-height:1;}
.stat .l{font-size:12.5px;color:var(--dim);margin-top:5px;}
.stat .qa-list{display:flex;flex-direction:column;gap:6px;}
.stat .qa-list a{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;transition:.18s;}
.stat .qa-list a i{color:var(--red);}
.stat .qa-list a:hover{color:var(--red-bright);}

/* ---- generic panel (table / content container) ---- */
.panel{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)));}
.panel-pad{padding:24px;}

/* ---- data table ---- */
.dtable-wrap{overflow-x:auto;}
.dtable{width:100%;border-collapse:collapse;font-size:13.5px;}
.dtable thead th{text-align:right;padding:14px 18px;font-family:var(--font-hud);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);white-space:nowrap;}
.dtable tbody td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:middle;}
.dtable tbody tr{transition:background .2s;}
.dtable tbody tr:hover{background:rgba(255,31,45,.04);}
.dtable tbody tr:last-child td{border-bottom:none;}
.dtable .srv-name{color:var(--ink);font-weight:700;}
.dtable .port{font-family:var(--font-hud);font-size:12px;color:var(--cyber);background:rgba(39,184,255,.1);padding:3px 9px;border:1px solid rgba(39,184,255,.2);}
.days{font-family:var(--font-hud);font-weight:700;font-size:14px;}
.days.ok{color:var(--on);} .days.warn{color:var(--warn);} .days.crit{color:var(--red-bright);}

/* status pills (server statuses) */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;font-size:11.5px;font-weight:700;font-family:var(--font-hud);letter-spacing:.03em;border:1px solid;white-space:nowrap;}
.pill.active{color:var(--on);border-color:rgba(38,217,127,.3);background:rgba(38,217,127,.08);}
.pill.create{color:var(--cyber);border-color:rgba(39,184,255,.3);background:rgba(39,184,255,.08);}
.pill.pay{color:var(--warn);border-color:rgba(255,176,32,.3);background:rgba(255,176,32,.08);}
.pill.off{color:var(--dim);border-color:var(--line-strong);background:rgba(255,255,255,.03);}
.pill.exp{color:var(--red-bright);border-color:rgba(255,31,45,.3);background:rgba(255,31,45,.08);}

/* row action buttons */
.act{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line-strong);background:rgba(255,255,255,.02);transition:.2s;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));}
.act:hover{color:var(--ink);border-color:var(--red);background:rgba(255,31,45,.06);}
.act.pay{color:#fff;background:linear-gradient(120deg,#1fa564,#0c7d49);border-color:transparent;}
.act.renew{color:#1a1206;background:linear-gradient(120deg,var(--gold),#d98a08);border-color:transparent;}

/* ---- empty state ---- */
.empty-state{text-align:center;padding:60px 24px;}
.empty-state .ico{width:78px;height:78px;margin:0 auto 18px;display:grid;place-items:center;font-size:34px;color:var(--dim);
  border:1px solid var(--line-strong);background:rgba(255,255,255,.02);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));}
.empty-state h3{color:var(--muted);font-size:18px;margin:0 0 8px;}
.empty-state p{color:var(--dim);font-size:14px;margin:0 0 22px;}

/* ---- forms / fields ---- */
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.field .hint{font-size:12px;color:var(--dim);margin-top:7px;}
textarea.input{min-height:120px;resize:vertical;line-height:1.8;}
.input-icon{position:relative;}
.input-icon i{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:var(--dim);font-size:1.05em;pointer-events:none;}
.input-icon .input{padding-right:42px;}

/* selectable option cards (radios) */
.opt-grid{display:grid;gap:12px;}
.opt{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:.2s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));}
.opt:hover{border-color:rgba(255,31,45,.35);background:rgba(255,31,45,.04);}
.opt input{accent-color:var(--red);width:18px;height:18px;}
.opt.sel{border-color:var(--red);background:rgba(255,31,45,.07);box-shadow:0 0 0 1px var(--red) inset;}
.opt .t{color:var(--ink);font-weight:700;font-size:14.5px;}
.opt .d{color:var(--dim);font-size:12.5px;margin-top:2px;}
.opt .pr{margin-inline-start:auto;font-family:var(--font-hud);color:var(--red-bright);font-size:15px;white-space:nowrap;}

/* order summary */
.summary{padding:22px;}
.summary .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px;}
.summary .row:last-child{border-bottom:none;}
.summary .row .k{color:var(--muted);} .summary .row .v{color:var(--ink);font-weight:600;}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:8px;border-top:1px solid var(--line-strong);}
.summary .total .k{color:var(--ink);font-weight:700;font-size:15px;}
.summary .total .v{font-family:var(--font-hud);font-size:24px;color:var(--red-bright);}

/* ---- auth / centered card ---- */
.auth{min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;padding:50px 20px;position:relative;overflow:hidden;}
.auth .hero-grid-bg{position:absolute;inset:0;}
.auth-card{position:relative;z-index:1;width:100%;max-width:430px;padding:34px;}
.auth-card .logo-lg{width:58px;height:58px;margin:0 auto 18px;display:block;}
.auth-card h1{font-family:var(--font-display);font-size:30px;color:var(--ink);text-align:center;margin:0 0 6px;}
.auth-card .lead{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:26px;}
.auth-alt{text-align:center;font-size:13px;color:var(--dim);margin-top:20px;}
.auth-alt a{color:var(--red-bright);font-weight:600;}
.divider-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--dim);font-size:12px;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line);}
.btn--google{background:#fff;color:#1a1a1a;box-shadow:0 0 0 1px var(--line-strong) inset;}
.btn--google:hover{background:#f1f1f1;box-shadow:0 0 0 1px var(--line-strong) inset;filter:none;}

/* ---- OTP boxes ---- */
.otp{display:flex;gap:10px;justify-content:center;direction:ltr;margin:8px 0 6px;}
.otp input{width:52px;height:60px;text-align:center;font-family:var(--font-hud);font-size:24px;color:var(--ink);
  background:rgba(0,0,0,.35);border:1px solid var(--line-strong);transition:.2s;}
.otp input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(255,31,45,.14);}
.otp-timer{text-align:center;font-size:13px;color:var(--dim);margin-top:14px;}
.otp-timer b{color:var(--red-bright);font-family:var(--font-hud);}

/* ---- wizard steps ---- */
.steps{display:flex;align-items:center;gap:0;margin:0 auto 34px;max-width:560px;}
.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;}
.step .dot{width:38px;height:38px;display:grid;place-items:center;font-family:var(--font-hud);font-weight:700;font-size:14px;
  border:1px solid var(--line-strong);color:var(--dim);background:var(--bg-2);position:relative;z-index:1;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.step .lbl{font-size:12px;color:var(--dim);}
.step.done .dot,.step.cur .dot{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--red),var(--red-deep));box-shadow:0 0 16px -4px var(--red-glow);}
.step.cur .lbl,.step.done .lbl{color:var(--ink);}
.step:not(:last-child)::after{content:"";position:absolute;top:19px;right:-50%;width:100%;height:2px;background:var(--line-strong);z-index:0;}
.step.done:not(:last-child)::after{background:var(--red);}

/* notice / alert */
.notice{display:flex;gap:12px;padding:15px 17px;font-size:13.5px;line-height:1.8;border:1px solid;align-items:flex-start;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));}
.notice i{font-size:1.2em;margin-top:1px;}
.notice.info{color:var(--cyber);border-color:rgba(39,184,255,.25);background:rgba(39,184,255,.06);}
.notice.warn{color:var(--warn);border-color:rgba(255,176,32,.25);background:rgba(255,176,32,.06);}
.notice.ok{color:var(--on);border-color:rgba(38,217,127,.25);background:rgba(38,217,127,.06);}
.notice.err{color:var(--red-bright);border-color:rgba(255,31,45,.25);background:rgba(255,31,45,.06);}

/* key/value info list (detail pages) */
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.kv > div{background:var(--panel);padding:15px 18px;}
.kv .k{font-size:12px;color:var(--dim);margin-bottom:5px;}
.kv .v{color:var(--ink);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;}
.kv .v .mono{font-family:var(--font-hud);color:var(--cyber);}
.copy-btn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:1em;transition:.18s;}
.copy-btn:hover{color:var(--red-bright);}

@media(max-width:1024px){ .stats{grid-template-columns:repeat(2,1fr);} }
@media(max-width:680px){
  .stats{grid-template-columns:1fr;}
  .kv{grid-template-columns:1fr;}
  .steps{max-width:100%;}
  .step .lbl{font-size:10px;}
  .dtable thead{display:none;}
  .dtable tbody td{display:flex;justify-content:space-between;gap:14px;padding:10px 14px;border:none;}
  .dtable tbody td::before{content:attr(data-label);color:var(--dim);font-size:11px;font-family:var(--font-hud);text-transform:uppercase;}
  .dtable tbody tr{display:block;padding:8px 0;border-bottom:1px solid var(--line);margin-bottom:6px;}
}