/* Offshore visual identity. Original imagery; no corporate marks. */
:root { --bg:#f0f4f6; --text:#17303e; --muted:#516775; --brand:#087e8b; --brand-strong:#05606c; --line:#d8e2e7; --shadow:0 3px 8px #18313e08; }
.ocean-wordmark { color:#f7fbfc; display:flex; flex-direction:column; gap:7px; }
.ocean-wordmark strong { font-size:23px; font-weight:650; letter-spacing:2px; }
.ocean-wordmark strong span { color:#81d5dc; padding-left:5px; }
.ocean-wordmark small { font-size:11px; letter-spacing:2px; color:#afc7d2; }
.sidebar { background:#102d3b; }
.sidebar > .ocean-wordmark { padding:25px 24px 28px; }
.nav button { border-radius:7px; transition:background .18s ease, color .18s ease; }
.nav button.active { background:#1a4b5b; color:#effcfe; border-left-width:0; }
.topbar { background:#fff; border-bottom:1px solid var(--line); box-shadow:none; }
.card { box-shadow:none; border-color:var(--line); }
.primary-btn { background:var(--brand); box-shadow:none; }
button:focus-visible, a:focus-visible { outline:3px solid #219cac; outline-offset:3px; }
.ocean-dashboard { min-height:184px; margin-bottom:24px; padding:30px 36px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#fff; background:linear-gradient(90deg,#082735f2,#082735c9 43%,#08273525),url('./assets/offshore-dawn-20260913.png') center 57%/cover; }
.ocean-dashboard h2 { color:#fff; font-size:28px; font-weight:550; margin:12px 0; }
.ocean-dashboard p { color:#e0edf3; margin:0; font-size:14px; }
.ocean-dashboard > div > span { font-size:12px; color:#b4dce5; }
.ocean-dashboard .secondary-btn { background:#f5fbfc; color:#174551; border:0; white-space:nowrap; }
.login-page { isolation:isolate; position:relative; min-height:100svh!important; display:grid!important; grid-template-columns:minmax(420px,455px) minmax(0,1fr)!important; gap:clamp(34px,6vw,96px)!important; padding:116px clamp(34px,6vw,86px) 72px!important; align-items:center!important; overflow:hidden; color:#eef8fb; background:#07131b!important; }
.ocean-scene { position:absolute; inset:0; z-index:-3; background:url('./assets/offshore-dawn-20260913.png') 64% center/cover; transform:scale(1.035); animation:ocean-cinema-drift 28s ease-in-out infinite alternate; }
.ocean-scene::before { content:''; position:absolute; inset:-1px; background:radial-gradient(circle at 70% 40%,#77d6e436 0%,transparent 28%),linear-gradient(90deg,#051018f5 0%,#071622e8 33%,#0716228c 55%,#07162220 78%),linear-gradient(0deg,#050b11f0 0%,transparent 38%,#050b1166 100%); }
.ocean-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 0%,transparent 48%,#f2c46d17 49%,transparent 53%),repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 92px); mix-blend-mode:screen; opacity:.42; }
.login-page::before { content:''; position:absolute; left:clamp(34px,6vw,86px); top:50%; width:min(44vw,620px); height:72vh; z-index:-2; transform:translateY(-50%); background:linear-gradient(110deg,#092334d9,#09233463 65%,transparent); border-left:1px solid #8bd8e547; box-shadow:36px 0 90px #0209109c; }
.login-page::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#ffffff0f 0 1px,transparent 1px 100%); background-size:100% 7px; opacity:.14; }
.ocean-header { position:absolute; z-index:2; top:34px; left:clamp(34px,6vw,86px); right:clamp(34px,6vw,86px); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ocean-header .ocean-wordmark { color:#f7fbfc; }
.ocean-header .ocean-wordmark strong { letter-spacing:1px; }
.ocean-header .ocean-wordmark small { color:#a9c6d1; letter-spacing:1px; }
.ocean-header-note { position:relative; color:#d4e8ee; font-size:12px; letter-spacing:1px; }
.ocean-header-note::before { content:''; position:absolute; left:-56px; top:50%; width:38px; height:1px; background:#9ddfe96e; }
.ocean-intro { grid-column:2; grid-row:1; align-self:end; justify-self:start; max-width:670px; padding:0 0 46px; text-shadow:0 2px 26px #02080c; }
.ocean-kicker { width:max-content; margin:0 0 24px; padding:7px 12px; border:1px solid #b9eef747; border-radius:999px; color:#d6f2f7; background:#06223559; font-size:12px; letter-spacing:2px; backdrop-filter:blur(10px); }
.ocean-intro h1 { margin:0 0 24px; color:#fff; font-size:48px; line-height:1.28; font-weight:560; letter-spacing:0; text-wrap:balance; }
.ocean-intro > p:not(.ocean-kicker) { max-width:560px; margin:0; color:#dcebf0; font-size:15px; line-height:1.95; }
.ocean-topics { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; font-size:12px; color:#e7f6f8; }
.ocean-topics span { border:1px solid #d8f7fd31; border-radius:999px; padding:8px 12px; background:#061b2868; backdrop-filter:blur(10px); }
.ocean-topics span + span::before { content:''; margin:0; }
.login-page .login-panel-wrap { grid-column:1; grid-row:1; width:100%!important; max-width:405px; justify-self:start; align-self:center!important; margin:0; gap:14px!important; }
.login-page .login-panel { padding:31px!important; color:#eef8fb; border:1px solid #b7eefa2e; border-radius:8px!important; background:linear-gradient(180deg,#0b2637d6,#071a27c9)!important; box-shadow:0 26px 75px #02070cbf, inset 0 1px 0 #ffffff1d!important; backdrop-filter:blur(18px)!important; }
.ocean-form-heading > span { display:inline-block; color:#8edfe8; font-size:12px; letter-spacing:1px; margin-bottom:12px; }
.ocean-form-heading h2 { color:#fff; font-size:31px; line-height:1.25; font-weight:570; letter-spacing:0; margin:0 0 10px; }
.ocean-form-heading p { color:#aecad4; font-size:13px; margin:0 0 28px; }
.login-page .login-panel .field { margin-bottom:15px!important; }
.login-page .login-panel input { min-height:52px!important; border:1px solid #c9f3fb30!important; border-radius:7px!important; background:#f7fbfd0f!important; color:#f7fbfc!important; box-shadow:inset 0 1px 0 #ffffff12; }
.login-page .login-panel input::placeholder { color:#b2cbd4!important; }
.login-page .login-panel input:focus { border-color:#7ddfeb!important; box-shadow:0 0 0 3px #55d8e533!important; }
.login-page .login-panel .captcha { min-width:88px; min-height:52px; color:#06212d!important; border:0!important; border-radius:7px!important; background:#c9eef2!important; }
.login-page .login-panel .primary-btn { width:100%; min-height:54px!important; justify-content:center; gap:14px; margin-top:8px!important; color:#06131a; border:0; border-radius:7px!important; background:linear-gradient(135deg,#d8f7fb,#8ee5ee 55%,#f4d27d)!important; box-shadow:0 15px 34px #3cccdc2e!important; }
.login-page .login-panel .primary-btn:hover { transform:translateY(-1px); filter:saturate(1.08); }
.login-page .login-notice-mask { align-items:flex-start!important; min-height:0!important; padding:0!important; color:#adc7d0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; font-size:11px!important; font-weight:400!important; line-height:1.65!important; text-align:left!important; }
.ocean-bottom { position:absolute; z-index:2; bottom:30px; left:clamp(34px,6vw,86px); right:clamp(34px,6vw,86px); display:flex; justify-content:space-between; gap:16px; color:#acc9d2; font-size:11px; }
.ocean-bottom > span:last-child { color:#d8eaf071; }
@keyframes ocean-cinema-drift { from { transform:scale(1.035) translate3d(0,0,0); } to { transform:scale(1.065) translate3d(-.8%,.4%,0); } }
@media (min-width:1800px) { .login-page { grid-template-columns:455px minmax(0,1fr)!important; } .ocean-intro h1 { font-size:56px; } }
@media (max-width:980px) { .login-page { grid-template-columns:minmax(350px,390px) minmax(0,1fr)!important; gap:34px!important; } .ocean-intro h1 { font-size:38px; } .ocean-topics { display:none; } .ocean-header-note { display:none; } }
@media (max-width:760px) { .login-page { display:flex!important; flex-direction:column; align-items:stretch!important; gap:26px!important; padding:98px 22px 28px!important; overflow:auto; } .login-page::before { left:0; top:0; width:100%; height:58%; transform:none; border:0; background:linear-gradient(180deg,#06131df5,#06131dcc 60%,transparent); box-shadow:none; } .ocean-scene { background-position:66% center; } .ocean-scene::before { background:linear-gradient(180deg,#041019f2 0%,#06131dcc 38%,#06131d78 70%,#06131d 100%); } .ocean-header { top:25px; left:22px; right:22px; } .login-page .login-panel-wrap { order:0; max-width:410px; width:100%!important; align-self:center!important; } .login-page .login-panel { padding:25px!important; } .ocean-form-heading h2 { font-size:28px; } .ocean-intro { order:1; max-width:410px; align-self:center; padding:0 0 8px; } .ocean-kicker { margin-bottom:15px; font-size:11px; } .ocean-intro h1 { font-size:28px; margin-bottom:12px; } .ocean-intro > p:not(.ocean-kicker) { font-size:13px; line-height:1.75; } .ocean-bottom { position:static; order:2; flex-direction:column; gap:7px; margin-top:4px; } .ocean-dashboard { padding:24px; align-items:flex-start; flex-direction:column; gap:16px; min-height:180px; } .ocean-dashboard h2 { font-size:24px; } .sidebar > .ocean-wordmark { padding:16px; } }
@media (prefers-reduced-motion:reduce) { .ocean-scene { animation:none; } .nav button, .login-page .login-panel .primary-btn { transition:none; } }