@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap');

:root {
    color-scheme: light;
    font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1e293b;
    background: #eef2f6;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: #eef2f6; }
button, input, select { font: inherit; }
a { color: inherit; }

.portal-login-shell {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow: hidden;
    padding: 16px;
    background:
        radial-gradient(circle at 14% 18%, rgba(125, 211, 252, .48), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(196, 181, 253, .55), transparent 30%),
        radial-gradient(circle at 68% 84%, rgba(45, 212, 191, .34), transparent 31%),
        linear-gradient(135deg, #eff6ff 0%, #f8fafc 42%, #e0e7ff 100%);
}
.portal-login-orb { position: absolute; border-radius: 999px; filter: blur(.5px); opacity: .78; pointer-events: none; }
.portal-login-orb--one { top: -48px; left: -40px; width: 192px; height: 192px; background: rgba(103, 232, 249, .52); }
.portal-login-orb--two { top: 62px; right: -64px; width: 256px; height: 256px; background: rgba(165, 180, 252, .5); }
.portal-login-orb--three { bottom: -56px; left: 24%; width: 224px; height: 224px; background: rgba(167, 243, 208, .5); }
.portal-glass-card { border: 1px solid rgba(226, 232, 240, .96); background: rgba(255,255,255,.94); box-shadow: 0 24px 60px rgba(15,23,42,.14); backdrop-filter: blur(18px); }
.portal-login-card { position: relative; z-index: 1; width: min(100%, 470px); padding: clamp(25px, 6vw, 38px); border-radius: 35px; }
.portal-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 32px; }
.portal-brand-mark { display: grid; width: 55px; height: 55px; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 21px; background: rgba(255,255,255,.72); color: #4a00ff; box-shadow: 0 18px 45px rgba(74,0,255,.18); }
.portal-wordmark { color: #111827; font-size: 19px; font-weight: 900; letter-spacing: -.055em; }
.portal-wordmark span { color: #4a00ff; }
.portal-eyebrow { margin: 0 0 8px; color: #4a00ff; font-size: 11px; font-weight: 900; letter-spacing: .23em; text-align: center; text-transform: uppercase; }
.portal-login-title { margin: 0; color: #0f172a; font-size: clamp(29px, 8vw, 38px); font-weight: 900; letter-spacing: -.055em; line-height: 1.12; text-align: center; }
.portal-login-description { margin: 12px 0 25px; color: #64748b; font-size: 14px; line-height: 1.65; text-align: center; }
.portal-field { margin: 17px 0 0; }
.portal-field label { display: block; margin: 0 0 8px 4px; color: #64748b; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.portal-field input, .portal-field select, .portal-otp-input { width: 100%; min-height: 54px; padding: 14px 17px; border: 1px solid #cbd5e1; border-radius: 17px; outline: none; background: #fff; color: #0f172a; box-shadow: 0 6px 18px rgba(15,23,42,.05); font-size: 14px; font-weight: 700; transition: border-color .18s ease, box-shadow .18s ease; }
.portal-field input:focus, .portal-field select:focus, .portal-otp-input:focus { border-color: rgba(74,0,255,.55); box-shadow: 0 0 0 4px rgba(74,0,255,.10), inset 0 1px 0 rgba(255,255,255,.85); }
.portal-primary-button, .portal-secondary-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 9px; padding: 13px 19px; border: 0; border-radius: 17px; cursor: pointer; font-size: 14px; font-weight: 900; text-decoration: none; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.portal-primary-button { width: 100%; margin-top: 23px; background: #4a00ff; color: white; box-shadow: 0 16px 34px rgba(74,0,255,.25); }
.portal-primary-button:hover { transform: translateY(-1px); background: #3b00d1; }
.portal-secondary-button { background: #fff; color: #4a00ff; border: 1px solid #e0e7ff; }
.portal-login-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 23px; }
.portal-login-actions .portal-primary-button, .portal-login-actions .portal-signup-button { min-width: 0; min-height: 52px; margin: 0; padding: 12px 10px; border-radius: 16px; }
.portal-login-actions .portal-signup-button { gap: 5px; background: rgba(255,255,255,.48); border-color: rgba(255,255,255,.82); }
.portal-login-actions .portal-signup-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.78); }
.portal-login-footer { margin: 23px 0 0; color: #8390a5; font-size: 12px; line-height: 1.55; text-align: center; }
.portal-back-link { display: inline-block; margin-top: 19px; color: #4a00ff; font-size: 13px; font-weight: 900; text-decoration: none; }
.portal-back-link:hover { text-decoration: underline; }
.portal-alert { margin: 15px 0; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.portal-alert--info { border-color: #bae6fd; background: #f0f9ff; color: #075985; }
.portal-alert--error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.portal-method-list { display: grid; gap: 12px; margin-top: 18px; }
.portal-method { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border: 1px solid #e2e8f0; border-radius: 18px; background: rgba(255,255,255,.8); }
.portal-method-copy { min-width: 0; }
.portal-method-copy strong { color: #1e293b; font-size: 14px; }
.portal-method-copy span { display: block; overflow: hidden; margin-top: 3px; color: #64748b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.portal-method .portal-primary-button { width: auto; min-height: 40px; flex: 0 0 auto; margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 12px; box-shadow: none; }
.portal-otp-input { text-align: center; font-size: 25px; font-weight: 900; letter-spacing: .38em; }

/* Sign-in keeps the original PHP portal's centered iOS glass-card composition. */
.legacy-login-card { width: min(100%, 430px); padding: 28px; border-radius: 35px; }
.legacy-login-header { margin: 0 0 32px; text-align: center; }
.legacy-login-icon { display: grid; width: 64px; height: 64px; margin: 0 auto 20px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: rgba(255,255,255,.5); color: #4a00ff; box-shadow: 0 18px 45px rgba(74,0,255,.18); backdrop-filter: blur(18px); }
.legacy-login-kicker { margin: 0 0 12px; color: rgba(74,0,255,.7); font-size: 11px; font-weight: 900; letter-spacing: .28em; line-height: 16.5px; text-transform: uppercase; }
.legacy-login-card .portal-login-title { margin: 0 0 8px; font-size: 30px; line-height: 36px; letter-spacing: -.045em; }
.legacy-login-card .portal-login-description { margin: 0; line-height: 1.625; }
.legacy-login-fields { display: grid; gap: 16px; }
.legacy-login-card .legacy-login-field { margin: 0; }
.legacy-login-card .legacy-login-field label { margin-left: 4px; color: #64748b; letter-spacing: .18em; line-height: 16.5px; }
.legacy-login-card .legacy-login-field input { min-height: 54px; padding: 16px 20px; border-radius: 16px; font-size: 14px; }
.legacy-password-field { position: relative; }
.legacy-password-field input { padding-right: 48px !important; }
.legacy-password-toggle { position: absolute; right: 16px; bottom: 14px; display: grid; width: 20px; height: 20px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #818cf8; cursor: pointer; font-size: 16px; }
.legacy-password-toggle:hover, .legacy-password-toggle:focus-visible { color: #4a00ff; outline: 2px solid rgba(74,0,255,.2); }
.legacy-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 3px; color: #475569; font-size: 12px; font-weight: 800; }
.legacy-login-options a { color: #4a00ff; text-decoration: none; }
.legacy-login-options a:hover, .legacy-login-support a:hover { text-decoration: underline; }
.legacy-login-remember { display: inline-flex; align-items: center; gap: 7px; }
.legacy-login-remember input { width: 14px; height: 14px; margin: 0; accent-color: #4a00ff; }
.legacy-login-card .portal-login-actions { margin-top: 0; }
.legacy-login-card .portal-login-actions { align-items: center; }
.legacy-login-card .portal-primary-button, .legacy-login-card .portal-secondary-button { min-height: 56px; border-radius: 16px; font-size: 16px; }
.legacy-login-card .portal-login-actions .portal-signup-button { min-height: 58px; padding: 16px 10px; }
.legacy-login-card .legacy-admin-submit { min-height: 56px; margin-top: 0; }
.legacy-login-security { margin-top: 28px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.55); border-radius: 16px; background: rgba(255,255,255,.32); color: #475569; font-size: 12px; line-height: 1.625; }
.legacy-login-support { margin-top: 18px; color: #64748b; }
.legacy-login-support a { color: #4a00ff; font-weight: 800; text-decoration: none; }
.legacy-login-nav { display: block; margin-top: 24px; line-height: 24px; text-align: center; }
.legacy-login-nav--admin { margin-top: 28px; line-height: normal; }
.legacy-login-nav--admin a { display: block; line-height: 16px; }
.legacy-login-nav a { color: #64748b; font-size: 12px; font-weight: 900; text-decoration: none; transition: color .15s ease; }
.legacy-login-nav a:hover, .legacy-login-nav a:focus-visible { color: #4a00ff; text-decoration: underline; }
.legacy-login-nav a:focus-visible { border-radius: 4px; outline: 2px solid rgba(74,0,255,.3); outline-offset: 3px; }
.legacy-login-card > .portal-method-list { margin-top: 0; }
.legacy-login-card > .portal-back-link { margin-top: 15px; }
@media (max-width: 420px) {
    .legacy-login-card { padding: 28px; }
}
@media (min-width: 640px) {
    .legacy-login-card { padding: 36px; }
    .legacy-login-card .portal-login-title { font-size: 36px; line-height: 40px; }
}

.portal-app-shell { min-height: 100vh; padding: 28px clamp(16px, 4vw, 54px) 40px; background: #eef2f6; }
.workspace-embedded { min-height: 100vh; background: #eef2f6; }
.workspace-embedded .portal-app-shell { min-height: 100vh; padding: 14px; }
.workspace-embedded .portal-app-main { width: 100%; }
.workspace-embedded .portal-topbar,
.workspace-embedded .portal-account-nav { display: none !important; }
.workspace-embedded .wm-page { height: calc(100dvh - 28px); min-height: 420px; padding: 0; }
.workspace-embedded .wm-shell { max-width: none; }
.portal-account-nav { position: sticky; top: 84px; z-index: 30; margin: 0 0 18px; border: 1px solid #dfe7f1; border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 7px 20px rgba(22,39,65,.08); backdrop-filter: blur(14px); }
.portal-account-nav-inner { display: flex; min-width: 0; gap: 3px; overflow-x: auto; padding: 6px; scrollbar-width: thin; }
.portal-account-nav a { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 8px 13px; border-radius: 9px; color: #586981; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .15s ease,color .15s ease; }
.portal-account-nav a:hover { background: #f1f5f9; color: #087d99; }
.portal-account-nav a[aria-current="page"] { background: #eef1ff; color: #4a00cc; }
.portal-app-main { width: min(100%, 1440px); margin: 0 auto; }
.portal-topbar { position: sticky; top: 10px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; margin: 0 0 26px; padding: 12px 18px; border: 1px solid rgba(226,232,240,.92); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(30,41,59,.07); backdrop-filter: blur(16px); }
.portal-topbar-brand { display: flex; align-items: center; gap: 12px; }
.portal-topbar-brand > div { min-width: 0; }
.portal-topbar-brand .portal-brand-mark { width: 43px; height: 43px; border-radius: 15px; }
.portal-topbar-brand .portal-wordmark { font-size: 17px; }
.portal-topbar-kicker { margin: 1px 0 0; color: #718096; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portal-user-area { display: flex; min-width: 0; align-items: center; gap: 14px; }
.portal-user-name { color: #334155; font-size: 13px; font-weight: 800; }
.portal-user-area form { margin: 0; }
.portal-header-menu { position: relative; flex: 0 0 auto; }
.portal-header-menu > summary { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 9px 13px; border: 1px solid #e0e7ff; border-radius: 11px; background: #fff; color: #4a00cc; cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; }
.portal-header-menu > summary::-webkit-details-marker { display: none; }
.portal-header-menu > summary::after { content: "⌄"; font-size: 14px; line-height: 1; }
.portal-header-menu[open] > summary, .portal-header-menu > summary:hover, .portal-header-menu > summary:focus-visible { border-color: #c7baff; background: #f7f5ff; outline: none; }
.portal-header-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; display: grid; width: min(320px, calc(100vw - 28px)); max-height: min(70vh, 440px); gap: 3px; overflow-y: auto; padding: 7px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(15,23,42,.18); }
.portal-header-menu__panel a { display: flex; min-height: 42px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: #475569; font-size: 13px; font-weight: 800; text-decoration: none; }
.portal-header-menu__panel a::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #4a00ff; content: ""; opacity: .72; }
.portal-header-menu__panel a:hover, .portal-header-menu__panel a:focus-visible { background: #f4f1ff; color: #3b00cc; outline: none; }
.portal-header-menu__label { margin: 4px 8px 2px; color: #94a3b8; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.portal-dashboard-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 20px; }
.portal-dashboard-actions .portal-secondary-button { min-height: 40px; padding: 9px 13px; border-radius: 11px; font-size: 12px; }
.portal-page-title { margin: 0; color: #0f172a; font-size: clamp(25px, 4vw, 35px); font-weight: 900; letter-spacing: -.045em; }
.portal-page-subtitle { margin: 7px 0 23px; color: #64748b; font-size: 14px; line-height: 1.55; }
.portal-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.portal-stat-grid--client-billing { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-stat-grid--client-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-stat-grid--client-single { grid-template-columns: minmax(0, 340px); }
.portal-stat-grid--admin { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.portal-stat-card, .portal-panel { overflow: hidden; border: 1px solid #dfe7f2; border-radius: 21px; background: #fff; box-shadow: 0 8px 26px rgba(38,56,91,.045); }
.portal-stat-card { min-height: 132px; padding: 20px; }
.portal-stat-grid--client-dashboard .portal-stat-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.portal-stat-ring { position: relative; display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; border-radius: 50%; background: conic-gradient(var(--portal-ring-color, #3b82f6) var(--portal-progress, 78%), #edf1f6 0); }
.portal-stat-ring::before { position: absolute; inset: 4px; border-radius: 50%; background: #fff; content: ""; }
.portal-stat-ring > span { position: relative; z-index: 1; display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: var(--portal-ring-color, #3b82f6); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--portal-ring-color, #3b82f6) 28%, transparent); }
.portal-stat-ring svg { width: 17px; height: 17px; }
.portal-stat-ring--blue { --portal-ring-color: #3b82f6; }
.portal-stat-ring--amber { --portal-ring-color: #facc15; }
.portal-stat-ring--pink { --portal-ring-color: #ec4899; }
.portal-stat-ring--billing { --portal-ring-color: #fff; --portal-progress: 100%; background: conic-gradient(#fff 100%, rgba(255,255,255,.35) 0); }
.portal-stat-ring--billing::before { background: #4a00ff; }
.portal-stat-ring--billing > span { background: #fff; color: #4a00ff; box-shadow: 0 4px 10px rgba(28,0,112,.18); }
.portal-client-stat-copy { display: grid; min-width: 0; gap: 4px; }
.portal-client-stat-copy > .portal-stat-label { color: #94a3b8; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.portal-client-stat-copy > .portal-stat-value { margin: 0; font-size: 22px; letter-spacing: -.035em; line-height: 1.2; }
.portal-client-stat-copy > .portal-stat-value small { color: #64748b; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.portal-stat-card--billing { border-color: #4a00ff; background: #4a00ff; color: #fff; }
.portal-stat-card--billing .portal-client-stat-copy > .portal-stat-label { color: #ddd6fe; }
.portal-stat-card--billing .portal-client-stat-copy > .portal-stat-value { color: #fff; }
.portal-stat-card--billing .portal-secondary-button { width: fit-content; min-height: 34px; margin-top: 5px !important; padding: 7px 12px; border-radius: 9px; font-size: 11px; }
.portal-network-access { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 20px; padding: 16px; border: 1px solid #e4eaf2; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(38,56,91,.04); }
.portal-network-access__intro { display: flex; min-width: 0; align-items: center; gap: 12px; }
.portal-network-access__icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: #f0edff; color: #4a00ff; }
.portal-network-access__icon svg { width: 18px; height: 18px; }
.portal-network-access__intro h2 { margin: 0; color: #1e293b; font-size: 14px; font-weight: 900; line-height: 1.35; }
.portal-network-access__intro p { margin: 3px 0 0; color: #64748b; font-size: 12px; }
.portal-network-access__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 9px; }
.portal-network-access .portal-primary-button, .portal-network-access .portal-secondary-button { width: auto; min-height: 40px; margin: 0; padding: 9px 14px; border-radius: 10px; font-size: 12px; box-shadow: none; }
.portal-network-access .portal-primary-button:disabled { cursor: not-allowed; opacity: .55; }
.portal-file-access-menu { position: relative; }
.portal-file-access-menu > summary { list-style: none; }
.portal-file-access-menu > summary::-webkit-details-marker { display: none; }
.portal-file-access-menu__list { position: absolute; top: calc(100% + 7px); right: 0; z-index: 25; width: min(320px, 84vw); max-height: 300px; overflow: auto; padding: 6px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 14px 35px rgba(15,23,42,.16); }
.portal-file-access-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 8px; color: #334155; font-size: 12px; font-weight: 800; text-decoration: none; }
.portal-file-access-menu__list a:hover, .portal-file-access-menu__list a:focus-visible { background: #f4f1ff; color: #4a00ff; outline: none; }
.portal-stat-label { color: #718096; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.portal-stat-value { display: block; margin-top: 12px; color: #111827; font-size: 34px; font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.portal-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 23px; border-bottom: 1px solid #e8edf4; }
.portal-panel-heading h2 { margin: 0; color: #1e293b; font-size: 18px; font-weight: 900; }
.portal-table-wrap { overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; text-align: left; }
.portal-table th, .portal-table td { padding: 15px 20px; border-bottom: 1px solid #edf0f5; white-space: nowrap; }
.portal-table th { background: #f8fafc; color: #718096; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.portal-table td { color: #334155; font-size: 13px; }
.portal-table tbody tr:last-child td { border-bottom: 0; }
.portal-domain { color: #1e293b; font-weight: 900; }
.portal-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #e8fbf3; color: #08744e; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.portal-status--suspended { background: #fff0f0; color: #aa2b2b; }
.portal-empty-state { padding: 48px 20px; color: #718096; text-align: center; }
.portal-migration-note { margin: 18px 4px 0; color: #8491a5; font-size: 11px; line-height: 1.5; }
.portal-team-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 0 18px 18px; }
.portal-team-tools article { display: grid; gap: 4px; padding: 14px; border: 1px solid #e5eaf4; border-radius: 13px; background: #f8faff; }
.portal-team-tools strong { color: #25314a; font-size: 12px; }
.portal-team-tools span { color: #6b7890; font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) { .portal-stat-grid--admin { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .portal-stat-grid--client-billing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
    .portal-app-shell { padding: 10px 12px 28px; }
    .portal-account-nav { top: 62px; margin: 0 0 12px; border-radius: 10px; }
    .portal-account-nav a { min-height: 36px; padding: 7px 10px; font-size: 11px; }
    .portal-topbar { top: 6px; gap: 8px; margin-bottom: 19px; padding: 9px 10px; border-radius: 13px; }
    .portal-topbar-brand { gap: 8px; }
    .portal-topbar-brand .portal-brand-mark { width: 36px; height: 36px; border-radius: 12px; }
    .portal-topbar-brand .portal-wordmark { font-size: 14px; }
    .portal-topbar-kicker { overflow: hidden; max-width: 140px; font-size: 9px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
    .portal-user-area { flex: 0 0 auto; gap: 7px; }
    .portal-user-name { display: none; }
    .portal-user-area .portal-secondary-button { min-height: 36px; padding: 8px 10px; border-radius: 10px; font-size: 11px; }
    .portal-header-menu > summary { min-height: 36px; padding: 8px 10px; font-size: 11px; }
    .portal-dashboard-actions { gap: 7px; }
    .portal-dashboard-actions .portal-secondary-button { flex: 1 1 calc(50% - 7px); min-width: 130px; }
    .portal-stat-grid, .portal-stat-grid--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .portal-stat-grid--client-dashboard { grid-template-columns: minmax(0, 1fr); }
    .portal-stat-card { min-height: 108px; padding: 15px; }
    .portal-stat-grid--client-dashboard .portal-stat-card { gap: 10px; padding: 13px; }
    .portal-stat-grid--client-dashboard .portal-stat-ring { width: 50px; height: 50px; flex-basis: 50px; }
    .portal-stat-grid--client-dashboard .portal-stat-ring > span { width: 32px; height: 32px; }
    .portal-stat-grid--client-dashboard .portal-stat-ring svg { width: 15px; height: 15px; }
    .portal-stat-grid--client-dashboard .portal-client-stat-copy > .portal-stat-value { font-size: 19px; }
    .portal-stat-value { font-size: 28px; }
    .portal-network-access { align-items: flex-start; flex-direction: column; }
    .portal-network-access__actions { width: 100%; }
    .portal-network-access__actions > * { flex: 1 1 auto; }
    .portal-network-access .portal-primary-button, .portal-network-access .portal-secondary-button { justify-content: center; }
    .portal-panel-heading { padding: 17px; }
    .portal-table th, .portal-table td { padding: 13px 15px; }
}
@media (max-width: 380px) {
    .portal-app-shell { padding-right: 8px; padding-left: 8px; }
    .portal-topbar { gap: 5px; padding-right: 7px; padding-left: 7px; }
    .portal-topbar-brand { gap: 6px; }
    .portal-topbar-brand .portal-brand-mark { width: 32px; height: 32px; }
    .portal-topbar-brand .portal-wordmark { font-size: 12px; }
    .portal-topbar-kicker { max-width: 110px; font-size: 8px; }
    .portal-user-area .portal-secondary-button { min-height: 34px; padding: 7px 8px; font-size: 10px; }
    .portal-header-menu > summary { min-height: 34px; padding: 7px 8px; font-size: 10px; }
    .portal-stat-grid, .portal-stat-grid--admin { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Admin console refresh: clear hierarchy, quick module navigation, and a calm premium operations palette. */
.admin-portal { --admin-ink: #16243b; --admin-muted: #6c7b91; --admin-line: #e3eaf3; --admin-accent: #4a00ff; --admin-teal: #078da0; background: #f3f6fb; }
.admin-portal .portal-app-shell { position: relative; padding: 24px clamp(16px, 3vw, 42px) 52px; background: radial-gradient(ellipse at 92% -12%, rgba(119,103,255,.12), transparent 38%), #f3f6fb; }
.admin-portal .portal-app-main { width: min(100%, 1560px); }
.admin-portal .portal-topbar { top: 8px; margin-bottom: 12px; padding: 12px 18px; border-color: rgba(219,228,240,.9); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(22,39,65,.075); }
.admin-portal .portal-brand-mark { background: linear-gradient(145deg,#5d35ff,#3510c8); color: #fff; box-shadow: 0 8px 18px rgba(74,0,255,.19); }
.admin-portal .portal-topbar-brand .portal-wordmark { color: var(--admin-ink); letter-spacing: -.04em; }
.admin-portal .portal-topbar-kicker { color: #7c6be0; font-size: 9px; letter-spacing: .16em; }
.admin-portal .portal-user-name { padding: 9px 12px; border: 1px solid #e7ebf3; border-radius: 999px; background: #f8f9fc; color: #45556e; }
.admin-portal .portal-user-area .portal-secondary-button { min-height: 39px; padding: 9px 14px; border-color: #e7eaf2; border-radius: 11px; color: #43516a; }
.admin-portal .portal-user-area .portal-secondary-button:hover { border-color: #d5ccff; background: #f5f2ff; color: #3e1ac2; }
.admin-navigation { position: sticky; top: 78px; z-index: 35; display: flex; gap: 4px; overflow-x: auto; margin: 0 0 27px; padding: 7px; border: 1px solid rgba(33,48,76,.4); border-radius: 15px; background: linear-gradient(105deg,#17243b,#202d46 58%,#25334e); box-shadow: 0 12px 28px rgba(22,39,65,.16); scrollbar-width: thin; scrollbar-color: #53617a transparent; }
.admin-navigation a { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px; color: #c6d0df; font-size: 12px; font-weight: 800; text-decoration: none; transition: background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease; }
.admin-navigation a:hover,.admin-navigation a:focus-visible { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.09); color: #fff; outline: none; }
.admin-navigation a[aria-current="page"] { border-color: rgba(255,255,255,.13); background: linear-gradient(135deg,#633cff,#4820d5); color: #fff; box-shadow: 0 5px 14px rgba(74,0,255,.25); }
.admin-navigation__icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 7px; background: rgba(255,255,255,.1); font-size: 15px; line-height: 1; }
.admin-navigation a[aria-current="page"] .admin-navigation__icon { background: rgba(255,255,255,.17); }
.admin-portal .portal-page-title { color: var(--admin-ink); font-size: clamp(27px,3vw,38px); letter-spacing: -.05em; }
.admin-portal .portal-page-subtitle { max-width: 860px; margin-bottom: 25px; color: var(--admin-muted); font-size: 14px; }
.admin-portal .portal-stat-grid--admin { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.admin-portal .portal-stat-card,.admin-portal .portal-panel { border-color: var(--admin-line); border-radius: 17px; box-shadow: 0 7px 23px rgba(25,43,72,.045); }
.admin-portal .portal-stat-card { position: relative; min-height: 116px; padding: 18px 19px; }
.admin-portal .portal-stat-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 17px 0 0 17px; background: linear-gradient(180deg,#6848ff,#08a2ac); content: ""; }
.admin-portal .portal-stat-label { color: #78869c; font-size: 10px; letter-spacing: .12em; }
.admin-portal .portal-stat-value { margin-top: 13px; color: #192840; font-size: clamp(25px,2.4vw,34px); }
.admin-portal .portal-panel { margin-bottom: 18px; }
.admin-portal .portal-panel-heading,.admin-portal .server-overview-head { padding: 17px 20px; border-bottom-color: #edf0f6; }
.admin-portal .portal-panel-heading h2,.admin-portal .server-overview-head h2 { color: var(--admin-ink); font-size: 16px; letter-spacing: -.015em; }
.admin-portal .portal-table th { position: sticky; top: 0; z-index: 1; background: #f5f7fb; color: #708097; font-size: 9px; letter-spacing: .12em; }
.admin-portal .portal-table td { padding-top: 13px; padding-bottom: 13px; }
.admin-portal .portal-table tbody tr { transition: background .14s ease; }
.admin-portal .portal-table tbody tr:hover { background: #fafbfe; }
.admin-portal input:not([type=checkbox]):not([type=radio]),.admin-portal select,.admin-portal textarea { border-color: #dce4ef; border-radius: 10px; background-color: #fff; color: #24344d; }
.admin-portal input:focus,.admin-portal select:focus,.admin-portal textarea:focus { border-color: #8b75ff !important; outline: 3px solid rgba(91,61,232,.12); outline-offset: 1px; }
.admin-portal .portal-primary-button,.admin-portal .portal-secondary-button { transition: transform .15s ease,box-shadow .15s ease,background .15s ease; }
.admin-portal .portal-primary-button:hover,.admin-portal .portal-secondary-button:hover { transform: translateY(-1px); }
.admin-portal .portal-primary-button { border-radius: 11px; background: linear-gradient(135deg,#5f3cff,#4218d0); box-shadow: 0 9px 19px rgba(74,0,255,.18); }
.admin-portal .portal-migration-note { padding-top: 14px; border-top: 1px solid #e4eaf2; }
.admin-portal-login .portal-login-shell { background: radial-gradient(ellipse at 18% 18%,rgba(61,207,217,.29),transparent 31%),radial-gradient(ellipse at 88% 12%,rgba(110,76,255,.34),transparent 35%),linear-gradient(145deg,#111e34 0%,#1b2a44 49%,#26334f 100%); }
.admin-portal-login .portal-login-shell::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size: 42px 42px; content: ""; mask-image: linear-gradient(to bottom,black,transparent 85%); pointer-events: none; }
.admin-portal-login .legacy-login-card { border-color: rgba(255,255,255,.66); box-shadow: 0 30px 90px rgba(3,10,25,.3),0 2px 10px rgba(255,255,255,.18) inset; }
.admin-portal-login .legacy-login-kicker { color: #5c41de; }
@media(max-width:1050px){.admin-portal .portal-stat-grid--admin{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.admin-portal .portal-app-shell{padding:12px 12px 34px}.admin-portal .portal-topbar{top:5px;margin-bottom:10px;padding:9px 11px}.admin-navigation{top:59px;gap:2px;margin-bottom:20px;padding:5px;border-radius:12px}.admin-navigation a{min-height:38px;padding:7px 10px;font-size:11px}.admin-navigation__icon{width:20px;height:20px;flex-basis:20px}.admin-portal .portal-stat-grid--admin{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.admin-portal .portal-stat-card{min-height:95px;padding:14px}.admin-portal .portal-stat-value{font-size:25px}.admin-portal .portal-panel-heading{align-items:flex-start;flex-direction:column}.admin-portal .portal-table th,.admin-portal .portal-table td{padding:11px 12px}}
@media(max-width:390px){.admin-portal .portal-stat-grid--admin{grid-template-columns:1fr}.admin-navigation a{gap:6px;padding-right:8px;padding-left:8px}.admin-navigation a span:last-child{font-size:10px}}

/* Compact, self-identifying actions keep dense admin tables readable. */
.portal-icon-action { position: relative; display: inline-grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 10px; background: #f1f4f9; color: #344054; cursor: pointer; text-decoration: none; transition: transform .15s ease,box-shadow .15s ease,background .15s ease; }
.portal-icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-icon-action:hover,.portal-icon-action:focus-visible { z-index: 4; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,24,40,.14); outline: 2px solid rgba(103,61,230,.25); outline-offset: 2px; }
.portal-icon-action::after { position: absolute; z-index: 10; bottom: calc(100% + 7px); left: 50%; width: max-content; max-width: 190px; padding: 6px 8px; transform: translate(-50%,3px); border-radius: 6px; background: #172033; color: #fff; content: attr(data-tooltip); font-size: 10px; font-weight: 750; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity .12s ease,transform .12s ease; }
.portal-icon-action:hover::after,.portal-icon-action:focus-visible::after { transform: translate(-50%,0); opacity: 1; }
.portal-icon-action--violet { background:#f2edff;color:#6037d7 }.portal-icon-action--blue { background:#eaf3ff;color:#2164bd }.portal-icon-action--cyan { background:#e7f8fb;color:#087b91 }.portal-icon-action--amber { background:#fff5e5;color:#a35e05 }.portal-icon-action--green { background:#e9f8ef;color:#16804f }.portal-icon-action--indigo { background:#eceeff;color:#4b51bd }.portal-icon-action--teal { background:#e5f7f3;color:#087c69 }.portal-icon-action--rose { background:#fff0f2;color:#bb3d60 }.portal-icon-action--slate { background:#edf1f6;color:#475467 }.portal-icon-action--danger { background:#fff0ee;color:#b42318 }
.account-tools { display:flex; max-width:240px; flex-wrap:wrap; gap:5px; }
.account-action-form { min-width:0!important; max-width:280px; }
.account-action-form input:not([type=hidden]) { max-width:260px; min-height:34px; }
.account-action-form input[type=number] { max-width:150px; }
.account-limits-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-width:470px; }
.account-limit-form { min-width:0!important; }
.account-control-button { display:inline-grid; width:34px; height:34px; place-items:center; padding:0; border:0; background:transparent; }
.account-control-row { display:flex; align-items:center; gap:6px; }
.account-control-row input[type=number] { width:120px; }
.account-action-form:not(.account-limit-form) .account-control-row input[type=password] { width:100%; max-width:260px; }
.admin-overview-shortcuts { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; }
.admin-overview-shortcuts h2 { margin:0 0 4px; color:#202939; font-size:16px; }
.admin-overview-shortcuts p { margin:0; color:#667085; font-size:12px; line-height:1.5; }
.admin-overview-shortcuts .portal-primary-button { width:auto; min-height:40px; flex:0 0 auto; margin:0; padding:9px 14px; font-size:12px; }
@media(max-width:600px) { .account-limits-grid{grid-template-columns:1fr}.admin-overview-shortcuts{align-items:flex-start;flex-direction:column}.admin-overview-shortcuts .portal-primary-button{width:100%} }

/* hPanel-inspired portal shell: crisp utility navigation, searchable sidebars, and calm workspace surfaces. */
:root { --portal-accent: #673de6; --portal-accent-soft: #f1edff; --portal-canvas: #f4f5f7; --portal-border: #e4e7ec; --portal-copy: #1f2937; --portal-muted: #667085; }
body:has(.portal-side-nav--client) { background: var(--portal-canvas); }
.portal-side-nav { position: fixed; inset: 0 auto 0 0; z-index: 60; display: flex; width: 252px; flex-direction: column; gap: 18px; overflow-x: hidden; overflow-y: auto; padding: 20px 13px 14px; border-right: 1px solid var(--portal-border); background: #fff; color: var(--portal-copy); scrollbar-color: #d0d5dd transparent; scrollbar-width: thin; }
.portal-side-nav__brand { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 3px 6px 6px; color: inherit; text-decoration: none; }
.portal-side-nav__brand-mark { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 13px; background: var(--portal-accent); color: #fff; font-size: 12px; font-weight: 950; letter-spacing: -.04em; box-shadow: 0 5px 12px #673de629; }
.portal-side-nav__brand > span:last-child { display: grid; min-width: 0; gap: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; border: 0 !important; }
.portal-side-nav__brand strong { overflow: hidden; color: #202939; font-size: 14px; font-weight: 900; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.portal-side-nav__brand small { color: #8b92a2; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.portal-side-nav__search { display: flex; min-height: 39px; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid #e5e7eb; border-radius: 9px; background: #f9fafb; color: #9298a5; }
.portal-side-nav__search > span:first-of-type { font-size: 19px; line-height: 1; }
.portal-side-nav__search input { width: 100%; min-width: 0; padding: 7px 0; border: 0 !important; outline: 0 !important; background: transparent !important; color: #344054; font-size: 11px; box-shadow: none !important; }
.portal-side-nav__search input::placeholder { color: #9298a5; }
.portal-side-nav__search kbd { padding: 2px 5px; border: 1px solid #e4e7ec; border-radius: 4px; background: #fff; color: #858c9a; font: 10px ui-monospace,monospace; }
.portal-side-nav__links { display: grid; align-content: start; gap: 3px; }
.portal-side-nav__group-label { margin: 10px 8px 4px; color: #9399a6; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.portal-side-nav__links a { display: flex; min-height: 40px; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: #535c6c; font-size: 12px; font-weight: 700; text-decoration: none; transition: background .14s ease,color .14s ease,border-color .14s ease; }
.portal-side-nav__links a:hover,.portal-side-nav__links a:focus-visible { background: #f6f4ff; color: #5130bf; outline: none; }
.portal-side-nav__links a[aria-current="page"] { border-color: #e5ddff; background: var(--portal-accent-soft); color: #5130bf; font-weight: 850; }
.portal-side-nav__icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 6px; color: #737b89; font-size: 15px; line-height: 1; }
.portal-side-nav__icon svg { display: block; width: 17px; height: 17px; }
.portal-side-nav__links a[aria-current="page"] .portal-side-nav__icon { background: #e6deff; color: #673de6; }
.portal-side-nav__footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 12px 9px 5px; border-top: 1px solid #eef0f3; color: #707887; font-size: 10px; }
.portal-side-nav__footer strong { margin-left: auto; color: #12805c; font-size: 10px; }
.portal-side-nav__status-dot { width: 7px; height: 7px; border-radius: 50%; background: #21a179; box-shadow: 0 0 0 3px #e6f5ef; }
.portal-side-nav__links a[hidden],.portal-side-nav__group-label[hidden] { display: none; }
.admin-portal { --admin-ink: #202939; --admin-muted: #667085; --admin-line: #e4e7ec; --admin-accent: #673de6; background: var(--portal-canvas); }
.admin-portal .portal-app-shell,body:has(.portal-side-nav--client) .portal-app-shell { min-height: 100vh; padding: 18px 24px 52px 276px; background: var(--portal-canvas); }
.admin-portal .portal-app-main,body:has(.portal-side-nav--client) .portal-app-main { width: min(100%, 1600px); }
.admin-navigation { position: fixed; inset: 0 auto 0 0; z-index: 60; display: flex; width: 252px; flex-direction: column; gap: 18px; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 20px 13px 14px; border: 0; border-right: 1px solid var(--portal-border); border-radius: 0; background: #fff; box-shadow: none; scrollbar-color: #d0d5dd transparent; scrollbar-width: thin; }
.admin-navigation .portal-side-nav__brand { margin-bottom: 0; }
.admin-portal .portal-topbar,body:has(.portal-side-nav--client) .portal-topbar { position: sticky; top: 0; z-index: 50; margin: -18px -24px 24px 0; padding: 12px 24px; border: 0; border-bottom: 1px solid var(--portal-border); border-radius: 0; background: rgba(255,255,255,.98); box-shadow: none; backdrop-filter: blur(14px); }
.admin-portal .portal-brand-mark { border-radius: 10px; background: var(--portal-accent); box-shadow: none; }
.admin-portal .portal-topbar-brand .portal-wordmark,body:has(.portal-side-nav--client) .portal-topbar-brand .portal-wordmark { color: #202939; }
.admin-portal .portal-topbar-kicker,body:has(.portal-side-nav--client) .portal-topbar-kicker { color: #858d9b; font-size: 9px; letter-spacing: .1em; }
.admin-portal .portal-user-name,body:has(.portal-side-nav--client) .portal-user-name { border: 1px solid #e7e9ee; border-radius: 8px; background: #fff; color: #485160; }
.admin-portal .portal-page-title,body:has(.portal-side-nav--client) .portal-page-title { color: #202939; font-size: clamp(26px,2.6vw,34px); letter-spacing: -.045em; }
.admin-portal .portal-page-subtitle,body:has(.portal-side-nav--client) .portal-page-subtitle { color: #667085; }
.admin-portal .portal-stat-card,.admin-portal .portal-panel,body:has(.portal-side-nav--client) .portal-stat-card,body:has(.portal-side-nav--client) .portal-panel { border-color: var(--portal-border); border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(16,24,40,.035); }
.admin-portal .portal-stat-card::before { width: 3px; background: var(--portal-accent); }
.admin-portal .portal-stat-label { color: #858d9b; }
.admin-portal .portal-stat-value { color: #202939; }
.admin-portal .portal-panel-heading,body:has(.portal-side-nav--client) .portal-panel-heading { border-bottom-color: #eef0f3; }
.admin-portal .portal-table th,body:has(.portal-side-nav--client) .portal-table th { background: #f9fafb; color: #667085; }
.admin-portal .portal-primary-button,body:has(.portal-side-nav--client) .portal-primary-button { border-radius: 9px; background: var(--portal-accent); box-shadow: none; }
.admin-portal .portal-primary-button:hover,body:has(.portal-side-nav--client) .portal-primary-button:hover { background: #5631c7; }
.admin-portal .portal-secondary-button,body:has(.portal-side-nav--client) .portal-secondary-button { border-color: #dfe2e8; border-radius: 9px; color: #404958; }
.portal-account-nav { border-color: var(--portal-border); border-radius: 10px; background: #fff; box-shadow: none; }
.portal-account-nav a { border-radius: 7px; color: #535c6c; }
.portal-account-nav a:hover,.portal-account-nav a[aria-current="page"] { background: var(--portal-accent-soft); color: #5130bf; }
.workspace-embedded .portal-side-nav,.workspace-embedded .admin-navigation { display: none !important; }
.workspace-embedded .portal-app-shell { padding: 14px !important; }
@media(max-width:980px) and (min-width:761px) {
    .portal-side-nav,.admin-navigation { width: 72px; padding: 18px 8px 12px; }
    .portal-side-nav__brand { justify-content: center; padding: 0; }
    .portal-side-nav__brand > span:last-child,.portal-side-nav__search,.portal-side-nav__group-label,.portal-side-nav__footer { display: none; }
    .portal-side-nav__links a > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
    .portal-side-nav__links a { justify-content: center; padding: 8px; }
    .portal-side-nav__icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 17px; }
    .admin-portal .portal-app-shell,body:has(.portal-side-nav--client) .portal-app-shell { padding-left: 92px; }
}
@media(max-width:760px) {
    .portal-side-nav,.admin-navigation { inset: auto 0 0; width: 100%; height: calc(66px + env(safe-area-inset-bottom)); flex-direction: row; gap: 0; overflow-x: auto; overflow-y: hidden; padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--portal-border); background: rgba(255,255,255,.98); }
    .portal-side-nav__brand,.portal-side-nav__search,.portal-side-nav__footer,.portal-side-nav__group-label { display: none; }
    .portal-side-nav__links { display: flex; min-width: max-content; flex-direction: row; align-items: stretch; gap: 3px; }
    .portal-side-nav__links a { min-width: 68px; min-height: 54px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 6px; border-radius: 8px; font-size: 9px; }
    .portal-side-nav__icon { height: 23px; font-size: 16px; }
    .admin-portal .portal-app-shell,body:has(.portal-side-nav--client) .portal-app-shell { padding: 10px 12px calc(92px + env(safe-area-inset-bottom)); }
    .admin-portal .portal-topbar,body:has(.portal-side-nav--client) .portal-topbar { top: 0; margin: -10px -12px 18px; padding: 10px 12px; }
    .portal-account-nav { top: 58px; }
}
/* Shared hosting-tool views can be rendered in either role; keep admin sessions in the same shell. */
body:has(.portal-side-nav--admin):not(.admin-portal) { background: var(--portal-canvas); }
body:has(.portal-side-nav--admin):not(.admin-portal) .portal-app-shell { min-height: 100vh; padding: 18px 24px 52px 276px; background: var(--portal-canvas); }
body:has(.portal-side-nav--admin):not(.admin-portal) .portal-app-main { width: min(100%, 1600px); }
body:has(.portal-side-nav--admin):not(.admin-portal) .portal-topbar { position: sticky; top: 0; z-index: 50; margin: -18px -24px 24px 0; padding: 12px 24px; border: 0; border-bottom: 1px solid var(--portal-border); border-radius: 0; background: rgba(255,255,255,.98); box-shadow: none; }
body:has(.portal-side-nav--admin):not(.admin-portal) .portal-page-title { color: #202939; font-size: clamp(26px,2.6vw,34px); letter-spacing: -.045em; }
body:has(.portal-side-nav--admin):not(.admin-portal) .portal-panel { border-color: var(--portal-border); border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(16,24,40,.035); }
@media(max-width:980px) and (min-width:761px) {
    body:has(.portal-side-nav--admin):not(.admin-portal) .portal-app-shell { padding-left: 92px; }
}
@media(max-width:760px) {
    body:has(.portal-side-nav--admin):not(.admin-portal) .portal-app-shell { padding: 10px 12px calc(92px + env(safe-area-inset-bottom)); }
    body:has(.portal-side-nav--admin):not(.admin-portal) .portal-topbar { top: 0; margin: -10px -12px 18px; padding: 10px 12px; }
}

/* Use the available desktop canvas instead of leaving large gutters around portal workspaces. */
.admin-portal .portal-app-main,
body:has(.portal-side-nav--client) .portal-app-main,
body:has(.portal-side-nav--admin):not(.admin-portal) .portal-app-main { width: min(100%, 1840px); }
body :is(.clients-page,.workspace,.backups-page,.mail-page,.storage-page,.billing-page,.ssl-page,.tools-page,.fm-admin-page,.db-page,.settings-page,.audit-page,.backup-page,.php-page,.files-page) {
    box-sizing: border-box;
    width: 100%;
    max-width: 1920px;
}
@media (min-width: 1920px) {
    .admin-portal .portal-app-main,
    body:has(.portal-side-nav--client) .portal-app-main,
    body:has(.portal-side-nav--admin):not(.admin-portal) .portal-app-main { width: min(100%, 2200px); }
    body :is(.clients-page,.workspace,.backups-page,.mail-page,.storage-page,.billing-page,.ssl-page,.tools-page,.fm-admin-page,.db-page,.settings-page,.audit-page,.backup-page,.php-page,.files-page) { max-width: 2200px; }
}
@media (max-width: 760px) {
    body :is(.clients-page,.workspace,.backups-page,.mail-page,.storage-page,.billing-page,.ssl-page,.tools-page,.fm-admin-page,.db-page,.settings-page,.audit-page,.backup-page,.php-page,.files-page) { max-width: 100%; }
}