/* VesselNow unified design system ? from Wordpress/Concept prototypes */


/* --- from index.html --- */

:root{
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); font-family:var(--ui);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* faint nautical-chart graticule, used sparingly behind hero + cta */
.chart-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chart-bg::before{
  content:"";position:absolute;inset:-2px;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent 75%);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);font-weight:500;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--topbar-chrome) 78%, transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:34px;height:68px;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em}
.brand svg{display:block}
.nav-links{display:flex;gap:28px;margin-left:8px}
.nav-links a{font-size:.92rem;color:var(--dim);transition:color .18s}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-cta .login{font-size:.92rem;color:var(--dim)}
.nav-cta .login:hover{color:var(--text)}
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;
  font-size:.92rem;padding:11px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c;box-shadow:0 6px 22px rgba(18,196,174,.22)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(18,196,174,.32)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.btn-lg{padding:14px 26px;font-size:1rem}

/* ---------- HERO ---------- */
.hero{position:relative;padding:84px 0 96px;overflow:hidden}
.hero-glow{position:absolute;top:-180px;right:-160px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,108,168,.34),transparent 62%);pointer-events:none;filter:blur(8px)}
.hero-in{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.hero h1{
  font-family:var(--display);font-weight:600;font-size:clamp(2.5rem,4.6vw,3.85rem);
  line-height:1.04;letter-spacing:-.025em;margin:20px 0 0;
}
.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(120deg,var(--sky),var(--teal));-webkit-background-clip:text;background-clip:text}
.hero p.lead{font-size:1.12rem;color:var(--dim);max-width:30em;margin:22px 0 32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:10px;margin-top:30px;color:var(--faint);font-size:.85rem}
.hero-trust .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(30,168,92,.18)}

/* ---------- LIVE INSTRUMENT (signature) ---------- */
.inst{
  position:relative;background:linear-gradient(180deg,var(--card),var(--surface));
  border:1px solid var(--line2);border-radius:20px;padding:22px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
}
.inst-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.inst-vessel{display:flex;align-items:center;gap:11px}
.inst-vessel .nm{font-family:var(--display);font-weight:600;font-size:1.05rem}
.inst-vessel .ty{font-family:var(--mono);font-size:.68rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.live-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ok);background:rgba(30,168,92,.12);
  border:1px solid rgba(30,168,92,.3);padding:5px 11px;border-radius:999px}
.live-pill .blip{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,168,92,.5)}50%{box-shadow:0 0 0 6px rgba(30,168,92,0)}}

.inst-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}
.radar{position:relative;aspect-ratio:1/1;border-radius:14px;background:
  radial-gradient(circle at center,rgba(18,196,174,.07),transparent 70%),var(--bg2);
  border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.radar .rings{position:absolute;inset:0}
.radar .rings span{position:absolute;border:1px solid rgba(123,155,191,.16);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.radar .rings span:nth-child(1){width:88%;height:88%}
.radar .rings span:nth-child(2){width:60%;height:60%}
.radar .rings span:nth-child(3){width:32%;height:32%}
.radar .cross{position:absolute;inset:0}
.radar .cross::before,.radar .cross::after{content:"";position:absolute;background:rgba(123,155,191,.14)}
.radar .cross::before{left:50%;top:6%;bottom:6%;width:1px;transform:translateX(-.5px)}
.radar .cross::after{top:50%;left:6%;right:6%;height:1px;transform:translateY(-.5px)}
.radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(18,196,174,.42),transparent 40deg);
  animation:sweep 4s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .ship{position:relative;z-index:2;width:12px;height:12px}
.radar .ship svg{filter:drop-shadow(0 0 6px rgba(18,196,174,.8))}
.radar .label{position:absolute;bottom:9px;left:10px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;color:var(--faint);text-transform:uppercase}

.readouts{display:flex;flex-direction:column;gap:9px}
.ro{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.ro .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ro .v{font-family:var(--mono);font-weight:500;font-size:1.18rem;margin-top:3px;letter-spacing:-.01em}
.ro .v small{font-size:.64rem;color:var(--faint);font-weight:400;margin-left:3px;letter-spacing:0}
.ro-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bars{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bar .bk{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.bar .bv{color:var(--text)}
.track{height:6px;border-radius:99px;background:var(--bg2);overflow:hidden}
.track i{display:block;height:100%;border-radius:99px}
.t-batt i{background:linear-gradient(90deg,var(--teal),var(--cyan))}
.t-fuel i{background:linear-gradient(90deg,var(--accent),var(--sky))}
.t-water i{background:linear-gradient(90deg,var(--sky),var(--cyan))}

/* ---------- FLEET TICKER ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.ticker-in{display:flex;align-items:center;gap:40px;padding:18px 28px;max-width:var(--wrap);margin:0 auto;flex-wrap:wrap}
.ticker .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.tk{display:flex;align-items:baseline;gap:9px}
.tk b{font-family:var(--mono);font-weight:500;font-size:1.15rem;color:var(--text)}
.tk span{font-size:.82rem;color:var(--dim)}

/* ---------- SECTIONS ---------- */
.section{padding:96px 0;position:relative}
.sec-head{max-width:42em;margin-bottom:48px}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.02em;line-height:1.1;margin:14px 0 0}
.sec-head p{color:var(--dim);font-size:1.05rem;margin-top:16px;max-width:36em}

/* surfaces */
.surfaces{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.surf{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .2s,border-color .2s,background .2s}
.surf:hover{transform:translateY(-4px);border-color:var(--line2);background:var(--card)}
.surf .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;border:1px solid var(--line2)}
.surf.s-bridge .ic{background:rgba(56,189,248,.1);color:var(--sky)}
.surf.s-guest .ic{background:rgba(18,196,174,.1);color:var(--teal)}
.surf.s-ams .ic{background:rgba(224,140,0,.12);color:var(--warn)}
.surf h3{font-family:var(--display);font-weight:600;font-size:1.22rem;display:flex;align-items:center;gap:10px}
.surf h3 .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:3px 7px;border-radius:6px}
.surf p{color:var(--dim);font-size:.95rem;margin-top:12px}
.surf ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:9px}
.surf li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--text)}
.surf li svg{flex:0 0 auto;margin-top:3px;color:var(--teal)}

/* deployment steps (real sequence ? numbered) */
.deploy{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 24px}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--mono);font-size:.8rem;
  color:var(--teal);letter-spacing:.1em;font-weight:500}
.step h4{font-family:var(--display);font-weight:600;font-size:1.12rem;margin:14px 0 10px}
.step p{color:var(--dim);font-size:.92rem}
.step .conn{position:absolute;top:34px;right:-18px;width:18px;height:1px;background:var(--line2);z-index:2}
.step:last-child .conn{display:none}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;transition:border-color .2s}
.feat:hover{border-color:var(--line2)}
.feat .fi{color:var(--teal);margin-bottom:14px}
.feat h4{font-family:var(--display);font-weight:600;font-size:1.04rem;margin-bottom:8px}
.feat p{color:var(--dim);font-size:.9rem}

/* data band */
.data-band{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.data-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.data-in h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1.12}
.data-in p{color:var(--dim);margin-top:18px;font-size:1.02rem}
.data-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.chip{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--text);background:var(--card);border:1px solid var(--line2);padding:8px 13px;border-radius:8px}
.code-card{background:#04101c;border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.code-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.code-top .d{width:11px;height:11px;border-radius:50%;background:var(--elevated)}
.code-top .ttl{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-left:8px;letter-spacing:.05em}
.code-card pre{padding:18px 18px 22px;overflow-x:auto;font-family:var(--mono);font-size:.78rem;line-height:1.75;color:#9fc3e0}
.code-card pre .ky{color:var(--teal)}
.code-card pre .st{color:var(--sky)}
.code-card pre .cm{color:var(--faint)}

/* faq */
.faq{max-width:780px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--display);font-weight:500;font-size:1.06rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .2s}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;background:var(--teal);border-radius:2px}
.qa summary .pm::before{top:50%;left:3px;right:3px;height:2px;transform:translateY(-1px)}
.qa summary .pm::after{left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-1px);transition:opacity .2s}
.qa[open] summary .pm::after{opacity:0}
.qa .a{padding:0 4px 22px;color:var(--dim);font-size:.96rem;max-width:64ch}

/* cta */
.cta-band{position:relative;overflow:hidden;border-radius:22px;margin:0 28px 96px;max-width:var(--wrap);
  background:linear-gradient(135deg,var(--surface),var(--bg2));border:1px solid var(--line2)}
@media(min-width:1236px){.cta-band{margin-left:auto;margin-right:auto}}
.cta-glow{position:absolute;bottom:-200px;left:30%;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,196,174,.28),transparent 62%);pointer-events:none}
.cta-in{position:relative;text-align:center;padding:70px 28px}
.cta-in h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.02em;line-height:1.08}
.cta-in p{color:var(--dim);font-size:1.08rem;margin:18px auto 32px;max-width:34em}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--bg2)}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-brand p{color:var(--dim);font-size:.9rem;margin-top:16px;max-width:26em}
.foot-col h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.foot-col a{display:block;color:var(--dim);font-size:.9rem;margin-bottom:10px;transition:color .15s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--faint);font-size:.82rem;flex-wrap:wrap}
.foot-bottom .mono{letter-spacing:.04em}

/* responsive */
@media(max-width:980px){
  .hero-in,.data-in{grid-template-columns:1fr;gap:40px}
  .surfaces,.deploy,.feat-grid{grid-template-columns:1fr}
  .step .conn{display:none}
  .nav-links{display:none}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .inst-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .ticker-in{gap:22px}
  .hero{padding:54px 0 64px}
  .section{padding:68px 0}
}
@media(prefers-reduced-motion:reduce){
  .radar .sweep,.live-pill .blip{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- PLATFORM AT A GLANCE ---------- */
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.gcard .gh{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.gcard .gh .gi{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2)}
.grow{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.grow:first-of-type{border-top:none}
.grow .gl2{font-size:.92rem;color:var(--dim)}
.grow .gv{font-family:var(--mono);font-size:1.02rem;color:var(--text)}
.gstat{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;color:var(--ok)}
.gstat .d{width:7px;height:7px;border-radius:50%;background:var(--ok)}

/* ---------- GUEST EXPERIENCE ---------- */
.guest-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.guest-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0}
.guest-copy p{color:var(--dim);font-size:1.04rem;margin-top:16px}
.guest-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .2s,transform .2s}
.gc:hover{border-color:var(--line2);transform:translateY(-3px)}
.gc .gci{width:40px;height:40px;border-radius:10px;background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.25);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.gc h4{font-family:var(--display);font-weight:600;font-size:1.02rem}
.gc p{color:var(--dim);font-size:.87rem;margin-top:7px}

/* ---------- OWN-IT BAND ---------- */
.own{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.own-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.own-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.own-item .oi{color:var(--teal);margin-bottom:14px}
.own-item h4{font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:8px}
.own-item p{color:var(--dim);font-size:.88rem}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}
.price{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px}
.price.feat-price{border-color:rgba(18,196,174,.4);background:linear-gradient(160deg,var(--card),var(--surface))}
.price .pbadge{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.3);padding:4px 10px;border-radius:999px}
.price h3{font-family:var(--display);font-weight:600;font-size:1.3rem}
.price .psub{color:var(--dim);font-size:.92rem;margin-top:8px}
.price .amt{font-family:var(--display);font-weight:600;font-size:2.5rem;margin:20px 0 2px;letter-spacing:-.02em}
.price .amt small{font-size:.9rem;color:var(--dim);font-weight:400}
.price .term{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--faint)}
.price ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px}
.price li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--text)}
.price li svg{flex:0 0 auto;margin-top:3px;color:var(--teal)}
.price .btn{width:100%}
.price-note{color:var(--faint);font-size:.82rem;margin-top:22px;max-width:900px}

/* three subscription tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.tier{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px}
.tier.feat-price{border-color:rgba(18,196,174,.4);background:linear-gradient(160deg,var(--card),var(--surface));box-shadow:0 24px 60px -34px rgba(18,196,174,.45)}
.tier .pbadge{position:absolute;top:20px;right:20px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.3);padding:4px 9px;border-radius:999px}
.tier .tname{font-family:var(--display);font-weight:600;font-size:1.18rem}
.tier .tfor{color:var(--dim);font-size:.86rem;margin-top:6px;min-height:2.6em}
.tier .amt{font-family:var(--display);font-weight:600;font-size:2.1rem;margin:16px 0 2px;letter-spacing:-.02em}
.tier .amt small{font-size:.82rem;color:var(--dim);font-weight:400}
.tier .term{font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;color:var(--faint)}
.tier ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:10px}
.tier li{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;color:var(--text)}
.tier li svg{flex:0 0 auto;margin-top:3px;color:var(--teal)}
.tier .btn{width:100%}

/* perpetual band */
.perpetual{margin-top:18px;background:linear-gradient(135deg,var(--bg2),var(--surface));border:1px solid var(--line2);border-radius:18px;padding:28px 32px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.perpetual .pp-ic{width:50px;height:50px;border-radius:13px;background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.25);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.perpetual .pp-body{flex:1;min-width:220px}
.perpetual h3{font-family:var(--display);font-weight:600;font-size:1.22rem}
.perpetual p{color:var(--dim);font-size:.92rem;margin-top:6px;max-width:52em}
.perpetual .pp-cta{flex:0 0 auto}

@media(max-width:980px){
  .glance,.own-grid{grid-template-columns:1fr 1fr}
  .guest-in,.pricing-grid{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .perpetual{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .glance,.own-grid,.guest-cards{grid-template-columns:1fr}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* --- from portal-dashboard.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}

/* ---------- SIDEBAR ---------- */
.side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;font-family:var(--display);font-weight:600;font-size:1.12rem;border-bottom:1px solid var(--line)}
.fleet-switch{margin:16px 16px 8px;background:var(--surface);border:1px solid var(--line2);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:border-color .18s}
.fleet-switch:hover{border-color:var(--teal)}
.fleet-switch .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.8rem;color:#04101c}
.fleet-switch .fs-meta{line-height:1.25}
.fleet-switch .fs-meta b{font-size:.9rem;display:block}
.fleet-switch .fs-meta span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim)}
.fleet-switch svg{margin-left:auto;color:var(--faint)}
.nav-group{padding:14px 12px 6px}
.nav-group .gl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:0 10px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px;color:var(--dim);font-size:.92rem;font-weight:500;transition:background .16s,color .16s;margin-bottom:2px}
.nav-item svg{flex:0 0 auto;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:rgba(18,196,174,.12);color:var(--text)}
.nav-item.active svg{color:var(--teal);opacity:1}
.nav-item .badge{margin-left:auto;font-family:var(--mono);font-size:.66rem;background:var(--crit);color:#fff;padding:1px 7px;border-radius:999px;font-weight:500}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px}
.user{display:flex;align-items:center;gap:11px}
.user .ua{width:32px;height:32px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:var(--text)}
.user .un{line-height:1.25}
.user .un b{font-size:.86rem;display:block}
.user .un span{font-size:.72rem;color:var(--faint)}
.user a{margin-left:auto;color:var(--faint);font-size:.78rem}
.user a:hover{color:var(--text)}

/* ---------- MAIN ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:18px;padding:18px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb, var(--topbar-chrome) 78%, transparent);backdrop-filter:blur(14px);z-index:10}
.topbar h1{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em}
.topbar .sub{color:var(--faint);font-size:.82rem;margin-top:2px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.clock{font-family:var(--mono);font-size:.82rem;color:var(--dim);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px;letter-spacing:.04em}
.icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--dim);cursor:pointer;position:relative;transition:border-color .18s,color .18s}
.icon-btn:hover{border-color:var(--teal);color:var(--text)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--crit);border:2px solid var(--surface)}
.content{padding:26px 30px 50px;flex:1}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
.stat .sl{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stat .sv{font-family:var(--display);font-weight:600;font-size:1.7rem;margin-top:8px;line-height:1;display:flex;align-items:baseline;gap:7px}
.stat .sv small{font-size:.78rem;color:var(--faint);font-weight:400}
.stat .sd{font-size:.78rem;margin-top:7px;display:flex;align-items:center;gap:6px}
.stat .sd.up{color:var(--ok)}.stat .sd.flat{color:var(--dim)}.stat .sd.warn{color:var(--warn)}

/* two-col */
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.panel-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.panel-h h2{font-family:var(--display);font-weight:600;font-size:1.02rem}
.panel-h .ph-act{margin-left:auto;font-size:.8rem;color:var(--teal)}
.panel-h .ph-act:hover{text-decoration:underline}

/* fleet map preview */
.map{position:relative;height:230px;background:
  radial-gradient(circle at 30% 40%,rgba(27,108,168,.18),transparent 55%),
  radial-gradient(circle at 75% 70%,rgba(18,196,174,.12),transparent 50%),var(--bg2)}
.map .grid-lines{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;opacity:.5}
.pin{position:absolute;transform:translate(-50%,-50%)}
.pin .pp{width:13px;height:13px;border-radius:50%;border:2px solid var(--bg2)}
.pin .ring{position:absolute;inset:-7px;border-radius:50%;border:1px solid currentColor;opacity:.5;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.pin.ok{color:var(--ok)} .pin.ok .pp{background:var(--ok)}
.pin.warn{color:var(--warn)} .pin.warn .pp{background:var(--warn)}
.pin.crit{color:var(--crit)} .pin.crit .pp{background:var(--crit)}
.pin .lbl{position:absolute;left:18px;top:-3px;white-space:nowrap;font-family:var(--mono);font-size:.66rem;color:var(--text);background:color-mix(in srgb, var(--topbar-chrome) 70%, transparent);padding:2px 7px;border-radius:5px;border:1px solid var(--line)}

/* vessel rows */
.vlist{padding:8px}
.vrow{display:grid;grid-template-columns:1.3fr repeat(3,1fr) auto;gap:12px;align-items:center;padding:13px 12px;border-radius:11px;transition:background .15s;cursor:pointer}
.vrow:hover{background:rgba(255,255,255,.03)}
.vrow + .vrow{border-top:1px solid var(--line)}
.vrow .vn{display:flex;align-items:center;gap:11px;min-width:0}
.vrow .vn .vi{width:34px;height:34px;border-radius:9px;background:var(--card);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--teal);flex:0 0 auto}
.vrow .vn b{font-family:var(--display);font-weight:600;font-size:.94rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow .vn span{font-family:var(--mono);font-size:.64rem;color:var(--faint);letter-spacing:.06em}
.vcell .ck{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.vcell .cv{font-family:var(--mono);font-size:.9rem;color:var(--text)}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
.status .sd{width:7px;height:7px;border-radius:50%}
.status.ok{color:var(--ok);background:rgba(30,168,92,.1);border:1px solid rgba(30,168,92,.28)}
.status.ok .sd{background:var(--ok)}
.status.warn{color:var(--warn);background:rgba(224,140,0,.1);border:1px solid rgba(224,140,0,.3)}
.status.warn .sd{background:var(--warn)}
.status.crit{color:var(--crit);background:rgba(214,48,48,.12);border:1px solid rgba(214,48,48,.32)}
.status.crit .sd{background:var(--crit);animation:blink 1.3s step-start infinite}
.status.off{color:var(--faint);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.status.off .sd{background:var(--faint)}
@keyframes blink{50%{opacity:.3}}

/* alarms list */
.alarms{padding:8px}
.alarm{display:flex;gap:12px;padding:13px 12px;border-radius:11px}
.alarm + .alarm{border-top:1px solid var(--line)}
.alarm .ab{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.alarm.crit .ab{background:rgba(214,48,48,.14);color:var(--crit)}
.alarm.warn .ab{background:rgba(224,140,0,.14);color:var(--warn)}
.alarm.info .ab{background:rgba(56,189,248,.12);color:var(--sky)}
.alarm .am{min-width:0;flex:1}
.alarm .am .at{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:8px}
.alarm .am .at .src{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
.alarm .am .ad{font-size:.82rem;color:var(--dim);margin-top:3px}
.alarm .am .av{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-top:4px}

@media(max-width:1080px){.cols{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:var(--vn-z-drawer,60);width:var(--side);transform:translateX(-100%);transition:transform .25s}
  .side.open{transform:none}
  .menu-toggle{display:flex}
  .vrow{grid-template-columns:1.3fr 1fr auto}
  .vrow .vcell:nth-child(3),.vrow .vcell:nth-child(4){display:none}
}
.menu-toggle{display:none}
@media(max-width:520px){.stats{grid-template-columns:1fr}.content{padding:18px}}
@media(prefers-reduced-motion:reduce){.pin .ring,.status.crit .sd{animation:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* --- from portal-my-vessel.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;font-family:var(--display);font-weight:600;font-size:1.12rem;border-bottom:1px solid var(--line)}
.fleet-switch{margin:16px 16px 8px;background:var(--surface);border:1px solid var(--line2);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer}
.fleet-switch .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.8rem;color:#04101c}
.fleet-switch .fs-meta b{font-size:.9rem;display:block}.fleet-switch .fs-meta span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim)}
.fleet-switch svg{margin-left:auto;color:var(--faint)}
.nav-group{padding:14px 12px 6px}.nav-group .gl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:0 10px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px;color:var(--dim);font-size:.92rem;font-weight:500;transition:background .16s,color .16s;margin-bottom:2px}
.nav-item svg{flex:0 0 auto;opacity:.85}.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:rgba(18,196,174,.12);color:var(--text)}.nav-item.active svg{color:var(--teal);opacity:1}
.nav-item .badge{margin-left:auto;font-family:var(--mono);font-size:.66rem;background:var(--crit);color:#fff;padding:1px 7px;border-radius:999px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px}
.user{display:flex;align-items:center;gap:11px}.user .ua{width:32px;height:32px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}
.user .un b{font-size:.86rem;display:block}.user .un span{font-size:.72rem;color:var(--faint)}.user a{margin-left:auto;color:var(--faint);font-size:.78rem}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:18px;padding:18px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb, var(--topbar-chrome) 78%, transparent);backdrop-filter:blur(14px);z-index:10}
.topbar h1{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.live-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);background:rgba(30,168,92,.12);border:1px solid rgba(30,168,92,.3);padding:4px 10px;border-radius:999px}
.live-pill .blip{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,168,92,.5)}50%{box-shadow:0 0 0 6px rgba(30,168,92,0)}}
.topbar .sub{color:var(--faint);font-size:.82rem;margin-top:2px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);align-items:center;justify-content:center;color:var(--dim);cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:.88rem;padding:10px 16px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:transform .15s,background .2s,border-color .2s;white-space:nowrap}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}.btn-ghost:hover{background:rgba(255,255,255,.07)}
.content{padding:24px 30px 50px;flex:1}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-bottom:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.panel-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.panel-h h2{font-family:var(--display);font-weight:600;font-size:1rem}
.panel-h .range{margin-left:auto;display:flex;gap:4px}
.range button{font-family:var(--mono);font-size:.68rem;color:var(--dim);background:var(--bg2);border:1px solid var(--line);padding:5px 9px;border-radius:7px;cursor:pointer;transition:color .15s,border-color .15s}
.range button.on{color:var(--teal);border-color:rgba(18,196,174,.4)}
/* nav cluster */
.navcluster{padding:20px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.radar{position:relative;width:170px;height:170px;border-radius:14px;background:radial-gradient(circle at center,rgba(18,196,174,.07),transparent 70%),var(--bg2);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.radar .rings span{position:absolute;border:1px solid rgba(123,155,191,.16);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.radar .rings span:nth-child(1){width:88%;height:88%}.radar .rings span:nth-child(2){width:58%;height:58%}.radar .rings span:nth-child(3){width:28%;height:28%}
.radar .cross::before,.radar .cross::after{content:"";position:absolute;background:rgba(123,155,191,.14)}
.radar .cross::before{left:50%;top:6%;bottom:6%;width:1px}.radar .cross::after{top:50%;left:6%;right:6%;height:1px}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(18,196,174,.42),transparent 40deg);animation:sweep 4s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .ship{position:relative;z-index:2}.radar .ship svg{filter:drop-shadow(0 0 6px rgba(18,196,174,.8))}
.nav-ro{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ro{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px}
.ro .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ro .v{font-family:var(--mono);font-weight:500;font-size:1.32rem;margin-top:5px}.ro .v small{font-size:.62rem;color:var(--faint);margin-left:3px}
.ro.wide{grid-column:span 3}
/* power */
.power{padding:18px}
.cell{margin-bottom:16px}.cell:last-child{margin-bottom:0}
.cell .ch{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.cell .ch b{font-family:var(--mono);font-size:.96rem;color:var(--text);letter-spacing:0}
.track{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.track i{display:block;height:100%;border-radius:99px}
.g-teal i{background:linear-gradient(90deg,var(--teal),var(--cyan))}.g-blue i{background:linear-gradient(90deg,var(--accent),var(--sky))}.g-sky i{background:linear-gradient(90deg,var(--sky),var(--cyan))}.g-warn i{background:linear-gradient(90deg,var(--warn),#f0b04a)}
/* spark cards */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:16px}
.metric .ml{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.metric .mv{font-family:var(--display);font-weight:600;font-size:1.5rem;margin-top:6px;display:flex;align-items:baseline;gap:5px}.metric .mv small{font-size:.74rem;color:var(--faint);font-weight:400}
.metric svg.spark{display:block;margin-top:10px;width:100%;height:34px}
/* sources */
.sources{padding:8px}
.src{display:flex;align-items:center;gap:13px;padding:12px;border-radius:10px}
.src + .src{border-top:1px solid var(--line)}
.src .si{width:36px;height:36px;border-radius:9px;background:var(--card);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--teal);flex:0 0 auto}
.src .sm{flex:1;min-width:0}.src .sm b{font-size:.9rem;display:block}.src .sm span{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
.src .st{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;color:var(--ok);background:rgba(30,168,92,.1);border:1px solid rgba(30,168,92,.28)}
.src .st .d{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.src .st.warn{color:var(--warn);background:rgba(224,140,0,.1);border-color:rgba(224,140,0,.3)}.src .st.warn .d{background:var(--warn)}
@media(max-width:1080px){.grid2{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;z-index:var(--vn-z-drawer,60);width:var(--side);transform:translateX(-100%);transition:transform .25s}.side.open{transform:none}.menu-toggle{display:flex}.navcluster{grid-template-columns:1fr}.radar{margin:0 auto}}
@media(prefers-reduced-motion:reduce){.radar .sweep,.live-pill .blip{animation:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* --- from portal-fleet-map.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;line-height:1.5;overflow:hidden}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:var(--side) 1fr;height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100vh;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;font-family:var(--display);font-weight:600;font-size:1.12rem;border-bottom:1px solid var(--line)}
.fleet-switch{margin:16px 16px 8px;background:var(--surface);border:1px solid var(--line2);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer}
.fleet-switch .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.8rem;color:#04101c}
.fleet-switch .fs-meta b{font-size:.9rem;display:block}.fleet-switch .fs-meta span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim)}
.fleet-switch svg{margin-left:auto;color:var(--faint)}
.nav-group{padding:14px 12px 6px}.nav-group .gl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:0 10px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px;color:var(--dim);font-size:.92rem;font-weight:500;transition:background .16s,color .16s;margin-bottom:2px}
.nav-item svg{flex:0 0 auto;opacity:.85}.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:rgba(18,196,174,.12);color:var(--text)}.nav-item.active svg{color:var(--teal);opacity:1}
.nav-item .badge{margin-left:auto;font-family:var(--mono);font-size:.66rem;background:var(--crit);color:#fff;padding:1px 7px;border-radius:999px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px}
.user{display:flex;align-items:center;gap:11px}.user .ua{width:32px;height:32px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}
.user .un b{font-size:.86rem;display:block}.user .un span{font-size:.72rem;color:var(--faint)}.user a{margin-left:auto;color:var(--faint);font-size:.78rem}
/* map layout */
.main{position:relative;display:grid;grid-template-columns:300px 1fr;height:100vh;min-width:0}
.vlist-col{border-right:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;overflow:hidden}
.vlist-h{padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.vlist-h h1{font-family:var(--display);font-weight:600;font-size:1.18rem}
.filters{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.filters button{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--dim);background:var(--surface);border:1px solid var(--line);padding:5px 10px;border-radius:999px;cursor:pointer;transition:color .15s,border-color .15s}
.filters button.on{color:var(--teal);border-color:rgba(18,196,174,.4)}
.vlist{overflow-y:auto;padding:8px;flex:1}
.vitem{padding:13px;border-radius:11px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.vitem:hover{background:rgba(255,255,255,.03)}
.vitem.sel{background:rgba(18,196,174,.08);border-color:rgba(18,196,174,.3)}
.vitem .vtop{display:flex;align-items:center;gap:9px}
.vitem .vdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.vdot.ok{background:var(--ok)}.vdot.warn{background:var(--warn)}.vdot.crit{background:var(--crit)}.vdot.off{background:var(--faint)}
.vitem b{font-family:var(--display);font-weight:600;font-size:.94rem}
.vitem .vstate{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.vitem .vsub{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-top:7px;display:flex;gap:14px}
.vitem .vsub span{color:var(--text)}.vitem .vsub .lab{color:var(--faint)}
/* map canvas */
.mapwrap{position:relative;overflow:hidden;background:radial-gradient(circle at 40% 35%,rgba(27,108,168,.16),transparent 55%),radial-gradient(circle at 70% 70%,rgba(18,196,174,.1),transparent 50%),var(--bg)}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;opacity:.45}
.coast{position:absolute;inset:0;opacity:.5}
/* map controls */
.map-ctrl{position:absolute;top:18px;left:18px;display:flex;gap:8px;z-index:5}
.range{display:flex;gap:4px;background:rgba(10,21,38,.85);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:10px;padding:4px}
.range button{font-family:var(--mono);font-size:.7rem;color:var(--dim);background:transparent;border:none;padding:6px 11px;border-radius:7px;cursor:pointer;transition:color .15s,background .15s}
.range button.on{color:var(--teal);background:rgba(18,196,174,.12)}
.zoom{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:1px;background:rgba(10,21,38,.85);border:1px solid var(--line2);border-radius:10px;overflow:hidden;z-index:5}
.zoom button{width:36px;height:36px;background:transparent;border:none;color:var(--dim);font-size:1.1rem;cursor:pointer}
.zoom button:hover{color:var(--text);background:rgba(255,255,255,.05)}
.legend{position:absolute;bottom:18px;left:18px;display:flex;gap:16px;background:rgba(10,21,38,.85);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:10px;padding:9px 14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--dim);z-index:5}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%}
/* pins */
.pin{position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:pointer}
.pin .pp{width:14px;height:14px;border-radius:50%;border:2px solid var(--bg);position:relative;z-index:2}
.pin .ring{position:absolute;inset:-8px;border-radius:50%;border:1px solid currentColor;opacity:.5;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.8);opacity:0}}
.pin.ok{color:var(--ok)}.pin.ok .pp{background:var(--ok)}
.pin.warn{color:var(--warn)}.pin.warn .pp{background:var(--warn)}
.pin.crit{color:var(--crit)}.pin.crit .pp{background:var(--crit)}
.pin .lbl{position:absolute;left:20px;top:-4px;white-space:nowrap;font-family:var(--mono);font-size:.66rem;color:var(--text);background:color-mix(in srgb, var(--topbar-chrome) 78%, transparent);padding:3px 8px;border-radius:6px;border:1px solid var(--line)}
.track-line{position:absolute;inset:0;pointer-events:none;z-index:2}
/* selected vessel panel */
.detail{position:absolute;bottom:18px;right:18px;width:300px;background:rgba(10,21,38,.92);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:15px;padding:18px;z-index:6;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.detail h2{font-family:var(--display);font-weight:600;font-size:1.08rem;display:flex;align-items:center;gap:9px}
.detail .dstate{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);margin-top:2px}
.detail .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.detail .dro{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.detail .dro .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.detail .dro .v{font-family:var(--mono);font-size:1rem;margin-top:3px}.detail .dro .v small{font-size:.6rem;color:var(--faint)}
.detail .dact{margin-top:14px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:.84rem;padding:10px 14px;border-radius:9px;cursor:pointer;border:1px solid transparent;width:100%}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c}
.menu-toggle{display:none}
@media(max-width:980px){.main{grid-template-columns:1fr}.vlist-col{position:absolute;left:0;top:0;bottom:0;width:300px;z-index:20;transform:translateX(-100%);transition:transform .25s}.vlist-col.open{transform:none}.detail{width:260px}}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;z-index:var(--vn-z-drawer,60);width:var(--side);transform:translateX(-100%);transition:transform .25s}.side.open{transform:none}}
@media(prefers-reduced-motion:reduce){.pin .ring{animation:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* --- from portal-alarms.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;font-family:var(--display);font-weight:600;font-size:1.12rem;border-bottom:1px solid var(--line)}
.fleet-switch{margin:16px 16px 8px;background:var(--surface);border:1px solid var(--line2);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer}
.fleet-switch .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.8rem;color:#04101c}
.fleet-switch .fs-meta b{font-size:.9rem;display:block}.fleet-switch .fs-meta span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim)}
.fleet-switch svg{margin-left:auto;color:var(--faint)}
.nav-group{padding:14px 12px 6px}.nav-group .gl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:0 10px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px;color:var(--dim);font-size:.92rem;font-weight:500;transition:background .16s,color .16s;margin-bottom:2px}
.nav-item svg{flex:0 0 auto;opacity:.85}.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:rgba(18,196,174,.12);color:var(--text)}.nav-item.active svg{color:var(--teal);opacity:1}
.nav-item .badge{margin-left:auto;font-family:var(--mono);font-size:.66rem;background:var(--crit);color:#fff;padding:1px 7px;border-radius:999px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px}
.user{display:flex;align-items:center;gap:11px}.user .ua{width:32px;height:32px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}
.user .un b{font-size:.86rem;display:block}.user .un span{font-size:.72rem;color:var(--faint)}.user a{margin-left:auto;color:var(--faint);font-size:.78rem}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:18px;padding:18px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb, var(--topbar-chrome) 78%, transparent);backdrop-filter:blur(14px);z-index:10}
.topbar h1{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em}.topbar .sub{color:var(--faint);font-size:.82rem;margin-top:2px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);align-items:center;justify-content:center;color:var(--dim);cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:.86rem;padding:9px 15px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:transform .15s,background .2s,border-color .2s;white-space:nowrap}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}.btn-ghost:hover{background:rgba(255,255,255,.07)}
.content{padding:24px 30px 50px;flex:1;display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
/* summary chips */
.sumrow{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.sumchip{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:11px 16px;display:flex;align-items:center;gap:11px}
.sumchip .n{font-family:var(--display);font-weight:600;font-size:1.4rem}
.sumchip .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.3}
.sumchip.crit .n{color:var(--crit)}.sumchip.warn .n{color:var(--warn)}.sumchip.info .n{color:var(--sky)}
/* filter bar */
.filterbar{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.filterbar button{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--dim);background:var(--surface);border:1px solid var(--line);padding:7px 12px;border-radius:999px;cursor:pointer;transition:color .15s,border-color .15s}
.filterbar button.on{color:var(--teal);border-color:rgba(18,196,174,.4)}
/* alarm table */
.atable{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.arow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:15px 18px;transition:background .15s}
.arow:hover{background:rgba(255,255,255,.02)}
.arow + .arow{border-top:1px solid var(--line)}
.sev{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.sev.crit{background:rgba(214,48,48,.14);color:var(--crit)}.sev.warn{background:rgba(224,140,0,.14);color:var(--warn)}.sev.info{background:rgba(56,189,248,.12);color:var(--sky)}
.amid{min-width:0}
.amid .atitle{font-weight:600;font-size:.96rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tagpill{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:2px 7px;border-radius:5px}
.tagpill.v{color:var(--cyan);border-color:rgba(27,200,200,.3)}
.amid .adesc{font-size:.85rem;color:var(--dim);margin-top:4px}
.amid . ts{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-top:5px}
.amid .ats{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-top:5px}
.astate{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.badge2{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.badge2.active{color:var(--crit);background:rgba(214,48,48,.12);border:1px solid rgba(214,48,48,.3)}
.badge2.ack{color:var(--warn);background:rgba(224,140,0,.1);border:1px solid rgba(224,140,0,.28)}
.badge2.cleared{color:var(--ok);background:rgba(30,168,92,.1);border:1px solid rgba(30,168,92,.28)}
.ackbtn{font-family:var(--ui);font-size:.78rem;color:var(--teal);background:transparent;border:none;cursor:pointer}
.ackbtn:hover{text-decoration:underline}
/* settings panel */
.settings{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:20px;position:sticky;top:96px}
.settings h2{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:4px}
.settings .sh{color:var(--faint);font-size:.8rem;margin-bottom:18px}
.setrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.setrow:first-of-type{border-top:none}
.setrow .si{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.setrow .sm{flex:1;min-width:0}.setrow .sm b{font-size:.88rem;display:block}.setrow .sm span{font-size:.74rem;color:var(--dim)}
.toggle{flex:0 0 auto;width:42px;height:24px;border-radius:99px;background:var(--bg2);border:1px solid var(--line2);position:relative;cursor:pointer;transition:background .18s,border-color .18s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:transform .18s,background .18s}
.toggle.on{background:rgba(18,196,174,.2);border-color:var(--teal)}.toggle.on::after{transform:translateX(18px);background:var(--teal)}
.reclist{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.reclist .rl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.recip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;background:var(--bg2);border:1px solid var(--line2);padding:6px 10px;border-radius:8px;margin:0 6px 6px 0}
.recip .x{color:var(--faint);cursor:pointer}.recip .x:hover{color:var(--crit)}
.testbtn{width:100%;margin-top:16px}
@media(max-width:1080px){.content{grid-template-columns:1fr}.settings{position:static}}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;z-index:var(--vn-z-drawer,60);width:var(--side);transform:translateX(-100%);transition:transform .25s}.side.open{transform:none}.menu-toggle{display:flex}}
@media(prefers-reduced-motion:reduce){*{transition:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* --- from portal-guest-services.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
/* sidebar (shared shell) */
.side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;font-family:var(--display);font-weight:600;font-size:1.12rem;border-bottom:1px solid var(--line)}
.fleet-switch{margin:16px 16px 8px;background:var(--surface);border:1px solid var(--line2);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:border-color .18s}
.fleet-switch:hover{border-color:var(--teal)}
.fleet-switch .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.8rem;color:#04101c}
.fleet-switch .fs-meta b{font-size:.9rem;display:block}.fleet-switch .fs-meta span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim)}
.fleet-switch svg{margin-left:auto;color:var(--faint)}
.nav-group{padding:14px 12px 6px}
.nav-group .gl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:0 10px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px;color:var(--dim);font-size:.92rem;font-weight:500;transition:background .16s,color .16s;margin-bottom:2px}
.nav-item svg{flex:0 0 auto;opacity:.85}.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:rgba(18,196,174,.12);color:var(--text)}.nav-item.active svg{color:var(--teal);opacity:1}
.nav-item .badge{margin-left:auto;font-family:var(--mono);font-size:.66rem;background:var(--crit);color:#fff;padding:1px 7px;border-radius:999px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px}
.user{display:flex;align-items:center;gap:11px}.user .ua{width:32px;height:32px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}
.user .un b{font-size:.86rem;display:block}.user .un span{font-size:.72rem;color:var(--faint)}.user a{margin-left:auto;color:var(--faint);font-size:.78rem}.user a:hover{color:var(--text)}
/* main */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:18px;padding:18px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb, var(--topbar-chrome) 78%, transparent);backdrop-filter:blur(14px);z-index:10}
.topbar h1{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em}.topbar .sub{color:var(--faint);font-size:.82rem;margin-top:2px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);align-items:center;justify-content:center;color:var(--dim);cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:.88rem;padding:10px 16px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c;box-shadow:0 6px 20px rgba(18,196,174,.2)}.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}.btn-ghost:hover{background:rgba(255,255,255,.07)}
.content{padding:24px 30px 50px;flex:1}
/* draft bar */
.draftbar{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 18px;margin-bottom:20px}
.draftbar .dstate{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);background:rgba(224,140,0,.1);border:1px solid rgba(224,140,0,.3);padding:5px 11px;border-radius:999px}
.draftbar .dstate .sd{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.draftbar .dmsg{color:var(--dim);font-size:.88rem}
.draftbar .dactions{margin-left:auto;display:flex;gap:10px}
/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto}
.tab{padding:12px 16px;font-weight:600;font-size:.92rem;color:var(--dim);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px;transition:color .16s,border-color .16s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--teal)}
.tab .cnt{font-family:var(--mono);font-size:.66rem;color:var(--faint);background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
.tab.active .cnt{color:var(--teal);border-color:rgba(18,196,174,.3)}
/* panels */
.tabpanel{display:none}.tabpanel.show{display:block}
.panel-head{display:flex;align-items:center;margin-bottom:16px}
.panel-head h2{font-family:var(--display);font-weight:600;font-size:1.1rem}
.panel-head .add{margin-left:auto}
/* crew grid */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ecard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;position:relative;transition:border-color .18s}
.ecard:hover{border-color:var(--line2)}
.ecard .edit{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--dim);cursor:pointer;opacity:0;transition:opacity .15s}
.ecard:hover .edit{opacity:1}
.crew-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--elevated));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:13px}
.ecard h3{font-family:var(--display);font-weight:600;font-size:1.02rem}
.ecard .role{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-top:3px}
.ecard p{color:var(--dim);font-size:.84rem;margin-top:11px;line-height:1.55}
.addcard{border:1px dashed var(--line2);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--dim);cursor:pointer;min-height:170px;transition:border-color .18s,color .18s}
.addcard:hover{border-color:var(--teal);color:var(--text)}
.addcard .plus{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
/* list-style items (activities, menus, itinerary) */
.items{display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:16px 18px;position:relative}
.item:hover{border-color:var(--line2)}
.item .ic{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--card);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.item .it{flex:1;min-width:0}
.item .it h3{font-family:var(--display);font-weight:600;font-size:1rem;display:flex;align-items:center;gap:10px}
.item .it .meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--faint)}
.item .it p{color:var(--dim);font-size:.86rem;margin-top:6px}
.item .when{font-family:var(--mono);font-size:.76rem;color:var(--text);background:var(--bg2);border:1px solid var(--line);padding:6px 11px;border-radius:8px;white-space:nowrap}
.toy{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text);background:var(--bg2);border:1px solid var(--line2);padding:7px 12px;border-radius:9px}
.toy .av{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.toy .av.out{background:var(--faint)}
.toys{display:flex;flex-wrap:wrap;gap:9px}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;z-index:var(--vn-z-drawer,60);width:var(--side);transform:translateX(-100%);transition:transform .25s}.side.open{transform:none}.menu-toggle{display:flex}}
@media(prefers-reduced-motion:reduce){*{transition:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* --- from features.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--ui);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:500}
.chart-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chart-bg::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 72%)}
.nav{position:sticky;top:0;z-index:50;background:var(--nav-glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;height:68px;max-width:1180px;margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:1.18rem}
.nav-links{display:flex;gap:28px;margin-left:8px}.nav-links a{font-size:.92rem;color:var(--dim);transition:color .18s}.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}.nav-cta .login{font-size:.92rem;color:var(--dim)}.nav-cta .login:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c;box-shadow:0 6px 22px rgba(18,196,174,.22)}.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}.btn-ghost:hover{background:rgba(255,255,255,.07)}
/* hero */
.hero{position:relative;padding:78px 0 50px;overflow:hidden;text-align:center}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.3rem,4.6vw,3.4rem);letter-spacing:-.028em;line-height:1.04;margin:18px auto 0;max-width:16ch}
.hero p{color:var(--dim);font-size:1.15rem;margin:18px auto 0;max-width:40em}
.hero .tagline{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:26px}
/* feature index */
.findex{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:30px 0 10px}
.findex a{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--dim);border:1px solid var(--line);padding:7px 12px;border-radius:999px;transition:color .15s,border-color .15s}
.findex a:hover{color:var(--teal);border-color:rgba(18,196,174,.35)}
/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:64px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.frow:nth-child(even) .ftext{order:2}
.ftext .eyebrow{margin-bottom:14px;display:block}
.ftext h2{font-family:var(--display);font-weight:600;font-size:1.9rem;letter-spacing:-.02em;line-height:1.1}
.ftext p{color:var(--dim);font-size:1.02rem;margin-top:14px}
.flist{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.flist li{display:flex;align-items:flex-start;gap:11px;list-style:none;font-size:.96rem}
.flist li svg{flex:0 0 auto;margin-top:3px;color:var(--teal)}
/* visual card */
.fvis{background:linear-gradient(150deg,var(--card),var(--surface));border:1px solid var(--line2);border-radius:18px;padding:24px;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column}
.fvis .vh{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.fvis .vh .blip{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,168,92,.5)}50%{box-shadow:0 0 0 5px rgba(30,168,92,0)}}
/* instrument readouts */
.ro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:360px){.ro-grid{grid-template-columns:1fr}}
.ro{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px}
.ro .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ro .v{font-family:var(--mono);font-size:1.2rem;margin-top:5px}.ro .v small{font-size:.58rem;color:var(--faint)}
/* mini map */
.minimap{flex:1;position:relative;border-radius:12px;border:1px solid var(--line);background:radial-gradient(circle at 40% 40%,rgba(27,108,168,.18),transparent 60%),var(--bg2);overflow:hidden;min-height:170px}
.minimap .mg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.4}
.minimap .trk{position:absolute;inset:0}
.mpin{position:absolute;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;border:2px solid var(--bg)}
.mpin.ok{background:var(--ok)}.mpin.warn{background:var(--warn)}.mpin.crit{background:var(--crit)}
/* alarm rows */
.amini{display:flex;flex-direction:column;gap:9px}
.amini .ar{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.amini .ar .d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.amini .ar.crit .d{background:var(--crit)}.amini .ar.warn .d{background:var(--warn)}.amini .ar.info .d{background:var(--sky)}
.amini .ar b{font-size:.84rem}.amini .ar .src{margin-left:auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--faint)}
/* code block */
.codecard{background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-family:var(--mono);font-size:.78rem;flex:1}
.codecard .ch{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line)}
.codecard .ch i{width:10px;height:10px;border-radius:50%;background:var(--elevated)}
.codecard pre{padding:15px;overflow-x:auto;line-height:1.65;color:var(--dim)}
.codecard .k{color:var(--sky)}.codecard .s{color:var(--teal)}.codecard .c{color:var(--faint)}
/* bars */
.bars{display:flex;flex-direction:column;gap:13px}
.bar .bh{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.bar .bh b{font-family:var(--mono);color:var(--text);letter-spacing:0}
.bt{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}.bt i{display:block;height:100%;border-radius:99px}
.g1 i{background:linear-gradient(90deg,var(--teal),var(--cyan))}.g2 i{background:linear-gradient(90deg,var(--accent),var(--sky))}.g3 i{background:linear-gradient(90deg,var(--warn),#f0b04a)}
/* cta */
.cta{margin:30px 0 90px;background:linear-gradient(135deg,var(--surface),var(--bg2));border:1px solid var(--line2);border-radius:20px;padding:52px 40px;text-align:center;position:relative;overflow:hidden}
.cta .glow{position:absolute;top:-130px;left:50%;transform:translateX(-50%);width:520px;height:300px;background:radial-gradient(ellipse,rgba(18,196,174,.18),transparent 65%);pointer-events:none}
.cta h2{position:relative;font-family:var(--display);font-weight:600;font-size:2rem;letter-spacing:-.02em}
.cta p{position:relative;color:var(--dim);margin:14px auto 26px;max-width:34em;font-size:1.05rem}
.cta .ca{position:relative;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
footer{border-top:1px solid var(--line);padding:36px 0;background:var(--bg2);color:var(--faint);font-size:.82rem}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.foot-in .mono{font-family:var(--mono);letter-spacing:.04em}
@media(max-width:860px){.nav-links{display:none}.frow{grid-template-columns:1fr;gap:28px;padding:48px 0}.frow:nth-child(even) .ftext{order:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fvis .vh .blip{animation:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* --- from faq.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--ui);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:500}
.chart-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chart-bg::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 72%)}
.nav{position:sticky;top:0;z-index:50;background:var(--nav-glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;height:68px;max-width:1180px;margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:1.18rem}
.nav-links{display:flex;gap:28px;margin-left:8px}.nav-links a{font-size:.92rem;color:var(--dim);transition:color .18s}.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}.nav-cta .login{font-size:.92rem;color:var(--dim)}.nav-cta .login:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c;box-shadow:0 6px 22px rgba(18,196,174,.22)}.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}.btn-ghost:hover{background:rgba(255,255,255,.07)}
.head{position:relative;padding:70px 0 40px;overflow:hidden}
.head h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.025em;margin:16px 0 0;line-height:1.05}
.head p{color:var(--dim);font-size:1.1rem;margin-top:16px;max-width:34em}
/* category nav */
.catnav{position:sticky;top:68px;z-index:40;background:color-mix(in srgb, var(--topbar-chrome) 86%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.catnav-in{display:flex;gap:6px;max-width:var(--wrap);margin:0 auto;padding:12px 28px;overflow-x:auto}
.catnav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--dim);padding:7px 13px;border-radius:999px;border:1px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.catnav a:hover{color:var(--text);border-color:var(--line)}
.faqsec{padding:48px 0 8px;scroll-margin-top:130px}
.faqsec h2{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;margin-bottom:6px;display:flex;align-items:center;gap:12px}
.faqsec h2 .ic{width:34px;height:34px;border-radius:9px;background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.25);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.faqsec .secsub{color:var(--faint);font-size:.9rem;margin-bottom:18px;padding-left:46px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--display);font-weight:500;font-size:1.04rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .2s}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;background:var(--teal);border-radius:2px}
.qa summary .pm::before{top:50%;left:3px;right:3px;height:2px;transform:translateY(-1px)}
.qa summary .pm::after{left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-1px);transition:opacity .2s}
.qa[open] summary .pm::after{opacity:0}
.qa .a{padding:0 4px 22px;color:var(--dim);font-size:.96rem;max-width:68ch}
.qa .a code{font-family:var(--mono);font-size:.84em;background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--cyan)}
/* contact cta */
.contact{margin:60px 0 90px;background:linear-gradient(135deg,var(--surface),var(--bg2));border:1px solid var(--line2);border-radius:18px;padding:40px;text-align:center;position:relative;overflow:hidden}
.contact h2{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:-.01em}
.contact p{color:var(--dim);margin:12px auto 24px;max-width:30em}
.contact .ca{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
footer{border-top:1px solid var(--line);padding:36px 0;background:var(--bg2);color:var(--faint);font-size:.82rem}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.foot-in .mono{font-family:var(--mono);letter-spacing:.04em}
@media(max-width:760px){.nav-links{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* --- from get-started.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--ui);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:500}
.chart-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chart-bg::before{content:"";position:absolute;inset:-2px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 30% 0%,#000,transparent 75%)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;height:68px;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em}
.nav-links{display:flex;gap:28px;margin-left:8px}
.nav-links a{font-size:.92rem;color:var(--dim);transition:color .18s}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-cta .login{font-size:.92rem;color:var(--dim)}
.nav-cta .login:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c;box-shadow:0 6px 22px rgba(18,196,174,.22)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(18,196,174,.32)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.btn-lg{padding:14px 26px;font-size:1rem}
.btn-block{width:100%}

/* layout */
.page{position:relative;padding:64px 0 90px}
.glow{position:absolute;top:-160px;left:-140px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(27,108,168,.28),transparent 62%);pointer-events:none}
.head{position:relative;max-width:40em;margin-bottom:46px}
.head h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4vw,3.1rem);letter-spacing:-.025em;line-height:1.06;margin:16px 0 0}
.head p{color:var(--dim);font-size:1.12rem;margin-top:18px;max-width:32em}

.grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}

/* form card */
.form-card{background:linear-gradient(180deg,var(--card),var(--surface));border:1px solid var(--line2);border-radius:18px;padding:30px;box-shadow:0 40px 90px -34px rgba(0,0,0,.7)}
.form-card h2{font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.01em}
.form-card .sub{color:var(--dim);font-size:.94rem;margin-top:6px}
.fld{margin-top:20px}
.fld label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.fld input,.fld select{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:13px 14px;color:var(--text);font-family:var(--ui);font-size:.96rem;transition:border-color .18s,box-shadow .18s}
.fld input::placeholder{color:var(--faint)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,196,174,.16)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* surface picker */
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick .box{border:1px solid var(--line2);border-radius:12px;padding:14px 12px;text-align:center;transition:border-color .18s,background .18s,transform .15s;background:var(--bg2)}
.pick .box .pi{display:block;margin:0 auto 8px;color:var(--dim);transition:color .18s}
.pick .box .pn{font-family:var(--display);font-weight:600;font-size:.95rem}
.pick .box .pd{font-size:.72rem;color:var(--faint);margin-top:3px}
.pick input:checked + .box{border-color:var(--teal);background:rgba(18,196,174,.08);transform:translateY(-2px)}
.pick input:checked + .box .pi{color:var(--teal)}
.pick input:focus-visible + .box{box-shadow:0 0 0 3px rgba(18,196,174,.25)}
.form-foot{margin-top:26px}
.fineprint{color:var(--faint);font-size:.78rem;text-align:center;margin-top:14px}
.fineprint a{color:var(--dim);text-decoration:underline}

/* aside: what happens next */
.aside h3{font-family:var(--display);font-weight:600;font-size:1.18rem;margin-bottom:6px}
.aside .ah{color:var(--dim);font-size:.92rem;margin-bottom:20px}
.steps{list-style:none;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:15px;top:8px;bottom:18px;width:1px;background:linear-gradient(var(--teal),var(--line))}
.steps li{position:relative;padding:0 0 22px 46px;counter-increment:s}
.steps li .num{position:absolute;left:0;top:-2px;width:31px;height:31px;border-radius:50%;background:var(--bg2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.82rem;color:var(--teal);z-index:2}
.steps li h4{font-family:var(--display);font-weight:600;font-size:1rem;margin-bottom:3px}
.steps li p{color:var(--dim);font-size:.88rem}
.assure{margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px}
.assure .row{display:flex;align-items:flex-start;gap:11px;font-size:.88rem;color:var(--text)}
.assure .row + .row{margin-top:12px}
.assure svg{flex:0 0 auto;margin-top:2px;color:var(--ok)}

/* success state */
.done{display:none;text-align:center;padding:14px 4px 6px}
.done.show{display:block}
.form-fields.hide{display:none}
.done .seal{width:64px;height:64px;border-radius:50%;background:rgba(30,168,92,.12);border:1px solid rgba(30,168,92,.35);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--ok)}
.done h2{font-family:var(--display);font-weight:600;font-size:1.5rem}
.done p{color:var(--dim);margin-top:10px;font-size:.96rem;max-width:30em;margin-left:auto;margin-right:auto}
.done .key{font-family:var(--mono);background:var(--bg2);border:1px dashed var(--line2);border-radius:10px;padding:12px 16px;margin:22px auto 0;display:inline-block;color:var(--teal);letter-spacing:.08em}

footer{border-top:1px solid var(--line);padding:36px 0;background:var(--bg2);color:var(--faint);font-size:.82rem}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-in .mono{font-family:var(--mono);letter-spacing:.04em}

@media(max-width:880px){
  .grid{grid-template-columns:1fr;gap:30px}
  .nav-links{display:none}
}
@media(max-width:520px){
  .fld-row,.picker{grid-template-columns:1fr}
  .picker{grid-template-columns:repeat(3,1fr)}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* --- from releases.html --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:500}
.chart-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chart-bg::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 72%)}
.nav{position:sticky;top:0;z-index:50;background:var(--nav-glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;height:68px;max-width:1180px;margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:1.18rem}
.nav-links{display:flex;gap:28px;margin-left:8px}.nav-links a{font-size:.92rem;color:var(--dim);transition:color .18s}.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}.nav-cta .login{font-size:.92rem;color:var(--dim)}.nav-cta .login:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.9rem;padding:11px 18px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c;box-shadow:0 6px 22px rgba(18,196,174,.22)}.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}.btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-sm{padding:8px 13px;font-size:.82rem}
.head{position:relative;padding:70px 0 30px;overflow:hidden}
.head h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.025em;margin:16px 0 0;line-height:1.05}
.head p{color:var(--dim);font-size:1.1rem;margin-top:16px;max-width:34em}
/* latest */
.latest{position:relative;margin:8px 0 50px;background:linear-gradient(135deg,var(--card),var(--surface));border:1px solid var(--line2);border-radius:18px;padding:30px;overflow:hidden}
.latest .glow{position:absolute;top:-120px;right:-100px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(18,196,174,.22),transparent 62%);pointer-events:none}
.latest-top{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vtag{font-family:var(--mono);font-size:.86rem;color:var(--teal);background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.3);padding:6px 13px;border-radius:9px;letter-spacing:.04em}
.chan{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;color:var(--ok);background:rgba(30,168,92,.1);border:1px solid rgba(30,168,92,.3)}
.latest-top .date{font-family:var(--mono);font-size:.78rem;color:var(--faint);margin-left:auto}
.latest h2{position:relative;font-family:var(--display);font-weight:600;font-size:1.5rem;margin:18px 0 4px}
.latest .desc{position:relative;color:var(--dim);font-size:.98rem;max-width:46em}
.notes{position:relative;display:flex;flex-direction:column;gap:8px;margin:20px 0 24px}
.notes li{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;color:var(--text);list-style:none}
.notes li .ty{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;flex:0 0 auto;margin-top:2px}
.notes li .ty.new{color:var(--teal);background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.25)}
.notes li .ty.fix{color:var(--sky);background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25)}
.notes li .ty.imp{color:var(--warn);background:rgba(224,140,0,.1);border:1px solid rgba(224,140,0,.25)}
.dlrow{position:relative;display:flex;gap:12px;flex-wrap:wrap}
.dl{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:12px 16px;transition:border-color .15s,transform .15s}
.dl:hover{border-color:var(--teal);transform:translateY(-2px)}
.dl .di{color:var(--teal)}
.dl .dm b{font-size:.9rem;display:block}.dl .dm span{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
/* history */
.hsec h3{font-family:var(--display);font-weight:600;font-size:1.2rem;margin-bottom:18px}
.rel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:12px;transition:border-color .15s}
.rel:hover{border-color:var(--line2)}
.rel-top{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.rel-top .rv{font-family:var(--mono);font-size:.92rem;color:var(--text)}
.chan.beta{color:var(--warn);background:rgba(224,140,0,.1);border-color:rgba(224,140,0,.3)}
.rel-top .rd{font-family:var(--mono);font-size:.74rem;color:var(--faint);margin-left:auto}
.rel p{color:var(--dim);font-size:.9rem;margin-top:10px}
.rel-foot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.plat{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);padding:4px 9px;border-radius:6px}
.rel-foot .more{margin-left:auto;font-size:.82rem;color:var(--teal)}
.rel-foot .more:hover{text-decoration:underline}
footer{border-top:1px solid var(--line);padding:36px 0;background:var(--bg2);color:var(--faint);font-size:.82rem;margin-top:60px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.foot-in .mono{font-family:var(--mono);letter-spacing:.04em}
@media(max-width:760px){.nav-links{display:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* --- Operations console (portal shell variant) --- */
.vn-ops-app{--side:248px}
.vn-ops-app .side{border-right:1px solid var(--line)}
.vn-ops-badge{font-family:var(--mono);font-size:.66rem;background:var(--crit);color:#fff;padding:1px 7px;border-radius:999px}

/* --- Legacy VesselUI compat (vp-*) --- */
.vp-shell,.vn-app--portal{min-height:100vh;background:var(--bg)}
.vp-main,.vn-portal-content{padding:26px 30px 50px;flex:1;min-width:0}
.vp-page-title{font-family:var(--display);font-weight:600;font-size:1.32rem;margin:0 0 8px}
.vp-page-desc{color:var(--dim);font-size:.92rem;margin-bottom:20px}
.vp-table-wrap{overflow-x:auto}
.vp-table{width:100%;border-collapse:collapse;font-size:.88rem}
.vp-table th,.vp-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.vp-table th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);background:var(--surface)}
.vp-table tbody tr:hover{background:rgba(255,255,255,.02)}
.vp-callout{background:rgba(18,196,174,.1);border:1px solid rgba(18,196,174,.25);border-radius:11px;padding:12px 16px;color:var(--text);font-size:.88rem}
.vp-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:18px 20px;margin-bottom:14px}
.vp-license-card{display:grid;gap:12px}
.vp-subnav-wrap{display:none}
.vn-marketing-page .section{padding:72px 0}
.vn-legal-page .wrap{max-width:820px;padding:48px 28px 80px;margin:0 auto}
.vn-legal-head{margin-bottom:32px;text-align:center}
.vn-legal-head h1{font-family:var(--display);font-size:clamp(1.85rem,3.5vw,2.35rem);margin:10px 0 12px;letter-spacing:-.02em}
.vn-legal-meta{color:var(--dim);font-size:.95rem;margin:0}
.vn-legal-meta a{color:var(--teal)}
.vn-legal-meta-sep{margin:0 .35em;opacity:.5}
.vn-legal-page h1{font-family:var(--display);font-size:2rem;margin-bottom:24px}
.vn-legal-lead{font-size:1.05rem;line-height:1.65;color:var(--dim);margin:0 0 28px}
.vn-legal-summary{background:linear-gradient(160deg,var(--surface),var(--bg2));border:1px solid var(--line2);border-radius:16px;padding:22px 24px;margin:0 0 32px}
.vn-legal-summary h2{font-family:var(--display);font-size:1rem;margin:0 0 14px;color:var(--text)}
.vn-legal-body h2{font-family:var(--display);font-size:1.2rem;margin:32px 0 12px;padding-top:8px;border-top:1px solid var(--line)}
.vn-legal-body h2:first-child,.vn-legal-summary+h2{border-top:none;padding-top:0;margin-top:0}
.vn-legal-body h3{font-family:var(--display);font-size:1.02rem;margin:20px 0 10px;color:var(--text)}
.vn-legal-body ul{margin:0 0 16px;padding-left:1.35rem;color:var(--dim);line-height:1.65}
.vn-legal-body ul li{margin-bottom:.55em}
.vn-legal-body ul li strong{color:var(--text)}
.vn-legal-body p{color:var(--dim);line-height:1.65;margin:0 0 14px}
.vn-legal-body a{color:var(--teal)}
.vn-legal-updated{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:.9rem}
.vn-mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:var(--vn-z-tabs,50);background:var(--bg2);border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr);gap:4px}
.vn-mobile-nav.vn-mobile-nav--3{grid-template-columns:repeat(3,1fr)}
.vn-mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.65rem;color:var(--dim);padding:8px 4px;border-radius:9px;text-align:center;position:relative}
.vn-mobile-nav a.active,.vn-mobile-nav a:hover{color:var(--teal);background:rgba(18,196,174,.08)}
.vn-mobile-nav .vn-mobile-nav-badge{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--crit,#e11);color:#fff;font-size:.58rem;line-height:16px;font-weight:700}
/* Align with drawer/hamburger band (?860) so tablet mid-band keeps secondary nav */
@media(max-width:860px){.vn-mobile-nav{display:grid}.vn-app--portal.has-mobile-nav{padding-bottom:var(--vn-mobile-nav-clearance,72px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* --- WP theme extras --- */
.side-brand-link{display:flex;align-items:center;gap:11px;color:inherit}
.site-footer{background:var(--bg2);border-top:1px solid var(--line);padding:48px 0 0;margin-top:0}
.site-footer .foot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.site-footer .foot-brand p{color:var(--dim);font-size:.9rem;margin-top:12px;max-width:22em}
.site-footer .foot-col h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.site-footer .foot-col a{display:block;color:var(--dim);font-size:.88rem;margin-bottom:8px}
.site-footer .foot-col a:hover{color:var(--text)}
.site-footer .foot-legal{max-width:var(--wrap);margin:32px auto 0;padding:16px 28px 0;border-top:1px solid var(--line);color:var(--faint);font-size:.78rem}
.vn-site-nav-dropdown{position:absolute;top:68px;right:16px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:12px;min-width:200px;z-index:60;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.vn-site-nav-dropdown[hidden]{display:none!important}
.vn-site-nav-dropdown a{padding:8px 12px;border-radius:8px;color:var(--dim)}
.vn-site-nav-dropdown a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.vn-portal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:var(--vn-z-overlay,90);pointer-events:auto}
.vn-portal-overlay[hidden]{display:none!important;pointer-events:none}
body.vn-sidebar-open{overflow:hidden}
.vn-marketing-shell{min-height:100vh;background:var(--bg)}
.vn-ops-table{width:100%;border-collapse:collapse;font-size:.86rem}
.vn-ops-table th,.vn-ops-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.vn-ops-table th{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.vn-ops-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
/* Portal schedule (mobile-first) */
.vn-portal-schedule-page .vn-portal-toolbar{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.vn-portal-schedule-page .vn-portal-toolbar-row{display:flex;flex-direction:column;gap:6px}
.vn-portal-schedule-page .vn-portal-toolbar-row label{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.vn-portal-schedule-page .vn-portal-select,.vn-portal-schedule-page .vn-portal-input{padding:10px 12px;background:var(--surface);border:1px solid var(--line2);border-radius:10px;color:var(--text);font-size:1rem;width:100%;box-sizing:border-box}
.vn-portal-schedule-page .vn-portal-toolbar-actions{display:flex;flex-direction:column;gap:8px}
@media(min-width:640px){
  .vn-portal-schedule-page .vn-portal-toolbar{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
  .vn-portal-schedule-page .vn-portal-toolbar-row{flex:1;min-width:140px}
  .vn-portal-schedule-page .vn-portal-toolbar-actions{flex-direction:row;margin-left:auto}
}
.vn-portal-events{list-style:none;padding:0;margin:0}
.vn-portal-events li{padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:11px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px}
@media(min-width:480px){.vn-portal-events li{flex-direction:row;align-items:flex-start;gap:14px}}
.vn-portal-events .time{font-family:var(--mono);font-weight:600;color:var(--teal);min-width:4.5rem}
.vn-portal-no-events{color:var(--dim);font-size:.92rem}
.vn-portal-message{padding:12px;border-radius:10px;margin-bottom:16px;display:none;font-size:.9rem}
.vn-portal-message.success{background:rgba(30,168,92,.12);border:1px solid rgba(30,168,92,.35)}
.vn-portal-message.error{background:rgba(214,48,48,.12);border:1px solid rgba(214,48,48,.35)}
.vn-portal-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.vn-portal-calendar-grid .day{padding:8px 4px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;font-size:.82rem;min-height:36px;display:flex;align-items:center;justify-content:center}
.vn-portal-calendar-grid .day-label{font-family:var(--mono);font-size:.58rem;color:var(--faint);background:transparent;border-color:transparent}
.vn-portal-calendar-grid .day-empty{background:transparent;border-color:transparent}
.vn-portal-calendar-grid .day.has-events{border-color:var(--teal);font-weight:600;cursor:pointer}
.vn-portal-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:10000;padding:0}
@media(min-width:640px){.vn-portal-modal{align-items:center;padding:16px}}
.vn-portal-modal[hidden]{display:none!important}
.vn-portal-modal-inner{background:var(--card);padding:20px;border-radius:16px 16px 0 0;width:100%;max-height:90vh;overflow:auto;border:1px solid var(--line2)}
@media(min-width:640px){.vn-portal-modal-inner{border-radius:16px;max-width:520px}}
.vn-portal-modal-inner h3{margin-top:0;font-family:var(--display)}
.vn-portal-edit-item{margin-bottom:14px;padding:12px;background:var(--bg2);border-radius:10px;border:1px solid var(--line)}
.vn-portal-edit-item input,.vn-portal-edit-item textarea{width:100%;padding:8px 10px;margin-top:4px;background:var(--surface);border:1px solid var(--line2);border-radius:8px;color:var(--text);box-sizing:border-box;font-size:1rem}
.vn-portal-edit-item .remove-event{margin-top:8px;color:var(--crit);cursor:pointer;font-size:.875rem}
.vn-portal-edit-item label{display:block;margin-top:8px;font-size:.78rem;color:var(--dim)}
.vn-portal-edit-item label:first-child{margin-top:0}
.vn-portal-cat{font-size:.72rem;background:var(--teal);color:#04101c;padding:2px 7px;border-radius:999px;margin-left:4px}
.vn-portal-modal-actions{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:900px){.site-footer .foot-in{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.site-footer .foot-in{grid-template-columns:1fr}}

/* Legacy vn-btn aliases ? Concept .btn */
.vn-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;text-decoration:none}
.vn-btn-primary,.vn-btn.vn-btn-primary{background:linear-gradient(135deg,var(--teal),var(--accent));color:#04101c;box-shadow:0 6px 22px rgba(18,196,174,.22)}
.vn-btn-outline,.vn-btn.vn-btn-outline{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--text)}
.vn-landing .vn-hero--landing,.vn-marketing-page .hero{position:relative;padding:84px 0 96px}

/* Login page */
.vn-login-page{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}
.vn-login-view{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:32px 28px}
.vn-login-box{background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:32px;max-width:420px;width:100%}
.vn-login-title{font-family:var(--display);font-size:1.6rem;margin:0 0 8px}
.vn-login-tagline{color:var(--dim);margin-bottom:24px;font-size:.92rem}
.vn-login-input{width:100%;padding:11px 14px;border-radius:9px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);margin-top:6px}
.vn-login-submit{width:100%;justify-content:center;margin-top:8px;background:var(--btn-primary-bg,var(--accent,#1b6ca8));color:var(--btn-primary-fg,#fff);border:none}
.vn-login-box .btn-primary{width:100%;justify-content:center;margin-top:8px}
.vn-login-submit:hover,.vn-login-box .btn-primary:hover{background:var(--btn-primary-hover,var(--blue-400,#2279d4))}

/* Portal sidebar: fill shell height; nav list scrolls inside */
.app.vn-app--portal .side,
.app.vn-ops-app .side{
  height:100%;
  max-height:100%;
  overflow:hidden;
}
.app.vn-app--portal .side .side-brand,
.app.vn-ops-app .side .side-brand,
.app.vn-app--portal .side .side-foot,
.app.vn-ops-app .side .side-foot{
  flex:0 0 auto;
}
.app.vn-app--portal .side .side-nav-scroll,
.app.vn-ops-app .side .side-nav-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

/* Admin view-as strip ? outside .content to avoid double padding */
.vp-view-as-banner{
  padding:10px 20px 0;
  flex:0 0 auto;
}
.vp-view-as-banner .vp-callout{margin:0}

/* Alarm cards: keep severity chip from gluing onto the title */
.app.vn-app--portal .vn-alert-card__head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.app.vn-app--portal .vn-sev-chip{
  flex:0 0 auto;
}