/* GOLDEN WOLF — Cinematic V3
   Founder-approved visual layout: photographic blue-eyed wolf, neon skyline,
   integrated authentication, real MFA and a live executive workspace.
   Official gold wolf mark is retained as brand identity.
   No external font/CSS/CDN and no imitated auth providers.
*/
:root{--cinema:#01050d;--cyan:#04b3ff;--blue:#0778ed;--electric:#15ccff;--border-blue:#1c77b9;--glass:rgba(3,12,27,.94);--gold:#e4b66a}
body.is-auth{background:var(--cinema);overflow-x:hidden}
body.is-auth .top{display:none!important}
body.is-auth .auth-wrap{
 display:grid;grid-template-columns:minmax(0,1.56fr) minmax(345px,.92fr);
 gap:clamp(14px,1.8vw,38px);align-items:center;
 position:relative;isolation:isolate;min-height:100dvh;
 width:100%;max-width:none;margin:0;padding:30px clamp(24px,3vw,64px) 30px 0;
 background-color:#01050d;
 background-image:
  linear-gradient(90deg,rgba(0,3,10,0) 0%,rgba(1,5,15,.05) 23%,rgba(1,5,13,.74) 57%,#01050d 99%),
  url('/golden-wolf-cinematic-photo.webp'),
  url('/wolf-cityline.svg'),
  radial-gradient(ellipse at 44% 35%,rgba(0,91,209,.24),transparent 60%);
 background-position:center,left top,center bottom,center;
 background-size:cover,auto 100%,91% auto,cover;
 background-repeat:no-repeat;
 overflow:hidden;
}
body.is-auth .auth-wrap::before{
 display:block!important;content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
 background:
  linear-gradient(132deg,transparent 0%,transparent 25%,rgba(0,138,246,.16) 25.15%,transparent 25.8%,transparent 100%),
  radial-gradient(circle at 6% 58%,rgba(0,180,255,.2),transparent 23%);
 mask-image:none;
}
body.is-auth .auth-wrap::after{
 content:"BLACK GOLD HOLDING";position:absolute;top:18px;left:50%;transform:translateX(-50%);
 font-size:10px;letter-spacing:.5em;font-weight:800;color:#c2d9ef;
 white-space:nowrap;pointer-events:none;opacity:.82;z-index:2;
 border:0;width:auto;height:auto;box-shadow:none;background:none;
}
body.is-auth .hero{
 display:flex;flex-direction:column;align-items:stretch;justify-content:center;
 position:relative;overflow:visible;min-width:0;height:auto;min-height:min(820px,calc(100dvh - 60px));
 padding:60px 0 55px clamp(310px,27vw,470px);
 background:none!important;border:none;border-radius:0;box-shadow:none!important;
}
body.is-auth .hero::before,body.is-auth .hero::after{display:none!important}
body.is-auth .hero-wordmark{
 position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;
 margin:0 0 clamp(20px,3vw,39px);width:100%;max-width:630px;gap:8px;transform:none;
}
body.is-auth .hero-wordmark img{
 display:block;width:clamp(64px,7vw,90px);height:clamp(64px,7vw,90px);
 object-fit:cover;mix-blend-mode:screen;filter:drop-shadow(0 0 11px rgba(230,163,57,.26));
}
body.is-auth .hero-wordmark span{
 display:block;font-size:clamp(30px,3vw,49px);font-weight:850;
 line-height:1;letter-spacing:.055em;text-align:center;color:#f6fbff;white-space:nowrap;
 text-shadow:0 4px 16px #000;
}
body.is-auth .hero-wordmark b{color:#08bafa}
body.is-auth .hero-wordmark small{
 display:block;margin:9px auto 0;font-size:clamp(9px,.72vw,11px);
 color:#c9d9e8;letter-spacing:.36em;text-align:center;
}
body.is-auth .hero .eyebrow{
 color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.18em;
 text-align:center;max-width:650px;margin:0 0 9px;
}
body.is-auth .hero h1{
 font-size:clamp(29px,2.6vw,44px);font-weight:590;font-style:italic;
 letter-spacing:-.037em;line-height:1.19;color:#eff8ff;
 max-width:650px;text-align:center;text-wrap:balance;margin:0 auto 16px;
 text-shadow:0 3px 14px #000;
}
body.is-auth .hero h1 em{font-style:italic;color:#13b8ff;font-weight:740}
body.is-auth .hero>p:not(.notice){
 max-width:660px;margin:0 auto;color:#c1d8ed;
 font-size:clamp(13px,1.05vw,16px);text-align:center;line-height:1.5;
 text-shadow:0 2px 8px #000;
}
body.is-auth .hero-grid{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
 max-width:690px;width:100%;margin:33px auto 0;
 padding:12px 0;border:1px solid rgba(6,114,205,.57);
 border-radius:16px;background:rgba(0,8,21,.73);
 box-shadow:0 9px 27px rgba(0,0,0,.34),inset 0 1px rgba(116,199,255,.08);
}
body.is-auth .hero-grid div{
 min-width:0;min-height:103px;padding:11px 7px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 border:0;border-radius:0;background:none;box-shadow:none;
 text-align:center;font-size:10px;line-height:1.35;color:#a9c5dd;
}
body.is-auth .hero-grid div+div{border-left:1px solid rgba(64,144,208,.36)}
body.is-auth .hero-grid strong{font-size:13px;letter-spacing:.04em;color:#f8fcff;margin:4px 0 3px}
body.is-auth .hero-grid .feature-icon{display:block;height:29px;color:#16bfff}
body.is-auth .hero-grid .feature-icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.is-auth .hero-grid small{font-size:10px;line-height:1.4;color:#9cbad4}
body.is-auth .hero>.notice{display:none!important}
body.is-auth .auth-card{
 width:100%;max-width:560px;min-width:0;
 padding:clamp(22px,3vw,43px);
 border:1px solid rgba(20,190,255,.89);border-radius:20px;
 background:linear-gradient(160deg,rgba(5,17,34,.94),rgba(1,7,16,.98));
 box-shadow:0 0 0 1px rgba(2,129,255,.12),0 0 36px rgba(0,157,255,.23),
   0 20px 72px rgba(0,0,0,.55),inset 0 1px 0 rgba(174,227,255,.11);
 position:relative;align-self:center;justify-self:center;margin:0;overflow:hidden;
}
body.is-auth .auth-card::before{
 content:"";position:absolute;top:0;left:12%;width:76%;height:2px;
 background:linear-gradient(90deg,transparent,#19caff,transparent);box-shadow:0 0 14px #08aaff;
}
body.is-auth .auth-card .auth-kicker{color:#79d8ff;font-size:10px;letter-spacing:.17em}
body.is-auth .auth-card h2{
 font-size:clamp(26px,2.5vw,37px);margin:11px 0 4px;
 letter-spacing:-.043em;font-weight:800;color:#f6fbff;
}
body.is-auth .auth-card .auth-subtitle{font-size:13px;color:#bcd0e4;margin:0 0 25px}
body.is-auth .auth-card .tabs{
 padding:4px;margin-bottom:20px;border:1px solid #1a456c;border-radius:10px;
 background:#020814;
}
body.is-auth .auth-card .tabs .button{
 min-height:40px;font-size:13px;border-radius:8px;
}
body.is-auth .auth-card .tabs .button.active{
 border:1px solid #18b0fc;background:linear-gradient(115deg,#06519e,#0379d8);
 box-shadow:inset 0 1px rgba(184,241,255,.24),0 0 16px rgba(0,159,255,.25);
}
body.is-auth .auth-card label{font-size:12px;color:#c9ddec;font-weight:750}
body.is-auth .auth-card .stack{gap:12px}
body.is-auth .auth-card .field-wrap{position:relative}
body.is-auth .auth-card .field-icon{
 position:absolute;left:13px;top:50%;transform:translateY(-50%);
 display:flex;align-items:center;justify-content:center;pointer-events:none;
 color:#6e9fc2;
}
body.is-auth .auth-card .field-icon svg{height:18px;width:18px;stroke-width:1.9}
body.is-auth .auth-card .field-wrap input{
 width:100%;min-height:48px;padding:12px 44px 12px 42px;
 background:linear-gradient(120deg,rgba(4,13,27,.97),rgba(8,19,36,.97));
 border:1px solid #285678;border-radius:9px;color:#f9fdff;
 box-shadow:inset 0 1px 5px #000;
}
body.is-auth .auth-card .field-wrap input:focus{
 border-color:#46c5ff;outline:0;box-shadow:0 0 0 2px rgba(0,145,245,.18);
}
body.is-auth .auth-card .field-wrap input::placeholder{color:#7897b4}
body.is-auth .auth-card .password-toggle{
 position:absolute;right:6px;top:50%;transform:translateY(-50%);
 display:grid;place-items:center;
 width:37px;height:37px;border-radius:7px;color:#a2bdd7;
}
body.is-auth .auth-card .password-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
body.is-auth .auth-card .auth-tools{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:1px 0 0}
body.is-auth .auth-card .auth-secure{font-size:11px;color:#a1bbd3}
body.is-auth .auth-card .auth-secure::before{border-color:#12baff;box-shadow:0 0 10px #19aaff}
body.is-auth .auth-card .text-link{font-size:11px;color:#33bfff;white-space:nowrap}
body.is-auth .auth-card #auth-submit{
 display:block;width:100%;min-height:48px;margin-top:5px;
 border:1px solid #38caff;border-radius:10px;
 background:linear-gradient(180deg,#33c7ff,#0488f8 47%,#0560cb 100%);
 box-shadow:0 0 23px rgba(0,145,255,.3),inset 0 1px rgba(255,255,255,.47);
 color:#031024;text-shadow:none;font-size:16px;font-weight:860;
}
body.is-auth .auth-card .auth-footnote{
 display:flex;align-items:center;gap:9px;margin:19px 0 0;
 padding:11px 9px;border:1px solid rgba(23,99,151,.4);
 background:rgba(4,22,40,.72);border-radius:10px;color:#a9c5df;font-size:11px;line-height:1.42;
}
body.is-auth .auth-card .auth-footnote svg{width:19px;height:19px;stroke:#19c4ff}
body.is-auth .auth-card .ecosystem-link{font-size:12px;color:#72d0f9;margin:6px 0 0}
body.is-auth .auth-card .auth-footnote span{display:block}
body.is-auth .auth-card input[type=checkbox]{min-height:0}
body.is-auth .auth-card #register-details[hidden]{display:none!important}
body.is-auth .footer{display:none}
.top .brand b{color:#18b9fc!important}
.top .brand img{
 width:45px;height:45px;object-fit:cover;mix-blend-mode:screen;filter:none;
}
.sidebar::before{
 width:70px;height:70px;background:url('/golden-wolf-official.webp') center/contain no-repeat!important;
 filter:none!important;
}
.sidebar{background:linear-gradient(160deg,#061b32,#010711 86%);border-right:1px solid #176fac}
.sidebar .navitem{display:flex;align-items:center;gap:10px;min-height:45px;margin:5px 0;font-weight:700}
.sidebar .navitem svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.75;flex:none}
.sidebar .navitem.active{
 background:linear-gradient(90deg,#0569c9,#06417f);
 border:1px solid #07a8fb;box-shadow:inset 2px 0 #27ceff,0 0 18px rgba(0,139,255,.18);
}
.workspace-head h1{color:#f9fdff;letter-spacing:-.04em}
.workspace-head .eyebrow{color:#48c9ff}
.command-hero{
 min-height:190px;border-radius:17px;border:1px solid #1877bd;
 background:
 linear-gradient(95deg,#020a18 0%,rgba(2,13,29,.91) 34%,rgba(2,13,29,.3) 83%),
 url('/wolf-cityline.svg') right bottom/92% auto no-repeat,
 linear-gradient(110deg,#06172c,#083565 78%,#031326)!important;
 box-shadow:0 15px 34px rgba(0,0,0,.35),0 0 22px rgba(0,118,236,.16);
}
.command-hero .eyebrow{color:#2fc8ff!important}
.command-hero h2{color:#f5fbff;font-size:clamp(23px,2.5vw,35px);font-weight:750}
.command-hero p{color:#b8cce0}
.command-hero .ecosystem-access a{border-color:#1c6ba8;background:rgba(3,25,47,.83);color:#d2edff}
.command-hero .ecosystem-access a:hover{background:#0757a4}
.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.metric{
 border:1px solid #17699e;
 background:linear-gradient(145deg,rgba(4,25,45,.95),rgba(1,10,22,.98));
 box-shadow:0 10px 23px rgba(0,0,0,.3),inset 0 1px rgba(103,221,255,.08);
}
.metric::before{background:linear-gradient(90deg,#00baff,transparent)}
.metric span{color:#afc9dd}.metric strong{color:#f8fdff}
.card{border-color:#1a588e;box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 26px rgba(0,0,0,.25)}
/* MFA is genuinely wired to TOTP; align the existing dialog with the approved shield screen. */
dialog.security-dialog{
 background:linear-gradient(154deg,#071a32,#010916);
 border:1px solid #20b7ff;box-shadow:0 0 52px rgba(0,136,245,.26),0 24px 80px #000;
}
.dialog-header h2{font-weight:800;color:white}
.dialog-icon{width:85px;height:93px;margin:8px auto 22px;background:url('/wolf-shield.svg') center/contain no-repeat!important;filter:drop-shadow(0 0 15px #008fff)!important}
.dialog-content{text-align:center}
.dialog-content p{color:#bfd6e9}
.dialog-content label{display:block;margin:0 0 9px;text-align:left}
.dialog-content #secure-input{
 min-height:53px;border:1px solid #3073ab;border-radius:9px;background:#020e1e;
 color:#f7fbff;letter-spacing:.29em;text-align:center;font-size:24px;font-variant-numeric:tabular-nums;
}
.dialog-content #secure-input[type=email],.dialog-content #secure-input[type=password]{
 font-size:16px;letter-spacing:normal;text-align:left;
}
.dialog-content #secure-submit{color:#06112a;background:linear-gradient(180deg,#24bdff,#0579df);font-weight:800}
.dialog-content .mini-help{font-size:11px;color:#8eacc9}
/* Tablet stays a single experience, not disjoint large image cards. */
@media(min-width:851px) and (max-width:1250px){
 body.is-auth .auth-wrap{
   grid-template-columns:minmax(0,1.13fr) minmax(345px,.97fr);
   padding-right:18px;gap:14px;
   background-size:cover,auto 95%,100% auto,cover;
 }
 body.is-auth .hero{padding-left:clamp(215px,20vw,320px);min-height:670px}
 body.is-auth .hero-wordmark span{font-size:clamp(27px,2.6vw,34px)}
 body.is-auth .hero h1{font-size:29px}
 body.is-auth .hero-grid div{padding:10px 4px}
 body.is-auth .hero-grid strong{font-size:11px}
 body.is-auth .hero-grid small{font-size:9px}
 body.is-auth .auth-card{padding:25px}
}
/* Phone reference: wolf photograph + brand + immediately interactive login. */
@media(max-width:850px){
 body.is-auth .auth-wrap{
   display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
   width:100%;max-width:none;min-height:100dvh;gap:0;
   padding:0 12px max(22px,env(safe-area-inset-bottom));
   background:linear-gradient(180deg,#01050b 0%,#031026 48%,#01050b 100%);
   overflow:visible;
 }
 body.is-auth .auth-wrap::before,body.is-auth .auth-wrap::after{display:none!important}
 body.is-auth .hero{
   width:calc(100% + 24px);margin:0 -12px;flex:none;height:244px;min-height:244px;
   padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
   position:relative;
   /* Full-bleed wolf: photo scales to the complete phone width, never to a fixed pixel height. */
   background:
     linear-gradient(180deg,rgba(0,6,16,.02) 0%,rgba(0,6,16,.06) 30%,rgba(0,7,20,.30) 61%,#020915 100%),
     url('/golden-wolf-cinematic-photo.webp') center top -26px / 100% auto no-repeat,
     radial-gradient(ellipse at 70% 25%,rgba(0,99,243,.32),transparent 69%),#01050d!important;
   border:0;box-shadow:none!important;overflow:hidden;
 }
 body.is-auth .hero::before,body.is-auth .hero::after{display:none!important}
 body.is-auth .hero-wordmark{
   position:relative;top:auto;left:auto;bottom:auto;margin:0 auto 18px;
   display:flex;flex-direction:column;align-items:center;justify-content:center;
   width:100%;gap:2px;transform:none;z-index:1;
 }
 body.is-auth .hero-wordmark img{
   width:47px;height:47px;object-fit:cover;mix-blend-mode:screen;filter:drop-shadow(0 0 8px rgba(218,162,62,.36));
 }
 body.is-auth .hero-wordmark span{
   font-size:clamp(24px,6.6vw,30px);font-weight:830;letter-spacing:.075em;
   line-height:1.08;text-align:center;color:#f9fbff;text-shadow:0 3px 20px #000,0 0 10px #000;
   white-space:nowrap;
 }
 body.is-auth .hero-wordmark small{
   font-size:8px;letter-spacing:.2em;margin:6px 0 0;white-space:nowrap;color:#d3e0f0;
 }
 body.is-auth .hero .eyebrow,body.is-auth .hero h1,body.is-auth .hero>p,body.is-auth .hero-grid{display:none!important}
 body.is-auth .auth-card{
   margin:-11px auto 0;flex:none;align-self:center;width:100%;max-width:520px;
   min-width:0;padding:20px 17px 17px;border:1px solid #1ebafa;border-radius:18px;
   background:linear-gradient(152deg,rgba(5,19,40,.98),rgba(1,7,18,.99));
   box-shadow:0 0 25px rgba(0,145,255,.2),0 17px 52px rgba(0,0,0,.46);
   z-index:2;
 }
 body.is-auth .auth-card h2{font-size:27px;margin:8px 0 5px}
 body.is-auth .auth-card .auth-kicker{font-size:9px;letter-spacing:.17em}
 body.is-auth .auth-card .auth-subtitle{font-size:12px;margin:0 0 15px}
 body.is-auth .auth-card .tabs{margin-bottom:14px}
 body.is-auth .auth-card .tabs .button{min-height:39px}
 body.is-auth .auth-card .stack{gap:11px}
 body.is-auth .auth-card .field-wrap input{min-height:44px}
 body.is-auth .auth-card #auth-submit{min-height:47px;font-size:15px;margin:1px 0 0}
 body.is-auth .auth-card .auth-tools{margin:0}
 body.is-auth .auth-card .auth-secure,body.is-auth .auth-card .text-link{font-size:10px}
 body.is-auth .auth-card .auth-footnote{
   font-size:10px;padding:9px;margin:13px 0 0;
 }
 body.is-auth .auth-card .ecosystem-link{font-size:11px;padding:6px 0}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .command-hero{min-height:185px;background-size:cover,150% auto,cover!important}
 .sidebar .navitem svg{width:15px;height:15px}
 .sidebar .navitem{font-size:12px;gap:6px}
 .sidebar::before{display:none!important}
 .top .brand img{width:34px;height:34px}
 dialog.security-dialog{width:min(470px,calc(100vw - 24px))}
}
@media(max-width:385px){
 body.is-auth .hero{height:235px;min-height:235px;background-size:100% 100%,100% auto,cover!important;background-position:center,center top -24px,center!important}
 body.is-auth .hero-wordmark{margin-bottom:12px}
 body.is-auth .hero-wordmark img{width:40px;height:40px}
 body.is-auth .hero-wordmark span{font-size:23px}
 body.is-auth .auth-card{padding:17px 13px 15px}
 body.is-auth .auth-card h2{font-size:24px}
 body.is-auth .auth-card .tabs{margin-bottom:11px}
 body.is-auth .auth-card .tabs .button{min-height:37px}
 body.is-auth .auth-card .auth-footnote{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important}
 body.is-auth .auth-card,body.is-auth .auth-card *{transition:none!important}
}