:root {
  color: #16251f;
  background: #f3f6f4;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #16251f;
  --muted: #68766f;
  --line: #dce5e0;
  --green-950: #073c34;
  --green-900: #0a4b40;
  --green-800: #0b5c4d;
  --green-600: #13836b;
  --green-100: #dff2ec;
  --surface: #ffffff;
  --shadow: 0 18px 55px rgba(17, 51, 42, 0.1);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.ambient { position: fixed; border-radius: 999px; filter: blur(2px); pointer-events: none; }
.ambient-one { width: 420px; height: 420px; left: -180px; top: -180px; background: rgba(30, 155, 123, 0.13); }
.ambient-two { width: 340px; height: 340px; right: -140px; bottom: -160px; background: rgba(209, 158, 65, 0.11); }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(430px, 0.9fr); }
.login-copy { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 9vw; color: white; background: radial-gradient(circle at 16% 18%, #177963 0, transparent 38%), linear-gradient(145deg, #073e35 0%, #062f2a 100%); }
.login-copy::after { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: -220px; bottom: -180px; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 750; letter-spacing: -.02em; }
.brand-on-dark { position: absolute; top: 48px; left: 9vw; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px 12px 12px 4px; background: #d5a84d; color: #0b4137; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.brand-mobile { display: none; margin-bottom: 70px; color: var(--green-900); }
.eyebrow { margin: 0 0 12px; color: #178068; text-transform: uppercase; letter-spacing: .11em; font-size: 12px; font-weight: 800; }
.login-copy .eyebrow { color: #91d9c7; }
.login-copy h1 { position: relative; z-index: 1; max-width: 720px; margin: 0; font-size: clamp(45px, 5vw, 76px); line-height: .99; letter-spacing: -.055em; }
.login-lead { max-width: 600px; margin: 28px 0 44px; color: #c6ded8; font-size: 18px; line-height: 1.65; }
.stage-note { width: fit-content; display: flex; gap: 13px; align-items: center; padding: 14px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.stage-note div { display: grid; gap: 3px; }
.stage-note span:last-child { color: #a7c9c1; font-size: 13px; }
.pulse-dot, .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #45d7a6; box-shadow: 0 0 0 5px rgba(69,215,166,.13); }

.login-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 8vw, 140px); background: rgba(249,251,250,.91); }
.login-panel h2 { margin: 0 0 10px; font-size: 38px; letter-spacing: -.04em; }
.muted { margin: 0; color: var(--muted); line-height: 1.6; }
.login-form { margin-top: 38px; }
.login-form label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 750; }
.token-field { display: flex; align-items: center; border: 1px solid #cdd9d3; border-radius: 13px; background: white; transition: border .2s, box-shadow .2s; }
.token-field:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(19,131,107,.11); }
.token-field input { flex: 1; min-width: 0; padding: 15px 16px; border: 0; outline: 0; background: transparent; }
.icon-button { width: 46px; border: 0; color: #718079; background: transparent; }
.primary-button, .secondary-button { display: flex; align-items: center; justify-content: center; gap: 15px; border-radius: 12px; font-weight: 750; transition: transform .15s, background .15s; }
.primary-button { width: 100%; margin-top: 16px; padding: 15px 18px; border: 0; color: white; background: var(--green-800); }
.primary-button:hover { background: var(--green-900); transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .65; transform: none; }
.security-note { margin: 24px 0 0; color: #7a8881; font-size: 12px; line-height: 1.55; }
.form-error { margin: 10px 0 0; color: #b33b3b; font-size: 13px; }

.app-layout { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); background: #f3f6f4; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 20px; color: #dcebe6; background: linear-gradient(180deg, #073e35, #062f2a); }
.sidebar .brand { padding: 0 8px; color: white; }
.main-nav { display: grid; gap: 7px; margin-top: 52px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 0; border-radius: 11px; color: #a9c3bb; background: transparent; text-align: left; }
.nav-item span { width: 19px; font-size: 19px; text-align: center; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.09); }
.sidebar-footer { display: grid; gap: 15px; margin-top: auto; }
.environment-badge { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: #bcd0ca; font-size: 12px; }
.logout-button { padding: 10px; border: 0; color: #a9c3bb; background: transparent; text-align: left; }
.logout-button:hover { color: white; }

.workspace { min-width: 0; }
.topbar { height: 96px; display: flex; align-items: center; gap: 16px; padding: 0 44px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(12px); }
.breadcrumb { margin: 0 0 4px; color: #829088; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.topbar h1 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.secondary-button { margin-left: auto; padding: 10px 14px; border: 1px solid #ccd9d3; color: var(--green-900); background: white; }
.secondary-button:hover { background: #f1f7f4; }
.menu-button { display: none; border: 0; color: var(--green-900); background: transparent; font-size: 23px; }
.content { max-width: 1500px; margin: 0 auto; padding: 38px 44px 60px; }
.global-error { margin-bottom: 20px; padding: 13px 16px; border: 1px solid #efc5c5; border-radius: 11px; color: #8e2929; background: #fff1f1; }
.hero-card { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; min-height: 185px; padding: 34px; border-radius: 20px; color: white; background: linear-gradient(120deg, #0b584a, #11745e); box-shadow: var(--shadow); }
.hero-card::after { content: ""; position: absolute; width: 340px; height: 340px; right: -100px; top: -190px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.02); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .eyebrow { color: #9fe3d1; }
.hero-card h2 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; }
.hero-card p:last-child { margin: 0; color: #c9e2dc; }
.hero-chip { flex: 0 0 auto; padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #d9eee9; background: rgba(255,255,255,.08); font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0; }
.metric-card, .data-card, .table-card, .policy-card { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 30px rgba(24,62,51,.045); }
.metric-card { display: flex; align-items: center; gap: 15px; padding: 21px; border-radius: 16px; }
.metric-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; font-weight: 850; }
.metric-icon.green { color: #08715d; background: #def3ed; }
.metric-icon.blue { color: #336b9b; background: #e6f0f8; }
.metric-icon.amber { color: #9a6816; background: #f8eed7; }
.metric-card div:nth-child(2) { display: grid; gap: 3px; }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-card strong { font-size: 21px; }
.status-pill, .metric-caption { margin-left: auto; color: #718078; font-size: 11px; }
.status-pill { padding: 6px 9px; border-radius: 999px; }
.status-pill.online { color: #08715d; background: #def3ed; }
.status-pill.waiting { background: #eef2f0; }
.status-pill.offline { color: #a33535; background: #fbe5e5; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 22px; }
.data-card { padding: 25px; border-radius: 17px; }
.card-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.card-heading h3, .section-heading h2 { margin: 0; letter-spacing: -.03em; }
.text-button { border: 0; color: var(--green-600); background: transparent; font-size: 12px; font-weight: 750; }
.compact-list { min-height: 200px; margin-top: 20px; }
.compact-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid #edf1ef; }
.compact-row div { display: grid; gap: 4px; }
.compact-row strong { font-size: 14px; }
.compact-row small { color: var(--muted); }
.loading-block, .empty-compact { display: grid; place-items: center; color: #829088; font-size: 13px; }
.readiness-card { background: #fbfcfb; }
.progress-value, .count-badge { padding: 7px 10px; border-radius: 999px; color: var(--green-800); background: var(--green-100); font-size: 11px; font-weight: 750; }
.readiness-list { display: grid; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; }
.readiness-list li { position: relative; display: flex; gap: 13px; min-height: 62px; color: #9aa59f; }
.readiness-list li::after { content: ""; position: absolute; left: 14px; top: 31px; width: 1px; height: 30px; background: #dce4e0; }
.readiness-list li:last-child::after { display: none; }
.readiness-list li > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #d6dfda; border-radius: 50%; background: white; font-size: 11px; font-weight: 800; }
.readiness-list li.done > span { border-color: var(--green-600); color: white; background: var(--green-600); }
.readiness-list li.current > span { border: 2px solid #d2a344; color: #986814; background: #fff8e8; }
.readiness-list li.done, .readiness-list li.current { color: var(--ink); }
.readiness-list div { display: grid; align-content: start; gap: 4px; padding-top: 2px; }
.readiness-list small { color: #78867f; }

.section-heading { margin-bottom: 22px; }
.section-heading h2 { font-size: 30px; }
.notice-card { margin-bottom: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #f8faf9; }
.notice-card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.notice-card ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink); font-size: 13px; }
.warning-card { border-color: #e9c978; background: #fff9e9; }
.table-card { overflow: hidden; border-radius: 17px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; border-bottom: 1px solid #e8eeeb; text-align: left; white-space: nowrap; }
th { color: #75827b; background: #f8faf9; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
td { font-size: 13px; }
.table-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: #4c5c54; background: #eef2f0; font-size: 11px; }
.table-status.active { color: #08715d; background: #def3ed; }
.table-status.command-pending { color: #765a18; background: #f8eed7; }
.table-status.command-processing { color: #336b9b; background: #e6f0f8; }
.table-status.command-completed { color: #08715d; background: #def3ed; }
.table-status.command-retry { color: #8b571f; background: #fff0d9; }
.table-status.command-failed { color: #a33535; background: #fbe5e5; }
.table-status.authorization-allowed { color: #08715d; background: #def3ed; }
.table-status.draft { color: #8a5b08; background: #fff0c7; }
.table-status.nas-observed-online { color: #08715d; background: #def3ed; }
.table-status.nas-observed-offline { color: #a33535; background: #fbe5e5; }
.table-status.nas-observed-unknown,
.table-status.nas-observed-unavailable { color: #5c6870; background: #e9eef1; }
.table-status.nas-event-on { color: #08715d; background: #def3ed; }
.table-status.nas-event-off { color: #a33535; background: #fbe5e5; }
.nas-checklist { margin: 12px 0; padding-left: 20px; color: var(--ink-muted); }
.nas-checklist li + li { margin-top: 6px; }
#nas-table td:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.nas-events-card { margin-top: 22px; }
.nas-events-heading { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.nas-events-heading h3 { margin: 0 0 6px; }
.nas-events-heading .muted { margin: 0; }
.form-actions { display: grid; gap: 9px; }
.table-status.authorization-rejected { color: #a33535; background: #fbe5e5; }
.table-status.authorization-blocked { color: #8b571f; background: #fff0d9; }
.table-status.authorization-not_found { color: #5c6870; background: #e9eef1; }
.command-row, .session-row { cursor: pointer; }
.command-row:hover, .command-row:focus, .session-row:hover, .session-row:focus { outline: 0; background: #f2f8f5; }
.command-attempts { margin-top: 22px; }
.attempt-list { display: grid; gap: 12px; margin-top: 20px; }
.attempt-item { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfb; }
.attempt-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.attempt-details { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 15px 0 0; font-size: 12px; }
.attempt-details dt { color: var(--muted); }
.attempt-details dd { margin: 0; overflow-wrap: anywhere; }
.table-status.attempt-completed { color: #08715d; background: #def3ed; }
.table-status.attempt-retry, .table-status.attempt-lease_expired { color: #8b571f; background: #fff0d9; }
.table-status.attempt-failed { color: #a33535; background: #fbe5e5; }
.command-preflight { border-left: 4px solid #16836b; }
.table-status.preflight-ready { color: #08715d; background: #def3ed; }
.table-status.preflight-blocked { color: #a33535; background: #fbe5e5; }
.session-detail { margin-top: 22px; }
.session-detail-fields { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 9px 18px; margin: 22px 0; padding: 18px; border-radius: 12px; background: #f6f9f7; font-size: 12px; }
.session-detail-fields dt { color: var(--muted); }
.session-detail-fields dd { margin: 0; overflow-wrap: anywhere; }
.session-events-heading { margin-top: 24px; }
.accounting-timeline { display: grid; gap: 12px; }
.accounting-event { padding: 17px; border: 1px solid var(--line); border-left: 4px solid #97aaa1; border-radius: 13px; background: #fbfcfb; }
.accounting-event.event-start { border-left-color: #16836b; }
.accounting-event.event-interim_update { border-left-color: #4b83ad; }
.accounting-event.event-stop { border-left-color: #b66b55; }
.empty-state { display: grid; justify-items: center; padding: 70px 30px; color: #819088; text-align: center; }
.empty-state > span { font-size: 35px; color: #aab8b1; }
.empty-state strong { margin-top: 12px; color: var(--ink); }
.empty-state p { margin: 7px 0 0; font-size: 13px; }
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 18px; }
.policy-card { padding: 23px; border-radius: 16px; }
.policy-card.blocked { border-color: #ead7d7; }
.policy-card-header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.policy-card h3 { margin: 0 0 5px; }
.policy-code { color: #7b8982; font-size: 11px; }
.policy-speed { margin: 28px 0 6px; font-size: 32px; letter-spacing: -.04em; }
.policy-speed small { color: #7b8982; font-size: 12px; letter-spacing: 0; }
.policy-meta { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 15px; border-top: 1px solid #e7edea; color: #6f7d76; font-size: 12px; }

.management-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(420px, 1.28fr); gap: 22px; }
.admin-form { display: grid; gap: 15px; margin-top: 24px; }
.admin-form label { display: grid; gap: 7px; color: #4f5f57; font-size: 12px; font-weight: 750; }
.admin-form label > span { color: #87948e; font-weight: 500; }
.admin-form input, .admin-form select, .admin-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #ccd9d3; border-radius: 10px; outline: 0; color: var(--ink); background: white; }
.admin-form textarea { min-height: 74px; resize: vertical; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(19,131,107,.1); }
.admin-form .primary-button { margin-top: 0; }
.inline-form-error { margin: 0; padding: 10px 12px; border-radius: 9px; color: #992f2f; background: #fff0f0; font-size: 12px; }
.subscriber-list { min-height: 260px; margin-top: 18px; }
.subscriber-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px; border: 0; border-bottom: 1px solid #e8eeeb; color: inherit; background: transparent; text-align: left; }
.subscriber-row:hover, .subscriber-row.selected { color: var(--green-900); background: #f2f8f5; }
.subscriber-row div { min-width: 0; display: grid; gap: 4px; }
.subscriber-row strong, .subscriber-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscriber-row small { color: var(--muted); }
.subscriber-detail { margin-top: 22px; }
.subscriber-status-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.service-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(380px, 1.3fr); gap: 30px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.compact-form { align-content: start; margin-top: 0; padding: 20px; border-radius: 13px; background: #f6f9f7; }
.compact-form h4, .service-heading h4 { margin: 0; }
.service-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 12px; }
.service-list { display: grid; gap: 12px; }
.service-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.service-card-head, .service-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-card h5 { margin: 0 0 5px; font-size: 14px; }
.service-card small { color: var(--muted); }
.service-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 15px; padding-top: 14px; border-top: 1px solid #e8eeeb; }
.action-button { padding: 8px 11px; border: 1px solid #cbd8d2; border-radius: 9px; color: var(--green-900); background: white; font-size: 12px; font-weight: 700; }
.action-button:hover { background: #edf7f3; }
.action-button.danger { color: #9a3434; }
.credential-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; margin-top: 4px; }
.credential-form input { min-width: 0; padding: 9px 10px; border: 1px solid #ccd9d3; border-radius: 9px; }
.credential-form textarea { grid-column: 1 / -1; min-height: 54px; padding: 9px 10px; border: 1px solid #ccd9d3; border-radius: 9px; resize: vertical; }
.credential-form button, .credential-form .inline-form-error { grid-column: 1 / -1; }
.success-note { color: #08715d; font-size: 12px; }

@media (max-width: 1050px) {
  .login-copy { padding: 7vw; }
  .login-panel { padding: 7vw; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .management-grid, .service-layout { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}

@media (max-width: 760px) {
  .login-layout { display: block; background: #f8faf9; }
  .login-copy { display: none; }
  .login-panel { min-height: 100vh; padding: 32px 24px; }
  .brand-mobile { display: flex; }
  .app-layout { display: block; }
  .sidebar { position: fixed; z-index: 20; width: 248px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 45px rgba(5,38,32,.2); }
  .topbar { height: 84px; padding: 0 20px; }
  .menu-button { display: block; }
  .content { padding: 25px 18px 45px; }
  .hero-card { align-items: start; flex-direction: column; padding: 27px; }
  .metric-grid { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
  .credential-form { grid-template-columns: 1fr; }
  .credential-form textarea, .credential-form button, .credential-form .inline-form-error { grid-column: 1; }
  .session-detail-fields { grid-template-columns: auto minmax(0, 1fr); }
  .secondary-button { padding: 9px 10px; font-size: 12px; }
}