:root {
    color-scheme: dark;
    --bg: #030e18;
    --bg-deep: #020a12;
    --panel: #0a1b2a;
    --panel-2: #0d2233;
    --panel-soft: rgba(14, 36, 53, .72);
    --line: #183449;
    --line-soft: rgba(80, 123, 151, .18);
    --text: #f4f7fb;
    --muted: #91a6b6;
    --purple: #7c4dff;
    --purple-2: #9c64ff;
    --blue: #1593ff;
    --green: #24d47b;
    --orange: #ffad17;
    --red: #ff4e58;
    --teal: #23c9d5;
    --sidebar: 286px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 14px; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
code { color: #bba4ff; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 58% -20%, rgba(28, 82, 127, .18), transparent 42%), var(--bg); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); border-right: 1px solid var(--line); background: rgba(2, 14, 24, .97); z-index: 30; display: flex; flex-direction: column; }
.brand { height: 116px; display: flex; align-items: center; gap: 14px; padding: 25px 27px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; border: 1px solid rgba(120, 225, 255, .36); border-radius: 13px; background: #0a95d8; box-shadow: 0 10px 24px rgba(19, 191, 214, .2); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-copy strong { display: block; font-size: 20px; letter-spacing: -.02em; }
.brand-copy span { display: block; color: #b0c0cd; margin-top: 5px; font-size: 12px; }
.nav { padding: 15px 10px; overflow-y: auto; flex: 1; min-height: 0; }
.nav a { height: 45px; border-radius: 6px; padding: 0 14px; display: flex; align-items: center; gap: 13px; color: #ecf2f7; margin-bottom: 2px; transition: .18s ease; }
.nav a:hover { background: rgba(76, 114, 144, .14); }
.nav a.active { background: linear-gradient(90deg, rgba(91, 54, 222, .72), rgba(71, 42, 183, .82)); box-shadow: inset 0 0 0 1px rgba(139, 97, 255, .28); }
.nav-icon { width: 20px; display: grid; place-items: center; color: #d7e3ec; font-size: 17px; }
.nav a > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-bottom { padding: 14px; display: grid; gap: 12px; }
.identity-card, .server-card { border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); padding: 15px; }
.identity-card { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #d6b191, #6e87a4); color: #08111a; font-weight: 800; }
.identity-card strong, .identity-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.identity-card small { color: var(--muted); margin-top: 3px; font-size: 10px; }
.server-card strong { display: block; margin-bottom: 8px; font-size: 12px; }
.server-card p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 11px 0 0; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.online { color: var(--green); font-size: 11px; }
.online::before { content: ""; width: 7px; height: 7px; background: var(--green); border-radius: 50%; display: inline-block; margin-right: 7px; box-shadow: 0 0 10px rgba(36, 212, 123, .65); }

.main { margin-left: var(--sidebar); min-height: 100vh; }
.topbar { height: 116px; position: sticky; top: 0; z-index: 20; background: rgba(3, 14, 24, .92); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 680px) minmax(260px, 1fr); align-items: center; gap: 30px; padding: 0 28px; }
.page-heading { min-width: 0; }
.page-heading h1 { margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 23px; letter-spacing: -.03em; }
.page-heading p { margin: 0; color: #acbdca; font-size: 13px; }
.global-search { position: relative; }
.global-search input { width: 100%; height: 47px; padding: 0 44px; border: 1px solid var(--line); border-radius: 7px; background: rgba(7, 25, 39, .74); color: var(--text); outline: none; }
.global-search input:focus { border-color: #7755e9; box-shadow: 0 0 0 3px rgba(124, 77, 255, .11); }
.search-icon { position: absolute; left: 16px; top: 13px; color: #b3c2cd; font-size: 18px; }
.top-actions { justify-self: end; min-width: 0; display: flex; align-items: center; gap: 14px; }
.icon-button { position: relative; width: 39px; height: 39px; border: 0; border-radius: 50%; background: rgba(12, 33, 49, .82); color: white; display: grid; place-items: center; cursor: pointer; }
.notification-badge { position: absolute; right: -1px; top: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; display: grid; place-items: center; background: var(--red); color: white; font-size: 9px; border: 2px solid var(--bg); }
.top-user { display: flex; align-items: center; gap: 10px; }
.top-user div strong, .top-user div small { display: block; }
.top-user div small { color: var(--muted); font-size: 10px; margin-top: 4px; }
.mobile-menu { display: none; }

.content { padding: 22px 24px 38px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.toolbar .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { min-height: 128px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(14, 36, 53, .92), rgba(8, 25, 39, .92)); padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.stat-card .label { color: #c2ced7; font-size: 12px; }
.stat-card .value { font-size: 27px; font-weight: 740; letter-spacing: -.025em; margin-top: 13px; white-space: nowrap; }
.stat-card .meta { color: var(--muted); font-size: 11px; margin-top: 8px; }
.trend.up { color: var(--green); margin-left: 8px; }
.trend.down { color: var(--red); margin-left: 8px; }
.stat-icon { width: 54px; height: 54px; border-radius: 10px; display: grid; place-items: center; font-size: 26px; color: #aa84ff; background: rgba(101, 57, 204, .24); }
.stat-icon.green { color: var(--green); background: rgba(18, 150, 80, .19); }
.stat-icon.red { color: var(--red); background: rgba(187, 50, 60, .2); }
.stat-icon.orange { color: var(--orange); background: rgba(191, 119, 10, .2); }
.stat-icon.blue { color: var(--blue); background: rgba(18, 104, 187, .2); }

.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid.two { grid-template-columns: minmax(0, 2fr) minmax(290px, .8fr); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.main-side { grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); }
.panel { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(13, 34, 51, .94), rgba(7, 23, 35, .96)); overflow: hidden; min-width: 0; }
.panel-pad { padding: 19px; }
.panel-header { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line-soft); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 17px; }
.panel-header p { color: var(--muted); margin: 5px 0 0; font-size: 11px; }
.panel-title { font-weight: 700; font-size: 17px; margin: 0 0 17px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.eyebrow, .step-label { color: #a27bff; font-weight: 800; font-size: 11px; letter-spacing: .15em; }
.empty-state { padding: 54px 20px; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--text); display: block; margin-bottom: 8px; font-size: 17px; }

.filters { padding: 16px 20px; display: flex; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
input, select, textarea { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #071827; outline: none; }
input, select { height: 39px; padding: 0 13px; }
textarea { min-height: 88px; padding: 11px 13px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #7651e7; box-shadow: 0 0 0 3px rgba(124, 77, 255, .1); }
label { min-width: 0; color: #c3d0d9; font-size: 12px; display: grid; gap: 7px; }
.website-release-field[hidden] { display: none; }
label small { color: var(--muted); font-size: 10px; }
.filter-search { min-width: 250px; flex: 1; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.span-2 { grid-column: span 2; }
.full { width: 100%; justify-content: center; }
.button { min-height: 39px; border-radius: 6px; border: 1px solid var(--line); padding: 0 15px; background: #0a1c2c; color: white; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.button:hover { border-color: #49667b; background: #10273a; }
.button.primary { background: linear-gradient(135deg, #7444e9, #4c2fc1); border-color: #8057ee; box-shadow: 0 8px 20px rgba(72, 41, 180, .18); }
.button.danger { color: #ff8086; border-color: rgba(255, 78, 88, .4); background: rgba(105, 23, 31, .22); }
.button.small { min-height: 30px; padding: 0 10px; font-size: 11px; }
.button.ghost { background: transparent; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { height: 54px; padding: 0 15px; color: #9eb1bf; background: rgba(15, 39, 57, .58); text-align: left; font-size: 11px; font-weight: 600; }
td { height: 62px; padding: 0 15px; border-top: 1px solid var(--line-soft); color: #eef4f8; font-size: 12px; }
tr:hover td { background: rgba(24, 54, 73, .22); }
.cell-user { display: flex; align-items: center; gap: 10px; }
.mini-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #6042bb, #2b7aa4); color: white; font-weight: 700; font-size: 11px; flex: 0 0 auto; }
.cell-user strong, .cell-user small { display: block; }
.cell-user small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: -.02em; }
.visible-license-key { color: #f7f9fc; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; white-space: nowrap; }
.copy-key-button { width: 28px; height: 28px; margin-left: 8px; border: 1px solid #315068; border-radius: 5px; background: #0b2132; color: #a985ff; cursor: pointer; vertical-align: middle; }
.copy-key-button:hover { border-color: #8a62ef; color: white; background: #17314a; }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 4px; text-transform: capitalize; font-size: 10px; background: rgba(84, 106, 123, .2); color: #c7d4dd; }
.badge.active, .badge.paid, .badge.open { color: #39e589; background: rgba(14, 117, 67, .28); }
.badge.expired, .badge.failed, .badge.revoked, .badge.banned, .badge.high { color: #ff5c65; background: rgba(137, 34, 42, .3); }
.badge.suspended, .badge.pending, .badge.expiring, .badge.medium { color: var(--orange); background: rgba(136, 88, 11, .3); }
.badge.trial, .badge.refunded, .badge.in_progress { color: #49a9ff; background: rgba(12, 82, 139, .3); }
.badge.lifetime, .badge.low { color: #ae88ff; background: rgba(84, 49, 150, .3); }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.inline-reset-form { display: inline-flex; align-items: center; gap: 6px; min-width: 275px; }
.table-password { width: 145px; height: 30px; padding: 0 10px; font-size: 11px; }
.table-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); padding: 0 18px; font-size: 11px; border-top: 1px solid var(--line-soft); }

.chart-wrap { height: 280px; padding: 14px 17px 8px; }
.chart-wrap.small { height: 190px; }
.chart-canvas { width: 100%; height: 100%; display: block; }
.donut-wrap { display: grid; grid-template-columns: 154px 1fr; align-items: center; gap: 20px; padding: 24px; }
.donut { width: 145px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--green) 0 61%, var(--orange) 61% 70%, var(--red) 70% 76%, var(--blue) 76% 84%, var(--purple) 84%); }
.donut::after { content: ""; position: absolute; inset: 23px; border-radius: 50%; background: #0a1c2b; }
.donut-center { position: relative; z-index: 1; text-align: center; }
.donut-center strong { display: block; font-size: 24px; }
.donut-center span { color: var(--muted); font-size: 11px; }
.legend { display: grid; gap: 13px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 9px; align-items: center; color: #cbd6de; font-size: 11px; }
.legend-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--purple); }
.legend-dot.green { background: var(--green); }.legend-dot.orange { background: var(--orange); }.legend-dot.red { background: var(--red); }.legend-dot.blue { background: var(--blue); }.legend-dot.teal { background: var(--teal); }
.bar-list { display: grid; gap: 17px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; align-items: center; gap: 12px; font-size: 11px; }
.bar-track { height: 7px; border-radius: 4px; background: #102a3d; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7548e6, #9a63ff); }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quick-action { border: 1px solid var(--line); min-height: 70px; border-radius: 6px; padding: 13px; display: flex; align-items: center; gap: 12px; background: rgba(6, 22, 34, .5); }
.quick-action:hover { border-color: #6651ac; }
.quick-icon { font-size: 22px; color: #9b70ff; }
.quick-action strong, .quick-action small { display: block; }
.quick-action small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 12px; padding: 18px; }
.plan-card { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: rgba(7, 23, 36, .6); }
.plan-card h3 { margin: 0 0 14px; font-size: 14px; }
.plan-price { font-size: 24px; font-weight: 730; }
.plan-card p { color: var(--muted); font-size: 11px; }
.plan-card ul { list-style: none; padding: 0; margin: 17px 0 0; display: grid; gap: 9px; color: #c4d0d8; font-size: 11px; }
.plan-card li::before { content: "✓"; color: var(--green); margin-right: 8px; }
.plan-edit-button { margin-top: 16px; }
.professional-plans { grid-template-columns: repeat(5, minmax(185px, 1fr)); align-items: stretch; }
.professional-plans .plan-card { display: flex; flex-direction: column; min-width: 0; }
.professional-plans .plan-card.featured { border-color: rgba(123, 83, 255, .75); box-shadow: 0 0 0 1px rgba(123, 83, 255, .2), 0 18px 40px rgba(25, 12, 80, .22); }
.plan-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.plan-billing-options { display: grid; gap: 7px; margin: 12px 0 4px; }
.plan-billing-options > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(4, 17, 28, .72); }
.plan-billing-options span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.plan-billing-options strong { color: #fff; font-size: 13px; }
.plan-billing-options small { grid-column: 1 / -1; color: #7891a2; font-size: 8px; line-height: 1.45; }
.plan-billing-options .button { grid-column: 1 / -1; min-height: 25px; }
.plan-restrictions { display: grid; gap: 5px; margin-top: 12px; color: #ffb454; font-size: 10px; }
.plan-matrix-panel { margin-top: 16px; }
.feature-matrix th:not(:first-child), .feature-matrix td:not(:first-child) { text-align: center; min-width: 105px; }
.feature-matrix td:first-child { color: #d8e4ec; font-weight: 600; }
.matrix-value { font-size: 15px; font-weight: 800; }
.matrix-value.included { color: var(--green); }
.matrix-value.excluded { color: #4f6677; }

.notification-list { display: grid; }
.notification-item { min-height: 93px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--line-soft); }
.notification-item:first-child { border-top: 0; }
.notice-icon { width: 45px; height: 45px; border-radius: 9px; background: rgba(109, 64, 211, .23); color: #a77fff; display: grid; place-items: center; font-size: 20px; }
.notification-item h3 { margin: 0 0 6px; font-size: 14px; }
.notification-item p { margin: 0; color: var(--muted); font-size: 11px; }
.notification-item time { color: var(--muted); font-size: 10px; }
.settings-list { display: grid; gap: 13px; }
.setting-row { min-height: 58px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-row strong, .setting-row small { display: block; }
.setting-row small { color: var(--muted); margin-top: 4px; }
.toggle { width: 40px; height: 22px; appearance: none; border-radius: 12px; background: #24384a; padding: 0; position: relative; cursor: pointer; }
.toggle::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .2s; }
.toggle:checked { background: var(--purple); }
.toggle:checked::after { transform: translateX(18px); }

.alert { margin-bottom: 16px; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--line); }
.alert.success { color: #67eda2; border-color: rgba(36, 212, 123, .35); background: rgba(16, 102, 59, .18); }
.alert.danger { color: #ff878d; border-color: rgba(255, 78, 88, .35); background: rgba(124, 28, 36, .2); }
.alert.info { color: #bba2ff; border-color: rgba(124, 77, 255, .4); background: rgba(84, 48, 166, .18); }
.license-reveal { padding: 16px; margin-bottom: 18px; border: 1px solid #7652de; border-radius: 7px; background: rgba(80, 43, 169, .17); }
.license-reveal code { display: block; color: white; font-size: 14px; padding: 9px 0; user-select: all; }

.modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(0, 5, 10, .78); backdrop-filter: blur(8px); }
.modal.open { display: grid; }
.modal-card { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid #294a61; border-radius: 10px; background: #071826; box-shadow: 0 35px 100px rgba(0, 0, 0, .6); }
.modal-card.wide { width: min(820px, 100%); }
.modal-card.extra-wide { width: min(1040px, 100%); }
.modal-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-header p { margin: 5px 0 0; font-size: 11px; }
.modal-body { padding: 20px; }
.modal-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 24px; }
.consent-row { display: flex; grid-template-columns: 20px 1fr; align-items: center; gap: 10px; }
.consent-row input { width: 18px; height: 18px; padding: 0; }
.user-profile-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 6px; color: var(--muted); font-size: 11px; }
.customer-activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.customer-activity-grid section { min-width: 0; padding: 13px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgba(4, 18, 28, .55); }
.customer-activity-grid h3 { margin: 0 0 10px; font-size: 13px; }
.activity-list { display: grid; gap: 7px; }
.activity-entry { padding: 9px; border: 1px solid var(--line-soft); border-radius: 5px; color: #dce6ec; font-size: 10px; line-height: 1.5; }
.activity-entry strong { display: block; color: white; font-size: 11px; }
.activity-empty { color: var(--muted); font-size: 10px; }

.app-content-layout { align-items: start; }
.app-content-layout > *, .settings-layout > *, .web-control-layout > * { min-width: 0; }
.managed-media-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 14px; }
.managed-media-card { overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(4, 17, 28, .72); }
.managed-media-card > img { width: 100%; height: 180px; display: block; object-fit: cover; border: 1px solid var(--line-soft); border-radius: 6px; background: #020b12; }
.managed-media-form { display: grid; grid-template-columns: 1fr 95px; gap: 8px; margin-top: 10px; }
.managed-media-form .badge { grid-column: 1 / -1; justify-self: start; }
.managed-media-form label:first-of-type { grid-column: 1 / -1; }
.managed-media-form .button { align-self: end; }
.managed-media-card > form:last-child { margin-top: 8px; }
.single-column { grid-template-columns: 1fr; }
.single-column .span-2 { grid-column: span 1; }
.media-rules { margin-top: 20px; }

.web-domain-map { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 16px; background: radial-gradient(circle at 50% 50%, rgba(35, 201, 213, .08), transparent 36%), linear-gradient(145deg, rgba(13, 34, 51, .94), rgba(7, 23, 35, .96)); }
.domain-node { min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(4, 17, 28, .62); }
.domain-node.control { border-color: rgba(35, 201, 213, .26); }
.domain-icon { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: rgba(21, 147, 255, .13); font-size: 24px; }
.domain-icon img { width: 100%; height: 100%; object-fit: cover; }
.domain-node div { min-width: 0; display: grid; gap: 4px; }
.domain-node small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.domain-node strong { overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.domain-node div span { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10px; white-space: nowrap; }
.domain-node b { font-size: 10px; font-weight: 700; }
.domain-link { color: var(--teal); font-size: 23px; text-shadow: 0 0 18px rgba(35, 201, 213, .6); }
.web-release-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.web-release-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 24px 0 12px; }
.web-release-heading small { color: var(--cyan); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.web-release-heading h2 { margin: 4px 0 0; font-size: 17px; }
.web-release-heading > span { max-width: 360px; color: var(--muted); font-size: 10px; text-align: right; }
.release-slot { min-width: 0; min-height: 106px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(13, 34, 51, .9), rgba(7, 23, 35, .93)); }
.release-slot.ready { border-color: rgba(36, 212, 123, .32); box-shadow: inset 0 0 25px rgba(36, 212, 123, .035); }
.release-platform-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(124, 77, 255, .13); color: #c4adff; font-size: 20px; }
.release-slot div { min-width: 0; display: grid; gap: 4px; }
.release-slot small { color: #71889a; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.release-slot strong, .release-slot div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-slot strong { font-size: 12px; }
.release-slot div span { color: var(--muted); font-size: 9px; }
.release-slot > b { grid-column: 1 / -1; justify-self: start; padding: 4px 7px; border-radius: 4px; background: rgba(255, 173, 23, .1); color: var(--orange); font-size: 8px; letter-spacing: .08em; }
.release-slot.ready > b { background: rgba(36, 212, 123, .1); color: var(--green); }
.website-content-form { display: grid; gap: 14px; }
.website-content-search { position: sticky; z-index: 4; top: 0; display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(35, 201, 213, .22); border-radius: 8px; background: rgba(5, 21, 33, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.website-content-search span { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.website-content-groups { display: grid; gap: 9px; }
.website-content-group { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(4, 17, 28, .58); }
.website-content-group[hidden] { display: none; }
.website-content-group summary { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; cursor: pointer; list-style: none; }
.website-content-group summary::-webkit-details-marker { display: none; }
.website-content-group summary span { min-width: 0; display: grid; gap: 5px; }
.website-content-group summary strong { color: #e8f2f7; font-size: 13px; }
.website-content-group summary small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.website-content-group summary > b { flex: 0 0 auto; padding: 5px 7px; border-radius: 5px; background: rgba(124, 77, 255, .12); color: #bba2ff; font-size: 8px; }
.website-content-group[open] summary { border-bottom: 1px solid var(--line-soft); background: rgba(20, 48, 68, .34); }
.website-content-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 14px; }
.website-content-fields > label { min-width: 0; display: grid; align-content: start; gap: 7px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgba(3, 14, 23, .5); }
.website-content-fields > label[hidden] { display: none; }
.website-content-fields > label > span { color: #cfdae1; font-size: 10px; font-weight: 700; }
.website-content-fields > label > span small { display: block; margin-top: 4px; color: #526e80; font: 500 7px ui-monospace, SFMono-Regular, Menlo, monospace; }
.website-content-fields textarea { min-height: 92px; resize: vertical; }
.website-publish-row { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(220px, 1fr) auto; align-items: end; gap: 14px; padding: 14px; border: 1px solid rgba(36, 212, 123, .22); border-radius: 8px; background: rgba(13, 69, 44, .09); }
.website-publish-row p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.website-image-manager { margin-bottom: 16px; }
.website-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.website-image-card { min-width: 0; display: grid; align-content: start; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(13, 34, 51, .84), rgba(5, 18, 29, .9)); }
.website-image-preview { height: 150px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 7px; background: #020b12; }
.website-image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.website-image-copy { min-width: 0; display: grid; gap: 5px; }
.website-image-copy small { color: var(--teal); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.website-image-copy strong { overflow: hidden; color: #eff7fa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.website-image-copy p { min-height: 30px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.website-image-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.website-image-upload input[type="file"] { min-width: 0; font-size: 8px; }
.plan-feature-picker { overflow: hidden; border: 1px solid rgba(124, 77, 255, .34); border-radius: 9px; background: rgba(6, 19, 31, .72); }
.plan-feature-picker-head { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.plan-feature-picker-head span { display: grid; gap: 4px; }
.plan-feature-picker-head strong { color: #eff6fa; font-size: 12px; }
.plan-feature-picker-head small { color: var(--muted); font-size: 9px; }
.plan-feature-picker-head > b { flex: 0 0 auto; padding: 6px 8px; border-radius: 6px; background: rgba(36, 212, 123, .11); color: var(--green); font-size: 9px; }
.plan-feature-search { display: grid; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.plan-feature-search span { color: #7f96a5; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan-feature-groups { max-height: 420px; overflow: auto; display: grid; gap: 14px; padding: 14px; scrollbar-color: #31546c transparent; }
.plan-feature-group { display: grid; gap: 8px; }
.plan-feature-group[hidden] { display: none; }
.plan-feature-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-feature-group-title > strong { color: #88a2b3; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.plan-feature-group-title > span { display: flex; align-items: center; gap: 5px; }
.plan-feature-group-title button, .plan-feature-custom button { min-height: 24px; border: 1px solid rgba(124, 77, 255, .35); border-radius: 5px; background: rgba(124, 77, 255, .1); color: #cdbdff; cursor: pointer; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.plan-feature-group-title button { padding: 0 7px; }
.plan-feature-group > div:not(.plan-feature-group-title) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.plan-feature-group label { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 17px 19px minmax(0, 1fr); align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 6px; cursor: pointer; background: rgba(4, 16, 25, .58); }
.plan-feature-group label[hidden] { display: none; }
.plan-feature-group label:hover { border-color: rgba(124, 77, 255, .55); }
.plan-feature-group input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--purple); }
.plan-feature-group label > span { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 5px; background: rgba(124, 77, 255, .1); color: #5b7180; font-size: 9px; }
.plan-feature-group input:checked + span { background: rgba(36, 212, 123, .16); color: var(--green); }
.plan-feature-group label > b { overflow: hidden; color: #c5d3db; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.plan-feature-group label:has(input:checked) { border-color: rgba(36, 212, 123, .34); background: rgba(18, 73, 51, .18); }
.plan-feature-custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line-soft); background: rgba(124, 77, 255, .045); }
.plan-feature-custom input { min-height: 35px; }
.plan-feature-custom button { padding: 0 12px; }
.all-plan-manager { margin-top: 16px; }
.all-plan-manager table td { vertical-align: middle; }
.upload-progress-overlay { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(1, 8, 14, .82); backdrop-filter: blur(16px); }
.upload-progress-overlay[hidden] { display: none; }
.upload-progress-card { width: min(760px, 100%); overflow: hidden; border: 1px solid rgba(35, 201, 213, .28); border-radius: 18px; background: radial-gradient(circle at 8% 8%, rgba(35, 201, 213, .1), transparent 34%), linear-gradient(145deg, #0b2232, #06131f 72%); box-shadow: 0 40px 120px rgba(0, 0, 0, .66), inset 0 1px rgba(255, 255, 255, .04); }
.upload-progress-head { min-height: 84px; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px 21px; border-bottom: 1px solid var(--line); }
.upload-progress-logo { width: 50px; height: 50px; overflow: hidden; border-radius: 13px; box-shadow: 0 10px 28px rgba(35, 201, 213, .18); }
.upload-progress-logo img { width: 100%; height: 100%; object-fit: cover; }
.upload-progress-head > div { min-width: 0; }
.upload-progress-head small { color: var(--teal); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.upload-progress-head h2 { overflow: hidden; margin: 4px 0 0; color: #edf8fc; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.upload-live { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(35, 201, 213, .18); border-radius: 999px; color: var(--teal); font-size: 8px; letter-spacing: .08em; }
.upload-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: uploadPulse 1.4s ease-in-out infinite; }
.upload-progress-overlay[data-state="complete"] .upload-live { color: var(--green); border-color: rgba(36, 212, 123, .25); }
.upload-progress-overlay[data-state="error"] .upload-live, .upload-progress-overlay[data-state="cancelled"] .upload-live { color: var(--red); border-color: rgba(255, 78, 88, .25); }
.upload-file-line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.upload-file-line > span { min-width: 0; display: grid; gap: 5px; padding: 13px 21px; background: rgba(5, 20, 31, .94); }
.upload-file-line small { color: #607b8d; font-size: 7px; font-weight: 800; letter-spacing: .11em; }
.upload-file-line strong { overflow: hidden; color: #b9ccd7; font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-main { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 27px; padding: 31px 35px; }
.upload-progress-ring { position: relative; width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, #071721 59%, transparent 60%), conic-gradient(var(--teal) 0 var(--upload-progress), rgba(255, 255, 255, .065) var(--upload-progress) 100%); box-shadow: 0 0 45px rgba(35, 201, 213, .12); }
.upload-progress-ring::after { content: ""; position: absolute; inset: -9px; border: 1px dashed rgba(35, 201, 213, .16); border-radius: 50%; animation: uploadOrbit 12s linear infinite; }
.upload-progress-ring strong { position: relative; z-index: 1; color: #f0fbff; font-size: 32px; }
.upload-progress-ring small { position: relative; z-index: 1; margin-top: 3px; color: #6e8999; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.upload-progress-copy { min-width: 0; }
.upload-progress-copy h3 { margin: 0 0 8px; color: #e0edf3; font-size: 16px; }
.upload-progress-copy p { margin: 0; color: #7f96a5; font-size: 11px; line-height: 1.65; }
.upload-progress-track { height: 7px; overflow: hidden; margin-top: 20px; border-radius: 999px; background: rgba(255, 255, 255, .065); }
.upload-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c4dff, #25c9d5); box-shadow: 0 0 14px rgba(35, 201, 213, .45); transition: width .16s linear; }
.upload-transfer { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: #688090; font-size: 8px; }
.upload-transfer strong { color: #a9c0cc; }
.upload-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.upload-metrics span { min-width: 0; display: grid; gap: 5px; padding: 14px 18px; border-right: 1px solid var(--line); }
.upload-metrics span:last-child { border: 0; }
.upload-metrics small { color: #597487; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.upload-metrics strong { overflow: hidden; color: #d3e4eb; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-actions { display: flex; justify-content: flex-end; padding: 15px 20px; }
.upload-progress-overlay[data-state="complete"] .upload-progress-ring { background: radial-gradient(circle, #071721 59%, transparent 60%), conic-gradient(var(--green) 0 100%); box-shadow: 0 0 45px rgba(36, 212, 123, .14); }
.upload-progress-overlay[data-state="error"] .upload-progress-ring, .upload-progress-overlay[data-state="cancelled"] .upload-progress-ring { background: radial-gradient(circle, #071721 59%, transparent 60%), conic-gradient(var(--red) 0 var(--upload-progress), rgba(255, 255, 255, .065) var(--upload-progress) 100%); }
.uploading-active { overflow: hidden; }
@keyframes uploadPulse { 50% { opacity: .35; transform: scale(.75); } }
@keyframes uploadOrbit { to { transform: rotate(360deg); } }

.login-body, .installer-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 25% 20%, rgba(86, 49, 205, .22), transparent 34%), radial-gradient(circle at 90% 85%, rgba(0, 132, 210, .14), transparent 35%), #020c15; }
.login-shell { width: min(1000px, 100%); min-height: 610px; display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid #1b3c52; border-radius: 15px; overflow: hidden; background: rgba(7, 24, 37, .92); box-shadow: 0 40px 120px rgba(0, 0, 0, .55); }
.login-art, .installer-brand { padding: 64px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 70% 25%, rgba(76, 62, 223, .3), transparent 33%), linear-gradient(145deg, #071c2d, #03111d); }
.login-art .brand-mark, .installer-brand .brand-mark { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 28px; }
.login-art h1, .installer-brand h1 { font-size: 42px; letter-spacing: -.045em; margin: 10px 0 18px; line-height: 1.05; }
.login-art > p:not(.eyebrow), .installer-brand > p:not(.eyebrow) { color: #9fb4c2; max-width: 500px; line-height: 1.7; }
.login-points, .check-list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; color: #c4d3dc; }
.login-points li::before, .check-list li::before { content: "✓"; color: var(--green); margin-right: 11px; }
.login-card, .installer-card { padding: 58px 48px; display: flex; flex-direction: column; justify-content: center; }
.login-card h2, .installer-card h2 { font-size: 28px; margin: 8px 0 8px; }
.login-card > p, .installer-card > p { color: var(--muted); line-height: 1.6; }
.login-form { display: grid; gap: 15px; margin-top: 23px; }
.login-form input { height: 47px; }
.login-form .button { height: 47px; margin-top: 7px; }
.success-orb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #062013; background: var(--green); font-weight: 900; font-size: 28px; box-shadow: 0 0 35px rgba(36, 212, 123, .25); }
.installer-shell { width: min(1120px, 100%); min-height: 690px; display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid #1b3c52; border-radius: 15px; overflow: hidden; background: rgba(7, 24, 37, .94); box-shadow: 0 40px 120px rgba(0, 0, 0, .55); }
.installer-brand { padding: 55px; }
.installer-brand h1 { font-size: 36px; }
.installer-card { padding: 38px 45px; }

@media (max-width: 1500px) {
    :root { --sidebar: 240px; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .plan-grid { grid-template-columns: repeat(3, 1fr); }
    .professional-plans { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
    .topbar { grid-template-columns: minmax(180px, .75fr) minmax(240px, 1.15fr) auto; gap: 18px; }
    .web-release-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-content-layout, .settings-layout, .web-control-layout { grid-template-columns: 1fr; }
    .website-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1260px) {
    .top-user div { display: none; }
    .top-actions { gap: 8px; }
    .web-domain-map { grid-template-columns: 1fr; }
    .domain-link { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 1050px) {
    :root { --sidebar: 0px; }
    .sidebar { width: 270px; transform: translateX(-100%); transition: .25s; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .mobile-menu { display: grid; }
    .topbar { height: auto; min-height: 82px; grid-template-columns: auto 1fr auto; padding: 13px 18px; }
    .global-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .grid.two, .grid.main-side { grid-template-columns: 1fr; }
    .grid.three { grid-template-columns: 1fr 1fr; }
    .plan-grid { grid-template-columns: repeat(2, 1fr); }
    .professional-plans { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 720px) {
    .content { padding: 15px 12px 30px; }
    .stats-grid, .grid.three { grid-template-columns: 1fr 1fr; }
    .top-user div, .page-heading p { display: none; }
    .topbar { gap: 10px; }
    .page-heading h1 { font-size: 18px; }
    .form-grid, .plan-grid, .customer-activity-grid, .managed-media-grid, .web-release-slots { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
    .legend { width: 100%; }
    .login-shell, .installer-shell { grid-template-columns: 1fr; }
    .login-art, .installer-brand { display: none; }
    .login-card, .installer-card { padding: 34px 25px; }
    .toolbar { align-items: flex-start; flex-direction: column; }
    .domain-node { grid-template-columns: 46px minmax(0, 1fr); }
    .domain-node > b { grid-column: 2; }
    .web-release-heading { align-items: flex-start; flex-direction: column; }
    .web-release-heading > span { text-align: left; }
    .upload-progress-overlay { padding: 12px; }
    .upload-progress-head { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; }
    .upload-progress-logo { width: 44px; height: 44px; }
    .upload-live { grid-column: 1 / -1; justify-self: start; }
    .upload-file-line { grid-template-columns: 1fr; }
    .upload-progress-main { grid-template-columns: 1fr; justify-items: center; gap: 23px; padding: 25px 20px; }
    .upload-progress-copy { width: 100%; text-align: center; }
    .upload-transfer { align-items: center; flex-direction: column; }
    .upload-metrics { grid-template-columns: 1fr 1fr; }
    .upload-metrics span:nth-child(2) { border-right: 0; }
    .upload-metrics span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .upload-progress-actions { justify-content: stretch; }
    .upload-progress-actions .button { width: 100%; }
    .website-content-fields, .website-image-grid, .plan-feature-group > div:not(.plan-feature-group-title) { grid-template-columns: 1fr; }
    .website-publish-row { grid-template-columns: 1fr; }
    .website-image-upload { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: 1fr; }
    .top-actions .icon-button:not(.mobile-menu) { display: none; }
}

.remote-service-admin .panel-header{align-items:center}.remote-admin-list{display:grid;gap:16px}.remote-admin-card{display:grid;grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);gap:20px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(9,24,36,.78),rgba(5,13,21,.84))}.remote-admin-summary h3{margin:12px 0 6px;color:#eff8ff;font-size:22px}.remote-admin-summary p{margin:8px 0;color:#91a5b4;line-height:1.6}.remote-admin-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.remote-admin-meta span{padding:7px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#b7c7d3;font-size:11px}.remote-admin-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.remote-admin-form label{display:grid;gap:6px;color:#7892a2;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.remote-admin-form textarea{min-height:84px;resize:vertical}.remote-admin-form button{grid-column:1/-1}.remote-admin-form label:nth-of-type(n+4){grid-column:1/-1}.remote-admin-form input,.remote-admin-form select,.remote-admin-form textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:rgba(2,10,17,.78);color:#d8e9f2;padding:11px 12px}.empty-state{display:grid;gap:8px;place-items:center;padding:40px;border:1px dashed var(--line);border-radius:18px;color:#8ea1af}.admin-page-remote_services .topbar .global-search input::placeholder{color:transparent}
@media (max-width:1050px){.remote-admin-card{grid-template-columns:1fr}.remote-admin-form{grid-template-columns:1fr}.remote-admin-form label:nth-of-type(n+4){grid-column:auto}}

/* Laravel compatibility for exact legacy shell */
.rd-container { background: transparent; }
.nav h2 { margin: 22px 14px 10px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.top-actions form { margin: 0; }
.top-actions form .icon-button { border: 0; padding: 0; min-height: 39px; }
.brand-mark { color: #031018; font-weight: 900; }
.legacy-chart-bars { display: flex; align-items: end; gap: 18px; }
.legacy-chart-row { flex: 1; height: 100%; display: grid; align-content: end; justify-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.legacy-chart-row span { width: 100%; max-width: 32px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--purple-2), var(--purple)); }
.legacy-chart-row b { color: #cbd8e1; font-size: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric { min-height: 118px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(14,36,53,.92), rgba(8,25,39,.92)); padding: 18px; }
.metric span { color: #c2ced7; font-size: 12px; }
.metric strong { display: block; color: var(--text); font-size: 27px; margin-top: 12px; }
.metric small { color: var(--green); font-size: 11px; }
.serial-copy-row { display: inline-flex; align-items: center; gap: 8px; }
.serial-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid #315068; border-radius: 5px; background: #0b2132; color: #f7f9fc; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.copy-icon-button { width: 28px; height: 28px; min-height: 28px; display: inline-grid; place-items: center; border: 1px solid #315068; border-radius: 5px; background: #0b2132; color: #a985ff; padding: 0; cursor: pointer; }
.copy-icon-button:hover { border-color: #8a62ef; color: #fff; background: #17314a; }
.serial-cell .small-text { display: none; }
.web-domain-map { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 20px; margin-bottom: 18px; }
.domain-node { min-height: 92px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 15px 18px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(5,20,31,.72); }
.domain-icon { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: rgba(21,147,255,.18); color: var(--teal); font-weight: 800; }
.brand-node { background: linear-gradient(145deg, var(--teal), var(--green)); color: #031018; }
.domain-node small, .web-release-heading small { color: var(--teal); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.domain-node strong { display: block; color: var(--text); font-size: 20px; }
.domain-node span { color: var(--muted); font-size: 11px; }
.domain-link { color: var(--teal); font-size: 24px; }
.web-release-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 24px 0 10px; }
.web-release-heading h2 { margin: 4px 0 0; color: var(--text); font-size: 18px; }
.web-release-heading > span { color: var(--muted); font-size: 11px; }
.web-release-slots { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.release-slot { min-height: 104px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 13px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7,23,36,.6); }
.release-slot b { grid-column: 1 / -1; justify-self: start; padding: 4px 8px; border-radius: 4px; color: var(--orange); background: rgba(136,88,11,.3); font-size: 9px; }
.release-slot.ready { border-color: rgba(36,212,123,.45); }
.release-slot.ready b { color: #39e589; background: rgba(14,117,67,.28); }
.release-platform-icon { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; color: #aa84ff; background: rgba(101,57,204,.24); font-size: 22px; }
.release-slot small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.release-slot strong { display: block; color: var(--text); font-size: 13px; margin: 3px 0; }
.release-slot span { color: var(--muted); font-size: 10px; }
.web-control-layout { grid-template-columns: minmax(0,1.4fr) minmax(360px,.6fr); }
.settings-list { display: grid; gap: 13px; margin-top: 14px; }
.setting-row { min-height: 58px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-row strong, .setting-row small { display: block; }
.setting-row small { color: var(--muted); margin-top: 4px; }
.upload-progress-overlay { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(1,8,14,.82); backdrop-filter: blur(16px); }
.upload-progress-overlay[hidden] { display: none; }
@media (max-width: 1500px) { .web-release-slots { grid-template-columns: repeat(2, minmax(0,1fr)); } .web-control-layout { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .web-domain-map { grid-template-columns: 1fr; } .domain-link { transform: rotate(90deg); justify-self: center; } }

/* Desktop admin force alignment - prevents accidental tablet/mobile collapse in browser shells */
@media (min-width: 860px) {
  :root { --sidebar: 286px !important; }
  .sidebar { width: 286px !important; transform: none !important; }
  .main { margin-left: 286px !important; }
  .topbar { grid-template-columns: minmax(220px, 1fr) minmax(280px, 680px) minmax(260px, 1fr) !important; }
  .mobile-menu { display: none !important; }
}

/* Exact old header lock */
.topbar {
  height: 116px !important;
  min-height: 116px !important;
  max-height: 116px !important;
  overflow: hidden !important;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 680px) minmax(260px, 1fr) !important;
  align-items: center !important;
}
.topbar .mobile-menu { display: none !important; }
.page-heading { min-width: 0 !important; }
.page-heading h1 { margin: 0 0 6px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 23px !important; letter-spacing: -.03em !important; }
.page-heading p { margin: 0 !important; color: #acbdca !important; font-size: 13px !important; line-height: 1.3 !important; max-height: 34px !important; overflow: hidden !important; }
.global-search { min-width: 280px !important; }
.top-actions { min-width: 260px !important; white-space: nowrap !important; }
@media (max-width: 1050px) {
  .topbar { height: auto !important; min-height: 82px !important; max-height: none !important; overflow: visible !important; grid-template-columns: auto 1fr auto !important; }
  .topbar .mobile-menu { display: grid !important; }
}

/* Keep admin desktop shell on normal browser windows; collapse only true mobile */
@media (min-width: 721px) {
  :root { --sidebar: 286px !important; }
  .sidebar { width: 286px !important; transform: none !important; }
  .main { margin-left: 286px !important; }
  .topbar {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    overflow: hidden !important;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 680px) minmax(260px, 1fr) !important;
    gap: 30px !important;
    padding: 0 28px !important;
  }
  .topbar .mobile-menu { display: none !important; }
  .global-search { grid-column: auto !important; grid-row: auto !important; width: auto !important; }
  .top-user div, .page-heading p { display: block !important; }
}

/* Full legacy Web Control bridge: Laravel compatibility polish */
.old-admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(16, 216, 226, .08), rgba(112, 72, 255, .10));
}
.old-admin-hero small,
.website-content-group summary b,
.website-image-card small {
  color: var(--accent, #19d9e5);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
}
.old-admin-hero h2 { margin: 8px 0; font-size: clamp(24px, 3vw, 38px); }
.old-admin-hero p { max-width: 860px; color: var(--muted, #91a3b7); }
.hero-chip {
  min-width: 150px;
  padding: 22px 24px;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(135deg, #12e1da, #49f2df);
  color: #00151c;
  box-shadow: 0 22px 48px rgba(18, 225, 218, .18);
}
.website-content-form { display: grid; gap: 18px; }
.website-content-search { padding: 16px; border: 1px solid var(--line, #14394a); border-radius: 14px; background: rgba(0, 0, 0, .12); }
.website-content-search label { display: grid; gap: 8px; }
.website-content-search span,
.website-field > span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #19d9e5); }
.website-content-group {
  border: 1px solid var(--line, #14394a);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(4, 24, 34, .54);
}
.website-content-group summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  list-style: none;
  border-bottom: 1px solid var(--line, #14394a);
}
.website-content-group summary::-webkit-details-marker { display: none; }
.website-content-group summary strong { display: block; font-size: 19px; color: var(--text, #f6fbff); }
.website-content-group summary small { display: block; margin-top: 4px; color: var(--muted, #91a3b7); }
.website-content-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.website-field { display: grid; gap: 9px; }
.website-field.wide { grid-column: 1 / -1; }
.website-field small { display: block; margin-top: 3px; color: var(--muted, #91a3b7); letter-spacing: .06em; text-transform: none; }
.website-image-replacement { margin-top: 22px; }
.website-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.website-image-card {
  border: 1px solid var(--line, #14394a);
  border-radius: 16px;
  padding: 16px;
  background: rgba(3, 20, 30, .66);
}
.website-image-card h3 { margin: 8px 0 6px; font-size: 17px; }
.website-image-card p { min-height: 38px; color: var(--muted, #91a3b7); }
.image-preview {
  height: 176px;
  border: 1px solid var(--line, #14394a);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .25);
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-preview.missing::after { content: 'Preview unavailable'; color: var(--muted, #91a3b7); }
.image-preview.missing img { display: none; }
.image-replace-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; }
.image-replace-form label { display: grid; gap: 7px; }
.inline-save { display: flex; align-items: center; gap: 8px; }
.inline-save input { width: 150px; }
@media (max-width: 1100px) {
  .website-content-fields, .website-image-grid { grid-template-columns: 1fr; }
  .old-admin-hero { align-items: flex-start; flex-direction: column; }
  .image-replace-form { grid-template-columns: 1fr; }
}

/* Light mode safe overrides: no server route, no 500 */
html[data-admin-theme="light"] { color-scheme: light !important; }
html[data-admin-theme="light"] body.admin-page {
  --bg: #eef4f7 !important;
  --panel: #ffffff !important;
  --panel-2: #f7fbfd !important;
  --line: #d5e3ea !important;
  --text: #10202b !important;
  --muted: #5e7281 !important;
  --accent: #0aaec0 !important;
  background: #eef4f7 !important;
  color: #10202b !important;
}
html[data-admin-theme="light"] .sidebar,
html[data-admin-theme="light"] .topbar,
html[data-admin-theme="light"] .panel,
html[data-admin-theme="light"] .stat-card,
html[data-admin-theme="light"] .domain-node,
html[data-admin-theme="light"] .release-slot,
html[data-admin-theme="light"] .website-content-group,
html[data-admin-theme="light"] .website-image-card,
html[data-admin-theme="light"] .identity-card,
html[data-admin-theme="light"] .server-card {
  background: #ffffff !important;
  border-color: #d5e3ea !important;
  color: #10202b !important;
  box-shadow: none !important;
}
html[data-admin-theme="light"] .main,
html[data-admin-theme="light"] .content,
html[data-admin-theme="light"] .rd-container { background: #eef4f7 !important; color: #10202b !important; }
html[data-admin-theme="light"] h1,
html[data-admin-theme="light"] h2,
html[data-admin-theme="light"] h3,
html[data-admin-theme="light"] strong,
html[data-admin-theme="light"] td { color: #10202b !important; }
html[data-admin-theme="light"] p,
html[data-admin-theme="light"] small,
html[data-admin-theme="light"] .muted,
html[data-admin-theme="light"] .meta { color: #5e7281 !important; }
html[data-admin-theme="light"] input,
html[data-admin-theme="light"] select,
html[data-admin-theme="light"] textarea {
  color: #10202b !important;
  background: #ffffff !important;
  border-color: #c8d9e2 !important;
}
html[data-admin-theme="light"] th { background: #e3edf2 !important; color: #536977 !important; }
html[data-admin-theme="light"] tbody tr:hover td { background: #edf6f9 !important; }
html[data-admin-theme="light"] .nav a { color: #304657 !important; }
html[data-admin-theme="light"] .nav a.active,
html[data-admin-theme="light"] .button.primary,
html[data-admin-theme="light"] button.primary,
html[data-admin-theme="light"] button[type=submit] { color: #ffffff !important; }
html[data-admin-theme="light"] .global-search { background: #ffffff !important; border-color: #c8d9e2 !important; }
html[data-admin-theme="light"] .global-search input { background: transparent !important; }
/* Laravel license generation modal */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 6000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(0, 8, 14, .72) !important;
  backdrop-filter: blur(14px) !important;
}
.modal-card {
  width: min(720px, 100%) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  border: 1px solid #1e4c60 !important;
  border-radius: 16px !important;
  background: #071827 !important;
  color: #f4f7fb !important;
  box-shadow: 0 40px 110px rgba(0,0,0,.55) !important;
}
.modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 18px 20px !important; border-bottom: 1px solid #183449 !important; }
.modal-body { padding: 20px !important; }
.modal-close { width: 38px !important; min-height: 38px !important; padding: 0 !important; border-radius: 999px !important; }
.generated-license-panel { margin-bottom: 18px !important; border-color: #20d58366 !important; }
.generated-key-list { display: grid !important; gap: 10px !important; }
.generated-key-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; }
.generated-key-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-weight: 800 !important; }
html[data-admin-theme="light"] .modal-card { background: #ffffff !important; color: #10202b !important; border-color: #c8d9e2 !important; }
html[data-admin-theme="light"] .modal-header { border-color: #d5e3ea !important; }
/* Legacy login page restored */
.login-body {
  min-height: 100vh !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 34px !important;
  background: radial-gradient(circle at 15% 12%, rgba(35,201,213,.18), transparent 28%), radial-gradient(circle at 85% 80%, rgba(124,77,255,.22), transparent 30%), #020b12 !important;
  color: #f4f7fb !important;
}
.login-shell {
  width: min(1120px, 100%) !important;
  min-height: 640px !important;
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  overflow: hidden !important;
  border: 1px solid #183449 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(7,24,39,.96), rgba(3,14,23,.96)) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.55) !important;
}
.login-art {
  padding: clamp(34px, 5vw, 70px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: radial-gradient(circle at 25% 20%, rgba(35,201,213,.18), transparent 32%), linear-gradient(145deg, rgba(8,33,47,.92), rgba(2,12,19,.96)) !important;
  border-right: 1px solid #183449 !important;
}
.login-art .brand-mark { width: 74px !important; height: 74px !important; margin-bottom: 26px !important; }
.login-art .brand-mark img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.login-art .eyebrow,
.login-card .step-label { color: #23c9d5 !important; letter-spacing: .16em !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; }
.login-art h1 { max-width: 620px !important; margin: 10px 0 18px !important; font-size: clamp(38px, 5vw, 68px) !important; line-height: .96 !important; color: #f4f7fb !important; }
.login-art p { max-width: 560px !important; color: #91a6b6 !important; font-size: 17px !important; line-height: 1.7 !important; }
.login-points { display: grid !important; gap: 12px !important; margin: 34px 0 0 !important; padding: 0 !important; list-style: none !important; }
.login-points li { color: #d9e8ef !important; padding-left: 28px !important; position: relative !important; }
.login-points li:before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: #24d47b; box-shadow: 0 0 18px rgba(36,212,123,.55); }
.login-card { padding: clamp(30px, 4vw, 54px) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background: rgba(4,18,29,.9) !important; }
.login-card h2 { margin: 8px 0 8px !important; font-size: 34px !important; color: #f4f7fb !important; }
.login-card > p { color: #91a6b6 !important; }
.login-form { display: grid !important; gap: 18px !important; margin-top: 26px !important; }
.login-form label { display: grid !important; gap: 9px !important; color: #c3d0d9 !important; font-size: 13px !important; }
.login-form input { width: 100% !important; }
.button.full { width: 100% !important; justify-content: center !important; }
.center { text-align: center !important; }
@media (max-width: 900px) {
  .login-body { padding: 18px !important; }
  .login-shell { grid-template-columns: 1fr !important; min-height: auto !important; }
  .login-art { border-right: 0 !important; border-bottom: 1px solid #183449 !important; }
  .login-art h1 { font-size: 38px !important; }
}

/* Upload modal logo and close control restore */
.upload-progress-head { grid-template-columns: 50px minmax(0,1fr) auto auto !important; }
.upload-progress-logo {
  width: 50px !important;
  height: 50px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: linear-gradient(145deg,#23c9d5,#24d47b) !important;
  box-shadow: 0 18px 42px rgba(35,201,213,.24) !important;
}
.upload-progress-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 5px !important;
  background: transparent !important;
}
.upload-progress-close {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 92, 101, .45) !important;
  background: rgba(105, 23, 31, .22) !important;
  color: #ff8086 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
}
.upload-progress-close:hover { background: rgba(105, 23, 31, .42) !important; border-color: rgba(255, 92, 101, .75) !important; }

/* Subscriptions plan editor restore */
.plans-hero { display:flex !important; justify-content:space-between !important; gap:20px !important; align-items:center !important; margin-bottom:18px !important; }
.plans-hero small { color:#23c9d5 !important; letter-spacing:.14em !important; font-weight:900 !important; }
.plans-hero h2 { margin:7px 0 !important; font-size:30px !important; }
.plan-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; margin-bottom:22px !important; }
.plan-card { background:#07172499 !important; border:1px solid #183449 !important; border-radius:12px !important; padding:18px !important; display:grid !important; gap:14px !important; }
.plan-card.featured { border-color:#7c4dff !important; box-shadow:0 20px 60px rgba(124,77,255,.14) !important; }
.plan-card-heading { display:flex !important; justify-content:space-between !important; gap:12px !important; align-items:start !important; }
.plan-card-heading h3 { margin:0 !important; font-size:19px !important; }
.plan-price strong { display:block !important; font-size:28px !important; color:#f4f7fb !important; }
.plan-price span { color:#91a6b6 !important; font-size:11px !important; }
.plan-card ul { margin:0 !important; padding:0 !important; list-style:none !important; display:grid !important; gap:8px !important; }
.plan-card li { color:#d7e4eb !important; padding-left:18px !important; position:relative !important; font-size:12px !important; }
.plan-card li:before { content:''; width:7px; height:7px; border-radius:50%; background:#24d47b; position:absolute; left:0; top:.55em; }
.plan-restrictions { display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
.plan-restrictions span { color:#ffad17 !important; background:#88580b4d !important; border-radius:4px !important; padding:4px 8px !important; font-size:10px !important; }
.modal-card.extra-wide { width:min(980px,100%) !important; }
@media(max-width:1300px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){.plan-grid,.plans-hero{grid-template-columns:1fr!important;display:grid!important}}
html[data-admin-theme="light"] .plan-card { background:#fff !important; border-color:#d5e3ea !important; }
html[data-admin-theme="light"] .plan-price strong, html[data-admin-theme="light"] .plan-card li { color:#10202b !important; }
/* App content and invoice restore */
.app-content-layout { grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr) !important; }
.managed-media-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; }
.managed-media-card { border:1px solid #183449 !important; border-radius:14px !important; background:#07172499 !important; padding:14px !important; display:grid !important; gap:12px !important; }
.managed-media-preview { height:190px !important; border:1px solid #183449 !important; border-radius:10px !important; overflow:hidden !important; display:grid !important; place-items:center !important; background:#020b12 !important; }
.managed-media-preview img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.managed-media-preview.missing:after { content:'Preview unavailable'; color:#91a6b6; }
.managed-media-preview.missing img { display:none !important; }
.managed-media-form { display:grid !important; gap:9px !important; }
.single-column { grid-template-columns:1fr !important; }
@media(max-width:1400px){.managed-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.app-content-layout{grid-template-columns:1fr!important}}
@media(max-width:760px){.managed-media-grid{grid-template-columns:1fr!important}}
html[data-admin-theme="light"] .managed-media-card { background:#fff !important; border-color:#d5e3ea !important; }
html[data-admin-theme="light"] .managed-media-preview { background:#eef4f7 !important; border-color:#d5e3ea !important; }
/* 2026-08-27 App Content hard layout guard: prevent legacy media previews from spilling over. */
.admin-shell .managed-media-grid,
.managed-media-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.admin-shell .managed-media-card,
.managed-media-card {
  overflow: hidden !important;
  min-width: 0 !important;
}
.admin-shell .managed-media-card img,
.admin-shell img.managed-media-preview,
.managed-media-card img,
img.managed-media-preview {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 190px !important;
  max-height: 190px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
}
.admin-shell .managed-media-preview,
.managed-media-preview {
  overflow: hidden !important;
  min-height: 190px !important;
  max-height: 190px !important;
}
.admin-shell .managed-media-card input,
.admin-shell .managed-media-card select,
.admin-shell .managed-media-card button,
.managed-media-card input,
.managed-media-card select,
.managed-media-card button {
  max-width: 100% !important;
}

/* 2026-08-27 Web Control priority clone layout */
.web-command-center{display:grid!important;grid-template-columns:minmax(0,1fr) 240px!important;gap:22px!important;align-items:stretch!important;margin-bottom:18px!important;background:linear-gradient(135deg,rgba(8,28,42,.98),rgba(8,43,54,.94))!important;border:1px solid rgba(30,214,229,.28)!important;box-shadow:0 24px 80px rgba(0,0,0,.22)!important}.web-command-copy small,.image-bucket-head small{color:#24d6df!important;letter-spacing:.16em!important;font-weight:900!important}.web-command-copy h2{margin:8px 0!important;font-size:clamp(26px,3vw,42px)!important;max-width:980px!important}.web-command-copy p{max-width:1040px!important;color:#a9bac9!important}.web-command-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:18px!important}.web-command-status{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:8px!important;border:1px solid rgba(34,211,238,.24)!important;border-radius:22px!important;padding:20px!important;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(124,58,237,.10))!important}.web-command-status img{width:64px!important;height:64px!important;object-fit:contain!important;border-radius:18px!important}.web-command-status span{font-size:11px!important;letter-spacing:.16em!important;color:#24d6df!important;font-weight:900!important}.web-command-status strong{font-size:20px!important}.web-image-control-priority{margin-top:20px!important;margin-bottom:24px!important;border-color:rgba(34,211,238,.28)!important}.web-image-bucket-tabs{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin:16px 0 6px!important}.image-bucket{margin-top:22px!important}.image-bucket-head{display:flex!important;justify-content:space-between!important;gap:16px!important;align-items:flex-end!important;margin-bottom:12px!important}.image-bucket-head h3{margin:4px 0!important;font-size:24px!important}.image-bucket-head p{margin:0!important;color:#9fb0bf!important}.image-bucket-head span{background:rgba(34,211,238,.10)!important;color:#22d3ee!important;border:1px solid rgba(34,211,238,.22)!important;border-radius:999px!important;padding:7px 10px!important;font-weight:800!important}.priority-image-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:16px!important}.priority-image-card{min-width:0!important;overflow:hidden!important;background:rgba(4,18,28,.72)!important;border:1px solid rgba(34,211,238,.20)!important;border-radius:20px!important;padding:14px!important}.priority-image-preview{width:100%!important;height:178px!important;max-height:178px!important;overflow:hidden!important;border-radius:16px!important;background:rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.08)!important}.priority-image-preview img{display:block!important;width:100%!important;height:178px!important;max-height:178px!important;object-fit:cover!important;object-position:center!important}.image-card-meta{display:flex!important;justify-content:space-between!important;gap:10px!important;align-items:center!important;margin-top:12px!important}.image-card-meta small{color:#24d6df!important;font-weight:900!important;letter-spacing:.12em!important}.image-card-meta .mono{max-width:160px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#8ea2b5!important}.priority-image-card h3{font-size:18px!important;margin:8px 0 4px!important}.priority-image-card p{min-height:38px!important;color:#9fb0bf!important}.priority-image-card form{margin-top:10px!important}.priority-image-card label{display:block!important}.priority-image-card input[type=file]{width:100%!important;max-width:100%!important}.legacy-web-control-layout{align-items:start!important}.legacy-control-panel{min-width:0!important}.legacy-upload-panel{position:sticky!important;top:88px!important}@media(max-width:980px){.web-command-center{grid-template-columns:1fr!important}.legacy-upload-panel{position:static!important}.priority-image-grid{grid-template-columns:1fr!important}.image-bucket-head{align-items:flex-start!important;flex-direction:column!important}}
html[data-admin-theme="light"] .web-command-center,html[data-admin-theme="light"] .priority-image-card{background:#fff!important;color:#142033!important}html[data-admin-theme="light"] .web-command-copy p,html[data-admin-theme="light"] .image-bucket-head p,html[data-admin-theme="light"] .priority-image-card p{color:#536274!important}

/* 2026-08-27 crop/alignment guard for App Content and dense admin pages */
.admin-content,.panel,.table-wrap,.modal-card,.app-content-layout,.legacy-web-control-layout{min-width:0!important;max-width:100%!important}.table-wrap{overflow-x:auto!important}.panel{overflow:hidden!important}.managed-media-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:16px!important}.managed-media-card{min-width:0!important;overflow:hidden!important}.managed-media-preview{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:180px!important;min-height:180px!important;max-height:180px!important;overflow:hidden!important;border-radius:16px!important;background:#03121d!important}.managed-media-preview img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:180px!important;object-fit:cover!important;object-position:center!important}.managed-media-preview.missing::after{content:'Thumbnail unavailable';color:#8ea2b5;font-weight:800}.managed-media-preview.missing img{display:none!important}.newsletter-control-panel{margin-bottom:16px!important}.compact-table table{font-size:12px!important}.compact-table td,.compact-table th{white-space:normal!important;word-break:break-word!important}.form-grid input,.form-grid select,.form-grid textarea,.website-content-fields input,.website-content-fields textarea,.website-content-fields select{min-width:0!important;max-width:100%!important}td,th{max-width:420px;overflow-wrap:anywhere}.row-actions{flex-wrap:wrap!important}