/* Galaxy panel styles — tokens match docs/design/README.md */
/* Vazirmatn (OFL, bundled so phones without it render the same): one variable file, 100–900. */
@font-face { font-family: Vazirmatn; src: url(fonts/vazirmatn.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --bg: #0A0C1C; --bg2: #0F1228; --card: #141836; --card2: #1B2046; --line: #272C57;
  --fg: #ECEEFF; --muted: #A6ABD4; --sun: #FFB547; --ion: #6FE3E8; --ok: #5BD69A; --bad: #FF8A98; --ink: #1A1200;
  --font: Vazirmatn, Tahoma, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ion); }
a:hover { color: #B2F3F5; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ion); outline-offset: 2px; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.orb { border-radius: 50%; flex: none; display: inline-block; }
.orb { position: relative; }
/* Star: emissive — white-hot core, limb darkening toward the edge, faint granulation. */
.o-sun { background:
    radial-gradient(circle at 50% 50%, #0000 55%, #A8480055 82%, #5A1E00AA 100%),
    repeating-radial-gradient(circle at 38% 36%, #ffffff0d 0 2px, #0000 2px 5px),
    radial-gradient(circle at 42% 40%, #FFFBEA 0, #FFE29A 18%, #FFB547 46%, #E9831A 72%, #9B4708 100%);
  box-shadow: 0 0 18px #FFB54755; }
/* Planets: lit from the star (upper side) — specular glint, terminator, night side, atmosphere rim. */
.o-ion, .o-pink, .o-violet, .o-green { box-shadow: inset 0 0 0 1px #ffffff10; }
.o-ion { background:
    radial-gradient(circle at 30% 26%, #ffffffd9 0, #fff0 16%),
    radial-gradient(circle at 70% 78%, #0000 30%, #02101A 78%),
    radial-gradient(circle at 36% 32%, #E0FDFE 0, #6FE3E8 30%, #1F8C9C 62%, #0B3442 100%); }
.stars {
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%, #ffffffd0 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 62%, #ffffff90 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 37% 28%, #ffffffb0 50%, transparent 52%),
    radial-gradient(1px 1px at 51% 83%, #ffffff80 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 66% 9%, #ffe6b0d0 50%, transparent 52%),
    radial-gradient(1px 1px at 79% 47%, #ffffff90 50%, transparent 52%);
  background-size: 420px 420px;
}

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 15px; border: 1px solid var(--line); background: var(--card2); color: var(--fg); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { color: var(--fg); border-color: #3A4080; }
.btn-sun { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn-sun:hover { color: var(--ink); background: #FFC56E; }
.btn-ion { background: var(--ion); border-color: var(--ion); color: #062A30; }
.btn-link { background: none; border: 0; color: var(--ion); padding: 0; min-height: 44px; font: inherit; cursor: pointer; }
.btn-block { width: 100%; }
.field { display: block; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); font: inherit; font-size: 15px; }
.field[aria-invalid="true"] { border-color: var(--bad); }
.label { display: flex; flex-direction: column; gap: 8px; }
.label > span:first-child { font-size: 14px; color: var(--muted); font-weight: 500; }
.err { margin: 0; color: var(--bad); font-size: 14px; }
.notice { padding: 12px 16px; border-radius: 12px; background: #14302A; border: 1px solid #5BD69A66; }
.announce summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
.announce summary::-webkit-details-marker { display: none; }
.announce summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.announce-info { background: #142540; border-color: #7FD8FF66; color: #CFEFFF; }
.announce-warning { background: #33290F; border-color: #F5B83D88; color: #FFE6B0; }
.announce-critical { background: #3A1520; border-color: #FF6B8A88; color: #FFD0DA; }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.8; min-height: 44px; }
.check input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--sun); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--card2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.card { background: linear-gradient(180deg, #171B3DF0, #12152FF0); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 18px 40px -24px #000; }

/* Auth layout */
.auth { min-height: 100vh; display: flex; flex-direction: column; padding: 28px max(16px, 5vw); }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.auth-card { width: min(100%, 440px); padding: clamp(24px, 5vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.auth-card h1 { font-size: 30px; font-weight: 900; }
.code-input { font-family: var(--mono); font-size: 28px; letter-spacing: .5em; text-align: center; direction: ltr; }

/* Panel layout */
/* Shell: grouped sidebar on wide screens; app bar + drawer + tab bar on phones (views/partials/sidenav.php) */
.app { min-height: 100vh; }
.space { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(1.4px 1.4px 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.8px 1.8px 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,
    radial-gradient(60% 45% at 100% 0%, #2A2470 0, transparent 70%),
    radial-gradient(50% 40% at 0% 100%, #0F3C4A 0, transparent 70%),
    var(--bg); }
/* A distant ringed planet: the one 3D element, static and behind everything. */
.space::before { content: ""; position: absolute; width: 520px; height: 520px; inset-block-start: -210px; inset-inline-end: -170px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #3B3F86 0, #1A1C48 45%, #0B0C24 72%, #05060F 100%);
  box-shadow: inset -40px -30px 80px #000c, 0 0 120px #4B48B033; opacity: .55; }
.space::after { content: ""; position: absolute; width: 900px; height: 900px; inset-block-start: -400px; inset-inline-end: -360px; border-radius: 50%;
  border: 2px solid #8C86FF22; transform: rotate(-24deg) scaleY(.22); opacity: .9; }
.app-admin .space::before { background: radial-gradient(circle at 34% 30%, #1E6C78 0, #11364A 45%, #081A26 72%, #04080E 100%); box-shadow: inset -40px -30px 80px #000c, 0 0 120px #2FB4C033; }
.app-admin .space::after { border-color: #6FE3E822; }

.shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px 18px; background: linear-gradient(180deg, #0E1130F2, #0A0C1EF2); border-inline-end: 1px solid var(--line);
  box-shadow: inset -1px 0 0 #ffffff05; scrollbar-width: thin; scrollbar-color: #272C57 transparent; }
.side-admin { background: linear-gradient(180deg, #08121CF5, #070A16F5); }
.side-head { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.side-head .brand { font-size: 20px; }
.brand-orb { position: relative; box-shadow: 0 0 18px #FFB54766; }
.brand-orb.o-ion { box-shadow: 0 0 18px #6FE3E866; }
.brand-orb::after { content: ""; position: absolute; inset: 9px -9px; border: 1.5px solid #FFD89ACC; border-radius: 50%; transform: rotate(-22deg); clip-path: inset(50% 0 0 0); }
.brand-orb.o-ion::after { border-color: #B2F3F5CC; }
.chip-ion { color: var(--ion); border-color: #6FE3E866; }
.side-cta { justify-content: center; box-shadow: 0 8px 24px -8px #FFB54788, inset 0 1px 0 #ffffff55; }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-title { margin: 10px 12px 4px; font-size: 12.5px; font-weight: 600; color: #7E84BC; }
.nav { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 12px; border: 0; background: none;
  color: var(--muted); text-decoration: none; font: inherit; font-weight: 500; font-size: 15px; white-space: nowrap; cursor: pointer; width: 100%; text-align: start; }
.nav svg { flex: none; opacity: .85; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav:hover { background: #ffffff0a; color: var(--fg); }
.nav.on { color: var(--fg); background: linear-gradient(90deg, #FFB5471F, #FFB54708 70%, transparent); box-shadow: inset 0 0 0 1px #FFB54726; }
[dir="rtl"] .nav.on { background: linear-gradient(270deg, #FFB5471F, #FFB54708 70%, transparent); }
.nav.on svg { color: var(--sun); opacity: 1; }
/* Active marker: a small glowing moon on the rail. */
.nav.on::before { content: ""; position: absolute; inset-inline-start: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px 2px #FFB54799; }
.side-admin .nav.on { background: linear-gradient(90deg, #6FE3E81C, #6FE3E806 70%, transparent); box-shadow: inset 0 0 0 1px #6FE3E826; }
[dir="rtl"] .side-admin .nav.on { background: linear-gradient(270deg, #6FE3E81C, #6FE3E806 70%, transparent); }
.side-admin .nav.on svg { color: var(--ion); }
.side-admin .nav.on::before { background: var(--ion); box-shadow: 0 0 10px 2px #6FE3E899; }
.nav-badge { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--sun); color: var(--ink); font-size: 12px; font-weight: 800; }
.nav-sm { min-height: 38px; font-size: 14px; }
.nav-out:hover { color: var(--bad); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 10px; padding: 4px 6px; min-width: 0; }
.who-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; color: #1A1200; text-shadow: 0 1px 0 #ffffff55; box-shadow: inset -4px -5px 10px #0005; }
.who-avatar.o-ion { color: #062A30; }
.who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.who-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-mail { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-links { display: flex; flex-direction: column; gap: 1px; }
.foot-links form { margin: 0; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff08; color: var(--fg); cursor: pointer; text-decoration: none; flex: none; }
.iconbtn:hover { color: var(--fg); background: #ffffff12; }
.iconbtn-sun { background: var(--sun); border-color: var(--sun); color: var(--ink); box-shadow: 0 6px 18px -6px #FFB547AA; }
.iconbtn-sun:hover { color: var(--ink); background: #FFC56E; }
.iconbtn-spacer { width: 44px; }
.side-close { display: none; margin-inline-start: auto; }
.appbar, .tabbar, .scrim { display: none; }
.content { width: 100%; max-width: 1280px; margin-inline: auto; min-width: 0; padding: 28px clamp(16px, 3vw, 44px) 64px; display: flex; flex-direction: column; gap: 24px; }
.pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.pagehead h1 { font-size: 28px; font-weight: 800; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.stat strong { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.empty { padding: clamp(28px, 6vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.tbl-fit { min-width: 0; }
.tbl-fit td { padding: 10px 8px; }
.tbl th { text-align: start; color: var(--muted); font-weight: 500; font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }

/* Planets */
.status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-active { color: var(--ok); } .st-creating, .st-busy { color: var(--sun); } .st-suspended { color: var(--muted); } .st-failed, .st-deleting { color: var(--bad); }
.st-busy::before, .st-creating::before { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.grid-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.section { padding: clamp(18px, 3vw, 26px); display: flex; flex-direction: column; gap: 16px; }
.section h2 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.stepno { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--card2); border: 1px solid var(--line); font-size: 14px; color: var(--sun); flex: none; }
.opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; min-height: 44px; }
.opt:hover { border-color: #3A4080; }
.opt:has(input[type=radio]:checked) { border-color: var(--sun); background: #1E1A2E; box-shadow: 0 0 0 1px var(--sun) inset; }
.opt:has(input[type=radio]:focus-visible) { outline: 2px solid var(--ion); outline-offset: 2px; }
.opt > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.opt strong { font-size: 16px; }
.opt .price { font-weight: 800; color: var(--sun); }
.specs { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; }
.create-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.summary { position: sticky; top: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.summary .big { font-size: 30px; font-weight: 900; color: var(--sun); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.danger { border-color: #FF8A9855; }
.btn-bad { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn-bad:hover { color: var(--fg); background: #3A1620; border-color: var(--bad); }
.planet-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--fg); }
.planet-card { transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s; transform-origin: 50% 100%; }
.planet-card:hover { color: var(--fg); border-color: #4A50A0; transform: perspective(900px) rotateX(3deg) translateY(-3px); box-shadow: inset 0 1px 0 #ffffff14, 0 26px 50px -24px #000, 0 0 0 1px #FFB54714; }
.alert { padding: 12px 16px; border-radius: 12px; background: #301620; border: 1px solid #FF8A9866; }

/* File manager */
.files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.files li { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--line); min-height: 52px; flex-wrap: wrap; }
.files li:last-child { border-bottom: 0; }
.fname { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; min-height: 44px; }
.fname span { overflow-wrap: anywhere; text-align: start; }
a.fname:hover span { color: var(--ion); }
.fmeta { color: var(--muted); font-size: 13px; min-width: 70px; text-align: end; }
.fmenu { position: relative; }
.fmenu > summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 10px; font-size: 20px; color: var(--muted); }
.fmenu > summary::-webkit-details-marker, .tool > summary::-webkit-details-marker { display: none; }
.fmenu > summary:hover { background: var(--card2); color: var(--fg); }
.fpanel { position: absolute; inset-inline-end: 0; top: 46px; z-index: 5; width: min(320px, 86vw); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px #0008; }
.tool > summary { list-style: none; }
.tool[open] > summary { border-color: var(--sun); }
.toolform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.toolform .field { flex: 1 1 160px; min-height: 44px; }
.editor { min-height: 65vh; padding: 14px 16px; font-size: 14px; line-height: 1.6; resize: vertical; white-space: pre; tab-size: 4; }

@media (max-width: 1000px) {
  .create-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 1023.98px) {
  .shell { display: block; }
  .appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 62px; padding: 0 12px; background: #0A0C1CCC; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid #272C5799; }
  .appbar .brand { font-size: 18px; }
  /* Without JavaScript the sidebar is shown above the page; with it, it becomes a drawer. */
  .side { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .js .side { position: fixed; z-index: 50; inset-block: 0; inset-inline-start: 0; width: min(88vw, 330px); height: 100dvh; border-bottom: 0;
    border-inline-end: 1px solid var(--line); box-shadow: 0 0 60px #000c; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s; visibility: hidden; }
  [dir="rtl"].js .side { transform: translateX(105%); }
  [dir="ltr"].js .side { transform: translateX(-105%); }
  .js.nav-open .side { transform: none; visibility: visible; }
  .js .side-close { display: inline-grid; }
  .js .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: #03040Bb3; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .28s; }
  .js.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .js.nav-open body { overflow: hidden; }
  .tabbar { position: fixed; z-index: 30; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #0A0C1CE6; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    border-top: 1px solid #272C57AA; }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; border-radius: 12px; border: 0; background: none;
    color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .tab:hover { color: var(--fg); }
  .tab.on { color: var(--sun); }
  .app-admin .tab.on { color: var(--ion); }
  .tab.on svg { filter: drop-shadow(0 0 6px currentColor); }
  .content { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); gap: 18px; }
  .pagehead h1 { font-size: 23px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px 16px; }
  .stat strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .js .side, .js .scrim { transition: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Universe (decision 0016): planets of a system */
.o-pink { background:
    radial-gradient(circle at 30% 26%, #ffffffc4 0, #fff0 15%),
    radial-gradient(circle at 70% 78%, #0000 30%, #2A0716 80%),
    repeating-linear-gradient(170deg, #ffffff14 0 3px, #0000 3px 8px),
    radial-gradient(circle at 36% 32%, #FFE1F0 0, #FF8AC2 32%, #A33A70 66%, #2A0716 100%); }
.o-violet { background:
    radial-gradient(circle at 30% 26%, #ffffffc4 0, #fff0 15%),
    radial-gradient(circle at 70% 78%, #0000 30%, #160B33 80%),
    repeating-linear-gradient(170deg, #ffffff12 0 3px, #0000 3px 8px),
    radial-gradient(circle at 36% 32%, #EDE6FF 0, #A98BFF 32%, #5A3CB8 66%, #160B33 100%); }
.o-green { background:
    radial-gradient(circle at 30% 26%, #ffffffc4 0, #fff0 15%),
    radial-gradient(circle at 70% 78%, #0000 30%, #06231A 80%),
    repeating-linear-gradient(170deg, #0000 0 3px, #0000 3px 8px),
    radial-gradient(circle at 36% 32%, #E4FFF0 0, #5BD69A 32%, #22805A 66%, #06231A 100%); }
.orbit-list { list-style: none; margin: 0; padding: 0 0 0 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.orbit-list li { padding-inline-start: calc(min(var(--d), 6) * 14px); }
.orbit-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); text-decoration: none; min-height: 56px; transition: border-color .2s, transform .2s; }
.orbit-item:hover { color: var(--fg); border-color: #6FE3E866; transform: translateX(-2px); }
[dir="ltr"] .orbit-item:hover { transform: translateX(2px); }
.toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.toggles .check { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); color: var(--muted); }
.toggles strong { color: var(--fg); }
.modules { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.modules legend { padding: 0 6px; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.mod { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; min-height: 36px; }
.mod input { accent-color: var(--ion); }
.blackhole-card { border-color: #FF8A9855; background: radial-gradient(120% 140% at 100% 0%, #2A0E1A 0, var(--card) 60%); }

/* Tickets (roadmap 2 step 7) */
.ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ticket-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); text-decoration: none; }
.ticket-row:hover { color: var(--fg); border-color: #3A4080; }
.ticket-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: min(100%, 720px); padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); }
.msg-user { background: var(--bg2); align-self: flex-start; }
.msg-staff { background: #14302A; border-color: #5BD69A55; align-self: flex-end; }
.msg-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; }
.msg-body { overflow-wrap: anywhere; white-space: normal; line-height: 1.8; }
.msg-ai { background: #1D1838; border-color: #A98BFF55; align-self: flex-end; }
.ai-body { font-size: 14px; }

/* Galaxy map on the dashboard */
.gmap { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, #1B1F4A 0, var(--card) 55%), var(--card); }
.gmap-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.gmap-space { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; padding: 6px 0; }
.gsys { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--fg); padding: 6px; border-radius: 16px; }
.gsys:hover { color: var(--fg); background: #ffffff08; }
.gsys-sky { position: relative; width: 220px; height: 128px; display: block; perspective: 700px; perspective-origin: 50% 40%; }
/* The orbital plane, tipped back so the circles read as ellipses in depth. Planets on the far side pass
   behind the star (one 3D context), and each planet is turned back to face the viewer. */
.gplane { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(68deg) rotateZ(var(--tilt)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.gsys:hover .gplane { transform: rotateX(58deg) rotateZ(var(--tilt)); }
.gorbit { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%; border: 1px solid #8FA8FF2E; box-shadow: 0 0 0 1px #6FE3E80A, inset 0 0 18px #6FE3E80D; transform-style: preserve-3d;
  transform: rotateZ(var(--start)); animation: gspin var(--d) linear infinite; }
.gplanet { position: absolute; left: 50%; top: 0; width: var(--p); height: var(--p); margin: calc(var(--p) / -2) 0 0 calc(var(--p) / -2);
  transform: rotateZ(calc(var(--start) * -1)) rotateX(-68deg); animation: gbill var(--d) linear infinite; }
.gstar { position: absolute; left: 0; top: 0; width: var(--star); height: var(--star); margin: calc(var(--star) / -2) 0 0 calc(var(--star) / -2);
  transform: rotateX(-68deg); box-shadow: none; }
.gsys:hover .gstar { transform: rotateX(-58deg); }
/* Corona: a flat glow behind the whole orbital plane (inside the 3D plane it would be cut into a wedge). */
.gsys-sky::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--star) * 3.4); height: calc(var(--star) * 3.4);
  margin: calc(var(--star) * -1.7) 0 0 calc(var(--star) * -1.7); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFE7B0 0, #FFC2608C 12%, #FFB54740 26%, #FF8A2A14 44%, transparent 66%); }
.gsys.st-suspended .gstar, .gsys.st-failed .gstar { filter: grayscale(.85) brightness(.65); }
.gsys.st-suspended .gsys-sky::before, .gsys.st-failed .gsys-sky::before { display: none; }
@keyframes gspin { from { transform: rotateZ(var(--start)); } to { transform: rotateZ(calc(var(--start) + 360deg)); } }
@keyframes gbill { from { transform: rotateZ(calc(var(--start) * -1)) rotateX(-68deg); } to { transform: rotateZ(calc(var(--start) * -1 - 360deg)) rotateX(-68deg); } }
@media (prefers-reduced-motion: reduce) { .gorbit, .gplanet { animation: none; } .gplane { transition: none; } }

/* Script store */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.store-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); }

/* ---- Sidebar polish: brighter items, clear groups, Systems count with "+" ---- */
.side .nav { color: #C9CDF2; }
.side .nav svg { opacity: 1; color: #B7BCEB; }
.side .nav:hover svg { color: var(--fg); }
.nav-group + .nav-group { padding-top: 10px; border-top: 1px solid #ffffff0f; }
.nav-title { margin: 6px 12px 6px; font-size: 12px; font-weight: 700; color: #9EA4DA; letter-spacing: .02em; }
.nav-row { display: flex; align-items: center; gap: 6px; }
.nav-row .nav { flex: 1; min-width: 0; }
.nav-count { margin-inline-start: auto; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 99px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--fg); background: #ffffff12; border: 1px solid #ffffff1a; }
.nav.on .nav-count { background: #FFB54726; border-color: #FFB54755; color: #FFD9A0; }
.nav-count.bump { animation: navbump .5s ease; }
@keyframes navbump { 40% { transform: scale(1.25); } }
.nav-plus { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--ink);
  background: linear-gradient(180deg, #FFC66B, var(--sun)); box-shadow: 0 6px 18px -8px #FFB547AA, inset 0 1px 0 #ffffff66; text-decoration: none; }
.nav-plus:hover { filter: brightness(1.08); color: var(--ink); }
.nav-plus:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* ---- Glassier tiles ---- */
.card { background: linear-gradient(180deg, #1A1F48B8, #12163399); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-color: #ffffff17; box-shadow: inset 0 1px 0 #ffffff14, 0 18px 40px -24px #000; }
@media (prefers-reduced-motion: reduce) { .nav-count.bump { animation: none; } }

/* ---- Systems list: each System's star with its planets in orbit ---- */
.sys-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.sys-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sys-sky { width: 128px; height: 88px; flex: none; perspective: 500px; }
.planet-card:hover .gplane { transform: rotateX(58deg) rotateZ(var(--tilt)); }
.planet-card:hover .gstar { transform: rotateX(-58deg); }
.planet-card.st-suspended .gstar, .planet-card.st-failed .gstar { filter: grayscale(.85) brightness(.65); }
.planet-card.st-suspended .gsys-sky::before, .planet-card.st-failed .gsys-sky::before { display: none; }
.sys-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sys-title strong { font-size: 18px; overflow-wrap: anywhere; text-align: start; line-height: 1.3; }
.sys-title .muted { font-size: 13px; }
.sys-planets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sys-count { font-size: 13px; font-weight: 700; color: #FFD9A0; margin-inline-end: 4px; }
.sys-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.sys-specs div { background: #ffffff08; border: 1px solid #ffffff10; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sys-specs dt { font-size: 11.5px; color: var(--muted); }
.sys-specs dd { margin: 0; font-weight: 700; font-size: 14px; white-space: nowrap; }
.sys-price { font-size: 13px; padding-top: 10px; border-top: 1px solid #ffffff10; }

/* ---- System page tabs ---- */
.ptabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 8px; margin: 0 -2px; border-radius: 16px; background: #10132ECC; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid #ffffff14; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs a { flex: none; padding: 8px 16px; border-radius: 11px; color: #C9CDF2; text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.ptabs a:hover { background: #ffffff0d; color: var(--fg); }
.ptabs a.on { color: var(--ink); background: linear-gradient(180deg, #FFC66B, var(--sun)); box-shadow: 0 6px 18px -8px #FFB547AA; }
.ptabs a:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.ptab { display: flex; flex-direction: column; gap: 20px; }
.has-tabs .ptab:not(.on) { display: none; }
.ov-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.ov-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1180px) { .ov-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1023px) { .ptabs { top: calc(env(safe-area-inset-top, 0px) + 56px); } }

/* ---- Toast notices (live status) ---- */
.toasts { position: fixed; z-index: 60; inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; color: var(--fg);
  background: #1A1F48E6; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #FFB54755;
  box-shadow: 0 20px 40px -18px #000, 0 0 0 1px #ffffff0a inset; animation: toastin .35s cubic-bezier(.2, .8, .2, 1); }
.toast > span { flex: 1; min-width: 0; font-size: 14px; }
.toast .btn { min-height: 34px; padding: 4px 14px; }
.toast-x { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 0; background: #ffffff10; color: var(--muted); font-size: 18px; cursor: pointer; }
.toast-x:hover { color: var(--fg); }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 1023px) { .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* File manager: space bar, search, multi-select toolbar, drop zone */
.fm-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: end; }
@media (max-width: 760px) { .fm-top { grid-template-columns: 1fr; } }
.fm-space { display: flex; flex-direction: column; gap: 8px; }
.fm-bar { height: 10px; border-radius: 99px; background: var(--card2); overflow: hidden; border: 1px solid var(--line); }
.fm-bar > span { display: block; height: 100%; background: var(--ion); border-radius: inherit; }
.fm-bar.is-full > span { background: var(--bad, #e5484d); }
.fm-search { margin-top: 0; }
.fm-check { display: inline-flex; align-items: center; gap: 8px; min-width: 32px; min-height: 44px; cursor: pointer; }
.fm-check input { width: 18px; height: 18px; accent-color: var(--sun); }
.files li.fm-head { min-height: 40px; font-size: 13px; color: var(--muted); }
.fm-bulk { position: sticky; top: 8px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--sun); border-radius: 14px; background: var(--card2); box-shadow: 0 12px 30px #0006; }
.fm-bulk[hidden] { display: none; }
.fm-bulk .field { flex: 1 1 150px; min-height: 44px; }
.fm-results { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fm-zone { position: relative; }
.fm-zone.is-drag::after { content: attr(data-drop); position: absolute; inset: 0; display: grid; place-items: center; border: 2px dashed var(--sun); border-radius: inherit; background: color-mix(in srgb, var(--bg) 80%, transparent); font-weight: 600; z-index: 8; pointer-events: none; }

/* ==========================================================================
   Glass theme (the panel's design language). Two modes share it:
   html[data-motion="full"]  glass with blur, motion and hover depth;
   html[data-motion="lite"]  the same glass look without blur-heavy layers or motion (slower phones, or the
                             account setting "Animations: lite"). views/partials/head.php picks the mode.
   ========================================================================== */
:root {
  --bg: #171B44; --bg2: #ffffff0f; --card: #ffffff14; --card2: #ffffff1c; --line: #ffffff26;
  --fg: #F3F4FF; --muted: #BCC1EC;
  --glass: linear-gradient(135deg, #ffffff24 0%, #ffffff12 45%, #ffffff0a 100%);
  --glass-solid: linear-gradient(135deg, #3A3F82F2 0%, #2B2F6CF2 45%, #252960F2 100%);
  --glass-line: #ffffff2e; --glass-hi: inset 0 1px 0 #ffffff40, inset 0 0 0 1px #ffffff08;
  --glass-shadow: 0 24px 48px -30px #070A2ECC;
  --blur: blur(22px) saturate(1.6);
  --r-card: 22px;
}
body { background: #171B44; }
.space, .auth { background:
    radial-gradient(1.4px 1.4px at 12% 18%, #fffc 50%, transparent 52%) 0 0 / 360px 360px,
    radial-gradient(1px 1px at 63% 71%, #fff8 50%, transparent 52%) 0 0 / 360px 360px,
    radial-gradient(1.8px 1.8px at 38% 44%, #ffe6b0aa 50%, transparent 52%) 0 0 / 620px 620px,
    radial-gradient(1px 1px at 84% 12%, #b8f6ff99 50%, transparent 52%) 0 0 / 620px 620px,
    radial-gradient(55% 45% at 100% 0%, #5B4FD0 0, transparent 70%),
    radial-gradient(45% 40% at 0% 100%, #1F8FA6 0, transparent 70%),
    radial-gradient(40% 35% at 15% 10%, #B4589A66 0, transparent 70%),
    radial-gradient(50% 45% at 80% 95%, #E08A3A40 0, transparent 70%),
    linear-gradient(160deg, #1B1F52 0%, #20245E 50%, #171B44 100%); }
.auth { background-attachment: fixed; }
.space::before { background: radial-gradient(circle at 34% 30%, #6B6FD0 0, #3B3F96 45%, #23265F 72%, #171A45 100%);
  box-shadow: inset -40px -30px 80px #0A0C3099, 0 0 140px #7C78FF55; opacity: .7; }
.space::after { border-color: #B4AFFF44; }
.app-admin .space::before { background: radial-gradient(circle at 34% 30%, #3FB6C4 0, #23708A 45%, #184A66 72%, #142E4E 100%); box-shadow: inset -40px -30px 80px #0A0C3099, 0 0 140px #4FD4E055; }
.app-admin .space::after { border-color: #9FF0F444; }

/* Glass surfaces */
.card { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); border-radius: var(--r-card); box-shadow: var(--glass-hi), var(--glass-shadow); }
.card .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #ffffff0f; box-shadow: inset 0 1px 0 #ffffff1f; }
.btn { background: #ffffff1a; border-color: #ffffff2e; box-shadow: inset 0 1px 0 #ffffff26; }
.btn:hover { border-color: #ffffff59; background: #ffffff26; }
.btn-sun { background: linear-gradient(180deg, #FFCB78, var(--sun)); border-color: #FFD79A; box-shadow: inset 0 1px 0 #ffffff80, 0 10px 24px -12px #FFB547; }
.btn-sun:hover { background: linear-gradient(180deg, #FFD591, #FFBE5C); }
.btn-ion { background: linear-gradient(180deg, #9BF0F3, var(--ion)); border-color: #B8F6F8; box-shadow: inset 0 1px 0 #ffffff80, 0 10px 24px -12px #6FE3E8; }
.btn-bad { background: #FF8A981a; box-shadow: none; }
.btn-bad:hover { background: #FF8A9838; }
.btn-link { box-shadow: none; }
.field { background: #0D103266; border-color: #ffffff2b; box-shadow: inset 0 1px 2px #0005; }
.field:focus { border-color: var(--ion); outline: none; box-shadow: inset 0 1px 2px #0005, 0 0 0 3px #6FE3E833; }
.field::placeholder { color: #9FA5D6; }
.field option, .field optgroup { background: #262B66; color: var(--fg); }
.chip { background: #ffffff17; border-color: #ffffff29; color: #D5D8F7; }
.notice { background: #5BD69A26; border-color: #5BD69A80; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.alert { background: #FF8A9826; border-color: #FF8A9880; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.announce-info { background: #7FD8FF24; color: #DDF4FF; } .announce-warning { background: #F5B83D26; color: #FFEBC2; } .announce-critical { background: #FF6B8A26; color: #FFDCE4; }
.opt, .orbit-item, .ticket-row, .store-card, .toggles .check, .mod, .msg-user { background: #ffffff0f; border-color: #ffffff24; }
.opt:hover, .ticket-row:hover { border-color: #ffffff52; }
.opt:has(input[type=radio]:checked) { background: #FFB5471f; }
.msg-staff { background: #5BD69A1f; } .msg-ai { background: #A98BFF24; }
.stepno { background: #ffffff1a; }
.tbl th, .tbl td, .files li, .fm-results { border-color: #ffffff1c; }
.fpanel, .fm-bulk { background: var(--glass-solid); border-color: var(--glass-line); box-shadow: var(--glass-hi), 0 24px 50px -20px #050724; }
.fm-bulk { border-color: #FFB547AA; }
.fm-bar { background: #0D103266; }
.ptabs { background: #ffffff14; border-color: var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-hi); border-radius: 18px; }
.toast { background: var(--glass-solid); }
.blackhole-card { background: radial-gradient(120% 140% at 100% 0%, #FF8A9833 0, #ffffff0f 60%); }
.sys-specs div { background: #ffffff12; border-color: #ffffff22; }
.iconbtn { background: #ffffff17; border-color: #ffffff2e; }
.who-mail { color: #B4B9E6; }
a { color: #8EEBEF; }

/* Sidebar: a floating glass panel on desktop */
.side { background: linear-gradient(180deg, #ffffff1f, #ffffff0d); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-inline-end: 1px solid var(--glass-line); box-shadow: var(--glass-hi); scrollbar-color: #ffffff33 transparent; }
.side-admin { background: linear-gradient(180deg, #6FE3E826, #ffffff0d); }
.side .nav { border-radius: 14px; min-height: 44px; }
.side .nav:hover { background: #ffffff17; }
.side-foot { border-top-color: #ffffff22; }
.nav-group + .nav-group { border-top-color: #ffffff1c; margin-top: 4px; }
.nav.on::before { display: none; }
.nav.on { box-shadow: inset 0 0 0 1px #FFB54759, inset 0 1px 0 #ffffff33; background: linear-gradient(135deg, #FFB54740, #FFB54714); }
[dir="rtl"] .nav.on { background: linear-gradient(225deg, #FFB54740, #FFB54714); }
.side-admin .nav.on { box-shadow: inset 0 0 0 1px #6FE3E859, inset 0 1px 0 #ffffff33; background: linear-gradient(135deg, #6FE3E83d, #6FE3E814); }
[dir="rtl"] .side-admin .nav.on { background: linear-gradient(225deg, #6FE3E83d, #6FE3E814); }
@media (min-width: 1024px) {
  .shell { grid-template-columns: 308px minmax(0, 1fr); }
  .side { top: 16px; height: calc(100vh - 32px); margin: 16px; margin-inline-end: 0; padding: 22px 16px 16px; gap: 16px;
    border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--glass-hi), var(--glass-shadow); }
  .content { padding-top: 32px; }
}
@media (max-width: 1023.98px) {
  .appbar, .tabbar { background: #23276399; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--glass-line); }
  .js .side { background: var(--glass-solid); }
}

/* ---- Motion: full ---- */
[data-motion="full"] .btn, [data-motion="full"] .nav, [data-motion="full"] .iconbtn, [data-motion="full"] .field, [data-motion="full"] .card { transition: background-color .2s, border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
[data-motion="full"] .btn:hover { transform: translateY(-1px); }
[data-motion="full"] .btn:active { transform: translateY(0) scale(.98); }
[data-motion="full"] .space::before { animation: drift 38s ease-in-out infinite alternate; }
[data-motion="full"] .space::after { animation: ringdrift 38s ease-in-out infinite alternate; }
[data-motion="full"] .content { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes drift { to { translate: -40px 36px; } }
@keyframes ringdrift { to { translate: -40px 36px; rotate: 4deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---- Motion: lite — glass without the costly parts ---- */
[data-motion="lite"] *, [data-motion="lite"] *::before, [data-motion="lite"] *::after { animation: none !important; transition: none !important; }
[data-motion="lite"] .card, [data-motion="lite"] .ptabs, [data-motion="lite"] .notice, [data-motion="lite"] .alert { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-motion="lite"] .card { background: linear-gradient(135deg, #454A93D9 0%, #33387BD9 45%, #2B2F6CD9 100%); }
[data-motion="lite"] .card .card { background: #ffffff0f; }
[data-motion="lite"] .ptabs { background: #33387BE6; }
[data-motion="lite"] .side { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, #3F4489EB, #2B2F6CEB); }
[data-motion="lite"] .side-admin { background: linear-gradient(180deg, #2F6C86EB, #2B2F6CEB); }
[data-motion="lite"] .appbar, [data-motion="lite"] .tabbar, [data-motion="lite"] .js .scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-motion="lite"] .appbar, [data-motion="lite"] .tabbar { background: #262A66F5; }
[data-motion="lite"] .planet-card:hover { transform: none; }
[data-motion="lite"] .space::before, [data-motion="lite"] .space::after { box-shadow: none; }

/* ---- Icons, dashboard ---- */
.ico { flex: none; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.dash-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--fg); text-decoration: none; }
.dash-tile:hover { color: var(--fg); border-color: #ffffff59; }
[data-motion="full"] .dash-tile:hover { transform: translateY(-3px); }
.tile-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 15px; border: 1px solid #ffffff2e; box-shadow: inset 0 1px 0 #ffffff40; }
.tint-sun { color: #FFD08A; background: linear-gradient(135deg, #FFB54752, #FFB5471a); }
.tint-ion { color: #A5F1F4; background: linear-gradient(135deg, #6FE3E852, #6FE3E81a); }
.tint-ok { color: #9AEBC2; background: linear-gradient(135deg, #5BD69A52, #5BD69A1a); }
.tint-violet { color: #CDBBFF; background: linear-gradient(135deg, #A98BFF52, #A98BFF1a); }
.tint-pink { color: #FFC0DD; background: linear-gradient(135deg, #FF8AC252, #FF8AC21a); }
.tile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.tile-text .muted { font-size: 13px; }
.tile-text strong { font-size: 24px; font-weight: 800; }
.tile-sub { font-size: 12px; color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }
@media (min-width: 1180px) { .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-wide { grid-column: span 2; } }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-head h2 { font-size: 17px; }
.dash-head h2 .ico { color: var(--sun); }
.dash-head a { font-size: 13px; text-decoration: none; }
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff1c; color: var(--fg); text-decoration: none; min-height: 52px; min-width: 0; }
a.dash-row:hover { color: var(--fg); border-color: #ffffff52; background: #ffffff17; }
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; font-size: 14px; }
.dash-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.dash-main .muted { font-size: 12.5px; }
.dash-specs { display: flex; gap: 12px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.dash-specs span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 620px) { .dash-specs { display: none; } }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ion); flex: none; box-shadow: 0 0 8px currentColor; }
.dash-news .dash-dot { background: currentColor; }
/* Systems list: spec tiles with icons */
.sys-specs div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.sys-specs .ico { grid-row: span 2; color: var(--ion); }
.sys-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding-top: 12px; border-top: 1px solid #ffffff1c; }
.sys-price .ico { color: var(--sun); }
.sys-price strong { font-size: 15px; }

/* ---- System details with icons, databases, dialog ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: 0; }
.fact { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #ffffff0d; border: 1px solid #ffffff1c; }
.fact .tile-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; }
.fact dt { font-size: 12px; color: var(--muted); }
.fact dd { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; text-align: start; }
.section h2 .ico { color: var(--sun); }
.orbit-list li { padding-inline-start: 0; }
.db-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.db-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #ffffff0d; border: 1px solid #ffffff1c; flex-wrap: wrap; }
.db-ico { width: 38px; height: 38px; border-radius: 12px; }
.db-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-main strong { overflow-wrap: anywhere; text-align: start; }
.db-main .muted { font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.db-actions { display: flex; gap: 6px; align-items: center; }
.db-actions form { margin: 0; }
.iconbtn-ion { color: #062A30; background: linear-gradient(180deg, #9BF0F3, var(--ion)); border-color: #B8F6F8; }
.iconbtn-ion:hover { color: #062A30; filter: brightness(1.06); }
.iconbtn-bad { color: var(--bad); border-color: #FF8A9866; background: #FF8A981a; }
.iconbtn-bad:hover { color: #fff; background: #FF8A9840; }
.db-info { display: flex; flex-direction: column; gap: 14px; }
.db-sub { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 4px; }
.db-sub .ico { color: var(--ion); }
.modal { width: min(640px, calc(100vw - 24px)); max-height: min(86vh, 760px); padding: 22px; color: var(--fg); overflow: auto; background: var(--glass-solid); }
.modal::backdrop { background: #0A0C30B3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-x { position: sticky; top: 0; display: flex; justify-content: flex-end; margin: -8px -8px 0; z-index: 1; float: inline-end; }
[data-motion="full"] .modal[open] { animation: rise .3s cubic-bezier(.2, .8, .2, 1); }
[data-motion="lite"] .modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-source][hidden] { display: none !important; }

/* ---- Switches: every on/off control in the panel ---- */
.app .check input[type=checkbox], .switch-track { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 99px;
  background: #0D103280; border: 1px solid #ffffff3d; box-shadow: inset 0 1px 3px #0006; cursor: pointer; accent-color: auto; }
.app .check input[type=checkbox]::after, .switch-thumb { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #E8EAFF; box-shadow: 0 2px 6px #0007; }
.app .check input[type=checkbox]:checked, .switch.is-on .switch-track { background: linear-gradient(180deg, #7CEBB4, #3FC98A); border-color: #A6F3CD; box-shadow: inset 0 1px 0 #ffffff66, 0 0 14px #5BD69A66; }
.app .check input[type=checkbox]:checked::after, .switch.is-on .switch-thumb { inset-inline-start: 20px; background: #fff; }
.app .check input[type=checkbox]:disabled, .switch:disabled { opacity: .5; cursor: not-allowed; }
.app .check input[type=checkbox]:focus-visible, .switch:focus-visible { outline: 2px solid var(--ion); outline-offset: 3px; }
[data-motion="full"] .app .check input[type=checkbox], [data-motion="full"] .app .check input[type=checkbox]::after, [data-motion="full"] .switch-track, [data-motion="full"] .switch-thumb { transition: inset-inline-start .2s cubic-bezier(.3, 1.4, .5, 1), background-color .2s, box-shadow .2s; }
.app .check { align-items: flex-start; gap: 12px; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.switch-track { display: inline-block; }
.switch-label { font-weight: 600; }
/* Icons sit at the top of their row */
.dash-tile, .dash-row, .db-row, .fact { align-items: flex-start; }
.fact { align-items: start; }
.dash-row > .status, .dash-row > .chip, .dash-row > .dash-specs, .db-row > .db-actions, .db-row > form, .db-row > .status { align-self: center; }
.dash-dot, .ticket-dot { margin-top: 7px; }
.ico { vertical-align: -0.2em; }

/* ---- Drop-down setting groups ---- */
.acc { padding: 0; overflow: clip; }
.acc > summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; min-height: 64px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .tile-ico { width: 40px; height: 40px; border-radius: 13px; }
.acc-title { flex: 1; font-weight: 700; font-size: 16px; text-align: start; }
.acc-caret { color: var(--muted); display: grid; place-items: center; }
.acc[open] > summary .acc-caret { transform: rotate(180deg); }
[data-motion="full"] .acc-caret { transition: transform .2s; }
.acc > summary:hover { background: #ffffff0d; }
.acc > summary:focus-visible { outline: 2px solid var(--ion); outline-offset: -3px; }
.acc[open] > summary { border-bottom: 1px solid #ffffff1c; }
.acc-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.acc-body > .card, .acc-body > section.card { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
.acc-body > section > h2:first-child, .acc-body > section > div:first-child > h2 { display: none; }
.acc-danger { border-color: #FF8A9866; }
.state-row { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.state-text { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.state-text .muted { font-size: 13px; }
.ptab > .acc + .acc, .ptab > .state-row + .acc { margin-top: 0; }

/* ---- File manager ---- */
.fm { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fm-card { padding: 0; display: flex; flex-direction: column; position: relative; }
.fm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #ffffff1c; }
.fm-tool { position: relative; }
.fm-tool > summary { list-style: none; }
.fm-tool[open] > summary { border-color: var(--sun); }
.fm-pop { position: absolute; inset-inline-start: 0; top: calc(100% + 8px); z-index: 7; width: min(340px, 84vw); padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--glass-solid); border: 1px solid var(--glass-line); border-radius: 16px; box-shadow: var(--glass-hi), 0 24px 50px -20px #050724; }
.fm-pop .field { min-height: 44px; }
.fm-pop-row { display: flex; gap: 8px; align-items: center; }
.fm-pop-row .field { flex: 1; min-width: 0; min-height: 44px; }
.fm-pop-row .btn { flex: none; }
.fm-search { flex: 1 1 220px; position: relative; display: flex; margin-inline-start: auto; max-width: 420px; }
.fm-search .field { min-height: 44px; padding-inline-start: 40px; width: 100%; }
.fm-search-ico { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; pointer-events: none; }
.fm-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; font-size: 14px; text-align: left; background: #0D103240; border-bottom: 1px solid #ffffff1c; }
.fm-path a { color: #A5F1F4; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; border-radius: 8px; }
.fm-path a:hover { background: #ffffff17; }
.fm-path [aria-current] { font-weight: 700; padding: 0 6px; }
.fm-sep { color: var(--muted); }
.fm-results { padding: 14px 16px; }
.fm-bulk { position: sticky; top: 8px; z-index: 6; margin: 10px 12px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 12px; border-radius: 16px; }
.fm-bulk .btn { min-height: 44px; }
.fm-count { align-self: center; padding-inline-end: 6px; }
.fm-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; font-size: 12px; color: var(--muted); }
.fm-field > span { display: inline-flex; gap: 6px; align-items: center; }
.fm-field .field { min-height: 44px; }
.fm-list { list-style: none; margin: 0; padding: 4px 8px 8px; display: flex; flex-direction: column; }
.fm-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 92px 150px 64px 48px; align-items: center; gap: 8px; padding: 2px 8px; min-height: 52px; border-radius: 12px; border-bottom: 1px solid #ffffff12; }
.fm-row:last-child { border-bottom: 0; }
.fm-row[data-fm-row]:hover { background: #ffffff0f; }
.fm-row.is-picked { background: #FFB5471f; box-shadow: inset 0 0 0 1px #FFB54766; }
.fm-row-hit { grid-template-columns: minmax(0, 1fr) 92px auto; }
.fm-head { min-height: 40px; font-size: 12.5px; color: var(--muted); font-weight: 600; border-bottom: 1px solid #ffffff26; border-radius: 0; }
.fm-name { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--fg); text-decoration: none; min-height: 44px; }
.fm-name > .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
a.fm-name:hover > .mono { color: #A5F1F4; }
.fm-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.fi-dir { color: #FFD08A; background: #FFB54726; } .fi-code { color: #A5F1F4; background: #6FE3E81f; } .fi-img { color: #FFC0DD; background: #FF8AC21f; }
.fi-zip { color: #CDBBFF; background: #A98BFF26; } .fi-file, .fi-link { color: #C9CDF2; background: #ffffff14; }
.fm-meta { color: var(--muted); font-size: 13px; text-align: end; white-space: nowrap; }
.fm-more { justify-self: end; }
.fm-more > summary { width: 40px; height: 40px; min-width: 0; min-height: 0; font-size: 0; }
.fm .fpanel { top: 44px; width: min(330px, 86vw); border-radius: 16px; }
.fm .fpanel .btn { justify-content: flex-start; }
.fm-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; color: var(--muted); }
.fm-empty .fm-ico { width: 56px; height: 56px; border-radius: 18px; }
.fm-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #ffffff1c; font-size: 13px; }
.fm-foot .fm-space { flex: 0 1 300px; flex-direction: column; gap: 6px; }
.fm-foot .fm-bar { height: 6px; }
.fm-card.is-drag::after { border-radius: var(--r-card); }
[data-embed] { min-height: 180px; }
[data-embed].is-loading { opacity: .6; pointer-events: none; }
@media (max-width: 760px) {
  .fm-row { grid-template-columns: 36px minmax(0, 1fr) 76px 44px; }
  .fm-date, .fm-mode { display: none; }
  .fm-search { flex-basis: 100%; max-width: none; order: 5; }
}
.editor { background: #0D1032B3; }
.switch-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: #ffffff0d; border: 1px solid #ffffff1c; min-height: 0; cursor: pointer; }
.app .switch-row { align-items: center; }
.switch-row .tile-ico { width: 38px; height: 38px; border-radius: 12px; }
.switch-row > span:nth-child(2) { font-size: 13px; color: var(--muted); line-height: 1.6; }
.switch-row strong { color: var(--fg); font-size: 14.5px; }
.app .mod-grid .check.mod { align-items: center; padding: 8px 12px; min-height: 44px; }
.fm-bulk .fm-field .field { flex: none; width: 100%; }
.acc .acc-body > .card, .acc .acc-body > section.card, .acc .acc-body > section.grid > .card { background: none; border: 0; box-shadow: none; padding: 0; }
.facts-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

/* ---- Domains of a System ---- */
.dom-list { display: flex; flex-direction: column; gap: 8px; }
.dom { border-radius: 16px; background: #ffffff0d; border: 1px solid #ffffff1c; overflow: clip; }
.dom[open] { border-color: #ffffff3d; background: #ffffff12; }
.dom > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; min-height: 60px; }
.dom > summary::-webkit-details-marker { display: none; }
.dom > summary:hover { background: #ffffff0d; }
.dom > summary .tile-ico { width: 38px; height: 38px; border-radius: 12px; }
.dom[open] > summary .acc-caret { transform: rotate(180deg); }
.dom-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dom-main strong { overflow-wrap: anywhere; text-align: start; font-size: 15px; }
.dom-main .muted { font-size: 12px; overflow-wrap: anywhere; text-align: start; }
.dom-body { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid #ffffff1c; }
.dom-group { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.dom-group + .dom-group { border-top: 1px dashed #ffffff24; }
.dom-group h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; flex-wrap: wrap; }
.dom-group h3 .ico { color: var(--ion); }
.dom-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex-direction: row; }
.dom-row form { margin: 0; }
.dom-form { display: flex; flex-direction: column; gap: 12px; }
.dom-cert > summary { list-style: none; display: inline-flex; }
.dom-cert > summary::-webkit-details-marker { display: none; }
.dom-cert[open] > summary { border-color: var(--sun); margin-bottom: 12px; }
.dom-form textarea.field { padding: 10px 12px; font-size: 12px; min-height: 96px; }
.ns-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.ns { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff1c; }
.ns code { font-size: 14px; overflow-wrap: anywhere; }
.has-tabs .ptab, .ptab > section, .acc, .dom { scroll-margin-top: 96px; }

/* ---- Tabs inside a section (firewall) ---- */
.subtabs { display: flex; flex-direction: column; gap: 14px; }
.subtabs-nav { display: none; gap: 6px; padding: 5px; border-radius: 14px; background: #0D103240; border: 1px solid #ffffff1c; overflow-x: auto; scrollbar-width: none; }
.subtabs-nav a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: #C9CDF2; text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.subtabs-nav a:hover { background: #ffffff12; color: var(--fg); }
.subtabs-nav a.on { background: #ffffff24; color: var(--fg); box-shadow: inset 0 1px 0 #ffffff33; }
.subpane { display: flex; flex-direction: column; gap: 12px; }
.subtabs.is-ready .subtabs-nav { display: flex; }
.subtabs.is-ready .subpane:not(.on) { display: none; }
.section > .state-row { align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- Ticket conversation ---- */
.chat { display: flex; flex-direction: column; gap: 14px; }
.chat .thread { max-height: min(60vh, 560px); overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: #ffffff33 transparent; }
.chat .thread:empty { display: none; }
.msg { border-radius: 18px; }
.msg-mine { align-self: flex-start; border-end-start-radius: 6px; }
.msg:not(.msg-mine) { align-self: flex-end; border-end-end-radius: 6px; }
[data-motion="full"] .msg.is-new { animation: rise .3s cubic-bezier(.2, .8, .2, 1); }
.msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #ffffff14; border: 1px solid #ffffff2b; color: var(--fg); text-decoration: none; font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
.msg-file:hover { border-color: #ffffff59; color: var(--fg); }
.msg-img img { display: block; max-width: min(260px, 100%); max-height: 200px; border-radius: 12px; border: 1px solid #ffffff2b; }
.chat-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; margin: 0; text-align: center; font-size: 14px; }
.chat-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: #0D103240; border: 1px solid #ffffff24; }
.chat-form textarea.field { padding: 12px 14px; min-height: 76px; resize: vertical; background: #0D103266; }
.chat-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chat-attach { cursor: pointer; }
.chat-picked { flex: 1 1 140px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.chat-send { margin-inline-start: auto; }
.chat-form.is-sending { opacity: .65; pointer-events: none; }
/* Labelled fields inside a tool row: the field keeps its own height (the row's flex-basis is for the label). */
.toolform .fm-field .field, .dom-body .fm-field .field { flex: none; width: 100%; }
.dom-body > .toolform { margin-top: 0; }
/* Fact tiles: the icon lives inside <dt> (a <dl> group may hold only dt/dd) and is pinned to the start edge. */
.fact { display: block; position: relative; padding-inline-start: 62px; min-height: 60px; }
.fact .tile-ico { position: absolute; inset-inline-start: 12px; top: 10px; }
.tint-bad { color: #FFB3BC; background: linear-gradient(135deg, #FF8A9852, #FF8A981a); }

/* --- Bell, notifications, calmer dashboard ---------------------------------- */
.topbar { display: flex; justify-content: flex-end; margin-bottom: -6px; }
@media (max-width: 1023.98px) { .topbar { display: none; } }
.bell { position: relative; }
.bell-badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  background: var(--sun); color: #1B1403; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px #1d2052; }
.bell-badge[hidden], .nav-badge[hidden] { display: none; }
.notif-new { border-color: #FFB54766; background: #FFB5470f; }
.notif-body { white-space: pre-line; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.chip-sun { color: #1B1403; background: var(--sun); border-color: transparent; font-weight: 700; }
/* Dashboard numbers: two steps above their label, not headline-sized. */
.tile-text strong { font-size: 15px; font-weight: 800; }
.dash-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-main > strong > bdi { unicode-bidi: isolate; }
/* The orbits are the product's signature and cost one transform each: they keep turning in the lite
   theme too. With the system's "reduce motion" on they stay still unless the user chose full motion. */
[data-motion="lite"] .gorbit { animation: gspin var(--d) linear infinite !important; }
[data-motion="lite"] .gplanet { animation: gbill var(--d) linear infinite !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-pref="full"]) .gorbit, html:not([data-motion-pref="full"]) .gplanet { animation: none !important; }
  html[data-motion-pref="full"] .gorbit { animation: gspin var(--d) linear infinite !important; }
  html[data-motion-pref="full"] .gplanet { animation: gbill var(--d) linear infinite !important; }
}
/* The bell shares the title's row. */
@media (min-width: 1024px) {
  .topbar { margin-bottom: -62px; position: relative; z-index: 2; pointer-events: none; }
  .topbar > * { pointer-events: auto; }
  .topbar + .pagehead { padding-inline-end: 58px; min-height: 44px; }
}
/* Latin snippets (names, domains, dates) inside a right-to-left page sit at the same edge as the
   Persian text around them. Without this a dir="ltr" block aligns itself to the left. */
.db-main, .dash-main, .dom-main, .sys-title, .tile-text { align-items: flex-start; }
html[dir="rtl"] .app [dir="ltr"]:not(input):not(textarea):not(select):not(pre):not(code):not(.field):not(.term):not(table):not(.keep-ltr) { text-align: right; }
html[dir="rtl"] .app pre[dir="ltr"], html[dir="rtl"] .app code[dir="ltr"] { text-align: left; }
/* System details: two rows of five on a desktop; planet status: two rows of four. */
@media (min-width: 1100px) { .facts-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact dd { overflow-wrap: anywhere; }
html[dir="rtl"] .app .mono:not(input):not(textarea):not(select):not(pre):not(code):not(.field):not(.term):not(.keep-ltr) { text-align: right; }

/* --- One form language for the whole panel ---------------------------------- */
/* A row of labelled fields with its button at the end, lined up on the fields' baseline. */
.formrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; }
.formrow .fm-field .field { flex: none; width: 100%; }
.formrow > .btn { min-height: 44px; }
.affix { display: flex; align-items: center; gap: 6px; }
.affix > .field { flex: 1 1 auto; min-width: 0; width: auto !important; }
/* Row actions: every icon button the same size as the row's own icon tile. */
.db-actions .iconbtn, .db-row > form > .iconbtn, .db-row > .iconbtn { width: 38px; height: 38px; border-radius: 12px; }
.db-actions .iconbtn .ico, .db-ico .ico { width: 20px; height: 20px; }
/* One primary button per form; the rest sit apart, after a divider, as quiet buttons. */
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; margin-top: 2px; border-top: 1px dashed #ffffff26; }
.form-side > .muted { font-size: 12.5px; flex: 1 1 100%; }
.form-side form { margin: 0; }
.formrow .fm-field .affix > .field, .fm-field .affix > .field { flex: 1 1 auto; width: auto; min-width: 0; }
/* Script store: the cards themselves are the choice. */
.store-pick { position: relative; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.store-pick:hover { border-color: #ffffff59; }
.store-tick { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: var(--sun); color: #1B1403; }
.store-pick:has(input:checked) { border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun), 0 8px 26px #FFB54733; }
.store-pick:has(input:checked) .store-tick { display: grid; }
.store-pick:has(input:focus-visible) { outline: 2px solid var(--ion); outline-offset: 2px; }
.store-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* A settings drawer already has its icon and name: the section inside it is not a second card
   and does not repeat the title. */
.acc-body > section.card { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.acc-body > section.card > h2:first-child, .acc-body > section.card > div:first-child > h2 { display: none; }
.acc-body > section.card > div:first-child:has(> h2:only-child) { display: none; }
/* Old and new field labels read the same everywhere. */
.app .label > span:first-child, .app .fm-field > span:first-child { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.app .label { gap: 6px; }
.btn .ico { flex: none; }
.chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; background: #FF8A9833; color: var(--bad); cursor: pointer; }
.chip-x:hover { background: #FF8A9866; color: #fff; }
/* A labelled field directly in a card (column layout) keeps its own height. */
.card.section > .fm-field, .dom-body > .fm-field { flex: none; }
form:not(.toolform) > .fm-field { flex: none; }

/* ---- Admin insights (reports, monitor, jobs, security, system, search) ---- */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; }
.srvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: start; }
.h2row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.legend { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-inline-start: 6px; }
.axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); }
.seg a { padding: 6px 12px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.seg a:hover { color: var(--fg); }
.seg a.on { color: var(--ink); background: linear-gradient(180deg, #8FF0F3, var(--ion)); }
.delta { display: inline-flex; padding: 1px 7px; border-radius: 99px; font-weight: 700; font-size: 11.5px; background: var(--card2); color: var(--muted); }
.delta.up { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.delta.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.funnel li { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.funnel .bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.funnel .bar span { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.kv > span:last-child { text-align: end; overflow-wrap: anywhere; }
.hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hits li { display: flex; flex-direction: column; gap: 2px; }
.side-search { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0 10px; height: 38px; border-radius: 11px; background: var(--card2); border: 1px solid var(--line); color: var(--muted); }
.side-search:focus-within { border-color: var(--ion); }
.side-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; outline: none; }
.side-search kbd { font-family: inherit; font-size: 11px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 640px) { .funnel li { grid-template-columns: 1fr auto; } .funnel .bar { grid-column: 1 / -1; grid-row: 2; } }
.side-search input::placeholder { color: var(--muted); opacity: 1; }

/* ---- Admin dashboard: "Needs you" and movable widgets ---- */
.attn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.attn-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--fg); background: var(--card2); border: 1px solid var(--line); border-inline-start: 4px solid var(--muted); }
.attn-list a:hover { border-color: var(--ion); }
.attn-bad a { border-inline-start-color: var(--bad); }
.attn-warn a { border-inline-start-color: var(--warn, #d9a400); }
.attn-info a { border-inline-start-color: var(--ion); }
.attn-n { flex: none; min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; font-weight: 800; background: var(--card); }
.attn-bad .attn-n { color: var(--bad); }
.attn-warn .attn-n { color: var(--warn, #d9a400); }
.attn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; }
.attn-t strong { font-weight: 600; }
.attn-t .muted { font-size: 12px; }
.attn-go { color: var(--muted); }
.attn-clear { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--ok); }
.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.wgrid > .w-wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .wgrid { grid-template-columns: minmax(0, 1fr); } }
.w-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.w-head h2 { flex: 1; min-width: 0; }
.w-tools { display: none; gap: 4px; align-items: center; }
.dash-editing .w-tools { display: inline-flex; }
.dash-editing .w-extra { display: none; }
.dash-editing .widget { outline: 2px dashed var(--line); outline-offset: 4px; cursor: grab; }
.dash-editing .widget > :not(.w-head) { pointer-events: none; opacity: .55; }
.widget.is-dragging, .s-row.is-dragging, .s-group.is-dragging { opacity: .35; }
.w-btn { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.w-btn:hover, .w-btn:focus-visible { border-color: var(--ion); }
.w-grip, .grip { color: var(--muted); cursor: grab; user-select: none; font-size: 16px; }
.w-tray { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--glass-solid, var(--card)); border: 1px solid var(--line); box-shadow: 0 12px 30px -12px #000a; }
.w-tray .btn { margin-inline-start: auto; }
.wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wlist li { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.wlist .muted { font-size: 12px; }

/* ---- Customize page ---- */
.sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s-groups { gap: 14px; }
.s-group { display: grid; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.s-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; background: var(--card2); border: 1px solid var(--line); flex-wrap: wrap; }
.s-ghead { background: none; border: 0; padding: 2px 4px; }
.s-ghead strong { flex: 1; }
.s-label { flex: 1; min-width: 120px; font-size: 14px; }
.s-ico { display: inline-flex; color: var(--muted); }
.s-check { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.s-move { display: inline-flex; gap: 4px; }
.s-field { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.s-field legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.s-radio { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); font-size: 14px; cursor: pointer; }
.s-radio:has(input:checked) { border-color: var(--ion); box-shadow: inset 0 0 0 1px var(--ion); }
.sw { width: 14px; height: 14px; border-radius: 50%; }

/* ---- Look: accent, density, slim sidebar (Admin\UiPrefs) ---- */
.app-admin.accent-sun { --ion: #FFB547; }
.app-admin.accent-violet { --ion: #B58CFF; }
.app-admin.accent-mint { --ion: #5EE0A0; }
.app-admin.accent-rose { --ion: #FF7AA8; }
.app-admin.ui-compact .content { gap: 16px; padding-top: 18px; }
.app-admin.ui-compact .card.section { padding: 16px 18px; gap: 10px; }
.app-admin.ui-compact .stat { padding: 12px 14px; }
.app-admin.ui-compact .stat strong { font-size: 24px; }
.app-admin.ui-compact .tbl td { padding: 8px 10px; }
.app-admin.ui-compact .nav { min-height: 36px; }
@media (min-width: 1024px) {
  .app-admin.side-mini .shell { grid-template-columns: 76px minmax(0, 1fr); }
  .side-mini .side { padding-inline: 10px; }
  .side-mini .nav { justify-content: center; padding: 0; }
  .side-mini .nav-label, .side-mini .nav-title, .side-mini .side-head .chip, .side-mini .who-text, .side-mini .side-search input, .side-mini .side-search kbd, .side-mini .side-foot form + *, .side-mini .langs { display: none; }
  .side-mini .side-search { justify-content: center; padding: 0; }
  .side-mini .side-head .brand { font-size: 0; gap: 0; }
  .side-mini .nav-badge { position: absolute; top: 2px; inset-inline-end: 2px; }
}
.mailframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.w-tray[hidden], .w-tray [hidden], .wgrid > [hidden] { display: none !important; }
.wgrid { grid-auto-flow: row dense; }
.widget td.trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget td.trunc div, .widget td.trunc a { overflow: hidden; text-overflow: ellipsis; }
.s-row { flex-wrap: nowrap; }
.s-row .s-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .s-row { flex-wrap: wrap; } }
.content > .seg { align-self: flex-start; }
/* Bulk actions above admin lists */
.bulkbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--line); }
.bulkbar.has-pick { border-style: solid; border-color: var(--ion); background: color-mix(in srgb, var(--ion) 6%, transparent); }
.bulkbar .bulk-msg { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; }
.bulkbar .bulk-msg[hidden] { display: none; }