/*
 * Galaxy "cosmos" skin — the approved redesign (one design system for auth, public pages, the user panel
 * and the admin panel). Loaded after app.css; it only restyles, the markup and class names stay the same.
 * Deep-space background with a starfield canvas (panel.js, full motion only), dark gradient cards without
 * blur (fast on phones), a full-height sidebar with an ion highlight, compact type.
 */
:root {
  --bg: #04050D; --bg2: #080A1F; --card: #161A3E; --card2: #1B2046; --line: #ffffff17; --line2: #ffffff26; --well: #ffffff09;
  --fg: #EEF1FF; --muted: #8C93C6; --soft: #B3B9E4; --sun: #FFB547; --sun2: #FFD58F; --ion: #6FE3E8; --ok: #5BD69A; --bad: #FF6B8B; --violet: #A98BFF; --pink: #FF8AD0;
  --glass: linear-gradient(160deg, #161A3ECC, #0A0C20D9); --glass-solid: linear-gradient(160deg, #181C46F7, #0A0C22F7); --glass-line: #ffffff17;
  --glass-hi: inset 0 1px 0 #ffffff0f; --glass-shadow: 0 30px 60px -40px #000; --blur: none; --r-card: 20px;
}
html, body { background: var(--bg); }
body { font-size: 15px; line-height: 1.75; }
a { color: var(--ion); }
a:hover { color: #C9FAFB; }
::selection { background: var(--ion); color: #021; }

/* ---------- sky ---------- */
.space, .auth { background:
    radial-gradient(40% 50% at 85% 0%, #5B2BD633, transparent 70%),
    radial-gradient(35% 45% at 8% 100%, #00B8D821, transparent 70%),
    radial-gradient(28% 30% at 55% 50%, #FF5FA80d, transparent 70%),
    radial-gradient(1.2px 1.2px at 12% 18%, #fff9 50%, transparent 52%) 0 0 / 360px 360px,
    radial-gradient(1px 1px at 63% 71%, #fff6 50%, transparent 52%) 0 0 / 360px 360px,
    radial-gradient(1.4px 1.4px at 38% 44%, #ffe6b088 50%, transparent 52%) 0 0 / 620px 620px,
    radial-gradient(1px 1px at 84% 12%, #b8f6ff77 50%, transparent 52%) 0 0 / 620px 620px,
    var(--bg); }
.space::before, .space::after { display: none; }
#sky { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.has-sky .space { background:
    radial-gradient(40% 50% at 85% 0%, #5B2BD633, transparent 70%),
    radial-gradient(35% 45% at 8% 100%, #00B8D821, transparent 70%),
    radial-gradient(28% 30% at 55% 50%, #FF5FA80d, transparent 70%), var(--bg); }

/* ---------- surfaces ---------- */
.card, [data-motion] .card { background: linear-gradient(160deg, #161A3ECC, #0A0C20D9); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: inset 0 1px 0 #ffffff0f; }
.card .card, [data-motion] .card .card { background: var(--well); border: 1px solid var(--line); box-shadow: none; }
.section { padding: 16px 18px; gap: 14px; }
.section h2, .h2row h2 { font-size: clamp(1rem, .95rem + .3vw, 1.12rem); font-weight: 800; }
.h2row { gap: 10px; }
.pagehead { margin-bottom: 2px; }
.pagehead h1, .dash-head h1 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); font-weight: 900; letter-spacing: -.01em; }
.content { gap: 16px; padding-top: 20px; max-width: 1360px; }
.muted { color: var(--muted); }

/* ---------- sidebar: full height, dark, ion highlight ---------- */
.shell { grid-template-columns: 258px minmax(0, 1fr); }
.side, .side-admin, [data-motion] .side, [data-motion] .side-admin { background: linear-gradient(180deg, #0A0C20F2, #060816F2);
  -webkit-backdrop-filter: none; backdrop-filter: none; border-inline-end: 1px solid var(--line); box-shadow: none; padding: 16px 12px; gap: 12px; }
@media (min-width: 1024px) {
  .shell { grid-template-columns: 258px minmax(0, 1fr); }
  .side { top: 0; height: 100vh; margin: 0; border: 0; border-inline-end: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 16px 12px; }
  .content { padding-top: 20px; }
}
.side-head .brand { font-size: 18px; }
.nav-title { margin: 8px 12px 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.nav-group + .nav-group { padding-top: 6px; margin-top: 2px; border-top: 0; }
.side .nav, .nav { min-height: 38px; padding: 0 12px; border-radius: 11px; font-size: 13.5px; color: var(--soft); gap: 11px; }
.side .nav svg { color: currentColor; opacity: .85; }
.side .nav:hover { background: #ffffff0d; color: #fff; }
.nav.on, [dir="rtl"] .nav.on, .side-admin .nav.on, [dir="rtl"] .side-admin .nav.on {
  color: #fff; background: linear-gradient(90deg, #6FE3E829, #6FE3E800); box-shadow: inset 2px 0 0 var(--ion); }
[dir="rtl"] .nav.on, [dir="rtl"] .side-admin .nav.on { background: linear-gradient(270deg, #6FE3E829, #6FE3E800); box-shadow: inset -2px 0 0 var(--ion); }
.nav.on svg, .side-admin .nav.on svg { color: var(--ion); opacity: 1; }
.nav.on::before { display: none; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; background: var(--bad); color: #fff; border: 0; font-size: 11px; }
.nav-count { height: 20px; min-width: 22px; font-size: 11px; background: #FFB5472e; border-color: transparent; color: var(--sun); }
.nav.on .nav-count { background: #6FE3E826; color: var(--ion); }
.side-search .field, .side input[type=search] { min-height: 38px; border-radius: 12px; font-size: 13px; }
.side-foot { border-top-color: var(--line); gap: 6px; }
.side-cta { border-radius: 12px; min-height: 40px; }
@media (max-width: 1023.98px) {
  .appbar, .tabbar, [data-motion] .appbar, [data-motion] .tabbar { background: #060816F2; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); }
  .js .side { background: linear-gradient(180deg, #0A0C20, #060816); }
  .tabbar .tab.on { color: var(--ion); }
}
.iconbtn { background: #ffffff0a; border-color: var(--line); color: var(--soft); border-radius: 12px; width: 40px; height: 40px; }
.iconbtn:hover { background: #ffffff14; color: #fff; }

/* ---------- controls ---------- */
.btn { min-height: 40px; padding: 0 15px; border-radius: 12px; font-size: 13.5px; font-weight: 700; background: #ffffff0d; border: 1px solid var(--line2); box-shadow: none; color: var(--fg); }
.btn:hover { background: #ffffff17; border-color: #ffffff33; color: #fff; }
.btn-sun, .btn-sun:hover { border: 0; background: linear-gradient(180deg, var(--sun2), var(--sun)); color: #1A1200; box-shadow: 0 12px 30px -14px var(--sun); }
.btn-ion { background: transparent; border: 1px solid #6FE3E873; color: var(--ion); box-shadow: none; }
.btn-ion:hover { background: #6FE3E814; color: #C9FAFB; border-color: var(--ion); }
.btn-bad { background: transparent; border: 1px solid #FF6B8B73; color: var(--bad); }
.btn-bad:hover { background: #FF6B8B14; color: #FFD0DA; }
.btn-link { color: var(--ion); background: none; border: 0; }
.field { min-height: 44px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--line2); background: #04051099; box-shadow: none; font-size: 14px; }
textarea.field { padding: 11px 13px; line-height: 1.8; }
.field:focus { border-color: var(--ion); box-shadow: 0 0 0 3px #6FE3E826; outline: none; }
.field::placeholder { color: var(--muted); }
.field option, .field optgroup { background: #10132E; }
.label > span:first-child { font-size: 12.5px; color: var(--soft); }
.chip { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #ffffff12; border: 0; color: var(--soft); }
.chip-ion { background: #6FE3E824; color: var(--ion); }
.check input, .opt input { accent-color: var(--ion); }
.opt, .orbit-item, .ticket-row, .store-card, .toggles .check, .mod, .msg-user { background: var(--well); border-color: var(--line); }
.opt:hover, .ticket-row:hover { border-color: var(--line2); }
.opt:has(input[type=radio]:checked) { border-color: var(--ion); background: #6FE3E814; box-shadow: 0 0 0 3px #6FE3E81f; }

/* banners */
.notice { background: #5BD69A14; border: 1px solid #5BD69A4d; color: #D2F7E4; border-radius: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.alert { background: #FF6B8B14; border: 1px solid #FF6B8B52; color: #FFD0DA; border-radius: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.announce-info { background: #6FE3E812; border-color: #6FE3E84d; color: #D6FBFC; }
.announce-warning { background: #FFB54714; border-color: #FFB54752; color: #FFE2B3; }
.announce-critical { background: #FF6B8B14; border-color: #FF6B8B52; color: #FFD0DA; }

/* tables */
.tbl { font-size: 13.5px; }
.tbl th { font-size: 12px; color: var(--muted); font-weight: 500; border-bottom-color: var(--line); }
.tbl td { border-bottom-color: var(--line); }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: #ffffff06; }
.tbl th, .tbl td, .files li, .fm-results { border-color: var(--line); }

/* stats, tiles, facts */
.stat { padding: 14px 16px; border-radius: 18px; }
.stat strong { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight: 800; }
.tile-ico { border: 0; box-shadow: none; border-radius: 12px; }
.tint-sun { color: var(--sun); background: #FFB54724; }
.tint-ion { color: var(--ion); background: #6FE3E824; }
.tint-ok { color: var(--ok); background: #5BD69A24; }
.tint-violet { color: var(--violet); background: #A98BFF29; }
.tint-pink { color: var(--pink); background: #FF8AD024; }
.tile-text strong { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.fact, .db-row, .sys-specs div { background: var(--well); border: 1px solid var(--line); border-radius: 14px; }

/* system tabs: underline style */
.ptabs, [data-motion] .ptabs { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 4px; }
.ptabs a { position: relative; padding: 10px 14px; border-radius: 0; color: var(--muted); font-weight: 700; font-size: 13.5px; background: none; }
.ptabs a:hover { color: var(--soft); background: none; }
.ptabs a.on { color: #fff; background: none; box-shadow: none; }
.ptabs a.on::after { content: ""; position: absolute; inset-inline: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ion), var(--sun)); box-shadow: 0 0 10px var(--ion); }
.ptabs { position: sticky; top: 0; background: #04050DE6; }

/* accordions (advanced settings) */
.acc { border-radius: var(--r-card); }
.acc > summary { min-height: 58px; padding: 12px 16px; }
.acc > summary:hover { background: #ffffff05; }
.acc-title { font-size: 14.5px; }

/* chat */
.msg-staff { background: #A98BFF1a; border-color: #A98BFF4d; }
.msg-ai { background: #A98BFF1a; }
.msg-user { background: #6FE3E814; border-color: #6FE3E847; }

/* misc */
.fpanel, .fm-bulk, .toast { background: var(--glass-solid); border-color: var(--line2); box-shadow: 0 30px 60px -30px #000; }
.fm-bar { background: #04051099; }
.modal { background: linear-gradient(160deg, #1A1E48FA, #0A0C20FA); border: 1px solid var(--line2); border-radius: 22px; }
.modal::backdrop { background: #02030AA6; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stepno { background: #ffffff14; }
.who-mail { color: var(--muted); }
pre, code, .mono { font-family: var(--mono); }

/* ---------- auth: form on one side, a planet on the other ---------- */
.auth-split { padding: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background-attachment: fixed; }
.auth-split > .auth-top { grid-column: 1; padding: 24px clamp(16px, 4vw, 40px) 0; }
.auth-split > .auth-main { grid-column: 1; grid-row: 2; padding: 24px 20px 48px; }
.auth-split > .auth-art { grid-column: 2; grid-row: 1 / span 2; }
.auth-split .auth-card { background: none; border: 0; box-shadow: none; padding: 0; width: min(420px, 100%); gap: 16px; }
.auth-card h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 900; }
.auth-card .btn-sun { min-height: 48px; font-size: 15px; border-radius: 15px; }
.auth-art { position: relative; overflow: hidden; display: grid; place-items: center; padding: 40px; }
.auth-art .big { position: relative; width: min(440px, 70%); aspect-ratio: 1; }
.auth-art .ball { position: absolute; inset: 16%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 32% 28%, #F2FFFF, #8FEFF2 9%, #2FA9CF 30%, #1D35B0 60%, #070927 90%); box-shadow: inset -40px -50px 90px #02030EE6, 0 0 90px #39B8D873; }
.auth-art .ball::after { content: ""; position: absolute; inset: -30%; background: repeating-linear-gradient(-28deg, transparent 0 18px, #ffffff12 18px 22px, transparent 22px 44px); animation: cos-spin 90s linear infinite; }
.auth-art .ring { position: absolute; inset: 4% -14%; border-radius: 50%; border: 3px solid #FFB547B3; transform: rotate(-18deg) scaleY(.3); filter: drop-shadow(0 0 14px #FFB54799); }
.auth-art .o1, .auth-art .o2 { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed #ffffff1f; animation: cos-spin 40s linear infinite; }
.auth-art .o2 { inset: -12%; animation-duration: 70s; animation-direction: reverse; }
.auth-art .o1::after, .auth-art .o2::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 14px var(--sun); }
.auth-art .o2::after { background: var(--violet); box-shadow: 0 0 14px var(--violet); }
.auth-art .quote { position: absolute; inset-inline: 40px; bottom: 40px; padding: 16px 18px; border-radius: 18px; background: #0A0C20B3; border: 1px solid var(--line); font-size: 13.5px; color: var(--soft); }
.auth-art .quote b { display: block; margin-bottom: 4px; color: #fff; font-size: 15px; }
@keyframes cos-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; } .auth-split > .auth-art { display: none; } .auth-split > .auth-main { grid-row: auto; } }

/* ---------- admin: the server fleet as an orbit ---------- */
.fleet-orbit { position: relative; height: 300px; margin-bottom: 10px; }
.fleet-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fleet-tip { position: absolute; z-index: 5; pointer-events: none; padding: 8px 11px; border-radius: 12px; background: #080A1CF2; border: 1px solid var(--line2); font-size: 12px; white-space: nowrap; opacity: 0; transform: translate(-50%, -110%); transition: opacity .15s; }
.fleet-tip.on { opacity: 1; }
.fleet-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--soft); margin-bottom: 12px; }
.fleet-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fleet-legend i { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- system page: the hourly meter ---------- */
.hmeter, [data-motion] .hmeter { background: radial-gradient(80% 120% at 0% 0%, #FFB5471f, transparent 60%), linear-gradient(160deg, #161A3ED9, #0A0C20E0); }
[dir="rtl"] .hmeter, [dir="rtl"][data-motion] .hmeter { background: radial-gradient(80% 120% at 100% 0%, #FFB5471f, transparent 60%), linear-gradient(160deg, #161A3ED9, #0A0C20E0); }
.hmeter-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hmeter-top small { display: block; color: var(--muted); font-size: 12px; }
.hmeter-top strong { display: block; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); direction: ltr; text-align: end; unicode-bidi: isolate; }
.hmeter-top .odo { color: var(--sun); }
.hstrip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 40px; direction: ltr; }
.hstrip i { border-radius: 4px; background: #ffffff0f; }
.hstrip i.on { background: linear-gradient(180deg, var(--ion), #6FE3E840); }
.hstrip i.now { background: linear-gradient(180deg, var(--sun), #FFB5474d); box-shadow: 0 0 12px #FFB54780; animation: cos-breath 1.6s ease-in-out infinite; }
.hlabels { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; direction: ltr; margin-top: 4px; }
@keyframes cos-breath { 50% { opacity: .55; } }

/* ---------- public status page ---------- */
.st-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 24px; border-radius: 28px; border: 1px solid var(--line);
  background: radial-gradient(80% 140% at 100% 0%, #5BD69A29, transparent 60%), linear-gradient(160deg, #161A3ED9, #0A0C20E0); }
.st-hero.bad { background: radial-gradient(80% 140% at 100% 0%, #FF6B8B29, transparent 60%), linear-gradient(160deg, #161A3ED9, #0A0C20E0); }
.st-hero.warn { background: radial-gradient(80% 140% at 100% 0%, #FFB54729, transparent 60%), linear-gradient(160deg, #161A3ED9, #0A0C20E0); }
.st-pulse { position: relative; width: 86px; height: 86px; display: grid; place-items: center; color: var(--st, var(--ok)); }
.st-pulse i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: cos-ripple 2.6s cubic-bezier(.2, .6, .3, 1) infinite; opacity: 0; }
.st-pulse i:nth-child(2) { animation-delay: .85s; } .st-pulse i:nth-child(3) { animation-delay: 1.7s; }
.st-pulse b { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffffb3, transparent 60%), currentColor; box-shadow: 0 0 30px currentColor; display: grid; place-items: center; color: #032; font-size: 20px; }
.st-page { width: min(980px, 100%); display: flex; flex-direction: column; gap: 16px; text-align: start; }
.st-hero h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 900; }
.st-hero p { margin: 4px 0 0; color: var(--soft, #B3B9E4); }
.st-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 1.05rem; }
.hmeter h2 .more, .st-card h2 .more { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.st-card { padding: 18px 20px; }
.srv { display: grid; gap: 10px; }
.srow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 70px; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #ffffff08; border: 1px solid var(--line); }
.srow .nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.srow .nm strong { display: block; overflow-wrap: anywhere; }
.srow .nm small { display: block; color: var(--muted); font-size: 11.5px; }
.srow .pct { text-align: end; font-size: 13px; direction: ltr; }
.orbdot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.uptime { display: flex; gap: 2px; height: 30px; direction: ltr; }
.uptime i { flex: 1; border-radius: 3px; opacity: .85; transition: transform .15s; }
.uptime i:hover { transform: scaleY(1.2); opacity: 1; }
.uplab { direction: ltr; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 4px; }
.st-card .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 12px; direction: ltr; }
.st-card .legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-card .legend i { width: 8px; height: 8px; border-radius: 3px; }
.tl { position: relative; display: grid; gap: 4px; padding-inline-start: 18px; }
.tl::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 5px; width: 2px; background: linear-gradient(var(--ion), #6FE3E80d); }
.tl .ev { position: relative; padding: 8px 10px; border-radius: 12px; }
.tl .ev::before { content: ""; position: absolute; inset-inline-start: -17px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); }
.tl .ev.ok::before { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.tl .ev.bad::before { border-color: var(--bad); } .tl .ev.sun::before { border-color: var(--sun); } .tl .ev.ion::before { border-color: var(--ion); }
.tl .ev strong { display: block; font-size: 14px; }
.tl .ev small { display: block; color: var(--muted); font-size: 11.5px; }
@media (max-width: 640px) {
  .st-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px; }
  .srow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .srow > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .hmeter-top { grid-template-columns: 1fr 1fr; } .hmeter-top > div:first-child { grid-column: 1 / -1; }
}
@keyframes cos-ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }

[data-motion="lite"] .auth-art .ball::after, [data-motion="lite"] .auth-art .o1, [data-motion="lite"] .auth-art .o2, [data-motion="lite"] .hstrip i.now, [data-motion="lite"] .st-pulse i { animation: none; }
@media (prefers-reduced-motion: reduce) { .auth-art *, .hstrip i, .st-pulse i { animation: none !important; } }

/* ---------- shell: top bar, breadcrumbs, sidebar Systems, wallet ---------- */
@media (min-width: 1024px) {
  .topbar, [data-motion] .topbar { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; min-height: 44px; pointer-events: auto; justify-content: flex-start; }
  .topbar + .pagehead { padding-inline-end: 0; }
}
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; min-width: 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ion); }
.crumbs > :last-child { color: var(--soft, #B3B9E4); }
.topbar-cta { margin-inline-start: auto; }
.topbar .iconbtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff0a; }
.me-chip { display: flex; align-items: center; gap: 9px; padding: 4px 4px 4px 12px; border-radius: 14px; border: 1px solid var(--line); background: #ffffff0a; font-size: 13px; color: inherit; text-decoration: none; }
[dir="rtl"] .me-chip { padding: 4px 12px 4px 4px; }
.me-chip b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--violet), var(--pink)); color: #fff; font-size: 13px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 11px; }
.nav-title { display: flex; align-items: center; }
.nav-title-plus { margin-inline-start: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--ion); }
.nav-title-plus:hover { background: #6FE3E81a; }
.nav-sys .nav-pl { flex: none; width: 18px; height: 18px; }
.nav-sys small { margin-inline-start: auto; color: var(--muted); font-size: 11px; }
.side-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff08; color: var(--muted); }
.side-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; outline: none; }
.side-search:focus-within { border-color: var(--ion); box-shadow: 0 0 0 3px #6FE3E826; }
.side-search kbd { padding: 0 6px; border-radius: 6px; border: 1px solid var(--line); font-size: 11px; }
.side-wallet { margin-top: auto; padding: 14px; border-radius: 16px; background: linear-gradient(150deg, #FFB5471f, #ffffff05); border: 1px solid #FFB54740; display: grid; gap: 2px; }
.side-wallet small { color: var(--muted); font-size: 12px; }
.side-wallet strong { font-size: 19px; direction: ltr; text-align: end; unicode-bidi: isolate; }
[dir="ltr"] .side-wallet strong { text-align: start; }
.side-wallet p { margin: 2px 0 8px; font-size: 12px; color: #FFE2B3; }
.side-wallet + .side-foot { margin-top: 10px; }
.nav[hidden], .nav-group[hidden] { display: none !important; }

/* ---------- Systems: list view (the card/list switch) ---------- */
.kit .syscards.as-list { grid-template-columns: 1fr; gap: 8px; }
.kit .syscards.as-list .sys { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: 16px; padding: 12px 16px; }
.kit .syscards.as-list .sys .ft { border-top: 0; padding-top: 0; }
.kit .syscards.as-list .sys-new { display: none; }
.kit .sys-new { place-items: center; text-align: center; border-style: dashed; min-height: 200px; }
@media (max-width: 760px) { .kit .syscards.as-list .sys { grid-template-columns: 1fr; } }

/* ---------- ticket page: conversation + details ---------- */
.tk-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .tk-grid { grid-template-columns: 1fr; } }

/* ---------- compatibility: older panel markup inside a .kit page looks like the kit ---------- */
.kit .btn.btn-sun { border: 0; background: linear-gradient(180deg, var(--sun2), var(--sun)); color: #1A1200; box-shadow: 0 12px 30px -14px var(--sun); }
.kit .btn.btn-ion { border-color: rgba(111, 227, 232, .45); color: var(--ion); background: rgba(255, 255, 255, .05); }
.kit .btn.btn-bad { border-color: rgba(255, 107, 139, .45); color: var(--bad); background: rgba(255, 255, 255, .05); }
.kit .btn.btn-block { width: 100%; }
.kit .btn svg { width: 15px; height: 15px; }
.kit .card.section { display: flex; flex-direction: column; gap: 12px; }
.kit .card.section > h2, .kit .card > h2:first-child { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--t-h2); font-weight: 800; }
.kit .card.section > h2 svg, .kit .card > h2:first-child svg { width: 18px; height: 18px; color: var(--ion); }
.kit input.field, .kit select.field, .kit textarea.field { display: block; width: 100%; padding: 11px 13px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(4, 5, 16, .55); color: var(--ink); font-size: 13.5px; }
.kit textarea.field { min-height: 110px; line-height: 1.8; }
.kit input.field:focus, .kit select.field:focus, .kit textarea.field:focus { outline: none; border-color: var(--ion); box-shadow: 0 0 0 3px rgba(111, 227, 232, .15); }
.kit .label { display: grid; gap: 6px; font-size: 12.5px; color: var(--soft); }
.kit .label > span:first-child { font-weight: 500; }
.kit .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .07); color: var(--soft); white-space: nowrap; line-height: 1.7; min-height: 0; border: 0; }
.kit .notice { border-radius: 14px; padding: 12px 14px; background: rgba(91, 214, 154, .08); border: 1px solid rgba(91, 214, 154, .3); font-size: 13px; }
.kit .alert { border-radius: 14px; padding: 12px 14px; background: rgba(255, 107, 139, .08); border: 1px solid rgba(255, 107, 139, .35); font-size: 13px; }
.kit .err { color: var(--bad); font-size: 12px; margin: 0; }
.kit .tblwrap { overflow-x: auto; }
.kit .grid.auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.kit .ph + .notice, .kit .ph + .alert { margin-bottom: 14px; }
/* kit choice cards with real radio buttons */
.kit .choice > input[type="radio"], .kit .choice > input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kit .choice:has(> input:checked) { border-color: var(--ion); background: rgba(111, 227, 232, .08); box-shadow: 0 0 0 3px rgba(111, 227, 232, .12); }
.kit .choice:has(> input:focus-visible) { outline: 2px solid var(--ion); outline-offset: 2px; }
/* kit segmented control with real radio buttons */
.kit .seg label { position: relative; display: inline-flex; }
.kit .seg label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kit .seg label span { padding: 6px 13px; border-radius: 9px; font-size: 12.5px; color: var(--soft); cursor: pointer; }
.kit .seg label:has(input:checked) span { background: rgba(111, 227, 232, .16); color: var(--ion); }
.kit .seg.sunny label:has(input:checked) span { background: linear-gradient(180deg, var(--sun2), var(--sun)); color: #1A1200; }
.kit .seg label:has(input:focus-visible) span { outline: 2px solid var(--ion); outline-offset: 1px; }
/* the kit's .field is a label wrapper, not an input: undo the panel's input look on it */
.kit label.field, .kit div.field, .kit fieldset.field { display: grid; gap: 6px; border: 0; background: none; padding: 0; min-height: 0; height: auto; box-shadow: none; border-radius: 0; width: auto; }
.kit label.field:focus-within { box-shadow: none; }
.kit select.select, .kit input.input { min-height: 0; height: auto; }
.kit .fgrid { align-items: start; }
.kit .seg a { padding: 6px 13px; border-radius: 9px; font-size: 12.5px; color: var(--soft); text-decoration: none; }
.kit .seg a.on, .kit .seg a[aria-current] { background: rgba(111, 227, 232, .16); color: var(--ion); }
/* long URLs, keys and hosts wrap instead of widening the page on phones */
.kit { min-width: 0; max-width: 100%; }
.kit .card, .kit .ph p { overflow-wrap: break-word; }
.kit .card :where(code, .mono, .en, bdi[dir="ltr"]) { overflow-wrap: anywhere; }
.auth .kit { width: 100%; }

/* file manager: on phones a tool's pop-up opens under the whole toolbar, so it never runs off the screen */
@media (max-width: 700px) {
  .fm-toolbar { position: relative; }
  .fm-tool { position: static; }
  .fm-pop { inset-inline: 12px; width: auto; }
}

/* touch screens: small links and checkboxes get a finger-sized hit area */
@media (pointer: coarse) {
  .kit .ch .more { padding: 10px 8px; margin: -10px -8px; }
  .kit .row > a, .attn .row a { padding-block: 4px; }
  .help-nav a, .card.section nav a, nav.card a { display: block; padding-block: 8px; }
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
  .chip, .kit .chip { min-height: 28px; }
  .auth-card a, .muted a { padding-block: 4px; display: inline-block; }
  .alert a, form [style*="flex-wrap"] > a { display: inline-block; padding-block: 6px; }
  .h2row > a { display: inline-block; padding: 6px 8px; margin: -6px -8px; }
}

/* phones: two stat tiles per row, hero buttons wrap instead of overlapping, meter and tools fit */
@media (max-width: 560px) {
  .kit .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit.kp-user .syshero .acts { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .kit.kp-user .syshero .acts > * { flex: 1 1 auto; }
  .kit.kp-user .syshero .acts .btn { width: 100%; white-space: nowrap; }
  .kit .meterbox .mtop { grid-template-columns: 1fr 1fr; }
  .kit .meterbox .mtop > div:first-child { grid-column: 1 / -1; }
  .kit .meterbox .mtop strong { text-align: start; }
}
@media (max-width: 420px) {
  .kit.kp-user .tools6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kit p .link, .kit .ph .link { text-decoration: underline; text-underline-offset: 3px; }