/* Optical Flow: approved wide/mobile v3, production login. */
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Medium.woff2') format('woff2');font-style:normal;font-weight:500 700;font-display:swap}
html,body{margin:0;min-height:100%;background:#0b0e1b}

#olt-optical{--olt-bg:#0b0e1b;--olt-text:#eff1ff;--olt-muted:#9da8c2;--olt-accent:#ab95ff;--olt-fiber:#7970b7;--olt-light:#6ee7ed;color:var(--olt-text);background:var(--olt-bg);font-family:Inter,Segoe UI,sans-serif;border-radius:18px;overflow:hidden;position:relative;color-scheme:dark}
#olt-optical *{box-sizing:border-box}
#olt-optical .olt-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 73% 44%,#34235366,transparent 59%),radial-gradient(ellipse at 12% 0%,#262c584d,transparent 44%)}
#olt-optical .olt-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:28px 34px;border-bottom:1px solid #c4c9ff0b}
#olt-optical .olt-brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:600;letter-spacing:-.5px}
#olt-optical .olt-brand i{color:var(--olt-accent)}
#olt-optical .olt-brand b{color:var(--olt-accent);font-weight:500}
#olt-optical .olt-overline{font-family:ui-monospace,Consolas,monospace;letter-spacing:1.6px;font-size:11px;color:var(--olt-muted)}
#olt-optical .olt-main{position:relative;display:grid;grid-template-columns:minmax(270px,36%) minmax(0,1fr);gap:14px;padding:26px 28px 18px 40px;align-items:center}
#olt-optical .olt-login{padding:24px 14px 30px 0}
#olt-optical .olt-eyebrow{display:flex;align-items:center;gap:8px;color:var(--olt-accent);font-size:11px;letter-spacing:2px;margin-bottom:18px}
#olt-optical .olt-dot{width:5px;height:5px;background:var(--olt-light);border-radius:50%;box-shadow:0 0 14px var(--olt-light)}
#olt-optical h1{font-size:35px;line-height:1.16;font-weight:500;letter-spacing:-1.6px;margin:0 0 14px;color:var(--olt-text)}
#olt-optical .olt-subtitle{font-size:14px;line-height:1.6;color:var(--olt-muted);margin:0 0 30px;max-width:270px}
#olt-optical .olt-field{display:block;font-size:12px;color:#c8cfe0;margin-bottom:17px}
#olt-optical .olt-field input{display:block;width:100%;height:46px;background:#131727;border:1px solid #aebcf125;border-radius:8px;padding:0 13px;font:14px Inter,Segoe UI,sans-serif;color:var(--olt-text);margin-top:8px;transition:border-color .2s,box-shadow .2s}
#olt-optical .olt-field input::placeholder{color:#78839e}
#olt-optical .olt-field input:focus{border-color:var(--olt-accent);box-shadow:0 0 0 3px #ab95ff15}
#olt-optical .olt-password{position:relative}
#olt-optical .olt-password input{padding-right:45px}
#olt-optical .olt-eye{position:absolute;right:4px;top:3px;width:40px;height:40px;border:0;background:transparent;color:var(--olt-muted);display:grid;place-items:center;cursor:pointer}
#olt-optical .olt-options{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 25px;font-size:11px;color:var(--olt-muted)}
#olt-optical .olt-options label{display:flex;align-items:center;gap:7px}
#olt-optical input[type=checkbox]{accent-color:var(--olt-accent);margin:0;width:14px;height:14px}
#olt-optical .olt-link{padding:0;border:0;background:none;color:#c5b7ff;font:inherit;cursor:pointer}
#olt-optical .olt-enter{height:46px;width:100%;padding:0 15px;border-radius:8px;border:1px solid #c6b8ff66;color:#101222;background:linear-gradient(110deg,#c5b5ff,#a996f4);display:flex;align-items:center;justify-content:space-between;font:500 14px Inter,Segoe UI,sans-serif;cursor:pointer;box-shadow:0 7px 28px #9876ff20;transition:filter .2s,transform .2s}
#olt-optical .olt-enter:hover{filter:brightness(1.1);transform:translateY(-1px)}
#olt-optical .olt-note{font-size:11px;line-height:1.6;color:var(--olt-muted);margin-top:17px;min-height:18px}
#olt-optical .olt-scene{min-width:0;position:relative}
#olt-optical .olt-scene-head{padding:0 8px;display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--olt-muted);font-size:11px;letter-spacing:1px}
#olt-optical .olt-scene svg{display:block;width:100%;height:514px;overflow:visible}
#olt-optical .olt-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 34px;padding:18px 0 24px;border-top:1px solid #c4c9ff13;font-size:11px;color:var(--olt-muted)}
#olt-optical .olt-footer button{border:1px solid #aebcf125;background:#131727;color:#c8cfe0;border-radius:6px;padding:7px 10px;font:inherit;cursor:pointer}
#olt-optical .olt-fiber{fill:none;stroke:var(--olt-fiber);stroke-width:1;opacity:.45}
#olt-optical .olt-trunk{fill:none;stroke:var(--olt-accent);stroke-width:1.3;opacity:.62}
#olt-optical .olt-node-label{fill:#bbc4dc;font-family:ui-monospace,Consolas,monospace;font-size:11px}
#olt-optical .olt-pulse{fill:var(--olt-light);filter:url(#olt-light-glow)}
#olt-optical .olt-led{fill:var(--olt-light)}
#olt-optical .olt-grid{opacity:.24}
@media(max-width:730px){#olt-optical .olt-main{grid-template-columns:1fr;padding:18px 24px;gap:16px}#olt-optical .olt-login{max-width:380px;width:100%;justify-self:center;padding:20px 0 0}#olt-optical .olt-header{padding:22px 24px}#olt-optical .olt-header>.olt-overline{display:none}#olt-optical .olt-scene{width:100%;max-width:540px;justify-self:center}#olt-optical h1{font-size:32px}#olt-optical .olt-footer{margin:0 24px}#olt-optical .olt-subtitle{max-width:none}}
@media(prefers-reduced-motion:reduce){#olt-optical .olt-pulse{display:none}#olt-optical *{transition:none!important}}
#olt-optical{max-width:1600px;margin-inline:auto}
#olt-optical .olt-main{grid-template-columns:minmax(280px,35%) minmax(0,1fr);gap:24px;padding-block:38px}
#olt-optical .olt-login{max-width:360px;width:100%;justify-self:center}
@media(max-width:730px){#olt-optical .olt-main{grid-template-columns:1fr;padding-block:18px}}

#olt-optical{max-width:none;aspect-ratio:16/9;display:grid;grid-template-rows:50px minmax(0,1fr) 44px;border-radius:12px}
#olt-optical .olt-header{padding:12px 30px}
#olt-optical .olt-main{padding:0 30px;gap:34px;grid-template-columns:31% minmax(0,1fr);min-height:0;align-items:center}
#olt-optical .olt-login{padding:0;max-width:340px}
#olt-optical .olt-eyebrow{margin-bottom:8px;letter-spacing:1px}
#olt-optical h1{font-size:28px;line-height:1.14;letter-spacing:-1px;margin-bottom:10px}
#olt-optical .olt-subtitle{font-size:12px;line-height:1.4;margin-bottom:16px;max-width:none}
#olt-optical .olt-field{font-size:11px;margin-bottom:12px}
#olt-optical .olt-field input{height:38px;margin-top:6px;font-size:13px}
#olt-optical .olt-eye{height:34px;width:36px;top:2px}
#olt-optical .olt-options{margin-bottom:14px;font-size:11px}
#olt-optical .olt-enter{height:40px}
#olt-optical .olt-note{font-size:11px;margin-top:10px;min-height:14px}
#olt-optical .olt-scene{height:100%;min-height:0;padding:12px 0}
#olt-optical .olt-scene-head{height:20px}
#olt-optical .olt-scene svg{height:calc(100% - 20px);min-height:0}
#olt-optical .olt-footer{margin:0 30px;padding:8px 0;font-size:11px}
@media(min-width:1400px){#olt-optical .olt-main{padding-inline:6%;gap:5%}#olt-optical h1{font-size:38px}#olt-optical .olt-field input{height:48px;font-size:16px}#olt-optical .olt-subtitle{font-size:14px}#olt-optical .olt-field{font-size:13px}#olt-optical .olt-enter{height:48px}}
@media(max-width:1000px){#olt-optical{aspect-ratio:auto;display:block}#olt-optical .olt-main{padding-block:22px;grid-template-columns:minmax(260px,34%) minmax(0,1fr);gap:18px}#olt-optical .olt-scene{height:460px}}
@media(max-width:730px){#olt-optical .olt-main{grid-template-columns:1fr}#olt-optical .olt-scene{height:440px}}


#olt-optical[data-layout="desktop"]{width:100%;max-width:none;aspect-ratio:16/9;display:grid;grid-template-rows:50px minmax(0,1fr) 44px}
#olt-optical[data-layout="desktop"] .olt-main{grid-template-columns:31% minmax(0,1fr);padding:0 30px;gap:34px}
#olt-optical[data-layout="desktop"] .olt-scene{width:92%;height:92%;max-height:540px;justify-self:center;align-self:center;padding:12px 0}
#olt-optical[data-layout="desktop"] .olt-scene svg{height:calc(100% - 20px)}
#olt-optical[data-layout="phone"]{width:100%;max-width:390px;display:block;aspect-ratio:auto;margin-inline:auto}
#olt-optical[data-layout="phone"] .olt-main{display:flex;flex-direction:column;padding:18px;gap:18px}
#olt-optical[data-layout="phone"] .olt-login{width:100%;max-width:354px}
#olt-optical[data-layout="phone"] .olt-scene{width:100%;height:384px;padding:0}
#olt-optical[data-layout="phone"] .olt-header>.olt-overline{display:none}
#olt-optical[data-layout="phone"] .olt-field input{height:46px;font-size:16px}

#olt-optical[data-layout="desktop"]{min-height:100svh;aspect-ratio:auto;grid-template-rows:64px minmax(500px,1fr)64px;border-radius:0}
#olt-optical .olt-icon{width:22px;height:22px;flex:none}
#olt-optical .olt-brand .olt-icon{color:var(--olt-accent)}
#olt-optical :focus-visible{outline:2px solid var(--olt-light);outline-offset:4px}
#olt-optical .olt-enter:disabled{cursor:wait;opacity:.7;transform:none}
#olt-optical .olt-error,#olt-optical .olt-notice{padding:12px;border:1px solid #bc819d66;border-radius:8px;margin:0 0 16px;font-size:12px;line-height:1.5;color:#ffd2df;background:#3b2033}
#olt-optical .olt-notice{color:#cce9ff;background:#172b3c;border-color:#6a9dbb66}
#olt-optical .olt-sso{display:block;text-align:center;margin-top:18px;font-size:12px}
#olt-optical .olt-help{color:var(--olt-muted);font-size:11px;line-height:1.5;margin:14px 0 0}
#olt-optical .olt-help summary{cursor:pointer;color:#c5b7ff}
#olt-optical .olt-help p{margin:8px 0 0}
@media(max-width:899px){

#olt-optical[data-layout="phone"]{--olt-bg:#0b0e1b;--olt-text:#eff1ff;--olt-muted:#9da8c2;--olt-accent:#ab95ff;--olt-fiber:#7970b7;--olt-light:#6ee7ed;color:var(--olt-text);background:var(--olt-bg);font-family:Inter,Segoe UI,sans-serif;border-radius:18px;overflow:hidden;position:relative;color-scheme:dark}
#olt-optical[data-layout="phone"] *{box-sizing:border-box}
#olt-optical[data-layout="phone"] .olt-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 73% 44%,#34235366,transparent 59%),radial-gradient(ellipse at 12% 0%,#262c584d,transparent 44%)}
#olt-optical[data-layout="phone"] .olt-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:28px 34px;border-bottom:1px solid #c4c9ff0b}
#olt-optical[data-layout="phone"] .olt-brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:600;letter-spacing:-.5px}
#olt-optical[data-layout="phone"] .olt-brand i{color:var(--olt-accent)}
#olt-optical[data-layout="phone"] .olt-brand b{color:var(--olt-accent);font-weight:500}
#olt-optical[data-layout="phone"] .olt-overline{font-family:ui-monospace,Consolas,monospace;letter-spacing:1.6px;font-size:11px;color:var(--olt-muted)}
#olt-optical[data-layout="phone"] .olt-main{position:relative;display:grid;grid-template-columns:minmax(270px,36%) minmax(0,1fr);gap:14px;padding:26px 28px 18px 40px;align-items:center}
#olt-optical[data-layout="phone"] .olt-login{padding:24px 14px 30px 0}
#olt-optical[data-layout="phone"] .olt-eyebrow{display:flex;align-items:center;gap:8px;color:var(--olt-accent);font-size:11px;letter-spacing:2px;margin-bottom:18px}
#olt-optical[data-layout="phone"] .olt-dot{width:5px;height:5px;background:var(--olt-light);border-radius:50%;box-shadow:0 0 14px var(--olt-light)}
#olt-optical[data-layout="phone"] h1{font-size:35px;line-height:1.16;font-weight:500;letter-spacing:-1.6px;margin:0 0 14px;color:var(--olt-text)}
#olt-optical[data-layout="phone"] .olt-subtitle{font-size:14px;line-height:1.6;color:var(--olt-muted);margin:0 0 30px;max-width:270px}
#olt-optical[data-layout="phone"] .olt-field{display:block;font-size:12px;color:#c8cfe0;margin-bottom:17px}
#olt-optical[data-layout="phone"] .olt-field input{display:block;width:100%;height:46px;background:#131727;border:1px solid #aebcf125;border-radius:8px;padding:0 13px;font:14px Inter,Segoe UI,sans-serif;color:var(--olt-text);margin-top:8px;transition:border-color .2s,box-shadow .2s}
#olt-optical[data-layout="phone"] .olt-field input::placeholder{color:#78839e}
#olt-optical[data-layout="phone"] .olt-field input:focus{border-color:var(--olt-accent);box-shadow:0 0 0 3px #ab95ff15}
#olt-optical[data-layout="phone"] .olt-password{position:relative}
#olt-optical[data-layout="phone"] .olt-password input{padding-right:45px}
#olt-optical[data-layout="phone"] .olt-eye{position:absolute;right:4px;top:3px;width:40px;height:40px;border:0;background:transparent;color:var(--olt-muted);display:grid;place-items:center;cursor:pointer}
#olt-optical[data-layout="phone"] .olt-options{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 25px;font-size:11px;color:var(--olt-muted)}
#olt-optical[data-layout="phone"] .olt-options label{display:flex;align-items:center;gap:7px}
#olt-optical[data-layout="phone"] input[type=checkbox]{accent-color:var(--olt-accent);margin:0;width:14px;height:14px}
#olt-optical[data-layout="phone"] .olt-link{padding:0;border:0;background:none;color:#c5b7ff;font:inherit;cursor:pointer}
#olt-optical[data-layout="phone"] .olt-enter{height:46px;width:100%;padding:0 15px;border-radius:8px;border:1px solid #c6b8ff66;color:#101222;background:linear-gradient(110deg,#c5b5ff,#a996f4);display:flex;align-items:center;justify-content:space-between;font:500 14px Inter,Segoe UI,sans-serif;cursor:pointer;box-shadow:0 7px 28px #9876ff20;transition:filter .2s,transform .2s}
#olt-optical[data-layout="phone"] .olt-enter:hover{filter:brightness(1.1);transform:translateY(-1px)}
#olt-optical[data-layout="phone"] .olt-note{font-size:11px;line-height:1.6;color:var(--olt-muted);margin-top:17px;min-height:18px}
#olt-optical[data-layout="phone"] .olt-scene{min-width:0;position:relative}
#olt-optical[data-layout="phone"] .olt-scene-head{padding:0 8px;display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--olt-muted);font-size:11px;letter-spacing:1px}
#olt-optical[data-layout="phone"] .olt-scene svg{display:block;width:100%;height:514px;overflow:visible}
#olt-optical[data-layout="phone"] .olt-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 34px;padding:18px 0 24px;border-top:1px solid #c4c9ff13;font-size:11px;color:var(--olt-muted)}
#olt-optical[data-layout="phone"] .olt-footer button{border:1px solid #aebcf125;background:#131727;color:#c8cfe0;border-radius:6px;padding:7px 10px;font:inherit;cursor:pointer}
#olt-optical[data-layout="phone"] .olt-fiber{fill:none;stroke:var(--olt-fiber);stroke-width:1;opacity:.45}
#olt-optical[data-layout="phone"] .olt-trunk{fill:none;stroke:var(--olt-accent);stroke-width:1.3;opacity:.62}
#olt-optical[data-layout="phone"] .olt-node-label{fill:#bbc4dc;font-family:ui-monospace,Consolas,monospace;font-size:11px}
#olt-optical[data-layout="phone"] .olt-pulse{fill:var(--olt-light);filter:url(#olt-light-glow)}
#olt-optical[data-layout="phone"] .olt-led{fill:var(--olt-light)}
#olt-optical[data-layout="phone"] .olt-grid{opacity:.24}
@media(max-width:730px){#olt-optical[data-layout="phone"] .olt-main{grid-template-columns:1fr;padding:18px 24px;gap:16px}#olt-optical[data-layout="phone"] .olt-login{max-width:380px;width:100%;justify-self:center;padding:20px 0 0}#olt-optical[data-layout="phone"] .olt-header{padding:22px 24px}#olt-optical[data-layout="phone"] .olt-header>.olt-overline{display:none}#olt-optical[data-layout="phone"] .olt-scene{width:100%;max-width:540px;justify-self:center}#olt-optical[data-layout="phone"] h1{font-size:32px}#olt-optical[data-layout="phone"] .olt-footer{margin:0 24px}#olt-optical[data-layout="phone"] .olt-subtitle{max-width:none}}
@media(prefers-reduced-motion:reduce){#olt-optical[data-layout="phone"] .olt-pulse{display:none}#olt-optical[data-layout="phone"] *{transition:none!important}}

#olt-optical[data-layout="phone"]{max-width:390px;margin-inline:auto;border-radius:24px}
#olt-optical[data-layout="phone"] .olt-header{padding:22px 24px 16px;border:0}
#olt-optical[data-layout="phone"] .olt-header>.olt-overline{display:none}
#olt-optical[data-layout="phone"] .olt-brand{font-size:20px}
#olt-optical[data-layout="phone"] .olt-main{display:flex;flex-direction:column;padding:0 24px;gap:0}
#olt-optical[data-layout="phone"] .olt-scene{width:100%;max-width:none}
#olt-optical[data-layout="phone"] .olt-scene-head{display:none}
#olt-optical[data-layout="phone"] .olt-scene svg{height:204px}
#olt-optical[data-layout="phone"] .olt-login{padding:9px 0 0;width:100%;max-width:none}
#olt-optical[data-layout="phone"] .olt-eyebrow{font-size:11px;letter-spacing:1.2px;margin-bottom:12px}
#olt-optical[data-layout="phone"] h1{font-size:29px;letter-spacing:-1px;line-height:1.15;margin-bottom:10px}
#olt-optical[data-layout="phone"] .olt-subtitle{font-size:13px;line-height:1.5;margin-bottom:21px}
#olt-optical[data-layout="phone"] .olt-subtitle br{display:none}
#olt-optical[data-layout="phone"] .olt-field{margin-bottom:15px}
#olt-optical[data-layout="phone"] .olt-field input{height:48px;font-size:16px}
#olt-optical[data-layout="phone"] .olt-eye{width:44px;height:44px;top:2px}
#olt-optical[data-layout="phone"] .olt-options{margin-bottom:16px;font-size:12px;gap:5px}
#olt-optical[data-layout="phone"] .olt-options label,#olt-optical[data-layout="phone"] .olt-options button{min-height:44px}
#olt-optical[data-layout="phone"] .olt-options input{width:16px;height:16px}
#olt-optical[data-layout="phone"] .olt-enter{height:49px;font-size:14px}
#olt-optical[data-layout="phone"] .olt-note{margin:12px 0 17px;font-size:11px}
#olt-optical[data-layout="phone"] .olt-footer{margin:0 24px;padding:14px 0 19px;gap:6px}
#olt-optical[data-layout="phone"] .olt-footer>span{max-width:176px;font-size:11px;line-height:1.5}
#olt-optical[data-layout="phone"] .olt-footer button{min-height:44px}


#olt-optical[data-layout="phone"] .olt-scene svg{height:390px}
#olt-optical[data-layout="phone"] .olt-scene-head{display:flex;min-height:24px;font-size:11px;padding:0}
#olt-optical[data-layout="phone"] .olt-scene-head .olt-overline{letter-spacing:.8px}
#olt-optical[data-layout="phone"] .olt-scene-head>span:last-child{font-size:11px;letter-spacing:0}
#olt-optical[data-layout="phone"] .olt-main{padding-inline:18px}
#olt-optical[data-layout="phone"] .olt-login{padding:16px 6px 0}
#olt-optical[data-layout="phone"] .olt-header{padding-bottom:20px}

#olt-optical[data-layout="phone"]{display:block;width:100%;max-width:390px!important;min-width:0;margin:0 auto;flex:none;aspect-ratio:auto}
#olt-optical[data-layout="phone"] .olt-main{display:flex;flex-direction:column;align-items:stretch;padding:0 18px;gap:0}
#olt-optical[data-layout="phone"] .olt-login{order:0;width:100%;max-width:none;padding:4px 6px 0}
#olt-optical[data-layout="phone"] .olt-scene{order:1;width:100%;min-width:0;max-width:354px;align-self:center;margin:8px 0 16px;padding-top:16px;border-top:1px solid #c4c9ff13}
#olt-optical[data-layout="phone"] .olt-scene svg{height:350px}
#olt-optical[data-layout="phone"] .olt-scene-head{font-size:11px}
#olt-optical[data-layout="phone"] .olt-footer{margin:0 24px}
#olt-optical[data-layout="phone"] .olt-subtitle{margin-bottom:18px}

#olt-optical[data-layout="phone"]{min-height:100svh;border-radius:0}
}

/* ECON15: scoped input focus, no external cyan halo. */
#olt-optical .olt-field input[type=email]:focus,
#olt-optical .olt-field input[type=password]:focus,
#olt-optical .olt-field input[type=text]:focus{
  border-color:var(--olt-accent);
  box-shadow:none;
  outline:2px solid var(--olt-accent);
  outline-offset:-3px;
}
#olt-optical[data-layout="phone"] .olt-field input[type=email]:focus,
#olt-optical[data-layout="phone"] .olt-field input[type=password]:focus,
#olt-optical[data-layout="phone"] .olt-field input[type=text]:focus{
  box-shadow:none;
  outline:2px solid var(--olt-accent);
  outline-offset:-3px;
}
@media(forced-colors:active){
  #olt-optical .olt-field input[type=email]:focus,
  #olt-optical .olt-field input[type=password]:focus,
  #olt-optical .olt-field input[type=text]:focus,
  #olt-optical[data-layout="phone"] .olt-field input[type=email]:focus,
  #olt-optical[data-layout="phone"] .olt-field input[type=password]:focus,
  #olt-optical[data-layout="phone"] .olt-field input[type=text]:focus{
    outline:2px solid CanvasText;
    outline-offset:-3px;
  }
}