:root {
    --ink: #102033;
    --muted: #64748b;
    --line: #dfe6ee;
    --surface: #ffffff;
    --canvas: #f4f7fb;
    --navy: #071b31;
    --navy-soft: #0d2947;
    --cyan: #16c6bf;
    --cyan-dark: #099f9a;
    --blue: #2575fc;
    --orange: #ff9f43;
    --red: #e55454;
    --green: #158f68;
    --shadow: 0 16px 40px rgba(15, 35, 55, .08);
    --radius: 16px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.auth-page { background: var(--navy); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(330px, .9fr) minmax(420px, 1.1fr); }
.auth-brand { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; color: white; background: radial-gradient(circle at 78% 22%, rgba(22,198,191,.28), transparent 26%), linear-gradient(145deg, #07182c, #0c3154); }
.auth-brand::before { content: ""; position: absolute; inset: 7% -28% auto auto; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.025), 0 0 0 104px rgba(255,255,255,.018); z-index: -1; }
.auth-brand h1 { max-width: 620px; margin: 20px 0; font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: .99; letter-spacing: -.055em; }
.auth-brand > p:not(.eyebrow) { max-width: 560px; color: #c1d3e4; line-height: 1.7; font-size: 1.04rem; }
.auth-content { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 6vw, 90px); background: #f7fafc; }
.auth-card { width: min(460px, 100%); }
.auth-card-heading { margin-bottom: 32px; }
.auth-card h2 { margin: 7px 0 10px; font-size: clamp(1.8rem, 4vw, 2.45rem); letter-spacing: -.035em; }
.auth-card p { color: var(--muted); line-height: 1.65; }
.eyebrow { margin: 0; color: var(--cyan-dark) !important; font-weight: 800; font-size: .72rem !important; letter-spacing: .16em; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; width: 35px; height: 35px; padding: 8px; border-radius: 11px; background: linear-gradient(145deg, var(--cyan), #32e0bd); box-shadow: 0 8px 24px rgba(22,198,191,.22); }
.brand-mark span { width: 4px; background: var(--navy); border-radius: 4px; }
.brand-mark span:nth-child(1) { height: 8px; }
.brand-mark span:nth-child(2) { height: 16px; }
.brand-mark span:nth-child(3) { height: 11px; }
.brand-mark-large { width: 52px; height: 52px; padding: 12px; border-radius: 16px; }
.brand-mark-large span { width: 6px; }
.brand-mark-large span:nth-child(1) { height: 12px; }
.brand-mark-large span:nth-child(2) { height: 24px; }
.brand-mark-large span:nth-child(3) { height: 17px; }
.signal-art { display: flex; align-items: center; gap: 7px; height: 65px; margin-top: 35px; opacity: .72; }
.signal-art i { display: block; width: 5px; border-radius: 5px; background: var(--cyan); }
.signal-art i:nth-child(1), .signal-art i:nth-child(7) { height: 15px; }
.signal-art i:nth-child(2), .signal-art i:nth-child(6) { height: 28px; }
.signal-art i:nth-child(3), .signal-art i:nth-child(5) { height: 45px; }
.signal-art i:nth-child(4) { height: 62px; }

.stack-form, .form-grid { display: grid; gap: 20px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field-label { color: #2d4157; font-weight: 750; font-size: .86rem; }
.field small, .help-text { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.field input, .field select, .field textarea, .station-switcher select, .search-input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--ink); background: #fff; outline: none; transition: border .18s, box-shadow .18s; }
.field textarea { min-height: 116px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .station-switcher select:focus, .search-input:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(22,198,191,.12); }
.field input[readonly] { background: #f1f5f9; color: #52657a; cursor: not-allowed; }
.field-error { color: var(--red) !important; font-weight: 650; }
.password-field { position: relative; }
.password-field input { padding-right: 62px; }
.password-field button { position: absolute; right: 6px; top: 6px; bottom: 6px; border: 0; border-radius: 7px; padding: 0 11px; color: var(--cyan-dark); background: #e9fbf9; cursor: pointer; font-weight: 750; font-size: .76rem; }
.checkbox-field, .switch-field { display: flex; gap: 10px; align-items: flex-start; }
.checkbox-field input, .switch-field input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--cyan-dark); }
.checkbox-field label, .switch-field label { display: grid; gap: 3px; font-weight: 700; }
.checkbox-field label small, .switch-field label small { font-weight: 450; }
.toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.toggle-card { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 17px; border: 1px solid transparent; border-radius: 10px; font-weight: 780; font-size: .87rem; line-height: 1; cursor: pointer; transition: transform .16s, background .16s, box-shadow .16s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }
.button-primary { background: var(--navy); color: white; box-shadow: 0 9px 20px rgba(7,27,49,.16); }
.button-primary:hover { background: var(--navy-soft); }
.button-accent { background: var(--cyan); color: var(--navy); }
.button-secondary { background: #eef3f8; color: #24405d; border-color: #dbe4ec; }
.button-danger { background: #fff0f0; color: #b53333; border-color: #ffd4d4; }
.button-ghost { background: transparent; border-color: var(--line); color: #36506a; }
.button-small { min-height: 34px; padding: 7px 11px; font-size: .77rem; }
.button-block { width: 100%; min-height: 50px; margin-top: 2px; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.security-note { display: flex; gap: 12px; align-items: center; margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: #eafaf7; }
.security-note span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--cyan); color: var(--navy); font-weight: 900; }
.security-note p { margin: 0; font-size: .8rem; }

.panel-page { display: flex; min-width: 320px; background: var(--canvas); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 272px; display: flex; flex-direction: column; background: var(--navy); color: #d7e4ef; }
.sidebar-brand { min-height: 81px; display: flex; align-items: center; gap: 12px; padding: 18px 23px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand strong { display: block; color: white; font-size: 1.06rem; }
.sidebar-brand small { display: block; margin-top: 2px; color: #8da6bd; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 20px 14px; scrollbar-width: thin; }
.nav-label { margin: 20px 12px 8px; color: #6f8ba3; font-size: .65rem; font-weight: 800; letter-spacing: .14em; }
.nav-label:first-child { margin-top: 0; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 43px; margin: 3px 0; padding: 10px 12px; border-radius: 9px; color: #bfd0df; font-size: .84rem; font-weight: 630; transition: color .16s, background .16s; }
.nav-link:hover { color: white; background: rgba(255,255,255,.055); }
.nav-link.is-active { color: white; background: linear-gradient(90deg, rgba(22,198,191,.19), rgba(22,198,191,.06)); box-shadow: inset 3px 0 0 var(--cyan); }
.nav-icon { width: 21px; color: var(--cyan); text-align: center; font-family: ui-monospace, monospace; font-weight: 800; }
.sidebar-profile { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-profile strong { display: block; overflow: hidden; color: #fff; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-profile small { color: #88a2b8; font-size: .67rem; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg, var(--cyan), #4ce3bc); color: var(--navy); font-weight: 900; }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: #9db1c4; background: rgba(255,255,255,.06); cursor: pointer; }
.panel-shell { width: calc(100% - 272px); min-width: 0; min-height: 100vh; margin-left: 272px; background: var(--canvas); }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 81px; display: flex; align-items: center; gap: 20px; padding: 13px clamp(20px, 4vw, 48px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(14px); }
.topbar-context { min-width: 180px; }
.topbar-context span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; }
.topbar-context strong { display: block; max-width: 360px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.station-switcher { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.station-switcher label { color: var(--muted); font-size: .73rem; font-weight: 700; }
.station-switcher select { width: 210px; padding: 8px 34px 8px 10px; font-size: .79rem; }
.menu-button { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.main-content { width: min(1480px, 100%); min-width: 0; margin: 0 auto; padding: 34px clamp(20px, 4vw, 48px) 60px; }
.sidebar-backdrop { display: none; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-heading h1 { margin: 5px 0 6px; font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.page-heading p { max-width: 750px; margin: 0; color: var(--muted); line-height: 1.6; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.panel-card { border: 1px solid #e2e8ef; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-card + .panel-card { margin-top: 22px; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 24px; border-bottom: 1px solid #e8edf2; }
.card-header h2, .card-header h3 { margin: 0 0 5px; font-size: 1.04rem; }
.card-header p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.card-body { padding: 24px; }
.card-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid #e8edf2; background: #fbfcfd; border-radius: 0 0 var(--radius) var(--radius); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { position: relative; overflow: hidden; min-height: 144px; padding: 21px; border: 1px solid #e2e9f0; border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgba(20,45,70,.055); }
.stat-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -48px; bottom: -48px; border-radius: 50%; background: var(--stat-color, var(--cyan)); opacity: .12; }
.stat-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 10px; color: var(--stat-color, var(--cyan-dark)); background: color-mix(in srgb, var(--stat-color, var(--cyan)) 13%, white); font-weight: 900; }
.stat-card strong { display: block; font-size: 1.75rem; letter-spacing: -.04em; }
.stat-card span { color: var(--muted); font-size: .78rem; }
.stat-card.blue { --stat-color: var(--blue); }
.stat-card.orange { --stat-color: var(--orange); }
.stat-card.green { --stat-color: var(--green); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 22px; align-items: start; }
.content-grid > * { min-width: 0; }
.dashboard-secondary { margin-top: 22px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.quick-link { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; transition: border .16s, transform .16s; }
.quick-link:hover { border-color: var(--cyan); transform: translateY(-1px); }
.quick-link span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: #e9fbf9; color: var(--cyan-dark); font-weight: 900; }
.quick-link strong { display: block; font-size: .84rem; }
.quick-link small { color: var(--muted); font-size: .7rem; }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 14px; color: #64778b; background: #f7f9fb; font-size: .68rem; text-align: left; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.data-table td { padding: 14px; border-top: 1px solid #e9eef3; font-size: .79rem; vertical-align: middle; }
.data-table tbody tr:hover { background: #fbfdfd; }
.table-primary { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.table-logo { display: grid; place-items: center; flex: 0 0 38px; height: 38px; overflow: hidden; border-radius: 10px; background: #eaf4f8; color: var(--cyan-dark); font-weight: 900; }
.table-logo img { width: 100%; height: 100%; object-fit: cover; }
.table-primary strong { display: block; font-size: .8rem; }
.table-primary small { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; }
.contract-table-date { display: block; margin-top: 5px; font-size: .68rem; white-space: nowrap; }
.table-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.table-actions form { display: inline-flex; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: .67rem; font-weight: 780; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { color: #087b59; background: #e4f7f0; }
.badge-muted { color: #66778a; background: #eef2f6; }
.badge-warning { color: #a56608; background: #fff3d8; }
.badge-error { color: #b43838; background: #ffe8e8; }
.alert { margin-bottom: 20px; padding: 14px 17px; border: 1px solid; border-radius: 11px; font-size: .82rem; line-height: 1.5; }
.alert-success { color: #086b4f; border-color: #bde9da; background: #eafaf4; }
.alert-warning { color: #86570d; border-color: #f2d793; background: #fff8e6; }
.alert-error { color: #9d3030; border-color: #f2bebe; background: #fff0f0; }
.service-expiry-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px; margin-bottom: 24px; padding: 18px 20px; border: 1px solid #efcf83; border-left: 4px solid #db9415; border-radius: 14px; color: #65460d; background: linear-gradient(115deg, #fff9e9, #fffdf7); box-shadow: 0 10px 28px rgba(126,83,10,.08); }
.service-expiry-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: #d99317; box-shadow: 0 8px 18px rgba(190,123,12,.18); font-size: 1.18rem; font-weight: 900; }
.service-expiry-copy { min-width: 0; }
.service-expiry-copy > span { display: block; margin-bottom: 3px; color: #a06608; font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.service-expiry-copy h2 { margin: 0 0 4px; font-size: 1rem; letter-spacing: -.01em; }
.service-expiry-copy p { margin: 0; color: #765a28; font-size: .78rem; line-height: 1.5; }
.service-expiry-meta { min-width: 142px; padding-left: 18px; border-left: 1px solid rgba(151,100,13,.18); text-align: right; }
.service-expiry-meta span, .service-expiry-meta time { display: block; }
.service-expiry-meta span { color: #896b37; font-size: .63rem; }
.service-expiry-meta time { margin: 3px 0 7px; font-size: .83rem; font-weight: 800; }
.service-expiry-meta strong { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #8b5906; background: #ffe9b7; font-size: .68rem; white-space: nowrap; }
.service-expiry-alert.is-critical { border-color: #efb38f; border-left-color: #e06724; color: #77350f; background: linear-gradient(115deg, #fff4e9, #fffaf6); }
.service-expiry-alert.is-critical .service-expiry-icon { background: #df6523; }
.service-expiry-alert.is-critical .service-expiry-copy > span, .service-expiry-alert.is-critical .service-expiry-meta strong { color: #a43f0a; }
.service-expiry-alert.is-critical .service-expiry-meta strong { background: #ffddc8; }
.service-expiry-alert.is-expired { border-color: #eeb4b4; border-left-color: #cf4141; color: #722727; background: linear-gradient(115deg, #fff0f0, #fff9f9); }
.service-expiry-alert.is-expired .service-expiry-icon { background: #c94343; }
.service-expiry-alert.is-expired .service-expiry-copy > span, .service-expiry-alert.is-expired .service-expiry-meta strong { color: #a52f2f; }
.service-expiry-alert.is-expired .service-expiry-copy p { color: #7f4949; }
.service-expiry-alert.is-expired .service-expiry-meta strong { background: #ffdede; }
.info-strip { display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; border: 1px solid #cbece8; border-radius: 12px; background: #effbf9; color: #265c5a; font-size: .8rem; line-height: 1.55; }
.info-strip strong { color: #0b7772; }
.danger-strip { border-color: #f2c4c4; background: #fff3f3; color: #824242; }
.code-box { position: relative; }
.code-box pre { max-height: 590px; overflow: auto; margin: 0; padding: 22px; border-radius: 12px; background: #071b31; color: #d7f5ef; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.endpoint { display: flex; gap: 9px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.endpoint code { flex: 1; overflow: hidden; color: #23506d; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.image-preview { width: 112px; height: 88px; overflow: hidden; display: grid; place-items: center; border: 1px dashed #c8d4df; border-radius: 11px; background: #f5f8fa; color: #7a8da0; font-size: .68rem; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-field { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.form-section-title { grid-column: 1 / -1; margin: 6px 0 -3px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.divider { height: 1px; margin: 4px 0; background: var(--line); }
.empty-state { padding: 50px 24px; text-align: center; }
.empty-state-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 17px; background: #eafaf7; color: var(--cyan-dark); font-size: 1.6rem; font-weight: 900; }
.empty-state h3 { margin: 0 0 7px; }
.empty-state p { max-width: 460px; margin: 0 auto 19px; color: var(--muted); line-height: 1.6; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.permission-card { display: flex; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.permission-card input { width: 19px; height: 19px; accent-color: var(--cyan-dark); }
.permission-card strong { display: block; margin-bottom: 3px; font-size: .84rem; }
.permission-card small { color: var(--muted); line-height: 1.45; }
.provider-status { display: flex; gap: 12px; flex-wrap: wrap; }
.status-box { flex: 1 1 210px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.status-box strong { display: block; margin-bottom: 5px; }
.status-box p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.error-card { text-align: center; }
.error-code { color: var(--cyan-dark); font-size: 5.8rem; font-weight: 900; letter-spacing: -.08em; line-height: .9; }
.error-card .button { margin-top: 12px; }
.text-muted { color: var(--muted); }
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }

.contract-panel { margin-bottom: 22px; border-top: 3px solid var(--orange); }
.contract-list { display: grid; }
.contract-row { display: grid; grid-template-columns: minmax(220px, 1fr) 140px 130px auto; align-items: center; gap: 18px; padding: 16px 22px; border-top: 1px solid #e9eef3; }
.contract-row:first-child { border-top: 0; }
.contract-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.contract-identity strong, .contract-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-identity strong { font-size: .84rem; }
.contract-identity small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.contract-date span, .contract-days span { display: block; color: var(--muted); font-size: .68rem; }
.contract-date strong { display: block; margin-top: 3px; font-size: .82rem; }
.contract-days { display: flex; align-items: baseline; gap: 6px; color: #9a5e05; }
.contract-days strong { font-size: 1.18rem; }
.compact-empty { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 28px 22px; }
.compact-empty > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px; color: var(--green); background: #e4f7f0; font-weight: 900; }
.compact-empty strong { font-size: .86rem; }
.compact-empty p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.quick-grid-single { grid-template-columns: 1fr; }
.protected-card .card-body > p { margin: 14px 0 18px; font-size: .78rem; line-height: 1.6; }
.protected-value { padding: 15px 17px; border: 1px solid #d8e2eb; border-radius: 10px; color: #52677c; background: #f3f6f9; font: 800 1.05rem/1 ui-monospace, monospace; letter-spacing: .12em; }

.station-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; margin-bottom: 20px; padding: clamp(24px, 4vw, 38px); border-radius: 20px; color: white; background: radial-gradient(circle at 82% 8%, rgba(22,198,191,.24), transparent 31%), linear-gradient(135deg, #071b31, #0b3153); box-shadow: 0 18px 44px rgba(7,27,49,.18); }
.station-hero::after { content: ""; position: absolute; right: -90px; bottom: -150px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 54px rgba(255,255,255,.025); pointer-events: none; }
.station-identity { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; min-width: 0; }
.station-logo { display: grid; place-items: center; flex: 0 0 82px; height: 82px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: var(--navy); background: white; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.station-logo img { width: 100%; height: 100%; object-fit: cover; }
.station-logo span { font-size: 2rem; font-weight: 900; }
.station-identity h1 { overflow: hidden; margin: 5px 0 10px; font-size: clamp(1.8rem, 4vw, 2.75rem); letter-spacing: -.045em; white-space: nowrap; text-overflow: ellipsis; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.station-hero-actions { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 9px; }
.station-hero-actions .button-secondary { color: white; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); }
.station-hero-actions .button-primary { color: var(--navy); background: var(--cyan); }
.station-progress { position: relative; z-index: 1; grid-column: 1 / -1; }
.station-progress > div:first-child { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 9px; color: #c6d8e6; font-size: .74rem; }
.station-progress strong { color: white; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #47dfb8); }
.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 20px; }
.overview-metrics article { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 17px; border: 1px solid #e1e8ef; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(20,45,70,.045); }
.overview-metrics strong, .overview-metrics small { display: block; }
.overview-metrics strong { overflow: hidden; font-size: .9rem; white-space: nowrap; text-overflow: ellipsis; }
.overview-metrics small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.metric-symbol { display: grid; place-items: center; flex: 0 0 39px; height: 39px; border-radius: 11px; color: var(--cyan-dark); background: #e9fbf9; font-weight: 900; }
.metric-symbol.blue { color: #1d62d6; background: #eaf1ff; }
.metric-symbol.green { color: var(--green); background: #e7f7f1; }
.metric-symbol.orange { color: #a56608; background: #fff3dc; }
.overview-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 20px; align-items: start; }
.overview-layout > *, .overview-side { min-width: 0; }
.overview-side { display: grid; gap: 20px; }
.overview-side .panel-card + .panel-card { margin-top: 0; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.module-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdff; transition: transform .16s, border-color .16s, box-shadow .16s; }
.module-card:hover { transform: translateY(-2px); border-color: #a5ddd9; box-shadow: 0 10px 24px rgba(15,55,75,.07); }
.module-card > span { display: grid; place-items: center; height: 42px; border-radius: 12px; color: var(--cyan-dark); background: #e9fbf9; font-weight: 900; }
.module-card strong, .module-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-card strong { font-size: .82rem; }
.module-card small { margin-top: 4px; color: var(--muted); font-size: .69rem; }
.module-card b { color: #8ba0b3; font-size: 1rem; }
.check-list { display: grid; padding: 8px 22px 18px; }
.check-list > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf1f4; color: #718396; }
.check-list > div:last-child { border-bottom: 0; }
.check-list span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #eef2f5; font-size: .72rem; }
.check-list strong { font-size: .76rem; }
.check-list .is-ready { color: #16785d; }
.check-list .is-ready span { background: #e2f6ef; }
.contract-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.contract-note span { color: var(--muted); font-size: .72rem; }
.contract-note strong { font-size: .8rem; }

@media (max-width: 1120px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
    .overview-layout { grid-template-columns: 1fr; }
    .overview-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contract-row { grid-template-columns: minmax(220px, 1fr) 130px 120px auto; gap: 12px; }
    .station-switcher label { display: none; }
}

@media (max-width: 860px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { min-height: 310px; padding: 42px 30px; }
    .auth-brand h1 { max-width: 560px; font-size: 2.6rem; }
    .auth-brand > p:not(.eyebrow) { margin-bottom: 0; }
    .signal-art { display: none; }
    .auth-content { padding: 48px 24px; }
    .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
    body.menu-open .sidebar { transform: translateX(0); }
    body.menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(3,15,27,.5); }
    .panel-shell { width: 100%; margin-left: 0; }
    .menu-button { display: inline-grid; place-items: center; }
    .topbar { padding: 13px 20px; }
    .station-switcher { margin-left: auto; }
    .station-switcher select { width: 150px; }
    .station-switcher .button { display: none; }
    .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contract-row { grid-template-columns: minmax(0, 1fr) auto; }
    .contract-date, .contract-days { grid-row: 2; }
}

@media (max-width: 650px) {
    .main-content { padding: 24px 15px 45px; }
    .service-expiry-alert { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 16px; }
    .service-expiry-icon { width: 38px; height: 38px; }
    .service-expiry-meta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; min-width: 0; padding: 13px 0 0; border-top: 1px solid rgba(151,100,13,.18); border-left: 0; text-align: left; }
    .service-expiry-meta span { grid-column: 1; }
    .service-expiry-meta time { grid-column: 1; margin: 0; }
    .service-expiry-meta strong { grid-column: 2; grid-row: 1 / 3; }
    .topbar-context span { display: none; }
    .topbar-context strong { max-width: 140px; font-size: .84rem; }
    .station-switcher { max-width: 135px; }
    .station-switcher select { width: 135px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .heading-actions, .heading-actions .button { width: 100%; }
    .stats-grid, .form-grid, .toggle-grid, .quick-grid, .permission-grid { grid-template-columns: 1fr; }
    .station-hero { grid-template-columns: 1fr; }
    .station-hero-actions { flex-wrap: wrap; }
    .station-progress { grid-column: 1; }
    .overview-metrics, .module-grid, .overview-side { grid-template-columns: 1fr; }
    .contract-row { grid-template-columns: 1fr; }
    .contract-date, .contract-days { grid-row: auto; }
    .contract-row .button { width: 100%; }
    .card-header { flex-direction: column; padding: 19px; }
    .card-body { padding: 19px; }
    .card-footer { padding: 15px 19px; }
    .media-field { grid-template-columns: 1fr; }
    .image-preview { width: 100%; height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}