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

:root {
    --nhc-bg: var(--nc-bg, #070b18);
    --nhc-bg-soft: var(--nc-bg-2, #0a1024);
    --nhc-panel: rgba(16,23,51,.82);
    --nhc-panel-strong: rgba(13,19,41,.95);
    --nhc-line: rgba(34,44,82,.18);
    --nhc-line-hot: rgba(124,92,255,.42);
    --nhc-text: var(--nc-text, #eaf0ff);
    --nhc-muted: var(--nc-muted, #8590b4);
    --nhc-cyan: var(--nc-purple-2, #9d7dff);
    --nhc-blue: var(--nc-blue, #4d8bff);
    --nhc-violet: var(--nc-purple, #7c5cff);
    --nhc-green: #34d399;
    --nhc-red: var(--nc-red, #f4667f);
    --nhc-gold: var(--nc-orange, #fbaa46);
    --nhc-radius: 18px;
    --nhc-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

html.nhc-premium-root {
    min-height: 100%;
    color-scheme: dark;
    background: var(--nhc-bg);
    scroll-behavior: smooth;
}

html.nhc-premium-root body {
    min-height: 100vh;
    margin: 0;
    color: var(--nhc-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background:
        radial-gradient(circle at 10% -5%, rgba(124,92,255,.14), transparent 32%),
        radial-gradient(circle at 92% 14%, rgba(124,92,255,.16), transparent 31%),
        linear-gradient(145deg, var(--nc-bg, #070b18) 0%, var(--nc-bg-2, #0a1024) 48%, var(--nc-bg, #070b18) 100%) !important;
    background-attachment: fixed !important;
    isolation: isolate;
    overflow-x: hidden;
}

html.nhc-premium-root body::before,
html.nhc-premium-root body::after {
    position: fixed;
    z-index: -4;
    pointer-events: none;
    content: "";
}

html.nhc-premium-root body::before {
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(34,44,82,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34,44,82,.055) 1px, transparent 1px),
        radial-gradient(circle, rgba(124,92,255,.35) 1px, transparent 1.4px);
    background-size: 52px 52px, 52px 52px, 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

html.nhc-premium-root body::after {
    width: 42vw;
    height: 42vw;
    top: -18vw;
    right: -12vw;
    border-radius: 50%;
    background: rgba(77,139,255,.18);
    filter: blur(100px);
    animation: nhc-orbit 14s ease-in-out infinite alternate;
}

html.nhc-premium-root *,
html.nhc-premium-root *::before,
html.nhc-premium-root *::after {
    box-sizing: border-box;
}

html.nhc-premium-root ::selection {
    color: #fff;
    background: var(--nhc-cyan);
}

html.nhc-premium-root h1,
html.nhc-premium-root h2,
html.nhc-premium-root h3,
html.nhc-premium-root h4,
html.nhc-premium-root .page-title,
html.nhc-premium-root .title {
    color: var(--nc-text, #eaf0ff) !important;
    font-family: "Space Grotesk", Inter, sans-serif !important;
    letter-spacing: -.025em;
}

html.nhc-premium-root p,
html.nhc-premium-root .subtitle,
html.nhc-premium-root .sub,
html.nhc-premium-root small {
    color: var(--nhc-muted);
}

html.nhc-premium-root a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* ===== Phase 4 - Light-theme treatment for the ambient server-room artwork =====
   Presentation only. Scoped to html[data-theme="light"] so Original (no
   data-theme) and Dark (data-theme="dark") keep the exact original artwork.
   Geometry (260x370 / top 15% / right 3vw), the perspective transform and
   every keyframe timing are untouched. */
html[data-theme="light"] .nhc-atmosphere__rack{
    opacity:.16;
    border-color:rgba(99,102,241,.38);
    background:
        radial-gradient(circle at 24px 25px, rgba(99,102,241,.55) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 38px, rgba(99,102,241,.18) 39px 41px, transparent 42px),
        repeating-linear-gradient(to bottom, rgba(255,255,255,.92) 0 28px, rgba(99,102,241,.28) 29px, rgba(226,232,245,.92) 31px);
    box-shadow: inset 0 0 46px rgba(99,102,241,.10), 0 18px 50px rgba(30,41,59,.10);
}
html[data-theme="light"] .nhc-atmosphere__beam{
    opacity:.22;
    box-shadow: 0 0 22px rgba(99,102,241,.35);
}
html[data-theme="light"] .nhc-atmosphere__orb{
    box-shadow: 0 0 14px rgba(99,102,241,.55);
}
html.nhc-premium-root img {
    max-width: 100%;
}

html.nhc-premium-root .wrap,
html.nhc-premium-root .container {
    width: min(100% - 36px, 1240px) !important;
    margin-inline: auto !important;
}

/* Ambient server-room illustration shared by every inner page. */
.nhc-atmosphere {
    position: fixed;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.nhc-atmosphere__beam {
    position: absolute;
    width: 44vw;
    height: 1px;
    top: 24%;
    right: -4%;
    opacity: .35;
    background: linear-gradient(90deg, transparent, var(--nhc-cyan), transparent);
    box-shadow: 0 0 24px rgba(124,92,255,.75);
    animation: nhc-scan 8s linear infinite;
}

.nhc-atmosphere__rack {
    position: absolute;
    width: 260px;
    height: 370px;
    top: 15%;
    right: 3vw;
    opacity: .12;
    border: 1px solid rgba(124,92,255,.65);
    border-radius: 22px;
    background:
        radial-gradient(circle at 24px 25px, var(--nc-purple-2, #9d7dff) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 38px, rgba(124,92,255,.22) 39px 41px, transparent 42px),
        repeating-linear-gradient(to bottom, rgba(13,19,41,.92) 0 28px, rgba(124,92,255,.42) 29px, rgba(13,19,41,.92) 31px);
    background-size: 100% 34px, 100% 100%, 100% 34px;
    box-shadow: inset 0 0 50px rgba(124,92,255,.16), 0 0 80px rgba(77,139,255,.16);
    transform: perspective(800px) rotateY(-12deg) rotateX(3deg);
    animation: nhc-rack-float 7s ease-in-out infinite;
}

.nhc-atmosphere__orb {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nhc-cyan);
    box-shadow: 0 0 18px rgba(124,92,255,.95);
    animation: nhc-data-flight 9s linear infinite;
}

.nhc-atmosphere__orb:nth-child(3) { top: 68%; left: 7%; animation-delay: -2s; }
.nhc-atmosphere__orb:nth-child(4) { top: 34%; left: 38%; animation-delay: -5s; background: var(--nhc-violet); }
.nhc-atmosphere__orb:nth-child(5) { top: 82%; left: 68%; animation-delay: -7s; }

.nhc-scroll-progress {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--nhc-cyan), var(--nhc-blue), var(--nhc-violet));
    box-shadow: 0 0 18px rgba(124,92,255,.7);
}

.nhc-pointer-glow {
    position: fixed;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    opacity: .13;
    pointer-events: none;
    background: radial-gradient(circle, rgba(124,92,255,.62), transparent 66%);
    transform: translate3d(-50%, -50%, 0);
    transition: opacity .25s ease;
}

/* Navigation and application chrome. */
html.nhc-premium-root header,
html.nhc-premium-root .site-header {
    position: relative;
    z-index: 1000;
    overflow: visible !important;
    color: var(--nhc-text) !important;
    border-bottom: 1px solid var(--nhc-line) !important;
    background: rgba(7,11,24,.82) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .2) !important;
    backdrop-filter: blur(22px) saturate(140%);
}

html.nhc-premium-root .header-top,
html.nhc-premium-root .topbar {
    position: relative;
    z-index: 40;
    overflow: visible !important;
    color: var(--nhc-text) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(13,19,41,.78) !important;
    backdrop-filter: blur(18px);
}

html.nhc-premium-root .logo,
html.nhc-premium-root .brand {
    color: var(--nc-text, #eaf0ff) !important;
    font-family: "Space Grotesk", Inter, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.045em !important;
    text-decoration: none !important;
    filter: drop-shadow(0 0 20px rgba(124,92,255,.18));
}

html.nhc-premium-root .logo span,
html.nhc-premium-root .brand span {
    color: var(--nhc-cyan) !important;
}

html.nhc-premium-root .mainnav {
    position: relative;
    z-index: 10;
    border-color: var(--nhc-line) !important;
    background: rgba(13,19,41,.68) !important;
    backdrop-filter: blur(18px);
}

html.nhc-premium-root .mainnav a,
html.nhc-premium-root .nav-item {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: transparent !important;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
}

html.nhc-premium-root .mainnav a:hover,
html.nhc-premium-root .mainnav a.active,
html.nhc-premium-root .nav-item:hover,
html.nhc-premium-root .nav-item.active {
    color: #fff !important;
    border-color: rgba(124,92,255,.22) !important;
    background: linear-gradient(90deg, rgba(124,92,255,.14), rgba(124,92,255,.08)) !important;
}

html.nhc-premium-root .nav-item:hover { transform: translateX(3px); }

html.nhc-premium-root .sidebar {
    color: var(--nhc-text) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(7,11,24,.88) !important;
    box-shadow: 22px 0 65px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(22px) saturate(130%);
}

html.nhc-premium-root .nav-label,
html.nhc-premium-root .breadcrumb,
html.nhc-premium-root .subbar {
    color: var(--nc-faint, #65709a) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(10,16,36,.72) !important;
    letter-spacing: .11em;
}

html.nhc-premium-root .breadcrumb span,
html.nhc-premium-root .subbar a { color: var(--nhc-cyan) !important; }

.nhc-menu-toggle,
.nhc-sidebar-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid var(--nhc-line-hot);
    border-radius: 12px;
    background: rgba(16,23,51,.92);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    cursor: pointer;
}

.nhc-sidebar-toggle {
    position: fixed;
    z-index: 10002;
    top: 14px;
    left: 14px;
}

.nhc-sidebar-overlay {
    position: fixed;
    z-index: 9998;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(7,11,24,.72);
    backdrop-filter: blur(5px);
    transition: .25s ease;
}

body.nhc-sidebar-open .nhc-sidebar-overlay {
    visibility: visible;
    opacity: 1;
}

/* Panels, plans, tools and dashboards. */
html.nhc-premium-root .card,
html.nhc-premium-root .login-card,
html.nhc-premium-root .auth-card,
html.nhc-premium-root .invoice,
html.nhc-premium-root .panel,
html.nhc-premium-root .side-box,
html.nhc-premium-root .tool-card,
html.nhc-premium-root .plan-card,
html.nhc-premium-root .stat-card,
html.nhc-premium-root .table-panel,
html.nhc-premium-root .table-card,
html.nhc-premium-root .add-form,
html.nhc-premium-root .summary,
html.nhc-premium-root .box,
html.nhc-premium-root .ip-series-panel {
    color: var(--nhc-text) !important;
    border-color: var(--nhc-line) !important;
    border-radius: var(--nhc-radius) !important;
    background:
        linear-gradient(145deg, rgba(16,23,51,.88), rgba(10,16,36,.9)) padding-box,
        linear-gradient(135deg, rgba(124,92,255,.35), rgba(124,92,255,.18), transparent 65%) border-box !important;
    box-shadow: var(--nhc-shadow) !important;
    backdrop-filter: blur(18px) saturate(125%);
}

html.nhc-premium-root .tool-card,
html.nhc-premium-root .plan-card,
html.nhc-premium-root .stat-card,
html.nhc-premium-root .card {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

html.nhc-premium-root .tool-card::before,
html.nhc-premium-root .plan-card::before,
html.nhc-premium-root .stat-card::before,
html.nhc-premium-root .card::before {
    position: absolute;
    z-index: 0;
    width: 170px;
    height: 170px;
    top: -95px;
    right: -75px;
    border-radius: 50%;
    pointer-events: none;
    content: "";
    background: rgba(124,92,255,.09);
    filter: blur(4px);
}

html.nhc-premium-root .tool-card:hover,
html.nhc-premium-root .plan-card:hover,
html.nhc-premium-root .stat-card:hover,
html.nhc-premium-root .card:hover {
    border-color: var(--nhc-line-hot) !important;
    box-shadow: 0 28px 85px rgba(0, 0, 0, .42), 0 0 35px rgba(124,92,255,.08) !important;
}

html.nhc-premium-root .panel-head,
html.nhc-premium-root .side-box-head,
html.nhc-premium-root .plan-card-head,
html.nhc-premium-root .table-panel-header,
html.nhc-premium-root .summary-title {
    color: var(--nc-text, #eaf0ff) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(13,19,41,.7) !important;
    font-family: "Space Grotesk", Inter, sans-serif !important;
}

html.nhc-premium-root .stat-value,
html.nhc-premium-root .stat-num,
html.nhc-premium-root .plan-price,
html.nhc-premium-root .amount-value,
html.nhc-premium-root .total-amt,
html.nhc-premium-root .balance-amt {
    color: var(--nc-text, #eaf0ff) !important;
    font-family: "Space Grotesk", Inter, sans-serif !important;
    text-shadow: 0 0 24px rgba(124,92,255,.13);
}

html.nhc-premium-root .stat-label,
html.nhc-premium-root .plan-meta,
html.nhc-premium-root .svc-sub,
html.nhc-premium-root .ticket-meta,
html.nhc-premium-root .info-line,
html.nhc-premium-root .empty-panel,
html.nhc-premium-root .empty-state {
    color: var(--nhc-muted) !important;
}

html.nhc-premium-root .tool-icon,
html.nhc-premium-root .stat-icon {
    filter: drop-shadow(0 0 14px rgba(124,92,255,.25));
}

/* Forms and controls. */
html.nhc-premium-root input:not([type="checkbox"]):not([type="radio"]),
html.nhc-premium-root select,
html.nhc-premium-root textarea,
html.nhc-premium-root .search-box,
html.nhc-premium-root .field-row {
    color: var(--nc-text, #eaf0ff) !important;
    border-color: rgba(123, 154, 200, .25) !important;
    border-radius: 12px !important;
    background: rgba(7,11,24,.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    caret-color: var(--nhc-cyan);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

html.nhc-premium-root input::placeholder,
html.nhc-premium-root textarea::placeholder { color: var(--nc-faint, #65709a) !important; }

html.nhc-premium-root input:focus,
html.nhc-premium-root select:focus,
html.nhc-premium-root textarea:focus,
html.nhc-premium-root .field-row:focus-within {
    outline: none !important;
    border-color: rgba(124,92,255,.7) !important;
    background: rgba(10,16,36,.92) !important;
    box-shadow: 0 0 0 4px rgba(124,92,255,.1), 0 14px 32px rgba(0, 0, 0, .18) !important;
}

html.nhc-premium-root label,
html.nhc-premium-root .label-row { color: var(--nc-text-2, #b7c2e0) !important; }

html.nhc-premium-root button,
html.nhc-premium-root input[type="submit"],
html.nhc-premium-root .btn,
html.nhc-premium-root [class$="-btn"],
html.nhc-premium-root [class*="-btn "] {
    border-radius: 11px !important;
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

html.nhc-premium-root button:hover,
html.nhc-premium-root input[type="submit"]:hover,
html.nhc-premium-root .btn:hover,
html.nhc-premium-root [class$="-btn"]:hover,
html.nhc-premium-root [class*="-btn "]:hover {
    filter: brightness(1.09);
    transform: translateY(-2px);
}

html.nhc-premium-root .login-btn,
html.nhc-premium-root .order-btn,
html.nhc-premium-root .pay-btn,
html.nhc-premium-root .client-btn,
html.nhc-premium-root .create-btn,
html.nhc-premium-root .addfunds-btn,
html.nhc-premium-root .tool-btn,
html.nhc-premium-root .view-details,
html.nhc-premium-root .update-btn,
html.nhc-premium-root .action-link,
html.nhc-premium-root .submit-btn,
html.nhc-premium-root .primary-btn,
html.nhc-premium-root .btn-primary {
    color: #fff !important;
    border: 1px solid rgba(124,92,255,.55) !important;
    background: var(--nc-accent-grad, linear-gradient(135deg,#7c5cff,#4d8bff)) !important;
    box-shadow: 0 12px 30px rgba(124,92,255,.18) !important;
    text-decoration: none !important;
}

html.nhc-premium-root .back,
html.nhc-premium-root .back-link,
html.nhc-premium-root .logout-btn,
html.nhc-premium-root .btn-secondary {
    color: var(--nc-text-2, #b7c2e0) !important;
    border: 1px solid var(--nhc-line) !important;
    background: rgba(16,23,51,.8) !important;
    text-decoration: none !important;
}

html.nhc-premium-root .danger,
html.nhc-premium-root .delete-btn { color: var(--nhc-red) !important; }

html.nhc-premium-root .success { color: var(--nhc-green) !important; }

html.nhc-premium-root .disabled,
html.nhc-premium-root button:disabled,
html.nhc-premium-root input:disabled,
html.nhc-premium-root select:disabled {
    cursor: not-allowed !important;
    opacity: .52 !important;
}

/* Data tables and invoices. */
html.nhc-premium-root table {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: var(--nhc-line) !important;
    background: transparent !important;
}

html.nhc-premium-root th {
    color: var(--nc-muted, #8590b4) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(13,19,41,.78) !important;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.nhc-premium-root td {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: rgba(34,44,82,.12) !important;
    background: rgba(7,11,24,.28) !important;
}

html.nhc-premium-root tr:hover td { background: rgba(124,92,255,.045) !important; }

html.nhc-premium-root .row,
html.nhc-premium-root .svc-row,
html.nhc-premium-root .ticket-row {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: var(--nhc-line) !important;
}

html.nhc-premium-root .amount-box,
html.nhc-premium-root .total-box {
    color: var(--nhc-text) !important;
    border-color: rgba(124,92,255,.25) !important;
    background: linear-gradient(120deg, rgba(124,92,255,.1), rgba(124,92,255,.08)) !important;
}

html.nhc-premium-root .badge,
html.nhc-premium-root .status-badge,
html.nhc-premium-root .status-chip,
html.nhc-premium-root .series-pill,
html.nhc-premium-root .svc-badge,
html.nhc-premium-root .tag {
    border: 1px solid rgba(124,92,255,.22) !important;
    border-radius: 999px !important;
    backdrop-filter: blur(10px);
}

html.nhc-premium-root .error-msg,
html.nhc-premium-root .alert-danger,
html.nhc-premium-root .status-error {
    color: var(--nc-red, #f4667f) !important;
    border-color: rgba(244,102,127,.32) !important;
    background: rgba(244,102,127,.2) !important;
}

html.nhc-premium-root .success-msg,
html.nhc-premium-root .alert-success,
html.nhc-premium-root .status-success {
    color: var(--nc-green, #34d399) !important;
    border-color: rgba(52, 211, 153, .3) !important;
    background: rgba(52,211,153,.2) !important;
}

html.nhc-premium-root .modal,
html.nhc-premium-root .modal-content,
html.nhc-premium-root .action-menu,
html.nhc-premium-root .hello-menu {
    color: var(--nhc-text) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(10,16,36,.97) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .55) !important;
    backdrop-filter: blur(22px);
}

html.nhc-premium-root header .wrap,
html.nhc-premium-root .header-actions,
html.nhc-premium-root .hello-drop {
    overflow: visible !important;
}

html.nhc-premium-root .hello-drop {
    position: relative;
    z-index: 1100;
}

html.nhc-premium-root .hello-menu {
    z-index: 1200 !important;
    isolation: isolate;
}

html.nhc-premium-root .subbar,
html.nhc-premium-root .layout {
    position: relative;
    z-index: 1;
}

html.nhc-premium-root footer {
    color: var(--nhc-muted) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(7,11,24,.75) !important;
    backdrop-filter: blur(18px);
}

html.nhc-premium-root footer a { color: var(--nc-text-2, #b7c2e0) !important; }
html.nhc-premium-root footer a:hover { color: var(--nhc-cyan) !important; }

/* Motion helpers. */
.nhc-reveal {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    transition: opacity .72s cubic-bezier(.2, .75, .25, 1), transform .72s cubic-bezier(.2, .75, .25, 1);
    transition-delay: var(--nhc-delay, 0ms);
}

.nhc-reveal.nhc-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.nhc-ripple {
    position: absolute;
    z-index: 10;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .52);
    transform: translate(-50%, -50%) scale(0);
    animation: nhc-ripple .62s ease-out forwards;
}

@keyframes nhc-ripple {
    to { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@keyframes nhc-orbit {
    to { transform: translate(-7vw, 12vh) scale(1.15); }
}

@keyframes nhc-scan {
    0% { transform: translateY(-18vh) rotate(-8deg); opacity: 0; }
    20%, 75% { opacity: .4; }
    100% { transform: translateY(72vh) rotate(-8deg); opacity: 0; }
}

@keyframes nhc-rack-float {
    50% { transform: perspective(800px) rotateY(-8deg) rotateX(1deg) translateY(-13px); }
}

@keyframes nhc-data-flight {
    0% { transform: translate3d(-12vw, 7vh, 0); opacity: 0; }
    12%, 80% { opacity: .65; }
    100% { transform: translate3d(108vw, -20vh, 0); opacity: 0; }
}

@media (max-width: 900px) {
    html.nhc-premium-root .wrap,
    html.nhc-premium-root .container { width: min(100% - 24px, 1240px) !important; }

    .nhc-menu-toggle,
    .nhc-sidebar-toggle { display: inline-flex; }

    html.nhc-premium-root .header-top { position: relative; }

    html.nhc-premium-root .mainnav {
        display: none !important;
        width: min(100% - 24px, 480px) !important;
        max-height: calc(100vh - 90px);
        margin: 8px auto 0 !important;
        padding: 10px !important;
        border: 1px solid var(--nhc-line) !important;
        border-radius: 16px !important;
        overflow: auto;
        box-shadow: var(--nhc-shadow) !important;
    }

    html.nhc-premium-root .mainnav.nhc-menu-open {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    html.nhc-premium-root .mainnav a {
        padding: 11px 12px !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
    }

    .nhc-atmosphere__rack { width: 190px; height: 290px; top: 24%; right: -55px; opacity: .08; }
    .nhc-pointer-glow { display: none; }

    html.nhc-premium-root table { min-width: 680px; }
    html.nhc-premium-root .table-panel,
    html.nhc-premium-root .table-card { overflow-x: auto !important; }
}

@media (max-width: 720px) {
    html.nhc-premium-root .sidebar[style*="position: fixed"],
    html.nhc-premium-root body.nhc-has-app-sidebar > .sidebar,
    html.nhc-premium-root body.nhc-has-app-sidebar .sidebar:first-of-type {
        z-index: 10001 !important;
    }

    html.nhc-premium-root .header-actions .search-box { display: none !important; }
    html.nhc-premium-root .hello-menu {
        right: 0 !important;
        left: auto !important;
        width: min(220px, calc(100vw - 24px)) !important;
        max-height: calc(100vh - 88px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    html.nhc-premium-root h1 { font-size: clamp(28px, 9vw, 42px) !important; }
}

@media (max-width: 520px) {
    html.nhc-premium-root .mainnav.nhc-menu-open { grid-template-columns: 1fr; }
    html.nhc-premium-root .header-actions { gap: 7px !important; }
    html.nhc-premium-root .cart-icon { margin-left: auto; }
    html.nhc-premium-root .tool-card,
    html.nhc-premium-root .plan-card,
    html.nhc-premium-root .card { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    html.nhc-premium-root { scroll-behavior: auto; }
    html.nhc-premium-root *,
    html.nhc-premium-root *::before,
    html.nhc-premium-root *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .nhc-reveal { opacity: 1; transform: none; }
}

/*
 * Contrast safety layer
 * ---------------------
 * Inner pages pre-date the premium shell and still reference their own light
 * palette variables. Keep those pages dark by remapping the legacy tokens and
 * explicitly skinning the remaining commerce/auth utility surfaces.
 */
html.nhc-premium-root {
    --bg: var(--nc-bg, #070b18) !important;
    --panel: var(--nc-panel-2, #0d1329) !important;
    --card: var(--nc-panel-2, #0d1329) !important;
    --border: rgba(34,44,82,.22) !important;
    --line: rgba(34,44,82,.22) !important;
    --text: var(--nc-text, #eaf0ff) !important;
    --muted: var(--nc-muted, #8590b4) !important;
    --navy: var(--nc-line, #222c52) !important;
    --rose: var(--nc-red, #f4667f) !important;
    --green: #34d399 !important;
    --purple: var(--nc-purple-2, #9d7dff) !important;
    --gold: var(--nc-orange, #fbaa46) !important;
    --amber: var(--nc-orange, #fbaa46) !important;
    --accent: var(--nc-purple-2, #9d7dff) !important;
}

html.nhc-premium-root .config-card,
html.nhc-premium-root .summary-box,
html.nhc-premium-root .cart-table,
html.nhc-premium-root .checkout-card,
html.nhc-premium-root .signup-card,
html.nhc-premium-root .auth-box,
html.nhc-premium-root .section-block,
html.nhc-premium-root .platform-card,
html.nhc-premium-root .payment-card,
html.nhc-premium-root .success-card,
html.nhc-premium-root .contact-card,
html.nhc-premium-root .result-card,
html.nhc-premium-root .pricing-card,
html.nhc-premium-root .order-summary,
html.nhc-premium-root .readonly-box {
    color: var(--nhc-text) !important;
    border-color: var(--nhc-line) !important;
    background:
        linear-gradient(145deg, rgba(16,23,51,.94), rgba(10,16,36,.96)) padding-box,
        linear-gradient(135deg, rgba(124,92,255,.32), rgba(124,92,255,.16), transparent 68%) border-box !important;
    box-shadow: 0 22px 62px rgba(0, 0, 0, .3) !important;
}

html.nhc-premium-root .f-card {
    color: var(--nhc-text) !important;
    border: 1px solid var(--nhc-line) !important;
    background: linear-gradient(145deg, rgba(16,23,51,.92), rgba(10,16,36,.94)) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .26) !important;
}

html.nhc-premium-root .login-card-footer,
html.nhc-premium-root .signup-card-footer,
html.nhc-premium-root .cart-mini-total,
html.nhc-premium-root .summary-body,
html.nhc-premium-root .cart-row,
html.nhc-premium-root .cart-mini-row {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: var(--nhc-line) !important;
    background: rgba(10,16,36,.64) !important;
}

html.nhc-premium-root .summary-head,
html.nhc-premium-root .cart-table-head {
    color: var(--nc-text, #eaf0ff) !important;
    border-color: var(--nhc-line) !important;
    background: linear-gradient(120deg, rgba(21,29,61,.96), rgba(16,23,51,.96)) !important;
}

html.nhc-premium-root .plan-card-body,
html.nhc-premium-root .plan-specs,
html.nhc-premium-root .plan-specs li,
html.nhc-premium-root .spec-line,
html.nhc-premium-root .pc-specs,
html.nhc-premium-root .pc-specs span,
html.nhc-premium-root .item-meta,
html.nhc-premium-root .summary-row,
html.nhc-premium-root .summary-total .lbl,
html.nhc-premium-root .summary-body .p-title,
html.nhc-premium-root .cart-mini-row,
html.nhc-premium-root .readonly-box,
html.nhc-premium-root .section-block,
html.nhc-premium-root .config-card {
    color: var(--nc-text-2, #b7c2e0) !important;
}

html.nhc-premium-root .plan-specs li b,
html.nhc-premium-root .spec-line b,
html.nhc-premium-root .pc-specs b,
html.nhc-premium-root .item-title,
html.nhc-premium-root .summary-body .p-title,
html.nhc-premium-root .summary-total .lbl,
html.nhc-premium-root .cart-mini-row b,
html.nhc-premium-root .readonly-box b {
    color: var(--nc-text, #eaf0ff) !important;
}

html.nhc-premium-root .plan-meta,
html.nhc-premium-root .plan-price-label,
html.nhc-premium-root .p-series,
html.nhc-premium-root .item-series,
html.nhc-premium-root small.hint,
html.nhc-premium-root .content .lead {
    color: var(--nc-muted, #8590b4) !important;
}

html.nhc-premium-root .port-chip,
html.nhc-premium-root .mode-tab,
html.nhc-premium-root .step-chip,
html.nhc-premium-root .amount-chip {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: rgba(34,44,82,.3) !important;
    background: rgba(16,23,51,.88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html.nhc-premium-root .port-chip:hover,
html.nhc-premium-root .mode-tab:hover,
html.nhc-premium-root .step-chip:hover,
html.nhc-premium-root .amount-chip:hover {
    color: #fff !important;
    border-color: rgba(124,92,255,.62) !important;
    background: rgba(16,23,51,.94) !important;
}

html.nhc-premium-root .port-chip.active,
html.nhc-premium-root .mode-tab.active,
html.nhc-premium-root .step-chip.active,
html.nhc-premium-root .amount-chip.active,
html.nhc-premium-root .amount-chip.selected {
    color: #fff !important;
    border-color: var(--nc-purple-2, #9d7dff) !important;
    background: var(--nc-accent-grad, linear-gradient(135deg,#7c5cff,#4d8bff)) !important;
    box-shadow: 0 8px 24px rgba(124,92,255,.18) !important;
}

html.nhc-premium-root .chip {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: rgba(34,44,82,.3) !important;
    background: rgba(16,23,51,.88) !important;
}

html.nhc-premium-root .chip:hover,
html.nhc-premium-root .chip.active {
    color: #fff !important;
    border-color: var(--nc-purple-2, #9d7dff) !important;
    background: var(--nc-accent-grad, linear-gradient(135deg,#7c5cff,#4d8bff)) !important;
}

html.nhc-premium-root .field-row .icon,
html.nhc-premium-root .step-chip .num,
html.nhc-premium-root .os-card .os-tag {
    color: var(--nc-text-2, #b7c2e0) !important;
    border: 1px solid rgba(34,44,82,.2) !important;
    background: rgba(16,23,51,.96) !important;
}

html.nhc-premium-root .setup-btn,
html.nhc-premium-root .check-btn,
html.nhc-premium-root .gen-btn,
html.nhc-premium-root .continue-btn,
html.nhc-premium-root .checkout-btn {
    color: #fff !important;
    border-color: rgba(124,92,255,.55) !important;
    background: var(--nc-accent-grad, linear-gradient(135deg,#7c5cff,#4d8bff)) !important;
    box-shadow: 0 12px 30px rgba(124,92,255,.18) !important;
}

html.nhc-premium-root .warn-box,
html.nhc-premium-root .notice-box {
    color: var(--nc-orange, #fbaa46) !important;
    border-color: rgba(251,170,70,.46) !important;
    background: rgba(251,170,70,.2) !important;
}

html.nhc-premium-root .warn-box a,
html.nhc-premium-root .notice-box a { color: var(--nc-orange, #fbaa46) !important; }

html.nhc-premium-root .result-success,
html.nhc-premium-root .status-ok,
html.nhc-premium-root .result-open,
html.nhc-premium-root .result-alive,
html.nhc-premium-root .result-up,
html.nhc-premium-root .result-valid,
html.nhc-premium-root .summary-clean,
html.nhc-premium-root .status-clean {
    color: var(--nc-green, #34d399) !important;
    border-color: rgba(52, 211, 153, .38) !important;
    background: rgba(52,211,153,.24) !important;
}

html.nhc-premium-root .result-fail,
html.nhc-premium-root .status-fail,
html.nhc-premium-root .result-closed,
html.nhc-premium-root .result-dead,
html.nhc-premium-root .result-down,
html.nhc-premium-root .result-invalid,
html.nhc-premium-root .summary-listed,
html.nhc-premium-root .status-listed {
    color: var(--nc-red, #f4667f) !important;
    border-color: rgba(244,102,127,.4) !important;
    background: rgba(244,102,127,.22) !important;
}

html.nhc-premium-root .total-box {
    color: var(--nc-green, #34d399) !important;
    border-color: rgba(52, 211, 153, .3) !important;
    background: rgba(52,211,153,.18) !important;
}

html.nhc-premium-root .total-box b { color: var(--nc-green, #34d399) !important; }

html.nhc-premium-root option {
    color: var(--nc-text, #eaf0ff) !important;
    background: var(--nc-panel-2, #0d1329) !important;
}

html.nhc-premium-root [title="Back to Home"] {
    color: var(--nc-text, #eaf0ff) !important;
    border-color: var(--nhc-line-hot) !important;
    background: rgba(13,19,41,.94) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .32) !important;
}

html.nhc-premium-root #toast,
html.nhc-premium-root #copyToast {
    color: var(--nc-green, #34d399) !important;
    border-color: rgba(52, 211, 153, .45) !important;
    background: rgba(7,11,24,.97) !important;
}

html.nhc-premium-root .status-solved {
    color: var(--nc-text-2, #b7c2e0) !important;
    background: rgba(34,44,82,.22) !important;
}

html.nhc-premium-root .cat-item,
html.nhc-premium-root .hello-menu a {
    color: var(--nc-text-2, #b7c2e0) !important;
    border-color: rgba(34,44,82,.16) !important;
}

html.nhc-premium-root .cat-item:hover,
html.nhc-premium-root .cat-item.active,
html.nhc-premium-root .hello-menu a:hover {
    color: #fff !important;
    background: rgba(124,92,255,.09) !important;
}

html.nhc-premium-root .row span:first-child,
html.nhc-premium-root .amount-label,
html.nhc-premium-root .summary-title {
    color: var(--nc-muted, #8590b4) !important;
}

html.nhc-premium-root .row span:last-child,
html.nhc-premium-root .amount-box span:last-child {
    color: var(--nc-text, #eaf0ff) !important;
}

html.nhc-premium-root .svc-badge,
html.nhc-premium-root .msg.success {
    color: var(--nc-green, #34d399) !important;
    border-color: rgba(52, 211, 153, .35) !important;
    background: rgba(52,211,153,.22) !important;
}

html.nhc-premium-root .order-btn.disabled,
html.nhc-premium-root .plan-btn.disabled {
    color: var(--nc-muted, #8590b4) !important;
    border-color: rgba(34,44,82,.16) !important;
    background: rgba(34,44,82,.24) !important;
}

html.nhc-premium-root .contact-pill { color: var(--nc-text-2, #b7c2e0) !important; }

html.nhc-premium-root .mono > span[style*="background:#eef0f3"] {
    color: var(--nc-purple-2, #9d7dff) !important;
    border-color: rgba(124,92,255,.28) !important;
    background: rgba(124,92,255,.09) !important;
}

/* ---- Light-theme stacking-context restoration ------------------------------
   .nhc-atmosphere (z-index:-2) and .nhc-pointer-glow (z-index:-1) are
   position:fixed NEGATIVE-z-index children of <body>, injected unconditionally
   by premium-theme.js (lines 23-33 and 58-61). A negative-z-index child paints
   above its parent's background only when an ancestor establishes a stacking
   context. In this theme that job is done by `isolation: isolate` on body,
   declared at line 39 inside `html.nhc-premium-root body`.

   The Light gate below removes `nhc-premium-root` whenever the Light ("White")
   theme is active:
       customer-terms.php:40        forgot-password.php:59
       payment.php:206              tool-ubuntu-proxy-setup.php:99
   It does so for a good reason - the same class also carries a DARK skin
   (`color-scheme: dark` line 24, `background: var(--nhc-bg)` line 25,
   `color: var(--nhc-text) !important` line 32, dark body gradients line 34-37)
   that must not apply to Light.

   Because one class was carrying two unrelated responsibilities, removing the
   skin also removed the stacking-context MECHANISM. Without it the atmosphere
   painted underneath the opaque page background and became invisible in Light.

   This block restores the mechanism only, for Light only. It reintroduces NO
   skin: no color-scheme, no background, no color. Original (no data-theme
   attribute) and Dark (data-theme="dark", which still receives
   nhc-premium-root) are untouched, and no other declaration in this file is
   modified. Geometry, transforms, keyframes and timings are unaffected.
   ---------------------------------------------------------------------------- */
html[data-theme="light"] body {
    isolation: isolate;
}