:root {
  color-scheme: dark;
  --bg: #06101d;
  --bg-deep: #030a13;
  --sidebar: #081523;
  --surface: #0b1a2a;
  --surface-raised: #102237;
  --surface-soft: #0c1e31;
  --border: rgba(148, 179, 209, 0.14);
  --border-strong: rgba(98, 170, 234, 0.32);
  --text: #f4f8fc;
  --text-soft: #c2cfdb;
  --muted: #8195a8;
  --blue: #62aaea;
  --blue-strong: #258bdc;
  --blue-deep: #135695;
  --cyan: #46d9e8;
  --green: #35d7a1;
  --yellow: #f2bf5a;
  --orange: #ef8f55;
  --red: #f36d7d;
  --purple: #a98af4;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  --radius: 18px;
  --radius-small: 12px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
[hidden] { display: none !important; }

.brand-lockup, .sidebar-brand { display: flex; align-items: center; gap: 13px; }
.brand-lockup strong, .sidebar-brand strong { display: block; font-size: 1.04rem; letter-spacing: -0.02em; }
.brand-lockup small, .sidebar-brand small { display: block; color: var(--muted); font-size: 0.79rem; margin-top: 1px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; position: relative; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--blue), var(--blue-deep)); box-shadow: 0 12px 30px rgba(37, 139, 220, 0.3); overflow: hidden; }
.brand-mark::before { content: ""; position: absolute; inset: 1px; border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.16), transparent 50%); }
.brand-mark span { position: relative; z-index: 1; font-weight: 850; letter-spacing: -0.08em; transform: translateX(-1px); }
.brand-mark.small { width: 40px; height: 40px; border-radius: 12px; font-size: .87rem; }

/* Login */
.auth-page { overflow-x: hidden; background: radial-gradient(circle at 12% 15%, rgba(19, 86, 149, .28), transparent 34%), radial-gradient(circle at 78% 75%, rgba(70, 217, 232, .09), transparent 32%), var(--bg-deep); }
.auth-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(98,170,234,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(98,170,234,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right, #000, transparent 72%); }
.auth-ambient { position: fixed; width: 400px; height: 400px; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.auth-ambient-one { background: var(--blue); left: -180px; top: -100px; }
.auth-ambient-two { background: var(--cyan); right: -170px; bottom: -170px; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1.2fr) minmax(420px, .8fr); position: relative; z-index: 1; }
.auth-story { padding: clamp(42px, 6vw, 90px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--border); }
.auth-story-copy { max-width: 700px; margin: 80px 0; }
.eyebrow, .section-kicker { color: var(--blue); font-weight: 750; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.pulse-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(53, 215, 161, .1); }
.auth-story h1 { margin: 22px 0; font-size: clamp(2.8rem, 5.5vw, 5.9rem); line-height: .99; letter-spacing: -.064em; font-weight: 730; }
.auth-story h1 em { color: var(--blue); font-style: normal; }
.auth-story-copy > p { color: var(--text-soft); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 640px; }
.auth-mini-status { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); max-width: 700px; border-top: 1px solid var(--border); padding-top: 25px; gap: 24px; }
.auth-mini-status div { min-width: 0; }
.auth-mini-status span, .auth-mini-status strong { display: block; }
.auth-mini-status span { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.auth-mini-status strong { font-size: .94rem; overflow-wrap: anywhere; }
.safe-text { color: var(--green); }
.login-panel { display: grid; place-items: center; padding: 38px; position: relative; background: rgba(5, 15, 26, .58); backdrop-filter: blur(20px); }
.login-card { width: min(100%, 455px); padding: clamp(30px, 4vw, 48px); border: 1px solid var(--border); border-radius: 26px; background: linear-gradient(160deg, rgba(16, 34, 55, .94), rgba(8, 21, 35, .96)); box-shadow: var(--shadow); }
.login-heading h2 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -.035em; }
.login-heading p { color: var(--muted); margin: 0 0 32px; }
.mobile-brand { display: none; color: var(--blue); font-weight: 700; font-size: .8rem; letter-spacing: .05em; margin-bottom: 18px; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > span { color: var(--text-soft); font-size: .86rem; font-weight: 650; }
.field input, .field select, .field textarea { width: 100%; color: var(--text); border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; background: rgba(5, 16, 29, .75); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(148, 179, 209, .28); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); background: rgba(7, 23, 39, .95); box-shadow: 0 0 0 4px rgba(98, 170, 234, .08); outline: none; }
.field textarea { resize: vertical; min-height: 100px; }
.password-field { position: relative; }
.password-field input { padding-right: 70px; }
.text-button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: .8rem; font-weight: 700; padding: 6px; }
.password-field .text-button { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }
.primary-button, .secondary-button, .ghost-button, .icon-button { border: 0; border-radius: 10px; cursor: pointer; font-weight: 700; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.primary-button { padding: 12px 17px; color: #03101c; background: linear-gradient(135deg, #77baf2, #3b98df); box-shadow: 0 10px 30px rgba(37, 139, 220, .2); }
.primary-button:hover { transform: translateY(-1px); background: linear-gradient(135deg, #8dc7f5, #4aa4e7); }
.secondary-button { padding: 10px 15px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--border); }
.secondary-button:hover { border-color: var(--border-strong); background: #142a42; }
.compact-button { padding: 8px 12px; font-size: .82rem; }
.full-button { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.form-error { color: #ffc1c8; background: rgba(243, 109, 125, .1); border: 1px solid rgba(243, 109, 125, .28); border-radius: 10px; padding: 10px 12px; font-size: .86rem; }
.security-note { display: flex; align-items: center; gap: 11px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); }
.security-note p { margin: 0; font-size: .78rem; line-height: 1.5; }
.security-note strong { color: var(--text-soft); }
.shield-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: var(--green); border: 1px solid rgba(53, 215, 161, .3); border-radius: 9px; background: rgba(53, 215, 161, .08); }
.login-footer { position: absolute; bottom: 18px; color: #587084; font-size: .72rem; }

/* Application shell */
.app-page { overflow: hidden; }
.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #091828, #06121f); border-right: 1px solid var(--border); padding: 24px 15px 18px; z-index: 40; }
.sidebar-brand { padding: 0 9px 30px; }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-section-label { color: #536b80; font-size: .66rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; padding: 0 12px 8px; }
.nav-section-label.second { margin-top: 24px; }
.nav-item { width: 100%; min-height: 44px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 11px; padding: 8px 10px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; font-size: .87rem; font-weight: 650; }
.nav-item:hover:not(.disabled) { color: var(--text); background: rgba(98,170,234,.06); }
.nav-item.active { color: var(--text); background: linear-gradient(90deg, rgba(37, 139, 220, .17), rgba(37, 139, 220, .07)); border-color: rgba(98,170,234,.16); }
.nav-item.active .nav-icon { color: var(--blue); }
.nav-item b { min-width: 25px; color: var(--blue); background: rgba(98,170,234,.1); border-radius: 8px; padding: 2px 6px; text-align: center; font-size: .68rem; }
.nav-item i { font-style: normal; color: #557087; font-size: .62rem; }
.nav-icon { width: 26px; height: 26px; display: grid; place-items: center; font-size: 1rem; }
.nav-item.disabled { opacity: .5; }
.sidebar-bottom { margin-top: auto; }
.network-mini { display: flex; gap: 10px; align-items: center; padding: 13px 11px; background: rgba(98,170,234,.045); border: 1px solid var(--border); border-radius: 12px; }
.network-mini-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(98,170,234,.11); color: var(--blue); font-size: .78rem; font-weight: 800; }
.network-mini small, .network-mini strong { display: block; }
.network-mini small { color: var(--muted); font-size: .68rem; }
.network-mini strong { font-size: .76rem; margin-top: 2px; }
.network-mini .pulse-dot { width: 6px; height: 6px; margin-right: 5px; box-shadow: none; }
.logout-button { width: 100%; display: flex; justify-content: space-between; margin-top: 10px; padding: 11px; border: 0; background: transparent; color: #6e8497; cursor: pointer; font-size: .78rem; }
.logout-button:hover { color: var(--text-soft); }
.workspace { min-width: 0; height: 100vh; overflow: auto; background: radial-gradient(circle at 55% -20%, rgba(19,86,149,.11), transparent 35%), var(--bg); }
.topbar { height: 94px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--border); background: rgba(6,16,29,.86); backdrop-filter: blur(18px); }
.page-heading span { color: #60798d; font-size: .7rem; }
.page-heading h1 { margin: 3px 0 0; font-size: 1.55rem; letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.search-trigger { min-width: 300px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; color: #70869a; background: rgba(9, 25, 41, .8); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; font-size: .79rem; }
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-soft); }
kbd { padding: 3px 6px; color: #668098; background: #091625; border: 1px solid var(--border); border-radius: 5px; font: 600 .65rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.user-chip { display: flex; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--border); }
.user-chip > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, rgba(98,170,234,.22), rgba(19,86,149,.16)); color: var(--blue); font-weight: 800; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: .78rem; }
.user-chip small { color: var(--muted); font-size: .65rem; }
.main-content { max-width: 1660px; margin: 0 auto; padding: 32px clamp(24px, 3vw, 48px) 60px; }
.view { display: none; }
.active-view { display: block; animation: enter-view .18s ease; }
@keyframes enter-view { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Shared panels */
.panel { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(160deg, rgba(13,30,49,.94), rgba(9,23,38,.96)); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-heading h2 { margin: 4px 0 0; font-size: 1.15rem; letter-spacing: -.025em; }
.ghost-button { padding: 7px 4px; color: var(--blue); background: transparent; font-size: .8rem; }
.ghost-button:hover { color: #9bcef5; }
.notice-banner { min-height: 66px; display: flex; align-items: center; gap: 13px; padding: 13px 15px; margin-bottom: 22px; border-radius: 13px; }
.notice-banner strong { display: block; font-size: .86rem; }
.notice-banner p { margin: 2px 0 0; color: var(--text-soft); font-size: .76rem; }
.notice-banner .secondary-button { margin-left: auto; white-space: nowrap; }
.warning-banner { border: 1px solid rgba(242,191,90,.25); background: linear-gradient(90deg, rgba(242,191,90,.09), rgba(242,191,90,.035)); }
.info-banner { border: 1px solid rgba(98,170,234,.22); background: rgba(98,170,234,.07); }
.notice-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; color: var(--yellow); background: rgba(242,191,90,.1); border: 1px solid rgba(242,191,90,.24); font-weight: 800; }
.info-banner .notice-icon { color: var(--blue); border-color: rgba(98,170,234,.24); background: rgba(98,170,234,.1); }
.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 13px; margin-bottom: 16px; }
.stat-card { min-height: 128px; padding: 18px; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg, rgba(15,34,54,.95), rgba(9,23,38,.9)); }
.stat-card::after { content: ""; position: absolute; width: 86px; height: 86px; right: -35px; bottom: -42px; border-radius: 50%; background: var(--stat-color, var(--blue)); opacity: .055; box-shadow: 0 0 55px var(--stat-color, var(--blue)); }
.stat-card-header { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.stat-card-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--stat-color, var(--blue)); background: color-mix(in srgb, var(--stat-color, var(--blue)) 10%, transparent); }
.stat-card strong { display: block; margin-top: 17px; font-size: 1.75rem; letter-spacing: -.045em; }
.stat-card small { color: #617a8e; font-size: .68rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .72fr); gap: 16px; }
.prefix-focus-panel, .health-panel, .activity-panel { padding: 22px; }
.prefix-summary { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 10px; margin: 22px 0; }
.meta-card { padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: rgba(5,16,28,.34); }
.meta-card span, .meta-card strong { display: block; }
.meta-card span { color: var(--muted); font-size: .67rem; margin-bottom: 4px; }
.meta-card strong { font-size: .82rem; overflow-wrap: anywhere; }
.capacity-block { padding-top: 18px; border-top: 1px solid var(--border); }
.capacity-heading { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.capacity-heading strong { color: var(--text-soft); }
.capacity-bar { display: grid; grid-template-columns: repeat(256, minmax(0, 1fr)); gap: 1px; height: 10px; margin: 12px 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.045); }
.capacity-dot { min-width: 1px; height: 100%; }
.capacity-free { background: rgba(53,215,161,.36); }
.capacity-assigned { background: var(--blue); }
.capacity-reserved { background: var(--yellow); }
.capacity-quarantine { background: var(--purple); }
.capacity-blocked { background: var(--red); }
.capacity-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .68rem; }
.capacity-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 3px; background: var(--legend-color); }
.legend-free { --legend-color: var(--green); }
.legend-assigned { --legend-color: var(--blue); }
.legend-reserved { --legend-color: var(--yellow); }
.legend-quarantine { --legend-color: var(--purple); }
.legend-blocked { --legend-color: var(--red); }
.freshness { color: #60798d; font-size: .67rem; }
.health-list { margin-top: 18px; }
.health-row { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(148,179,209,.09); }
.health-row:first-child { border-top: 0; }
.health-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(98,170,234,.07); color: var(--blue); font-size: .7rem; font-weight: 800; }
.health-row strong, .health-row small { display: block; }
.health-row strong { font-size: .78rem; }
.health-row small { color: var(--muted); font-size: .66rem; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--badge-border); border-radius: 999px; color: var(--badge-color); background: var(--badge-bg); font-size: .65rem; font-weight: 750; white-space: nowrap; }
.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-neutral { --badge-color: #8fa3b5; --badge-border: rgba(143,163,181,.18); --badge-bg: rgba(143,163,181,.06); }
.badge-pending, .badge-warning { --badge-color: var(--yellow); --badge-border: rgba(242,191,90,.2); --badge-bg: rgba(242,191,90,.07); }
.badge-valid { --badge-color: var(--green); --badge-border: rgba(53,215,161,.2); --badge-bg: rgba(53,215,161,.07); }
.badge-danger { --badge-color: var(--red); --badge-border: rgba(243,109,125,.22); --badge-bg: rgba(243,109,125,.07); }
.badge-ip-free { --badge-color: var(--green); --badge-border: rgba(53,215,161,.2); --badge-bg: rgba(53,215,161,.07); }
.badge-ip-assigned { --badge-color: var(--blue); --badge-border: rgba(98,170,234,.22); --badge-bg: rgba(98,170,234,.07); }
.badge-ip-reserved { --badge-color: var(--yellow); --badge-border: rgba(242,191,90,.2); --badge-bg: rgba(242,191,90,.07); }
.badge-ip-quarantine { --badge-color: var(--purple); --badge-border: rgba(169,138,244,.2); --badge-bg: rgba(169,138,244,.07); }
.badge-ip-blocked { --badge-color: var(--red); --badge-border: rgba(243,109,125,.2); --badge-bg: rgba(243,109,125,.07); }
.stat-total { --stat-color: var(--cyan); }
.stat-free { --stat-color: var(--green); }
.stat-assigned { --stat-color: var(--blue); }
.stat-reserved { --stat-color: var(--yellow); }
.stat-quarantine { --stat-color: var(--purple); }
.activity-panel { margin-top: 16px; }
.activity-list { margin-top: 14px; }
.activity-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(148,179,209,.08); }
.activity-item:first-child { border-top: 0; }
.activity-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--blue); background: rgba(98,170,234,.08); font-size: .72rem; }
.activity-item strong { display: block; font-size: .78rem; }
.activity-item p { margin: 2px 0 0; color: var(--muted); font-size: .7rem; }
.activity-item time { color: #5e7689; font-size: .67rem; white-space: nowrap; }

/* Pool */
.pool-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 15px; }
.prefix-selector { display: flex; align-items: center; gap: 12px; }
.prefix-selector strong, .prefix-selector small { display: block; }
.prefix-selector strong { font-size: 1rem; }
.prefix-selector small { color: var(--muted); font-size: .72rem; }
.prefix-badge { padding: 7px 9px; border-radius: 9px; color: var(--blue); border: 1px solid rgba(98,170,234,.2); background: rgba(98,170,234,.07); font-size: .7rem; font-weight: 800; }
.inline-lock-notice { margin-bottom: 14px; color: var(--yellow); font-size: .73rem; }
.inline-lock-notice::before { content: "●"; margin-right: 7px; }
.pool-panel { padding: 18px; }
.filter-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.status-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-pill { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: rgba(5,16,29,.36); cursor: pointer; font-size: .72rem; }
.filter-pill span { min-width: 18px; padding: 1px 5px; border-radius: 5px; color: #6f899e; background: rgba(255,255,255,.04); font-size: .62rem; text-align: center; }
.filter-pill.active { color: var(--text); border-color: rgba(98,170,234,.3); background: rgba(98,170,234,.09); }
.filter-pill.active span { color: var(--blue); background: rgba(98,170,234,.1); }
.inline-search { min-width: min(320px, 100%); display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(5,16,29,.45); color: var(--muted); }
.inline-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .76rem; }
.inline-search input::placeholder { color: #61788c; }
.pool-view-switch { display: flex; justify-content: flex-end; gap: 2px; margin: 13px 0; }
.pool-view-switch button { border: 0; padding: 5px 9px; border-radius: 7px; color: #637c90; background: transparent; cursor: pointer; font-size: .68rem; }
.pool-view-switch button.active { color: var(--text-soft); background: rgba(98,170,234,.08); }
.ip-grid { display: grid; grid-template-columns: repeat(16, minmax(46px, 1fr)); gap: 5px; }
.ip-cell { min-width: 0; aspect-ratio: 1.28; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; border: 1px solid var(--ip-border); border-radius: 7px; color: var(--ip-color); background: var(--ip-bg); cursor: pointer; transition: transform .12s ease, border-color .12s ease, filter .12s ease; }
.ip-cell:hover { transform: translateY(-2px); filter: brightness(1.17); border-color: currentColor; z-index: 1; }
.ip-cell strong { font-size: .68rem; line-height: 1; }
.ip-cell small { max-width: 100%; padding: 0 3px; color: var(--muted); font-size: .52rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ip-free { --ip-color: #54caa3; --ip-border: rgba(53,215,161,.12); --ip-bg: rgba(53,215,161,.035); }
.ip-assigned { --ip-color: #79baf0; --ip-border: rgba(98,170,234,.28); --ip-bg: rgba(98,170,234,.09); }
.ip-reserved { --ip-color: #e4b85f; --ip-border: rgba(242,191,90,.23); --ip-bg: rgba(242,191,90,.075); }
.ip-quarantine { --ip-color: #b49af1; --ip-border: rgba(169,138,244,.23); --ip-bg: rgba(169,138,244,.075); }
.ip-blocked { --ip-color: #f07c89; --ip-border: rgba(243,109,125,.24); --ip-bg: rgba(243,109,125,.075); }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 10px 12px; color: #6d8599; border-bottom: 1px solid var(--border); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; text-align: left; white-space: nowrap; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid rgba(148,179,209,.075); color: var(--text-soft); font-size: .75rem; }
.data-table tbody tr { cursor: pointer; transition: background .12s ease; }
.data-table tbody tr:hover { background: rgba(98,170,234,.045); }
.data-table td strong { color: var(--text); }
.empty-state { padding: 70px 20px; text-align: center; color: var(--muted); }
.empty-state > span { display: block; font-size: 2rem; color: #547087; }
.empty-state strong { display: block; margin-top: 8px; color: var(--text-soft); }
.empty-state p { margin: 5px 0 0; font-size: .78rem; }

/* Drawer, dialogs and forms */
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(1,7,13,.62); backdrop-filter: blur(2px); }
.detail-drawer { width: min(520px, 100vw); height: 100vh; position: fixed; z-index: 80; top: 0; right: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #0d1e31, #081522); border-left: 1px solid var(--border-strong); box-shadow: -30px 0 80px rgba(0,0,0,.44); transform: translateX(105%); transition: transform .22s ease; }
.detail-drawer.open { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--border); }
.drawer-header h2, .modal-header h2 { margin: 3px 0 0; font-size: 1.35rem; letter-spacing: -.035em; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); background: rgba(255,255,255,.035); border: 1px solid var(--border); font-size: 1.2rem; }
.icon-button:hover { color: var(--text); border-color: var(--border-strong); }
.quick-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.quick-action { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); background: rgba(5,16,29,.34); cursor: pointer; font-size: .7rem; text-decoration: none; }
.quick-action:hover { color: var(--blue); border-color: var(--border-strong); }
.drawer-form { padding: 22px 24px 110px; overflow-y: auto; }
.form-grid { display: grid; gap: 13px; }
.form-grid.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawer-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 24px; border-top: 1px solid var(--border); background: rgba(8,21,34,.94); backdrop-filter: blur(14px); }
.drawer-footer > span { color: var(--muted); font-size: .67rem; }
.form-inline-warning { color: var(--yellow); background: rgba(242,191,90,.07); border: 1px solid rgba(242,191,90,.18); border-radius: 9px; padding: 9px 11px; font-size: .72rem; }
.modal-dialog, .search-dialog { padding: 0; color: var(--text); background: #0b1a2b; border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow); }
.modal-dialog::backdrop, .search-dialog::backdrop { background: rgba(1,7,13,.75); backdrop-filter: blur(4px); }
.modal-dialog { width: min(720px, calc(100vw - 30px)); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.modal-body { max-height: 68vh; overflow-y: auto; padding: 21px 22px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--border); }
.lock-control { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid rgba(242,191,90,.18); border-radius: 11px; background: rgba(242,191,90,.05); cursor: pointer; }
.lock-control input { margin-top: 4px; accent-color: var(--yellow); }
.lock-control strong, .lock-control small { display: block; }
.lock-control strong { font-size: .8rem; }
.lock-control small { color: var(--muted); font-size: .68rem; }
.search-dialog { width: min(650px, calc(100vw - 30px)); top: -22vh; }
.command-search { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 14px; border-bottom: 1px solid var(--border); color: var(--muted); }
.command-search input { border: 0; outline: none; background: transparent; color: var(--text); font-size: .92rem; }
.command-results { max-height: 380px; overflow-y: auto; padding: 8px; }
.command-results > p { padding: 25px; margin: 0; color: var(--muted); text-align: center; font-size: .76rem; }
.command-result { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 10px; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.command-result:hover { background: rgba(98,170,234,.08); }
.command-result > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: rgba(98,170,234,.08); font-size: .68rem; font-weight: 800; }
.command-result strong, .command-result small { display: block; }
.command-result strong { font-size: .8rem; }
.command-result small { color: var(--muted); font-size: .68rem; }
.command-result > em { color: var(--muted); font-style: normal; font-size: .68rem; }
.toast-region { position: fixed; z-index: 120; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 420px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 11px; background: #10243a; box-shadow: var(--shadow); font-size: .76rem; animation: toast-in .2s ease; }
.toast.error { border-color: rgba(243,109,125,.4); color: #ffc4ca; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.audit-panel { padding: 22px; }
.audit-panel .table-wrap { margin-top: 16px; }
.audit-table tbody tr { cursor: default; }
.mobile-only { display: none; }

@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .ip-grid { grid-template-columns: repeat(12, minmax(45px, 1fr)); }
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-story { display: none; }
  .mobile-brand { display: block; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { width: 250px; position: fixed; left: 0; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .mobile-only { display: grid; }
  .topbar { padding: 0 18px; }
  .main-content { padding: 24px 18px 50px; }
  .search-trigger { min-width: auto; width: 42px; height: 42px; grid-template-columns: 1fr; place-items: center; }
  .search-trigger span:nth-child(2), .search-trigger kbd { display: none; }
  .user-chip div { display: none; }
  .user-chip { padding-left: 8px; }
  .ip-grid { grid-template-columns: repeat(10, minmax(40px, 1fr)); }
}

@media (max-width: 680px) {
  .login-panel { padding: 18px; }
  .login-card { padding: 28px 22px; }
  .topbar { height: 78px; }
  .page-heading span { display: none; }
  .page-heading h1 { font-size: 1.18rem; }
  .stat-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .stat-card { min-height: 110px; }
  .notice-banner { align-items: flex-start; flex-wrap: wrap; }
  .notice-banner .secondary-button { margin-left: 43px; }
  .prefix-summary { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .pool-toolbar, .filter-row { align-items: stretch; flex-direction: column; }
  .pool-actions .secondary-button { width: 100%; }
  .inline-search { min-width: 100%; }
  .ip-grid { grid-template-columns: repeat(6, minmax(42px, 1fr)); }
  .form-grid.two-column { grid-template-columns: 1fr; }
  .drawer-footer { align-items: stretch; flex-direction: column; }
  .drawer-footer .primary-button { width: 100%; }
}

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