/* ============================================
 Harbor
 Clean, modern, product-led - dark neutral canvas with
 the brand's signature cyan-to-violet-to-pink gradient
 used sparingly as the single accent thread.
 ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
 --hull: #08080b;
 --hull-2: #0d0d12;
 --panel: #131318;
 --panel-2: #191920;
 --phosphor: #2f7dff;
 --phosphor-dim: #2a63d1;
 --cyan: #2ddcd6;
 --brass: #ff5fc9;
 --brass-dim: #c93fa0;
 --parchment: #f2e8d5;
 --ink: #e9e9f0;
 --foam: #f7f7fa;
 --muted: #93939f;
 --danger: #ff6fa8;
 --violet: #8a5cf5;
 --violet-dim: #6a3fd0;
 --line: rgba(233,233,240,0.09);
 --radius: 16px;
 --radius-lg: 24px;
 --maxw: 1160px;
 --brand-gradient: linear-gradient(115deg, var(--cyan), var(--phosphor) 45%, var(--violet) 75%, var(--brass));

 --hdr-1: rgba(5,15,13,0.7);
 --hdr-2: rgba(5,15,13,0.52);
 --hdr-3: rgba(2,8,7,0.4);
 --hdr-4: rgba(5,15,13,0.88);
 --hdr-5: rgba(5,15,13,0.74);
 --nav-dd: linear-gradient(165deg, rgba(31,32,80,0.97), rgba(10,11,32,0.98));

 --wash-006: rgba(255,255,255,0.006);
 --wash-008: rgba(255,255,255,0.008);
 --wash-02: rgba(255,255,255,0.02);
 --wash-025: rgba(255,255,255,0.025);
 --wash-03: rgba(255,255,255,0.03);
 --wash-04: rgba(255,255,255,0.04);
 --wash-05: rgba(255,255,255,0.05);
 --wash-06: rgba(255,255,255,0.06);
 --wash-07: rgba(255,255,255,0.07);

 color-scheme: dark;
}

/* ---------- Light theme ---------- */
[data-theme="light"]{
 --hull: #f7f7f9;
 --hull-2: #eeeef2;
 --panel: #ffffff;
 --panel-2: #f7f7fa;
 --phosphor: #2f5fd8;
 --phosphor-dim: #2449ab;
 --cyan: #0e9e93;
 --brass: #c23f9b;
 --brass-dim: #9c2f7d;
 --parchment: #6b5a33;
 --ink: #1c1c24;
 --foam: #0c0c12;
 --muted: #64646f;
 --danger: #d43f74;
 --violet: #5f3bc4;
 --violet-dim: #4c2f9e;
 --line: rgba(20,20,30,0.1);

 --hdr-1: rgba(255,255,255,0.72);
 --hdr-2: rgba(255,255,255,0.6);
 --hdr-3: rgba(30,20,60,0.12);
 --hdr-4: rgba(255,255,255,0.9);
 --hdr-5: rgba(255,255,255,0.82);
 --nav-dd: linear-gradient(165deg, rgba(255,255,255,0.99), rgba(235,233,250,0.99));

 --wash-006: rgba(20,18,50,0.018);
 --wash-008: rgba(20,18,50,0.024);
 --wash-02: rgba(20,18,50,0.04);
 --wash-025: rgba(20,18,50,0.05);
 --wash-03: rgba(20,18,50,0.055);
 --wash-04: rgba(20,18,50,0.065);
 --wash-05: rgba(20,18,50,0.08);
 --wash-06: rgba(20,18,50,0.09);
 --wash-07: rgba(20,18,50,0.1);

 color-scheme: light;
}
[data-theme="light"] body{
 background:
 radial-gradient(ellipse 900px 520px at 12% -10%, rgba(45,220,214,0.08), transparent 60%),
 radial-gradient(ellipse 760px 520px at 104% 6%, rgba(255,95,201,0.06), transparent 55%),
 var(--hull);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
 margin:0;
 overflow-x:hidden;
 background:
 radial-gradient(ellipse 900px 520px at 12% -10%, rgba(45,220,214,0.10), transparent 60%),
 radial-gradient(ellipse 760px 520px at 104% 6%, rgba(255,95,201,0.07), transparent 55%),
 var(--hull);
 color:var(--ink);
 font-family:'Inter', system-ui, sans-serif;
 line-height:1.6;
 -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{
 font-family:'Manrope', system-ui, sans-serif;
 font-weight:600;
 line-height:1.08;
 margin:0 0 0.5em;
 letter-spacing:-0.01em;
 color:var(--foam);
}
h1{font-size:clamp(2.4rem,5.5vw,4.2rem); font-weight:800; letter-spacing:-0.02em;}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:700; letter-spacing:-0.015em;}
h3{font-size:1.22rem; font-weight:700;}
p{color:var(--muted); margin:0 0 1em;}
.eyebrow{
 font-family:'Inter', sans-serif;
 font-size:0.78rem;
 font-weight:600;
 letter-spacing:0.02em;
 color:var(--ink);
 display:inline-flex;
 align-items:center;
 gap:0.6em;
 margin-bottom:1.1em;
 padding:6px 14px 6px 10px;
 border:1px solid var(--line);
 border-radius:999px;
 background:var(--wash-04);
}
.eyebrow::before{
 content:"";
 width:6px;height:6px;border-radius:50%;
 background:var(--brand-gradient);
 box-shadow:0 0 0 4px rgba(47,125,255,0.14);
 flex:none;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* ---------- Skip link / focus ---------- */
.skip-link{
 position:absolute; left:-999px; top:0;
 background:var(--brass); color:#1a1200; padding:10px 16px;
 border-radius:6px; z-index:200; font-weight:600;
}
.skip-link:focus{left:16px; top:16px;}
:focus-visible{outline:2px solid var(--phosphor); outline-offset:3px; border-radius:4px;}

/* ---------- Header / Nav ---------- */
header.site{
 position:sticky; top:0; z-index:100;
 background:var(--hdr-1);
 backdrop-filter:blur(14px);
 border-bottom:1px solid var(--line);
 transition:background .3s ease, box-shadow .3s ease;
}
@supports (backdrop-filter: blur(1px)){
 header.site{background:var(--hdr-2);}
}
header.site.scrolled{box-shadow:0 12px 30px var(--hdr-3); background:var(--hdr-4);}
@supports (backdrop-filter: blur(1px)){
 header.site.scrolled{background:var(--hdr-5);}
}
.nav{
 display:flex; align-items:center; justify-content:space-between;
 padding:14px 0;
}
.brand{
 display:flex; align-items:center; gap:12px; flex:none;
 font-family:'Manrope', sans-serif; font-weight:600; font-size:1.2rem; color:var(--foam);
 letter-spacing:0.01em; white-space:nowrap;
}
.brand img{height:34px; width:34px; object-fit:contain; flex:none; transition:transform .35s cubic-bezier(.34,1.56,.64,1);
 filter:drop-shadow(0 0 10px rgba(47,125,255,0.25));}
.brand:hover img{transform:scale(1.08) rotate(-6deg);}
.status-dot{
 width:8px; height:8px; border-radius:50%;
 background:var(--phosphor);
 box-shadow:0 0 0 3px rgba(47,125,255,0.18);
 animation:pulse 2.4s ease-in-out infinite;
 margin-left:2px;
}
@keyframes pulse{
 0%,100%{box-shadow:0 0 0 3px rgba(47,125,255,0.18);}
 50%{box-shadow:0 0 0 6px rgba(47,125,255,0.05);}
}
/* On status.html the dot is updated live to reflect real system health - it should never keep claiming "All systems online" during an outage. */
.status-dot.dot-degraded{background:var(--brass); box-shadow:0 0 0 3px rgba(255,95,201,0.18);}
.status-dot.dot-outage{background:var(--danger); box-shadow:0 0 0 3px rgba(255,111,87,0.18);}
.status-dot.dot-maintenance{background:var(--cyan); box-shadow:0 0 0 3px rgba(45,220,214,0.18);}
nav.links{display:flex; align-items:center; gap:2px; position:relative;}
nav.links a{
 position:relative; z-index:1;
 padding:9px 14px; border-radius:6px; font-size:0.92rem; color:var(--muted);
 font-weight:500; transition:color .2s ease;
 font-family:'Inter', sans-serif; white-space:nowrap;
}
nav.links a:hover{color:var(--ink);}
nav.links a[aria-current="page"]{color:var(--phosphor);}

nav.links a.btn-primary,
nav.links a.btn-primary:hover,
nav.links .btn-disabled{
 color:#07160f;
 padding:9px 18px;
 font-family:'Inter', sans-serif;
}

/* "More" dropdown - groups the lower-traffic nav pages so the bar
 doesn't have to show every link at once. */
.nav-more{position:relative; z-index:1;}
.nav-more-toggle{
 display:inline-flex; align-items:center; gap:5px;
 padding:9px 12px; border-radius:6px; font-size:0.92rem; color:var(--muted);
 font-weight:500; font-family:'Inter', sans-serif; white-space:nowrap;
 background:none; border:none; cursor:pointer; transition:color .2s ease;
}
.nav-more-toggle:hover,
.nav-more-toggle[aria-expanded="true"]{color:var(--ink);}
.nav-more-toggle-current{color:var(--phosphor);}
.nav-more-chev{transition:transform .25s cubic-bezier(.16,.8,.24,1); flex:none;}
.nav-more-toggle[aria-expanded="true"] .nav-more-chev{transform:rotate(180deg);}
.nav-more-menu{
 position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,-6px);
 min-width:150px; padding:6px; margin:0;
 display:flex; flex-direction:column; gap:1px;
 background:var(--nav-dd); border:1px solid var(--line); border-radius:12px;
 box-shadow:0 20px 46px rgba(2,8,7,0.4);
 opacity:0; visibility:hidden; pointer-events:none;
 transition:opacity .2s ease, transform .2s cubic-bezier(.16,.8,.24,1), visibility .2s;
}
.nav-more.open .nav-more-menu{
 opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.nav-more-menu a{
 padding:9px 12px; border-radius:7px; font-size:0.92rem; color:var(--muted);
 font-weight:500; font-family:'Inter', sans-serif; white-space:nowrap;
}
.nav-more-menu a:hover{background:var(--wash-05); color:var(--ink);}
.nav-more-menu a[aria-current="page"]{color:var(--phosphor); background:rgba(47,125,255,0.1);}

/* Single floating highlight that glides between links on hover, and
 rests under the current page when the pointer leaves. */
.nav-indicator{
 position:absolute; top:6px; left:0; z-index:0;
 height:calc(100% - 12px); width:0;
 border-radius:6px; opacity:0; pointer-events:none;
 background:linear-gradient(160deg, rgba(47,125,255,0.14), rgba(47,125,255,0.04));
 border:1px solid rgba(47,125,255,0.26);
 transition:transform .4s cubic-bezier(.16,.8,.24,1), width .4s cubic-bezier(.16,.8,.24,1), opacity .25s ease;
}

.btn{
 position:relative; overflow:hidden;
 display:inline-flex; align-items:center; gap:8px;
 padding:11px 22px; border-radius:999px; font-weight:600; font-size:0.92rem;
 cursor:pointer; border:1px solid transparent; transition:transform .2s cubic-bezier(.16,.8,.24,1), box-shadow .2s ease, background .2s ease;
}
.btn::after{
 content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
 background:linear-gradient(115deg, transparent, rgba(255,255,255,0.25), transparent);
 transform:skewX(-20deg); transition:left .6s ease;
}
.btn:hover::after{left:130%;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{
 background:var(--brand-gradient);
 color:#08080b;
 box-shadow:0 6px 20px rgba(47,125,255,0.22);
 border:1px solid rgba(255,255,255,0.16);
}
.btn-primary:hover{box-shadow:0 10px 30px rgba(47,125,255,0.32);}
.btn-ghost{
 background:var(--wash-03);
 border-color:var(--line); color:var(--ink);
}
.btn-ghost:hover{background:var(--wash-06); border-color:rgba(233,233,240,0.2);}

/* Bot is still in development - every "Add to Discord" button sitewide is
 swapped for this disabled, non-clickable state until invites open. */
.btn-disabled{
 background:var(--wash-04); color:var(--muted) !important;
 border:1px dashed var(--line); cursor:not-allowed; box-shadow:none;
}
.btn-disabled:hover{transform:none; box-shadow:none;}
.btn-disabled::after{display:none;}

.nav-toggle{
 display:none; position:relative; background:none; border:none; color:var(--ink);
 width:38px; height:38px; padding:0; border-radius:6px; cursor:pointer;
 transition:background .15s ease;
}
.nav-toggle:hover{background:var(--wash-06);}
.nav-toggle svg line{
 transform-box:fill-box; transform-origin:center;
 transition:transform .32s cubic-bezier(.16,.8,.24,1), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] svg line:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] svg line:nth-child(2){opacity:0; transform:scaleX(0);}
.nav-toggle[aria-expanded="true"] svg line:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.bell-btn{
 display:inline-flex; align-items:center; justify-content:center; position:relative;
 width:36px; height:36px; padding:0; margin-left:6px; flex-shrink:0;
 border-radius:99px; border:1px solid var(--line); background:var(--wash-03);
 color:var(--muted); cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.bell-btn:hover{background:var(--wash-07); color:var(--ink);}
.bell-btn:disabled{opacity:0.6; cursor:default;}
.bell-btn.is-on{border-color:var(--phosphor); background:rgba(47,125,255,0.14); color:var(--phosphor);}
.bell-btn.is-on::after{
 content:''; position:absolute; top:6px; right:7px; width:7px; height:7px;
 border-radius:50%; background:var(--phosphor); box-shadow:0 0 0 2px var(--hull);
}
.bell-btn.is-blocked{color:var(--muted); opacity:0.5;}

.theme-toggle{
 display:inline-flex; align-items:center; justify-content:center; position:relative;
 width:36px; height:36px; padding:0; margin-left:6px; flex-shrink:0;
 border-radius:99px; border:1px solid var(--line); background:var(--wash-03);
 color:var(--muted); cursor:pointer;
 transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle:hover{background:var(--wash-07); color:var(--ink);}
.theme-toggle svg{width:18px; height:18px; position:absolute; transition:opacity .25s ease, transform .35s cubic-bezier(.16,.8,.24,1);}
.theme-toggle .icon-sun{opacity:0; transform:rotate(-60deg) scale(.4);}
.theme-toggle .icon-moon{opacity:1; transform:rotate(0) scale(1);}
[data-theme="light"] .theme-toggle .icon-sun{opacity:1; transform:rotate(0) scale(1);}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0; transform:rotate(60deg) scale(.4);}

/* ---------- Hero ---------- */
.hero{
 position:relative; overflow:hidden;
 padding:96px 0 0;
 text-align:center;
}
.hero-grid{
 max-width:640px;
 margin:0 auto;
}
.hero .eyebrow{margin-left:auto; margin-right:auto;}
.hero h1{margin-bottom:0.4em;}
.hero .lede{font-size:1.12rem; max-width:46ch; margin:0 auto 1.8em;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:2.6em; justify-content:center;}
.hero-stats{
 gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
 display:inline-flex; margin-bottom:3.2em;
}
.hero-stats div{padding:14px 22px; border-right:1px solid var(--line); font-family:'JetBrains Mono',monospace;}
.hero-stats div:last-child{border-right:none;}
.hero-stats strong{display:block; font-size:1.4rem; color:var(--foam); font-weight:600; font-family:'Manrope',sans-serif;}
.hero-stats span{font-size:0.78rem; color:var(--muted); letter-spacing:0.04em;}

/* Scrolling feature marquee - a continuous strip of feature chips
 gliding beneath the hero, full-bleed with faded edges. Purely a
 visual index of what the product does; each chip links to the page
 that covers it. Duplicated once in markup so the loop has no seam. */
.marquee{
 position:relative; width:100vw; margin-left:calc(50% - 50vw);
 overflow:hidden; padding:22px 0 96px;
 -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
 mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
 display:flex; gap:12px; width:max-content;
 animation:marqueeScroll 34s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-chip{
 display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
 padding:10px 18px; border-radius:999px; border:1px solid var(--line);
 background:var(--wash-03); color:var(--muted); font-size:0.88rem; font-weight:500;
 transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.marquee-chip:hover{color:var(--ink); border-color:rgba(233,233,240,0.22); background:var(--wash-06);}
.marquee-chip .dot{width:5px; height:5px; border-radius:50%; background:var(--brand-gradient); flex:none;}
@keyframes marqueeScroll{
 from{transform:translateX(0);}
 to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
 .marquee-track{animation:none;}
}

/* ---------- Sections ---------- */
section{padding:76px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

/* Clean product cards: flat surface, soft border, gentle hover lift */
.card{
 position:relative;
 overflow:hidden;
 background:var(--wash-025);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:30px 26px;
 transition:transform .3s cubic-bezier(.16,.8,.24,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.card:hover{
 transform:translateY(-4px);
 border-color:rgba(233,233,240,0.18);
 background:var(--wash-04);
 box-shadow:0 16px 36px rgba(0,0,0,0.35);
}
.card .icon{
 transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .icon{transform:scale(1.06);}
.card .icon{
 width:42px; height:42px; border-radius:11px;
 background:rgba(47,125,255,0.12);
 display:flex; align-items:center; justify-content:center;
 margin-bottom:18px; color:var(--phosphor); font-size:1.1rem;
}
.card .icon.icon-brass{background:rgba(255,95,201,0.12); color:var(--brass);}
.card .icon.icon-cyan{background:rgba(45,220,214,0.12); color:var(--cyan);}
.card h3{margin-bottom:0.4em;}
.card p{margin-bottom:0; font-size:0.94rem;}

.quote{
 border-left:2px solid var(--brass);
 padding-left:22px; font-family:'Manrope',sans-serif; font-size:1.3rem; color:var(--foam); font-weight:500;
}
.quote cite{
 display:block; margin-top:14px; font-family:'Inter',sans-serif; font-style:normal;
 font-size:0.85rem; color:var(--muted); font-weight:500;
}

/* CTA band - instrument panel, brass bolts, phosphor scan border */
.cta-band{
 border-radius:var(--radius-lg);
 background:var(--panel);
 border:1px solid var(--line);
 padding:64px 40px;
 text-align:center;
 position:relative; overflow:hidden;
}
.cta-band::before{
 content:"";
 position:absolute; inset:0; border-radius:inherit; pointer-events:none;
 background:radial-gradient(60% 100% at 50% 0%, rgba(47,125,255,0.14), transparent 70%);
}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{margin-bottom:0.3em;}
.cta-band .btn{margin-top:8px;}

/* ---------- Commands page - read like a ship's manifest ---------- */
.cmd-group{margin-bottom:40px;}
.cmd-group h3{
 font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.1em;
 font-size:0.85rem; color:var(--phosphor); margin-bottom:16px; font-weight:600;
 padding-bottom:8px; border-bottom:1px dashed var(--line);
}
table.cmds{width:100%; border-collapse:collapse;}
table.cmds tr{border-bottom:1px solid var(--line); transition:background .15s ease;}
table.cmds tr:hover{background:rgba(47,125,255,0.03);}
table.cmds tr:last-child{border-bottom:none;}
table.cmds td{padding:14px 10px; vertical-align:top;}
table.cmds td.cmd{
 font-family:'JetBrains Mono',monospace; color:var(--brass); font-size:0.92rem; white-space:nowrap; width:1%;
 padding-right:24px;
}
table.cmds td.desc{color:var(--muted); font-size:0.93rem;}

/* ---------- Support page ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line); padding:18px 0;}
.faq summary{
 cursor:pointer; font-family:'Manrope',sans-serif; font-size:1.05rem; color:var(--foam);
 font-weight:500; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
 content:"+"; font-family:'JetBrains Mono',monospace; color:var(--phosphor); font-size:1.2rem;
}
.faq details[open] summary::after{content:"–";}
.faq p{margin-top:12px; margin-bottom:0;}

.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}

/* ---------- Footer ---------- */
footer.site{
 border-top:1px solid var(--line);
 padding:44px 0 30px;
 margin-top:40px;
}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px;}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; color:var(--foam); font-weight:600;}
.footer-brand img{height:26px;}
footer.site nav{display:flex; gap:22px; flex-wrap:wrap;}
footer.site nav a{color:var(--muted); font-size:0.9rem; font-family:'Inter',sans-serif; font-weight:500;}
footer.site nav a:hover{color:var(--ink);}
.footer-bottom{
 margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
 display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
 font-size:0.8rem; color:var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){

 .grid-3, .grid-2, .contact-grid{grid-template-columns:1fr;}
 .nav{position:relative;}
 .nav-indicator{display:none;}

 nav.links{
 position:absolute; top:calc(100% + 10px); left:16px; right:16px;
 max-height:0; opacity:0; overflow:hidden;
 flex-direction:column; align-items:stretch; gap:2px;
 background:var(--nav-dd);
 border:1px solid var(--line);
 border-radius:14px;
 box-shadow:0 20px 46px rgba(2,8,7,0.55);
 transition:max-height .35s cubic-bezier(.16,.8,.24,1), opacity .25s ease;
 padding:0 10px;
 z-index:120;
 }
 nav.links.open{max-height:80vh; overflow-y:auto; opacity:1; padding:10px 10px 16px;}

 nav.links a{
 padding:13px 14px; border-radius:8px; color:var(--muted);
 opacity:0; transform:translateY(-8px);
 transition:opacity .3s ease, transform .3s ease, background .15s ease, color .15s ease;
 }
 nav.links a:hover{background:var(--wash-05); color:var(--ink);}
 nav.links a[aria-current="page"]{background:rgba(47,125,255,0.1); color:var(--phosphor);}
 nav.links.open a{opacity:1; transform:translateY(0);}
 nav.links.open a:nth-of-type(1){transition-delay:.04s;}
 nav.links.open a:nth-of-type(2){transition-delay:.08s;}
 nav.links.open a:nth-of-type(3){transition-delay:.12s;}
 nav.links.open a:nth-of-type(4){transition-delay:.16s;}
 nav.links.open a:nth-of-type(5){transition-delay:.20s;}
 nav.links.open a:nth-of-type(6){transition-delay:.24s;}
 nav.links.open a:nth-of-type(7){transition-delay:.28s;}

 .nav-toggle{display:block;}
 .nav .btn-primary{display:none;}
 nav.links a.btn-primary,
 nav.links .btn-disabled{
 display:inline-flex; justify-content:center;
 margin-top:22px; opacity:1; transform:none;
 }
 nav.links a.btn-primary::before,
 nav.links .btn-disabled::before{
 content:""; position:absolute; left:14px; right:14px; top:-11px; height:1px;
 background:var(--line);
 }

 /* On mobile the whole menu is already a vertical, tap-to-open list, so
 the "More" dropdown just unfolds inline instead of floating. */
 .nav-more{opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease;}
 nav.links.open .nav-more{opacity:1; transform:translateY(0); transition-delay:.16s;}
 .nav-more-toggle{
 width:100%; padding:13px 14px; justify-content:space-between; color:var(--muted);
 }
 .nav-more-toggle:hover{background:var(--wash-05); color:var(--ink);}
 .nav-more-menu{
 position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
 min-width:0; margin:2px 0 0; padding:0 0 0 10px;
 background:none; border:none; box-shadow:none;
 max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.16,.8,.24,1);
 }
 .nav-more.open .nav-more-menu{max-height:200px;}
 .nav-more-menu a{padding:11px 14px; border-radius:8px;}
}

@media (prefers-reduced-motion: reduce){
 *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ============================================
 Motion & polish - background, reveals, chrome
 ============================================ */

/* Ambient drifting chart-light glow (was "orbs") */
.bg-orbs{
 position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.bg-orbs span{
 position:absolute; border-radius:50%; filter:blur(80px); opacity:0.45;
}
.bg-orbs span:nth-child(1){
 width:520px; height:520px; top:-160px; left:-120px;
 background:radial-gradient(circle, rgba(47,125,255,0.24), transparent 70%);
 animation:orbitA 26s ease-in-out infinite;
}
.bg-orbs span:nth-child(2){
 width:420px; height:420px; top:20%; right:-140px;
 background:radial-gradient(circle, rgba(255,95,201,0.18), transparent 70%);
 animation:orbitB 32s ease-in-out infinite;
}
.bg-orbs span:nth-child(3){
 width:380px; height:380px; bottom:-140px; left:30%;
 background:radial-gradient(circle, rgba(45,220,214,0.12), transparent 70%);
 animation:orbitC 38s ease-in-out infinite;
}
@keyframes orbitA{
 0%,100%{transform:translate(0,0);}
 50%{transform:translate(60px,50px);}
}
@keyframes orbitB{
 0%,100%{transform:translate(0,0);}
 50%{transform:translate(-50px,60px);}
}
@keyframes orbitC{
 0%,100%{transform:translate(0,0) scale(1);}
 50%{transform:translate(40px,-30px) scale(1.08);}
}

/* Scroll progress bar */
.scroll-progress{
 position:fixed; top:0; left:0; height:3px; width:0%;
 background:linear-gradient(90deg, var(--phosphor), var(--brass));
 z-index:300; transition:width .1s linear;
 box-shadow:0 0 8px rgba(47,125,255,0.5);
}

/* Page load fade-in */
body{opacity:0; animation:pageIn .6s ease forwards;}
@keyframes pageIn{ to{opacity:1;} }

/* Scroll-reveal */
.reveal{
 opacity:0; transform:translateY(26px);
 transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal.in{opacity:1; transform:translateY(0);}

/* Scroll-reveal, scale variant - used for standalone focal elements
 (hero copy, cta bands) so not everything on a page arrives with the
 exact same translateY motion. */
.reveal-scale{
 opacity:0; transform:translateY(18px) scale(0.97);
 transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal-scale.in{opacity:1; transform:translateY(0) scale(1);}

/* ---------- Button ripple ---------- */
/* A short-lived expanding circle at the pointer's click position,
 layered underneath the existing skew-shine sweep. Positioned via
 --ripple-x/--ripple-y, set by script.js on pointerdown. */
.btn{ --ripple-x:50%; --ripple-y:50%; }
.btn .ripple{
 position:absolute; left:var(--ripple-x); top:var(--ripple-y);
 width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
 background:rgba(255,255,255,0.55); pointer-events:none;
 transform:scale(0); opacity:0.6;
 animation:btnRipple .6s cubic-bezier(.16,.8,.24,1) forwards;
}
.btn-ghost .ripple{background:rgba(47,125,255,0.35);}
@keyframes btnRipple{
 to{ transform:scale(22); opacity:0; }
}
.btn:active{transform:translateY(0) scale(0.97);}

/* Magnetic nudge - primary CTAs drift a couple px toward the pointer
 while hovered, via --mx-btn/--my-btn set from script.js. Small enough
 to feel responsive rather than gimmicky. */
.btn.magnetic{
 transition:transform .15s cubic-bezier(.16,.8,.24,1), box-shadow .2s ease, background .2s ease;
}
.btn.magnetic:hover{
 transform:translate(var(--mx-btn,0), var(--my-btn,0)) translateY(-2px);
}

/* ---------- Card 3D tilt (disabled — flat cards read cleaner) ---------- */
.card.tilt:hover{
 transform:translateY(-4px);
}

/* ---------- Copy-to-clipboard flash (commands page) ---------- */
td.cmd{ cursor:pointer; position:relative; }
td.cmd:hover{ color:var(--foam); }
td.cmd .copy-hint{
 position:absolute; right:8px; top:50%; transform:translateY(-50%) translateX(4px);
 font-family:'Inter',sans-serif; font-size:0.68rem; letter-spacing:0.02em; text-transform:none;
 color:var(--muted); opacity:0; transition:opacity .18s ease, transform .18s ease;
 pointer-events:none;
}
tr:hover td.cmd .copy-hint{opacity:0.85; transform:translateY(-50%) translateX(0);}
td.cmd.copied{color:var(--phosphor);}
td.cmd.copied .copy-hint{opacity:1; color:var(--phosphor);}

/* ---------- Hero stat pop ---------- */
.hero-stats div{transition:background .25s ease, transform .25s ease;}
.hero-stats div:hover{background:rgba(47,125,255,0.06); transform:translateY(-2px);}
.hero-stats strong{display:block; transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.hero-stats div:hover strong{transform:scale(1.08);}

/* ---------- Parallax layers ---------- */
/* Translated on scroll via script.js (data-parallax attribute controls
 speed/direction). Kept subtle and disabled under reduced motion. */
[data-parallax]{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
 [data-parallax]{ transform:none !important; }
}

/* Back to top */
.to-top{
 position:fixed; right:22px; bottom:22px; z-index:150;
 width:44px; height:44px; border-radius:50%;
 background:rgba(10,29,25,0.88); border:1px solid var(--line);
 color:var(--foam); display:flex; align-items:center; justify-content:center;
 backdrop-filter:blur(8px); cursor:pointer;
 opacity:0; pointer-events:none; transform:translateY(10px) scale(0.9);
 transition:opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
}
.to-top.show{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
.to-top:hover{border-color:var(--phosphor); background:rgba(47,125,255,0.18);}

/* ============================================
 Outdated-domain notice (blocking, no dismiss)
 ============================================ */
.outdated-overlay{
 position:fixed; inset:0; z-index:10000;
 display:flex; align-items:center; justify-content:center;
 padding:24px;
 background:rgba(6,7,20,0.86);
 backdrop-filter:blur(6px);
}
.outdated-panel{
 max-width:420px; width:100%; text-align:center;
 background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
 padding:32px 28px; box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.outdated-panel h2{margin:0 0 12px; font-size:1.4rem; color:var(--foam);}
.outdated-panel p{margin:0 0 22px; font-size:0.95rem; color:var(--muted); line-height:1.5;}
.outdated-panel strong{color:var(--ink);}
.outdated-panel .btn{width:100%; justify-content:center;}

/* ============================================
 Status page
 ============================================ */
.status-banner{
 display:flex; align-items:center; gap:16px;
 border-radius:14px; padding:22px 26px;
 border:1px solid var(--line);
 background:linear-gradient(160deg, var(--wash-03), var(--wash-008));
}
.status-banner .dot{
 width:14px; height:14px; border-radius:50%; flex:none;
 animation:pulse 2.4s ease-in-out infinite;
 box-shadow:0 0 0 4px var(--wash-03), inset 0 -2px 2px rgba(0,0,0,0.25);
}
.status-banner h2{margin:0; font-size:1.35rem;}
.status-banner p{margin:2px 0 0; font-size:0.92rem;}
.status-ok{color:var(--phosphor);}
.status-degraded{color:var(--brass);}
.status-outage{color:var(--danger);}
.status-maintenance{color:var(--cyan);}

.status-list{border-top:1px solid var(--line); margin-top:8px;}
.status-row{
 display:flex; align-items:center; justify-content:space-between;
 padding:18px 4px; border-bottom:1px solid var(--line);
}
.status-row .name{color:var(--foam); font-weight:500;}
/* .badge is shared by the (legacy) status-row list, the incident-history
 cards, the component detail panel below, and the "Pinned" tag on news
 posts - it needs to be a real top-level rule, not scoped under
 .status-row, or every one of those other usages renders as bare,
 unstyled text with no pill shape or color. */
.badge{
 display:inline-flex; align-items:center; gap:8px;
 font-family:'JetBrains Mono', monospace; font-size:0.8rem;
 padding:5px 12px; border-radius:20px; border:1px solid var(--line);
}
.badge .dot{width:8px; height:8px; border-radius:50%; animation:none;}
.badge.status-ok{border-color:rgba(47,125,255,0.3); background:rgba(47,125,255,0.08);}
.badge.status-degraded{border-color:rgba(255,95,201,0.3); background:rgba(255,95,201,0.08);}
.badge.status-outage{border-color:rgba(255,111,87,0.3); background:rgba(255,111,87,0.08);}
.badge.status-maintenance{border-color:rgba(45,220,214,0.3); background:rgba(45,220,214,0.08);}

.incident{
 border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:16px;
 background:linear-gradient(160deg, var(--wash-025), var(--wash-006));
}
.incident-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
.incident-head h3{margin:0; font-size:1.05rem;}
.incident-date{font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--muted);}
.incident-updates{margin-top:12px; border-left:2px solid var(--line); padding-left:16px;}
.incident-update{margin-bottom:10px; font-size:0.9rem;}
.incident-update:last-child{margin-bottom:0;}
.incident-update time{
 display:block; font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--phosphor); margin-bottom:2px;
}
.incident-update p{margin:0; color:var(--muted);}
#admin-form .status-row{border-bottom:none; padding:8px 0;}
#admin-form .btn-ghost{padding:8px 14px; font-size:0.85rem;}
#save-feedback{color:var(--muted);}
.no-incidents{
 border:1px dashed var(--line); border-radius:12px; padding:30px; text-align:center; color:var(--muted);
}

/* General-purpose empty state: dashed instrument-panel frame with an
 optional icon and CTA, used wherever a list has nothing in it yet
 (directory, sponsors, reviews) so "empty" reads as an invitation
 rather than a dead end. */
.empty-state{
 border:1px dashed var(--line); border-radius:var(--radius);
 padding:44px 28px; text-align:center;
 background:radial-gradient(320px circle at 50% 0%, rgba(47,125,255,0.06), transparent 70%);
}
.empty-state .empty-icon{
 width:44px; height:44px; margin:0 auto 16px; border-radius:10px;
 display:flex; align-items:center; justify-content:center;
 background:linear-gradient(160deg, rgba(47,125,255,0.16), rgba(47,125,255,0.04));
 border:1px solid rgba(47,125,255,0.22); color:var(--phosphor);
}
.empty-state p{margin:0 auto 18px; max-width:38ch; color:var(--muted);}
.empty-state .btn{margin:0 auto;}
.status-updated{font-size:0.8rem; color:var(--muted); font-family:'JetBrains Mono',monospace;}

/* ---------- Status page v2: app-style card ---------- */
:root{ --ok-green:#3ddc97; --ok-green-dim:rgba(61,220,151,0.12); }

.status-terminal{
 margin:16px 0 0; font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:var(--muted);
 display:flex; align-items:center; gap:8px;
}
.status-terminal-prompt{color:var(--phosphor);}
.blink-cursor{display:inline-block; color:var(--phosphor); animation:blink-cursor 1.1s step-end infinite;}
@keyframes blink-cursor{50%{opacity:0;}}

.status-card{
 position:relative; overflow:hidden;
 background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
 padding:26px 26px 8px; margin-bottom:8px;
}
/* Faint rotating radar sweep, contained to the card - a nod to the
 "harbourmaster's radar room" theme this whole site is built around. */
.status-card::before{
 content:"";
 position:absolute; top:50%; left:50%; width:900px; height:900px; margin:-450px 0 0 -450px;
 background:conic-gradient(from 0deg, transparent 0deg, rgba(47,125,255,0.08) 12deg, transparent 32deg, transparent 360deg);
 animation:radar-sweep 7s linear infinite;
 pointer-events:none;
}
@keyframes radar-sweep{to{transform:rotate(360deg);}}
/* HUD-style corner brackets on the two opposing corners. */
.status-card::after{
 content:"";
 position:absolute; bottom:10px; right:10px; width:16px; height:16px;
 border-bottom:2px solid rgba(47,125,255,0.45); border-right:2px solid rgba(47,125,255,0.45);
 border-radius:0 0 4px 0; pointer-events:none;
}
.status-card-corner-tl{
 position:absolute; top:10px; left:10px; width:16px; height:16px;
 border-top:2px solid rgba(47,125,255,0.45); border-left:2px solid rgba(47,125,255,0.45);
 border-radius:4px 0 0 0; pointer-events:none;
}
.status-card-head{
 display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
 margin-bottom:20px;
}
.status-card-head h2{margin:0 0 4px; font-size:1.5rem;}
.status-updated{display:flex; align-items:center;}
.live-ping{
 display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:7px; flex:none;
 background:var(--ok-green); box-shadow:0 0 0 3px var(--ok-green-dim);
 animation:pulse 2.4s ease-in-out infinite;
}
.status-head-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.status-uptime-chip{
 display:flex; flex-direction:column; align-items:flex-end; gap:2px;
 padding:8px 16px; border-radius:10px; border:1px solid var(--line); background:rgba(61,220,151,0.06);
}
.status-uptime-chip span{
 font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.status-uptime-chip strong{font-family:'Manrope',sans-serif; font-size:1.08rem; color:var(--ok-green);}
.refresh-btn{
 display:inline-flex; align-items:center; gap:8px;
 padding:9px 16px; border-radius:999px; border:1px solid var(--line);
 background:var(--wash-03); color:var(--ink);
 font-family:'Inter',sans-serif; font-size:0.86rem; font-weight:500;
 cursor:pointer; white-space:nowrap; flex:none;
 transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.refresh-btn:hover{background:var(--wash-07); border-color:rgba(235,233,255,0.22);}
.refresh-btn:active{transform:scale(0.96);}
.refresh-btn svg{width:15px; height:15px; flex:none; transition:transform .5s ease;}
.refresh-btn.spinning svg{animation:svc-spin .7s linear infinite;}
@keyframes svc-spin{to{transform:rotate(360deg);}}

.status-overall-banner{
 display:flex; align-items:center; gap:12px;
 border-radius:12px; padding:16px 18px; margin-bottom:26px;
 border:1px solid rgba(61,220,151,0.28); background:var(--ok-green-dim); color:var(--ok-green);
 font-family:'Manrope',sans-serif; font-weight:600; font-size:1.02rem;
 box-shadow:0 0 30px -18px currentColor;
}
.status-overall-banner svg{width:20px; height:20px; flex:none;}
.status-overall-banner.sob-degraded{border-color:rgba(255,95,201,0.3); background:rgba(255,95,201,0.1); color:var(--brass);}
.status-overall-banner.sob-outage{border-color:rgba(255,111,87,0.3); background:rgba(255,111,87,0.1); color:var(--danger);}
.status-overall-banner.sob-maintenance{border-color:rgba(45,220,214,0.3); background:rgba(45,220,214,0.1); color:var(--cyan);}

.services-label{
 font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.14em;
 text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.svc-list{border-top:1px solid var(--line);}
.svc-row{padding:18px 0; border-bottom:1px solid var(--line);}
.svc-row-top{display:flex; align-items:center; gap:14px;}
.svc-icon{
 width:40px; height:40px; border-radius:11px; flex:none;
 display:flex; align-items:center; justify-content:center;
 background:var(--wash-04); border:1px solid var(--line); color:var(--muted);
}
.svc-icon svg{width:19px; height:19px;}
.svc-info{flex:1; min-width:0;}
.svc-name{display:block; font-family:'Manrope',sans-serif; font-weight:600; font-size:1.05rem; color:var(--foam);}
.svc-sub{display:block; font-size:0.84rem; color:var(--muted); margin-top:1px;}
.svc-badge{
 display:inline-flex; align-items:center; gap:7px; flex:none;
 font-family:'Inter',sans-serif; font-weight:600; font-size:0.86rem;
 padding:5px 13px 5px 11px; border-radius:999px; white-space:nowrap;
 border:1px solid rgba(61,220,151,0.3); background:var(--ok-green-dim); color:var(--ok-green);
 box-shadow:0 0 14px -7px currentColor;
}
.svc-badge .dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none;}
.svc-badge.svc-degraded{border-color:rgba(255,95,201,0.3); background:rgba(255,95,201,0.1); color:var(--brass);}
.svc-badge.svc-outage{border-color:rgba(255,111,87,0.3); background:rgba(255,111,87,0.1); color:var(--danger);}
.svc-badge.svc-maintenance{border-color:rgba(45,220,214,0.3); background:rgba(45,220,214,0.1); color:var(--cyan);}
.svc-chevron{color:var(--muted); flex:none; width:16px; height:16px; transition:transform .25s ease;}
.svc-bar{
 display:flex; align-items:flex-end; gap:2px; height:34px; margin-top:16px;
 width:100%; max-width:100%; overflow:hidden;
}
.svc-bar span{
 flex:1 1 0%; min-width:1px; height:100%; border-radius:2px; background:var(--ok-green); opacity:0.85;
}
/* These class names have to match what svcBarHtml() in script.js actually
 assigns to each pip (STATUS_META[...].svc, e.g. "svc-degraded") - they
 previously didn't, so incident-day tinting never rendered. */
.svc-bar span.svc-degraded{background:var(--brass);}
.svc-bar span.svc-outage{background:var(--danger);}
.svc-bar span.svc-maintenance{background:var(--cyan);}
.svc-bar-labels{
 display:flex; justify-content:space-between; margin-top:6px;
 font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--muted);
}
.svc-bar-uptime{color:var(--ok-green); font-weight:600;}

/* ---------- Service row: expandable detail ---------- */
.svc-row-trigger{
 all:unset; box-sizing:border-box;
 display:flex; align-items:center; gap:14px; width:100%; cursor:pointer;
}
.svc-row-trigger:focus-visible{outline:2px solid var(--phosphor); outline-offset:3px; border-radius:8px;}
.svc-row-trigger[aria-expanded="true"] .svc-chevron{transform:rotate(90deg); color:var(--ink);}
.svc-detail{
 overflow:hidden; max-height:0; opacity:0;
 transition:max-height .28s ease, opacity .2s ease, margin-top .28s ease;
}
.svc-detail.open{max-height:800px; opacity:1; margin-top:16px;}
.svc-detail-inner{
 border-top:1px solid var(--line); padding-top:14px;
}
.svc-detail-line{margin:0 0 8px; font-size:0.92rem; color:var(--ink); line-height:1.5;}
.svc-detail-meta{
 margin:0 0 10px; font-size:0.78rem; color:var(--muted);
 font-family:'JetBrains Mono',monospace; letter-spacing:0.01em;
}
.svc-detail-incidents{display:flex; flex-direction:column; gap:10px; margin-top:4px;}
.svc-detail-incident{
 border:1px solid var(--line); border-radius:10px; padding:12px 14px;
 background:var(--wash-02);
}
.svc-detail-incident-head{
 display:flex; align-items:center; justify-content:space-between; gap:10px;
 font-family:'Manrope',sans-serif; font-weight:600; font-size:0.92rem; color:var(--foam);
}
.svc-detail-incident-date{
 font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--muted); margin-top:3px;
}
.svc-detail-incident-update{margin:8px 0 0; font-size:0.85rem; color:var(--muted); line-height:1.5;}
@media (max-width:640px){
 .status-card{padding:20px 18px 6px;}
 .status-card-head{flex-direction:column; align-items:stretch;}
 .refresh-btn{align-self:flex-start;}
 .svc-bar{gap:1px;}
}

@media (prefers-reduced-motion: reduce){
 body{animation:none; opacity:1;}
 .bg-orbs span, .waterline path, .status-dot{animation:none !important;}
 .status-card::before, .live-ping, .blink-cursor{animation:none !important;}
}

/* Gradient text accent, used sparingly on hero headlines */
.grad-text{
 background:var(--brand-gradient);
 -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================
 Reviews page
 ============================================ */
.stars{display:inline-flex; gap:2px; letter-spacing:0;}
.stars .star{color:rgba(234,245,240,0.16);}
.stars .star.filled{color:var(--brass);}

#rating-summary{display:flex; flex-direction:column; gap:18px;}
.rs-score{display:flex; align-items:center; gap:16px;}
.rs-score > strong{
 font-family:'Manrope', sans-serif; font-size:2.6rem; font-weight:700; color:var(--foam); line-height:1;
}
.rs-count{display:block; font-size:0.82rem; color:var(--muted); margin-top:4px;}
.rs-bars{display:flex; flex-direction:column; gap:8px;}
.rs-bar-row{display:grid; grid-template-columns:28px 1fr 20px; align-items:center; gap:10px; font-size:0.78rem; color:var(--muted); font-family:'JetBrains Mono',monospace;}
.rs-bar-track{height:6px; border-radius:4px; background:var(--wash-06); overflow:hidden;}
.rs-bar-fill{height:100%; background:linear-gradient(90deg, var(--phosphor), var(--brass)); border-radius:4px; transition:width .5s ease;}
.rs-bar-n{text-align:right;}

.field-label{display:block; font-size:0.82rem; color:var(--muted); margin:14px 0 6px; font-weight:500;}
.field-input{
 width:100%; background:var(--wash-03); border:1px solid var(--line); color:var(--ink);
 border-radius:8px; padding:10px 12px; font-family:'Inter',sans-serif; font-size:0.92rem;
 transition:border-color .2s ease, background .2s ease;
}
.field-input:focus{outline:none; border-color:var(--phosphor); background:var(--wash-05);}
textarea.field-input{resize:vertical; min-height:90px;}
.field-hint{font-size:0.76rem; color:var(--muted); margin:8px 0 0;}

.star-input{display:inline-flex; gap:4px;}
.star-btn{
 background:none; border:none; cursor:pointer; font-size:1.6rem; line-height:1; padding:2px;
 color:rgba(234,245,240,0.16); transition:color .15s ease, transform .15s ease;
}
.star-btn.filled{color:var(--brass);}
.star-btn:hover{transform:scale(1.15);}

.btn-small{padding:7px 14px; font-size:0.82rem;}

.review-item{margin-bottom:16px;}
.review-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px;}
.review-head strong{display:block; color:var(--foam); margin-bottom:4px;}

/* ---------- Owner pinned reply ---------- */
.owner-reply-block{display:flex; flex-direction:column; gap:14px; margin-bottom:24px;}
.owner-reply-card{
 border-color:rgba(255,95,201,0.3); background:rgba(255,95,201,0.06);
}
.owner-reply-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.owner-reply-pin{
 display:inline-flex; align-items:center; gap:6px;
 font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
 color:var(--brass); font-weight:600;
}
.owner-reply-editor{border-style:dashed;}

/* ---------- Review list sort toolbar ---------- */
.review-list-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px;}
.review-sort{display:flex; gap:6px; flex-wrap:wrap;}
.review-sort-btn{
 padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:transparent;
 color:var(--muted); font-size:0.82rem; font-weight:600; cursor:pointer; transition:all .15s ease;
 font-family:'Inter',sans-serif;
}
.review-sort-btn:hover{color:var(--foam); border-color:rgba(47,125,255,0.35);}
.review-sort-btn.is-active{color:var(--foam); background:var(--phosphor); border-color:var(--phosphor);}
.review-item p{margin-bottom:10px; font-size:0.94rem;}

@media (max-width:860px){
 #summary-grid, #server-review-summary-grid{grid-template-columns:1fr !important;}
}

/* ---------- Auth widget (header sign-up / account chip) ---------- */
.auth-widget{position:relative; margin-left:8px; display:flex; align-items:center;}
.auth-signup-btn{padding:9px 18px;}

.auth-chip{
 display:flex; align-items:center; gap:8px; cursor:pointer;
 padding:6px 10px 6px 6px; border-radius:99px; border:1px solid var(--line);
 background:var(--wash-03); transition:background .15s ease;
}
.auth-chip:hover{background:var(--wash-07);}
.auth-chip-name{font-size:0.88rem; font-weight:500; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.auth-chip svg{color:var(--muted); flex:none;}

.avatar-circle{
 display:inline-flex; align-items:center; justify-content:center;
 width:26px; height:26px; border-radius:50%; flex:none;
 background:linear-gradient(135deg, var(--phosphor), var(--cyan));
 color:#04140f; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.7rem;
 object-fit:cover;
}

.auth-dropdown{
 position:absolute; top:calc(100% + 10px); right:0; min-width:220px;
 background:var(--panel); border:1px solid var(--line); border-radius:10px;
 padding:8px; box-shadow:0 16px 40px rgba(0,0,0,0.5);
 opacity:0; visibility:hidden; transform:translateY(-6px);
 transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
 z-index:120;
}
.auth-dropdown.open{opacity:1; visibility:visible; transform:translateY(0);}
.auth-dropdown-head{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.auth-dropdown-head strong{display:block; color:var(--foam); font-size:0.9rem;}
.auth-dropdown-head span{display:block; font-size:0.76rem; color:var(--muted); margin-top:2px;}
.auth-dropdown a, .auth-dropdown button{
 display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
 padding:9px 10px; border-radius:6px; font-size:0.88rem; color:var(--ink); font-family:inherit;
}
.auth-dropdown a:hover, .auth-dropdown button:hover{background:var(--wash-06);}
.auth-dropdown button{color:#ff9f8f;}

/* ---------- Auth modal ---------- */
.modal-overlay{
 position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
 background:rgba(2,9,7,0.76); backdrop-filter:blur(4px); padding:20px;
 opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal-panel{
 width:100%; max-width:400px; max-height:90vh; overflow-y:auto;
 padding:32px 28px 28px; transform:translateY(10px) scale(0.98); transition:transform .2s ease;
}
.modal-overlay.open .modal-panel{transform:translateY(0) scale(1);}
.modal-close{
 position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted);
 font-size:1.5rem; line-height:1; cursor:pointer; padding:4px 8px; border-radius:6px;
}
.modal-close:hover{color:var(--ink); background:var(--wash-06);}
.modal-back{
 background:none; border:none; color:var(--phosphor); font-size:0.85rem; cursor:pointer;
 padding:0; margin-bottom:14px; font-family:inherit;
}

.provider-list{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.provider-btn{
 display:flex; align-items:center; gap:10px; width:100%; padding:11px 16px;
 border-radius:8px; border:1px solid var(--line); font-weight:600; font-size:0.92rem;
 cursor:pointer; font-family:inherit; transition:transform .15s ease, box-shadow .15s ease;
 background:var(--wash-03); color:var(--ink);
}
.provider-btn:hover{transform:translateY(-1px);}

@media (max-width:1080px){
 .auth-widget{
 margin-left:0; margin-top:10px; width:100%;
 opacity:0; transform:translateY(-8px);
 transition:opacity .3s ease .32s, transform .3s ease .32s;
 }
 nav.links.open .auth-widget{opacity:1; transform:translateY(0);}
 .auth-signup-btn{width:100%; justify-content:center;}
 .bell-btn{margin:10px 0 0 4px; align-self:flex-start;}
 .auth-chip{width:100%; justify-content:center;}
 .auth-dropdown{position:static; margin-top:8px; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none;}
 .auth-dropdown.open{display:block;}
}

/* ============================================
 News / announcements page
 ============================================ */
.composer-image-row{display:flex; align-items:center; gap:10px; margin:14px 0 0;}
.composer-image-btn{
 width:34px; height:34px; flex:none; border-radius:50%; border:1px dashed var(--line);
 background:transparent; color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer;
 display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.composer-image-btn:hover{color:var(--foam); border-color:rgba(47,125,255,0.4); background:rgba(47,125,255,0.06);}
.composer-image-btn:disabled{opacity:0.5; cursor:default;}
.composer-image-preview{display:flex; align-items:center; gap:8px;}
.composer-image-preview:empty{display:none;}
.blog-post-image{
 display:block; width:100%; max-height:360px; object-fit:cover; border-radius:10px;
 border:1px solid var(--line); margin:12px 0;
}

.reaction-bar{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0;}
.reaction-pill{
 display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
 border-radius:99px; border:1px solid var(--line); background:var(--wash-03);
 color:var(--ink); font-size:0.86rem; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.reaction-pill:hover{background:var(--wash-07); transform:translateY(-1px);}
.reaction-pill.mine{border-color:var(--phosphor); background:rgba(47,125,255,0.14);}
.reaction-count{font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--muted);}
.reaction-pill.mine .reaction-count{color:var(--phosphor);}

.post-owner-controls{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}

.news-item{margin-bottom:16px;}

.blog-list-title-link{color:inherit; text-decoration:none;}
.blog-list-title-link:hover strong{color:var(--phosphor);}
.blog-post-byline{font-size:0.8rem; color:var(--muted); margin-left:2px;}
.blog-post-full .review-head{align-items:center;}
.blog-post-full .blog-post-byline{margin-left:0;}
.blog-post-byline strong{display:inline; color:var(--foam);}

.comments-block{margin-top:8px; border-top:1px solid var(--line); padding-top:12px;}
.comment-item{padding:10px 0; border-bottom:1px dashed var(--line);}
.comment-item:last-of-type{border-bottom:none;}
.comment-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
.comment-head strong{color:var(--foam);}
.comment-item p{margin:0 0 6px; font-size:0.9rem;}
.comment-form textarea{margin-top:8px;}

/* ============================================
 Sponsor banner (site-wide, sits under the header)
 ============================================ */
.sponsor-banner{
 position:relative; z-index:90;
 border-bottom:1px solid var(--line);
 background:
 radial-gradient(120% 220% at 0% 0%, rgba(255,95,201,0.14), transparent 55%),
 radial-gradient(120% 220% at 100% 100%, rgba(47,125,255,0.16), transparent 55%),
 var(--panel-2);
 box-shadow:0 1px 0 rgba(0,0,0,0.18), 0 8px 20px -14px rgba(0,0,0,0.5);
 overflow:hidden;
}
.sponsor-banner::before{
 /* a slow radar-style sheen sweeping through the bar - quiet, on-theme,
 and the thing that makes the banner read as "alive" at a glance */
 content:''; position:absolute; inset:0; pointer-events:none;
 background:linear-gradient(100deg, transparent 42%, rgba(246,244,255,0.08) 50%, transparent 58%);
 background-size:240% 100%;
 animation:sponsorSweep 9s ease-in-out infinite;
}
@keyframes sponsorSweep{
 0%{background-position:140% 0;}
 50%{background-position:-40% 0;}
 100%{background-position:140% 0;}
}
.sponsor-banner-inner{
 position:relative;
 display:flex; align-items:center; gap:18px;
 padding:13px 0; min-height:38px;
}
.sponsor-banner-tag{
 flex:none; display:inline-flex; align-items:center; gap:6px;
 font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
 color:#1a1200; white-space:nowrap;
 padding:5px 11px 5px 9px; border-radius:99px;
 background:linear-gradient(135deg, var(--brass), var(--brass-dim));
 box-shadow:0 2px 10px -3px rgba(255,95,201,0.55);
}
.sponsor-banner-tag::before{
 content:''; width:5px; height:5px; border-radius:50%; background:#1a1200; flex:none;
 animation:sponsorPulse 2s ease-out infinite;
}
@keyframes sponsorPulse{
 0%{box-shadow:0 0 0 0 rgba(26,18,0,0.45);}
 70%{box-shadow:0 0 0 6px rgba(26,18,0,0);}
 100%{box-shadow:0 0 0 0 rgba(26,18,0,0);}
}
.sponsor-banner-divider{
 flex:none; width:1px; align-self:stretch; margin:2px 0;
 background:var(--line);
}
.sponsor-banner-slide{
 display:flex; align-items:center; gap:12px; flex:1; min-width:0;
 animation:sponsorSlideIn .5s cubic-bezier(.16,.8,.24,1);
}
.sponsor-banner-slide.leaving{
 animation:sponsorSlideOut .22s ease forwards;
}
@keyframes sponsorSlideIn{
 from{opacity:0; transform:translateY(6px) scale(.98);}
 to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes sponsorSlideOut{
 to{opacity:0; transform:translateY(-6px) scale(.98);}
}
.sponsor-banner-logo{
 width:36px; height:36px; border-radius:10px; object-fit:cover; flex:none;
 border:1px solid var(--line); background:var(--panel);
 box-shadow:0 0 0 3px rgba(47,125,255,0.12);
}
.sponsor-banner-text{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.sponsor-banner-toprow{display:flex; align-items:baseline; gap:8px; min-width:0;}
.sponsor-banner-name{font-weight:700; color:var(--foam); font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sponsor-banner-meta{font-size:0.76rem; color:var(--muted); white-space:nowrap; flex:none;}
.sponsor-banner-meta .sep{margin:0 6px; opacity:0.5;}
.sponsor-banner-desc{
 font-size:0.82rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 min-width:0; display:none;
}
.sponsor-banner-join{
 flex:none; padding:8px 18px; font-size:0.8rem; border-radius:99px;
 box-shadow:0 6px 18px -6px rgba(255,95,201,0.5);
}
.sponsor-banner-join svg{width:11px; height:11px; transition:transform .18s ease;}
.sponsor-banner-join:hover svg{transform:translateX(2px);}
.sponsor-banner-view{
 flex:none; display:inline-flex; align-items:center; justify-content:center;
 width:30px; height:30px; border-radius:99px; color:var(--muted);
 border:1px solid var(--line); background:var(--wash-03);
 transition:color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.sponsor-banner-view svg{width:15px; height:15px;}
.sponsor-banner-view:hover{color:var(--foam); border-color:rgba(47,125,255,0.35); background:rgba(47,125,255,0.08); transform:translateY(-1px);}
.sponsor-banner-dots{display:flex; gap:6px; flex:none;}
.sponsor-banner-dots span{
 width:18px; height:4px; border-radius:99px; background:var(--line); overflow:hidden; position:relative;
}
.sponsor-banner-dots span i{
 position:absolute; inset:0; width:0%; background:linear-gradient(90deg, var(--phosphor), var(--brass)); border-radius:inherit; display:block;
}
.sponsor-banner-dots span.on i{animation:sponsorProgress 6s linear forwards;}
@keyframes sponsorProgress{
 from{width:0%;}
 to{width:100%;}
}
@media (min-width:720px){
 .sponsor-banner-desc{display:block;}
}
@media (max-width:640px){
 /* Three clean rows instead of everything fighting for one line:
 [tag ................ view]
 [logo name / meta ]
 [ Join (full width) ] */
 .sponsor-banner-dots{display:none;}
 .sponsor-banner-divider{display:none;}
 .sponsor-banner-inner{
 flex-wrap:wrap; row-gap:9px; padding:12px 0 13px; align-items:center;
 }
 .sponsor-banner-tag{order:1; font-size:0.62rem; padding:4px 9px 4px 7px;}
 .sponsor-banner-view{order:2; margin-left:auto; width:28px; height:28px;}
 .sponsor-banner-slide{
 order:3; flex-basis:100%; flex-wrap:nowrap; gap:10px;
 }
 .sponsor-banner-logo{width:32px; height:32px;}
 .sponsor-banner-toprow{flex-direction:column; align-items:flex-start; gap:1px;}
 .sponsor-banner-name{font-size:0.88rem; max-width:100%;}
 .sponsor-banner-meta{font-size:0.72rem;}
 .sponsor-banner-join{
 order:4; flex-basis:100%; margin-left:0; justify-content:center;
 }
}

/* ============================================
 Sponsors page (public form + directory)
 ============================================ */
.sponsor-card{display:flex; flex-direction:column; padding:0; overflow:hidden;}
.sponsor-card-logo{
 width:100%; height:160px; object-fit:cover; display:block; flex:none;
 border:none; border-bottom:1px solid var(--line); background:var(--panel);
}
.sponsor-card-body{min-width:0; flex:1; padding:18px 20px 20px;}
.sponsor-card-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px;}
.sponsor-card-head strong{color:var(--foam); font-size:1.02rem;}
.sponsor-card-desc{font-size:0.9rem; margin:8px 0 12px;}
.sponsor-card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.sponsor-card-owner{font-size:0.78rem; color:var(--muted);}
.sponsor-card-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ============================================
 Sponsor profile page (individual sponsor)
 ============================================ */
.sponsor-back-link{
 display:inline-flex; align-items:center; gap:6px; font-size:0.86rem; color:var(--muted);
 margin-bottom:22px; transition:color .15s ease;
}
.sponsor-back-link:hover{color:var(--foam);}

.sponsor-profile-shots{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px;}
.sponsor-profile-shot{
 display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line);
 background:var(--panel); aspect-ratio:16/10; transition:border-color .15s ease, transform .15s ease;
}
.sponsor-profile-shot:hover{border-color:rgba(47,125,255,0.4); transform:translateY(-2px);}
.sponsor-profile-shot img{width:100%; height:100%; object-fit:cover; display:block;}

.sponsor-profile-hero{padding:0; overflow:hidden; margin-bottom:20px;}
.sponsor-profile-banner{
 width:100%; height:240px; object-fit:cover; display:block;
 background:var(--panel); border-bottom:1px solid var(--line);
}
.sponsor-profile-hero-content{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:26px 30px;}
.sponsor-profile-icon{
 width:64px; height:64px; border-radius:14px; object-fit:cover; flex:none;
 border:1px solid var(--line); background:var(--panel);
 box-shadow:0 0 0 4px var(--panel-2);
}
@media (max-width:520px){
 .sponsor-profile-banner{height:160px;}
 .sponsor-profile-icon{width:52px; height:52px; border-radius:12px;}
}
.sponsor-profile-headtext{flex:1; min-width:220px;}
.sponsor-profile-pillrow{display:flex; gap:8px; flex-wrap:wrap;}

.sponsor-profile-grid{
 display:grid; grid-template-columns:1.3fr 1fr; gap:20px;
}
@media (max-width:760px){
 .sponsor-profile-grid{grid-template-columns:1fr;}
 .sponsor-profile-hero-content{padding:20px;}
}

.sponsor-live-updated{
 display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--muted); margin:0 0 16px;
}
.live-dot{
 width:6px; height:6px; border-radius:50%; background:var(--phosphor); flex:none;
 animation:sponsorPulse 2s ease-out infinite;
}
.sponsor-live-stats{display:flex; gap:28px; flex-wrap:wrap;}
.sponsor-live-stat{display:flex; flex-direction:column; gap:2px;}
.sponsor-live-stat strong{
 font-family:'Manrope',sans-serif; font-size:1.7rem; color:var(--foam); font-weight:600;
}
.sponsor-live-stat span{font-size:0.76rem; color:var(--muted); letter-spacing:0.02em;}

.pill{
 display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
 border-radius:99px; font-size:0.74rem; font-weight:600; letter-spacing:0.01em;
 border:1px solid rgba(47,125,255,0.3); background:rgba(47,125,255,0.08); color:var(--phosphor);
 white-space:nowrap;
}
.pill.cat-sponsored{border-color:rgba(47,125,255,0.3); background:rgba(47,125,255,0.08); color:var(--phosphor);}
.pill.cat-design{border-color:rgba(255,95,201,0.3); background:rgba(255,95,201,0.08); color:var(--brass);}
.pill.cat-other{border-color:rgba(45,220,214,0.3); background:rgba(45,220,214,0.08); color:var(--cyan);}
.pill.members{border-color:var(--line); background:var(--wash-03); color:var(--muted);}
.pill.votes{border-color:rgba(138,92,245,0.3); background:rgba(138,92,245,0.1); color:var(--violet);}
.pill.rating{border-color:rgba(226,182,111,0.3); background:rgba(226,182,111,0.08); color:var(--brass);}
.pill.rating .stars{vertical-align:-1px;}

.pill.status-pending{border-color:rgba(255,95,201,0.3); background:rgba(255,95,201,0.08); color:var(--brass);}
.pill.status-approved{border-color:rgba(47,125,255,0.3); background:rgba(47,125,255,0.08); color:var(--phosphor);}
.pill.status-declined{border-color:rgba(255,111,87,0.3); background:rgba(255,111,87,0.08); color:var(--danger);}

/* ============================================
 Sponsors admin page
 ============================================ */
.spon-admin-tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.spon-admin-tab{
 padding:8px 16px; border-radius:99px; border:1px solid var(--line); background:var(--wash-03);
 color:var(--muted); font-size:0.86rem; font-weight:600; cursor:pointer; font-family:inherit;
 transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.spon-admin-tab:hover{color:var(--ink);}
.spon-admin-tab.active{color:var(--foam); border-color:rgba(47,125,255,0.35); background:rgba(47,125,255,0.1);}
.spon-admin-tab .count{font-family:'JetBrains Mono',monospace; opacity:0.8; margin-left:4px;}

.spon-admin-item{margin-bottom:14px;}
.spon-admin-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.spon-admin-shots{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 12px;}
.spon-admin-shots img{
 width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line);
 background:var(--panel); display:block;
}

/* ============================================
 Server directory page
 ============================================ */
.directory-hero{
 position:relative; overflow:hidden; padding:52px 36px; border-radius:20px;
 background:
 radial-gradient(circle at 15% 20%, rgba(47,125,255,0.16), transparent 55%),
 radial-gradient(circle at 85% 80%, rgba(61,220,151,0.12), transparent 55%),
 var(--panel);
 border:1px solid var(--line);
}
.directory-hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}

.upload-status{display:flex; align-items:center; gap:8px; min-height:0; margin:6px 0 0;}
.upload-status:empty{margin:0;}
.upload-status-text{font-size:0.82rem; color:var(--muted);}
.upload-status-ok{color:#3ddc97;}
.upload-status-error{color:var(--danger);}
.upload-thumb{
 width:36px; height:36px; border-radius:8px; object-fit:cover; flex:none;
 border:1px solid var(--line); background:var(--panel);
}

.directory-toolbar{
 display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 18px;
}
.directory-search{
 position:relative; flex:1 1 260px; min-width:220px;
 display:flex; align-items:center;
}
.directory-search svg{
 position:absolute; left:14px; color:var(--muted); pointer-events:none;
}
.directory-search input{
 width:100%; background:var(--wash-03); border:1px solid var(--line); color:var(--ink);
 border-radius:10px; padding:11px 14px 11px 40px; font-family:'Inter',sans-serif; font-size:0.92rem;
 transition:border-color .15s ease, background .15s ease;
}
.directory-search input:focus{outline:none; border-color:var(--phosphor); background:var(--wash-05);}
.directory-search input::-webkit-search-cancel-button{cursor:pointer;}
#directory-category-select{
 flex:0 0 auto; background:var(--wash-03); border:1px solid var(--line); color:var(--ink);
 border-radius:10px; padding:11px 14px; font-family:'Inter',sans-serif; font-size:0.92rem;
 cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
#directory-category-select:focus{outline:none; border-color:var(--phosphor); background:var(--wash-05);}
.directory-count-note{margin:0 0 16px;}
.directory-load-more-wrap{display:flex; justify-content:center; margin:28px 0 12px;}
@media (max-width:640px){
 .directory-toolbar{flex-direction:column; align-items:stretch;}
 .directory-search{flex-basis:auto; min-width:0;}
 #directory-category-select{width:100%;}
}

.directory-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:-2px 0 28px;}
.directory-tab{
 padding:7px 16px; border-radius:999px; border:1px solid var(--line); background:transparent;
 color:var(--muted); font-size:0.85rem; font-weight:600; cursor:pointer; transition:all .15s ease;
}
.directory-tab:hover{color:var(--foam); border-color:rgba(47,125,255,0.35);}
.directory-tab.is-active{color:var(--foam); background:var(--phosphor); border-color:var(--phosphor);}

.directory-grid{
 display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px;
}
.directory-card{
 display:flex; flex-direction:column; overflow:visible; padding:0; transition:border-color .15s ease, transform .15s ease;
}
.directory-card:hover{border-color:rgba(47,125,255,0.35); transform:translateY(-3px);}
.directory-card-media{position:relative;}
.directory-card-cover{
 aspect-ratio:16/9; width:100%; object-fit:cover; display:block; background:var(--panel); border-bottom:1px solid var(--line);
 border-radius:var(--radius) var(--radius) 0 0;
}
.directory-card-body{padding:26px 20px 20px;}
.directory-card-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.directory-card-icon{
 position:absolute; left:16px; bottom:-22px; width:56px; height:56px; border-radius:14px; object-fit:cover;
 border:3px solid var(--hull-2); background:var(--panel); box-shadow:0 4px 10px rgba(0,0,0,0.35);
}
.directory-card-head strong{color:var(--foam); font-size:1.05rem; margin-right:2px;}
.directory-card-desc{font-size:0.88rem; margin:0 0 14px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.directory-card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.directory-card-owner{font-size:0.76rem; color:var(--muted);}
.directory-card-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.vote-btn{
 display:inline-flex; align-items:center; gap:5px; padding:6px 10px;
 border-radius:99px; border:1px solid var(--violet-dim); background:var(--violet);
 color:var(--foam); font-size:0.82rem; font-family:'JetBrains Mono',monospace; font-weight:600; cursor:pointer;
 transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.vote-btn:hover{background:var(--violet-dim); transform:translateY(-1px);}
.vote-btn.mine{border-color:var(--phosphor); background:rgba(47,125,255,0.14); color:var(--phosphor);}
.vote-btn:disabled{opacity:0.55; cursor:default; transform:none; background:var(--wash-05); border-color:var(--line); color:var(--muted);}
.vote-btn:disabled:hover{background:var(--wash-05);}
.vote-btn.mine:disabled{opacity:0.85; background:rgba(47,125,255,0.14); border-color:var(--phosphor); color:var(--phosphor);}
.vote-btn.mine:disabled:hover{background:rgba(47,125,255,0.14);}
.vote-btn svg{flex-shrink:0;}


/* ============================================
 Account page (Create account / Log in)
 ============================================ */
.account-hero{
 position:relative; overflow:hidden; padding:56px 0 60px;
}

.account-wrap{position:relative; z-index:2; width:100%;}
.account-stage{
 display:flex; flex-direction:column; align-items:center; gap:26px;
 max-width:420px; margin:0 auto;
}

.account-intro{text-align:center; animation:accountSideIn .5s cubic-bezier(.2,.8,.2,1) both;}
.account-intro .eyebrow{justify-content:center;}
.account-intro h1{margin-bottom:0.3em; font-size:clamp(1.7rem,4.5vw,2.5rem);}
.account-intro .lede{margin:0; font-size:0.96rem;}

.account-perks{
 list-style:none; margin:0; padding:0;
 display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px;
}
.account-perks li{display:flex; align-items:center; gap:8px; font-size:0.84rem; color:var(--muted);}
.perk-dot{
 width:7px; height:7px; border-radius:50%; flex:none;
 background:var(--phosphor); box-shadow:0 0 0 4px rgba(47,125,255,0.16);
}

.account-card{
 position:relative; width:100%; padding:28px 26px 24px;
 animation:accountCardIn .5s cubic-bezier(.2,.8,.2,1) .06s both;
 transition:transform .2s ease, opacity .2s ease;
}
.account-card.is-swapping{opacity:0; transform:translateY(6px) scale(0.99);}

.account-tabs{
 position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px;
 padding:4px; border-radius:10px; background:var(--wash-03); border:1px solid var(--line);
 margin-bottom:20px;
}
.account-tab{
 position:relative; z-index:2; background:none; border:none; cursor:pointer; font-family:inherit;
 padding:10px 6px; border-radius:7px; font-size:0.85rem; font-weight:600; color:var(--muted);
 white-space:nowrap; transition:color .25s ease;
}
.account-tab.is-active{color:var(--foam);}
.account-tab-indicator{
 position:absolute; z-index:1; top:4px; left:4px; width:calc(50% - 6px); height:calc(100% - 8px);
 border-radius:7px; background:linear-gradient(135deg, var(--phosphor), var(--phosphor-dim));
 box-shadow:0 6px 18px rgba(47,125,255,0.3);
 transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}

.account-panels{min-height:220px;}
.account-panel-inner{animation:accountPanelIn .3s cubic-bezier(.2,.8,.2,1) both;}
.account-panel-inner .eyebrow{margin-bottom:0.9em;}
.account-panel-inner h3{font-size:1.1rem;}
.account-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px;}

.provider-btn{font-size:0.9rem; padding:12px 16px;}
.provider-btn svg{flex:none;}

@keyframes accountSideIn{
 from{opacity:0; transform:translateY(-8px);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes accountCardIn{
 from{opacity:0; transform:translateY(14px) scale(0.98);}
 to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes accountPanelIn{
 from{opacity:0; transform:translateY(6px);}
 to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
 .account-intro, .account-card, .account-panel-inner{animation:none;}
}

@media (max-width:520px){
 .account-hero{padding:36px 0 40px;}
 .account-wrap{padding:0 18px;}
 .account-card{padding:22px 18px 20px; border-radius:16px;}
 .account-tab{font-size:0.8rem; padding:9px 4px;}
 .account-perks{gap:8px 14px;}
 .account-perks li{font-size:0.8rem;}
}

/* ---------- Drifting dust motes behind the account card ---------- */
.account-particles{
 position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.account-particles span{
 position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
 background:var(--phosphor); opacity:0; box-shadow:0 0 6px 1px rgba(47,125,255,0.5);
 animation:accountMoteRise 7s ease-in infinite;
}
.account-particles span:nth-child(3n){background:var(--brass); box-shadow:0 0 6px 1px rgba(255,95,201,0.5);}
@keyframes accountMoteRise{
 0%{transform:translateY(0) scale(0.8); opacity:0;}
 8%{opacity:0.8;}
 85%{opacity:0.5;}
 100%{transform:translateY(-420px) scale(1.1); opacity:0;}
}

/* ---------- Rotating phosphor/brass halo around the auth card ---------- */
.account-card-halo{
 position:relative; width:100%; border-radius:calc(var(--radius) + 3px);
}
.account-card-halo::before{
 content:""; position:absolute; inset:-1px; z-index:0; border-radius:inherit;
 background:conic-gradient(from var(--angle,0deg), transparent 0 58%, var(--phosphor), var(--brass), transparent 100%);
 animation:rotateBorder 6s linear infinite; opacity:0.6; filter:blur(0.3px);
}
.account-card-halo .account-card{position:relative; z-index:1;}
@media (prefers-reduced-motion: reduce){
 .account-card-halo::before{animation:none; opacity:0.3;}
 .account-particles{display:none;}
}

/* ---------- Provider buttons: staggered entrance + sheen sweep ---------- */
.provider-btn-in{
 opacity:0; transform:translateY(8px);
 animation:providerBtnIn .4s cubic-bezier(.2,.8,.2,1) forwards;
 animation-delay:calc(var(--stagger, 0) * 70ms);
}
@keyframes providerBtnIn{ to{opacity:1; transform:translateY(0);} }
.provider-btn{position:relative; overflow:hidden;}
.provider-btn::before{
 content:""; position:absolute; inset:0; pointer-events:none;
 background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 46%, transparent 62%);
 background-size:220% 100%; background-position:150% 0; opacity:0;
 transition:opacity .2s ease;
}
.provider-btn:hover::before{opacity:1; animation:providerSheen .9s ease forwards;}
@keyframes providerSheen{
 from{background-position:150% 0;}
 to{background-position:-50% 0;}
}
.provider-btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,8,7,0.35);}
.provider-btn svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.provider-btn:hover svg{transform:scale(1.15) rotate(-6deg);}
@media (prefers-reduced-motion: reduce){
 .provider-btn-in{animation:none; opacity:1; transform:none;}
 .provider-btn::before{display:none;}
}

/* ---------- Email step inputs: focus glow ---------- */
#account-email-form .field-input{transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
#account-email-form .field-input:focus{box-shadow:0 0 0 3px rgba(47,125,255,0.18);}

/* ---------- Signed-in check badge ---------- */
.account-badge{
 width:44px; height:44px; border-radius:50%; margin-bottom:14px;
 display:flex; align-items:center; justify-content:center;
 background:linear-gradient(160deg, var(--phosphor), var(--phosphor-dim));
 color:#04140f; box-shadow:0 0 0 4px rgba(47,125,255,0.16);
}
.account-badge-pop{animation:accountBadgePop .55s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes accountBadgePop{
 0%{transform:scale(0.3); opacity:0;}
 60%{transform:scale(1.12); opacity:1;}
 100%{transform:scale(1);}
}

/* ---------- "Check your DMs" note after a fresh Discord sign-up ---------- */
.account-dm-note{
 display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding:10px 12px;
 border-radius:10px; border:1px solid rgba(47,125,255,0.3); background:rgba(47,125,255,0.08);
 font-size:0.84rem; color:var(--ink);
 animation:accountPanelIn .35s cubic-bezier(.2,.8,.2,1) .1s both;
}
.account-dm-note-icon{flex:none; font-size:1rem; line-height:1.3;}

/* ---------- Confetti burst (fires once, on a fresh Discord sign-up) ---------- */
.confetti-layer{
 position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:5;
}
.confetti-piece{
 position:absolute; top:-12px; width:6px; height:10px; border-radius:1px;
 animation-name:confettiFall; animation-timing-function:cubic-bezier(.16,.8,.24,1); animation-fill-mode:forwards;
}
@keyframes confettiFall{
 0%{transform:translateY(0) translateX(0) rotate(0deg); opacity:1;}
 100%{transform:translateY(260px) translateX(var(--drift,0px)) rotate(var(--rot,180deg)); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
 .confetti-layer{display:none;}
 .account-badge-pop, .account-dm-note{animation:none; opacity:1; transform:none;}
}

/* ---------- Footer legal row ---------- */
.footer-legal{
 display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; padding-top:14px;
 border-top:1px solid var(--line); font-size:0.78rem;
}
.footer-legal a{color:var(--muted); font-family:'Inter',sans-serif;}
.footer-legal a:hover{color:var(--ink);}

/* ---------- Simple legal / policy pages ---------- */
.legal-page h2{margin-top:1.6em;}
.legal-page h2:first-of-type{margin-top:0;}
.legal-page p, .legal-page li{color:var(--muted);}
.legal-page .updated-note{font-size:0.82rem; color:var(--phosphor);}

/* ============================================
 Administrator panel (hub page)
 ============================================ */
.admin-panel-grid{
 display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
 gap:16px;
}
.admin-panel-card{
 display:flex; flex-direction:column; gap:10px; padding:22px;
 text-decoration:none; color:inherit; transition:border-color 0.15s ease, transform 0.15s ease;
}
.admin-panel-card:hover{border-color:var(--phosphor); transform:translateY(-2px);}
.admin-panel-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.admin-panel-card-head h3{margin:0; font-size:1.05rem;}
.admin-panel-card .btn{align-self:flex-start; pointer-events:none; margin-top:4px;}

/* ============================================================
 iOS "Add to Home Screen" banner (blogs page only) - see
 ios-push-banner.js. Styled to sit right under the header,
 same family as .sponsor-banner but its own quieter palette
 since this is informational, not a promo.
 ============================================================ */
.ios-push-banner{
 position:relative; z-index:80;
 border-bottom:1px solid var(--line);
 background:rgba(47,125,255,0.07);
}
.ios-push-banner-inner{
 display:flex; align-items:flex-start; gap:12px;
 padding:12px 0;
}
.ios-push-banner-icon{
 flex:none; display:flex; align-items:center; justify-content:center;
 width:30px; height:30px; border-radius:99px; margin-top:1px;
 color:var(--phosphor); background:rgba(47,125,255,0.12);
 border:1px solid rgba(47,125,255,0.25);
}
.ios-push-banner-text{
 flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
 font-size:0.85rem; color:var(--muted); line-height:1.45;
}
.ios-push-banner-text strong:first-child{color:var(--foam); font-size:0.9rem;}
.ios-push-banner-text strong{color:var(--ink);}
.ios-push-banner-close{
 flex:none; display:flex; align-items:center; justify-content:center;
 width:26px; height:26px; margin-top:1px; border-radius:99px;
 color:var(--muted); background:transparent; border:1px solid transparent;
 transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.ios-push-banner-close:hover{color:var(--foam); border-color:var(--line); background:var(--wash-04);}
@media (max-width:640px){
 .ios-push-banner-inner{padding:11px 0;}
 .ios-push-banner-text{font-size:0.8rem;}
}

/* ============================================================
 Rendered markdown (see markdown.js) - used wherever sponsor/
 directory descriptions or blog posts are displayed.
 ============================================================ */
.md-h1{font-size:1.5rem; font-weight:700; color:var(--foam); margin:0.5em 0 0.25em;}
.md-h2{font-size:1.22rem; font-weight:700; color:var(--foam); margin:0.5em 0 0.25em;}
.md-h3{font-size:1.05rem; font-weight:700; color:var(--foam); margin:0.5em 0 0.25em;}
.md-subtext{display:block; font-size:0.78rem; color:var(--muted); margin:0.2em 0;}
.md-quote{
 margin:0.4em 0; padding:2px 0 2px 12px;
 border-left:3px solid var(--phosphor-dim); color:var(--ink);
}
.md-list{margin:0.35em 0; padding-left:1.4em;}
.md-list li{margin:0.15em 0;}
.md-spoiler{
 background:var(--panel-2); color:transparent; border-radius:4px; padding:0 3px;
 cursor:pointer; user-select:none; transition:color .1s ease;
}
.md-spoiler.revealed{color:var(--ink); background:var(--wash-05);}
.md-inline-code{
 font-family:'JetBrains Mono', monospace; font-size:0.88em;
 background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px;
}
.md-code-block{
 font-family:'JetBrains Mono', monospace; font-size:0.85em;
 background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
 padding:10px 12px; margin:0.4em 0; overflow-x:auto; white-space:pre;
}
.md-code-block code{background:none; border:none; padding:0;}

/* ============================================================
 Formatting help widget (see markdown-help.js)
 ============================================================ */
.md-help{
 margin-top:8px; border:1px solid var(--line); border-radius:10px;
 background:var(--wash-02); overflow:hidden;
}
.md-help summary{
 cursor:pointer; list-style:none; padding:9px 14px;
 font-size:0.82rem; color:var(--muted); font-weight:600;
 display:flex; align-items:center; gap:6px;
}
.md-help summary::-webkit-details-marker{display:none;}
.md-help summary::before{
 content:'▸'; display:inline-block; font-size:0.7rem; color:var(--phosphor);
 transition:transform .15s ease;
}
.md-help[open] summary::before{transform:rotate(90deg);}
.md-help summary:hover{color:var(--foam);}
.md-help-body{
 padding:4px 14px 12px; display:grid; grid-template-columns:1fr 1fr; gap:6px 16px;
}
.md-help-row{display:flex; flex-direction:column; gap:1px; min-width:0;}
.md-help-label{font-size:0.72rem; color:var(--muted);}
.md-help-syntax{
 font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--ink);
 background:var(--panel-2); border-radius:4px; padding:2px 6px; width:fit-content;
 max-width:100%; overflow-x:auto; white-space:nowrap;
}
@media (max-width:560px){
 .md-help-body{grid-template-columns:1fr;}
}

/* ============================================================
 PANEL - panel.harborbot.app server dashboard
 ============================================================ */
.panel-icon{width:18px; height:18px; flex:none; display:block;}

.panel-account{display:flex; align-items:center; gap:10px; margin-left:auto;}
.panel-account-avatar{width:28px; height:28px; border-radius:50%; display:block;}
.panel-account-name{font-size:0.88rem; color:var(--ink); font-weight:600; white-space:nowrap;}
.panel-account .btn-small .panel-icon{width:15px; height:15px;}

/* ---------- Guild picker ---------- */
.panel-guild-search{
 display:flex; align-items:center; gap:9px; max-width:340px; margin-bottom:18px;
 padding:9px 14px; border-radius:10px; background:var(--wash-03); border:1px solid var(--line);
 color:var(--muted); transition:border-color .15s ease, background .15s ease;
}
.panel-guild-search:focus-within{border-color:rgba(47,125,255,0.4); background:var(--wash-05);}
.panel-guild-search svg{flex:none;}
.panel-guild-search input{
 flex:1; min-width:0; background:none; border:none; color:var(--ink); font-family:inherit;
 font-size:0.92rem;
}
.panel-guild-search input:focus{outline:none;}
.panel-guild-grid{
 display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;
}
.panel-guild-card{
 display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 14px;
 cursor:pointer; text-align:center; font-family:inherit; color:var(--ink);
 transition:transform .15s cubic-bezier(.16,.8,.24,1), border-color .15s ease, background .15s ease;
}
.panel-guild-card:hover{transform:translateY(-3px); border-color:rgba(47,125,255,0.35); background:var(--wash-05);}
.panel-guild-card:active{transform:translateY(0);}
.panel-guild-card img{width:56px; height:56px; border-radius:50%; object-fit:cover;}
.panel-guild-fallback{
 width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
 background:var(--wash-06); font-weight:700; font-size:1.3rem; color:var(--muted);
}
.panel-guild-card span{font-weight:600; font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.panel-guild-empty{padding:24px; text-align:center; color:var(--muted);}

/* Skeleton cards shown for the instant between the picker mounting and
 the guild list arriving, so the grid never flashes bare loading text. */
.panel-guild-skel{
 display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 14px;
}
.panel-guild-skel-avatar, .panel-guild-skel-line{
 border-radius:50%; background:linear-gradient(100deg, var(--wash-04) 30%, var(--wash-07) 50%, var(--wash-04) 70%);
 background-size:200% 100%; animation:panel-skel-shimmer 1.3s ease-in-out infinite;
}
.panel-guild-skel-avatar{width:56px; height:56px;}
.panel-guild-skel-line{width:70%; height:12px; border-radius:6px;}
@keyframes panel-skel-shimmer{
 0%{background-position:200% 0;}
 100%{background-position:-200% 0;}
}

/* ---------- Shell: sidebar + main ---------- */
.panel-shell-section{padding:28px 0 60px;}
.panel-shell{
 display:flex; align-items:flex-start; gap:26px;
}

.panel-sidebar{
 flex:none; width:250px; position:sticky; top:20px;
 background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
 overflow:hidden; display:flex; flex-direction:column;
}
.panel-sidebar-guild-wrap{position:relative;}
.panel-sidebar-guild{
 display:flex; align-items:center; gap:11px; width:100%; padding:16px;
 background:var(--wash-03); border:none; border-bottom:1px solid var(--line);
 cursor:pointer; text-align:left; font-family:inherit; color:var(--ink);
 transition:background .15s ease;
}
.panel-sidebar-guild:hover{background:var(--wash-06);}
.panel-sidebar-guild img{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none;}
.panel-sidebar-guild-fallback{
 width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
 background:var(--wash-06); font-weight:700; color:var(--muted);
}
.panel-sidebar-guild-info{min-width:0; display:flex; flex-direction:column; gap:2px; flex:1;}
.panel-sidebar-guild-name{
 font-weight:700; font-size:0.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.panel-sidebar-guild-switch{font-size:0.76rem; color:var(--muted); display:flex; align-items:center; gap:4px;}
.panel-sidebar-guild-chev{
 flex:none; color:var(--muted); transition:transform .2s cubic-bezier(.16,.8,.24,1);
}
.panel-sidebar-guild[aria-expanded="true"] .panel-sidebar-guild-chev{transform:rotate(180deg);}

/* Quick-switch popover - lets you jump to another server without
 leaving the dashboard shell. */
.panel-guild-switcher{
 position:absolute; top:calc(100% + 6px); left:10px; right:10px; z-index:80;
 max-height:0; overflow:hidden; opacity:0;
 background:var(--nav-dd); border:1px solid var(--line); border-radius:12px;
 box-shadow:0 20px 46px rgba(2,8,7,0.4);
 transition:max-height .2s cubic-bezier(.16,.8,.24,1), opacity .15s ease;
}
.panel-sidebar-guild-wrap.open .panel-guild-switcher{max-height:320px; opacity:1; overflow-y:auto;}
.panel-guild-switcher-list{display:flex; flex-direction:column; gap:1px; padding:6px;}
.panel-guild-switcher-item{
 display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:8px;
 background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; color:var(--ink);
 transition:background .12s ease;
}
.panel-guild-switcher-item:hover{background:var(--wash-06);}
.panel-guild-switcher-item.current{color:var(--phosphor); background:rgba(47,125,255,0.1);}
.panel-guild-switcher-item img{width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none;}
.panel-guild-switcher-item .panel-guild-switcher-fallback{
 width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
 background:var(--wash-06); font-weight:700; font-size:0.76rem; color:var(--muted);
}
.panel-guild-switcher-item span{font-size:0.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.panel-guild-switcher-item .panel-icon{width:14px; height:14px; margin-left:auto; flex:none;}
.panel-guild-switcher-browse{
 display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px; border-top:1px solid var(--line);
 background:none; border-left:none; border-right:none; border-bottom:none; cursor:pointer; text-align:left;
 font-family:inherit; color:var(--muted); font-size:0.84rem; font-weight:600; transition:background .12s ease, color .12s ease;
}
.panel-guild-switcher-browse:hover{background:var(--wash-06); color:var(--ink);}

.panel-sidebar-nav{
 display:flex; flex-direction:column; padding:8px; min-height:0;
 overflow-y:auto; overflow-x:hidden; flex:1 1 auto;
 scrollbar-width:thin; overscroll-behavior:contain;
}
.panel-tab{
 display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
 border:none; background:transparent; color:var(--muted); font-size:0.88rem; font-weight:600;
 cursor:pointer; font-family:inherit; text-align:left; width:100%;
 transition:background .15s ease, color .15s ease;
}
.panel-tab:hover{background:var(--wash-05); color:var(--ink);}
.panel-tab.active{background:rgba(47,125,255,0.14); color:var(--phosphor);}
.panel-tab .panel-icon{color:inherit;}

.panel-sidebar-scrim{
 display:none; position:fixed; inset:0; background:rgba(5,6,20,0.6); border:none; z-index:60; cursor:pointer;
}

/* ---------- Main content ---------- */
.panel-main{flex:1; min-width:0;}
.panel-main-head{
 display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.panel-main-head-text{flex:1; min-width:0;}
.panel-main-head-text h2{
 margin:0 0 4px; font-size:1.3rem; display:flex; align-items:center; gap:10px;
}
.panel-main-head-text h2 .panel-icon{width:22px; height:22px; color:var(--phosphor);}
.panel-main-head-text .field-hint{margin:0;}
.panel-main-head-actions{display:flex; align-items:center; gap:12px; flex:none; padding-top:2px;}
.panel-save-status{font-size:0.84rem; color:var(--muted); display:flex; align-items:center; gap:5px; white-space:nowrap;}
.panel-save-status .panel-icon{width:15px; height:15px; color:var(--cyan);}
.panel-save-status.is-success{color:var(--cyan); font-weight:600;}
.panel-error-line{color:var(--danger); min-height:1.2em; margin:12px 0 0;}

/* ---------- Save confetti ---------- */
.panel-confetti-layer{
 position:fixed; inset:0; z-index:200; pointer-events:none; overflow:hidden;
}
.panel-confetti-piece{
 position:absolute; top:-14px; width:8px; height:14px; opacity:0.95;
 animation-name:panel-confetti-fall; animation-timing-function:cubic-bezier(.36,.66,.4,1); animation-fill-mode:forwards;
}
@keyframes panel-confetti-fall{
 0%{transform:translate(0,0) rotate(0deg); opacity:1;}
 85%{opacity:1;}
 100%{transform:translate(var(--drift),115vh) rotate(var(--spin)); opacity:0;}
}

.panel-mobile-menu{
 display:none; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
 border:1px solid var(--line); border-radius:9px; background:var(--wash-03); color:var(--ink); cursor:pointer;
}
.panel-mobile-menu .panel-icon{width:18px; height:18px;}

.panel-field-list{
 display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:6px 22px; padding-top:20px;
}
.panel-field{min-width:0; padding:10px 0;}
.panel-field-wide{grid-column:1/-1;}
.panel-field textarea.field-input{min-height:78px;}

.panel-field-toggle{display:flex; align-items:center; gap:11px; grid-column:1/-1; padding:11px 0;}
.panel-switch{position:relative; display:inline-block; width:38px; height:22px; flex:none; cursor:pointer;}
.panel-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.panel-switch-track{
 position:absolute; inset:0; border-radius:999px; background:var(--wash-06); border:1px solid var(--line);
 transition:background .15s ease, border-color .15s ease;
}
.panel-switch-thumb{
 position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted);
 transition:transform .15s ease, background .15s ease;
}
.panel-switch input:checked + .panel-switch-track{background:rgba(47,125,255,0.25); border-color:rgba(47,125,255,0.4);}
.panel-switch input:checked + .panel-switch-track .panel-switch-thumb{transform:translateX(16px); background:var(--phosphor);}

.panel-role-multi{display:flex; flex-wrap:wrap; gap:8px;}
.panel-role-chip{
 display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
 border:1px solid var(--line); background:var(--wash-03); font-size:0.82rem; cursor:pointer;
}
.panel-role-chip input{margin:0;}

.panel-secret-pill{display:inline-flex; align-items:center; gap:4px; margin-left:6px;}
.panel-secret-pill .panel-icon{width:12px; height:12px;}
.panel-secret-pill.is-set{color:var(--cyan); border-color:rgba(45,220,214,0.35); background:rgba(45,220,214,0.1);}

@media (max-width:880px){
 .panel-shell{position:relative;}
 .panel-sidebar{
 position:fixed; top:0; left:0; bottom:0; z-index:70; width:270px; max-width:82vw;
 height:100dvh; max-height:100dvh; min-height:0;
 border-radius:0; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,0.4);
 }
 .panel-sidebar.open{transform:translateX(0);}
 .panel-sidebar-scrim.open{display:block;}
 .panel-mobile-menu{display:flex;}
 .panel-field-list{grid-template-columns:1fr;}
}
@media (max-width:520px){
 .panel-account-name{display:none;}
 .panel-main-head{flex-wrap:wrap;}
 .panel-main-head-actions{width:100%; justify-content:space-between;}
}

/* Sponsor banner shows only on the panel's home (sign-in/server-picker)
 screens -- panel.js toggles this class the moment a server's editor
 opens. !important because initSponsorBanner() (script.js) sets an
 inline display style once sponsors load, which would otherwise win
 over a plain class rule regardless of load order. */
.panel-body [data-sponsor-banner].panel-banner-hidden{display:none !important;}

/* ============================================================
 PANEL FIELD ENGINE - custom dropdown, repeater lists, embed
 builder (see panel-fields.js). Replaces native <select> pickers
 and adds full CRUD for tickets/panels/categories/support teams
 and a Discord-style embed+banner+button editor for sessions.
 ============================================================ */

/* ---------- Custom searchable dropdown (replaces native select) ---------- */
.panel-combo{position:relative;}
.panel-combo-trigger{
 width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
 background:var(--wash-04); border:1px solid var(--line); border-radius:9px;
 color:var(--ink); font-family:'Inter',sans-serif; font-size:0.92rem; padding:9px 12px;
 cursor:pointer; text-align:left; transition:border-color .15s ease, background .15s ease;
}
.panel-combo-trigger span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.panel-combo-trigger:hover{border-color:rgba(235,233,255,0.22);}
.panel-combo-trigger[aria-expanded="true"]{border-color:var(--phosphor); background:var(--wash-05);}
.panel-combo-trigger.is-empty span{color:var(--muted);}
.panel-combo-chevron{width:15px; height:15px; flex:none; color:var(--muted); transition:transform .15s ease;}
.panel-combo-trigger[aria-expanded="true"] .panel-combo-chevron{transform:rotate(180deg);}
.panel-combo-pop{
 position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0;
 background:var(--nav-dd); border:1px solid var(--line); border-radius:10px;
 box-shadow:0 18px 40px rgba(0,0,0,0.45); overflow:hidden; backdrop-filter:blur(14px);
}
.panel-combo-search{
 width:100%; box-sizing:border-box; border:none; border-bottom:1px solid var(--line);
 background:transparent; color:var(--foam); font-family:'Inter',sans-serif; font-size:0.88rem;
 padding:10px 12px; outline:none;
}
.panel-combo-list{max-height:230px; overflow-y:auto; padding:5px;}
.panel-combo-opt{
 display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px;
 font-size:0.88rem; color:var(--ink); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.panel-combo-opt:hover{background:var(--wash-06);}
.panel-combo-opt.is-selected{background:rgba(47,125,255,0.16); color:var(--phosphor);}
.panel-combo-empty{padding:12px; font-size:0.84rem; color:var(--muted);}
.panel-combo-swatch{width:10px; height:10px; border-radius:50%; flex:none;}

/* ---------- Role multi-select filter box ---------- */
.panel-rolemulti-search{margin-bottom:8px;}
.panel-role-chip.is-checked{border-color:rgba(47,125,255,0.4); background:rgba(47,125,255,0.12); color:var(--phosphor);}

/* ---------- Color field ---------- */
.panel-color-input{display:flex; align-items:center; gap:10px;}
.panel-color-swatch{
 width:38px; height:38px; flex:none; border-radius:9px; border:1px solid var(--line);
 background:none; padding:0; cursor:pointer;
}
.panel-color-hex{font-family:'JetBrains Mono',monospace; text-transform:lowercase;}

/* ---------- Image / banner field ---------- */
.panel-image-input{display:flex; flex-direction:column; gap:8px;}
.panel-image-preview{position:relative; width:100%; max-width:340px;}
.panel-image-preview img{width:100%; border-radius:9px; display:block; border:1px solid var(--line);}
.panel-image-remove{position:absolute; top:8px; right:8px;}
.panel-image-row{display:flex; gap:8px; flex-wrap:wrap;}
.panel-image-row .panel-image-url{flex:1; min-width:180px;}
.panel-image-upload-btn{cursor:pointer; white-space:nowrap;}
.panel-image-status{min-height:1.1em;}

/* ---------- List / repeater editor ---------- */
.panel-list{display:flex; flex-direction:column; gap:8px;}
.panel-list-item{
 border:1px solid var(--line); border-radius:12px; background:var(--wash-02);
}
.panel-list-item-head{
 display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 6px 4px 4px;
 border-radius:12px 12px 0 0; overflow:hidden;
}
.panel-list-item-toggle{
 flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:none; border:none;
 color:var(--foam); font-family:'Manrope',sans-serif; font-size:0.98rem; font-weight:500;
 padding:10px 8px; cursor:pointer; text-align:left;
}
.panel-list-item-toggle span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.panel-list-item-chevron{width:15px; height:15px; flex:none; color:var(--muted); transition:transform .15s ease;}
.panel-list-item.is-open .panel-list-item-chevron{transform:rotate(180deg);}
.panel-list-item-actions{display:flex; align-items:center; gap:2px; flex:none;}
.panel-icon-btn{
 width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px;
 background:none; border:none; color:var(--muted); cursor:pointer; transition:background .15s ease, color .15s ease;
}
.panel-icon-btn:hover{background:var(--wash-06); color:var(--ink);}
.panel-icon-btn:disabled{opacity:0.3; cursor:default;}
.panel-icon-btn:disabled:hover{background:none;}
.panel-icon-btn svg{width:15px; height:15px;}
.panel-icon-btn-danger:hover{background:rgba(255,111,168,0.14); color:var(--danger);}
.panel-list-item-body{border-top:1px solid var(--line); padding:14px;}
.panel-list-item-fields{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.panel-list-empty{
 padding:20px; text-align:center; color:var(--muted); font-size:0.88rem;
 border:1px dashed var(--line); border-radius:12px;
}
.panel-list-add{align-self:flex-start; margin-top:2px;}
.panel-list-add .panel-icon{width:14px; height:14px;}

/* ---------- Embed builder + Discord-style preview ---------- */
.panel-embed-editor{border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--wash-02);}
.panel-embed-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start;}
.panel-embed-subsection{margin-top:6px; padding-top:14px; border-top:1px solid var(--line);}
.panel-embed-preview-wrap{position:sticky; top:14px;}
.panel-embed-card{
 background:#313338; border-radius:8px; padding:12px 14px; border-left:4px solid var(--embed-color,#2f7dff);
 font-family:'Inter',sans-serif; color:#dbdee1; max-width:420px;
}
.panel-embed-author{font-size:0.78rem; font-weight:600; color:#f2f3f5; margin-bottom:4px;}
.panel-embed-title{font-size:0.95rem; font-weight:700; color:#00a8fc; margin-bottom:6px;}
.panel-embed-desc{font-size:0.85rem; line-height:1.4; white-space:pre-wrap; color:#dbdee1;}
.panel-embed-fields{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.panel-embed-fieldrow{display:flex; flex-direction:column; gap:2px; flex:1 1 100%;}
.panel-embed-fieldrow.is-inline{flex:1 1 calc(33% - 8px);}
.panel-embed-fieldrow strong{font-size:0.8rem; color:#f2f3f5;}
.panel-embed-fieldrow span{font-size:0.82rem; color:#dbdee1; white-space:pre-wrap;}
.panel-embed-image{width:100%; border-radius:6px; margin-top:10px; display:block;}
.panel-embed-thumb{position:absolute; width:70px; height:70px; object-fit:cover; border-radius:6px; top:12px; right:14px;}
.panel-embed-footer{font-size:0.75rem; color:#949ba4; margin-top:10px;}
.panel-embed-btnrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.panel-embed-btn{
 display:inline-block; padding:6px 14px; border-radius:4px; font-size:0.8rem; font-weight:600; color:#fff;
}
.panel-embed-btn-primary{background:#5865f2;}
.panel-embed-btn-secondary{background:#4e5058;}
.panel-embed-btn-success{background:#248046;}
.panel-embed-btn-danger{background:#da373c;}
.panel-embed-btn-link{background:#4e5058; text-decoration:underline;}

@media (max-width:860px){
 .panel-embed-grid{grid-template-columns:1fr;}
 .panel-embed-preview-wrap{position:static;}
}

/* ---------- Toast notifications (replaces native alert()) ---------- */
#toast-host{
 position:fixed; z-index:9999; bottom:20px; right:20px;
 display:flex; flex-direction:column; gap:10px;
 max-width:min(360px, calc(100vw - 32px));
}
.toast{
 display:flex; align-items:flex-start; gap:10px;
 padding:14px 14px 14px 16px;
 border-radius:12px;
 background:var(--nav-dd, linear-gradient(165deg, rgba(31,32,80,0.97), rgba(10,11,32,0.98)));
 border:1px solid var(--line);
 box-shadow:0 12px 30px rgba(0,0,0,0.35);
 color:var(--foam);
 font-size:0.88rem;
 line-height:1.4;
 border-left:3px solid var(--phosphor);
 opacity:0; transform:translateY(8px) scale(0.98);
 transition:opacity 0.22s ease, transform 0.22s ease;
 pointer-events:auto;
}
.toast.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.toast-error{ border-left-color:var(--danger); }
.toast-success{ border-left-color:var(--cyan); }
.toast-msg{ flex:1; }
.toast-close{
 flex:none; background:none; border:none; cursor:pointer;
 color:var(--muted); font-size:1.1rem; line-height:1; padding:0 2px;
}
.toast-close:hover{ color:var(--foam); }
@media (max-width:520px){
 #toast-host{ left:16px; right:16px; bottom:16px; max-width:none; }
}


/* ---------- Harbor final polish ---------- */
.panel-body{background:
 radial-gradient(ellipse 760px 420px at 8% -8%, rgba(79,124,255,.09), transparent 62%),
 radial-gradient(ellipse 700px 420px at 102% 0%, rgba(138,92,245,.055), transparent 60%),
 var(--hull);}
.panel-shell-section{padding:34px 0 70px;}
.panel-main{background:color-mix(in srgb, var(--panel) 72%, transparent); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 26px; box-shadow:0 18px 55px rgba(0,0,0,.12);}
.panel-main-head{margin-bottom:0;}
.panel-main-head-actions .btn{min-width:124px;}
.panel-save-status.is-dirty{color:var(--brass); font-weight:600;}
.panel-save-status.is-dirty .panel-icon{color:var(--brass);}
.panel-tab.active{box-shadow:inset 2px 0 0 var(--phosphor);}
.panel-field-list{padding-top:16px;}
.panel-field{padding:12px 0;}
.panel-field-list > .panel-field:nth-child(odd){background:linear-gradient(90deg, transparent, var(--wash-006), transparent);}
.panel-guild-card{min-height:92px; display:flex; align-items:center; gap:14px; padding:18px; text-align:left; color:var(--ink); cursor:pointer; width:100%;}
.panel-guild-card:hover{border-color:rgba(79,124,255,.35); box-shadow:0 12px 34px rgba(0,0,0,.12);}
.panel-guild-card img,.panel-guild-card .panel-guild-fallback{width:48px;height:48px;border-radius:14px;object-fit:cover;}
.panel-guild-card span:last-child{font-weight:700;}
.panel-guild-skel{min-height:92px; display:flex; align-items:center; gap:14px; padding:18px;}
.panel-guild-skel-avatar{width:48px;height:48px;border-radius:14px;background:linear-gradient(90deg,var(--wash-04),var(--wash-07),var(--wash-04));background-size:200% 100%;animation:harborShimmer 1.4s ease-in-out infinite;}
.panel-guild-skel-line{height:12px;width:48%;border-radius:99px;background:linear-gradient(90deg,var(--wash-04),var(--wash-07),var(--wash-04));background-size:200% 100%;animation:harborShimmer 1.4s ease-in-out infinite;}
@keyframes harborShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.field-input,.panel-combo-trigger{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.field-input:focus,.panel-combo-trigger:focus{box-shadow:0 0 0 3px rgba(79,124,255,.12);}
.btn-primary{background:linear-gradient(135deg,#4f7cff,#6d5dfc);}
.btn-primary:hover{box-shadow:0 12px 32px rgba(79,124,255,.28);}
@media (max-width:880px){.panel-shell-section{padding-top:20px}.panel-main{border-radius:18px;padding:18px}.panel-sidebar{box-shadow:12px 0 50px rgba(0,0,0,.35)}}
@media (prefers-reduced-motion:reduce){.panel-guild-skel-avatar,.panel-guild-skel-line{animation:none}}



/* Harbor v1.1 visual system */
:root {
  --harbor-bg: #070b14;
  --harbor-surface: rgba(17, 24, 39, .78);
  --harbor-surface-2: rgba(22, 31, 49, .86);
  --harbor-border: rgba(148, 163, 184, .13);
  --harbor-text: #f8fafc;
  --harbor-muted: #94a3b8;
  --harbor-accent: #7c8cff;
  --harbor-accent-2: #4f8cff;
  --harbor-success: #34d399;
  --harbor-danger: #fb7185;
  --harbor-radius: 18px;
  --harbor-shadow: 0 18px 55px rgba(0,0,0,.28);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(79,140,255,.14), transparent 60%),
    radial-gradient(800px 500px at 95% 5%, rgba(124,140,255,.10), transparent 58%),
    var(--harbor-bg);
  color: var(--harbor-text);
}

button, input, textarea, select { font: inherit; }

button {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { cursor: not-allowed; opacity: .58; }

a { color: inherit; text-decoration: none; }

.harbor-shell, .dashboard-shell, .app-shell {
  position: relative;
}

.harbor-card, .card, .panel, .dashboard-card, .stat-card {
  background: linear-gradient(145deg, var(--harbor-surface-2), var(--harbor-surface));
  border: 1px solid var(--harbor-border);
  border-radius: var(--harbor-radius);
  box-shadow: var(--harbor-shadow);
  backdrop-filter: blur(18px);
}

.harbor-card:hover, .card:hover, .panel:hover, .dashboard-card:hover {
  border-color: rgba(124,140,255,.24);
}

.harbor-button, .btn, button.primary {
  border: 1px solid rgba(124,140,255,.28);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--harbor-accent), var(--harbor-accent-2));
  color: white;
  box-shadow: 0 10px 25px rgba(79,140,255,.18);
}

.harbor-button.secondary, .btn.secondary {
  background: rgba(255,255,255,.045);
  border-color: var(--harbor-border);
  box-shadow: none;
}

input, textarea, select {
  background: rgba(2, 6, 23, .48);
  border: 1px solid var(--harbor-border);
  border-radius: 12px;
  color: var(--harbor-text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(124,140,255,.65);
  box-shadow: 0 0 0 4px rgba(124,140,255,.10);
  background: rgba(2, 6, 23, .68);
}

.harbor-sidebar, .sidebar {
  background: rgba(5, 9, 18, .78);
  border-right: 1px solid var(--harbor-border);
  backdrop-filter: blur(22px);
}

.harbor-nav-item, .nav-item {
  border-radius: 11px;
  color: var(--harbor-muted);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.harbor-nav-item:hover, .nav-item:hover {
  background: rgba(124,140,255,.08);
  color: var(--harbor-text);
}
.harbor-nav-item.active, .nav-item.active {
  background: linear-gradient(90deg, rgba(124,140,255,.16), rgba(79,140,255,.07));
  color: white;
  box-shadow: inset 3px 0 0 var(--harbor-accent);
}

.harbor-page-title, h1 {
  letter-spacing: -.035em;
}
.harbor-page-subtitle, .muted, .subtitle {
  color: var(--harbor-muted);
}

.harbor-badge, .badge, .status-badge {
  border-radius: 999px;
  border: 1px solid var(--harbor-border);
  background: rgba(255,255,255,.045);
}

.toast, .notification, .alert {
  border-radius: 14px;
  border: 1px solid var(--harbor-border);
  box-shadow: var(--harbor-shadow);
  backdrop-filter: blur(18px);
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.085), rgba(255,255,255,.045));
  background-size: 200% 100%;
  animation: harbor-shimmer 1.35s infinite;
  border-radius: 10px;
}
@keyframes harbor-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (max-width: 760px) {
  .harbor-card, .card, .panel, .dashboard-card, .stat-card {
    border-radius: 15px;
  }
  .harbor-sidebar, .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--harbor-border);
  }
}


/* Harbor v1.2 status polish — additive only */
.status-live-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:.82rem;
  background:var(--wash-02);
}
.status-live-meta span{display:inline-flex;align-items:center;gap:8px;}
.status-live-indicator{
  width:7px;height:7px;border-radius:50%;
  background:#2ddcd6;
  box-shadow:0 0 0 4px rgba(45,220,214,.10);
}
@media (max-width:640px){
  .status-live-meta{flex-direction:column;align-items:flex-start;}
}

.panel-platform-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.panel-platform-grid article{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--wash-02);display:flex;flex-direction:column;gap:5px}
.panel-platform-grid strong{font-size:1.15rem;color:var(--text)}
.panel-platform-grid span{font-size:.78rem;color:var(--muted)}
@media(max-width:800px){.panel-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.panel-sidebar-nav::-webkit-scrollbar{width:7px;}
.panel-sidebar-nav::-webkit-scrollbar-track{background:transparent;}
.panel-sidebar-nav::-webkit-scrollbar-thumb{background:var(--wash-08);border-radius:999px;}
.panel-sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--wash-12);}


/* ---------- Owner-controlled dashboard access ---------- */
.panel-guild-card{
  display:flex; align-items:center; gap:14px; text-align:left;
}
.panel-guild-card-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.panel-guild-card-info strong{font-size:1rem; color:var(--foam); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.panel-guild-card-info small{font-size:.78rem; color:var(--muted);}
.panel-tab-owner{border-top:1px solid rgba(47,125,255,.22); margin-top:10px; padding-top:14px !important;}
.panel-access-head{
 display:flex; justify-content:space-between; gap:24px; align-items:flex-start;
 padding:22px; margin-bottom:18px; border:1px solid var(--line); border-radius:16px;
 background:linear-gradient(135deg, rgba(47,125,255,.10), rgba(138,92,245,.06));
}
.panel-access-kicker{font-size:.7rem; letter-spacing:.12em; font-weight:800; color:var(--phosphor);}
.panel-access-head h3{margin:6px 0 5px;}
.panel-access-security{
 display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
 padding:8px 11px; border-radius:999px; border:1px solid rgba(47,125,255,.25);
 background:rgba(47,125,255,.08); color:var(--ink); font-size:.78rem; font-weight:700;
}
.panel-access-add{
 display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-bottom:18px;
}
.panel-access-list{display:grid; gap:14px;}
.panel-access-user{
 border:1px solid var(--line); border-radius:16px; padding:18px;
 background:var(--wash-025); box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.panel-access-user-top{
 display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px;
}
.panel-access-user-top strong{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.panel-access-user-top code{
 display:inline-block; margin-top:4px; font:600 .9rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
 color:var(--ink); background:var(--wash-05); padding:6px 8px; border-radius:7px;
}
.panel-access-permissions{
 display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
}
.panel-access-permission{
 display:flex; gap:10px; align-items:flex-start; padding:12px;
 border:1px solid var(--line); border-radius:12px; cursor:pointer;
 background:var(--wash-02); transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.panel-access-permission:hover{background:var(--wash-04); transform:translateY(-1px);}
.panel-access-permission input{margin-top:3px; accent-color:var(--phosphor);}
.panel-access-permission span{display:flex; flex-direction:column; gap:2px;}
.panel-access-permission strong{font-size:.86rem; color:var(--ink);}
.panel-access-permission small{font-size:.72rem; line-height:1.35; color:var(--muted);}
.panel-access-full{grid-column:1/-1; border-color:rgba(138,92,245,.28);}
.panel-access-empty,.panel-access-denied{
 padding:28px; border:1px dashed var(--line); border-radius:16px; text-align:center;
 background:var(--wash-02);
}
.panel-access-empty strong,.panel-access-denied strong{display:block; color:var(--ink); margin-bottom:5px;}
.panel-access-empty span,.panel-access-denied p{color:var(--muted); margin:0;}
@media (max-width:700px){
 .panel-access-head{flex-direction:column; padding:18px;}
 .panel-access-add{grid-template-columns:1fr;}
 .panel-access-permissions{grid-template-columns:1fr;}
 .panel-access-full{grid-column:auto;}
}

/* =========================================================
   Harbor v1.3 mobile UX pass
   Designed for 320px–430px phones, tablets, and safe-area insets.
   ========================================================= */
@media (max-width: 880px){
  .panel-shell-section{padding:14px 0 calc(28px + env(safe-area-inset-bottom));}
  .panel-shell{gap:0; width:100%;}
  .panel-main{width:100%; border-radius:16px; padding:14px; min-height:calc(100dvh - 110px);}
  .panel-sidebar{
    width:min(330px, 88vw);
    padding-bottom:env(safe-area-inset-bottom);
    overscroll-behavior:contain;
  }
  .panel-sidebar-nav{padding:10px 9px 14px; -webkit-overflow-scrolling:touch;}
  .panel-tab{min-height:46px; padding:11px 12px; font-size:.92rem;}
  .panel-sidebar-guild{min-height:70px; padding:14px;}
  .panel-sidebar-scrim{backdrop-filter:blur(2px);}
  .panel-mobile-menu{width:42px;height:42px;border-radius:11px;}
  .panel-main-head{gap:10px; padding-bottom:14px;}
  .panel-main-head-text h2{font-size:1.12rem;}
  .panel-main-head-actions{gap:8px;}
  .panel-main-head-actions .btn{min-height:42px;}
  .panel-save-status{font-size:.78rem;}
  .panel-field-list{gap:2px 14px; padding-top:14px;}
  .panel-field{padding:9px 0;}
  .field-input,.panel-combo-trigger, select.field-input{min-height:44px; font-size:16px;}
  .panel-field textarea.field-input{min-height:110px;}
  .panel-role-chip{min-height:40px; padding:8px 11px;}
  .panel-platform-grid{grid-template-columns:1fr 1fr; gap:8px;}
  .panel-platform-grid article{padding:13px; min-width:0;}
}

@media (max-width:600px){
  .wrap{width:min(100% - 28px, var(--maxw));}
  .site .nav{min-height:58px;}
  .brand{font-size:1rem;}
  .theme-toggle,.nav-toggle{width:40px;height:40px;}
  .links{padding:12px;}
  .links a,.links .nav-more-toggle,.links .btn{min-height:44px; display:flex; align-items:center;}

  .panel-shell-section{padding-top:8px;}
  .panel-main{padding:12px; border-radius:14px;}
  .panel-main-head{align-items:center;}
  .panel-main-head-text{min-width:0;}
  .panel-main-head-text h2{font-size:1.02rem; gap:7px;}
  .panel-main-head-text .field-hint{font-size:.78rem; line-height:1.4;}
  .panel-main-head-actions{flex-wrap:wrap; width:100%;}
  .panel-main-head-actions .panel-save-status{flex:1 1 140px; min-width:0;}
  .panel-main-head-actions .btn{flex:0 0 auto; min-width:0; padding:10px 13px;}

  .panel-access-head{margin-bottom:12px; padding:15px; border-radius:14px; gap:12px;}
  .panel-access-head h3{font-size:1rem;}
  .panel-access-head .field-hint{font-size:.78rem;}
  .panel-access-security{font-size:.72rem; white-space:normal;}
  .panel-access-add{gap:8px; margin-bottom:12px;}
  .panel-access-add .btn{width:100%; min-height:44px;}
  .panel-access-user{padding:14px; border-radius:14px;}
  .panel-access-user-top{align-items:flex-start; margin-bottom:11px;}
  .panel-access-user-top code{font-size:.78rem; max-width:calc(100vw - 130px); overflow:hidden; text-overflow:ellipsis;}
  .panel-access-remove{min-height:40px;}
  .panel-access-permissions{gap:7px;}
  .panel-access-permission{min-height:50px; padding:10px;}
  .panel-access-permission strong{font-size:.82rem;}
  .panel-access-permission small{font-size:.69rem;}

  .panel-guild-card{min-height:76px; padding:14px; gap:11px;}
  .panel-guild-card img,.panel-guild-card .panel-guild-fallback{width:42px;height:42px;border-radius:12px;}
}

@media (max-width:380px){
  .wrap{width:min(100% - 20px, var(--maxw));}
  .panel-main{padding:10px;}
  .panel-platform-grid{grid-template-columns:1fr;}
  .panel-main-head-actions .btn{width:100%;}
  .panel-main-head-actions .panel-save-status{flex-basis:100%;}
  .panel-access-user-top{flex-direction:column;}
  .panel-access-user-top code{max-width:100%;}
}

@media (prefers-reduced-motion: reduce){
  .panel-sidebar{transition:none;}
}
.panel-menu-open{overflow:hidden;}
@media (min-width:881px){.panel-menu-open{overflow:auto;}}


/* Access request UI */
.panel-tab-request{border-color:rgba(91,140,255,.28);}
.panel-request-card{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:20px;box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.08));}
.panel-request-hero{padding:4px 2px 16px;}
.panel-request-hero h3{margin:6px 0 6px;font-size:1.15rem;}
.panel-request-hero p{margin:0;color:var(--muted);line-height:1.5;max-width:68ch;}
.panel-request-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
.panel-request-option{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:13px;cursor:pointer;transition:.18s ease;min-height:72px;}
.panel-request-option:hover{transform:translateY(-1px);border-color:rgba(91,140,255,.4);}
.panel-request-option input{margin-top:3px;accent-color:var(--phosphor);width:18px;height:18px;flex:none;}
.panel-request-option span{display:flex;flex-direction:column;gap:3px;}
.panel-request-option strong{font-size:.86rem;color:var(--ink);}
.panel-request-option small{font-size:.72rem;color:var(--muted);line-height:1.35;}
.panel-request-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;}
.is-success{color:#3ddc97!important}.is-error{color:#ff6b7a!important}
@media(max-width:720px){.panel-request-options{grid-template-columns:1fr}.panel-request-card{padding:15px}.panel-request-option{min-height:62px}.panel-request-actions{align-items:stretch}.panel-request-actions .btn{width:100%}}

/* Harbor v1.7 dashboard command center */
.panel-tab-special-icon{width:22px;display:inline-flex;justify-content:center;font-size:15px;opacity:.9}.panel-tab-special.active .panel-tab-special-icon{opacity:1}
.panel-home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.panel-metric{background:var(--card,#11131a);border:1px solid var(--line,#252936);border-radius:18px;padding:20px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}.panel-metric span,.panel-metric small{color:var(--muted,#8b93a7)}.panel-metric strong{font-size:30px;letter-spacing:-.04em}.panel-metric-hero{background:linear-gradient(135deg,rgba(47,125,255,.18),rgba(45,220,214,.08));border-color:rgba(47,125,255,.35)}
.panel-command-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}.panel-command-card,.panel-security-score,.panel-recommendation{background:var(--card,#11131a);border:1px solid var(--line,#252936);border-radius:18px;padding:20px}.panel-command-card h3{margin:0 0 14px}.panel-timeline{padding:12px 0;border-top:1px solid var(--line,#252936);display:grid;gap:4px}.panel-timeline span,.panel-timeline small{color:var(--muted,#8b93a7)}.panel-quick-actions{display:grid;gap:10px}.panel-security-score{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-security-score strong{font-size:42px;display:block}.panel-security-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#2f7dff calc(var(--score)*1%),#272b36 0);position:relative}.panel-security-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card,#11131a)}.panel-security-ring span{position:relative;z-index:1;font-weight:800}.panel-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.panel-check-grid>div{padding:14px;border:1px solid var(--line,#252936);border-radius:12px;background:rgba(255,255,255,.02)}.panel-toolbar{display:flex;gap:10px;margin-bottom:14px}.panel-audit-list{display:grid;gap:8px}.panel-audit-item{display:flex;justify-content:space-between;gap:16px;padding:15px;border:1px solid var(--line,#252936);border-radius:14px;background:var(--card,#11131a)}.panel-audit-item div{display:grid;gap:3px}.panel-audit-item span,.panel-audit-item time{color:var(--muted,#8b93a7);font-size:.9rem}.panel-usage-row{display:grid;grid-template-columns:150px 1fr 40px;align-items:center;gap:10px;margin:12px 0}.panel-usage-row div{height:8px;border-radius:99px;background:#252936;overflow:hidden}.panel-usage-row i{display:block;height:100%;background:#2f7dff;border-radius:99px}.panel-recommendations{display:grid;gap:12px}.panel-recommendation{display:flex;gap:14px;align-items:flex-start}.panel-recommendation>span{font-size:20px}.panel-recommendation.warning{border-color:rgba(255,206,84,.35)}.panel-recommendation.success{border-color:rgba(61,220,151,.35)}.panel-recommendation p{margin:.35rem 0 0;color:var(--muted,#8b93a7)}.panel-access-meta,.panel-request-meta{margin:12px 0}.panel-access-meta label,.panel-request-meta label{display:grid;gap:7px;max-width:260px}.panel-access-expiry{width:100%}
@media(max-width:900px){.panel-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-command-grid{grid-template-columns:1fr}.panel-check-grid{grid-template-columns:1fr}}
@media(max-width:600px){.panel-home-grid{grid-template-columns:1fr 1fr;gap:10px}.panel-metric{padding:15px;min-height:105px}.panel-metric strong{font-size:25px}.panel-command-card,.panel-security-score{padding:15px}.panel-toolbar{flex-direction:column}.panel-audit-item{flex-direction:column}.panel-usage-row{grid-template-columns:100px 1fr 30px;font-size:.85rem}.panel-check-grid{grid-template-columns:1fr}.panel-recommendation{padding:15px}}