/* Liquid surfaces share the same ambient field; text lives on a calm inner layer. */
.plan-price { font-size: 38px; font-weight: 600; letter-spacing: -1px; margin: 24px 0; }
.plan-price small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--secondary); }
.plan-card h2 { font-size: 27px; }
.plan-card { overflow: hidden; }
.captcha-image-row { display: flex; align-items: center; gap: 12px; margin: -8px 0 20px; }
.captcha-image-row img { width: 184px; height: 61px; max-width: 75%; border-radius: 12px; border: 1px solid var(--glass-edge); object-fit: contain; background: #edf1ff; }
.captcha-image-row button { white-space: nowrap; margin: 0; }
.palette-options { display: flex; flex-wrap: wrap; gap: 12px; }
.palette-option { display: flex; align-items: center; gap: 9px; padding: 12px 17px; }
.palette-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.palette-dot { width: 17px; height: 17px; border-radius: 50%; background: #7c88da; }
.palette-mint .palette-dot { background: #35a99d; }.palette-rose .palette-dot { background: #cc719a; }
.palette-amber .palette-dot { background: #b98b3e; }.palette-ocean .palette-dot { background: #338cc3; }
.page-enter { animation: page-arrive .28s ease-out; }
dialog[open] { animation: dialog-arrive .22s ease-out; }
.form-error { animation: input-shake .25s ease-out; }
@keyframes page-arrive { from { opacity: .55; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-arrive { from { opacity: .4; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes input-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
:root {
  --bg: #edf0fa;
  --panel: rgba(255,255,255,.58);
  --panel-soft: rgba(250,252,255,.48);
  --input: rgba(255,255,255,.52);
  --line: rgba(134,153,189,.19);
  --text: #253451;
  --secondary: #5c6c88;
  --muted: #7888a3;
  --accent: #6376dc;
  --accent-soft: rgba(109,127,232,.10);
  --green: #248f81;
  --green-soft: rgba(76,186,158,.12);
  --amber-soft: rgba(244,193,105,.13);
  --red-soft: rgba(230,113,146,.12);
  --glass-edge: rgba(255,255,255,.82);
  --glass-shadow: 0 8px 32px rgba(60,83,135,.055), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.36);
  --blur: blur(24px) saturate(155%);
}
[data-theme="dark"] {
  --bg: #111729;
  --panel: rgba(29,40,62,.62);
  --panel-soft: rgba(43,55,82,.36);
  --input: rgba(20,30,49,.54);
  --line: rgba(180,197,234,.11);
  --text: #e1e8fa;
  --secondary: #afbbd5;
  --muted: #94a2c0;
  --accent: #a6b3ff;
  --accent-soft: rgba(144,163,250,.13);
  --green: #6ad1b9;
  --green-soft: rgba(80,190,164,.12);
  --amber-soft: rgba(225,182,100,.11);
  --red-soft: rgba(225,129,157,.12);
  --glass-edge: rgba(204,216,255,.17);
  --glass-shadow: 0 12px 38px rgba(0,0,0,.12), inset 0 1px 0 rgba(215,225,255,.16), inset 0 -1px 0 rgba(168,186,225,.04);
}
body { background: var(--bg); isolation: isolate; }
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 12% 0%,rgba(255,255,255,.7),transparent 50%); }
.fluid { position: absolute; width: min(65vw,900px); height: min(65vw,900px); border-radius: 43% 57% 65% 35% / 45% 41% 59% 55%; filter: blur(65px); opacity: .72; will-change: transform; }
.fluid-blue { top: -28%; left: 10%; background: radial-gradient(circle at 45% 50%,#a7c7ff,rgba(173,206,255,.12) 69%); animation: drift-blue 28s ease-in-out infinite alternate; }
.fluid-violet { top: 18%; right: -18%; background: radial-gradient(circle at 50% 50%,#d8bdf5,rgba(214,194,245,.12) 70%); animation: drift-violet 32s ease-in-out infinite alternate; }
.fluid-aqua { bottom: -39%; left: -10%; background: radial-gradient(circle at 50% 50%,#a5e4df,rgba(164,227,225,.08) 70%); animation: drift-aqua 26s ease-in-out infinite alternate; }
.ambient-grain { position: absolute; inset: 0; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238292b0' opacity='.5' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
[data-theme="dark"] .ambient { background: linear-gradient(145deg,#101729,#17192d); }
[data-theme="dark"] .fluid { opacity: .37; }
[data-theme="dark"] .fluid-blue { background: radial-gradient(circle,#385b9b,transparent 70%); }
[data-theme="dark"] .fluid-violet { background: radial-gradient(circle,#6c4389,transparent 70%); }
[data-theme="dark"] .fluid-aqua { background: radial-gradient(circle,#205d6f,transparent 70%); }
@keyframes drift-blue { 0% { transform: translate(-8%,-4%) rotate(-12deg) scale(.95); } 100% { transform: translate(24%,20%) rotate(18deg) scale(1.13); } }
@keyframes drift-violet { 0% { transform: translate(4%,-10%) scale(1); } 100% { transform: translate(-28%,24%) rotate(-23deg) scale(1.17); } }
@keyframes drift-aqua { 0% { transform: translate(2%,10%) rotate(-15deg); } 100% { transform: translate(45%,-19%) rotate(15deg) scale(1.1); } }

/* Floating navigation and the independent glass top bar. */
aside { inset: 18px auto 18px 18px; width: 228px; padding: 26px 15px 20px; border: 1px solid var(--glass-edge); border-radius: 27px; background: rgba(248,251,255,.39); color: var(--secondary); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); }
[data-theme="dark"] aside { background: rgba(25,35,55,.54); }
aside .brand { margin-left: 6px; }
.brand { color: var(--text); gap: 10px; }
.brand-name { font-size: 18px; letter-spacing: .6px; line-height: 1.4; font-weight: 650; }
.brand-name b { display: block; margin: 3px 0 0; font-size: 10px; letter-spacing: 1.5px; color: var(--secondary); font-weight: 500; }
.brand-icon { width: 43px; height: 46px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 15px; color: #fff; background: linear-gradient(145deg,#a9b6ff90,#7388eadd 55%,#8ca7efc0); box-shadow: 0 6px 18px #6d80d82b, inset 0 1px 1px #ffffffe0, inset 0 -2px 6px #ffffff38; }
.brand-icon .icon { width: 32px; height: 32px; stroke-width: 1.15; fill: rgba(255,255,255,.22); }
.workspace-label { margin-top: 29px; margin-bottom: 25px; border-color: var(--glass-edge); background: rgba(255,255,255,.25); box-shadow: inset 0 1px 0 #ffffff44; border-radius: 13px; color: var(--secondary); padding: 12px 10px; }
[data-theme="dark"] .workspace-label { background: rgba(255,255,255,.035); }
.workspace-dot { border-radius: 50%; background: #9aaae0; box-shadow: 0 0 0 3px #9aaae019; }
.workspace-tag { color: var(--muted); border-color: var(--line); border-radius: 6px; }
.nav-label { color: var(--muted); font-size: 10px; }
nav { gap: 7px; }
nav button { border: 1px solid transparent; border-radius: 14px; color: var(--secondary); min-height: 46px; transition: background .25s,border-color .25s,box-shadow .25s,transform .25s; }
nav button:hover { color: var(--text); background: rgba(255,255,255,.32); transform: translateX(2px); }
nav button.active { background: linear-gradient(125deg,rgba(255,255,255,.85),rgba(255,255,255,.28)); color: #586bc3; border-color: var(--glass-edge); box-shadow: 0 4px 14px #566cb516, inset 0 1px 0 #fff; }
nav button.active .icon { color: #7182d1; }
nav button small { color: var(--muted); background: var(--accent-soft); border-radius: 7px; }
[data-theme="dark"] nav button:hover { background: rgba(255,255,255,.045); }
[data-theme="dark"] nav button.active { background: linear-gradient(120deg,rgba(166,182,255,.22),rgba(123,149,220,.07)); color: #dce3ff; box-shadow: 0 5px 16px #0000000a,inset 0 1px 0 #d7e1ff33; }
[data-theme="dark"] nav button.active .icon { color: #b5c4ff; }
.cluster-label { color: var(--secondary); font-size: 8px; }
.sidebar-bottom { margin-top: auto; }
.sidebar-bottom p { color: var(--muted); }
.sidebar-version { color: var(--muted); border-top-color: var(--line); }
main { margin-left: 264px; padding-top: 18px; }
header { margin: 0 24px 0 0; padding: 0 26px; min-height: 64px; background: rgba(255,255,255,.37); border: 1px solid var(--glass-edge); border-radius: 21px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); }
[data-theme="dark"] header { background: rgba(30,41,63,.52); }
.header-divider { border-color: var(--line); }
.avatar { background: linear-gradient(135deg,rgba(154,173,244,.25),rgba(201,182,237,.2)); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 #ffffff55; }
.main-body { padding: 30px 26px 25px 5px; }
.page-heading { margin-bottom: 26px; padding: 0 3px; }
.page-heading h1 { font-size: 28px; font-weight: 620; letter-spacing: -1px; }
.heading-kicker { font-size: 8px; color: var(--muted); letter-spacing: 2px; margin-bottom: 9px; }
.page-heading p { color: var(--secondary); }

/* Refracted edges, milky surfaces, and a readable resting state. */
.card, .panel { position: relative; background: var(--panel); border: 1px solid var(--glass-edge); border-radius: 22px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); }
.card { transition: transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(64,84,145,.09),inset 0 1px 0 rgba(255,255,255,.9); }
[data-theme="dark"] .card:hover { box-shadow: 0 16px 35px #00000024,inset 0 1px 0 #d8e4ff33; }
.cards { gap: 18px; }
.card { padding: 21px; }
.panel { padding: 24px; }
.card .value { font-weight: 590; letter-spacing: -1.4px; margin-top: 12px; }
.metric-icon { width: 35px; height: 35px; border: 1px solid var(--glass-edge); border-radius: 12px; background: linear-gradient(140deg,#b9c9fa32,#d7dffb26); box-shadow: inset 0 1px 0 #ffffff88,0 3px 9px #5263a609; }
.metric-icon.green { background: linear-gradient(140deg,#a9e5d72c,#c7f1ed20); }
.metric-icon.amber { background: linear-gradient(140deg,#f2d7a13b,#f9eddd26); }
.metric-foot { border-top-color: var(--line); }
.hero { border-radius: 24px; min-height: 165px; background: linear-gradient(120deg,rgba(255,255,255,.64),rgba(229,233,255,.40) 45%,rgba(226,242,255,.45)); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(22px) saturate(145%); backdrop-filter: blur(22px) saturate(145%); box-shadow: var(--glass-shadow); padding: 28px 32px; }
.hero::before { content: ''; position: absolute; width: 260px; height: 260px; right: 18%; top: -120px; background: radial-gradient(circle,#c8bff13b,transparent 70%); pointer-events: none; }
.hero-copy { max-width: 72%; }
.hero .eyebrow { color: #8a95b9; }
.hero h2 { color: #485e91; font-weight: 600; font-size: 26px; }
.hero p { color: #7789a6; }
.hero-link { color: #637bc2; }
.hero-art { right: 14px; top: -23px; opacity: .73; filter: drop-shadow(0 7px 12px #8b9bd01c); animation: float-emblem 10s ease-in-out infinite; }
[data-theme="dark"] .hero { background: linear-gradient(110deg,rgba(42,57,91,.66),rgba(56,49,86,.46),rgba(38,63,87,.5)); border-color: var(--glass-edge); }
[data-theme="dark"] .hero h2 { color: #dce4ff; }
[data-theme="dark"] .hero p, [data-theme="dark"] .hero-link { color: #a5b5d7; }
[data-theme="dark"] .hero-art { opacity: .52; }
@keyframes float-emblem { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
button { border-radius: 11px; background: rgba(255,255,255,.38); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); transition: transform .22s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s; }
button:hover { background: rgba(255,255,255,.65); border-color: var(--glass-edge); box-shadow: 0 4px 12px #576da00c,inset 0 1px 0 #ffffffa6; }
button:active:not(:disabled) { transform: scale(.97); }
button.primary { position: relative; overflow: hidden; border: 1px solid #aebeff8c; border-radius: 13px; color: #fff; background: linear-gradient(120deg,#6d83e8dd,#6679d9ee 55%,#9185e2dc); box-shadow: 0 5px 17px #6a7dd42a,inset 0 1px 0 #ffffff9c,inset 0 -1px 2px #525bb947; }
button.primary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(170deg,#ffffff3b,transparent 45%); pointer-events: none; }
button.primary:hover { background: linear-gradient(120deg,#7e94f2,#7487e5 55%,#9b91eb); border-color: #c7d1ffb3; box-shadow: 0 8px 22px #6a7dd432,inset 0 1px 0 #ffffffc0; transform: translateY(-1px); }
button.primary:active { transform: translateY(1px) scale(.98); }
button.icon-button { border-radius: 11px; box-shadow: none; }
button.text-button, .actions button, .hero-link { box-shadow: none; }
button.danger { background: var(--red-soft); }
[data-theme="dark"] button { background: rgba(168,189,231,.06); box-shadow: inset 0 1px 0 rgba(226,235,255,.08); }
[data-theme="dark"] button:hover { background: rgba(168,189,231,.12); }
[data-theme="dark"] button.primary { color: #eef2ff; background: linear-gradient(120deg,#687be4be,#7776d6c9,#9281d1b3); box-shadow: 0 6px 20px #00000018,inset 0 1px 0 #ffffff6b; }
[data-theme="dark"] button.text-button, [data-theme="dark"] .actions button, [data-theme="dark"] .hero-link, [data-theme="dark"] button.icon-button { background: transparent; box-shadow: none; }
.node-mini { border-color: var(--glass-edge); border-radius: 13px; background: rgba(255,255,255,.29); box-shadow: inset 0 1px 0 #ffffff77; transition: background .2s,transform .2s; }
.node-mini:hover { background: rgba(255,255,255,.5); transform: translateY(-2px); }
[data-theme="dark"] .node-mini { background: rgba(187,205,255,.04); box-shadow: inset 0 1px 0 #ffffff0d; }
.node-mini .icon { color: #94a6c5; }
.ring-track { stroke: rgba(132,152,194,.15); stroke-width: 9; }
.ring-value { stroke: #8290d9; stroke-width: 9; filter: drop-shadow(0 1px 4px #8290d932); }
[data-theme="dark"] .ring-value { stroke: #acb5f7; }
.ring-label strong { font-weight: 580; }
.node-card .metric-icon { border-radius: 12px; }
.badge { border: 1px solid rgba(143,184,170,.08); border-radius: 7px; }
th { background: rgba(255,255,255,.24); border-bottom-color: var(--line); }
th:first-child { border-radius: 10px 0 0 10px; }th:last-child { border-radius: 0 10px 10px 0; }
tbody tr:hover { background: rgba(221,232,255,.20); }
[data-theme="dark"] th { background: rgba(168,189,231,.035); }
[data-theme="dark"] tbody tr:hover { background: rgba(168,189,231,.05); }
.site-avatar { background: rgba(255,255,255,.32); border-color: var(--glass-edge); border-radius: 11px; box-shadow: inset 0 1px 0 #ffffff66; }
.empty-icon { background: linear-gradient(135deg,rgba(209,218,255,.49),rgba(223,216,245,.25)); border: 1px solid var(--glass-edge); border-radius: 19px; box-shadow: inset 0 1px 0 #ffffffaa,0 6px 18px #7484c30a; }
[data-theme="dark"] .empty-icon { background: linear-gradient(135deg,#a6b4fa1c,#dbb7f013); box-shadow: inset 0 1px 0 #ffffff22; }
.step-number { background: rgba(160,177,231,.14); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 #ffffff88; width: 29px; height: 29px; }
.step:not(:last-child)::after { top: 19px; }
input, select, textarea { border-color: var(--glass-edge); border-radius: 11px; background: var(--input); box-shadow: inset 0 2px 5px rgba(99,118,159,.035),0 1px 0 #ffffff4d; }
input:focus, select:focus, textarea:focus { background: rgba(255,255,255,.77); border-color: #a4b4e99c; box-shadow: 0 0 0 4px rgba(130,150,226,.10),inset 0 1px 0 #ffffffaa; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { background: rgba(29,42,68,.8); border-color: #9bafe16b; }
input[type="checkbox"] { accent-color: #7788da; box-shadow: none; }
.notice, .dns-record { background: rgba(216,227,250,.21); border: 1px solid var(--line); border-radius: 13px; box-shadow: inset 0 1px 0 #ffffff55; }
[data-theme="dark"] .notice, [data-theme="dark"] .dns-record { background: rgba(141,162,212,.06); box-shadow: inset 0 1px 0 #ffffff0a; }
.settings-panel .setting-state { background: var(--panel-soft); border-radius: 11px; }
progress { background: rgba(140,163,208,.13); height: 5px; }
progress::-webkit-progress-bar { background: rgba(140,163,208,.13); }
progress::-webkit-progress-value { background: linear-gradient(90deg,#9babe9,#b5a8e3); }
progress::-moz-progress-bar { background: #9babe9; }
dialog { border-color: var(--glass-edge); background: rgba(245,248,255,.82); -webkit-backdrop-filter: blur(40px) saturate(145%); backdrop-filter: blur(40px) saturate(145%); border-radius: 25px; box-shadow: 0 32px 120px #344c822e,inset 0 1px 0 #fff; }
dialog::backdrop { background: rgba(41,56,89,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dialog-head { background: rgba(247,250,255,.65); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom-color: var(--line); }
[data-theme="dark"] dialog { background: rgba(27,37,59,.85); box-shadow: 0 32px 120px #00000060,inset 0 1px 0 #d8e5ff30; }
[data-theme="dark"] .dialog-head { background: rgba(30,41,64,.75); }
#toast { background: rgba(248,251,255,.85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-radius: 14px; border-top-color: var(--glass-edge); border-right-color: var(--glass-edge); border-bottom-color: var(--glass-edge); box-shadow: 0 10px 45px #3d548a20,inset 0 1px 0 #fff; }
[data-theme="dark"] #toast { background: rgba(32,44,68,.88); box-shadow: 0 10px 45px #00000030,inset 0 1px 0 #ffffff22; }
footer { padding: 8px 3px 0; }

/* The login screen is one continuous fluid canvas rather than two opaque halves. */
.auth { max-width: 1490px; margin: auto; grid-template-columns: 1.05fr 1fr; padding: 24px; min-height: 100vh; align-items: stretch; }
.intro { min-height: calc(100vh - 48px); padding: 30px 9% 22px; color: var(--text); background: transparent; overflow: visible; }
.intro .brand-icon { width: 49px; height: 52px; }
.intro .brand-name { font-size: 21px; }
.intro .brand-name b { font-size: 11px; }
.intro-copy { padding-top: 45px; margin-top: auto; }
.intro-copy .eyebrow { color: #8598b7; font-size: 9px; letter-spacing: 3px; }
.intro h1 { font-size: clamp(38px,4vw,60px); font-weight: 570; letter-spacing: -2px; line-height: 1.4; margin: 20px 0 24px; }
.intro h1 em { color: #7c8ed0; background: linear-gradient(100deg,#789cce,#9a80c8 80%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.intro p { color: var(--secondary); font-size: 13px; line-height: 2; }
.intro-network { height: 175px; margin-bottom: 25px; opacity: .9; }
.orbit { border-color: rgba(145,168,209,.35); box-shadow: 0 1px 0 rgba(255,255,255,.6); }
.orbit-one { background: rgba(255,255,255,.04); }
.orbit-core { width: 70px; height: 70px; border-radius: 23px; background: linear-gradient(135deg,rgba(255,255,255,.75),rgba(202,215,250,.36)); border: 1px solid var(--glass-edge); color: #8196d5; box-shadow: 0 14px 50px #7189c329,inset 0 1px 0 #fff,inset 0 -2px 8px #ffffff70; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: core-breathe 7s ease-in-out infinite; }
.orbit-core .icon { width: 48px; height: 48px; stroke-width: 1; fill: rgba(151,170,227,.14); }
.orbit-point { width: 10px; height: 10px; border-color: #ffffffcc; background: #aebee5; box-shadow: 0 3px 10px #7f9ccc4d; }
.intro-grid { border-top-color: var(--line); padding-top: 23px; margin-top: auto; }
.intro-grid strong { color: var(--secondary); font-weight: 550; font-size: 23px; }
.intro-grid span { color: var(--muted); font-size: 10px; }
.intro-footer { color: var(--muted); font-size: 8px; margin-top: 30px; }
.auth-right { background: transparent; padding: 65px 9%; }
.auth-right>.theme-toggle { top: 23px; right: 25px; background: rgba(255,255,255,.36); border: 1px solid var(--glass-edge); border-radius: 50%; }
.auth-card { max-width: 440px; padding: 38px; border: 1px solid var(--glass-edge); background: rgba(255,255,255,.43); border-radius: 32px; -webkit-backdrop-filter: blur(32px) saturate(140%); backdrop-filter: blur(32px) saturate(140%); box-shadow: 0 24px 80px #576b9c0d,inset 0 1px 0 #fffffff0,inset 1px 0 0 #ffffff66; }
.auth-emblem { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: #7f92d3; background: linear-gradient(135deg,rgba(255,255,255,.88),rgba(221,228,255,.40)); border: 1px solid var(--glass-edge); box-shadow: 0 6px 20px #6d7eaf12,inset 0 1px 0 #fff; margin-bottom: 26px; }
.auth-emblem .icon { width: 35px; height: 35px; stroke-width: 1; fill: rgba(138,159,219,.13); }
.auth-card>.eyebrow { font-size: 8px; letter-spacing: 2px; }
.auth-card h2 { font-size: 29px; font-weight: 580; margin: 10px 0 10px; }
.auth-card>p { font-size: 11px; line-height: 1.8; margin-bottom: 27px; }
.auth-card label { font-size: 11px; }
.auth-card input { background: rgba(255,255,255,.42); border-radius: 12px; min-height: 46px; font-size: 12px; }
.auth-card input:focus { background: rgba(255,255,255,.75); }
.auth-card .primary { min-height: 46px; border-radius: 13px; }
.auth-card .text-button { font-size: 11px; }
.auth-note { font-size: 9px; border-top-color: var(--line); margin-top: 18px; padding-top: 21px; }
.auth-copyright { color: var(--muted); font-size: 9px; bottom: 24px; }
[data-theme="dark"] .intro h1 em { background-image: linear-gradient(90deg,#adc5f2,#c5acec); }
[data-theme="dark"] .intro-copy .eyebrow { color: #8e9dc4; }
[data-theme="dark"] .orbit { border-color: rgba(179,193,236,.17); box-shadow: none; }
[data-theme="dark"] .orbit-core { background: linear-gradient(140deg,rgba(165,183,242,.25),rgba(151,158,220,.1)); color: #c6d1ff; box-shadow: 0 14px 50px #00000020,inset 0 1px 0 #ffffff55; }
[data-theme="dark"] .auth-card { background: rgba(38,46,71,.48); box-shadow: 0 24px 80px #00000015,inset 0 1px 0 #e1e8ff29; }
[data-theme="dark"] .auth-emblem { color: #c0cdff; background: linear-gradient(145deg,#b6c4ff20,#a8a3e612); box-shadow: inset 0 1px 0 #ffffff40; }
[data-theme="dark"] .auth-card input { background: rgba(17,27,47,.28); }
[data-theme="dark"] .auth-card input:focus { background: rgba(22,33,56,.56); }
[data-theme="dark"] .auth-right>.theme-toggle { background: rgba(200,216,255,.06); }
@keyframes core-breathe { 0%,100% { transform: translate(-50%,-50%) rotate(-5deg); } 50% { transform: translate(-50%,-57%) rotate(5deg); } }

@media(min-width:1700px) { .main-body { padding-top: 34px; } }
@media(max-width:1250px) {
  aside { width: 209px; inset: 16px auto 16px 14px; padding-left: 12px; padding-right: 12px; }
  .brand-name { font-size: 16px; }.brand-name b { font-size: 9px; }
  .brand-icon { width: 39px; height: 42px; border-radius: 13px; }
  main { margin-left: 239px; padding-top: 16px; }
  header { margin-right: 20px; padding: 0 20px; }
  .main-body { padding: 27px 20px 22px 0; }
  .card { padding: 18px; }.panel { padding: 21px; }
  .auth { padding: 20px; }.auth-right { padding-left: 5%; padding-right: 5%; }
}
@media(max-width:1000px) {
  .hero-copy { max-width: 90%; }.hero-art { right: -50px; }
  .intro { padding-left: 5%; padding-right: 5%; }.intro h1 { font-size: 43px; }
  .auth-card { padding: 30px; border-radius: 28px; }
  .auth-note { font-size: 8px; }.auth-right { padding-left: 4%; padding-right: 4%; }
}
@media(max-width:760px) {
  .fluid { width: 110vw; height: 110vw; filter: blur(45px); opacity: .62; will-change: auto; }
  .fluid-blue { top: -10%; left: -38%; }.fluid-violet { top: 30%; right: -55%; }.fluid-aqua { bottom: -10%; left: -35%; }
  .ambient-grain { display: none; }
  aside { position: relative; inset: auto; width: auto; margin: 12px 12px 0; padding: 17px 17px 0; border-radius: 22px; }
  aside .brand { margin: 0 0 15px; gap: 9px; }
  aside .brand-icon { width: 37px; height: 39px; border-radius: 12px; }
  aside .brand-icon .icon { width: 29px; height: 29px; }
  aside .brand-name { font-size: 17px; }aside .brand-name b { font-size: 9px; letter-spacing: 1px; margin-top: 1px; }
  nav { gap: 5px; padding-bottom: 12px; }
  nav button { min-height: 36px; padding: 8px 10px; border-radius: 12px; font-size: 11px; }
  nav button:hover { transform: none; }
  main { margin-left: 0; padding-top: 10px; }
  header { margin: 0 12px; min-height: 50px; padding: 0 16px; border-radius: 17px; }
  .header-actions .icon-button { border-radius: 10px; }
  .main-body { padding: 24px 15px 20px; }
  .page-heading { margin-bottom: 22px; }.page-heading h1 { font-size: 24px; }
  .heading-kicker { font-size: 7px; letter-spacing: 1.5px; }
  .page-heading p { font-size: 10px; }
  #page-action button { border-radius: 11px; padding: 9px 11px; font-size: 10px; }
  .hero { border-radius: 22px; min-height: 158px; padding: 23px; }
  .hero h2 { font-size: 23px; }.hero p { max-width: 230px; }
  .hero-art { right: -170px; top: -5px; opacity: .37; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .cards { gap: 12px; }.card { border-radius: 19px; padding: 17px; }
  .card .value { font-size: 28px; }.card:hover { transform: none; }
  .metric-icon { width: 29px; height: 29px; border-radius: 10px; }
  .panel { padding: 19px; border-radius: 22px; }
  .node-mini-grid { gap: 7px; }.node-mini { padding: 11px 7px; border-radius: 11px; }
  .node-mini:hover { transform: none; }
  .node-card { border-radius: 19px; padding: 16px; }
  .cache-overview { gap: 23px; padding: 0 4px; }
  .table-toolbar { gap: 8px; }.filter-select { width: 112px; }
  input, select, textarea { border-radius: 10px; }
  .auth { display: block; padding: 0 15px 18px; }
  .intro { min-height: 0; padding: 25px 17px 25px; overflow: hidden; }
  .intro .brand-icon { width: 40px; height: 43px; }.intro .brand-name { font-size: 18px; }.intro .brand-name b { font-size: 9px; }
  .intro-copy { padding-top: 27px; }.intro-copy .eyebrow { font-size: 7px; letter-spacing: 2px; }
  .intro h1 { font-size: 35px; line-height: 1.3; margin: 13px 0 0; letter-spacing: -1px; }
  .auth-right { padding: 0 0 53px; min-height: 0; }
  .auth-right>.theme-toggle { position: fixed; right: 24px; top: 31px; z-index: 10; background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .auth-card { max-width: 440px; padding: 27px; border-radius: 28px; }
  .auth-emblem { width: 42px; height: 42px; border-radius: 14px; margin-bottom: 20px; }
  .auth-emblem .icon { width: 29px; height: 29px; }
  .auth-card h2 { font-size: 26px; }.auth-card>p { margin-bottom: 24px; font-size: 11px; }
  .auth-card .eyebrow { font-size: 7px; }
  .auth-card label { margin-bottom: 18px; }
  .auth-card input { font-size: 13px; }
  .auth-card .text-button { margin-top: 12px; }
  .auth-note { font-size: 9px; margin-top: 14px; padding-top: 18px; }
  .auth-copyright { bottom: 16px; font-size: 9px; }
  dialog { border-radius: 23px; background: rgba(246,249,255,.9); }
  [data-theme="dark"] dialog { background: rgba(28,39,62,.94); }
  .dialog-head { padding: 22px 20px 18px; }
}
@media(max-width:360px) { .main-body { padding-left: 12px; padding-right: 12px; }.card { padding: 15px; }.hero { padding: 20px; }.brand-name { font-size: 15px; }.cache-overview { gap: 10px; }.auth-card { padding: 23px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .panel, aside, header, .auth-card { background: rgba(247,250,255,.93); }
  [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] aside, [data-theme="dark"] header, [data-theme="dark"] .auth-card { background: rgba(30,41,63,.96); }
}
@media(prefers-reduced-motion:reduce) { .fluid, .hero-art, .orbit-core { animation: none; will-change: auto; }button, .card, .node-mini, nav button { transition: none; } }

[data-palette="mint"] { --accent: #258d80; --accent-soft: #42b09b18; --palette-start: #4eaca1; --palette-end: #6f9cba; --palette-glow: #a5e4d5; }
[data-palette="rose"] { --accent: #b35e8b; --accent-soft: #ce79a518; --palette-start: #c079a6; --palette-end: #a48bd2; --palette-glow: #efbcd3; }
[data-palette="amber"] { --accent: #a67d2d; --accent-soft: #c4a05a18; --palette-start: #b99953; --palette-end: #c98d78; --palette-glow: #eed9a8; }
[data-palette="ocean"] { --accent: #297fae; --accent-soft: #54a2cc18; --palette-start: #408fbc; --palette-end: #6c96d0; --palette-glow: #a9daee; }
[data-theme="dark"][data-palette="mint"] { --accent: #8bdfc9; }
[data-theme="dark"][data-palette="rose"] { --accent: #edb2d1; }
[data-theme="dark"][data-palette="amber"] { --accent: #ebd09a; }
[data-theme="dark"][data-palette="ocean"] { --accent: #9ed6f2; }
html[data-palette]:not([data-palette="iris"]) button.primary,
html[data-palette]:not([data-palette="iris"]) .brand-icon { background: linear-gradient(120deg,var(--palette-start),var(--palette-end)); }
html[data-palette]:not([data-palette="iris"]) nav button.active,
html[data-palette]:not([data-palette="iris"]) nav button.active .icon,
html[data-palette]:not([data-palette="iris"]) .hero-link { color: var(--accent); }
html[data-palette]:not([data-palette="iris"]) .fluid-blue { background: radial-gradient(circle,var(--palette-glow),transparent 70%); }
html[data-palette]:not([data-palette="iris"]) .ring-value { stroke: var(--accent); }
html[data-palette]:not([data-palette="iris"]) progress::-webkit-progress-value { background: linear-gradient(90deg,var(--palette-start),var(--palette-end)); }
@media(prefers-reduced-motion:reduce) { .page-enter, dialog[open], .form-error { animation: none; } }