/* ═══════════════════════════════════════════════════════════════
   SECRETS HOST v5 — «الأعماق» BRAND DESIGN SYSTEM
   Brand palette extracted from official logo kit:
   navy #03395f · mint #5aeacf · blue #289df3
   Navy-depth identity (default) + paper option.
   01 — tokens, reset, typography
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* navy depths & surfaces — liquid glass over deep navy */
    --paper: #031b2e;
    --surface: rgba(13, 58, 92, .52);
    --surface-2: rgba(9, 46, 76, .46);
    --well: rgba(2, 19, 31, .55);
    --menu-surface: #082a45;
    --menu-surface-2: #0a3354;
    --menu-well: #061f35;
    --glass-blur: blur(10px) saturate(130%);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .02);

    /* text scale — brighter ramp against navy */
    --ink: #f2f8fd;
    --ink-2: #c6d9e7;
    --ink-3: #8fadc4;
    --ink-faint: #5a7b96;

    /* lines — translucent hairlines, never boxes */
    --line: rgba(141, 196, 235, .16);
    --line-soft: rgba(141, 196, 235, .08);
    --line-ink: rgba(141, 196, 235, .3);

    /* card sheen — liquid top light on glass */
    --card-grad: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 46%);

    /* brand accents — mint leads, blue supports */
    --act: #5aeacf;
    --act-deep: #8af2de;
    --act-wash: rgba(90, 234, 207, .12);
    --act-ring: rgba(90, 234, 207, .28);
    --on-act: #03395f;
    --act-grad: linear-gradient(135deg, #5aeacf, #43d6f0);
    --act-glow: 0 6px 20px -6px rgba(90, 234, 207, .45);
    --act-glow-hover: 0 8px 26px -6px rgba(90, 234, 207, .55);
    --blue: #289df3;
    --blue-wash: rgba(40, 157, 243, .14);

    /* semantic */
    --ok: #4fd99a;
    --ok-wash: rgba(79, 217, 154, .11);
    --warn: #f0bc5a;
    --warn-wash: rgba(240, 188, 90, .12);
    --err: #f0879b;
    --danger: var(--err);
    --err-wash: rgba(240, 135, 155, .11);
    --info: #4fb1f6;
    --info-wash: rgba(79, 177, 246, .12);

    /* geometry — soft, contemporary */
    --r: 16px;
    --r-sm: 10px;
    --r-lg: 20px;

    /* elevation — deep ambient, no hard edges */
    --sh-1: 0 1px 2px rgba(0, 8, 16, .25), 0 8px 24px -12px rgba(0, 8, 16, .5);
    --sh-2: 0 2px 6px rgba(0, 8, 16, .3), 0 16px 40px -16px rgba(0, 8, 16, .6);
    --sh-3: 0 24px 64px -20px rgba(0, 8, 16, .7);

    /* type */
    --f-sans: var(--sh-font-ui, "Geist Sans", system-ui, -apple-system, sans-serif);
    --f-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Consolas, monospace;

    /* motion — scarce & purposeful */
    --t: .15s ease;

    color-scheme: dark;
}

/* النهار — paper option, navy ink */
html[data-theme="light"] {
    --paper: #eef4f8;
    --surface: rgba(255, 255, 255, .62);
    --surface-2: rgba(248, 251, 253, .55);
    --well: rgba(225, 236, 243, .6);
    --menu-surface: #ffffff;
    --menu-surface-2: #f5f9fc;
    --menu-well: #eaf2f7;
    --glass-blur: blur(10px) saturate(130%);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .3);

    --ink: #062c47;
    --ink-2: #33536d;
    --ink-3: #6e8aa0;
    --ink-faint: #9fb4c4;

    --line: rgba(3, 57, 95, .13);
    --line-soft: rgba(3, 57, 95, .07);
    --line-ink: rgba(3, 57, 95, .26);
    --card-grad: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 42%);

    --act: #0bbd9b;
    --act-deep: #078a72;
    --act-wash: rgba(11, 189, 155, .09);
    --act-ring: rgba(11, 189, 155, .22);
    --on-act: #ffffff;
    --act-grad: linear-gradient(135deg, #0bbd9b, #0e9ecf);
    --act-glow: 0 6px 18px -6px rgba(11, 189, 155, .45);
    --act-glow-hover: 0 8px 24px -6px rgba(11, 189, 155, .55);
    --blue: #1786d8;
    --blue-wash: rgba(23, 134, 216, .1);

    --ok: #14855a;
    --ok-wash: rgba(20, 133, 90, .1);
    --warn: #a06a10;
    --warn-wash: rgba(160, 106, 16, .11);
    --err: #c23a55;
    --err-wash: rgba(194, 58, 85, .1);
    --info: #1d6ec0;
    --info-wash: rgba(29, 110, 192, .1);

    --sh-1: 0 1px 2px rgba(3, 57, 95, .06);
    --sh-2: 0 2px 8px rgba(3, 57, 95, .08);
    --sh-3: 0 12px 32px rgba(3, 57, 95, .12);

    color-scheme: light;
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; scrollbar-gutter: stable; }
body {
    min-height: 100%;
    font-family: var(--f-sans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html, body { width:100%; max-width:100%; overflow-x:hidden; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }
html[lang="en"] body { direction: ltr; }

/* ambient depth — soft brand glows, no texture */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1000px 540px at 85% -10%, rgba(90, 234, 207, .13), transparent 62%),
        radial-gradient(900px 560px at 6% 108%, rgba(40, 157, 243, .12), transparent 62%),
        radial-gradient(700px 480px at 45% 45%, rgba(40, 157, 243, .05), transparent 65%);
}
html[data-theme="light"] body::before {
    background:
        radial-gradient(1000px 540px at 85% -10%, rgba(11, 189, 155, .12), transparent 62%),
        radial-gradient(900px 560px at 6% 108%, rgba(23, 134, 216, .1), transparent 62%),
        radial-gradient(700px 480px at 45% 45%, rgba(23, 134, 216, .04), transparent 65%);
}

/* ── liquid glass — frosted translucent containers ── */
.vf-confirm-card, .v5-cfm-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.panel, .side-panel, .table-panel, .profile-panel, .contact-panel, .wallet-panel, .buy-panel,
.catalog-focus-card, .catalog-side-panel, .catalog-summary-card,
.v5-payment-panel, .v5-viewcart-panel, .v5-pricing-card, .v5-stepper-new,
.vf-confirm-card, .v5-cfm-card {
    box-shadow: var(--sh-1), var(--glass-edge);
}

a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
strong { font-weight: 700; }

::selection { background: var(--act); color: var(--on-act); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; border-radius: 2px; }

/* ── type helpers ── */
.mono-inline, .mono { font-family: var(--f-mono); direction: ltr; unicode-bidi: embed; }
.muted, .muted-inline { color: var(--ink-3); }

/* legacy animation hooks — neutralized (motion is scarce) */
.stagger-item { animation: none !important; }
@keyframes inkRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v5-aurora { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   V5 FULL MOTION SYSTEM — route profiles, overlays, menus, lists
   ═══════════════════════════════════════════════════════════════ */
:root {
    --motion-instant: 120ms;
    --motion-fast: 190ms;
    --motion-medium: 360ms;
    --motion-slow: 620ms;
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-in: cubic-bezier(.7, 0, .84, 0);
    --motion-spring: cubic-bezier(.22, 1.35, .36, 1);
    --motion-x: -22px;
    --motion-x-soft: -10px;
}
html[lang="en"] {
    --motion-x: 22px;
    --motion-x-soft: 10px;
}

html.v5-motion-ready { scroll-behavior: smooth; }
html.v5-theme-switching,
html.v5-theme-switching body,
html.v5-theme-switching body::before,
html.v5-theme-switching .ink-header,
html.v5-theme-switching .sidebar,
html.v5-theme-switching .panel,
html.v5-theme-switching .side-panel,
html.v5-theme-switching .table-panel,
html.v5-theme-switching .billing-row,
html.v5-theme-switching .services-v7-card {
    transition: color 520ms var(--motion-ease-out), background-color 520ms var(--motion-ease-out), background 520ms var(--motion-ease-out), border-color 520ms var(--motion-ease-out), box-shadow 520ms var(--motion-ease-out) !important;
}

/* Every route leaves before its replacement enters. */
.main {
    contain: layout style;
    will-change: opacity, transform, filter;
}
.main.is-pjax-leaving {
    pointer-events: none;
    animation: v5RouteLeave var(--motion-fast) var(--motion-ease-in) both !important;
}
.main.is-pjax-loading:not(.is-pjax-leaving) {
    opacity: .72;
    transform: scale(.997);
    filter: saturate(.9);
}
@keyframes v5RouteLeave {
    0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-7px) scale(.992); filter: blur(1.5px); }
}

/* Shared page chrome enters first. */
.main.is-pjax-enter .ink-page-head { animation: v5MotionHeader 480ms var(--motion-ease-out) both !important; }
.main.is-pjax-enter .subbar { animation: v5MotionTabs 520ms var(--motion-spring) 45ms both !important; }
@keyframes v5MotionHeader {
    from { opacity: 0; transform: translateY(-12px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes v5MotionTabs {
    0% { opacity: 0; transform: translateY(-8px) scale(.96); }
    72% { opacity: 1; transform: translateY(1px) scale(1.008); }
    100% { opacity: 1; transform: none; }
}

/* Dashboard: confident soft zoom with cascading overview blocks. */
.main.v5-motion-dashboard.is-pjax-enter { animation: v5DashboardEnter 560ms var(--motion-ease-out) both !important; }
.main.v5-motion-dashboard.is-pjax-enter :is(.dashboard-v2-hero, .dashboard-grid > *, .dashboard-v2-services, .action-card, .health-item) {
    animation: v5CardLift 520ms var(--motion-ease-out) both !important;
}
.main.v5-motion-dashboard.is-pjax-enter :is(.dashboard-grid > *, .action-card, .health-item):nth-child(2) { animation-delay: 55ms; }
.main.v5-motion-dashboard.is-pjax-enter :is(.dashboard-grid > *, .action-card, .health-item):nth-child(3) { animation-delay: 100ms; }
@keyframes v5DashboardEnter { from { opacity: 0; transform: scale(.982); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* Services and server controls: directional console-like reveal. */
.main.v5-motion-services.is-pjax-enter { animation: v5ServicesEnter 560ms var(--motion-ease-out) both !important; }
.main.v5-motion-services.is-pjax-enter :is(.services-v7-overview, .services-v7-tools, .services-v7-card, .server-console-panel, .server-resource-card, .server-spotlight) {
    animation: v5ServicesCardEnter 560ms var(--motion-ease-out) both !important;
}
.main.v5-motion-services.is-pjax-enter .services-v7-card:nth-child(2) { animation-delay: 65ms; }
.main.v5-motion-services.is-pjax-enter .services-v7-card:nth-child(3) { animation-delay: 110ms; }
@keyframes v5ServicesEnter { from { opacity: 0; transform: translateX(var(--motion-x)); filter: blur(1.5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v5ServicesCardEnter { from { opacity: 0; transform: translateX(var(--motion-x-soft)) translateY(9px); } to { opacity: 1; transform: none; } }

/* Billing: ledger settles from top, rows sweep into place. */
.main.v5-motion-invoices.is-pjax-enter { animation: v5LedgerEnter 540ms var(--motion-ease-out) both !important; }
.main.v5-motion-invoices.is-pjax-enter :is(.billing-summary, .billing-ledger, .invoice-v3-summary-card, .wallet-panel) {
    animation: v5LedgerPanelEnter 540ms var(--motion-ease-out) both !important;
}
.main.v5-motion-invoices.is-pjax-enter .billing-row {
    animation: v5LedgerRowEnter 480ms var(--motion-ease-out) both !important;
}
.main.v5-motion-invoices.is-pjax-enter .billing-row:nth-child(2) { animation-delay: 35ms; }
.main.v5-motion-invoices.is-pjax-enter .billing-row:nth-child(3) { animation-delay: 65ms; }
.main.v5-motion-invoices.is-pjax-enter .billing-row:nth-child(4) { animation-delay: 95ms; }
.main.v5-motion-invoices.is-pjax-enter .billing-row:nth-child(n+5) { animation-delay: 120ms; }
@keyframes v5LedgerEnter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes v5LedgerPanelEnter { from { opacity: 0; transform: translateY(14px) scale(.992); box-shadow: none; } to { opacity: 1; transform: none; } }
@keyframes v5LedgerRowEnter { from { opacity: 0; transform: translateX(var(--motion-x-soft)); background: var(--act-wash); } to { opacity: 1; transform: none; background: transparent; } }

/* Tickets and messages: conversation cards arrive in a lighter rhythm. */
.main.v5-motion-communications.is-pjax-enter { animation: v5CommunicationsEnter 520ms var(--motion-ease-out) both !important; }
.main.v5-motion-communications.is-pjax-enter :is(.ticket-row, .email-card, .item, .contact-panel, .side-panel) {
    animation: v5ConversationEnter 500ms var(--motion-spring) both !important;
}
.main.v5-motion-communications.is-pjax-enter :is(.ticket-row, .email-card, .item):nth-child(2) { animation-delay: 45ms; }
.main.v5-motion-communications.is-pjax-enter :is(.ticket-row, .email-card, .item):nth-child(3) { animation-delay: 85ms; }
@keyframes v5CommunicationsEnter { from { opacity: 0; transform: translateY(12px); filter: blur(1px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v5ConversationEnter { from { opacity: 0; transform: translateX(var(--motion-x-soft)) scale(.985); } to { opacity: 1; transform: none; } }

/* Account: protected-sheet feel with deliberate section reveal. */
.main.v5-motion-account.is-pjax-enter { animation: v5AccountEnter 560ms var(--motion-ease-out) both !important; }
.main.v5-motion-account.is-pjax-enter :is(.account-v6-hero, .account-v6-section, .account-manage-card, .profile-panel, .account-form) {
    animation: v5AccountSectionEnter 540ms var(--motion-ease-out) both !important;
}
.main.v5-motion-account.is-pjax-enter :is(.account-v6-section, .account-manage-card):nth-child(2) { animation-delay: 55ms; }
.main.v5-motion-account.is-pjax-enter :is(.account-v6-section, .account-manage-card):nth-child(3) { animation-delay: 95ms; }
@keyframes v5AccountEnter { from { opacity: 0; transform: translateY(14px) scale(.986); } to { opacity: 1; transform: none; } }
@keyframes v5AccountSectionEnter { from { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 16% 0 round 16px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); } }

/* Legal and resource pages: calm reading reveal. */
.main.v5-motion-reference.is-pjax-enter { animation: v5ReferenceEnter 620ms var(--motion-ease-out) both !important; }
.main.v5-motion-reference.is-pjax-enter :is(.legal-center, .legal-section, .resource-card, .kb-card, article, .panel) {
    animation: v5ReferenceBlockEnter 580ms var(--motion-ease-out) both !important;
}
@keyframes v5ReferenceEnter { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
@keyframes v5ReferenceBlockEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Domains and quotes: record rows slide in from the logical edge. */
.main.v5-motion-records.is-pjax-enter { animation: v5RecordsEnter 520ms var(--motion-ease-out) both !important; }
.main.v5-motion-records.is-pjax-enter :is(.table-panel, .table tbody tr, .domain-card, .quote-card, .item) {
    animation: v5RecordEnter 480ms var(--motion-ease-out) both !important;
}
.main.v5-motion-records.is-pjax-enter :is(.table tbody tr, .domain-card, .quote-card, .item):nth-child(2) { animation-delay: 40ms; }
.main.v5-motion-records.is-pjax-enter :is(.table tbody tr, .domain-card, .quote-card, .item):nth-child(3) { animation-delay: 75ms; }
@keyframes v5RecordsEnter { from { opacity: 0; transform: translateX(calc(var(--motion-x) * -.55)); } to { opacity: 1; transform: none; } }
@keyframes v5RecordEnter { from { opacity: 0; transform: translateX(var(--motion-x-soft)); } to { opacity: 1; transform: none; } }

/* Catalog: product canvas expands into focus. */
.main.v5-motion-catalog.is-pjax-enter { animation: v5CatalogEnter 620ms var(--motion-spring) both !important; }
.main.v5-motion-catalog.is-pjax-enter :is(.v5-journey-heading, .v5-stepper-new, .catalog-focus-card, .catalog-side-panel, .catalog-summary-card, .v5-pricing-card, .v5-family-tabs) {
    animation: v5CatalogCardEnter 560ms var(--motion-ease-out) both !important;
}
.main.v5-motion-catalog.is-pjax-enter :is(.catalog-side-panel, .catalog-summary-card, .v5-pricing-card):nth-child(2) { animation-delay: 55ms; }
.main.v5-motion-catalog.is-pjax-enter :is(.catalog-side-panel, .catalog-summary-card, .v5-pricing-card):nth-child(3) { animation-delay: 100ms; }
@keyframes v5CatalogEnter { from { opacity: 0; transform: scale(.968) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v5CatalogCardEnter { from { opacity: 0; transform: translateY(18px) scale(.982); } to { opacity: 1; transform: none; } }

@keyframes v5CardLift { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* Menus and expandable groups animate in both directions. */
.utility-menu .dropdown-panel,
.nav-more .nav-more-body {
    transform-origin: top center;
    will-change: opacity, transform, clip-path;
}
.utility-menu.is-open .dropdown-panel,
.utility-menu[open]:not(.is-motion-closing) .dropdown-panel,
.nav-more.is-open .nav-more-body,
.nav-more[open]:not(.is-motion-closing) .nav-more-body {
    animation: v5MenuOpen 260ms var(--motion-spring) both !important;
}
.utility-menu.is-motion-closing .dropdown-panel,
.nav-more.is-motion-closing .nav-more-body {
    animation: v5MenuClose 180ms var(--motion-ease-in) both !important;
    pointer-events: none;
}
@keyframes v5MenuOpen {
    from { opacity: 0; transform: translateY(-8px) scale(.965); clip-path: inset(0 0 24% 0 round 12px); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 12px); }
}
@keyframes v5MenuClose {
    from { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 12px); }
    to { opacity: 0; transform: translateY(-6px) scale(.97); clip-path: inset(0 0 30% 0 round 12px); }
}

/* Modal backdrop, card and toast all enter and leave as one scene. */
.vf-confirm-backdrop,
.v5-cfm-backdrop,
.account-twofa-backdrop { opacity: 0; transition: opacity 260ms ease, backdrop-filter 360ms ease; }
.vf-confirm-shell.is-open .vf-confirm-backdrop,
.v5-cfm-shell.is-open .v5-cfm-backdrop,
.account-twofa-modal.is-open .account-twofa-backdrop { opacity: 1; }
.vf-confirm-shell.is-closing .vf-confirm-backdrop,
.v5-cfm-shell.is-closing .v5-cfm-backdrop,
.account-twofa-modal.is-closing .account-twofa-backdrop { opacity: 0; }
.vf-confirm-shell.is-open .vf-confirm-card,
.v5-cfm-shell.is-open .v5-cfm-card,
.account-twofa-modal.is-open .account-twofa-dialog { animation: v5DialogOpen 420ms var(--motion-spring) both !important; }
.vf-confirm-shell.is-closing .vf-confirm-card,
.v5-cfm-shell.is-closing .v5-cfm-card,
.account-twofa-modal.is-closing .account-twofa-dialog { animation: v5DialogClose 190ms var(--motion-ease-in) both !important; }
@keyframes v5DialogOpen { from { opacity: 0; transform: translateY(22px) scale(.94); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v5DialogClose { to { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(1px); } }
.v5-cfm-toast.is-open i { animation: v5ToastIcon 420ms var(--motion-spring) both; }
@keyframes v5ToastIcon { 0% { transform: scale(.45) rotate(-18deg); opacity: 0; } 75% { transform: scale(1.14) rotate(2deg); opacity: 1; } 100% { transform: none; } }

/* A successful invoice cancellation leaves the ledger visibly, then the fresh ledger enters. */
.billing-row {
    transform-origin: center;
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-medium) var(--motion-ease-out), opacity var(--motion-fast) ease;
}
.billing-row.is-cancelled-leaving {
    pointer-events: none;
    overflow: hidden;
    max-height: var(--v5-motion-height, 160px);
    animation: v5InvoiceRowLeave 620ms var(--motion-ease-out) both !important;
}
@keyframes v5InvoiceRowLeave {
    0% { max-height: var(--v5-motion-height, 160px); opacity: 1; transform: translateX(0) scale(1); filter: blur(0); background: transparent; }
    30% { opacity: 1; transform: translateX(calc(var(--motion-x-soft) * .45)) scale(.99); background: var(--ok-wash); border-color: color-mix(in srgb, var(--ok) 38%, var(--line)); }
    62% { max-height: var(--v5-motion-height, 160px); opacity: .12; transform: translateX(var(--motion-x)) scale(.975); filter: blur(2px); }
    100% { max-height: 0; min-height: 0; margin-block: 0; padding-block: 0; border-width: 0; opacity: 0; transform: translateX(var(--motion-x)) scale(.96); filter: blur(3px); }
}

/* Notification and dynamically inserted content never pops. */
.notif-item.is-removing {
    overflow: hidden;
    max-height: var(--v5-motion-height, 92px);
    animation: v5ListItemLeave 380ms var(--motion-ease-out) both;
}
@keyframes v5ListItemLeave {
    0% { max-height: var(--v5-motion-height, 92px); opacity: 1; transform: translateX(0); }
    65% { max-height: var(--v5-motion-height, 92px); opacity: 0; transform: translateX(var(--motion-x)); }
    100% { max-height: 0; opacity: 0; transform: translateX(var(--motion-x)); border-width: 0; }
}
.v5-motion-added { animation: v5MotionAdded 460ms var(--motion-spring) both !important; }
@keyframes v5MotionAdded { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Micro-interactions: controls acknowledge hover, press, focus and state changes. */
:is(.btn, button:not(.sidebar-backdrop), .billing-row-action, .services-v7-action, .services-v7-filter, .dropdown-link, .nav-item, .email-card, .action-card, .health-item) {
    will-change: transform;
}
:is(.btn, button:not(.sidebar-backdrop), .billing-row-action, .services-v7-action, .services-v7-filter):not(:disabled):hover {
    transform: translateY(-2px);
}
:is(.btn, button:not(.sidebar-backdrop), .billing-row-action, .services-v7-action, .services-v7-filter):not(:disabled):active {
    transform: translateY(0) scale(.955);
    transition-duration: var(--motion-instant);
}
:is(.btn, button, .billing-row-action, .services-v7-action):hover > i:first-child { transform: scale(1.12) rotate(-3deg); }
:is(.btn, button, .billing-row-action, .services-v7-action) > i:first-child { transition: transform var(--motion-medium) var(--motion-spring), opacity var(--motion-fast) ease; }
input, textarea, select { transition: border-color var(--motion-fast) ease, box-shadow var(--motion-medium) var(--motion-ease-out), background var(--motion-fast) ease, transform var(--motion-fast) ease; }
input:focus, textarea:focus, select:focus { transform: translateY(-1px); }
.badge, .nav-count, .ink-nav-count, .notif-dot { transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-medium) var(--motion-spring), opacity var(--motion-fast) ease; }

@media (prefers-reduced-motion: reduce) {
    html.v5-motion-ready { scroll-behavior: auto; }
    .main,
    .main *,
    .utility-menu *,
    .nav-more *,
    .vf-confirm-shell *,
    .v5-cfm-shell *,
    .account-twofa-modal *,
    .billing-row,
    .notif-item,
    .v5-motion-added {
        animation: none !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}
/* ═══ INK 02 — primitives: buttons, badges, fields, tables, panels ═══ */

/* ── buttons: flat ink, sharp, instant ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: rgba(141, 196, 235, .06);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn:hover { border-color: var(--line-ink); background: rgba(141, 196, 235, .12); }
.btn:active { transform: scale(.98); }
html[data-theme="light"] .btn:not(.primary):not(.success):not(.warning):not(.danger) { background: rgba(3, 57, 95, .04); }
html[data-theme="light"] .btn:not(.primary):not(.success):not(.warning):not(.danger):hover { background: rgba(3, 57, 95, .08); }
.btn i { font-size: 12px; color: var(--ink-3); transition: color var(--t); }
.btn:hover i { color: var(--ink); }

.btn.primary {
    background: var(--act-grad);
    border-color: transparent;
    color: var(--on-act);
    font-weight: 700;
    box-shadow: var(--act-glow);
}
.btn.primary i { color: inherit; opacity: .8; }
.btn.primary:hover { background: var(--act-grad); border-color: transparent; color: var(--on-act); box-shadow: var(--act-glow-hover); filter: brightness(1.08); }

.btn.success { border-color: var(--ok); color: var(--ok); background: var(--surface); }
.btn.success:hover { background: var(--ok); color: #fff; }
.btn.success:hover i { color: #fff; }
.btn.warning { border-color: var(--warn); color: var(--warn); background: var(--surface); }
.btn.warning:hover { background: var(--warn); color: #fff; }
.btn.warning:hover i { color: #fff; }
.btn.danger { border-color: var(--err); color: var(--err); background: var(--surface); }
.btn.danger:hover { background: var(--err); color: #fff; }
.btn.danger:hover i { color: #fff; }
.btn.success i, .btn.warning i, .btn.danger i { color: inherit; }

.btn.soft { border-color: transparent; background: var(--well); color: var(--ink-2); }
.btn.soft:hover { background: var(--line-soft); color: var(--ink); }
.btn.compact { min-height: 31px; padding: 0 13px; font-size: 12px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }

/* ── badges: typographic, bordered, uppercase feel ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.6;
    white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.badge.success { border-color: rgba(26,122,77,.35); color: var(--ok); background: var(--ok-wash); }
.badge.success::before { background: var(--ok); }
.badge.warning { border-color: rgba(148,99,18,.35); color: var(--warn); background: var(--warn-wash); }
.badge.warning::before { background: var(--warn); }
.badge.danger { border-color: rgba(178,58,78,.35); color: var(--err); background: var(--err-wash); }
.badge.danger::before { background: var(--err); }
.badge.info { border-color: rgba(37,99,168,.35); color: var(--info); background: var(--info-wash); }
.badge.info::before { background: var(--info); }
.badge.neutral { color: var(--ink-3); }

/* ── fields ── */
label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
textarea, select, .input {
    width: 100%;
    min-height: 40px;
    padding: 8px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
input:focus, textarea:focus, select:focus {
    border-color: var(--act);
    box-shadow: 0 0 0 3px var(--act-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237c8894' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-inline-end: 30px;
}
html[lang="en"] select { background-position: right 12px center; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--act); width: 15px; height: 15px; min-height: 0; }
.form-field { display: grid; gap: 6px; }

/* ── panels: layered surface, sheen, ambient shadow ── */
.panel, .side-panel, .table-panel, .profile-panel, .contact-panel, .wallet-panel, .buy-panel {
    background-color: var(--surface);
    background-image: var(--card-grad);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    box-shadow: var(--sh-1);
    position: relative;
    z-index: 1;
}

/* section head — clean, no rule line */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.section-head strong {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}
.section-head span { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.section-head a { color: var(--act); font-weight: 700; font-size: 12px; }
.section-head a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── tables: editorial density, hairline rows ── */
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th {
    text-align: start;
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-2);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: var(--surface-2); }
.cell-title { font-weight: 700; color: var(--ink); }
.table .mono-inline { font-size: 12px; color: var(--ink-2); }

.table tbody tr.row-danger { background: var(--err-wash); }
.table tbody tr.row-warn { background: var(--warn-wash); }
.table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table th.is-sortable i { font-size: 10px; opacity: .5; margin-inline-start: 4px; }
.table th.is-sortable:hover { color: var(--ink); }
.table th.is-sorted-asc i, .table th.is-sorted-desc i { opacity: 1; color: var(--act); }
.table th.is-sorted-asc i:before { content: "\f0de"; }
.table th.is-sorted-desc i:before { content: "\f0dd"; }
.svc-ip-cell { display: inline-flex; align-items: center; gap: 6px; }
.svc-row-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.svc-row-actions-secondary { color: var(--ink-3); font-weight: 600; }

.svc-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.svc-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t), color var(--t), background var(--t);
}
.svc-filter-chip span { font-size: 11px; color: var(--ink-3); }
.svc-filter-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.svc-filter-chip.is-active { background: var(--act); border-color: var(--act); color: var(--on-act); }
.svc-filter-chip.is-active span { color: var(--on-act); opacity: .85; }
html[data-theme="light"] .svc-filter-chip.is-active { background: var(--act-deep); border-color: var(--act-deep); }

/* ═══ Services V7 — one clear next step per server ═══ */
.services-v7 {
    display: grid;
    gap: 16px;
    min-width: 0;
}
.services-v7-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 650;
}
.services-v7-notice.success { border-color: rgba(34,197,94,.34); color: var(--ok); }
.services-v7-notice.info { border-color: rgba(34,211,238,.3); color: var(--act); }
.services-v7-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
}
.services-v7-overview-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.services-v7-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(245,158,11,.38);
    border-radius: 50%;
    background: var(--warn-wash);
    color: var(--warn);
    font-size: 17px;
}
.services-v7-overview.is-clear .services-v7-overview-icon {
    border-color: rgba(34,197,94,.34);
    background: rgba(34,197,94,.09);
    color: var(--ok);
}
.services-v7-overview.is-progress .services-v7-overview-icon {
    border-color: rgba(34,211,238,.3);
    background: var(--act-wash);
    color: var(--act);
}
.services-v7-overview-copy { min-width: 0; }
.services-v7-overview-copy strong {
    display: block;
    color: var(--ink);
    font-size: clamp(16px, 1.45vw, 19px);
    font-weight: 800;
    line-height: 1.35;
}
.services-v7-overview-copy p {
    margin: 4px 0 0;
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 1.65;
}
.services-v7-counts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.services-v7-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}
.services-v7-count strong { color: var(--ink); font-size: 13px; }
.services-v7-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.services-v7-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.services-v7-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
}
.services-v7-filter:hover { border-color: var(--act); color: var(--ink); }
.services-v7-filter:active { transform: scale(.98); }
.services-v7-filter[aria-pressed="true"] {
    border-color: var(--act);
    background: var(--act);
    color: var(--on-act);
}
.services-v7-filter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink-2);
    font-size: 11px;
}
.services-v7-filter[aria-pressed="true"] span { background: rgba(0,0,0,.16); color: var(--on-act); }
.services-v7-tool-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
.services-v7-cleanup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid rgba(239, 130, 153, .34);
    border-radius: 12px;
    color: #f3a0b2;
    background: rgba(239, 130, 153, .075);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--t), color var(--t), background var(--t);
}
.services-v7-cleanup:hover {
    border-color: rgba(239, 130, 153, .62);
    color: #ffc0cd;
    background: rgba(239, 130, 153, .12);
}
.services-v7-cleanup span {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    padding-inline: 5px;
    border-radius: 999px;
    background: rgba(239, 130, 153, .14);
}
.services-v7-cleanup.is-restore {
    border-color: rgba(90, 234, 207, .3);
    color: var(--act);
    background: rgba(90, 234, 207, .07);
}
.services-v7-cleanup.is-restore:hover {
    border-color: var(--act);
    color: var(--ink);
    background: rgba(90, 234, 207, .11);
}
.services-v7-bulk-cancel { margin: 0; }
.services-v7-bulk-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid rgba(239, 130, 153, .38);
    border-radius: 12px;
    color: #f3a0b2;
    background: rgba(239, 130, 153, .075);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
}
.services-v7-bulk-cancel-btn:hover {
    border-color: rgba(239, 130, 153, .7);
    color: #ffc0cd;
    background: rgba(239, 130, 153, .13);
}
.services-v7-bulk-cancel-btn:active { transform: scale(.98); }
.services-v7-bulk-cancel-btn span {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    padding-inline: 5px;
    border-radius: 999px;
    background: rgba(239, 130, 153, .15);
}
.services-v7-search {
    position: relative;
    flex: 0 1 280px;
    min-width: 220px;
}
.services-v7-search i {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
}
.services-v7-search input {
    width: 100%;
    min-height: 44px;
    padding-inline-start: 40px;
}
.services-v7-list {
    display: grid;
    gap: 10px;
}
.services-v7-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(185px, .95fr) minmax(0, 1.5fr) minmax(148px, .55fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
    transition: border-color var(--t), background var(--t), transform var(--t);
}
.services-v7-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--ink-3);
}
.services-v7-card[data-tone="success"]::before { background: var(--ok); }
.services-v7-card[data-tone="warning"]::before { background: var(--warn); }
.services-v7-card[data-tone="danger"]::before { background: var(--err); }
.services-v7-card[data-tone="info"]::before { background: var(--act); }
.services-v7-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.services-v7-card.is-cancelled-leaving {
    pointer-events: none;
    overflow: hidden;
    animation: services-v7-order-cancelled 500ms cubic-bezier(.22, 1, .36, 1) calc(var(--cancel-order-index, 0) * 45ms) both;
}
@keyframes services-v7-order-cancelled {
    0% {
        max-height: var(--cancel-order-height, 420px);
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    45% {
        opacity: .35;
        transform: translateY(-5px) scale(.985);
        filter: blur(1px);
    }
    100% {
        max-height: 0;
        margin-block: 0;
        padding-block: 0;
        border-width: 0;
        opacity: 0;
        transform: translateY(-12px) scale(.97);
        filter: blur(3px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .services-v7-card.is-cancelled-leaving {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }
}
.services-v7-identity { min-width: 0; }
.services-v7-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.services-v7-name {
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}
.services-v7-name:hover h2 { color: var(--act); }
.services-v7-name h2 {
    margin: 0;
    color: inherit;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: color var(--t);
}
.services-v7-name p {
    margin: 5px 0 0;
    color: var(--ink-3);
    font-size: 11.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.services-v7-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.services-v7-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.services-v7-state.success { border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.08); color: var(--ok); }
.services-v7-state.warning { border-color: rgba(245,158,11,.34); background: var(--warn-wash); color: var(--warn); }
.services-v7-state.danger { border-color: rgba(248,113,113,.34); background: var(--err-wash); color: var(--err); }
.services-v7-state.info { border-color: rgba(34,211,238,.28); background: var(--act-wash); color: var(--act); }
.services-v7-message {
    margin: 10px 0 0;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.65;
}
.services-v7-billing-alert {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin-top: 9px;
    color: var(--warn);
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.5;
}
.services-v7-billing-alert.danger { color: var(--err); }
.services-v7-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
    margin: 0;
}
.services-v7-fact { min-width: 0; }
.services-v7-fact dt {
    margin: 0 0 5px;
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 650;
}
.services-v7-fact dd {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
}
.services-v7-fact dd small {
    display: block;
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 550;
}
.services-v7-fact-stack { display: block !important; }
.services-v7-ip { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.services-v7-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-block: -9px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background var(--t);
}
.services-v7-copy:hover { border-color: var(--line); background: var(--well); color: var(--act); }
.services-v7-copy.v5-copy-flash { color: var(--ok); }
.services-v7-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
.services-v7-action .btn {
    width: 100%;
    min-height: 44px;
    padding-inline: 14px;
    white-space: normal;
    text-align: center;
}
.services-v7-action.is-stacked {
    flex-direction: column;
    gap: 8px;
}
.services-v7-action.is-stacked .btn {
    flex: 1 1 0;
    height: auto;
}
.services-v7-action .services-v7-cancel-order { width: 100%; margin: 0; }
.services-v7-action.is-stacked .services-v7-cancel-order { flex: 1 1 0; }
.services-v7-action .services-v7-cancel-btn {
    border-color: rgba(239, 130, 153, .42);
    color: #f3a0b2;
    background: rgba(239, 130, 153, .07);
}
.services-v7-action .services-v7-cancel-btn:hover {
    border-color: rgba(239, 130, 153, .72);
    color: #ffc0cd;
    background: rgba(239, 130, 153, .13);
}
.services-v7-review-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid rgba(244, 187, 92, .42);
    border-radius: var(--r-sm);
    background: rgba(244, 187, 92, .07);
    color: #f5cc87;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background var(--t);
}
.services-v7-review-cancel-btn:hover {
    border-color: rgba(244, 187, 92, .72);
    background: rgba(244, 187, 92, .13);
    color: #ffe0aa;
}
.services-v7-review-cancel-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    min-height: 23px;
    padding-inline: 6px;
    border-radius: 999px;
    background: rgba(244, 187, 92, .16);
    font-size: 12px;
}
.services-v7-action .btn.warning { border-color: var(--warn); background: var(--warn); color: #fff; }
.services-v7-action .btn.danger { border-color: var(--err); background: var(--err); color: #fff; }
.services-v7-action .btn.info { border-color: var(--act); background: var(--act); color: var(--on-act); }
.services-v7-empty-filter,
.services-v7-empty-state {
    padding: 34px 22px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    background: var(--surface);
    text-align: center;
}
.services-v7-empty-state i,
.services-v7-empty-filter i { display: block; margin-bottom: 12px; color: var(--act); font-size: 26px; }
.services-v7-empty-state h2,
.services-v7-empty-filter strong { display: block; margin: 0; color: var(--ink); font-size: 18px; }
.services-v7-empty-state p,
.services-v7-empty-filter p { max-width: 510px; margin: 8px auto 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.75; }
.services-v7-empty-state .btn { min-height: 44px; margin-top: 16px; }
.services-v7-empty-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 16px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 650;
}
@media (max-width: 1180px) {
    .services-v7-card { grid-template-columns: minmax(190px, .9fr) minmax(0, 1.25fr) minmax(140px, .55fr); gap: 14px; }
    .services-v7-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-v7-fact:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .services-v7-overview { align-items: flex-start; flex-direction: column; }
    .services-v7-counts { justify-content: flex-start; }
    .services-v7-tools { align-items: stretch; flex-direction: column; }
    .services-v7-tool-actions { justify-content: flex-start; width: 100%; }
    .services-v7-search { flex-basis: auto; width: 100%; min-width: 0; }
    .services-v7-card { grid-template-columns: minmax(0, 1fr) minmax(145px, .36fr); }
    .services-v7-identity, .services-v7-facts { grid-column: 1; }
    .services-v7-action { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
    .services-v7-action .btn { height: 100%; }
    .services-v7-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .services-v7-fact:last-child { grid-column: auto; }
}
@media (max-width: 760px) {
    .services-v7 { gap: 12px; }
    .services-v7-overview { gap: 14px; padding: 15px; }
    .services-v7-overview-main { align-items: flex-start; }
    .services-v7-overview-icon { flex-basis: 40px; width: 40px; height: 40px; }
    .services-v7-counts { gap: 6px; }
    .services-v7-count { min-height: 30px; padding: 4px 9px; }
    .services-v7-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .services-v7-filter { width: 100%; padding-inline: 10px; }
    .services-v7-filter:first-child:last-child { grid-column: 1 / -1; }
    .services-v7-tool-actions { align-items: stretch; flex-direction: column; }
    .services-v7-cleanup { width: 100%; }
    .services-v7-bulk-cancel,
    .services-v7-bulk-cancel-btn { width: 100%; }
    .services-v7-card { display: block; padding: 16px; }
    .services-v7-title-row { align-items: center; }
    .services-v7-name h2 { font-size: 16px; }
    .services-v7-message { margin-top: 8px; }
    .services-v7-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin-top: 14px;
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
    }
    .services-v7-fact { padding: 12px 0; }
    .services-v7-fact:nth-child(odd) { padding-inline-end: 12px; border-inline-end: 1px solid var(--line-soft); }
    .services-v7-fact:nth-child(even) { padding-inline-start: 12px; }
    .services-v7-fact:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); border-inline-end: 0; }
    .services-v7-action { margin-top: 14px; }
    .services-v7-action .btn { min-height: 46px; }
    .services-v7-billing-alert { display: flex; }
}
@media (max-width: 390px) {
    .services-v7-title-row { align-items: flex-start; flex-direction: column; }
    .services-v7-state { align-self: flex-start; }
    .services-v7-filters { grid-template-columns: 1fr; }
    .services-v7-fact dd { font-size: 12px; }
}

/* ── kv list ── */
.kv-list { display: grid; }
.kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row span { color: var(--ink-3); }
.kv-row strong { color: var(--ink); font-weight: 600; text-align: end; }
.kv-link { color: var(--act); font-weight: 700; font-size: 12.5px; }
.kv-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="light"] .kv-link { color: var(--act-deep); }

/* ── lists ── */
.list { display: grid; gap: 0; }
.list .item {
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    gap: 4px;
}
.list .item:last-child { border-bottom: 0; }
.item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.item-top strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.list .item > span, .list .item p { font-size: 12.5px; color: var(--ink-3); }
.email-section-grid { grid-template-columns: minmax(0, 1fr) 310px; align-items: start; }
.email-list { display: grid; gap: 10px; }
.email-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.025); color: inherit; text-decoration: none; transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t); }
.email-card:hover { border-color: var(--act-ring); background: rgba(90,234,207,.055); transform: translateY(-1px); box-shadow: var(--sh-1); }
.email-card-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--info-wash); color: var(--info); font-size: 17px; }
.email-card.danger .email-card-icon { background: var(--err-wash); color: var(--err); }
.email-card.warning .email-card-icon { background: var(--warn-wash); color: var(--warn); }
.email-card.success .email-card-icon { background: var(--ok-wash); color: var(--ok); }
.email-card-main { min-width: 0; display: grid; gap: 7px; }
.email-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.email-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.email-card-title strong { color: var(--ink); font-size: 14px; line-height: 1.35; }
.email-card-summary { color: var(--ink-2); font-size: 12.7px; line-height: 1.65; }
.email-card-action { width: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.04); color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.email-card-action i { color: var(--act); }
.email-card-preview { color: var(--ink-3); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; }
.email-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.email-pagination-pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.email-page-link { min-width: 34px; height: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--ink-2); text-decoration: none; font-size: 12px; font-weight: 800; }
.email-page-link:hover { border-color: var(--act-ring); color: var(--act); }
.email-page-link.active { background: var(--act); border-color: var(--act); color: var(--on-act); box-shadow: var(--act-glow); }
.email-page-link.disabled { opacity: .45; pointer-events: none; }
.email-guide-list { display: grid; gap: 8px; }
.email-guide-pill { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 12px; }
.email-guide-pill i { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--info-wash); color: var(--info); }
.email-guide-pill.danger i { background: var(--err-wash); color: var(--err); }
.email-guide-pill.warning i { background: var(--warn-wash); color: var(--warn); }
.email-guide-pill.success i { background: var(--ok-wash); color: var(--ok); }
.email-detail-hero { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--r); background: linear-gradient(135deg, rgba(90,234,207,.10), rgba(40,157,243,.045)); margin-bottom: 16px; }
.email-detail-hero > i { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--info-wash); color: var(--info); font-size: 22px; }
.email-detail-hero.danger > i { background: var(--err-wash); color: var(--err); }
.email-detail-hero.warning > i { background: var(--warn-wash); color: var(--warn); }
.email-detail-hero.success > i { background: var(--ok-wash); color: var(--ok); }
.email-detail-copy { display: grid; gap: 8px; min-width: 0; }
.email-detail-copy h3 { color: var(--ink); font-size: 19px; line-height: 1.35; }
.email-detail-copy p { color: var(--ink-2); line-height: 1.75; font-size: 13px; }
.email-detail-action { color: var(--act); font-size: 12.5px; font-weight: 800; }
.email-original-panel { border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.025); padding: 12px 14px; }
.email-original-panel summary { cursor: pointer; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.email-original-text { color: var(--ink-3); font-size: 12.5px; line-height: 1.9; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1080px) { .email-section-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .email-card, .email-detail-hero { grid-template-columns: 1fr; } .email-card-top { align-items: flex-start; flex-direction: column; } }

/* ── empty state ── */
.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    border: 1px dashed var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
    display: grid;
    gap: 6px;
    justify-items: center;
}
.empty i { font-size: 20px; color: var(--ink-faint); }
.empty strong { color: var(--ink-2); font-size: 14px; }
.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ── alerts / inline messages — full tinted border, leading icon ── */
.v5-alert, .server-inline-message, .soft-note, .plan-note-banner, .info-box {
    padding: 12px 15px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--ink-2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.v5-alert i, .server-inline-message i, .soft-note i, .plan-note-banner i { margin-top: 3px; color: var(--ink-3); }
.v5-alert-success, .server-inline-message.success { border-color: rgba(79, 217, 154, .4); background: var(--ok-wash); color: var(--ok); }
.v5-alert-error, .server-inline-message.error, .server-inline-message.danger { border-color: rgba(240, 135, 155, .4); background: var(--err-wash); color: var(--err); }
.v5-alert-info, .server-inline-message.info { border-color: rgba(79, 177, 246, .4); background: var(--info-wash); color: var(--info); }
.server-inline-message.warning, .plan-note-banner { border-color: rgba(240, 188, 90, .4); background: var(--warn-wash); color: var(--warn); }
.v5-alert-success i, .server-inline-message.success i { color: var(--ok); }
.v5-alert-error i, .server-inline-message.error i, .server-inline-message.danger i { color: var(--err); }
.v5-alert-info i, .server-inline-message.info i { color: var(--info); }
.server-inline-message.warning i, .plan-note-banner i { color: var(--warn); }

/* ── dropdowns ── */
.utility-menu { position: relative; }
.utility-menu summary { list-style: none; }
.utility-menu summary::-webkit-details-marker { display: none; }
.utility-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--t), background var(--t);
}
.utility-pill:hover { border-color: var(--ink-3); }
.utility-menu[open] .utility-pill { border-color: var(--ink); color: var(--ink); }
.utility-pill-icon {
    width: 19px; height: 19px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--well);
    color: var(--ink-2);
    font-size: 10px;
    font-weight: 800;
}
.utility-pill-caret { font-size: 8px; opacity: .6; transition: transform var(--t); }
.utility-menu[open] .utility-pill-caret { transform: rotate(180deg); }
.dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 190px;
    padding: 6px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-ink);
    background: var(--menu-surface);
    box-shadow: var(--sh-3), 0 0 0 1px rgba(255,255,255,.04) inset;
    z-index: 80;
    display: grid;
    gap: 1px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
details.utility-menu:not([open]) > .dropdown-panel,
details.nav-more:not([open]) > .nav-more-body {
    display: none !important;
}
.dropdown-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
    transition: background var(--t), color var(--t);
}
.dropdown-link:hover { background: var(--menu-well); color: var(--ink); }
.dropdown-link.active { color: var(--act); font-weight: 700; background: var(--menu-surface-2); }
.notif-bell { position: relative; width: 34px; padding: 0; justify-content: center; font-size: 13px; }
.notif-dot {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--err);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}
.notif-panel { width: 350px; max-width: calc(100vw - 32px); padding: 0; gap: 0; overflow: hidden; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--menu-surface-2); }
.notif-panel-head strong { font-size: 13px; color: var(--ink); }
.notif-dismiss-all { background: none; border: 0; color: var(--ink-3); font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px; }
.notif-dismiss-all:hover { color: var(--act-deep); }
.notif-list { max-height: 380px; overflow-y: auto; display: grid; }
.notif-empty { border: 0; border-radius: 0; padding: 28px 16px; }
.notif-item { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--line-soft); transition: background var(--t); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--menu-well); }
.notif-item-link { flex: 1; display: flex; align-items: flex-start; gap: 10px; padding: 11px 8px 11px 14px; min-width: 0; text-decoration: none; }
html[lang="en"] .notif-item-link { padding: 11px 14px 11px 8px; }
.notif-item-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12.5px;
}
.notif-item-icon.tone-danger { background: var(--err-wash); color: var(--err); }
.notif-item-icon.tone-warning { background: var(--warn-wash); color: var(--warn); }
.notif-item-icon.tone-info { background: var(--info-wash); color: var(--info); }
.notif-item-copy { display: grid; gap: 2px; min-width: 0; }
.notif-item-copy strong { font-size: 12.5px; color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-copy span { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-dismiss {
    flex-shrink: 0;
    width: 30px;
    align-self: center;
    margin-inline-end: 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink-faint);
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t), background var(--t), color var(--t);
}
.notif-item:hover .notif-item-dismiss { opacity: 1; }
.notif-item-dismiss:hover { background: var(--surface-2); color: var(--err); }
.notif-item.is-removing { opacity: 0; transform: scale(.97); transition: opacity var(--t), transform var(--t); }
@media (max-width: 480px) {
    .notif-panel { position: fixed; inset-inline: 12px; top: 60px; width: auto; }
}
.utility-option-icon {
    width: 19px; height: 19px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--well);
    font-size: 10px;
    font-weight: 800;
}

/* ── usage bars ── */
.usage-card { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.usage-card:last-child { border-bottom: 0; }
.usage-card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.usage-card-head strong { color: var(--ink); font-weight: 700; }
.usage-meta { color: var(--ink-3); font-size: 11.5px; font-family: var(--f-mono); }
.usage-bar { height: 5px; border-radius: 0; background: var(--well); overflow: hidden; }
.usage-fill { height: 100%; background: var(--act); transition: width .5s ease; }
.usage-fill.warning { background: var(--warn); }
.usage-fill.danger { background: var(--err); }
.usage-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 26px; }

/* ── skeleton ── */
.v52-skeleton {
    display: inline-block;
    min-width: 60px;
    height: 13px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--well) 25%, var(--line-soft) 50%, var(--well) 75%);
    background-size: 200% 100%;
    animation: inkShimmer 1.4s linear infinite;
}
@keyframes inkShimmer { to { background-position: -200% 0; } }

/* ── copy btn ── */
.v5-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-3);
    font-size: 11px;
    cursor: pointer;
    transition: border-color var(--t), color var(--t);
}
.v5-copy-btn:hover { border-color: var(--act); color: var(--act); }

.currency-symbol-riyal { font-family: var(--f-sans); --riyal-width: .9em; --riyal-height: 1em; --riyal-shift: -.08em; margin-inline-start: .1em; }
.v5-amount .currency-symbol-riyal, .v5-pricing-price .currency-symbol-riyal { --riyal-width: .82em; --riyal-height: .92em; --riyal-shift: -.06em; }
/* ═══ INK 03 — shell: top header, page head, tabs, drawer, mobile ═══ */

.layout { display: block; min-height: 100vh; position: relative; z-index: 1; }
.main { display: block; transition: opacity .16s ease; }
.main.is-pjax-loading { opacity: .72; pointer-events: none; cursor: progress; }
.main.is-pjax-enter { animation: v5PageIn .24s cubic-bezier(.22, 1, .36, 1) both; }
.main.is-pjax-enter .table-panel, .main.is-pjax-enter .side-panel, .main.is-pjax-enter .metric, .main.is-pjax-enter .item, .main.is-pjax-enter .account-manage-card, .main.is-pjax-enter .server-resource-card { animation: v5RiseIn .28s cubic-bezier(.22, 1, .36, 1) both; }
.main.is-pjax-enter .side-panel:nth-child(2), .main.is-pjax-enter .item:nth-child(2), .main.is-pjax-enter .metric:nth-child(2) { animation-delay: 35ms; }
.main.is-pjax-enter .side-panel:nth-child(3), .main.is-pjax-enter .item:nth-child(3), .main.is-pjax-enter .metric:nth-child(3) { animation-delay: 70ms; }
@keyframes v5PageIn { from { opacity: .72; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v5RiseIn { from { opacity: .72; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── global header: sticky, hairline ink rule ── */
.ink-header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
}
.ink-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
    height: 62px;
    display: flex;
    align-items: center;
    gap: 22px;
}
.ink-burger {
    display: none;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: 14px;
    flex-shrink: 0;
}
.ink-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.ink-brand img { height: 30px; width: auto; }

/* primary nav — typographic underline tabs */
.ink-nav { display: flex; align-items: stretch; gap: 2px; height: 62px; }
.ink-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    position: relative;
    transition: color var(--t);
    white-space: nowrap;
}
.ink-nav-link i { font-size: 12px; }
.ink-nav-link:hover { color: var(--ink); }
.ink-nav-link.active { color: var(--ink); font-weight: 700; }
.ink-nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline: 10px;
    height: 2px;
    background: var(--act);
}
.ink-nav-count {
    min-width: 18px; height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--f-mono);
}
.ink-nav-link.active .ink-nav-count { background: var(--act); color: var(--on-act); }

/* more menu in nav */
.ink-nav-more { position: relative; display: flex; }
.ink-nav-more > summary { list-style: none; cursor: pointer; }
.ink-nav-more > summary::-webkit-details-marker { display: none; }
.ink-nav-more .dropdown-panel { top: calc(100% - 8px); inset-inline-end: auto; inset-inline-start: 0; }

.ink-header-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

/* theme toggle — minimal square switch */
.theme-toggle {
    width: 38px; height: 38px;
    min-width: 38px;
    max-width: 38px;
    flex: 0 0 38px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-2);
    font-size: 13px;
    transition: border-color var(--t), color var(--t);
    position: relative;
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.theme-toggle-thumb { display: contents; }
.theme-icon-moon { display: none; }
.theme-icon-sun { display: block; }
html:not([data-theme="light"]) .theme-icon-moon { display: block; }
html:not([data-theme="light"]) .theme-icon-sun { display: none; }

/* user chip in header */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 5px 4px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color var(--t);
}
html[lang="en"] .user-chip { padding: 4px 13px 4px 5px; }
.user-chip:hover { border-color: var(--ink-3); }
.user-chip-copy { display: grid; gap: 0; text-align: end; }
html[lang="en"] .user-chip-copy { text-align: start; }
.user-chip-copy strong { font-size: 11.5px; font-weight: 700; color: var(--ink); line-height: 1.3; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-copy span { font-size: 9.5px; color: var(--ink-3); font-family: var(--f-mono); line-height: 1.3; }
.user-chip .identity-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--line);
    flex-shrink: 0;
    order: 2;
}
.user-chip .identity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-chip-arrow {
    display: inline-flex;
    order: 3;
    font-size: 10px;
    color: var(--ink-faint);
    opacity: 0;
    transform: translateX(3px);
    transition: opacity var(--t), transform var(--t), color var(--t);
}
html[lang="en"] .user-chip-arrow { transform: translateX(-3px) scaleX(-1); }
.user-chip:hover .user-chip-arrow { opacity: 1; transform: translateX(0); color: var(--act-deep); }
html[lang="en"] .user-chip:hover .user-chip-arrow { transform: translateX(0) scaleX(-1); }

/* ── page head: compact app header ── */
.ink-page-head {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px clamp(16px, 3vw, 32px) 0;
}
.ink-page-kicker { display: none; }
.ink-page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ink-page-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--ink);
}
.ink-page-sub { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); max-width: 600px; }
.ink-page-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ── tabs (restyle of .subbar) ── */
.subbar {
    max-width: 1320px;
    margin: 16px auto 0;
    padding: 0 clamp(16px, 3vw, 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: none;
    border: 0;
    border-radius: 0;
}
.subbar-title { display: none; }
.subbar-links {
    display: inline-flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
}
.subbar-links::-webkit-scrollbar { display: none; }
.subbar-links a {
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
    border-radius: 999px;
    white-space: nowrap;
    transition: color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.subbar-links a:hover { color: var(--ink); transform: translateY(-1px); }
.subbar-links a.active {
    color: var(--on-act);
    font-weight: 700;
    background: var(--act);
    box-shadow: 0 8px 24px rgba(90,234,207,.18);
}

/* content container */
.content, .view-body { display: contents; }
.main > section:not(.subbar), .main > div.dashboard-grid, .main > .server-spotlight {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}
.main { padding-bottom: 70px; }
.main > section { margin-top: 22px; }

/* ── sidebar: permanent rail on desktop, drawer on mobile ── */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 252px;
    background: var(--well);
    border-inline-end: 1px solid var(--line-soft);
    z-index: 90;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}
@media (max-width: 1080px) {
    .sidebar {
        width: min(300px, 84vw);
        background: var(--surface);
        padding: 18px;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s;
    }
    html[lang="en"] .sidebar { transform: translateX(-100%); }
    body.sidebar-open .sidebar { transform: none; visibility: visible; }
}
.sidebar .panel.brand { border: 0; box-shadow: none; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); border-radius: 0; }
.brand-logo { height: 30px; }
.sidebar .user-chip { border-radius: var(--r-sm); padding: 8px 12px; background: var(--surface-2); border-color: var(--line-soft); }
.sidebar .user-chip-copy { text-align: start; }
.sidebar .nav-item:hover { background: var(--surface-2); }
.sidebar-body { flex: 1; }
.nav-flat { display: grid; gap: 1px; }
.nav-flat { gap: 3px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 41px;
    padding: 0 13px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.nav-item i:first-child { width: 17px; text-align: center; font-size: 13px; color: var(--ink-3); transition: color var(--t), transform var(--t); }
.nav-item .sidebar-nav-icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex: 0 0 25px;
    border-radius: 9px;
    transition: transform var(--t), filter var(--t), opacity var(--t);
}
.nav-item > span:first-of-type { flex: 1; }
.nav-item:hover { background: var(--well); color: var(--ink); transform: translateY(-1px); }
.nav-item:hover i:first-child, .nav-item:hover .sidebar-nav-icon { transform: scale(1.08); }
.nav-item.active { background: var(--act-wash); color: var(--act); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(90,234,207,.12); }
.nav-item.active i:first-child { color: var(--act); }
.nav-item.active .sidebar-nav-icon { filter: saturate(1.18) brightness(1.06); }
.nav-item.active i.fa-home { animation: v5HomeSignal 2.8s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes v5HomeSignal { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-1px) scale(1.12); } }
.nav-count {
    min-width: 19px; height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--f-mono);
}
.nav-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.nav-more-toggle { list-style: none; }
.nav-more-toggle::-webkit-details-marker { display: none; }
.nav-more-arrow { font-size: 9px; color: var(--ink-faint); transition: transform var(--t); }
.nav-more[open] .nav-more-arrow { transform: rotate(180deg); }
.nav-more-body { display: grid; gap: 1px; padding-top: 4px; }
.nav-item-sub { min-height: 37px; font-size: 12.5px; }
.dropdown-link .sidebar-menu-icon, .sidebar-actions .btn .sidebar-action-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
    border-radius: 8px;
}
.sidebar-actions { display: grid; }
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 85;
    background: rgba(16, 29, 43, .4);
    border: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    cursor: pointer;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }

/* mobile bottom tabbar */
.v5-tabbar { display: none; }

/* ── responsive: sidebar drives nav ── */
.ink-nav { display: none; }
@media (max-width: 1080px) {
    .ink-burger { display: inline-flex; }
}
@media (min-width: 1081px) {
    .ink-header, .main { margin-inline-start: 252px; }
    .ink-header .ink-brand { display: none; }
    .ink-header .user-chip { display: none; }
    .sidebar-backdrop { display: none; }
    .ink-header-inner { height: 56px; }
}
@media (max-width: 760px) {
    .ink-header-inner { height: 56px; gap: 12px; }
    .user-chip-copy { display: none; }
    .user-chip { padding: 3px; border-radius: 50%; }
    .ink-page-head-row { align-items: flex-start; flex-direction: column; }
    .ink-page-actions { width: 100%; }
    .ink-page-actions .btn { flex: 1; }
    .main { padding-bottom: 32px; }
    .v5-tabbar { display: none; }
}
@media (max-width: 480px) {
    .ink-header-tools > .notif-menu,
    .ink-header-tools > .user-chip { display:none; }
}

/* checkout shell keeps narrow rail (overridden in buyflow file) */
body.checkout-page .layout { display: block; }

/* brand: real shield logo + wordmark */
.ink-brand { gap: 9px; }
.ink-brand-shield {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}
.ink-brand-word {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    direction: ltr;
    white-space: nowrap;
}
.ink-brand-word em { font-style: normal; color: var(--act); }
html[data-theme="light"] .ink-brand-word em { color: var(--act-deep); }
.ink-brand-drawer { display: flex; align-items: center; padding: 4px 4px 16px; }

/* compact header tools on mobile */
@media (max-width: 760px) {
    .ink-header-tools { gap: 6px; }
    .utility-pill { padding: 0 8px; min-height: 34px; }
    .utility-pill > span:not(.utility-pill-icon) { display: none; }
    .utility-pill-caret { display: none; }
    .ink-page-head { padding-top: 22px; }
}
/* ═══ INK 04 — views: dashboard, server, services, account, support ═══ */

/* ── dashboard grid ── */
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; margin-top: 22px; }
.stack { display: grid; gap: 18px; align-content: start; }
.dashboard-side-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; align-items: start; }
.section-grid { display: grid; gap: 18px; }
.section-grid > * { min-width: 0; }

/* metrics — soft stat cards */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; }
.metric {
    padding: 18px 20px;
    display: grid;
    gap: 4px;
    background-color: var(--surface);
    background-image: var(--card-grad);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    position: relative;
}
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-top span {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}
.metric-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--act-wash);
    color: var(--act);
    border: 0;
}
html[data-theme="light"] .metric-icon { color: var(--act-deep); }
.metric strong {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.25;
    direction: ltr;
    unicode-bidi: embed;
    text-align: end;
}
html[lang="en"] .metric strong { text-align: start; }
.metric small { font-size: 11px; color: var(--ink-3); }
.metric-due strong { color: var(--ink); }
.metric-wallet strong { color: var(--act-deep); }

/* action strip — editorial index cards */
.action-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: stretch; gap: 12px; }
.action-card {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 8px;
    min-height: 158px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    overflow: hidden;
}
.action-card::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: var(--act);
    transform: scaleX(0);
    transform-origin: var(--tx-origin, right);
    transition: transform .25s ease;
}
html[lang="en"] .action-card::after { --tx-origin: left; }
.action-card:hover { border-color: var(--ink-3); box-shadow: var(--sh-2); transform: translateY(-2px); }
.action-card:hover::after { transform: scaleX(1); }
.action-card-top { display: flex; align-items: center; justify-content: space-between; }
.action-card-icon {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--act-wash);
    color: var(--act);
    border: 0;
}
html[data-theme="light"] .action-card-icon { color: var(--act-deep); }
.action-card-arrow {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--ink-3);
    transition: background var(--t), color var(--t), border-color var(--t);
}
.action-card:hover .action-card-arrow { background: var(--act); border-color: var(--act); color: var(--on-act); }
.action-copy { display: grid; gap: 3px; }
.action-copy small { font-size: 11.5px; font-weight: 600; color: var(--act); }
html[data-theme="light"] .action-copy small { color: var(--act-deep); }
.action-copy strong { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.action-copy p { font-size: 12px; color: var(--ink-3); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── server spotlight: ink console ── */
.server-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background-color: var(--surface);
    background-image: var(--card-grad);
    box-shadow: var(--sh-2);
    overflow: hidden;
    margin-top: 22px;
}
.server-spotlight-main { padding: 26px; display: grid; gap: 18px; align-content: start; }
.server-spotlight-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.server-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--act);
    margin-bottom: 6px;
}
html[data-theme="light"] .server-kicker { color: var(--act-deep); }
.server-spotlight-top h2 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.server-spotlight-top p { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); max-width: 480px; }

.server-meta-chips { display: flex; gap: 10px; flex-wrap: wrap; border: 0; border-radius: 0; overflow: visible; width: fit-content; }
.server-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,255,255,.025);
}
.server-meta-chip i { color: var(--act); font-size: 11px; opacity: .8; }
html[data-theme="light"] .server-meta-chip i { color: var(--act-deep); }
.server-meta-chip em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.server-meta-chip strong { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.server-meta-chip strong.mono-inline { font-family: var(--f-mono); font-weight: 600; }

.server-invoice-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 14px;
    border: 1px solid rgba(240, 188, 90, .4);
    border-radius: var(--r-sm);
    background: var(--warn-wash);
}
.server-invoice-banner.danger { border-color: rgba(240, 135, 155, .42); background: var(--err-wash); }
.server-invoice-copy { display: inline-flex; align-items: center; gap: 9px; color: var(--warn); font-size: 12.5px; font-weight: 600; }
.server-invoice-banner.danger .server-invoice-copy { color: var(--err); }
.server-invoice-actions { align-items: flex-end; }
.dashboard-renewal-banner { margin-bottom: 18px; }

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: stretch;
    gap: 18px;
    width: calc(100% - clamp(32px, 6vw, 64px));
    max-width: 1320px;
    margin: 22px auto 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background-color: var(--surface);
    background-image: radial-gradient(circle at 94% 0%, rgba(45, 212, 191, .15), transparent 36%), linear-gradient(135deg, rgba(88, 166, 255, .10), transparent 48%), var(--card-grad);
    box-shadow: var(--sh-2);
    position: relative;
    overflow: hidden;
}
.dashboard-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(45, 212, 191, .10), transparent 42%); }
.dashboard-hero-copy { min-width: 0; max-width: 760px; display: grid; align-content: center; position: relative; z-index: 1; }
.dashboard-action-strip { margin-top: 0; margin-bottom: 14px; }
.dashboard-hero + .server-spotlight { margin-top: 0; }
.server-spotlight + .dashboard-action-strip { margin-top: 18px; }
.dashboard-metrics { margin-bottom: 18px; }
.dashboard-hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--act); font-size: 12px; font-weight: 700; }
html[data-theme="light"] .dashboard-hero-kicker { color: var(--act-deep); }
.dashboard-greeting { font-size: clamp(24px, 3vw, 38px); font-weight: 800; color: var(--ink); letter-spacing: -.025em; line-height: 1.12; margin: 0 0 8px; text-wrap: balance; }
.dashboard-greeting-sub { font-size: 13px; line-height: 1.8; color: var(--ink-3); margin: 0; max-width: 68ch; text-wrap: pretty; }
.dashboard-hero-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.dashboard-hero-meta { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; min-width: 0; align-self: stretch; position: relative; z-index: 1; }
.dashboard-hero-meta span { display: grid; gap: 5px; align-content: center; padding: 13px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.035); }
.dashboard-hero-meta i { color: var(--act); font-size: 13px; }
html[data-theme="light"] .dashboard-hero-meta i { color: var(--act-deep); }
.dashboard-hero-meta em { color: var(--ink-3); font-size: 11.5px; font-style: normal; }
.dashboard-hero-meta strong { color: var(--ink); font-size: 15px; font-weight: 800; }

.health-score { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.health-score-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--well); overflow: hidden; }
.health-score-bar span { display: block; height: 100%; border-radius: 999px; transition: width var(--t); }
.health-score-bar span.tone-success { background: var(--ok); }
.health-score-bar span.tone-warning { background: var(--warn); }
.health-score-bar span.tone-danger { background: var(--err); }
.health-score-value { font-size: 13px; font-weight: 800; flex-shrink: 0; }
.health-score-value.tone-success { color: var(--ok); }
.health-score-value.tone-warning { color: var(--warn); }
.health-score-value.tone-danger { color: var(--err); }
.health-list { display: grid; gap: 6px; }
.health-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background var(--t); }
.health-item span { flex: 1; }
.health-item.is-ok i:first-child { color: var(--ok); }
.health-item.is-warn { background: var(--warn-wash); color: var(--warn); }
.health-item.is-warn:hover { background: rgba(240, 188, 90, .2); }
.health-item.is-warn i:first-child { color: var(--warn); }
.health-item-arrow { font-size: 9px; opacity: .7; }

/* Dashboard V2 — action-first home. All selectors stay inside this view. */
.v5-dashboard-v2 {
    width: calc(100% - clamp(32px, 6vw, 64px));
    max-width: 1320px;
    margin: 22px auto 48px;
    display: grid;
    gap: 18px;
}
.v5-dashboard-v2 * { min-width: 0; }
.dashboard-v2-welcome,
.dashboard-v2-priority,
.dashboard-v2-today,
.dashboard-v2-services,
.dashboard-v2-panel,
.dashboard-v2-support-band {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--sh-1);
}
.dashboard-v2-welcome {
    min-height: 104px;
    padding: 22px 24px;
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    position: relative;
    background-image:
        radial-gradient(circle at 8% 20%, rgba(45, 212, 191, .12), transparent 32%),
        linear-gradient(135deg, rgba(88, 166, 255, .08), transparent 58%);
}
.dashboard-v2-welcome::after {
    content: "";
    position: absolute;
    inset-inline-end: 70px;
    top: -92px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(94, 234, 212, .10);
    border-radius: 50%;
    pointer-events: none;
}
.dashboard-v2-welcome-copy { position: relative; z-index: 1; }
.dashboard-v2-welcome h2 {
    margin: 0 0 5px;
    color: var(--ink);
    font-size: clamp(22px, 2.7vw, 31px);
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 800;
}
.dashboard-v2-welcome p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.dashboard-v2-welcome-visual {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--act);
    background: rgba(45, 212, 191, .10);
    border: 1px solid rgba(45, 212, 191, .20);
    position: relative;
    z-index: 1;
}
.dashboard-v2-welcome-visual i { font-size: 24px; }
.dashboard-v2-welcome-visual span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--act); box-shadow: 0 0 18px rgba(45,212,191,.7); }
.dashboard-v2-welcome-visual span:first-of-type { inset-inline-start: -5px; top: 13px; }
.dashboard-v2-welcome-visual span:last-child { inset-inline-end: 4px; bottom: -4px; width: 5px; height: 5px; }

.dashboard-v2-overview { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 18px; }
.dashboard-v2-priority,
.dashboard-v2-today,
.dashboard-v2-services,
.dashboard-v2-panel { border-radius: var(--r); }
.dashboard-v2-priority {
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 14px;
    border-inline-start: 4px solid var(--ok);
}
.dashboard-v2-priority::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    inset-inline-end: -120px;
    bottom: -150px;
    background: rgba(45, 212, 191, .08);
    pointer-events: none;
}
.dashboard-v2-priority.is-danger { border-inline-start-color: var(--err); background-image: linear-gradient(135deg, var(--err-wash), transparent 58%); }
.dashboard-v2-priority.is-warning { border-inline-start-color: var(--warn); background-image: linear-gradient(135deg, var(--warn-wash), transparent 58%); }
.dashboard-v2-priority.is-info { border-inline-start-color: var(--info); background-image: linear-gradient(135deg, rgba(88,166,255,.10), transparent 58%); }
.dashboard-v2-priority.is-success { background-image: linear-gradient(135deg, rgba(45,212,191,.08), transparent 58%); }
.dashboard-v2-priority-head { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.dashboard-v2-priority-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--ok);
    background: var(--ok-wash);
    border: 1px solid rgba(93, 224, 167, .20);
}
.dashboard-v2-priority.is-danger .dashboard-v2-priority-icon { color: var(--err); background: var(--err-wash); border-color: rgba(240,135,155,.22); }
.dashboard-v2-priority.is-warning .dashboard-v2-priority-icon { color: var(--warn); background: var(--warn-wash); border-color: rgba(240,188,90,.22); }
.dashboard-v2-priority.is-info .dashboard-v2-priority-icon { color: var(--info); background: rgba(88,166,255,.10); border-color: rgba(88,166,255,.20); }
.dashboard-v2-priority-icon i { font-size: 18px; }
.dashboard-v2-label { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 700; margin-bottom: 3px; }
.dashboard-v2-priority h2 { margin: 0; color: var(--ink); font-size: clamp(21px, 2.4vw, 29px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.dashboard-v2-priority > p { margin: 0; max-width: 68ch; color: var(--ink-2); font-size: 13px; line-height: 1.75; position: relative; z-index: 1; }
.dashboard-v2-priority-value { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.dashboard-v2-priority-value span { color: var(--ink-3); font-size: 12px; padding-bottom: 4px; }
.dashboard-v2-priority-value strong { color: var(--ink); font-family: var(--f-mono); font-size: clamp(25px, 3.4vw, 38px); line-height: 1; font-weight: 800; direction: ltr; }
.dashboard-v2-priority-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.dashboard-v2-primary-action,
.dashboard-v2-secondary-action,
.dashboard-v2-service-action,
.dashboard-v2-support-band > a {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--t), border-color var(--t), background var(--t), color var(--t);
}
.dashboard-v2-primary-action,
.dashboard-v2-support-band > a { background: var(--act); color: #032b30; border: 1px solid transparent; box-shadow: 0 8px 22px rgba(45,212,191,.15); }
.dashboard-v2-primary-action:hover,
.dashboard-v2-support-band > a:hover { transform: translateY(-1px); background: #65ead7; }
.dashboard-v2-secondary-action { color: var(--ink-2); border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.dashboard-v2-secondary-action:hover { color: var(--ink); border-color: var(--act); background: rgba(255,255,255,.05); }
.dashboard-v2-priority-meta { display: flex; gap: 15px; flex-wrap: wrap; padding-top: 13px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: 11.5px; position: relative; z-index: 1; }
.dashboard-v2-priority-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dashboard-v2-priority-meta i { color: var(--ok); font-size: 9px; }
.dashboard-v2-priority-meta b { color: var(--ink); }
.dashboard-v2-priority-meta .is-alert,
.dashboard-v2-priority-meta .is-alert i { color: var(--err); }

.dashboard-v2-today { padding: 20px; display: grid; align-content: start; }
.dashboard-v2-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.dashboard-v2-section-heading > div { display: grid; gap: 3px; }
.dashboard-v2-section-heading h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 16px; line-height: 1.35; font-weight: 800; }
.dashboard-v2-section-heading h2 i { color: var(--act); font-size: 13px; }
.dashboard-v2-section-heading p { margin: 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.55; }
.dashboard-v2-section-heading > a { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; color: var(--act); font-size: 12px; font-weight: 700; text-decoration: none; }
.dashboard-v2-today-list { display: grid; }
.dashboard-v2-today-item {
    min-height: 73px;
    padding: 11px 0;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}
.dashboard-v2-today-item:first-child { border-top: 0; }
.dashboard-v2-today-item > span:first-child { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--act); background: rgba(45,212,191,.09); }
.dashboard-v2-today-item.is-danger > span:first-child { color: var(--err); background: var(--err-wash); }
.dashboard-v2-today-item.is-warning > span:first-child { color: var(--warn); background: var(--warn-wash); }
.dashboard-v2-today-item > span:nth-child(2) { display: grid; gap: 2px; }
.dashboard-v2-today-item strong { color: var(--ink); font-size: 12.5px; font-weight: 750; }
.dashboard-v2-today-item small { color: var(--ink-3); font-size: 10.8px; line-height: 1.45; }
.dashboard-v2-today-value { min-width: 28px; text-align: center; color: var(--ink); font-family: var(--f-mono); font-size: 16px; font-weight: 800; }
.dashboard-v2-today-item:hover strong { color: var(--act); }

.dashboard-v2-services { padding: 22px; }
.dashboard-v2-service-list { display: grid; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.dashboard-v2-service {
    min-height: 88px;
    padding: 14px 15px;
    display: grid;
    grid-template-columns: 46px minmax(180px, 1.25fr) minmax(132px, .7fr) minmax(105px, .55fr) minmax(140px, .8fr) minmax(122px, auto);
    align-items: center;
    gap: 13px;
    border-top: 1px solid var(--line-soft);
    background: rgba(255,255,255,.018);
}
.dashboard-v2-service:first-child { border-top: 0; }
.dashboard-v2-service:hover { background: rgba(255,255,255,.034); }
.dashboard-v2-service-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--act); background: rgba(45,212,191,.09); border: 1px solid rgba(45,212,191,.14); }
.dashboard-v2-service[data-tone="danger"] .dashboard-v2-service-icon { color: var(--err); background: var(--err-wash); border-color: rgba(240,135,155,.18); }
.dashboard-v2-service[data-tone="warning"] .dashboard-v2-service-icon { color: var(--warn); background: var(--warn-wash); border-color: rgba(240,188,90,.18); }
.dashboard-v2-service-name,
.dashboard-v2-service-ip,
.dashboard-v2-service-due { display: grid; gap: 4px; }
.dashboard-v2-service-name strong { color: var(--ink); font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-v2-service-name small,
.dashboard-v2-service-ip small,
.dashboard-v2-service-due small { color: var(--ink-3); font-size: 10.5px; }
.dashboard-v2-service-ip bdi { color: var(--ink-2); font-family: var(--f-mono); font-size: 11.5px; }
.dashboard-v2-service-status { width: fit-content; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.dashboard-v2-service-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(93,224,167,.08); }
.dashboard-v2-service[data-tone="danger"] .dashboard-v2-service-status { color: var(--err); }
.dashboard-v2-service[data-tone="danger"] .dashboard-v2-service-status i { background: var(--err); box-shadow: 0 0 0 4px rgba(240,135,155,.08); }
.dashboard-v2-service[data-tone="warning"] .dashboard-v2-service-status { color: var(--warn); }
.dashboard-v2-service[data-tone="warning"] .dashboard-v2-service-status i { background: var(--warn); box-shadow: 0 0 0 4px rgba(240,188,90,.08); }
.dashboard-v2-service-due strong { color: var(--ink-2); font-size: 11.5px; font-weight: 700; line-height: 1.45; }
.dashboard-v2-service-action { min-height: 44px; padding-inline: 13px; color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.025); white-space: nowrap; }
.dashboard-v2-service-action:hover { border-color: var(--act); color: var(--act); }
.dashboard-v2-service-action.is-danger { color: var(--err); border-color: rgba(240,135,155,.35); background: var(--err-wash); }
.dashboard-v2-service-action.is-warning { color: var(--warn); border-color: rgba(240,188,90,.35); background: var(--warn-wash); }
.dashboard-v2-all-services { min-height: 46px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-size: 12px; font-weight: 700; text-decoration: none; }
.dashboard-v2-all-services:hover { color: var(--act); }
.dashboard-v2-empty-services { min-height: 190px; padding: 30px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.dashboard-v2-empty-services > div { display: grid; justify-items: center; gap: 8px; max-width: 460px; }
.dashboard-v2-empty-services > i { font-size: 28px; color: var(--act); margin-bottom: 6px; }
.dashboard-v2-empty-services h3 { margin: 0; color: var(--ink); font-size: 18px; }
.dashboard-v2-empty-services p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.7; }
.dashboard-v2-empty-services > div > div { margin-top: 8px; display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }

.dashboard-v2-lower-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; }
.dashboard-v2-panel { padding: 20px; }
.dashboard-v2-notice-list,
.dashboard-v2-account-list { display: grid; }
.dashboard-v2-notice,
.dashboard-v2-account-row {
    min-height: 66px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-top: 1px solid var(--line-soft);
    color: inherit;
    text-decoration: none;
}
.dashboard-v2-notice:first-child,
.dashboard-v2-account-row:first-child { border-top: 0; }
.dashboard-v2-notice > span:first-child,
.dashboard-v2-account-row > span:first-child { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--info); background: rgba(88,166,255,.09); }
.dashboard-v2-notice.is-danger > span:first-child { color: var(--err); background: var(--err-wash); }
.dashboard-v2-notice.is-warning > span:first-child,
.dashboard-v2-account-row.is-needed > span:first-child { color: var(--warn); background: var(--warn-wash); }
.dashboard-v2-account-row.is-ready > span:first-child { color: var(--ok); background: var(--ok-wash); }
.dashboard-v2-notice > span:nth-child(2),
.dashboard-v2-account-row > span:nth-child(2) { display: grid; gap: 3px; }
.dashboard-v2-notice strong,
.dashboard-v2-account-row strong { color: var(--ink); font-size: 12.5px; font-weight: 750; }
.dashboard-v2-notice small,
.dashboard-v2-account-row small { color: var(--ink-3); font-size: 10.8px; line-height: 1.5; }
.dashboard-v2-notice > i,
.dashboard-v2-account-row > i { color: var(--ink-3); font-size: 10px; }
.dashboard-v2-notice:hover strong,
.dashboard-v2-account-row:hover strong { color: var(--act); }
.dashboard-v2-calm-empty { min-height: 118px; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: start; }
.dashboard-v2-calm-empty > i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ok); background: var(--ok-wash); }
.dashboard-v2-calm-empty span { display: grid; gap: 4px; }
.dashboard-v2-calm-empty strong { color: var(--ink); font-size: 13px; }
.dashboard-v2-calm-empty small { color: var(--ink-3); font-size: 11px; }

.dashboard-v2-support-band {
    min-height: 92px;
    padding: 18px 20px;
    border-radius: var(--r);
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background-image: linear-gradient(135deg, rgba(45,212,191,.07), transparent 60%);
}
.dashboard-v2-support-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--act); background: rgba(45,212,191,.09); }
.dashboard-v2-support-band h2 { margin: 0 0 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.dashboard-v2-support-band p { margin: 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.6; }

html[data-theme="light"] .dashboard-v2-primary-action,
html[data-theme="light"] .dashboard-v2-support-band > a { color: #052e33; }
html[data-theme="light"] .dashboard-v2-service,
html[data-theme="light"] .dashboard-v2-secondary-action,
html[data-theme="light"] .dashboard-v2-service-action { background: rgba(5,38,53,.018); }

@media (max-width: 1120px) {
    .dashboard-v2-overview { grid-template-columns: 1fr; }
    .dashboard-v2-today-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .dashboard-v2-today-item { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 11px; grid-template-columns: 38px minmax(0, 1fr); }
    .dashboard-v2-today-item:first-child { border-top: 1px solid var(--line-soft); }
    .dashboard-v2-today-value { display: none; }
    .dashboard-v2-service { grid-template-columns: 46px minmax(160px, 1fr) minmax(118px, .7fr) minmax(100px, .55fr) minmax(120px, .75fr) minmax(116px, auto); }
}

@media (max-width: 880px) {
    .dashboard-v2-service { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; }
    .dashboard-v2-service-name { grid-column: 2; }
    .dashboard-v2-service-ip { grid-column: 2; }
    .dashboard-v2-service-status { grid-column: 3; grid-row: 1; align-self: start; }
    .dashboard-v2-service-due { grid-column: 2; }
    .dashboard-v2-service-action { grid-column: 3; grid-row: 2 / span 2; align-self: stretch; }
    .dashboard-v2-lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .v5-dashboard-v2 { width: calc(100% - 24px); margin: 14px auto 32px; gap: 12px; }
    .dashboard-v2-welcome { min-height: 88px; padding: 16px; border-radius: 15px; }
    .dashboard-v2-welcome h2 { font-size: 21px; }
    .dashboard-v2-welcome p { font-size: 11.5px; }
    .dashboard-v2-welcome-visual { width: 48px; height: 48px; border-radius: 14px; }
    .dashboard-v2-welcome-visual i { font-size: 18px; }
    .dashboard-v2-priority,
    .dashboard-v2-today,
    .dashboard-v2-services,
    .dashboard-v2-panel { padding: 16px; border-radius: 15px; }
    .dashboard-v2-priority { border-inline-start-width: 3px; }
    .dashboard-v2-priority-icon { width: 44px; height: 44px; border-radius: 13px; }
    .dashboard-v2-priority h2 { font-size: 20px; }
    .dashboard-v2-priority > p { font-size: 12px; }
    .dashboard-v2-priority-actions { display: grid; grid-template-columns: 1fr; }
    .dashboard-v2-primary-action,
    .dashboard-v2-secondary-action { width: 100%; }
    .dashboard-v2-priority-meta { gap: 9px 14px; }
    .dashboard-v2-today-list { grid-template-columns: 1fr; gap: 0; }
    .dashboard-v2-today-item { min-height: 66px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 10px 0; grid-template-columns: 38px minmax(0, 1fr) auto; }
    .dashboard-v2-today-item:first-child { border: 0; }
    .dashboard-v2-today-value { display: block; }
    .dashboard-v2-section-heading { margin-bottom: 10px; }
    .dashboard-v2-section-heading h2 { font-size: 15px; }
    .dashboard-v2-section-heading > a { font-size: 11px; }
    .dashboard-v2-service-list { border: 0; border-radius: 0; overflow: visible; gap: 10px; }
    .dashboard-v2-service {
        min-height: 0;
        padding: 14px;
        border: 1px solid var(--line-soft);
        border-radius: 13px;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
    }
    .dashboard-v2-service:first-child { border-top: 1px solid var(--line-soft); }
    .dashboard-v2-service-icon { width: 42px; height: 42px; border-radius: 12px; grid-row: 1 / span 2; align-self: start; }
    .dashboard-v2-service-name { grid-column: 2; grid-row: 1; }
    .dashboard-v2-service-status { grid-column: 3; grid-row: 1; align-self: center; font-size: 10.5px; }
    .dashboard-v2-service-ip { grid-column: 2 / 4; grid-row: 2; }
    .dashboard-v2-service-due { grid-column: 1 / 3; grid-row: 3; padding-top: 9px; border-top: 1px solid var(--line-soft); }
    .dashboard-v2-service-action { grid-column: 3; grid-row: 3; min-height: 44px; align-self: end; }
    .dashboard-v2-support-band { grid-template-columns: 42px minmax(0, 1fr); padding: 16px; border-radius: 15px; }
    .dashboard-v2-support-icon { width: 42px; height: 42px; }
    .dashboard-v2-support-band > a { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 420px) {
    .dashboard-v2-welcome-visual { display: none; }
    .dashboard-v2-priority-head { align-items: flex-start; }
    .dashboard-v2-priority-value { display: grid; gap: 5px; }
    .dashboard-v2-priority-value span { padding-bottom: 0; }
    .dashboard-v2-service { grid-template-columns: 38px minmax(0, 1fr); }
    .dashboard-v2-service-status { grid-column: 2; grid-row: 2; }
    .dashboard-v2-service-ip { grid-column: 1 / -1; grid-row: 3; }
    .dashboard-v2-service-due { grid-column: 1 / -1; grid-row: 4; }
    .dashboard-v2-service-action { grid-column: 1 / -1; grid-row: 5; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .v5-dashboard-v2 *,
    .v5-dashboard-v2 *::before,
    .v5-dashboard-v2 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.server-hero-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.server-power-group {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    margin-inline-start: auto;
    background: var(--surface);
}
.server-power-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ink-3);
    background: var(--well);
    border-inline-end: 1px solid var(--line);
}
.server-power-label i { font-size: 9px; }
.server-power-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    border-inline-end: 1px solid var(--line-soft);
    transition: background var(--t), color var(--t);
}
.server-power-btn:last-child { border-inline-end: 0; }
.server-power-btn i { font-size: 10.5px; }
.server-power-btn.is-on:hover { background: var(--ok-wash); color: var(--ok); }
.server-power-btn.is-cycle:hover { background: var(--warn-wash); color: var(--warn); }
.server-power-btn.is-off:hover { background: var(--err-wash); color: var(--err); }

.server-cred-bar {
    display: grid;
    gap: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    overflow: hidden;
    max-width: 520px;
}
.server-cred-title { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 11px 15px; border-bottom: 1px solid var(--line-soft); }
.server-cred-title i { color: var(--act); font-size: 11px; }
html[data-theme="light"] .server-cred-title i { color: var(--act-deep); }
.server-cred-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 15px; }
.server-cred-item + .server-cred-item { border-top: 1px solid var(--line-soft); }
.server-cred-item em { font-style: normal; font-size: 11.5px; color: var(--ink-3); min-width: 84px; flex-shrink: 0; }
.server-cred-item strong {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    direction: ltr;
    unicode-bidi: embed;
    padding: 3px 10px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.server-cred-btn {
    width: 27px; height: 27px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    color: var(--ink-3);
    transition: border-color var(--t), color var(--t);
}
.server-cred-btn:hover { border-color: var(--act); color: var(--act); }
.server-cred-btn.is-warn:hover { border-color: var(--warn); color: var(--warn); }

/* discord auto-send row */
.server-cred-discord { gap: 10px; }
.server-cred-discord em { min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
.server-cred-discord em i { color: #5865f2; font-size: 13px; }
.server-cred-discord-text { font-size: 11.5px; color: var(--ink-3); flex: 1; min-width: 0; }
.v5-switch {
    position: relative;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--well);
    border: 1px solid var(--line);
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
    padding: 0;
}
.v5-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--ink-3);
    transition: transform var(--t), background var(--t);
}
.v5-switch.is-on { background: var(--act); border-color: var(--act); }
.v5-switch.is-on::after { background: var(--on-act); transform: translateX(-16px); }
html[lang="en"] .v5-switch.is-on::after { transform: translateX(16px); }
.v5-switch:disabled { opacity: .45; cursor: not-allowed; }

/* due-date urgency chips */
.due-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: inherit; font-weight: 800; border: 1px solid transparent; white-space: nowrap; line-height: 1.35; }
.due-chip.due-ok { background: var(--ok-wash); color: var(--ok); border-color: rgba(79, 217, 154, .28); }
.due-chip.due-warn, .due-chip.due-orange { background: var(--warn-wash); color: var(--warn); border-color: rgba(240, 188, 90, .34); }
.due-chip.due-danger { background: var(--err-wash); color: var(--err); border-color: rgba(240, 135, 155, .38); }
html[data-theme="light"] .due-chip.due-ok { background: rgba(20, 133, 90, .1); color: #14855a; }
html[data-theme="light"] .due-chip.due-warn, html[data-theme="light"] .due-chip.due-orange { background: rgba(160, 106, 16, .11); color: #a06a10; }

.server-spotlight-side {
    border-inline-start: 1px solid var(--line);
    background: var(--surface-2);
    padding: 18px;
    display: grid;
    gap: 12px;
    align-content: start;
}
.server-side-head { display: flex; align-items: center; justify-content: space-between; }
.server-side-head strong { font-size: 12.5px; font-weight: 600; color: var(--ink-3); display: inline-flex; gap: 8px; align-items: center; }
.server-side-head strong i { color: var(--act-deep); font-size: 11px; }
.server-side-count {
    min-width: 20px; height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--f-mono);
}
.server-switcher { display: grid; gap: 7px; max-height: 320px; overflow-y: auto; }
.server-mini-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t);
}
.server-mini-card:hover { border-color: var(--ink-3); }
.server-mini-card.active { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.server-mini-card .due-chip { justify-self: start; font-size: 10.5px; margin-top: 4px; }
.server-mini-copy { display: grid; gap: 3px; min-width: 0; }
.server-mini-copy strong { overflow-wrap: anywhere; }
.server-mini-ip { font-family: var(--f-mono); direction: ltr; unicode-bidi: embed; }
.server-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.server-mini-dot.success { background: var(--ok); }
.server-mini-dot.warning { background: var(--warn); }
.server-mini-dot.danger { background: var(--err); }
.server-mini-dot.info { background: var(--info); }
.server-mini-copy { display: grid; min-width: 0; flex: 1; }
.server-mini-copy strong { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-mini-ip { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); direction: ltr; text-align: start; }
.server-mini-status { font-size: 10px; font-weight: 700; color: var(--ink-3); flex-shrink: 0; }
.server-mini-status.success { color: var(--ok); }
.server-mini-status.warning { color: var(--warn); }
.server-mini-status.danger { color: var(--err); }

/* server view internals */
.server-shell { display: grid; gap: 18px; }
.server-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.server-resource-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; display: grid; gap: 4px; background: var(--surface-2); }
.server-resource-card span { font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.server-resource-card strong { font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.server-resource-card strong.mono-inline { font-size: 13.5px; }
.server-command-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.server-control-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; display: grid; gap: 9px; background: var(--surface); }
.server-control-top { display: flex; align-items: center; justify-content: space-between; }
.server-control-top strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.server-control-status { font-size: 11px; color: var(--ink-3); }
.server-credential-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.server-credential-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; display: grid; gap: 7px; background: var(--surface-2); }
.server-credential-card span { font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.server-credential-card strong { font-family: var(--f-mono); font-size: 13px; color: var(--ink); direction: ltr; unicode-bidi: embed; word-break: break-all; }
.server-chip-list { display: flex; gap: 7px; flex-wrap: wrap; }
.server-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 11.5px;
    font-family: var(--f-mono);
    color: var(--ink-2);
    direction: ltr;
    unicode-bidi: embed;
}
.server-direct-stack { display: grid; gap: 12px; }
.server-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.server-overview-redesign { display: grid; gap: 18px; }
.server-overview-redesign > .server-lm-wide { order: 3; }
.server-overview-redesign > .server-advanced-details { order: 4; }
.server-live-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background:
        radial-gradient(circle at 12% 0%, rgba(90,234,207,.14), transparent 32%),
        radial-gradient(circle at 96% 8%, rgba(88,166,255,.14), transparent 36%),
        var(--surface);
    box-shadow: var(--sh-2);
}
.server-live-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.055), transparent 34%, rgba(255,255,255,.025)); }
.server-live-main, .server-live-side { position: relative; z-index: 1; }
.server-live-main { padding: clamp(18px, 2.3vw, 28px); display: grid; gap: 18px; align-content: stretch; }
.server-live-side { border-inline-start: 1px solid var(--line); padding: clamp(16px, 2vw, 22px); background: rgba(0,0,0,.13); display: grid; gap: 12px; align-content: start; }
.server-action-grid-compact { grid-template-columns: 1fr; }
.server-top-access { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: linear-gradient(145deg, rgba(90,234,207,.08), rgba(255,255,255,.025)); }
.server-top-access-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); }
.server-top-access-head strong { font-size: 12.5px; font-weight: 950; }
.server-top-access-head span { color: var(--ink-3); font-size: 10.5px; font-weight: 800; }
.server-cred-bar-inline { max-width: none; border-color: var(--line-soft); background: rgba(0,0,0,.12); }
.server-cred-bar-inline .server-cred-item { padding: 9px 10px; }
.server-cred-bar-inline .server-cred-item em { min-width: 74px; }
.server-cred-bar-inline .server-cred-item strong { max-width: none; flex: 1; }
.server-live-kicker { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 10px; border: 1px solid var(--act-ring); border-radius: 999px; background: var(--act-wash); color: var(--act); font-size: 11px; font-weight: 800; }
html[data-theme="light"] .server-live-kicker { color: var(--act-deep); }
.server-live-title { display: grid; gap: 7px; min-width: 0; }
.server-live-title h3 { margin: 0; color: var(--ink); font-size: clamp(22px, 3vw, 36px); line-height: 1.06; letter-spacing: -.035em; font-weight: 900; text-wrap: balance; }
.server-live-title p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.75; max-width: 70ch; }
.server-live-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.server-live-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.server-live-status .badge { min-height: 29px; }
.server-live-pulse { --pulse-rgb: 79,217,154; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--pulse-rgb)); box-shadow: 0 0 0 0 rgba(var(--pulse-rgb),.45); animation: v5ServerPulse 1.8s ease infinite; }
.server-live-pulse.warning { --pulse-rgb: 240,188,90; }
.server-live-pulse.danger { --pulse-rgb: 240,135,155; }
.server-live-pulse.info, .server-live-pulse.muted { --pulse-rgb: 88,166,255; }
@keyframes v5ServerPulse { 70% { box-shadow: 0 0 0 9px rgba(var(--pulse-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb),0); } }
.server-live-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.server-live-fact { min-width: 0; padding: 13px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.035); display: grid; gap: 5px; }
.server-live-fact i { color: var(--act); font-size: 13px; }
html[data-theme="light"] .server-live-fact i { color: var(--act-deep); }
.server-live-fact em { color: var(--ink-3); font-size: 10.5px; font-style: normal; font-weight: 800; }
.server-live-fact strong { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 850; overflow-wrap: anywhere; }
.server-live-fact .mono-inline { direction: ltr; unicode-bidi: embed; }
.server-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.server-action-tile { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); transition: transform var(--t), border-color var(--t), background var(--t); }
.server-action-tile:hover { transform: translateY(-1px); border-color: var(--act-ring); background: rgba(255,255,255,.04); color: var(--ink); }
.server-action-tile i { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--act); background: var(--act-wash); flex-shrink: 0; }
.server-action-tile span { display: grid; gap: 2px; min-width: 0; }
.server-action-tile strong { color: var(--ink); font-size: 12.5px; font-weight: 800; }
.server-action-tile em { color: var(--ink-3); font-size: 10.5px; font-style: normal; }
.server-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 18px; }
.server-overview-main, .server-overview-aside { display: grid; gap: 18px; align-content: start; min-width: 0; }
.server-panel-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh); overflow: hidden; }
.server-panel-pad { padding: clamp(16px, 2vw, 22px); }
.server-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.server-panel-head h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.server-panel-head p { margin: 5px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.65; }
.server-panel-head .badge { flex-shrink: 0; }
.main[data-v5-view="server"][data-v5-subview="overview"] .ink-page-head { display: none; }
.main[data-v5-view="server"][data-v5-subview="overview"] .subbar {
    display: flex;
    margin-top: 12px;
}
.server-resource-matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.server-resource-tile { position: relative; min-width: 0; border: 1px solid rgba(88,166,255,.18); border-radius: var(--r-sm); padding: 15px; background: linear-gradient(180deg, rgba(14,55,88,.62), rgba(8,32,54,.72)); display: grid; gap: 12px; overflow: hidden; direction: ltr; text-align: left; }
.server-resource-tile::before { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--act), transparent); opacity: .55; }
.server-resource-tile.is-live::before { background: linear-gradient(90deg, var(--ok), var(--act)); opacity: .95; }
.server-resource-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.server-resource-top span { min-width: 0; display: inline-flex; align-items: center; gap: 9px; color: #f4fbff; font-size: 13.5px; font-weight: 950; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.server-resource-top span i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #8ff8ff; background: rgba(45,212,191,.18); box-shadow: inset 0 0 0 1px rgba(143,248,255,.16); flex-shrink: 0; }
.server-resource-top > strong { flex-shrink: 0; color: #f7fcff; font-family: var(--f-mono); font-size: clamp(20px, 2.1vw, 26px); font-weight: 950; letter-spacing: -.035em; direction: ltr; unicode-bidi: embed; text-shadow: 0 1px 0 rgba(0,0,0,.32); }
.server-resource-tile.is-live .server-resource-top > strong { color: #9dffcf; }
.server-resource-usage { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 19px; }
.server-resource-usage span { min-width: 0; color: #d6edff; font-size: 11.5px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-resource-usage strong { flex-shrink: 0; color: #eaf7ff; font-family: var(--f-mono); font-size: 11.5px; font-weight: 950; direction: ltr; unicode-bidi: embed; }
.server-resource-note { min-height: 16px; color: #a9c9df; font-size: 11px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-resource-meter { height: 10px; border-radius: 999px; background: rgba(126,194,255,.16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(177,226,255,.12), 0 0 18px rgba(45,212,191,.06); }
.server-resource-meter span { display: block; width: 0%; min-width: 6px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #45d7ff, #8ff8ff); box-shadow: 0 0 14px rgba(69,215,255,.32); transition: width .65s ease, background var(--t), opacity var(--t); }
.server-resource-meter.unavailable span { width: 18%; opacity: .58; background: linear-gradient(90deg, rgba(125,211,252,.85), rgba(165,243,252,.42)); }
.server-resource-meter.static span { width: 100%; opacity: .48; background: linear-gradient(90deg, rgba(69,215,255,.9), rgba(69,215,255,.18)); }
.server-resource-meter.warning span { background: linear-gradient(90deg, var(--warn), var(--act)); }
.server-resource-meter.danger span { background: linear-gradient(90deg, var(--err), var(--warn)); }
.server-advanced-details { border-style: dashed; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.server-advanced-details > summary { list-style: none; cursor: pointer; padding: 15px clamp(16px, 2vw, 22px); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); }
.server-advanced-details > summary::-webkit-details-marker { display: none; }
.server-advanced-details > summary span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 950; }
.server-advanced-details > summary span i { color: var(--act); }
.server-advanced-details > summary em { color: var(--ink-3); font-size: 11px; font-style: normal; font-weight: 800; }
.server-advanced-details[open] > summary { border-bottom: 1px solid var(--line-soft); }
.server-advanced-details .server-overview-layout { padding: clamp(16px, 2vw, 22px); }
.server-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.server-data-box { min-width: 0; padding: 13px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); display: grid; gap: 5px; }
.server-data-box em { color: var(--ink-3); font-size: 10.5px; font-style: normal; font-weight: 850; }
.server-data-box strong { color: var(--ink); font-size: 13px; font-weight: 850; overflow-wrap: anywhere; }
.server-data-box .mono-inline { direction: ltr; unicode-bidi: embed; }
.server-disk-list, .server-network-list, .server-login-compact-list { display: grid; gap: 9px; }
.server-disk-row, .server-network-row, .server-login-compact-row { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.server-disk-row-top, .server-network-row-top, .server-login-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.server-disk-row strong, .server-network-row strong, .server-login-compact-row strong { color: var(--ink); font-size: 12.5px; font-weight: 850; }
.server-disk-row p, .server-network-row p, .server-login-compact-row p { margin: 0; color: var(--ink-3); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.server-disk-meta, .server-network-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.server-mini-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); font-size: 10px; font-weight: 800; background: var(--surface); }
.server-mini-badge.success { color: var(--ok); background: var(--ok-wash); border-color: rgba(79,217,154,.25); }
.server-mini-badge.warning { color: var(--warn); background: var(--warn-wash); border-color: rgba(240,188,90,.28); }
.server-mini-badge.danger { color: var(--err); background: var(--err-wash); border-color: rgba(240,135,155,.3); }
.server-lm-wide { position: relative; overflow: hidden; border-color: rgba(90,234,207,.2); background: radial-gradient(circle at 8% 0%, rgba(90,234,207,.16), transparent 34%), radial-gradient(circle at 100% 18%, rgba(88,166,255,.12), transparent 30%), var(--surface); }
.server-lm-wide::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.055), transparent 38%, rgba(90,234,207,.05)); }
.server-lm-console { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr); gap: 16px; padding: clamp(16px, 2vw, 22px); }
.server-lm-main, .server-lm-side { min-width: 0; display: grid; gap: 14px; align-content: start; }
.server-lm-console-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.server-lm-sigil { position: relative; width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--act); background: var(--act-wash); border: 1px solid var(--act-ring); box-shadow: 0 0 0 6px rgba(90,234,207,.045); }
.server-lm-sigil::after { content: ""; position: absolute; inset: -7px; border-radius: 22px; border: 1px solid rgba(90,234,207,.2); }
.server-lm-wide[data-lm-state="healthy"] .server-lm-sigil::after { animation: v5LmSignal 1.9s ease-out infinite; }
@keyframes v5LmSignal { 0% { transform: scale(.92); opacity: .9; } 78%, 100% { transform: scale(1.18); opacity: 0; } }
.server-lm-console-title { display: grid; gap: 5px; min-width: 0; }
.server-lm-console-title h3 { margin: 0; color: var(--ink); font-size: 24px; font-weight: 950; letter-spacing: -.025em; }
.server-lm-console-title p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.75; max-width: 66ch; }
.server-lm-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.server-lm-glance-card { min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.035); padding: 12px; display: grid; gap: 5px; }
.server-lm-glance-card em { color: var(--ink-3); font-size: 10px; font-style: normal; font-weight: 850; }
.server-lm-glance-card strong { color: var(--ink); font-size: 15px; font-weight: 950; overflow-wrap: anywhere; }
.server-lm-glance-card.is-hot strong { color: var(--warn); }
.server-lm-enrollment { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(88,166,255,.28); border-radius: var(--r-sm); background: rgba(88,166,255,.07); }
.server-lm-enrollment[hidden] { display: none; }
.server-lm-enrollment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.server-lm-enrollment-copy { display: grid; gap: 4px; }
.server-lm-enrollment-copy strong { color: var(--ink); font-size: 13px; font-weight: 950; }
.server-lm-enrollment-copy span { color: var(--ink-3); font-size: 11px; line-height: 1.65; }
.server-lm-enrollment-steps { display: flex; flex-wrap: wrap; gap: 7px; }
.server-lm-enrollment-step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 9px; color: var(--ink-2); background: rgba(0,0,0,.1); font-size: 10.5px; font-weight: 800; }
.server-lm-enrollment-step b { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 6px; color: #06131f; background: var(--info); font-size: 10px; }
.server-lm-enrollment-result { display: grid; gap: 8px; }
.server-lm-enrollment-result[hidden] { display: none; }
.server-lm-enrollment-command { width: 100%; min-height: 112px; resize: vertical; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; color: #9bc5ff; background: rgba(0,0,0,.22); font: 500 11px/1.65 var(--sh-font-mono); direction: ltr; text-align: left; }
.server-lm-enrollment-meta { display: flex; align-items: center; justify-content: space-between; gap: 9px; flex-wrap: wrap; color: var(--ink-3); font-size: 10.5px; }
.server-lm-baseline { display: grid; gap: 11px; padding: 14px; border: 1px solid rgba(240,188,90,.28); border-radius: var(--r-sm); background: rgba(240,188,90,.055); }
.server-lm-baseline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.server-lm-baseline-copy { display: grid; gap: 4px; }
.server-lm-baseline-copy strong { color: var(--ink); font-size: 13px; font-weight: 950; }
.server-lm-baseline-copy span { color: var(--ink-3); font-size: 11px; line-height: 1.65; }
.server-lm-baseline-points { display: flex; flex-wrap: wrap; gap: 6px; }
.server-lm-baseline-points span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(240,188,90,.2); border-radius: 8px; color: var(--ink-2); background: rgba(0,0,0,.1); font-size: 10.5px; }
.server-lm-baseline-points i { color: var(--warn); }
.server-lm-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.server-lm-log-head strong { color: var(--ink); font-size: 13px; font-weight: 950; }
.server-lm-log-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.server-lm-events { display: grid; gap: 9px; }
.server-lm-event-row, .server-login-compact-row { position: relative; display: grid; gap: 7px; padding: 12px 14px; border: 1px solid rgba(79,217,154,.2); border-radius: var(--r-sm); background: rgba(79,217,154,.045); overflow: hidden; animation: v5LmRowIn .24s cubic-bezier(.22,1,.36,1) both; }
.server-lm-event-row.is-warning, .server-login-compact-row.is-warning { border-color: rgba(240,188,90,.25); background: rgba(240,188,90,.055); }
.server-lm-event-row.is-danger, .server-login-compact-row.is-danger { border-color: rgba(240,135,155,.28); background: rgba(240,135,155,.06); }
@keyframes v5LmRowIn { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.server-lm-event-top, .server-login-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.server-lm-event-top strong, .server-login-row-top strong { color: var(--ink); font-size: 12.5px; font-weight: 900; }
.server-lm-event-row p, .server-login-compact-row p { margin: 0; color: var(--ink-3); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.server-lm-side-card { border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(0,0,0,.13); padding: 13px; display: grid; gap: 12px; }
.server-lm-side-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.server-lm-side-title strong { color: var(--ink); font-size: 13px; font-weight: 950; }
.server-lm-side-title span { color: var(--ink-3); font-size: 10.5px; font-weight: 800; }
.server-lm-control-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.server-lm-option { min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 12px; background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); text-align: start; transition: border-color var(--t), transform var(--t), background var(--t); }
.server-lm-option:hover { transform: translateY(-1px); border-color: var(--act-ring); background: rgba(255,255,255,.04); }
.server-lm-option-copy { display: grid; gap: 3px; min-width: 0; }
.server-lm-option-copy strong { color: var(--ink); font-size: 12.5px; font-weight: 950; }
.server-lm-option-copy span { color: var(--ink-3); font-size: 10.5px; line-height: 1.55; }
.server-lm-drawer { border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.025); overflow: hidden; }
.server-lm-drawer summary { list-style: none; cursor: pointer; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-size: 12px; font-weight: 950; }
.server-lm-drawer summary::-webkit-details-marker { display: none; }
.server-lm-drawer summary span { color: var(--ink-3); font-size: 10.5px; font-weight: 800; }
.server-lm-drawer-body { border-top: 1px solid var(--line-soft); padding: 12px; display: grid; gap: 12px; }
.server-lm-form { display: grid; gap: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 12px; background: var(--surface-2); }
.server-lm-form label { color: var(--ink-3); font-size: 10.5px; font-weight: 850; }
.server-lm-form-row { display: flex; gap: 8px; align-items: center; }
.server-lm-input, .server-lm-select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 10px 12px; font-size: 12px; outline: none; }
.server-lm-input:focus, .server-lm-select:focus { border-color: var(--act-ring); box-shadow: 0 0 0 3px var(--act-wash); }
.server-lm-input:disabled, .server-lm-select:disabled { opacity: .55; cursor: not-allowed; }
.server-lm-mini-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.server-lm-mini-btn { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); padding: 9px 11px; font-size: 11px; font-weight: 850; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.server-lm-mini-btn:hover { border-color: var(--act-ring); color: var(--ink); transform: translateY(-1px); }
.server-lm-mini-btn:active { transform: translateY(0) scale(.98); }
.server-lm-mini-btn:focus-visible, .server-lm-option:focus-visible, .server-lm-input:focus-visible, .server-lm-select:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.server-lm-mini-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.server-lm-message { padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; line-height: 1.65; }
.server-lm-message.success { color: var(--ok); background: var(--ok-wash); border-color: rgba(79,217,154,.25); }
.server-lm-message.warning { color: var(--warn); background: var(--warn-wash); border-color: rgba(240,188,90,.28); }
.server-lm-message.danger { color: var(--err); background: var(--err-wash); border-color: rgba(240,135,155,.3); }
.server-lm-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.server-lm-side .server-lm-filters { grid-template-columns: 1fr; }
.server-lm-filter-label { color: var(--ink-3); font-size: 10.5px; font-weight: 850; }
.server-lm-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.server-lm-page-btn { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); padding: 7px 10px; font-size: 11px; font-weight: 850; cursor: pointer; }
.server-lm-page-btn:hover { border-color: var(--act-ring); color: var(--ink); }
.server-lm-page-btn:disabled { opacity: .45; cursor: not-allowed; }
.server-lm-trusted-list { display: flex; flex-wrap: wrap; gap: 7px; }
.server-lm-trusted-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); padding: 6px 9px; font-size: 10.5px; font-family: var(--f-mono); direction: ltr; unicode-bidi: embed; }
.server-lm-trusted-chip button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0; }
.server-lm-trusted-chip button:hover { color: var(--err); }
.server-muted-note { padding: 13px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-3); background: var(--surface-2); font-size: 12px; line-height: 1.75; }
@media (max-width: 1180px) { .server-live-hero, .server-overview-layout, .server-lm-console { grid-template-columns: 1fr; } .server-live-side { border-inline-start: 0; border-top: 1px solid var(--line); } .server-resource-matrix, .server-live-facts, .server-lm-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .server-resource-matrix, .server-live-facts, .server-data-grid, .server-action-grid, .server-lm-glance, .server-lm-filters { grid-template-columns: 1fr; } .server-live-title-row, .server-panel-head, .server-lm-form-row, .server-lm-log-head, .server-lm-console-head { display: flex; flex-direction: column; align-items: stretch; } }

/* ── account ── */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.account-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.account-form { display: grid; gap: 16px; }
.account-form-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.account-manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.account-manage-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
    display: grid;
    gap: 8px;
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.account-manage-card:hover { border-color: var(--ink-3); box-shadow: var(--sh-2); transform: translateY(-2px); }
.account-manage-head { display: flex; align-items: center; justify-content: space-between; }
.account-manage-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--act-deep); }
.account-manage-card strong { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.account-manage-card p { font-size: 12px; color: var(--ink-3); }
.member-roster { display: grid; gap: 10px; }
.member-roster-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; display: grid; gap: 6px; background: var(--surface); }
.member-roster-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.member-roster-copy { display: grid; gap: 1px; }
.member-roster-copy strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.member-roster-copy span { font-size: 11.5px; color: var(--ink-3); }
.member-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-roster-top .identity-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; }
.member-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); background: var(--surface-2); }
.account-member { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.account-member:last-child { border-bottom: 0; }
.member-meta { display: grid; gap: 1px; min-width: 0; }
.member-head { display: flex; align-items: center; gap: 8px; }
.member-head strong { font-size: 12.5px; color: var(--ink); }
.member-line { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.social-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.social-provider-card { border: 1px solid var(--line); border-radius: var(--r); padding: 17px; display: grid; gap: 10px; background: var(--surface); }
.social-provider-head { display: flex; align-items: center; gap: 11px; }
.social-provider-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--well);
    color: var(--ink);
    border: 1px solid var(--line-soft);
}
.social-provider-copy { display: grid; gap: 1px; }
.social-provider-copy strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.social-provider-copy span { font-size: 11.5px; color: var(--ink-3); }
.provider-shell { display: grid; gap: 12px; }
.discord-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }

.avatar-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.avatar-choice-card {
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px;
    display: grid;
    gap: 7px;
    background: var(--surface);
    transition: border-color var(--t);
}
.avatar-choice-card:hover { border-color: var(--ink-3); }
.avatar-choice-card.is-active { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.avatar-choice-card.is-disabled { opacity: .45; pointer-events: none; }
.avatar-choice-top { display: flex; align-items: center; justify-content: space-between; }
.avatar-choice-preview { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); }
.avatar-choice-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-choice-preview.is-discord-decorated { --avatar-decor-size: 108%; overflow: visible; }
.avatar-choice-preview.is-discord-decorated .avatar-decoration { inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .22)); }
.avatar-choice-copy { display: grid; gap: 1px; font-size: 11px; color: var(--ink-3); }
.avatar-choice-copy strong { font-size: 12px; color: var(--ink); }

/* ── support hub / ticket workspace ── */
.main[data-v5-view="tickets"] .ink-page-kicker { display: none; }
.main[data-v5-view="tickets"] .ink-page-head { margin-bottom: 12px; }
.main[data-v5-view="tickets"] .ink-page-head-row { justify-content: center; text-align: center; }
.main[data-v5-view="tickets"] .ink-page-title { font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.035em; }
.main[data-v5-view="tickets"] .ink-page-sub { max-width: 680px; margin: 6px auto 0; font-size: 14px; }
.main[data-v5-view="tickets"] .subbar { display: none; }
html[data-theme="light"] .main[data-v5-view="tickets"] { --ink-3: #465f73; --ink-faint: #587083; --ok: #0f704b; --warn: #805308; }
html[dir="ltr"] .main[data-v5-view="tickets"] .fa-arrow-right,
html[dir="ltr"] .support-attention-rail .fa-arrow-left { transform: rotate(180deg); }
.support-hub,
.support-view-shell { display: grid; gap: 22px; }
.support-route-stage { padding: 4px 8px 0; }
.support-route-heading { margin: 0; text-align: center; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.25; letter-spacing: -.025em; color: var(--ink); }
.support-route-map {
    position: relative;
    direction: ltr;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "discord ticket whatsapp";
    gap: clamp(18px, 2.4vw, 34px);
    align-items: end;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 70px;
}
.support-route-map::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 16.2%;
    right: 16.2%;
    height: 20px;
    border-top: 2px dotted var(--line-ink);
    border-radius: 999px;
    opacity: .8;
}
.support-route-map::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--act);
    background: var(--paper);
    box-shadow: 0 0 0 5px var(--act-wash);
    transform: translateX(-50%);
}
.support-route-card {
    direction: rtl;
    position: relative;
    min-height: 184px;
    padding: 48px 20px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
    display: grid;
    align-content: start;
    gap: 12px;
    text-align: center;
    box-shadow: var(--glass-edge);
    transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
html[dir="ltr"] .support-route-card { direction: ltr; }
.support-route-card:hover { transform: translateY(-4px); border-color: var(--line-ink); background: var(--surface); }
.support-route-card:focus-visible { transform: translateY(-4px); border-color: var(--line-ink); background: var(--surface); outline: 3px solid var(--act); outline-offset: 3px; box-shadow: 0 0 0 3px var(--act-ring), var(--glass-edge); }
html[data-theme="light"] .support-route-card:focus-visible { outline-color: var(--act-deep); }
.support-route-card.is-ticket { grid-area: ticket; min-height: 218px; transform: translateY(-16px); border-color: var(--act); box-shadow: var(--glass-edge), 0 12px 34px -24px var(--act); }
.support-route-card.is-ticket:hover { transform: translateY(-21px); box-shadow: var(--glass-edge), var(--act-glow); }
.support-route-card.is-ticket:focus-visible { transform: translateY(-21px); box-shadow: 0 0 0 3px var(--act-ring), var(--glass-edge), var(--act-glow); }
.support-route-card.is-whatsapp { grid-area: whatsapp; }
.support-route-card.is-discord { grid-area: discord; }
.support-route-card.is-email { grid-area: email; }
.support-route-icon {
    position: absolute;
    inset-block-start: -31px;
    inset-inline-start: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-ink);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 24px;
    box-shadow: 0 8px 22px -14px rgba(0,0,0,.8);
}
[dir="rtl"] .support-route-icon { transform: translateX(50%); }
.support-route-card.is-ticket .support-route-icon { width: 70px; height: 70px; inset-block-start: -36px; color: var(--act); border-color: var(--act); font-size: 27px; box-shadow: 0 0 0 5px var(--act-wash); }
.support-route-card.is-whatsapp .support-route-icon { color: #35d58b; border-color: rgba(53, 213, 139, .52); }
.support-route-card.is-discord .support-route-icon { color: #8ea1ff; border-color: rgba(142, 161, 255, .5); }
.support-route-card.is-email .support-route-icon { color: #55d9ef; border-color: rgba(85, 217, 239, .5); }
.support-route-card h3 { margin: 0; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.4; }
.support-route-card p { margin: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.65; }
.support-route-cta {
    min-height: 44px;
    padding: 9px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 800;
    color: var(--ink);
    transition: border-color var(--t), color var(--t), background var(--t);
}
.support-route-card.is-ticket .support-route-cta { border-color: transparent; background: var(--act-grad); color: var(--on-act); box-shadow: var(--act-glow); }
.support-route-card.is-whatsapp .support-route-cta { color: #55e3a5; border-color: rgba(53, 213, 139, .55); }
.support-route-card.is-discord .support-route-cta { color: #a8b5ff; border-color: rgba(142, 161, 255, .55); }
.support-route-card.is-email .support-route-cta { color: #76e5f5; border-color: rgba(85, 217, 239, .55); font-size: 12px; overflow-wrap: anywhere; }
html[data-theme="light"] .support-route-card.is-whatsapp .support-route-cta { color: #12744d; }
html[data-theme="light"] .support-route-card.is-discord .support-route-cta { color: #4c5ec5; }
html[data-theme="light"] .support-route-card.is-email .support-route-cta { color: #087086; }
.support-privacy-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-size: 12px; line-height: 1.6; text-align: center; }
.support-privacy-note i { color: var(--act); }
.support-attention-rail {
    min-height: 54px;
    padding: 12px 16px;
    border: 1px solid rgba(240,188,90,.4);
    border-radius: var(--r-sm);
    background: var(--warn-wash);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.support-attention-rail strong { color: var(--warn); }
.support-attention-rail a { color: var(--warn); font-weight: 800; text-decoration: none; white-space: nowrap; }
.support-ticket-panel,
.support-form-panel,
.support-guide-panel,
.support-conversation-panel,
.support-summary-panel,
.support-channel-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--glass-edge), var(--sh-1);
}
.support-ticket-panel { padding: clamp(18px, 2vw, 28px); }
.support-ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.support-ticket-title { display: grid; gap: 3px; }
.support-ticket-title h2,
.support-form-heading h2,
.support-conversation-heading h2,
.support-channel-copy h2 { margin: 0; color: var(--ink); font-size: clamp(21px, 2vw, 29px); letter-spacing: -.02em; }
.support-ticket-title p,
.support-form-heading p,
.support-conversation-heading p,
.support-channel-copy p { margin: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }
.support-ticket-head-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.support-response-time { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.support-ticket-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.support-ticket-stat { min-height: 42px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--well); display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 11.5px; }
.support-ticket-stat strong { color: var(--ink); font-size: 19px; font-family: var(--f-mono); }
.support-ticket-stat.is-open { border-color: rgba(79,217,154,.32); }
.support-ticket-stat.is-open strong { color: var(--ok); }
.support-ticket-stat.is-waiting { border-color: rgba(240,188,90,.36); }
.support-ticket-stat.is-waiting strong { color: var(--warn); }
.support-ticket-list { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.support-ticket-list-head,
.support-ticket-row { display: grid; grid-template-columns: minmax(110px,.85fr) minmax(240px,2.2fr) minmax(145px,1fr) minmax(135px,1fr) minmax(130px,.9fr); gap: 14px; align-items: center; }
.support-ticket-list-head { min-height: 42px; padding: 8px 14px; color: var(--ink-3); background: var(--well); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; }
.support-ticket-row { min-height: 68px; padding: 11px 14px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-soft); transition: background var(--t); }
.support-ticket-row:last-child { border-bottom: 0; }
.support-ticket-row:hover { background: var(--act-wash); }
.support-ticket-row:focus-visible { background: var(--act-wash); outline: 3px solid var(--act); outline-offset: -3px; box-shadow: inset 0 0 0 2px var(--act); }
html[data-theme="light"] .support-ticket-row:focus-visible { outline-color: var(--act-deep); }
.support-ticket-id { font-family: var(--f-mono); direction: ltr; unicode-bidi: isolate; color: var(--ink); font-size: 11.5px; }
.support-ticket-subject { min-width: 0; }
.support-ticket-subject strong { display: block; color: var(--ink); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-subject small,
.support-ticket-updated { color: var(--ink-3); font-size: 10.5px; }
.support-ticket-updated { direction: ltr; unicode-bidi: isolate; text-align: start; }
.support-status { display: inline-flex; align-items: center; width: fit-content; gap: 7px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-2); font-size: 10.5px; font-weight: 800; }
.support-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.support-status.is-open { color: var(--info); border-color: rgba(79,177,246,.34); background: var(--info-wash); }
.support-status.is-answered { color: var(--warn); border-color: rgba(240,188,90,.38); background: var(--warn-wash); }
.support-status.is-waiting { color: var(--ok); border-color: rgba(79,217,154,.3); background: var(--ok-wash); }
.support-status.is-closed { color: var(--ink-3); background: var(--well); }
.support-ticket-action { justify-self: start; min-height: 36px; padding: 6px 11px; border: 1px solid var(--line-ink); border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 10.5px; font-weight: 800; }
.support-ticket-footer { margin-top: 14px; display: flex; justify-content: center; }
.support-ticket-footer a { color: var(--act); text-decoration: none; font-size: 11.5px; font-weight: 800; }
.support-empty { min-height: 190px; display: grid; place-items: center; gap: 10px; padding: 26px; text-align: center; border: 1px dashed var(--line-ink); border-radius: var(--r-sm); }
.support-empty i { font-size: 28px; color: var(--ink-faint); }
.support-empty h3 { margin: 0; font-size: 18px; color: var(--ink); }
.support-empty p { margin: 0; color: var(--ink-3); font-size: 12px; }
.support-empty .btn { margin-top: 5px; }
.support-workspace { display: grid; gap: 24px; direction: ltr; align-items: start; }
.support-workspace > * { direction: rtl; }
html[dir="ltr"] .support-workspace > * { direction: ltr; }
.support-form-workspace { grid-template-columns: minmax(250px,.8fr) minmax(0,2fr); grid-template-areas: "guide form"; }
html[dir="ltr"] .support-form-workspace { grid-template-areas: "form guide"; }
.support-form-panel { grid-area: form; padding: clamp(20px, 2.5vw, 34px); }
.support-guide-panel { grid-area: guide; padding: 24px; }
.support-form-heading,
.support-conversation-heading { display: grid; gap: 5px; margin-bottom: 24px; }
.support-ticket-form { display: grid; gap: 18px; }
.support-ticket-form .form-field { gap: 8px; }
.support-ticket-form .form-field > span { color: var(--ink-2); font-size: 12px; font-weight: 800; }
.support-ticket-form input,
.support-ticket-form select,
.support-ticket-form textarea,
.support-reply-form textarea { width: 100%; box-sizing: border-box; }
.support-ticket-form input,
.support-ticket-form select { min-height: 50px; }
.support-ticket-form textarea { min-height: 150px; resize: vertical; }
.support-field-help { color: var(--ink-3); font-size: 10.5px; line-height: 1.6; }
.support-form-meta { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(0,1.35fr); gap: 18px; align-items: end; }
.support-form-submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.support-form-submit .btn { min-width: 230px; min-height: 50px; }
.support-guide-panel h2,
.support-summary-panel h2 { margin: 0 0 16px; color: var(--act); font-size: 21px; }
.support-guide-list { display: grid; gap: 0; }
.support-guide-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; min-height: 92px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: 12px; line-height: 1.7; }
.support-guide-item:last-child { border-bottom: 0; }
.support-guide-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--act); border: 1px solid var(--line-ink); background: var(--well); }
.support-guide-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; color: var(--ink-2); font-size: 12px; }
.support-guide-alt a { min-height: 44px; border: 1px solid rgba(53,213,139,.48); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; gap: 8px; color: #55e3a5; text-decoration: none; font-weight: 800; }
html[data-theme="light"] .support-guide-alt a { color: #12744d; }
.support-conversation-workspace { grid-template-columns: minmax(0,2.1fr) minmax(260px,.8fr); grid-template-areas: "conversation summary"; }
html[dir="ltr"] .support-conversation-workspace { grid-template-areas: "summary conversation"; }
.support-conversation-panel { grid-area: conversation; padding: clamp(20px, 2.2vw, 30px); }
.support-summary-panel { grid-area: summary; padding: 24px; }
.support-conversation-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--ink-3); font-size: 11px; }
.support-conversation-meta code { font-family: var(--f-mono); color: var(--ink-2); }
.support-thread { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.support-thread-title { min-height: 44px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: var(--well); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 800; }
.support-message { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line-soft); }
.support-message:last-child { border-bottom: 0; }
.support-message.is-latest { background: var(--act-wash); box-shadow: inset 3px 0 0 var(--act); }
[dir="rtl"] .support-message.is-latest { box-shadow: inset -3px 0 0 var(--act); }
.support-message-author { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 800; }
.support-message-author i { color: var(--act); }
.support-message-body { margin: 8px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.support-message time { direction: ltr; unicode-bidi: isolate; color: var(--ink-3); font-family: var(--f-mono); font-size: 9.5px; white-space: nowrap; }
.support-reply-form { display: grid; gap: 11px; margin-top: 20px; }
.support-reply-form label { color: var(--ink); font-size: 13px; font-weight: 800; }
.support-reply-form textarea { min-height: 112px; resize: vertical; }
.support-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.support-summary-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.support-summary-row { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); font-size: 11px; }
.support-summary-row:last-child { border-bottom: 0; }
.support-summary-row strong { color: var(--ink-2); text-align: end; }
.support-summary-panel .support-guide-alt { margin-top: 18px; }
.support-channel-panel { padding: clamp(24px, 4vw, 54px); min-height: 420px; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(240px,.75fr); gap: 38px; align-items: center; }
.support-channel-copy { display: grid; gap: 14px; }
.support-channel-mark { width: 86px; height: 86px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--well); border: 1px solid var(--line-ink); font-size: 36px; }
.support-channel-panel.is-whatsapp .support-channel-mark { color: #35d58b; border-color: rgba(53,213,139,.5); }
.support-channel-panel.is-discord .support-channel-mark { color: #8ea1ff; border-color: rgba(142,161,255,.5); }
.support-channel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.support-channel-actions .btn { min-height: 46px; }
.support-channel-security { padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); display: grid; gap: 10px; color: var(--ink-2); font-size: 12px; line-height: 1.8; }
.support-channel-security i { color: var(--act); font-size: 22px; }
.contact-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.contact-card { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 9px; background: var(--surface); }
.contact-whatsapp .btn.primary { background: #1f9d55; border-color: #1f9d55; }
.contact-discord .btn.primary { background: #5865f2; border-color: #5865f2; }

@media (max-width: 1100px) {
    .support-route-map { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "discord ticket whatsapp"; gap: 18px; }
    .support-route-map::before { display: none; }
    .support-ticket-list-head,
    .support-ticket-row { grid-template-columns: 105px minmax(190px,2fr) 120px 125px 110px; gap: 10px; }
    .support-workspace { grid-template-columns: 1fr; }
    .support-form-workspace,
    html[dir="ltr"] .support-form-workspace { grid-template-areas: "form" "guide"; }
    .support-conversation-workspace,
    html[dir="ltr"] .support-conversation-workspace { grid-template-areas: "conversation" "summary"; }
    .support-channel-panel { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .main[data-v5-view="tickets"] .ink-page-head { margin-bottom: 8px; }
    .main[data-v5-view="tickets"] .subbar { margin-bottom: 18px; }
    .support-route-stage { padding-inline: 0; }
    .support-route-heading { text-align: start; font-size: 25px; }
    .support-route-map { grid-template-columns: 1fr; grid-template-areas: "ticket" "whatsapp" "discord"; gap: 14px; padding-top: 50px; }
    .support-route-map::before { display: none; }
    .support-route-map::after { top: 18px; }
    .support-route-card,
    .support-route-card.is-ticket { min-height: 0; transform: none; padding: 20px 68px 20px 16px; text-align: start; }
    html[dir="ltr"] .support-route-card,
    html[dir="ltr"] .support-route-card.is-ticket { padding: 20px 16px 20px 68px; }
    .support-route-card.is-ticket:hover,
    .support-route-card.is-ticket:focus-visible,
    .support-route-card:hover,
    .support-route-card:focus-visible { transform: translateY(-2px); }
    .support-route-icon,
    .support-route-card.is-ticket .support-route-icon { inset-block-start: 18px; inset-inline-start: 16px; width: 40px; height: 40px; transform: none; font-size: 17px; box-shadow: none; }
    [dir="rtl"] .support-route-icon { transform: none; }
    .support-route-card.is-ticket .support-route-icon { box-shadow: 0 0 0 4px var(--act-wash); }
    .support-route-cta { justify-content: flex-start; min-height: 40px; }
    .support-privacy-note { justify-content: flex-start; text-align: start; }
    .support-attention-rail,
    .support-ticket-head,
    .support-form-submit,
    .support-reply-actions { align-items: stretch; flex-direction: column; }
    .support-ticket-head-actions { width: 100%; align-items: stretch; }
    .support-ticket-head-actions .btn { flex: 1; }
    .support-ticket-stats { grid-template-columns: 1fr; }
    .support-ticket-list { border: 0; display: grid; gap: 10px; overflow: visible; }
    .support-ticket-list-head { display: none; }
    .support-ticket-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; min-height: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--well); }
    .support-ticket-row:last-child { border-bottom: 1px solid var(--line); }
    .support-ticket-subject { grid-column: 1 / -1; grid-row: 1; }
    .support-ticket-id { grid-column: 1; grid-row: 2; }
    .support-ticket-updated { grid-column: 1; grid-row: 3; }
    .support-status { grid-column: 2; grid-row: 2; }
    .support-ticket-action { grid-column: 2; grid-row: 3; }
    .support-form-panel,
    .support-guide-panel,
    .support-conversation-panel,
    .support-summary-panel,
    .support-channel-panel { padding: 18px; }
    .support-form-meta { grid-template-columns: 1fr; }
    .support-form-submit .btn { width: 100%; min-width: 0; }
    .support-message { grid-template-columns: 1fr; }
    .support-message time { grid-row: 1; justify-self: start; }
    .support-channel-panel { min-height: 0; gap: 24px; }
}
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.info-box { display: grid; gap: 4px; }
.info-box strong { color: var(--ink); }

@media (max-width: 1080px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .server-spotlight { grid-template-columns: 1fr; }
    .server-spotlight-side { border-inline-start: 0; border-top: 1px solid var(--line); }
    .dashboard-hero { grid-template-columns: 1fr; }
    .dashboard-hero-meta { min-width: 0; width: 100%; }
}
@media (max-width: 700px) {
    .metrics { grid-template-columns: 1fr 1fr; }
    .metric { border-bottom: 1px solid var(--line-soft); }
    .dashboard-hero { padding: 16px; }
    .dashboard-hero-meta { grid-template-columns: 1fr; }
    .dashboard-greeting { font-size: clamp(22px, 7vw, 28px); }
    .server-power-group { width: 100%; margin-inline-start: 0; }
    .server-power-btn { flex: 1; justify-content: center; }
    .server-cred-bar { max-width: none; }
    .panel, .side-panel, .table-panel { padding: 16px; }
    .table-wrap { margin: 0 -16px; padding: 0 16px; }
}
/* ═══ INK 05 — buy flow, payment, modals ═══ */

.catalog-studio { display: grid; gap: 16px; }
.catalog-focus-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.catalog-focus-card, .catalog-side-panel, .catalog-summary-card,
.v5-payment-panel, .v5-viewcart-panel {
    padding: 20px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--sh-1);
}
.catalog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--act-deep);
}
.catalog-kicker::before { content: ""; width: 18px; height: 2px; background: var(--act); }
.catalog-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.catalog-checkout-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.catalog-summary-actions { display: grid; gap: 8px; }
.catalog-summary-actions .btn { width: 100%; }
.catalog-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.catalog-summary-meta { display: grid; gap: 2px; }
.catalog-summary-note { font-size: 11px; color: var(--ink-3); }
.catalog-summary-price { font-size: 26px; font-weight: 700; font-family: var(--f-mono); letter-spacing: -.04em; color: var(--ink); }
.catalog-plan-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 11px;
    color: var(--ink-2);
    background: var(--surface-2);
}
.catalog-gateway-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--well);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    flex-shrink: 0;
}

/* family + cycle tabs — underline editorial tabs */
.catalog-family-tabs, .buy-vps-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.catalog-family-tabs a, .catalog-family-tabs button, .buy-vps-tab, .catalog-family-tab {
    padding: 9px 15px 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    position: relative;
    transition: color var(--t);
    border: 0;
    background: none;
    border-radius: 0;
}
.catalog-family-tabs a:hover, .buy-vps-tab:hover, .catalog-family-tab:hover { color: var(--ink); background: none; }
.catalog-family-tabs a.is-active, .catalog-family-tabs a.active, .buy-vps-tab.is-active, .buy-vps-tab.active,
.catalog-family-tab.is-active, .catalog-family-tab.active { color: var(--ink); font-weight: 700; background: none; border: 0; box-shadow: none; }
.catalog-family-tabs a.is-active::after, .catalog-family-tabs a.active::after, .buy-vps-tab.is-active::after, .buy-vps-tab.active::after,
.catalog-family-tab.is-active::after, .catalog-family-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline: 10px;
    height: 2px;
    background: var(--act);
}

.v5-features-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), var(--surface-2);
    box-shadow: var(--sh-1);
}
.v5-feat {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.035);
    white-space: normal;
    transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.v5-feat:hover {
    transform: translateY(-2px);
    border-color: var(--act-ring);
    background: var(--act-wash);
    box-shadow: var(--act-glow);
}
.v5-feat-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--well);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    flex-shrink: 0;
    transition: transform .22s ease, background var(--t), box-shadow var(--t), border-color var(--t);
}
.v5-feat-icon img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}
.v5-feat:hover .v5-feat-icon {
    transform: translateY(-4px) scale(1.08) rotate(-4deg);
    background: rgba(255,255,255,.12);
    border-color: var(--act-ring);
    box-shadow: var(--act-glow-hover);
}
html[dir="ltr"] .v5-feat:hover .v5-feat-icon { transform: translateY(-4px) scale(1.08) rotate(4deg); }
.v5-feat-name { color: var(--ink-3); }
.v5-feat-val { color: var(--ink); font-weight: 700; direction: ltr; unicode-bidi: embed; }

.v5-browse-cycle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 20px 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
}
.v5-browse-cycle-label { font-size: 12px; font-weight: 800; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.v5-browse-cycle-tabs { display: inline-flex; gap: 6px; flex-wrap: wrap; border: 0; border-radius: 0; overflow: visible; background: none; }
.v5-browse-cycle-tabs a, .v5-browse-cycle-tabs button, .v5-browse-cycle-tab {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.v5-browse-cycle-tabs a:last-child, .v5-browse-cycle-tabs button:last-child { border-inline-end: 1px solid var(--line); }
.v5-browse-cycle-tabs a:hover, .v5-browse-cycle-tabs button:hover, .v5-browse-cycle-tab:hover { transform: translateY(-1px); border-color: var(--act-ring); color: var(--ink); }
.v5-browse-cycle-tabs .is-active, .v5-browse-cycle-tabs .active, .v5-browse-cycle-tab.is-active {
    background: var(--act);
    color: var(--on-act);
    border-color: var(--act);
    box-shadow: var(--act-glow);
}
.v5-cycle-label { font-size: 11px; color: var(--ink-3); }
.v5-save-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ok-wash);
    border: 1px solid rgba(26,122,77,.3);
    color: var(--ok);
    font-size: 10px;
    font-weight: 700;
}

/* pricing cards — editorial price table */
.v5-pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 4px; }
.v5-pricing-card {
    position: relative;
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    overflow: hidden;
}
.v5-pricing-card::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: var(--act);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.v5-pricing-card:hover { border-color: var(--ink-3); box-shadow: var(--sh-2); transform: translateY(-3px); }
.v5-pricing-card:hover::after { transform: scaleX(1); }
.v5-pricing-card-head { display: grid; gap: 4px; }
.v5-pricing-card-head strong { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.v5-pricing-price { font-size: 27px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); display: flex; align-items: baseline; gap: 6px; flex-direction: row-reverse; justify-content: flex-end; }
html[lang="en"] .v5-pricing-price { flex-direction: row; justify-content: flex-start; }
.v5-pricing-price .v5-cycle-label { font-family: var(--f-sans); letter-spacing: 0; }
.v5-pricing-features { display: grid; gap: 7px; font-size: 12px; color: var(--ink-2); }
.v5-pricing-features li, .v5-pricing-features div { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.v5-pricing-features li:last-child { border-bottom: 0; }
.v5-pricing-features i { color: var(--act-deep); font-size: 11px; }
.v5-plan-order-btn, .v5-order-btn { width: 100%; }
.v5-plan-os-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--warn);
    background: var(--warn-wash);
    border: 1px solid rgba(240, 188, 90, .35);
    border-radius: var(--r-sm);
    padding: 7px 11px;
}
.v5-plan-os-note i { flex-shrink: 0; }

/* stepper — numbered editorial line */
.v5-stepper-new {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}
.v5-stepper-step { display: flex; align-items: center; gap: 10px; opacity: .45; transition: opacity var(--t); }
.v5-stepper-step.is-active, .v5-stepper-step.is-done { opacity: 1; }
.v5-stepper-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--f-mono);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-3);
    flex-shrink: 0;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.v5-stepper-step.is-active .v5-stepper-circle { background: var(--act); color: var(--on-act); border-color: var(--act); }
.v5-stepper-step.is-done .v5-stepper-circle { background: var(--ok-wash); color: var(--ok); border-color: var(--ok); }
.v5-stepper-info { display: grid; }
.v5-stepper-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.v5-stepper-sub { font-size: 10px; color: var(--ink-3); }
.v5-stepper-connector { flex: 1; height: 1px; background: var(--line); min-width: 18px; transition: background var(--t); }
.v5-stepper-connector.is-done { background: var(--ok); box-shadow: none; }

.v5-stage-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.v5-order-essentials {
    display: grid;
    gap: 14px;
    margin: 16px 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
}
.v5-order-essentials-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.v5-order-essentials-head > div { display:grid; gap:5px; }
.v5-order-essentials-head small { color:var(--act); font-size:10px; font-weight:800; }
.v5-order-essentials-head h2 { margin:0; color:var(--ink); font-size:18px; line-height:1.45; }
.v5-order-essentials-head p { margin:0; color:var(--ink-3); font-size:12px; line-height:1.7; }
.v5-order-qty {
    display:inline-flex; min-width:92px; min-height:38px; align-items:center; justify-content:center; gap:7px;
    padding:0 12px; border:1px solid var(--act); border-radius:999px; background:var(--act-wash);
    color:var(--act-deep); font-size:12px; font-weight:800; white-space:nowrap;
}
html:not([data-theme="light"]) .v5-order-qty { color:var(--act); }
.v5-order-fact-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.v5-order-fact {
    display:grid; min-width:0; gap:5px; padding:13px; border:1px solid var(--line-soft);
    border-radius:var(--r-sm); background:var(--well);
}
.v5-order-fact > span { display:flex; align-items:center; gap:7px; color:var(--ink-3); font-size:10px; font-weight:700; }
.v5-order-fact > span i { color:var(--act); }
.v5-order-fact strong { color:var(--ink); font-size:12.5px; line-height:1.45; }
.v5-order-fact small { color:var(--ink-3); font-size:10px; line-height:1.55; }
.v5-order-plan-specs { display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--line-soft); }
.v5-order-plan-specs > strong { color:var(--ink-2); font-size:12px; }
.v5-order-plan-specs ul { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.v5-order-plan-specs li {
    display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px 10px;
    border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-2);
    font-size:10.5px; font-weight:650;
}
.v5-order-plan-specs li i { color:var(--ok); }
.v5-order-system-note { display:flex; align-items:flex-start; gap:9px; margin:0; color:var(--ink-3); font-size:11px; line-height:1.7; }
.v5-order-system-note i { margin-top:4px; color:var(--act); }
.v5-extra-storage {
    display:grid; gap:13px; margin:0 0 14px; padding:16px; border:1px solid var(--line);
    border-radius:var(--r); background:var(--surface);
}
.v5-extra-storage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.v5-extra-storage-title { display:flex; align-items:flex-start; gap:11px; }
.v5-extra-storage-icon {
    display:inline-flex; width:38px; height:38px; flex:0 0 38px; align-items:center; justify-content:center;
    border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--well); color:var(--act);
}
.v5-extra-storage-copy { display:grid; gap:3px; }
.v5-extra-storage-copy strong { color:var(--ink); font-size:13px; }
.v5-extra-storage-copy span { color:var(--ink-3); font-size:10.5px; line-height:1.65; }
.v5-extra-storage-optional { color:var(--ink-3); font-size:10px; font-weight:750; white-space:nowrap; }
.v5-extra-storage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.v5-extra-storage-choice {
    display:grid; gap:4px; min-width:0; min-height:76px; padding:12px; border:1px solid var(--line);
    border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink-2); text-align:start;
    font-family:inherit; cursor:pointer; transition:border-color var(--t), background var(--t), box-shadow var(--t);
}
.v5-extra-storage-choice:hover { border-color:var(--ink-3); }
.v5-extra-storage-choice.is-selected {
    border-color:var(--act); background:var(--act-wash); box-shadow:0 0 0 1px var(--act);
}
.v5-extra-storage-choice strong { color:var(--ink); font-size:12.5px; line-height:1.45; }
.v5-extra-storage-choice span { color:var(--act-deep); font-size:10px; font-weight:750; line-height:1.55; }
.v5-extra-storage-choice [dir="ltr"], .v5-cart-mini-specs [dir="ltr"] { direction:ltr; unicode-bidi:isolate; }
html:not([data-theme="light"]) .v5-extra-storage-choice span { color:var(--act); }
.v5-extra-storage-note { display:flex; align-items:flex-start; gap:7px; margin:0; color:var(--ink-3); font-size:10px; line-height:1.6; }
.v5-extra-storage-note i { margin-top:3px; color:var(--act); }
.v5-cart-mini-specs { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.v5-cart-mini-specs span {
    display:inline-flex; align-items:center; min-height:22px; padding:3px 7px; border:1px solid var(--line-soft);
    border-radius:999px; background:var(--well); color:var(--ink-3); font-size:9px; font-weight:650;
}
.v5-stage-footer, .v5-configure-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
}
.v5-footer-back { color: var(--ink-3); }
.v5-footer-next { min-width: 180px; }
.v5-back-btn { color: var(--ink-3); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; }
.v5-back-btn:hover { color: var(--ink); }

/* OS picker */
.v5-os-picker { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.v5-os-picker-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background var(--t); }
.v5-os-picker-header:hover { background: var(--surface-2); }
.v5-os-picker-icon {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--well);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    flex-shrink: 0;
}
.v5-os-picker-toggle { margin-inline-start: auto; color: var(--ink-3); transition: transform var(--t); }
.v5-os-picker.is-open .v5-os-picker-toggle { transform: rotate(-180deg); }
.v5-os-picker-body { padding: 4px 16px 16px; display: grid; gap: 14px; }
.v5-os-step-label { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.v5-os-step-num {
    width: 21px; height: 21px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--act);
    color: var(--on-act);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--f-mono);
    flex-shrink: 0;
}
.v5-os-family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; }
.v5-os-family-grid label, .v5-os-family-grid button, .v5-os-family-tile {
    display: grid;
    gap: 7px;
    justify-items: center;
    padding: 13px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    transition: border-color var(--t), box-shadow var(--t);
}
.v5-os-family-grid label:hover, .v5-os-family-grid button:hover, .v5-os-family-tile:hover { border-color: var(--ink-3); transform: none; }
.v5-os-family-grid .is-selected, .v5-os-family-grid label:has(input:checked), .v5-os-family-tile.is-selected {
    border-color: var(--act);
    box-shadow: 0 0 0 1px var(--act);
    background: var(--act-wash);
}
.v5-os-family-icon {
    width: 42px; height: 42px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: #fff;
    border: 1px solid var(--line-soft);
}
.v5-os-logo { width: 24px; height: 24px; object-fit: contain; display: block; }
.v5-os-family-icon.ubuntu { color: #d44a14; }
.v5-os-family-icon.debian { color: #a80030; }
.v5-os-family-icon.centos, .v5-os-family-icon.alma { color: #6d9416; }
.v5-os-family-icon.rocky { color: #10b981; }
.v5-os-family-icon.windows { color: #0067b8; }
html:not([data-theme="light"]) .v5-os-family-icon.ubuntu { color: #ff7a4d; }
html:not([data-theme="light"]) .v5-os-family-icon.debian { color: #e85d80; }
html:not([data-theme="light"]) .v5-os-family-icon.centos, html:not([data-theme="light"]) .v5-os-family-icon.alma { color: #b6e04a; }
html:not([data-theme="light"]) .v5-os-family-icon.windows { color: #58b0f0; }
.v5-os-family-name { font-size: 11px; }
.v5-os-versions-wrap { display: grid; gap: 8px; }
.v5-os-version-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.v5-os-version-grid label, .v5-os-version-grid button, .v5-os-version-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    transition: border-color var(--t);
}
.v5-os-version-grid label:hover, .v5-os-version-card:hover { border-color: var(--ink-3); }
.v5-os-version-grid .is-selected, .v5-os-version-grid label:has(input:checked), .v5-os-version-card.is-selected {
    border-color: var(--act);
    box-shadow: 0 0 0 1px var(--act);
    background: var(--act-wash);
    color: var(--ink);
}
.v5-version-check { color: var(--act-deep); }
.v5-version-name { flex: 1; }
.v5-os-hint { font-size: 11px; color: var(--ink-3); }

/* qty */
.v5-qty-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.v5-qty-btn {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 700;
    border-radius: 0;
    transition: background var(--t);
}
.v5-qty-btn:hover { background: var(--well); color: var(--ink); }
.v5-qty-control input { width: 46px; min-height: 0; text-align: center; background: none; border: 0; box-shadow: none; color: var(--ink); font-weight: 700; font-family: var(--f-mono); font-size: 14px; }

/* forms / account selector */
.v5-naf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v5-naf-full { grid-column: 1 / -1; }
.v5-naf-section { display: grid; gap: 12px; }
.v5-naf-section-title { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.v5-naf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.v5-new-account-form { display: none; }
.v5-new-account-form.is-open { display: grid; gap: 14px; }
.v5-account-selector { display: grid; gap: 10px; }
.v5-account-selector-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v5-acct-card { position: relative; }
.v5-acct-radio { position: absolute; opacity: 0; pointer-events: none; }
.v5-acct-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t), box-shadow var(--t);
}
.v5-acct-card-inner:hover { border-color: var(--ink-3); }
.v5-acct-radio:checked + .v5-acct-card-inner, .v5-acct-card.is-selected .v5-acct-card-inner {
    border-color: var(--act);
    box-shadow: 0 0 0 1px var(--act);
    background: var(--act-wash);
}
.v5-acct-dot {
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 2px solid var(--line);
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--t);
}
.v5-acct-radio:checked + .v5-acct-card-inner .v5-acct-dot { border-color: var(--act); }
.v5-acct-radio:checked + .v5-acct-card-inner .v5-acct-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--act);
}
.v5-acct-info { display: grid; gap: 1px; min-width: 0; flex: 1; }
.v5-acct-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.v5-acct-addr { font-size: 11px; color: var(--ink-3); }
.v5-acct-badge { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-size: 9.5px; font-weight: 700; flex-shrink: 0; }
.v5-acct-badge.is-green { background: var(--ok-wash); color: var(--ok); border-color: rgba(26,122,77,.3); }
.v5-acct-badge.is-amber { background: var(--warn-wash); color: var(--warn); border-color: rgba(148,99,18,.3); }
.v5-acct-edit { color: var(--act-deep); font-size: 11.5px; font-weight: 700; }
.v5-add-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    color: var(--act-deep);
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    transition: border-color var(--t), background var(--t);
}
.v5-add-more:hover { border-color: var(--act); background: var(--act-wash); }
.v5-tos-label { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.v5-tos-label a { color: var(--act-deep); font-weight: 700; }
.v5-required { color: var(--err); }

/* payment */
.v5-payment-panel { display: grid; gap: 18px; padding: 24px; }
.v5-payment-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0; }
.v5-payment-panel-head h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
.v5-payment-method-section { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.v5-payment-method-section > p { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.v5-payment-method-section > p i { color: var(--act); }
html[data-theme="light"] .v5-payment-method-section > p i { color: var(--act-deep); }
.v5-gateway-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.v5-gateway-grid label, .v5-gateway-grid .v5-gw-card, .v5-gateway-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t), box-shadow var(--t);
}
.v5-gateway-grid label:hover, .v5-gateway-card:hover { border-color: var(--ink-3); }
.v5-gateway-grid label:has(input:checked), .v5-gateway-grid .is-selected,
.v5-gateway-card.is-selected, .v5-gateway-card:has(input:checked) {
    border-color: var(--act);
    box-shadow: 0 0 0 1px var(--act);
    background: var(--act-wash);
}
.v5-gw-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.v5-pay-gateway-switch { display: grid; gap: 10px; }
.v5-pay-gateway-switch-head { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.v5-pay-gateway-switch-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.v5-pay-gateway-switch-tabs a, .v5-pay-gateway-switch-tabs button, .v5-pay-gateway-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    transition: border-color var(--t), background var(--t);
}
.v5-pay-gateway-switch-tabs a:hover, .v5-pay-gateway-tab:hover { border-color: var(--ink-3); }
.v5-pay-gateway-switch-tabs .is-active, .v5-pay-gateway-tab.is-active {
    border-color: var(--act);
    box-shadow: 0 0 0 1px var(--act);
    background: var(--act-wash);
    color: var(--ink);
}
.v5-pay-gateway-tick { color: var(--act-deep); }
.v5-pay-gateway-tab-info { font-size: 11px; color: var(--ink-3); }
.v5-service-pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 32px;
    padding: 0 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--warn);
    background: var(--surface);
    color: var(--warn);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.v5-service-pay-btn:hover { background: var(--warn); color: #fff; }
.v5-service-pay-btn:active { transform: scale(.98); }
.v5-service-pay-btn i { color: inherit; }
.invoice-delete-form { margin: 0; }
.invoice-delete-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(248,113,113,.42); background: rgba(248,113,113,.08); font-family: inherit; color: var(--err); font-weight: 800; font-size: 11.5px; cursor: pointer; transition: background var(--t), border-color var(--t), transform var(--t), opacity var(--t); }
.invoice-delete-btn:hover { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.65); }
.invoice-delete-btn:active { transform: scale(.98); }
.invoice-delete-btn.is-busy { opacity: .78; pointer-events: none; }
.v5-invoice-removing { pointer-events: none; animation: v5InvoiceItemOut .36s cubic-bezier(.22, 1, .36, 1) both; }
.table tbody tr.v5-invoice-removing { animation: none; }
.table tbody tr.v5-invoice-removing td { animation: v5InvoiceCellOut .36s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes v5InvoiceItemOut { to { opacity: 0; transform: translateY(-8px) scale(.985); filter: blur(3px); } }
@keyframes v5InvoiceCellOut { to { opacity: 0; transform: translateY(-7px); filter: blur(3px); } }
.v5-credit-info {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 12px 15px;
    border: 1px solid rgba(79, 217, 154, .3);
    border-radius: var(--r-sm);
    background: var(--ok-wash);
    font-size: 12.5px;
    color: var(--ink-2);
}
.v5-security-note { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }

/* promo + totals */
.v5-promo-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.v5-promo-row label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.v5-promo-row label i { color: var(--act); }
html[data-theme="light"] .v5-promo-row label i { color: var(--act-deep); }
.v5-promo-row input { flex: 1; min-width: 180px; max-width: 360px; }
.v5-promo-row button {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 700;
    font-size: 12.5px;
    transition: border-color var(--t), color var(--t);
}
.v5-promo-row button:hover { border-color: var(--act); color: var(--act); }
.v5-promo-applied { color: var(--ok); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.v5-promo-error { color: var(--err); font-size: 12px; font-weight: 700; }
.v5-order-summary-body { display: grid; gap: 10px; }
.v5-order-summary-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.v5-order-summary-table td { padding: 9px 4px; border-bottom: 1px solid var(--line-soft); }
.v5-order-totals { display: grid; gap: 0; padding: 0; max-width: 420px; margin-inline-start: auto; width: 100%; }
.v5-total-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.v5-total-row:last-child { border-bottom: 0; }
.v5-total-row.is-main { padding-top: 13px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.v5-total-row.is-main strong { font-size: 19px; font-weight: 700; color: var(--act); }
html[data-theme="light"] .v5-total-row.is-main strong { color: var(--act-deep); }
.v5-total-row.is-amount strong { font-size: 22px; font-weight: 700; font-family: var(--f-mono); letter-spacing: -.04em; color: var(--ink); }
.v5-amount { font-family: var(--f-mono); font-weight: 700; color: var(--ink); direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: baseline; gap: .12em; }
.v5-checkout-actions { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.v5-checkout-actions .btn { width: 100%; min-height: 46px; font-size: 14px; }
.v5-actions-main { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* viewcart */
.v5-viewcart-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.v5-viewcart-table th { text-align: start; padding: 8px 10px; font-size: 10px; letter-spacing: 0; color: var(--ink-3); border-bottom: 1px solid var(--line-ink); }
.v5-viewcart-table td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.v5-vct-cycle, .v5-ost-cycle { font-size: 10.5px; color: var(--ink-3); }
.v5-vct-price, .v5-ost-price { font-weight: 700; font-family: var(--f-mono); color: var(--ink); }
.v5-vct-sub { font-size: 11px; color: var(--ink-3); }
.v5-viewcart-delete { color: var(--err); }
.v5-viewcart-delete:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .v5-order-fact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .v5-order-essentials { padding:14px; }
    .v5-order-essentials-head { align-items:stretch; flex-direction:column; }
    .v5-order-qty { align-self:flex-start; }
    .v5-order-fact-grid { grid-template-columns:minmax(0,1fr); }
    .v5-extra-storage { padding:14px; }
    .v5-extra-storage-head { flex-direction:column; }
    .v5-extra-storage-grid { grid-template-columns:minmax(0,1fr); }
    .v5-viewcart-table thead { display:none; }
    .v5-viewcart-table, .v5-viewcart-table tbody, .v5-viewcart-table tr, .v5-viewcart-table td { display:block; width:100%; }
    .v5-viewcart-table tr { padding:8px 0; border-bottom:1px solid var(--line-soft); }
    .v5-viewcart-table td { border:0; padding-block:7px; }
}

/* rajhi / bank transfer */
.v5-rajhi-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.v5-rajhi-fields { display: grid; gap: 10px; }
.v5-rajhi-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.v5-rajhi-field-label { font-size: 11px; color: var(--ink-3); }
.v5-rajhi-field-value { font-size: 13px; font-weight: 700; font-family: var(--f-mono); color: var(--ink); direction: ltr; display: inline-flex; align-items: center; gap: 8px; }
.v5-rajhi-qr-box { display: grid; gap: 10px; justify-items: center; text-align: center; }
.v5-rajhi-qr-head { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.v5-rajhi-qr-frame { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; box-shadow: var(--sh-1); }
.v5-rajhi-qr-note { font-size: 11px; color: var(--ink-3); }
.v5-rajhi-steps { display: grid; gap: 10px; }
.v5-rajhi-step { display: flex; align-items: flex-start; gap: 11px; font-size: 12.5px; color: var(--ink-2); }
.v5-rajhi-step-num {
    width: 23px; height: 23px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--act);
    color: var(--on-act);
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--f-mono);
    flex-shrink: 0;
}

/* receipt upload */
.v5-rcp-drop {
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    padding: 22px;
    text-align: center;
    color: var(--ink-3);
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
    display: grid;
    gap: 6px;
    justify-items: center;
}
.v5-rcp-drop:hover, .v5-rcp-drop.is-drag { border-color: var(--act); background: var(--act-wash); }
.v5-rcp-drop-title { font-weight: 700; color: var(--ink-2); }
.v5-rcp-preview { max-width: 180px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.v5-rcp-delete-btn { color: var(--err); font-size: 12px; font-weight: 700; }

/* ssh */
.v5-ssh-block { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.v5-ssh-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.v5-ssh-body { display: grid; gap: 9px; padding: 13px 14px 14px; }
.v5-ssh-body p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.7; }
.v5-ssh-select { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; color: var(--ink-1); background: var(--surface-1); }
.v5-ssh-select:focus { border-color: var(--act); outline: 3px solid var(--act-wash); }
.v5-cfm-muted { color: var(--ink-3); font-size: 12px; }

/* ── modals: paper sheet ── */
.vf-confirm-shell, .v5-cfm-shell {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.vf-confirm-shell[hidden], .v5-cfm-shell[hidden] { display: none; }
.vf-confirm-backdrop, .v5-cfm-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(16, 29, 43, .45);
    cursor: pointer;
}
.vf-confirm-card, .v5-cfm-card {
    position: relative;
    width: 100%;
    max-width: 470px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-3);
    display: grid;
    gap: 16px;
    animation: inkSheetIn .2s ease both;
}
@keyframes inkSheetIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vf-confirm-head { display: flex; align-items: flex-start; gap: 14px; }
.vf-confirm-icon, .v5-cfm-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--warn-wash);
    color: var(--warn);
    border: 1px solid rgba(148,99,18,.3);
    flex-shrink: 0;
}
.vf-confirm-copy, .v5-cfm-copy { display: grid; gap: 4px; }
.vf-confirm-kicker, .v5-cfm-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.vf-confirm-copy strong, .v5-cfm-copy strong { font-size: 16px; color: var(--ink); }
.vf-confirm-copy p, .v5-cfm-copy p { font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.v5-cfm-head { display: flex; align-items: flex-start; gap: 14px; }
.v5-cfm-icon.danger { background: var(--err-wash); color: var(--err); border-color: rgba(240, 135, 155, .34); }
.v5-cfm-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.v5-cfm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.v5-cfm-chip.danger { border-color: rgba(240, 135, 155, .34); background: var(--err-wash); color: var(--err); }
.v5-cfm-shell.is-open { display: flex; }
.v5-cfm-shell.is-closing .v5-cfm-card { animation: inkSheetOut .15s ease both; }
.v5-cfm-toast { position: fixed; top: 82px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 410; min-width: min(420px, calc(100vw - 28px)); max-width: min(520px, calc(100vw - 28px)); padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid rgba(79, 217, 154, .38); background: var(--surface); color: var(--ink); box-shadow: var(--sh-3); display: flex; align-items: flex-start; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .22s cubic-bezier(.22, 1, .36, 1), transform .22s cubic-bezier(.22, 1, .36, 1); }
.v5-cfm-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.v5-cfm-toast i { margin-top: 2px; color: var(--ok); }
.v5-cfm-toast.danger { border-color: rgba(240, 135, 155, .4); background: var(--err-wash); color: var(--err); }
.v5-cfm-toast.danger i { color: var(--err); }
.vf-confirm-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.vf-confirm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
}
.vf-confirm-actions, .v5-cfm-actions { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
body.dialog-open { overflow: hidden; }
.vf-confirm-shell.is-open { display: flex; }
.vf-confirm-shell.is-closing .vf-confirm-card { animation: inkSheetOut .15s ease both; }
@keyframes inkSheetOut { to { opacity: 0; transform: translateY(8px); } }
.v5-copy-btn.is-copied, .is-copied { color: var(--ok) !important; border-color: var(--ok) !important; }

.buy-panel-studio { padding: 0; background: none; border: 0; box-shadow: none; }

/* ── responsive buyflow ── */
@media (max-width: 1280px) {
    .catalog-focus-grid { grid-template-columns: 1fr; }
    .v5-rajhi-split { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .v5-naf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .v5-stepper-new { flex-direction: column; align-items: stretch; }
    .v5-stepper-connector { display: none; }
    .vf-confirm-actions, .v5-cfm-actions { flex-direction: column-reverse; }
    .vf-confirm-actions .btn { width: 100%; }
    .btn { width: 100%; }
    .ink-header-tools .btn, .ink-header-tools .utility-pill, .ink-header-tools .theme-toggle,
    .server-power-btn, .v5-qty-btn, .server-cred-btn, .v5-copy-btn { width: auto; }
    .table th, .table td { white-space: nowrap; }
    .usage-duo, .action-strip { grid-template-columns: 1fr; }
}

/* leftover variant hooks */
.brand-logo-wrap { display: flex; justify-content: center; }
.metric-services .metric-icon, .metric-support .metric-icon { background: var(--well); }
.action-buy .action-card-icon, .action-manage .action-card-icon,
.action-service .action-card-icon, .action-support .action-card-icon { background: var(--well); color: var(--ink); }
.server-login-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.sidebar-btn-label { display: inline; }
.is-main .member-badge { border-color: var(--act); color: var(--act-deep); }
.social-provider-card.is-linked { border-color: rgba(26,122,77,.4); }
.utility-pill-icon-currency, .utility-option-icon-currency { font-family: var(--f-mono); }

.user-chip {
    min-height: 44px;
    padding: 6px 8px 6px 14px;
    background: linear-gradient(135deg, rgba(90, 234, 207, .10), rgba(40, 157, 243, .07)), var(--surface);
    box-shadow: var(--sh-1);
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
html[lang="en"] .user-chip { padding: 6px 14px 6px 8px; }
.user-chip:hover { border-color: var(--act-ring); box-shadow: var(--act-glow); }
.user-chip:active { transform: scale(.98); }
.user-chip-copy strong { font-size: 12.5px; max-width: 160px; }
.user-chip-copy span { color: var(--act-deep); }
.user-chip .identity-avatar { margin: 0; }
.user-chip .identity-avatar.is-discord-decorated { margin: 0; }
.user-chip .identity-avatar-decoration { display: none; }
.sidebar .user-chip { position: relative; width: 100%; min-height: 74px; justify-content: flex-start; padding: 13px 16px 13px 94px; border-radius: 24px; background: linear-gradient(135deg, rgba(90, 234, 207, .14), rgba(40, 157, 243, .08)), var(--surface); overflow: hidden; isolation: isolate; }
.sidebar .user-chip.has-discord-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--sidebar-account-banner); background-size: cover; background-position: right center; opacity: .72; transform: scale(1.03); -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,.52) 48%, rgba(0,0,0,.08)); mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,.52) 48%, rgba(0,0,0,.08)); }
.sidebar .user-chip.has-discord-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, rgba(3, 27, 46, .28), rgba(3, 27, 46, .58) 54%, rgba(3, 27, 46, .88)); }
.sidebar .user-chip.has-discord-banner > * { position: relative; z-index: 2; }
html[lang="en"] .sidebar .user-chip.has-discord-banner::before { background-position: left center; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,.52) 48%, rgba(0,0,0,.08)); mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,.52) 48%, rgba(0,0,0,.08)); }
html[lang="en"] .sidebar .user-chip.has-discord-banner::after { background: linear-gradient(to right, rgba(3, 27, 46, .28), rgba(3, 27, 46, .58) 54%, rgba(3, 27, 46, .88)); }
.sidebar .user-chip.has-discord-banner .user-chip-copy strong, .sidebar .user-chip.has-discord-banner .user-chip-copy span { text-shadow: 0 2px 8px rgba(0, 8, 16, .56); }
.sidebar .user-chip .identity-avatar { position: absolute; left: 22px; top: 50%; width: 48px; height: 48px; margin: 0; border: 1px solid var(--line); background: var(--well); transform: translateY(-50%); box-shadow: var(--act-glow); overflow: visible; --avatar-decor-size: 112%; }
.sidebar .user-chip .identity-avatar.is-discord-decorated { margin: 0; }
.sidebar .user-chip .identity-avatar.is-discord-decorated .identity-avatar-decoration { display: block; inset: calc((100% - var(--avatar-decor-size, 112%)) / 2); width: var(--avatar-decor-size, 112%); height: var(--avatar-decor-size, 112%); object-fit: contain; opacity: .98; filter: drop-shadow(0 4px 9px rgba(0,0,0,.22)); transform-origin: center; }
.sidebar .user-chip .identity-avatar.is-discord-avatar::after { inset: -5px; border-color: rgba(90,234,207,.44); box-shadow: 0 0 0 4px rgba(88,101,242,.12), 0 0 24px rgba(90,234,207,.24); }
.sidebar .user-chip .identity-avatar-badge { display: none; }
.sidebar .user-chip .user-chip-arrow { display: none; }
.sidebar .user-chip-copy { min-width: 0; width: 100%; text-align: start; direction: rtl; }
.sidebar .user-chip-copy strong, .sidebar .user-chip-copy span { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .user-chip-copy span { color: var(--act); font-family: var(--f-mono); font-size: 12px; font-weight: 800; line-height: 1.15; }
.user-chip .identity-avatar, .identity-avatar, .avatar-choice-preview, .social-provider-icon, .account-hero-avatar-frame, .account-avatar-frame {
    position: relative;
    overflow: visible;
    isolation: isolate;
}
.identity-avatar > img:first-child, .avatar-choice-preview > img:first-child, .social-provider-icon > img:first-child, .account-hero-avatar-frame > img:first-child, .account-avatar-frame > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    position: relative;
    z-index: 1;
}
.identity-avatar-decoration, .avatar-decoration {
    position: absolute;
    inset: calc((100% - var(--avatar-decor-size, 112%)) / 2);
    width: var(--avatar-decor-size, 112%);
    height: var(--avatar-decor-size, 112%);
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .22));
    transform-origin: center;
}
.identity-avatar.is-discord-decorated { --avatar-decor-size: 112%; }
.social-provider-icon.is-discord-decorated { --avatar-decor-size: 108%; }
.account-hero-avatar-frame.is-discord-decorated { --avatar-decor-size: 112%; }
.account-avatar-frame.is-discord-decorated { --avatar-decor-size: 110%; }
.member-roster-top .identity-avatar.is-discord-decorated { --avatar-decor-size: 106%; }
.identity-avatar.is-discord-avatar::after, .account-avatar-frame.is-discord-avatar::after, .account-hero-avatar-frame.is-discord-avatar::after, .avatar-choice-preview.is-discord-decorated::after, .social-provider-icon.is-discord-avatar::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 1px solid rgba(88, 101, 242, .55);
    box-shadow: 0 0 0 5px rgba(88, 101, 242, .10), 0 0 28px rgba(88, 101, 242, .20);
    z-index: 0;
    transition: box-shadow var(--t), border-color var(--t);
}
.user-chip:hover .identity-avatar.is-discord-avatar::after {
    border-color: rgba(88, 101, 242, .85);
    box-shadow: 0 0 0 6px rgba(88, 101, 242, .16), 0 0 34px rgba(88, 101, 242, .32);
}
.identity-avatar.is-discord-decorated::after, .account-avatar-frame.is-discord-decorated::after, .account-hero-avatar-frame.is-discord-decorated::after, .social-provider-icon.is-discord-decorated::after {
    display: none;
}
.identity-avatar-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5865f2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    box-shadow: 0 0 0 2px var(--surface, #fff), 0 2px 6px rgba(0, 0, 0, .3);
    z-index: 4;
}
.account-hero-avatar-frame .identity-avatar-badge, .account-avatar-frame .identity-avatar-badge { width: 22px; height: 22px; font-size: 12px; right: -4px; bottom: -4px; }
.avatar-choice-preview .identity-avatar-badge, .social-provider-icon .identity-avatar-badge { width: 14px; height: 14px; font-size: 8px; }
.account-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr); align-items: start; }
.account-grid > .profile-panel, .account-grid > .stack { min-width: 0; }
.account-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, rgba(90, 234, 207, .13), rgba(40, 157, 243, .07) 52%, rgba(2, 19, 31, .12)), var(--surface-2);
    box-shadow: var(--sh-2);
    margin-bottom: 18px;
}
.account-hero-avatar-frame, .account-avatar-frame {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--well);
    box-shadow: var(--act-glow);
    flex-shrink: 0;
}
.account-hero-copy { display: grid; gap: 8px; min-width: 0; }
.account-hero-copy h2 { font-size: 23px; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.account-hero-copy p { color: var(--ink-3); font-size: 12.5px; max-width: 620px; }
.account-kicker { display: inline-flex; width: fit-content; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: var(--act-wash); color: var(--act-deep); font-size: 10.5px; font-weight: 800; }
.account-status-row, .account-hero-actions, .account-avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.account-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.account-status-pill.success { border-color: rgba(79, 217, 154, .25); background: var(--ok-wash); color: var(--ok); }
.account-status-pill.info { border-color: rgba(79, 177, 246, .24); background: var(--info-wash); color: var(--info); }
.account-current-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.account-current-grid .info-box { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.account-current-grid .info-box span { color: var(--ink-3); font-size: 11px; }
.account-current-grid .info-box strong { font-size: 13px; overflow-wrap: anywhere; }
.account-manage-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 14px; }
.account-manage-card { min-height: 154px; align-content: space-between; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)), var(--surface); }
.account-manage-card:hover { border-color: var(--act-ring); box-shadow: var(--sh-2); }
.account-manage-card:active, .avatar-choice-card:active, .social-provider-card:active, .server-mini-card:active, .btn:active { transform: scale(.985); }
.account-manage-head { display: grid; gap: 5px; align-items: start; justify-content: stretch; }
.account-manage-head span { color: var(--ink-3); font-size: 12px; line-height: 1.7; }
.account-manage-kicker { width: fit-content; padding: 3px 9px; border-radius: 999px; background: var(--act-wash); }
.account-avatar-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, rgba(88, 101, 242, .14), rgba(90, 234, 207, .07)), var(--surface-2);
    margin: 14px 0;
}
.account-avatar-frame { width: 86px; height: 86px; }
.account-avatar-copy { display: grid; gap: 7px; }
.account-avatar-copy h4 { color: var(--ink); font-size: 17px; }
.account-avatar-copy p { color: var(--ink-3); font-size: 12.5px; max-width: 620px; }
.social-provider-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.social-provider-card { padding: 20px; gap: 14px; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.social-provider-card:hover { border-color: var(--act-ring); box-shadow: var(--sh-2); }
.social-provider-icon { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.avatar-choice-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.avatar-choice-card { min-height: 134px; padding: 14px; position: relative; overflow: hidden; isolation: isolate; transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t); }
.avatar-choice-card.has-discord-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(to left, rgba(3, 27, 46, .24), rgba(3, 27, 46, .62) 56%, rgba(3, 27, 46, .92)), var(--avatar-choice-banner); background-size: cover, cover; background-position: center, right center; opacity: .96; transform: scale(1.025); }
.avatar-choice-card.has-discord-banner > * { position: relative; z-index: 1; }
html[lang="en"] .avatar-choice-card.has-discord-banner::before { background-image: linear-gradient(to right, rgba(3, 27, 46, .24), rgba(3, 27, 46, .62) 56%, rgba(3, 27, 46, .92)), var(--avatar-choice-banner); background-position: center, left center; }
.avatar-choice-card.has-discord-banner .avatar-choice-copy strong, .avatar-choice-card.has-discord-banner .avatar-choice-copy span { text-shadow: 0 2px 8px rgba(0, 8, 16, .58); }
.avatar-choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-choice-card:hover { border-color: var(--act-ring); }
.avatar-choice-card.is-active, .avatar-choice-card.is-selected, .avatar-choice-card:has(input:checked) { border-color: var(--act); background: linear-gradient(135deg, var(--act-wash), rgba(88, 101, 242, .08)); box-shadow: 0 0 0 1px var(--act), var(--act-glow); }
.avatar-choice-card.is-pending, .avatar-choice-card:has(input:checked):not(.is-active) { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), 0 10px 24px -14px rgba(240,188,90,.55); }
.avatar-choice-card.is-pending::after, .avatar-choice-card:has(input:checked):not(.is-active)::after { content: attr(data-pending-label); position: absolute; inset-inline-end: 12px; top: 12px; z-index: 3; padding: 3px 8px; border-radius: 999px; background: var(--warn-wash); color: var(--warn); border: 1px solid rgba(240,188,90,.32); font-size: 10px; font-weight: 800; }
.avatar-choice-top { justify-content: flex-start; align-items: flex-start; gap: 12px; }
.avatar-choice-preview { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; background: var(--well); }
.avatar-choice-preview.is-discord-decorated { --avatar-decor-size: 108%; overflow: visible; }
.avatar-choice-preview.is-discord-decorated .avatar-decoration { inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .22)); }
.avatar-choice-copy { font-size: 11.5px; line-height: 1.55; }
.avatar-choice-copy strong { font-size: 12.5px; }

/* Account V6: five-second hierarchy with native WHMCS two-factor enrollment. */
.account-v6 {
    --account-accent: #5aeacf;
    --account-blue: #289df3;
    --account-success: #4fd99a;
    display: grid;
    gap: 14px;
    scroll-margin-top: 92px;
}
.account-v6-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 16px;
    align-items: start;
    direction: ltr;
}
.account-v6-main,
.account-v6-rail { direction: rtl; }
html[lang="en"] .account-v6-main,
html[lang="en"] .account-v6-rail { direction: ltr; }
.account-v6-main { min-width: 0; display: grid; gap: 14px; }
.account-v6-rail {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    background-image: var(--card-grad);
    box-shadow: var(--sh-1);
}
.account-v6-identity {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}
.account-v6-identity-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--well);
    overflow: visible;
    box-shadow: 0 0 0 4px rgba(90, 234, 207, .06);
}
.account-v6-identity-avatar > img:first-child { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.account-v6-identity-copy { min-width: 0; display: grid; gap: 3px; }
.account-v6-identity-copy strong { color: var(--ink); font-size: 13.5px; overflow-wrap: anywhere; }
.account-v6-identity-copy span { color: var(--ink-3); font-size: 10.5px; overflow-wrap: anywhere; }
.account-v6-nav { display: grid; gap: 5px; }
.account-v6-nav a {
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.account-v6-nav a:hover { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.035); transform: translateY(-1px); }
.account-v6-nav a[aria-current="page"] { color: var(--account-accent); border-color: rgba(90,234,207,.22); background: rgba(90,234,207,.08); }
.account-v6-nav a > i:first-child { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.04); color: var(--ink-3); }
.account-v6-nav a[aria-current="page"] > i:first-child { color: var(--account-accent); background: rgba(90,234,207,.1); }
.account-v6-nav a > i:last-child { color: var(--ink-3); font-size: 9px; }
.account-v6-rail-note { display: grid; gap: 5px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.account-v6-rail-note span { color: var(--ink-3); font-size: 10.5px; }
.account-v6-rail-note strong { color: var(--ink-2); font-size: 11.5px; overflow-wrap: anywhere; }
.account-v6-action {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 170px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid rgba(90,234,207,.22);
    border-radius: 20px;
    background: linear-gradient(118deg, rgba(90,234,207,.13), rgba(40,157,243,.07) 58%, transparent), var(--surface-2);
    box-shadow: var(--sh-2);
}
.account-v6-action::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    inset-inline-end: -105px;
    top: -125px;
    border-radius: 50%;
    background: rgba(90,234,207,.08);
    filter: blur(2px);
}
.account-v6-action.is-enabled { border-color: rgba(79,217,154,.28); background: linear-gradient(118deg, rgba(79,217,154,.13), rgba(40,157,243,.06) 58%, transparent), var(--surface-2); }
.account-v6-action-icon { width: 58px; height: 58px; display: inline-grid; place-items: center; border-radius: 18px; background: rgba(90,234,207,.12); border: 1px solid rgba(90,234,207,.2); color: var(--account-accent); font-size: 24px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.account-v6-action.is-enabled .account-v6-action-icon { color: var(--account-success); background: rgba(79,217,154,.12); border-color: rgba(79,217,154,.24); }
.account-v6-action-copy { min-width: 0; display: grid; gap: 7px; }
.account-v6-action-copy > span { color: var(--account-accent); font-size: 11px; font-weight: 900; }
.account-v6-action-copy h2 { color: var(--ink); font-size: clamp(22px, 3vw, 31px); line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.account-v6-action-copy p { max-width: 660px; color: var(--ink-3); font-size: 12.5px; line-height: 1.75; }
.account-v6-action-buttons { display: grid; gap: 8px; justify-items: stretch; min-width: 196px; }
.account-v6-action-buttons .btn { justify-content: center; min-height: 43px; }
.account-v6-action-buttons .btn.primary { box-shadow: 0 10px 26px rgba(90,234,207,.13); }
.account-v6-section {
    min-width: 0;
    padding: clamp(18px, 2.6vw, 24px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    background-image: var(--card-grad);
    box-shadow: var(--sh-1);
}
.account-v6-section-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 14px; }
.account-v6-section-title { display: grid; gap: 4px; }
.account-v6-section-title h3 { color: var(--ink); font-size: 16px; }
.account-v6-section-title p { color: var(--ink-3); font-size: 11.5px; line-height: 1.65; }
.account-v6-section-head > a { color: var(--account-blue); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.account-v6-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.account-v6-summary a,
.account-v6-summary > div { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px; color: inherit; text-decoration: none; background: rgba(255,255,255,.018); border-inline-end: 1px solid var(--line-soft); }
.account-v6-summary > :last-child { border-inline-end: 0; }
.account-v6-summary a:hover { background: rgba(90,234,207,.045); }
.account-v6-summary-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 11px; background: var(--act-wash); color: var(--account-accent); }
.account-v6-summary-copy { min-width: 0; display: grid; gap: 3px; }
.account-v6-summary-copy span { color: var(--ink-3); font-size: 10.5px; }
.account-v6-summary-copy strong { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.account-v6-summary > * > i:last-child { color: var(--ink-3); font-size: 9px; }
.account-v6-data { display: grid; }
.account-v6-data-row { display: grid; grid-template-columns: minmax(140px, .58fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 51px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.account-v6-data-row:last-child { border-bottom: 0; padding-bottom: 0; }
.account-v6-data-row:first-child { padding-top: 0; }
.account-v6-data-row > span { color: var(--ink-3); font-size: 11.5px; }
.account-v6-data-row > strong { min-width: 0; color: var(--ink); font-size: 12.5px; overflow-wrap: anywhere; }
.account-v6-data-row > a { color: var(--account-blue); font-size: 11px; font-weight: 800; }
.account-v6-status { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(240,188,90,.24); background: var(--warn-wash); color: var(--warn); font-size: 10.5px; font-weight: 900; }
.account-v6-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-v6-status.is-enabled { color: var(--account-success); border-color: rgba(79,217,154,.25); background: var(--ok-wash); }
.account-v6-password { display: grid; gap: 14px; }
.account-v6-password .account-form { margin: 0; }
.account-v6-password .account-form-grid { margin-top: 0; }
.account-v6-security-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(40,157,243,.055); color: var(--ink-3); font-size: 11.5px; line-height: 1.7; }
.account-v6-security-note i { margin-top: 3px; color: var(--account-blue); }

.account-twofa-modal[hidden] { display: none !important; }
.account-twofa-modal {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
}
.account-twofa-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,12,21,.88); backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; }
.account-twofa-dialog {
    position: relative;
    contain: layout paint;
    width: min(680px, 100%);
    max-height: min(820px, calc(100svh - 36px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(90,234,207,.22);
    border-radius: 22px;
    background: var(--surface-2);
    color: var(--ink);
    box-shadow: 0 32px 90px rgba(0,0,0,.58);
}
.account-twofa-head { display: grid; grid-template-columns: 44px minmax(0,1fr) 36px; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(90,234,207,.1), rgba(40,157,243,.04)); }
.account-twofa-head-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 14px; background: rgba(90,234,207,.12); color: var(--account-accent); }
.account-twofa-head-copy { min-width: 0; display: grid; gap: 3px; }
.account-twofa-head-copy span { color: var(--ink-3); font-size: 10.5px; font-weight: 800; }
.account-twofa-head-copy strong { color: var(--ink); font-size: 17px; overflow-wrap: anywhere; }
.account-twofa-close { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); color: var(--ink-2); cursor: pointer; }
.account-twofa-close:hover { color: var(--ink); border-color: var(--act-ring); }
.account-twofa-body { min-height: 250px; overflow: auto; padding: clamp(20px, 4vw, 30px); color: var(--ink-2); font-size: 12.5px; line-height: 1.75; }
.account-twofa-loading { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--ink-3); }
.account-twofa-loading i { color: var(--account-accent); font-size: 24px; }
.account-twofa-body form { display: grid; gap: 13px; }
.account-twofa-body .form-group { display: grid; gap: 7px; margin: 0; }
.account-twofa-body label { color: var(--ink-2); font-weight: 800; }
.account-twofa-body input:not([type="hidden"]),
.account-twofa-body select,
.account-twofa-body textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--well); color: var(--ink); font: inherit; outline: none; }
.account-twofa-body input:focus,
.account-twofa-body select:focus,
.account-twofa-body textarea:focus { border-color: var(--account-accent); box-shadow: 0 0 0 3px rgba(90,234,207,.12); }
.account-twofa-body img { max-width: min(250px, 100%); height: auto; display: block; margin: 8px auto; border-radius: 12px; }
.account-twofa-body .alert,
.account-twofa-error { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.03); color: var(--ink-2); }
.account-twofa-body .alert-danger,
.account-twofa-error { border-color: rgba(255,102,102,.28); background: rgba(255,102,102,.08); color: #ffb1b1; }
.account-twofa-body .alert-success { border-color: rgba(79,217,154,.28); background: rgba(79,217,154,.08); color: var(--account-success); }
.account-twofa-body .text-center { text-align: center; }
.account-twofa-body code,
.account-twofa-body pre { direction: ltr; text-align: left; font-family: var(--f-mono); color: var(--account-accent); overflow-wrap: anywhere; white-space: pre-wrap; }
.account-twofa-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--line); background: rgba(0,0,0,.08); }
.account-twofa-submit[hidden] { display: none !important; }
.account-twofa-submit.is-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
body.account-twofa-open { overflow: hidden; }

@media (max-width: 980px) {
    .account-v6-layout { grid-template-columns: 1fr; }
    .account-v6-rail { position: static; grid-row: 1; }
    .account-v6-nav { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .account-v6-nav a { grid-template-columns: 28px minmax(0,1fr); }
    .account-v6-nav a > i:last-child { display: none; }
    .account-v6-rail-note { display: none; }
}
@media (max-width: 760px) {
    .account-v6-action { grid-template-columns: 50px minmax(0,1fr); min-height: 0; }
    .account-v6-action-icon { width: 50px; height: 50px; border-radius: 15px; font-size: 21px; }
    .account-v6-action-buttons { grid-column: 1 / -1; min-width: 0; grid-template-columns: 1fr 1fr; }
    .account-v6-summary { grid-template-columns: 1fr; }
    .account-v6-summary a,
    .account-v6-summary > div { border-inline-end: 0; border-bottom: 1px solid var(--line-soft); }
    .account-v6-summary > :last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
    .account-v6-layout { gap: 11px; }
    .account-v6-rail { padding: 12px; gap: 10px; }
    .account-v6-identity { padding-bottom: 10px; }
    .account-v6-nav { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
    .account-v6-nav a { min-height: 56px; grid-template-columns: 1fr; place-items: center; gap: 4px; padding: 6px 4px; text-align: center; font-size: 10px; }
    .account-v6-action { grid-template-columns: 1fr; padding: 18px; }
    .account-v6-action-buttons { grid-column: auto; grid-template-columns: 1fr; }
    .account-v6-action-buttons .btn { width: 100%; }
    .account-v6-section { padding: 16px; }
    .account-v6-section-head { align-items: start; }
    .account-v6-data-row { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; }
    .account-v6-data-row > strong { grid-column: 1 / -1; grid-row: 2; }
    .account-twofa-modal { padding: 0; align-items: end; }
    .account-twofa-dialog { width: 100%; max-height: 94svh; border-radius: 20px 20px 0 0; border-inline: 0; border-bottom: 0; }
    .account-twofa-head { padding: 15px 16px; }
    .account-twofa-body { padding: 18px 16px; }
    .account-twofa-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}
.service-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.service-title-line .due-chip { font-size: 10.5px; }
.dashboard-grid-tight { align-items: start; }
.dashboard-grid-tight .table-panel .table-wrap { max-height: 430px; overflow: auto; }
.dashboard-invoice-list .dashboard-invoice-item { text-decoration: none; color: inherit; transition: border-color var(--t), background var(--t), transform var(--t); }
.dashboard-invoice-list .dashboard-invoice-item:hover { border-color: var(--act-ring); background: rgba(90,234,207,.06); transform: translateY(-1px); }
.affiliate-hero { max-width: 1320px; margin: 22px auto 0; padding-inline: clamp(16px, 3vw, 32px); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); gap: 16px; align-items: stretch; }
.affiliate-hero-copy, .affiliate-link-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(90,234,207,.13), rgba(40,157,243,.07)), var(--surface-2); box-shadow: var(--sh-2); padding: 22px; }
.affiliate-hero-copy { display: grid; gap: 12px; }
.affiliate-hero-copy h2 { color: var(--ink); font-size: clamp(24px, 3vw, 36px); line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.affiliate-hero-copy p { color: var(--ink-3); font-size: 13px; line-height: 1.8; max-width: 760px; }
.affiliate-links-stack { display: grid; gap: 12px; min-width: 0; }
.affiliate-link-card { position: relative; display: grid; align-content: center; gap: 9px; background: radial-gradient(circle at 100% 0%, rgba(90,234,207,.16), transparent 42%), var(--well); overflow: hidden; }
.affiliate-links-stack .affiliate-link-card { padding: 18px; }
.affiliate-link-card span, .affiliate-link-card em { color: var(--ink-3); font-size: 12px; font-style: normal; }
.affiliate-link-card em b { color: var(--act); font-family: var(--f-mono); font-weight: 800; }
.affiliate-link-card strong { color: var(--ink); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; direction: ltr; text-align: start; font-family: var(--f-mono); }
.affiliate-status-pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 4px; color: var(--act); }
.affiliate-copy-line { width: fit-content; display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--ink-2); font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t), transform var(--t); }
.affiliate-copy-line:hover { border-color: var(--act-ring); color: var(--act); background: var(--act-wash); transform: translateY(-1px); }
.affiliate-link-edit-form { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.affiliate-link-edit-form label { min-width: 0; display: grid; gap: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 750; }
.affiliate-link-edit-form input { min-width: 0; width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface); color: var(--ink); font: 700 12px/1 var(--f); transition: border-color var(--t), box-shadow var(--t), background var(--t); }
.affiliate-link-edit-form input:focus { border-color: var(--act); box-shadow: 0 0 0 3px var(--act-wash); background: var(--surface-2); }
.affiliate-code-input { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; transition: border-color var(--t), box-shadow var(--t), background var(--t); direction: ltr; }
.affiliate-code-input:focus-within { border-color: var(--act); box-shadow: 0 0 0 3px var(--act-wash); background: var(--surface-2); }
.affiliate-code-input b { padding-inline-start: 11px; color: var(--ink-3); font: 800 12px/1 var(--f-mono); }
.affiliate-code-input input { height: 38px; border: 0; border-radius: 0; box-shadow: none; background: transparent; direction: ltr; font-family: var(--f-mono); }
.affiliate-code-input input:focus { border: 0; box-shadow: none; background: transparent; }
.affiliate-link-edit-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.affiliate-link-edit-foot small { color: var(--ink-3); font-size: 11px; }
.affiliate-overview-strip { max-width: 1320px; margin: 16px auto 0; padding-inline: clamp(16px, 3vw, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.affiliate-overview-strip article { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); background-image: var(--card-grad); box-shadow: var(--sh-1); }
.affiliate-overview-strip span { color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.affiliate-overview-strip strong { color: var(--ink); font-size: 14px; line-height: 1.55; }
.affiliate-grid { margin-top: 16px; grid-template-columns: minmax(0, 1fr) 340px; }
.affiliate-main-panel { display: grid; gap: 14px; }
.affiliate-metrics { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.affiliate-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 14px; align-items: stretch; }
.affiliate-chart-card, .affiliate-payout-card { padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--r); background: rgba(255,255,255,.025); }
.affiliate-bars { min-height: 190px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; }
.affiliate-bar { min-width: 0; height: 170px; display: grid; grid-template-rows: minmax(42px, 1fr) auto auto; gap: 6px; align-items: end; text-align: center; }
.affiliate-bar span { width: 100%; min-height: 8px; border-radius: 999px 999px 8px 8px; background: linear-gradient(180deg, var(--act), rgba(40,157,243,.55)); box-shadow: 0 10px 22px rgba(90,234,207,.14); }
.affiliate-bar em { color: var(--ink-3); font-size: 10.5px; font-style: normal; }
.affiliate-bar b { color: var(--ink); font-size: 10.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.affiliate-referral-table .table-wrap, .affiliate-referral-table { max-height: 420px; }
.affiliate-steps { display: grid; gap: 10px; }
.affiliate-steps div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.025); }
.affiliate-steps i { grid-row: span 2; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--act-wash); color: var(--act); }
.affiliate-steps strong { color: var(--ink); font-size: 12.5px; }
.affiliate-steps p { color: var(--ink-3); font-size: 11.5px; line-height: 1.65; }
.affiliate-share-list { display: grid; gap: 8px; }
.affiliate-share-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,.025); color: var(--ink-2); font-family: var(--f); font-size: 12px; font-weight: 800; text-align: start; cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t), transform var(--t); }
.affiliate-share-list button:hover { border-color: var(--act-ring); color: var(--act); background: var(--act-wash); transform: translateY(-1px); }
.affiliate-share-list i { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(90,234,207,.10); color: var(--act); }
.affiliate-empty-state { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; color: var(--ink-3); }
.affiliate-empty-state > i { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; color: var(--act); background: var(--act-wash); font-size: 24px; }
.affiliate-empty-state h3 { color: var(--ink); font-size: 20px; }
.affiliate-empty-state p { max-width: 520px; line-height: 1.8; }
.affiliate-activity .item, .server-login-log .item { transition: border-color var(--t), background var(--t), transform var(--t); }
.affiliate-activity .item:hover, .server-login-log .item:hover { border-color: var(--act-ring); background: rgba(255,255,255,.035); transform: translateY(-1px); }
.server-login-log-item i { color: var(--act); margin-inline-end: 7px; }
.v5-copy-flash { animation: v5CopyFlash .9s ease both; }
@keyframes v5CopyFlash { 0% { box-shadow: 0 0 0 0 rgba(90,234,207,.42); } 100% { box-shadow: 0 0 0 12px rgba(90,234,207,0); } }
@media (max-width: 1080px) { .affiliate-grid, .affiliate-split { grid-template-columns: 1fr; } .affiliate-overview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 920px) { .affiliate-hero { grid-template-columns: 1fr; } .affiliate-links-stack { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
@media (max-width: 640px) { .affiliate-overview-strip { grid-template-columns: 1fr; } .affiliate-bars { gap: 6px; } .affiliate-bar b { display: none; } .affiliate-links-stack { grid-template-columns: 1fr; } .affiliate-link-edit-form { grid-template-columns: 1fr; } }
@media (max-width: 920px) {
    .account-grid { grid-template-columns: 1fr; }
    .account-hero, .account-avatar-stage { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 640px) {
    .account-hero, .account-avatar-stage { padding: 16px; }
    .account-hero-actions .btn, .account-avatar-actions .btn { width: 100%; }
}
.ink-nav-link.is-locked, .dropdown-link.is-locked, .nav-item.is-locked { opacity: .55; }
.ink-nav-link.is-locked:hover, .dropdown-link.is-locked:hover, .nav-item.is-locked:hover { opacity: .82; }
.v5-nav-lock { margin-inline-start: auto; color: var(--ink-3); font-size: 10px; }
.user-chip.is-guest { border-style: dashed; }
.v5-unified-cart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:18px 0; }
.v5-unified-cart-head > div { display:grid; gap:8px; }
.v5-unified-cart-head p { color:var(--ink-3); line-height:1.75; max-width:720px; }
.v5-unified-cart-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:16px; align-items:start; direction:ltr; }
.v5-unified-cart-layout > * { direction:rtl; }
html[lang="en"] .v5-unified-cart-layout > * { direction:ltr; }
.v5-independent-cart-table td { vertical-align:middle; }
.v5-independent-cart-table td:first-child { position:relative; padding-inline-start:48px; }
.v5-independent-cart-table td strong, .v5-independent-cart-table td small { display:block; }
.v5-independent-cart-table td small { margin-top:4px; color:var(--ink-3); }
.v5-cart-line-number { position:absolute; inset-inline-start:12px; top:50%; translate:0 -50%; width:25px; height:25px; display:grid; place-items:center; border-radius:9px; color:var(--act); background:var(--act-wash); font-family:var(--f-mono); font-size:11px; font-weight:800; }
.v5-cart-row-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.v5-cart-row-actions form { margin:0; }
.v5-cart-row-actions .btn { min-height:34px; }
.v5-cart-checkout-card { position:sticky; top:92px; display:grid; gap:12px; padding:18px; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(145deg,var(--act-wash),transparent 46%),var(--surface-2); box-shadow:var(--sh-2); }
.v5-cart-checkout-card > span { color:var(--ink-3); font-size:12px; }
.v5-cart-checkout-card > strong { color:var(--ink); font-size:20px; }
.v5-cart-checkout-card > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-block:1px solid var(--line-soft); }
.v5-cart-checkout-card > div span { color:var(--ink-3); font-size:12px; }
.v5-cart-checkout-card > div b { color:var(--act); font-size:16px; }
.v5-cart-checkout-card p { color:var(--ink-3); font-size:11.5px; line-height:1.7; }
.v5-cart-checkout-card p i { color:var(--ok); margin-inline-end:6px; }
.v5-cart-clear { width:100%; border:0; background:transparent; color:var(--ink-3); font-family:var(--f); font-size:11.5px; cursor:pointer; }
.v5-cart-clear:hover { color:var(--danger); }
.v5-cart-item-form { margin:14px 0 0; }
.v5-custom-fields-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line-soft); border-radius:var(--r); background:rgba(255,255,255,.025); }
.v5-custom-fields-grid label { display:grid; gap:7px; color:var(--ink-2); font-size:12px; font-weight:700; }
.v5-custom-fields-grid label em { color:var(--danger); font-style:normal; }
.v5-custom-fields-grid input, .v5-custom-fields-grid select, .v5-custom-fields-grid textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--well); color:var(--ink); font:inherit; }
.v5-guest-account-boundary { max-width:760px; margin:22px auto; display:grid; gap:16px; padding:clamp(22px,4vw,38px); border:1px solid var(--line); border-radius:var(--r-lg); background:radial-gradient(circle at 100% 0,rgba(90,234,207,.14),transparent 42%),var(--surface-2); box-shadow:var(--sh-2); text-align:center; }
.v5-guest-account-boundary > .badge { justify-self:center; }
.v5-guest-account-boundary > p { color:var(--ink-3); line-height:1.8; }
.v5-guest-auth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.v5-guest-account-boundary .v5-security-note { justify-content:center; }
@media (max-width: 980px) { .v5-unified-cart-layout { grid-template-columns:1fr; } .v5-cart-checkout-card { position:static; } }
@media (max-width: 640px) { .v5-unified-cart-head { align-items:stretch; flex-direction:column; } .v5-custom-fields-grid, .v5-guest-auth-grid { grid-template-columns:1fr; } .v5-independent-cart-table thead { display:none; } .v5-independent-cart-table, .v5-independent-cart-table tbody, .v5-independent-cart-table tr, .v5-independent-cart-table td { display:block; width:100%; } .v5-independent-cart-table tr { padding:10px 0; border-bottom:1px solid var(--line-soft); } .v5-independent-cart-table td { border:0; padding-block:7px; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
    .main.is-pjax-enter, .main.is-pjax-enter .table-panel, .main.is-pjax-enter .side-panel, .main.is-pjax-enter .metric, .main.is-pjax-enter .item { animation: none !important; transform: none !important; }
}

/* Server control v6: five-second hierarchy inside the existing V5 shell. */
.server-control-v6 {
    --server-accent: #42e3c1;
    --server-accent-strong: #23cda8;
    --server-cyan: #66d8ff;
    --server-warn: #ffb643;
    --server-danger: #ff6b6b;
    display: grid;
    gap: 14px;
    scroll-margin-top: 92px;
}
.server-control-v6 a,
.server-control-v6 button,
.server-control-v6 summary { -webkit-tap-highlight-color: transparent; }
.server-command-card {
    position: relative;
    overflow: visible;
    display: grid;
    gap: 14px;
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-2);
    box-shadow: var(--sh-2);
}
.server-command-card::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 22px;
    width: 2px;
    border-radius: 99px;
    background: var(--server-accent);
    opacity: .65;
    pointer-events: none;
}
.server-command-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr);
    gap: clamp(22px, 4vw, 56px);
    align-items: center;
}
.server-command-identity { display: grid; gap: 13px; min-width: 0; }
.server-command-state {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 780;
}
.server-command-state .server-state-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--server-accent);
    font-size: 13px;
    font-weight: 900;
}
.server-command-state .server-state-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--server-accent);
    box-shadow: 0 0 0 6px rgba(66, 227, 193, .09);
    animation: serverStatePulse 2.3s ease-in-out infinite;
}
.server-command-card[data-server-tone="warning"] .server-state-label { color: var(--server-warn); }
.server-command-card[data-server-tone="warning"] .server-state-dot { background: var(--server-warn); box-shadow: 0 0 0 6px rgba(255,182,67,.09); }
.server-command-card[data-server-tone="danger"] .server-state-label { color: var(--server-danger); }
.server-command-card[data-server-tone="danger"] .server-state-dot { background: var(--server-danger); box-shadow: 0 0 0 6px rgba(255,107,107,.09); animation: none; }
.server-command-card[data-server-tone="info"] .server-state-label,
.server-command-card[data-server-tone="muted"] .server-state-label { color: var(--server-cyan); }
.server-command-card[data-server-tone="info"] .server-state-dot,
.server-command-card[data-server-tone="muted"] .server-state-dot { background: var(--server-cyan); box-shadow: 0 0 0 6px rgba(102,216,255,.09); animation: none; }
@keyframes serverStatePulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(66, 227, 193, .08); opacity: .88; }
    50% { box-shadow: 0 0 0 9px rgba(66, 227, 193, .025); opacity: 1; }
}
.server-command-title { display: grid; gap: 8px; min-width: 0; }
.server-command-title h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 950;
    line-height: 1.14;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}
.server-command-title p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.7;
}
.server-command-title p i { color: var(--server-cyan); }
.server-command-title p .server-meta-divider { color: var(--ink-faint); }
.server-command-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--well);
}
.server-command-fact {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border-inline-end: 1px solid var(--line-soft);
    border-block-end: 1px solid var(--line-soft);
}
.server-command-fact:nth-child(2n) { border-inline-end: 0; }
.server-command-fact:nth-last-child(-n + 2) { border-block-end: 0; }
.server-command-fact em {
    color: var(--ink-3);
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
}
.server-command-fact strong {
    min-width: 0;
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.server-command-fact strong[dir="ltr"] { text-align: start; }
.server-inline-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.server-copy-button {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}
.server-copy-button:hover { color: var(--server-accent); border-color: rgba(66,227,193,.42); background: rgba(66,227,193,.07); transform: translateY(-1px); }
.server-primary-actions {
    display: grid;
    grid-template-columns: 1.2fr 1fr .9fr;
    gap: 10px;
}
.server-primary-action {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
    color: var(--ink-2);
    font-family: var(--f-sans);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.server-primary-action > i {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 11px;
    background: rgba(102,216,255,.08);
    color: var(--server-cyan);
    font-size: 15px;
}
.server-primary-action span { display: grid; gap: 3px; min-width: 0; }
.server-primary-action strong { color: var(--ink); font-size: 13.5px; font-weight: 900; }
.server-primary-action em { color: var(--ink-3); font-size: 10.5px; font-style: normal; line-height: 1.45; }
.server-primary-action:hover { border-color: var(--act-ring); background: rgba(255,255,255,.032); color: var(--ink); transform: translateY(-2px); }
.server-primary-action.is-locked,
.server-primary-action:disabled,
.server-power-action:disabled,
.server-advanced-link.is-locked {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}
.server-primary-action.is-locked:hover,
.server-primary-action:disabled:hover,
.server-power-action:disabled:hover,
.server-advanced-link.is-locked:hover { border-color: var(--line); background: rgba(255,255,255,.018); transform: none; }
.server-primary-action.is-primary { border-color: rgba(66,227,193,.72); box-shadow: inset 0 0 0 1px rgba(66,227,193,.08); }
.server-primary-action.is-primary > i { color: var(--server-accent); background: rgba(66,227,193,.1); }
.server-primary-action.is-warning { border-color: rgba(255,182,67,.4); }
.server-primary-action.is-warning > i { color: var(--server-warn); background: rgba(255,182,67,.09); }
.server-primary-action:focus-visible,
.server-copy-button:focus-visible,
.server-section-nav a:focus-visible,
.server-power-action:focus-visible { outline: 3px solid rgba(102,216,255,.28); outline-offset: 2px; }
.server-power-deck {
    display: grid;
    grid-template-columns: minmax(160px, .55fr) minmax(0, 2fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--well);
    scroll-margin-top: 104px;
}
.server-power-heading { display: grid; gap: 3px; padding-inline: 4px; }
.server-power-heading strong { color: var(--ink); font-size: 12px; font-weight: 900; }
.server-power-heading span { color: var(--ink-3); font-size: 10px; }
.server-power-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.server-power-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: rgba(255,255,255,.018);
    color: var(--ink-2);
    font-family: var(--f-sans);
    font-size: 11.5px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}
.server-power-action:hover { transform: translateY(-1px); border-color: var(--act-ring); color: var(--ink); }
.server-power-action.is-on i { color: var(--server-accent); }
.server-power-action.is-cycle i { color: var(--server-warn); }
.server-power-action.is-off i { color: var(--server-danger); }
.server-emergency-tools { position: relative; }
.server-emergency-tools summary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(255,107,107,.24);
    border-radius: 11px;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}
.server-emergency-tools summary::-webkit-details-marker { display: none; }
.server-emergency-tools[open] summary { color: var(--server-danger); border-color: rgba(255,107,107,.45); }
.server-emergency-panel {
    position: absolute;
    z-index: 12;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    width: min(300px, 78vw);
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(255,107,107,.28);
    border-radius: 13px;
    background: var(--menu-surface);
    box-shadow: var(--sh-2);
}
.server-emergency-panel p { margin: 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.65; }
.server-emergency-panel .server-power-action { color: var(--server-danger); }
.server-section-nav {
    position: sticky;
    z-index: 10;
    top: 72px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 6px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
}
.server-section-nav::-webkit-scrollbar { display: none; }
.server-section-nav a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 850;
    text-decoration: none;
    transition: color var(--t), background var(--t), border-color var(--t);
}
.server-section-nav a:hover { color: var(--ink); background: rgba(255,255,255,.025); }
.server-section-nav a.is-active { color: var(--server-accent); border-color: rgba(66,227,193,.24); background: rgba(66,227,193,.07); }
.server-section-nav a[aria-current="location"] { box-shadow: inset 0 -2px 0 var(--server-accent); }
.server-control-v6[data-vf-server-ready="0"] [data-vf-requires-ready] {
    pointer-events: none;
    cursor: wait;
    opacity: .5;
    filter: saturate(.55);
}
.server-provision-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(102,216,255,.2);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(102,216,255,.055), transparent 52%), var(--surface-2);
    scroll-margin-top: 138px;
}
.server-provision-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.server-provision-head > div { display: grid; gap: 4px; }
.server-provision-head h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 950; }
.server-provision-head p { margin: 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.65; }
.server-provision-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 7px 10px; border: 1px solid rgba(102,216,255,.22); border-radius: 999px; color: var(--server-cyan); background: rgba(102,216,255,.07); font-size: 10.5px; font-weight: 900; }
.server-provision-state i { font-size: 9px; }
.server-provision-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.server-provision-step { position: relative; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--well); }
.server-provision-step > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--ink-3); background: rgba(255,255,255,.025); }
.server-provision-step > span { min-width: 0; display: grid; gap: 2px; }
.server-provision-step strong { color: var(--ink-2); font-size: 11px; font-weight: 900; }
.server-provision-step em { color: var(--ink-3); font-size: 9.5px; font-style: normal; line-height: 1.4; }
.server-provision-step[data-state="done"] { border-color: rgba(66,227,193,.22); }
.server-provision-step[data-state="done"] > i { color: var(--server-accent); background: rgba(66,227,193,.08); }
.server-provision-step[data-state="active"] { border-color: rgba(102,216,255,.42); box-shadow: inset 0 0 0 1px rgba(102,216,255,.06); }
.server-provision-step[data-state="active"] > i { color: var(--server-cyan); background: rgba(102,216,255,.1); }
.server-provision-step[data-state="failed"] { border-color: rgba(255,107,107,.42); }
.server-provision-step[data-state="failed"] > i { color: var(--server-danger); background: rgba(255,107,107,.09); }
.server-provision-help { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-3); font-size: 10px; line-height: 1.6; }
.server-provision-help i { color: var(--server-cyan); }
.server-control-v6[data-vf-provision-state="ready"] .server-provision-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-color: rgba(66,227,193,.22);
    background: rgba(66,227,193,.045);
}
.server-control-v6[data-vf-provision-state="ready"] .server-provision-head > div,
.server-control-v6[data-vf-provision-state="ready"] .server-provision-steps { display: none; }
.server-control-v6[data-vf-provision-state="ready"] .server-provision-head { display: contents; }
.server-control-v6[data-vf-provision-state="ready"] .server-provision-state { color: var(--server-accent); border-color: rgba(66,227,193,.24); background: rgba(66,227,193,.08); }
.server-control-v6[data-vf-provision-state="ready"] .server-provision-help { color: var(--ink-2); }
.server-control-v6 .server-resource-band { scroll-margin-top: 138px; }
.server-control-v6 .server-resource-band .server-panel-pad { padding: 16px; }
.server-control-v6 .server-resource-band .server-panel-head { margin-bottom: 12px; }
.server-control-v6 .server-resource-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.server-control-v6 .server-resource-tile {
    min-height: 132px;
    padding: 14px 15px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--well);
    box-shadow: none;
    direction: rtl;
    text-align: start;
}
.server-control-v6 .server-resource-tile::before { display: none; }
.server-control-v6 .server-resource-tile:last-child { border-inline-end: 1px solid var(--line-soft); }
.server-control-v6 .server-resource-top span { color: var(--ink); text-shadow: none; }
.server-control-v6 .server-resource-top span b { color: var(--ink-3); font: inherit; font-size: 10px; }
.server-control-v6 .server-resource-top span i { color: var(--server-cyan); background: rgba(102,216,255,.08); box-shadow: none; }
.server-control-v6 .server-resource-top strong,
.server-control-v6 .server-resource-tile.is-live .server-resource-top strong { color: var(--server-accent); font-size: 25px; text-shadow: none; }
.server-control-v6 .server-resource-meter { height: 7px; background: rgba(102,216,255,.1); box-shadow: none; }
.server-control-v6 .server-resource-meter span { background: var(--server-cyan); box-shadow: none; }
.server-control-v6 .server-resource-meter.warning span { background: var(--server-warn); }
.server-control-v6 .server-resource-meter.danger span { background: var(--server-danger); }
.server-control-v6 .server-resource-meter.static span,
.server-control-v6 .server-resource-meter.unavailable span { background: var(--server-cyan); }
.server-control-v6 .server-resource-usage { font-size: 10.5px; }
.server-control-v6 .server-resource-usage span { color: var(--ink-3); }
.server-control-v6 .server-resource-usage strong { color: var(--ink-2); }
.server-control-v6 .server-resource-note { font-size: 10px; }
.server-control-v6 .server-resource-note { color: var(--ink-3); }
.server-network-resource { grid-column: 1 / -1; min-height: 0 !important; }
.server-network-resource .server-resource-meter { margin-top: 2px; }
.server-network-resource-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.server-network-resource-head .server-resource-top { flex: 1 1 auto; }
.server-network-resource-head > p { margin: 0; color: var(--ink-3); font-size: 10px; }
.server-network-rate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid rgba(66,227,193,.16); border-radius: 11px; background: rgba(66,227,193,.035); }
.server-network-rate span { color: var(--ink-3); font-size: 10px; font-weight: 800; }
.server-network-rate strong { color: var(--server-accent); font-family: var(--f-mono); font-size: 11.5px; direction: ltr; unicode-bidi: embed; }
.server-traffic-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.server-traffic-fact { min-width: 0; display: grid; gap: 4px; padding: 10px 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(255,255,255,.018); }
.server-traffic-fact em { color: var(--ink-3); font-size: 9.5px; font-style: normal; }
.server-traffic-fact strong { color: var(--ink-2); font-family: var(--f-mono); font-size: 11.5px; font-weight: 900; direction: ltr; unicode-bidi: embed; overflow-wrap: anywhere; }
.server-access-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    gap: 14px;
    scroll-margin-top: 138px;
}
#server-overview-network,
#server-overview-storage,
#server-overview-billing,
#server-overview-security,
#server-overview-tools,
#server-overview-network-details,
#server-overview-storage-details { scroll-margin-top: 138px; }
.server-access-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
}
.server-access-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.server-access-card-head h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 950; }
.server-access-card-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.65; }
.server-access-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.server-access-block {
    min-width: 0;
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: var(--well);
}
.server-access-block > strong { color: var(--ink); font-size: 12px; font-weight: 900; }
.server-password-alerts { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(102,216,255,.16); border-radius: 14px; background: rgba(102,216,255,.025); }
.server-password-alerts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.server-password-alerts-head strong { color: var(--ink); font-size: 12px; }
.server-password-alerts-head p { margin: 3px 0 0; color: var(--ink-3); font-size: 10px; line-height: 1.6; }
.server-password-channel-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.server-password-channel { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--well); }
.server-password-channel > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--server-cyan); background: rgba(102,216,255,.08); }
.server-password-channel-copy { min-width: 0; display: grid; gap: 3px; }
.server-password-channel-copy strong { color: var(--ink); font-size: 11.5px; }
.server-password-channel-copy span { color: var(--ink-3); font-size: 9.5px; overflow-wrap: anywhere; }
.server-password-channel-action { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.server-password-switch { width: 42px; height: 24px; position: relative; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); cursor: pointer; transition: background var(--t), border-color var(--t); }
.server-password-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform var(--t), background var(--t); }
.server-password-switch[aria-checked="true"] { border-color: rgba(66,227,193,.38); background: rgba(66,227,193,.14); }
.server-password-switch[aria-checked="true"]::after { background: var(--server-accent); transform: translateX(18px); }
[dir="rtl"] .server-password-switch[aria-checked="true"]::after { transform: translateX(-18px); }
.server-password-switch:disabled { opacity: .45; cursor: not-allowed; }
.server-password-link { min-height: 30px; padding: 7px 9px; border: 1px solid rgba(102,216,255,.24); border-radius: 9px; color: var(--server-cyan); background: rgba(102,216,255,.06); font-size: 9.5px; font-weight: 900; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.server-password-alert-note { color: var(--ink-3); font-size: 9.5px; line-height: 1.65; display: flex; align-items: flex-start; gap: 7px; }
.server-password-alert-message { min-height: 0; color: var(--ink-3); font-size: 10px; }
.server-password-alert-message.success { color: var(--server-accent); }
.server-password-alert-message.warning, .server-password-alert-message.danger { color: var(--server-warn); }
.server-access-row {
    min-height: 38px;
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding-block: 6px;
    border-block-end: 1px solid var(--line-soft);
}
.server-access-row:last-child { border-block-end: 0; }
.server-access-row em { color: var(--ink-3); font-size: 10.5px; font-style: normal; }
.server-access-row strong { min-width: 0; color: var(--ink-2); font-size: 11.5px; overflow-wrap: anywhere; }
.server-access-row .server-cred-actions { display: inline-flex; align-items: center; gap: 4px; }
.server-access-row .server-cred-btn { width: 30px; height: 30px; }
.server-storage-row {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--well);
}
.server-storage-row > span { display: grid; gap: 2px; }
.server-storage-row > span strong { color: var(--ink); font-size: 11.5px; }
.server-storage-row > span em { color: var(--ink-3); font-size: 10px; font-style: normal; }
.server-storage-meter { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(102,216,255,.1); }
.server-storage-meter span { display: block; height: 100%; border-radius: inherit; background: var(--server-accent); }
.server-storage-row > strong { color: var(--server-accent); font-size: 12px; }
.server-security-summary { scroll-margin-top: 138px; }
.server-advanced-link {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(66,227,193,.28);
    border-radius: 13px;
    background: rgba(66,227,193,.045);
    color: var(--ink-2);
    font-family: var(--f-sans);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), transform var(--t);
}
.server-advanced-link:hover { border-color: rgba(66,227,193,.52); background: rgba(66,227,193,.075); transform: translateY(-1px); }
.server-advanced-link > span { display: grid; gap: 3px; }
.server-advanced-link strong { color: var(--server-accent); font-size: 12px; }
.server-advanced-link em { color: var(--ink-3); font-size: 10px; font-style: normal; }
.server-advanced-link > i { color: var(--server-accent); }
.server-control-v6 .server-advanced-details {
    scroll-margin-top: 138px;
    border-radius: 16px;
}
.server-control-v6 .server-advanced-details > summary { min-height: 58px; }
.server-control-v6 .server-lm-wide { margin-top: 0; }
.server-section-card { scroll-margin-top: 138px; }
.server-network-layout, .server-storage-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 12px; }
.server-network-summary, .server-storage-summary { display: grid; align-content: start; gap: 12px; padding: 15px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--well); }
.server-section-subhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.server-section-subhead > div { display: grid; gap: 3px; }
.server-section-subhead strong { color: var(--ink); font-size: 12.5px; font-weight: 950; }
.server-section-subhead span { color: var(--ink-3); font-size: 10px; line-height: 1.55; }
.server-ip-command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.server-storage-hero { display: grid; gap: 10px; }
.server-storage-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.server-storage-hero-top span { color: var(--ink-3); font-size: 10.5px; }
.server-storage-hero-top strong { color: var(--server-accent); font-family: var(--f-mono); font-size: 22px; }
.server-storage-hero .server-storage-meter { height: 10px; }
.server-storage-hero p { margin: 0; color: var(--ink-3); font-size: 10px; }
.server-tools-card { scroll-margin-top: 138px; }
.server-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.server-tool-action {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: var(--well);
    color: var(--ink-2);
    font-family: var(--f-sans);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t), border-color var(--t), background var(--t);
}
.server-tool-action:hover { transform: translateY(-1px); border-color: var(--act-ring); background: rgba(255,255,255,.03); }
.server-tool-action > i { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: var(--server-cyan); background: rgba(102,216,255,.08); }
.server-tool-action > span { min-width: 0; display: grid; gap: 3px; }
.server-tool-action strong { color: var(--ink); font-size: 11.5px; font-weight: 950; }
.server-tool-action em { color: var(--ink-3); font-size: 9.5px; font-style: normal; line-height: 1.45; }
.server-tool-action.is-billing > i { color: var(--server-accent); background: rgba(66,227,193,.08); }
.server-tool-action.is-locked { pointer-events: none; cursor: not-allowed; opacity: .55; }
.server-billing-overview { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); gap: 12px; }
.server-billing-summary, .server-billing-list { display: grid; gap: 9px; align-content: start; padding: 13px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255,255,255,.018); }
.server-billing-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.server-billing-stat { display: grid; gap: 4px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(255,255,255,.02); }
.server-billing-stat em { color: var(--ink-3); font-size: 9.5px; font-style: normal; }
.server-billing-stat strong { color: var(--ink); font-size: 14px; }
.server-billing-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 11px; }
.server-billing-row > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--server-cyan); background: rgba(102,216,255,.08); }
.server-billing-row-copy { min-width: 0; display: grid; gap: 3px; }
.server-billing-row-copy strong { color: var(--ink); font-size: 12px; }
.server-billing-row-copy span { color: var(--ink-3); font-size: 10px; }
.server-billing-row-action { display: grid; justify-items: end; gap: 5px; }
.server-billing-row-action > strong { font-family: var(--f-mono); color: var(--ink-2); font-size: 11px; }
.server-billing-link { min-height: 32px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); background: var(--surface); font-size: 10px; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; }
.server-billing-link.is-pay { color: #04181a; border-color: transparent; background: var(--server-accent); }
@media (max-width: 1220px) {
    .server-command-summary { grid-template-columns: 1fr; gap: 18px; }
    .server-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .server-access-grid, .server-network-layout, .server-storage-layout, .server-billing-overview { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .server-section-nav { top: 62px; }
    .server-power-deck { grid-template-columns: 1fr; }
    .server-power-heading { grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
    .server-emergency-tools summary { width: 100%; }
    .server-emergency-panel { position: static; width: 100%; margin-top: 8px; }
    .server-access-columns { grid-template-columns: 1fr; }
    .server-password-channel-list { grid-template-columns: 1fr; }
    .server-provision-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .server-control-v6 .server-resource-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .server-network-resource { grid-column: 1 / -1; }
    .server-traffic-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .server-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .server-control-v6 { gap: 12px; }
    .server-command-card { padding: 15px; border-radius: 15px; }
    .server-command-title h2 { font-size: 34px; }
    .server-command-title p { font-size: 13px; }
    .server-command-facts { grid-template-columns: 1fr 1fr; }
    .server-command-fact { padding: 12px; }
    .server-primary-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
    .server-primary-action { min-height: 68px; padding: 11px; }
    .server-primary-action.is-primary, .server-primary-action[href="#server-overview-tools"] { grid-column: 1 / -1; }
    .server-primary-action.is-primary { order: -1; }
    .server-primary-action > i { width: 34px; height: 34px; flex-basis: 34px; }
    .server-power-actions { grid-template-columns: 1fr; }
    .server-section-nav { margin-inline: -2px; }
    .server-section-nav a { min-height: 44px; padding-inline: 13px; }
    .server-provision-head, .server-network-resource-head, .server-section-subhead { display: grid; }
    .server-provision-steps, .server-control-v6 .server-resource-matrix, .server-traffic-facts, .server-tools-grid, .server-ip-command-grid { grid-template-columns: 1fr; }
    .server-network-resource { grid-column: auto; }
    .server-access-card { padding: 14px; }
    .server-access-card-head { display: grid; }
    .server-storage-row { grid-template-columns: 1fr auto; }
    .server-storage-meter { grid-column: 1 / -1; grid-row: 2; }
    .server-copy-button,
    .server-access-row .server-cred-btn { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (max-width: 420px) {
    .server-command-facts { grid-template-columns: 1fr; }
    .server-command-fact { border-inline-end: 0; }
    .server-command-fact:nth-last-child(-n + 2) { border-block-end: 1px solid var(--line-soft); }
    .server-command-fact:last-child { border-block-end: 0; }
    .server-primary-actions { grid-template-columns: 1fr; }
    .server-primary-action { grid-column: 1 / -1; min-height: 72px; }
    .server-access-row { grid-template-columns: minmax(68px, auto) minmax(0, 1fr) auto; }
}

/* ═══ Billing V10 — answer “what do I owe?” before showing history ═══ */
.billing-v10, .billing-detail-v10, .wallet-v10 { display: grid; gap: 16px; min-width: 0; }
.billing-v10 bdi, .billing-detail-v10 bdi, .wallet-v10 bdi { direction: ltr; unicode-bidi: isolate; }
.billing-overview {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
}
.billing-overview-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: clamp(20px, 3vw, 32px);
    background: linear-gradient(118deg, var(--act-wash), transparent 48%);
}
.billing-overview-copy { display: grid; gap: 7px; }
.billing-overview-label { color: var(--ink-2); font-size: 13px; font-weight: 700; }
.billing-overview-amount { color: var(--ink); font-size: clamp(34px, 4.2vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.billing-overview-message { color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.billing-overview-message strong { color: var(--ink); }
.billing-overview-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.billing-overview-actions .btn { min-height: 44px; }
.billing-overview-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
.billing-fact { min-width: 0; padding: 16px 20px; display: grid; gap: 2px; }
.billing-fact + .billing-fact { border-inline-start: 1px solid var(--line); }
.billing-fact span { color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.billing-fact strong { color: var(--ink); font-size: 17px; line-height: 1.35; }
.billing-fact.is-danger strong { color: var(--err); }
.billing-fact.is-wallet strong { color: var(--act); }
html[data-theme="light"] .billing-fact.is-wallet strong { color: var(--act-deep); }
.billing-fact small { color: var(--ink-3); font-size: 10.5px; }

.billing-ledger {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
    overflow: hidden;
}
.billing-cancel-guide {
    margin: 14px 18px 0;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(90, 234, 207, .22);
    border-radius: var(--r-sm);
    background: linear-gradient(110deg, rgba(90, 234, 207, .09), rgba(53, 149, 255, .035));
}
.billing-cancel-guide-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(90, 234, 207, .24);
    border-radius: 11px;
    background: rgba(90, 234, 207, .08);
    color: var(--act);
}
.billing-cancel-guide-copy { min-width: 0; display: grid; gap: 2px; }
.billing-cancel-guide-copy strong { color: var(--ink); font-size: 12.5px; }
.billing-cancel-guide-copy small { color: var(--ink-3); font-size: 11px; line-height: 1.65; }
.billing-cancel-guide-badge {
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.billing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.billing-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.billing-filter {
    min-height: 35px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.billing-filter:hover { border-color: var(--ink-3); color: var(--ink); }
.billing-filter.is-active { border-color: var(--act); background: var(--act-wash); color: var(--act); }
html[data-theme="light"] .billing-filter.is-active { color: var(--act-deep); }
.billing-filter-count { min-width: 20px; min-height: 20px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--well); color: inherit; font-size: 10px; }
.billing-filter.is-active .billing-filter-count { background: rgba(90, 234, 207, .14); }
.billing-search { position: relative; width: min(280px, 100%); }
.billing-search input { min-height: 36px; padding-inline-start: 36px; }
.billing-search i { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 11px; pointer-events: none; }
.billing-ledger-head, .billing-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.3fr) minmax(130px, .7fr) minmax(115px, .55fr) minmax(238px, .95fr);
    align-items: center;
    gap: 18px;
}
.billing-ledger-head { padding: 10px 20px; color: var(--ink-3); font-size: 10.5px; font-weight: 700; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.billing-row { padding: 15px 20px; border-bottom: 1px solid var(--line-soft); transition: background var(--t), border-color var(--t); }
.billing-row:last-child { border-bottom: 0; }
.billing-row:hover { background: var(--surface-2); }
.billing-row.is-overdue { box-shadow: inset -3px 0 0 var(--err); }
html[lang="en"] .billing-row.is-overdue { box-shadow: inset 3px 0 0 var(--err); }
.billing-invoice-cell { min-width: 0; display: grid; gap: 3px; }
.billing-invoice-link { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); }
.billing-invoice-link strong { font-size: 16px; white-space: nowrap; }
.billing-invoice-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12.5px; }
.billing-created { color: var(--ink-3); font-size: 10.5px; }
.billing-state-cell { display: grid; gap: 5px; justify-items: start; }
.billing-state-cell small { color: var(--ink-3); font-size: 10.5px; }
.billing-state-cell small.is-danger { color: var(--err); }
.billing-row-amount { display: grid; gap: 2px; }
.billing-row-amount strong { color: var(--ink); font-size: 16px; }
.billing-row-amount small { color: var(--ink-3); font-size: 10px; }
.billing-row-actions { display: flex; align-items: center; justify-content: flex-start; gap: 7px; }
.billing-row-actions form { min-width: 0; margin: 0; display: flex; }
.billing-row-action { min-height: 34px; padding: 0 11px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; font-weight: 700; white-space: nowrap; transition: color var(--t), border-color var(--t), background var(--t), transform var(--t); }
.billing-row-action:hover { border-color: var(--act); color: var(--act); }
.billing-row-action:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.billing-row-action.is-pay { border-color: var(--warn); color: var(--warn); background: var(--warn-wash); }
.billing-row.is-overdue .billing-row-action.is-pay { border-color: var(--err); color: var(--err); background: var(--err-wash); }
.billing-row-action.is-pay:hover { background: var(--warn); color: #fff; }
.billing-row.is-overdue .billing-row-action.is-pay:hover { background: var(--err); color: #fff; }
.billing-row-action.is-cancel { border-color: rgba(240, 135, 155, .46); background: var(--err-wash); color: var(--err); }
.billing-row-action.is-cancel:hover { border-color: var(--err); background: var(--err); color: #fff; transform: translateY(-1px); }
.billing-row-action.is-disabled { opacity: .58; pointer-events: none; }
.billing-row-action.is-busy, .billing-overview-actions .is-busy, .billing-invoice-hero-actions .is-busy, .billing-summary-panel .is-busy { opacity: .65; pointer-events: none; }
.billing-empty { padding: 44px 24px; display: grid; place-items: center; text-align: center; gap: 8px; color: var(--ink-3); }
.billing-empty i { font-size: 22px; color: var(--act); }
.billing-empty strong { color: var(--ink); font-size: 15px; }

.billing-back { width: fit-content; display: inline-flex; align-items: center; gap: 7px; color: var(--act); font-size: 12px; font-weight: 700; }
.billing-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.billing-invoice-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .65fr) auto;
    align-items: center;
    gap: 24px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
}
.billing-invoice-title { display: grid; gap: 7px; }
.billing-invoice-title h2 { color: var(--ink); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.billing-invoice-title p { color: var(--ink-3); font-size: 12px; }
.billing-invoice-due { display: grid; gap: 4px; }
.billing-invoice-due span { color: var(--ink-3); font-size: 11px; font-weight: 600; }
.billing-invoice-due strong { color: var(--ink); font-size: clamp(28px, 3.4vw, 40px); line-height: 1; }
.billing-invoice-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.billing-invoice-hero-actions .btn { min-height: 44px; }
.billing-detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .7fr); gap: 16px; align-items: start; }
.billing-panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); padding: 22px; min-width: 0; }
.billing-panel-head { display: grid; gap: 3px; margin-bottom: 16px; }
.billing-panel-head h3 { color: var(--ink); font-size: 16px; }
.billing-panel-head p { color: var(--ink-3); font-size: 11.5px; }
.billing-items-list { display: grid; }
.billing-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.billing-item-row:first-child { border-top-color: var(--line); }
.billing-item-copy { min-width: 0; display: grid; gap: 3px; }
.billing-item-copy strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.billing-item-copy small { color: var(--ink-3); font-size: 10.5px; }
.billing-item-row > strong { color: var(--ink); font-size: 13px; white-space: nowrap; }
.billing-summary-panel { position: sticky; top: 82px; }
.billing-summary-list { display: grid; }
.billing-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: 12px; }
.billing-summary-row strong { color: var(--ink); white-space: nowrap; }
.billing-summary-row.is-total { margin-top: 4px; padding-top: 14px; color: var(--ink); font-weight: 700; }
.billing-summary-row.is-total strong { font-size: 17px; }
.billing-summary-row.is-due { border-bottom: 0; color: var(--err); font-weight: 800; }
.billing-summary-row.is-due strong { color: inherit; font-size: 21px; }
.billing-method { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.billing-method > span { color: var(--ink-3); font-size: 10.5px; }
.billing-method strong { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; }
.billing-fee-note, .billing-receipt-state { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--well); color: var(--ink-2); font-size: 11px; line-height: 1.65; }
.billing-receipt-state.is-pending { background: var(--info-wash); color: var(--info); }
.billing-receipt-state.is-success { background: var(--ok-wash); color: var(--ok); }
.billing-receipt-state.is-danger { background: var(--err-wash); color: var(--err); }

.wallet-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
    overflow: hidden;
}
.wallet-overview-block { min-width: 0; padding: clamp(20px, 3vw, 28px); display: grid; gap: 6px; }
.wallet-overview-block + .wallet-overview-block { border-inline-start: 1px solid var(--line); }
.wallet-overview-block span { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.wallet-overview-block strong { color: var(--ink); font-size: clamp(30px, 3.4vw, 42px); line-height: 1; }
.wallet-overview-block.is-wallet strong { color: var(--act); }
html[data-theme="light"] .wallet-overview-block.is-wallet strong { color: var(--act-deep); }
.wallet-overview-block.is-due strong { color: var(--warn); }
.wallet-overview-block p { color: var(--ink-2); font-size: 11.5px; }
.wallet-overview-block .btn { width: fit-content; margin-top: 5px; }
.wallet-plain-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: 12px; line-height: 1.65; }
.wallet-plain-note i { color: var(--info); margin-top: 4px; }
.wallet-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .62fr); gap: 16px; align-items: start; }
.wallet-topup-panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.wallet-step { padding: 20px 22px; border-bottom: 1px solid var(--line); display: grid; gap: 13px; }
.wallet-step:last-child { border-bottom: 0; }
.wallet-step-head { display: flex; align-items: center; gap: 10px; }
.wallet-step-number { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--act); color: var(--on-act); font-size: 11px; font-weight: 800; flex-shrink: 0; }
.wallet-step-head h3 { color: var(--ink); font-size: 15px; }
.wallet-step-head p { color: var(--ink-3); font-size: 10.5px; margin-inline-start: auto; }
.wallet-amount-grid { display: grid; grid-template-columns: repeat(3, minmax(90px, .5fr)) minmax(180px, 1fr); gap: 9px; }
.wallet-amount-choice { min-height: 54px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 800; transition: border-color var(--t), background var(--t); }
.wallet-amount-choice span { display: block; color: var(--ink-3); font-size: 9px; font-weight: 600; }
.wallet-amount-choice:hover, .wallet-amount-choice.is-active { border-color: var(--act); background: var(--act-wash); color: var(--act); }
.wallet-custom-amount { display: grid; gap: 4px; }
.wallet-custom-amount label { display: flex; justify-content: space-between; gap: 10px; }
.wallet-converted { color: var(--ink-3); font-size: 10.5px; min-height: 17px; }
.wallet-gateway-grid { display: grid; gap: 9px; }
.wallet-gateway-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; }
.wallet-gateway-card:hover { border-color: var(--ink-3); }
.wallet-gateway-card:has(input:checked) { border-color: var(--act); background: var(--act-wash); box-shadow: 0 0 0 1px var(--act); }
.wallet-gateway-card input { margin: 0; }
.wallet-gateway-copy { display: grid; gap: 2px; }
.wallet-gateway-copy strong { color: var(--ink); font-size: 12.5px; }
.wallet-gateway-copy small { color: var(--ink-3); font-size: 10.5px; }
.wallet-gateway-card > i { color: var(--act); font-size: 15px; }
.wallet-ack { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--warn); border-radius: var(--r-sm); background: var(--warn-wash); color: var(--ink-2); font-size: 11.5px; line-height: 1.65; }
.wallet-ack input { margin-top: 4px; flex-shrink: 0; }
.wallet-submit { width: 100%; min-height: 46px; }
.wallet-submit[disabled] { opacity: .55; }
.wallet-side { display: grid; gap: 16px; }
.wallet-process, .wallet-direct-invoices { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); padding: 20px; }
.wallet-side h3 { color: var(--ink); font-size: 15px; margin-bottom: 14px; }
.wallet-process-list { display: grid; gap: 12px; }
.wallet-process-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.wallet-process-item b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--act-wash); color: var(--act); font-size: 10px; }
.wallet-process-item strong { display: block; color: var(--ink); font-size: 12px; }
.wallet-process-item span { display: block; color: var(--ink-3); font-size: 10.5px; line-height: 1.55; }
.wallet-direct-list { display: grid; }
.wallet-direct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.wallet-direct-row:first-child { border-top: 0; padding-top: 0; }
.wallet-direct-row:last-child { padding-bottom: 0; }
.wallet-direct-row-copy { display: grid; gap: 2px; }
.wallet-direct-row-copy strong { color: var(--ink); font-size: 12px; }
.wallet-direct-row-copy span { color: var(--ink-3); font-size: 10.5px; }
.wallet-direct-row .billing-row-action { min-height: 31px; }

@media (max-width: 980px) {
    .billing-detail-grid, .wallet-layout { grid-template-columns: 1fr; }
    .billing-summary-panel { position: static; }
    .wallet-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
    .billing-overview-main, .billing-invoice-hero { grid-template-columns: 1fr; align-items: stretch; }
    .billing-overview-actions, .billing-invoice-hero-actions { justify-content: flex-start; }
    .billing-ledger-head { display: none; }
    .billing-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "invoice state" "amount amount" "actions actions";
        gap: 12px;
        padding: 17px;
    }
    .billing-invoice-cell { grid-area: invoice; }
    .billing-state-cell { grid-area: state; justify-items: end; text-align: end; }
    .billing-row-amount { grid-area: amount; padding-top: 11px; border-top: 1px solid var(--line-soft); }
    .billing-row-amount strong { font-size: 21px; }
    .billing-row-actions { grid-area: actions; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .billing-row-actions form { width: 100%; }
    .billing-row-action { flex: 1; min-height: 40px; }
    .billing-row-actions form .billing-row-action { width: 100%; }
    .billing-row.is-overdue { box-shadow: inset -3px 0 0 var(--err); }
}
@media (max-width: 640px) {
    .billing-cancel-guide { margin: 12px 12px 0; grid-template-columns: auto minmax(0, 1fr); }
    .billing-cancel-guide-badge { grid-column: 1 / -1; width: fit-content; }
    .billing-overview-facts { grid-template-columns: 1fr; }
    .billing-fact + .billing-fact { border-inline-start: 0; border-top: 1px solid var(--line); }
    .billing-toolbar { align-items: stretch; }
    .billing-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; width: 100%; }
    .billing-search { width: 100%; }
    .billing-invoice-link { display: grid; gap: 2px; }
    .billing-invoice-link span { max-width: 52vw; }
    .billing-invoice-hero-actions { display: grid; grid-template-columns: 1fr; }
    .billing-invoice-hero-actions .btn { width: 100%; }
    .billing-panel { padding: 17px; }
    .billing-item-row { gap: 12px; }
    .wallet-overview { grid-template-columns: 1fr; }
    .wallet-overview-block + .wallet-overview-block { border-inline-start: 0; border-top: 1px solid var(--line); }
    .wallet-amount-grid { grid-template-columns: repeat(3, 1fr); }
    .wallet-custom-amount { grid-column: 1 / -1; }
    .wallet-side { grid-template-columns: 1fr; }
    .wallet-step { padding: 17px; }
    .wallet-step-head { align-items: flex-start; }
    .wallet-step-head p { display: none; }
}
@media print {
    .main[data-v5-view="invoices"] .ink-page-head,
    .main[data-v5-view="invoices"] .subbar,
    .billing-back,
    .billing-invoice-hero-actions,
    .sidebar,
    .ink-header { display: none !important; }
    .main[data-v5-view="invoices"] { margin: 0 !important; padding: 0 !important; }
    .billing-detail-v10 { color: #111; }
    .billing-invoice-hero, .billing-panel { box-shadow: none; background: #fff; border-color: #bbb; }
}

/* V5 invoice/pay clarity — structured copy, real PDF actions and mobile-safe layout. */
.v5-buy-journey[data-checkout-stage="pay"] .catalog-focus-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(290px, .65fr) !important;
    gap: 18px;
}
.v5-buy-journey[data-checkout-stage="pay"] .catalog-focus-card,
.v5-buy-journey[data-checkout-stage="pay"] .catalog-summary-card { min-width: 0; }
.v5-invoice-card-v11 {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--act) 34%, var(--line));
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 95%, var(--act) 5%), var(--surface));
}
.v5-invoice-card-v11 .v5-payment-panel-head {
    padding: 22px 24px;
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 92%, var(--act) 8%);
}
.v5-invoice-heading-copy { min-width: 0; display: grid; gap: 6px; }
.v5-invoice-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--act); font-size: 11px; font-weight: 800; }
.v5-invoice-heading-copy h3 { margin: 0; color: var(--ink); font-size: clamp(21px, 2.5vw, 28px); line-height: 1.25; }
.v5-invoice-heading-copy p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.7; }
.v5-invoice-card-v11 .v5-order-summary-body { padding: 0 24px; }
.v5-order-summary-table { table-layout: fixed; }
.v5-order-summary-table th {
    padding: 13px 0 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 10.5px;
    text-align: start;
}
.v5-order-summary-table th:last-child,
.v5-order-summary-table td:last-child { width: 138px; text-align: end; }
.v5-order-summary-table td { padding: 16px 0; vertical-align: top; }
.v5-order-summary-table td:first-child { padding-inline-end: 18px; }
.v5-invoice-item-copy { min-width: 0; display: grid; gap: 5px; text-align: start; }
.v5-invoice-item-copy > span { color: var(--act); font-size: 10px; font-weight: 800; }
.v5-invoice-item-copy > strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: break-word;
    word-break: normal;
}
.v5-invoice-item-details { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; }
.v5-invoice-item-details > span {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 10.5px;
    line-height: 1.45;
}
.v5-invoice-item-details em { color: var(--ink-3); font-style: normal; font-weight: 650; white-space: nowrap; }
.v5-invoice-item-details bdi { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.v5-invoice-line-amount { display: inline-block; color: var(--ink); font-size: 14px; white-space: nowrap; }
.v5-invoice-empty-row { color: var(--ink-3); text-align: center !important; }
.v5-invoice-card-v11 .v5-order-totals { max-width: none; padding: 6px 24px 18px; }
.v5-invoice-card-v11 .v5-credit-info { margin: 0 24px 22px; }

.v5-pay-summary-head-v11 { display: grid; align-items: start; justify-content: stretch; gap: 6px; margin-bottom: 16px; }
.v5-pay-summary-head-v11 h4 { margin: 0; color: var(--ink); font-size: 19px; line-height: 1.35; }
.v5-pay-summary-head-v11 .catalog-summary-note { font-size: 11.5px; line-height: 1.7; }
.v5-pay-summary-price-v11 { display: grid; gap: 5px; padding: 15px; border-radius: var(--r-sm); background: var(--act-wash); border: 1px solid color-mix(in srgb, var(--act) 26%, var(--line)); }
.v5-pay-summary-price-v11 > span { color: var(--ink-2); font-family: var(--f-sans); font-size: 11px; font-weight: 750; letter-spacing: 0; }
.v5-pay-summary-price-v11 > strong { color: var(--act); font-family: var(--f-mono); font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.v5-pay-summary-price-v11 > small { color: var(--ink-3); font-family: var(--f-sans); font-size: 10.5px; line-height: 1.55; letter-spacing: 0; }
.v5-pay-breakdown-v11 { margin-top: 14px; }
.v5-pay-breakdown-v11 .kv-row { gap: 12px; }
.v5-pay-breakdown-v11 .kv-row strong { white-space: nowrap; }
.v5-pay-breakdown-v11 .kv-row small { color: var(--ink-3); }
.v5-pay-breakdown-v11 .is-saving { color: var(--ok); }
.v5-pay-breakdown-v11 .is-credit { color: var(--info); }
.v5-pay-breakdown-v11 .is-total { margin-top: 4px; padding-top: 13px; border-top: 1px dashed var(--line); color: var(--ink); font-weight: 800; }
.v5-pay-breakdown-v11 .is-total strong { color: var(--act); font-size: 18px; }
.v5-pay-service-state-v11 { margin-top: 14px; }
.v5-invoice-actions-v11 { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.v5-invoice-actions-v11 .invoice-delete-form { display: contents; }
.v5-invoice-actions-v11 .invoice-delete-btn { width: 100%; min-height: 40px; border-radius: var(--r-sm); }
.v5-invoice-download-status { min-height: 20px; margin: 8px 0 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.55; }
.v5-invoice-download-status:empty { display: none; }
.v5-invoice-download-status.is-loading { color: var(--info); }
.v5-invoice-download-status.is-success { color: var(--ok); }
.v5-invoice-download-status.is-error { color: var(--err); }
.billing-invoice-hero .v5-invoice-download-status { grid-column: 1 / -1; margin: -8px 0 0; }
.billing-item-copy > strong { overflow-wrap: break-word; word-break: normal; }

@media (max-width: 980px) {
    .v5-buy-journey[data-checkout-stage="pay"] .catalog-focus-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .v5-buy-journey[data-checkout-stage="pay"] .catalog-summary-card { position: static; }
}
@media (max-width: 620px) {
    .v5-invoice-card-v11 .v5-payment-panel-head { padding: 18px 16px; }
    .v5-invoice-card-v11 .v5-order-summary-body { padding-inline: 16px; }
    .v5-invoice-card-v11 .v5-order-totals { padding-inline: 16px; }
    .v5-invoice-card-v11 .v5-credit-info { margin-inline: 16px; }
    .v5-order-summary-table th:last-child,
    .v5-order-summary-table td:last-child { width: 96px; }
    .v5-order-summary-table td:first-child { padding-inline-end: 10px; }
    .v5-invoice-item-details { display: grid; grid-template-columns: minmax(0, 1fr); }
    .v5-invoice-item-details > span { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .v5-invoice-actions-v11 { grid-template-columns: minmax(0, 1fr); }
    .billing-item-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .billing-item-row > strong { justify-self: start; }
}

@media print {
    @page { size: A4; margin: 14mm; }
    html, body { background: #fff !important; color: #111 !important; }
    .main[data-v5-view="services"] .ink-page-head,
    .main[data-v5-view="services"] .subbar,
    .v5-buy-journey[data-checkout-stage="pay"] .v5-journey-heading,
    .v5-buy-journey[data-checkout-stage="pay"] .v5-stepper-new,
    .v5-buy-journey[data-checkout-stage="pay"] .v5-pay-selected-gateway,
    .v5-buy-journey[data-checkout-stage="pay"] .v5-payment-panel:not(.v5-invoice-card-v11),
    .v5-buy-journey[data-checkout-stage="pay"] .v5-provision-result,
    .v5-buy-journey[data-checkout-stage="pay"] .catalog-checkout-actions,
    .v5-invoice-download-status,
    .v5-buy-journey[data-checkout-stage="pay"] .catalog-summary-card,
    .v5-tabbar { display: none !important; }
    .main[data-v5-view="services"],
    .v5-buy-journey-shell,
    .v5-buy-journey[data-checkout-stage="pay"],
    .v5-buy-journey[data-checkout-stage="pay"] .catalog-studio,
    .v5-buy-journey[data-checkout-stage="pay"] .catalog-focus-grid,
    .v5-buy-journey[data-checkout-stage="pay"] .catalog-focus-card { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }
    .v5-invoice-card-v11 { overflow: visible !important; border: 1px solid #cbd5e1 !important; box-shadow: none !important; background: #fff !important; color: #111 !important; break-inside: auto; page-break-inside: auto; }
    .v5-invoice-card-v11 * { color: #111 !important; }
    .v5-invoice-card-v11 .v5-payment-panel-head,
    .v5-order-summary-table tr,
    .v5-total-row { break-inside: avoid; page-break-inside: avoid; }
}

/* V5 paid backups: pricing, purchase and reads stay in the client panel. */
.v5-backup-flash { margin-bottom: 14px; }
.v5-backup-flash.is-success { border-color: color-mix(in srgb, var(--ok) 46%, transparent); background: var(--ok-wash); }
.v5-backup-flash.is-danger { border-color: color-mix(in srgb, var(--err) 46%, transparent); background: var(--err-wash); }
.v5-backup-purchase-form { display: contents; }
.v5-backup-purchase-form .server-tool-action { width: 100%; min-width: 0; text-align: inherit; }
.v5-backup-tool { position: relative; overflow: hidden; }
.v5-backup-tool::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--act); opacity: .72; }
.v5-backup-tool.is-enabled { border-color: color-mix(in srgb, var(--ok) 34%, var(--line)); background: var(--ok-wash); }
.v5-backup-tool.is-purchasable { border-color: color-mix(in srgb, var(--act) 42%, var(--line)); background: var(--act-wash); }
.v5-backup-tool.is-purchasable:not(:disabled):hover { transform: translateY(-1px); border-color: var(--act); }
.v5-backup-tool:disabled { cursor: wait; opacity: .72; }
.v5-backup-list-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 94%, var(--act) 6%); }
.v5-backup-list-panel[hidden] { display: none !important; }
.v5-backup-list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line-soft); }
.v5-backup-list-head > div { display: grid; gap: 3px; }
.v5-backup-list-head strong { color: var(--ink); font-size: 14px; }
.v5-backup-list-head span { color: var(--ink-3); font-size: 11px; line-height: 1.55; }
.v5-backup-list-head a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--act); font-size: 11px; font-weight: 800; }
.v5-backup-live-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--ok) 34%, var(--line)); border-radius: 999px; background: var(--ok-wash); color: var(--ok) !important; font-weight: 850; white-space: nowrap; }
.v5-backup-live-chip.is-busy { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-wash); color: var(--warn) !important; }
[data-v5-backup-list-body] { display: grid; gap: 8px; padding-top: 12px; }
.v5-backup-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v5-backup-summary-card { min-width: 0; display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.v5-backup-summary-card span { color: var(--ink-3); font-size: 10px; }
.v5-backup-summary-card strong { color: var(--ink); font-size: 12px; line-height: 1.55; }
.v5-backup-job { display: grid; gap: 9px; padding: 13px; border: 1px solid color-mix(in srgb, var(--act) 38%, var(--line)); border-radius: var(--r-sm); background: var(--act-wash); }
.v5-backup-job-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v5-backup-job-head strong { color: var(--ink); font-size: 12px; }
.v5-backup-job-head span, .v5-backup-job small { color: var(--ink-3); font-size: 10px; }
.v5-backup-job-meter { height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--line) 72%, transparent); }
.v5-backup-job-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--act), var(--ok)); transition: width .3s ease; }
.v5-backup-operation-result { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); color: var(--ink-2); background: var(--surface-2); font-size: 11px; font-weight: 750; }
.v5-backup-operation-result.is-completed { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-wash); color: var(--ok); }
.v5-backup-operation-result.is-failed, .v5-backup-operation-result.is-review { border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); background: var(--warn-wash); color: var(--warn); }
.v5-backup-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0 3px; }
.v5-backup-actions .btn { min-height: 38px; }
.v5-backup-retention { color: var(--ink-3); font-size: 10px; line-height: 1.6; }
.v5-backup-points-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 3px; border-top: 1px solid var(--line-soft); }
.v5-backup-points-head strong { color: var(--ink); font-size: 12px; }
.v5-backup-points-head span { color: var(--ink-3); font-size: 10px; }
.v5-backup-points { display: grid; gap: 8px; }
.v5-backup-point { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.v5-backup-restore-button { min-height: 34px; padding-inline: 11px; white-space: nowrap; }
.v5-backup-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.v5-backup-row-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--ok-wash); color: var(--ok); font-weight: 900; }
.v5-backup-row-copy { display: grid; gap: 2px; min-width: 0; }
.v5-backup-row-copy strong { color: var(--ink); font-size: 12px; }
.v5-backup-row-copy em { color: var(--ink-3); font-size: 10px; font-style: normal; }
.v5-backup-row-size { color: var(--ink-2); font-size: 11px; direction: ltr; }
.v5-backup-restore-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: 10.5px; line-height: 1.7; }
.v5-backup-restore-note i { margin-top: 3px; color: var(--act); }
.server-muted-note.is-danger { color: var(--err); }

@media (max-width: 640px) {
    .v5-backup-list-head { align-items: stretch; flex-direction: column; }
    .v5-backup-list-head a { width: 100%; }
    .v5-backup-live-chip { width: fit-content; }
    .v5-backup-summary-grid { grid-template-columns: 1fr; }
    .v5-backup-actions, .v5-backup-points-head { align-items: stretch; flex-direction: column; }
    .v5-backup-actions .btn { width: 100%; }
    .v5-backup-point { grid-template-columns: 30px minmax(0, 1fr); }
    .v5-backup-restore-button { grid-column: 1 / -1; width: 100%; }
    .v5-backup-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
    .v5-backup-row-size { grid-column: 2 / -1; }
}

/* Services V8 — SNG/VirtFusion server cards inside My Services. */
.services-v7-card.services-v7-server-card {
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #071725;
    box-shadow: 0 22px 44px -24px rgba(0, 8, 16, .58);
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.services-v7-card.services-v7-server-card::before { display: none; }
.services-v7-card.services-v7-server-card:hover,
.services-v7-card.services-v7-server-card.is-expanded {
    border-color: color-mix(in srgb, var(--act) 34%, var(--line));
    background: #081b2b;
    box-shadow: 0 26px 56px -26px rgba(0, 8, 16, .7);
}
.services-v7-card.services-v7-server-card:hover { transform: translateY(-2px); }
.services-v7-card.services-v7-server-card.is-expanded { transform: none; }
.services-v7-server-summary {
    display: grid;
    min-height: 112px;
    grid-template-columns: minmax(330px, 1.25fr) minmax(260px, .85fr) auto;
    align-items: center;
    gap: 22px;
    padding: 20px 22px;
}
.services-v7-server-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}
.services-v7-server-os {
    display: grid;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--act) 22%, var(--line));
    border-radius: 17px;
    background: #06131f;
    color: var(--act);
    font-size: 29px;
    transition: color 220ms ease, border-color 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms ease;
}
.services-v7-server-card:hover .services-v7-server-os,
.services-v7-server-card.is-expanded .services-v7-server-os {
    border-color: color-mix(in srgb, var(--act) 48%, var(--line));
    transform: scale(1.035) rotate(-1deg);
    box-shadow: var(--act-glow);
}
.services-v7-server-os.is-linux { font-size: 23px; }
.services-v7-server-identity-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}
.services-v7-server-title-row {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.services-v7-server-title-row > strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 17px;
    font-weight: 850;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.services-v7-server-title-row .services-v7-state { min-height: 27px; }
.services-v7-server-identity-copy p {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.65;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.services-v7-server-identity-copy small {
    color: var(--ink-3);
    font-size: 10.5px;
}
.services-v7-server-access {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 11px;
}
.services-v7-server-access > span {
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 700;
}
.services-v7-server-access > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}
.services-v7-server-access button {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--ink-3);
    background: transparent;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.services-v7-server-access button:hover { color: var(--act); background: var(--act-wash); }
.services-v7-server-access button:active { transform: scale(.92); }
.services-v7-server-access code {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.services-v7-server-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}
.services-v7-server-controls form { margin: 0; }
.services-v7-server-manage,
.services-v7-server-expand {
    height: 44px;
    border-radius: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: color 170ms ease, background 170ms ease, border-color 170ms ease, box-shadow 170ms ease, transform 170ms cubic-bezier(.22, 1, .36, 1);
}
.services-v7-server-manage {
    display: inline-flex;
    min-width: 132px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--act) 62%, var(--line));
    color: var(--on-act);
    background: var(--act-deep);
    box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--act) 82%, transparent);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}
.services-v7-server-manage:hover {
    border-color: var(--act);
    color: var(--on-act);
    background: var(--act);
    box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--act) 88%, transparent);
    transform: translateY(-2px);
}
.services-v7-server-manage.is-warning { border-color: var(--warn); background: var(--warn); color: #fff; }
.services-v7-server-manage.is-danger { border-color: var(--err); background: var(--err); color: #fff; }
.services-v7-server-manage.is-info { border-color: var(--act); background: var(--act); color: var(--on-act); }
.services-v7-server-manage:disabled { cursor: not-allowed; opacity: .68; transform: none; }
.services-v7-server-expand {
    display: grid;
    width: 44px;
    flex: 0 0 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    background: var(--well);
}
.services-v7-server-expand:hover {
    border-color: color-mix(in srgb, var(--act) 54%, var(--line));
    color: var(--act);
    background: var(--act-wash);
    transform: translateY(-1px);
}
.services-v7-server-manage:active,
.services-v7-server-expand:active { transform: scale(.96); }
.services-v7-server-expand i { transform: rotate(0); transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
.services-v7-server-card.is-expanded .services-v7-server-expand i { transform: rotate(-90deg); }
.services-v7-server-metrics-shell {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 1px solid transparent;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 440ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease, border-color 260ms ease, visibility 0s linear 440ms;
}
.services-v7-server-card.is-expanded .services-v7-server-metrics-shell {
    grid-template-rows: 1fr;
    border-top-color: var(--line);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.services-v7-server-metrics-clip { min-height: 0; overflow: hidden; }
.services-v7-server-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 20px 16px;
}
.services-v7-server-metric {
    display: grid;
    min-width: 0;
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) minmax(92px, .72fr);
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #091e2d;
    opacity: 0;
    transform: translateY(-9px);
    transition: border-color 180ms ease, background 180ms ease, opacity 280ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1);
}
.services-v7-server-card.is-expanded .services-v7-server-metric { opacity: 1; transform: translateY(0); }
.services-v7-server-card.is-expanded .services-v7-server-metric:nth-child(2),
.services-v7-server-card.is-expanded .services-v7-server-metric:nth-child(5) { transition-delay: 45ms; }
.services-v7-server-card.is-expanded .services-v7-server-metric:nth-child(3),
.services-v7-server-card.is-expanded .services-v7-server-metric:nth-child(6) { transition-delay: 90ms; }
.services-v7-server-metric:hover {
    border-color: color-mix(in srgb, var(--act) 31%, var(--line));
    background: #0a2334;
}
.services-v7-server-metric-copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 7px;
}
.services-v7-server-metric-copy > span { color: var(--ink-2); font-size: 10.5px; font-weight: 700; }
.services-v7-server-metric-copy strong { color: var(--ink); font-size: 15px; font-weight: 850; text-align: start; white-space: nowrap; }
.services-v7-server-metric-copy small { overflow: hidden; color: var(--ink-3); font-size: 9.5px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.services-v7-server-metric[data-sng-metric="bandwidth"] { grid-template-columns: minmax(150px, 1fr) minmax(68px, .48fr); }
.services-v7-server-metric-visual { display: grid; min-width: 0; place-items: center; direction: ltr; }
.services-v7-server-metric[data-sng-metric="storage"] .services-v7-server-metric-visual { transform: translateX(-10px); }
.services-v7-server-metric svg { width: 100%; max-width: 141px; height: 45px; overflow: visible; }
.services-v7-server-metric svg polyline {
    fill: none;
    stroke: var(--act);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    opacity: 0;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 820ms cubic-bezier(.22, 1, .36, 1) 80ms, opacity 240ms ease;
}
.services-v7-server-card.is-expanded .services-v7-server-metric svg[data-sng-chart-ready="1"] polyline { stroke-dashoffset: 0; opacity: 1; }
.services-v7-server-ring {
    position: relative;
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--act) 0 var(--sng-ring, 0%), color-mix(in srgb, var(--line) 74%, transparent) var(--sng-ring, 0%) 100%);
    transform: rotate(-90deg);
    transition: background 360ms ease;
}
.services-v7-server-ring::before { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #071725; }
.services-v7-server-ring b { position: relative; color: var(--ink); font-size: 12px; font-weight: 850; transform: rotate(90deg); }
.services-v7-server-unlimited-line { display: block; width: 100%; max-width: 110px; height: 1px; background: var(--line-strong); }
.services-v7-server-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 20px 14px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: #071725;
}
.services-v7-server-meta.is-passive { display: none; }
.services-v7-server-meta-copy { display: grid; min-width: 0; gap: 8px; }
.services-v7-server-live-state { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 10.5px; line-height: 1.6; }
.services-v7-server-live-state i { color: var(--act); }
.services-v7-server-card[data-sng-stats-state="loading"] .services-v7-server-live-state i { animation: v5ServerMetricPulse 900ms ease-in-out infinite alternate; }
.services-v7-server-card[data-sng-stats-state="loaded"] .services-v7-server-live-state { color: var(--ok); }
.services-v7-server-card[data-sng-stats-state="loaded"] .services-v7-server-live-state i { color: var(--ok); }
.services-v7-server-card[data-sng-stats-state="error"] .services-v7-server-live-state { color: var(--warn); }
.services-v7-server-card[data-sng-stats-state="error"] .services-v7-server-live-state i { color: var(--warn); }
.services-v7-server-facts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.services-v7-server-facts > span { display: grid; gap: 2px; }
.services-v7-server-facts small { color: var(--ink-3); font-size: 9.5px; }
.services-v7-server-facts strong { color: var(--ink); font-size: 11px; }
.services-v7-server-secondary-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.services-v7-server-secondary-actions form { margin: 0; }
.services-v7-server-secondary-actions .btn { min-height: 38px; font-size: 10.5px; }
@keyframes v5ServerMetricPulse { from { transform: scale(.92); opacity: .55; } to { transform: scale(1.08); opacity: 1; } }

/* Panel-wide motion pass: persistent shell, sidebar and route transitions. */
.main {
    transform-origin: 50% 12%;
    transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1), filter 180ms ease;
}
.main.is-pjax-loading,
.main.is-pjax-leaving {
    opacity: .48;
    transform: translateY(5px) scale(.992);
    filter: saturate(.82) blur(.35px);
    pointer-events: none;
    cursor: progress;
}
.main.is-pjax-enter { animation: v5PanelPageEnter 440ms cubic-bezier(.22, 1, .36, 1) both; }
.main.is-pjax-enter .ink-page-head,
.main.is-pjax-enter .subbar,
.main.is-pjax-enter .services-v7-overview,
.main.is-pjax-enter .services-v7-tools,
.main.is-pjax-enter .services-v7-card,
.main.is-pjax-enter .table-panel,
.main.is-pjax-enter .side-panel,
.main.is-pjax-enter .metric,
.main.is-pjax-enter .item,
.main.is-pjax-enter .account-manage-card,
.main.is-pjax-enter .server-resource-card,
.main.is-pjax-enter .panel {
    animation: v5PanelItemEnter 430ms cubic-bezier(.22, 1, .36, 1) both;
}
.main.is-pjax-enter .services-v7-card:nth-child(2),
.main.is-pjax-enter .side-panel:nth-child(2),
.main.is-pjax-enter .item:nth-child(2),
.main.is-pjax-enter .metric:nth-child(2) { animation-delay: 45ms; }
.main.is-pjax-enter .services-v7-card:nth-child(3),
.main.is-pjax-enter .side-panel:nth-child(3),
.main.is-pjax-enter .item:nth-child(3),
.main.is-pjax-enter .metric:nth-child(3) { animation-delay: 90ms; }
@keyframes v5PanelPageEnter { from { opacity: 0; transform: translateY(9px) scale(.994); filter: blur(1.4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v5PanelItemEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nav-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 180ms ease, background 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease;
}
.nav-item::after {
    content: "";
    position: absolute;
    inset-block: 9px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--act), var(--ok));
    box-shadow: 0 0 14px color-mix(in srgb, var(--act) 62%, transparent);
    opacity: 0;
    transform: scaleY(.18);
    transition: opacity 180ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.nav-item:hover { transform: translateX(-4px); }
html[lang="en"] .nav-item:hover { transform: translateX(4px); }
.nav-item.active::after { opacity: 1; transform: scaleY(1); }
.nav-item.active .sidebar-nav-icon,
.nav-item.active i:first-child { animation: v5SidebarIconSettle 460ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes v5SidebarIconSettle { 0% { transform: scale(.82) rotate(-4deg); opacity: .55; } 62% { transform: scale(1.12) rotate(1deg); opacity: 1; } 100% { transform: scale(1); } }
.ink-nav-link,
.subbar a,
.v5-tabbar a,
.sidebar .user-chip,
.sidebar-actions .btn { transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease; }
.ink-nav-link:hover,
.subbar a:hover,
.v5-tabbar a:hover { transform: translateY(-2px); }
.btn:not(:disabled):active,
.ink-nav-link:active,
.subbar a:active,
.v5-tabbar a:active { transform: scale(.97); }
.sidebar { transition-duration: 340ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
.sidebar-backdrop { transition: opacity 280ms ease, visibility 280ms ease; }

@media (max-width: 1180px) {
    .services-v7-server-summary { grid-template-columns: minmax(300px, 1.15fr) minmax(225px, .85fr) auto; gap: 16px; padding-inline: 18px; }
    .services-v7-server-metrics { gap: 12px; padding-inline: 16px; }
    .services-v7-server-metric { grid-template-columns: minmax(0, 1fr) minmax(72px, .58fr); padding-inline: 14px; }
}
@media (max-width: 980px) {
    .services-v7-server-summary { grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr); }
    .services-v7-server-controls { grid-column: 1 / -1; justify-content: flex-start; }
    .services-v7-server-controls form, .services-v7-server-manage { flex: 1 1 auto; }
    .services-v7-server-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-v7-server-meta { align-items: stretch; flex-direction: column; }
    .services-v7-server-secondary-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
    .services-v7-server-card { width: 100%; max-width: 100%; min-width: 0; border-radius: 16px !important; }
    .services-v7-server-summary { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px 15px; }
    .services-v7-server-os { width: 54px; height: 54px; flex-basis: 54px; border-radius: 15px; font-size: 25px; }
    .services-v7-server-access { padding: 13px 14px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--well); }
    .services-v7-server-controls { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
    .services-v7-server-controls form { min-width: 0; }
    .services-v7-server-manage { width: 100%; min-width: 0; }
    .services-v7-server-metrics { grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 13px; }
    .services-v7-server-metric { min-height: 104px; }
    .services-v7-server-meta { margin: 0 13px 13px; }
    .services-v7-server-secondary-actions, .services-v7-server-secondary-actions form, .services-v7-server-secondary-actions .btn { width: 100%; }
    .services-v7-server-title-row > strong { max-width: 100%; white-space: normal; }
}

/* Keep selectable page subbars fixed; transition only the content below them. */
.main:has(> .subbar).is-pjax-loading,
.main:has(> .subbar).is-pjax-leaving,
.main:has(> .subbar).is-pjax-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
.main:has(> .subbar).is-pjax-enter > .ink-page-head,
.main:has(> .subbar).is-pjax-enter > .subbar,
.main:has(> .subbar).is-pjax-leaving > .ink-page-head,
.main:has(> .subbar).is-pjax-leaving > .subbar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
.main:has(> .subbar).is-pjax-enter > .subbar ~ * {
    animation: v5BelowSubbarEnter 360ms cubic-bezier(.22, 1, .36, 1) both !important;
}
.main:has(> .subbar).is-pjax-leaving > .subbar ~ * {
    animation: v5BelowSubbarLeave 130ms cubic-bezier(.4, 0, 1, 1) both !important;
    pointer-events: none;
}
.main.is-pjax-loading:not(.is-pjax-leaving) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
@keyframes v5BelowSubbarEnter {
    from { opacity: 0; transform: translateY(12px); filter: blur(1px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes v5BelowSubbarLeave {
    from { opacity: 1; transform: none; filter: none; }
    to { opacity: 0; transform: translateY(7px); filter: blur(.5px); }
}

@media (prefers-reduced-motion: reduce) {
    .services-v7-server-card,
    .services-v7-server-card *,
    .main,
    .main *,
    .sidebar,
    .sidebar-backdrop,
    .nav-item,
    .nav-item::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
    .services-v7-server-card:hover,
    .services-v7-server-os,
    .nav-item:hover,
    html[lang="en"] .nav-item:hover { transform: none !important; }
}