:root {
    color-scheme: light;
    --navy-950: #07152a;
    --navy-900: #0a1d38;
    --navy-800: #10294b;
    --blue-700: #075ccf;
    --blue-600: #0874ed;
    --blue-500: #1590ff;
    --cyan-400: #30c6ff;
    --slate-900: #172033;
    --slate-700: #46536a;
    --slate-500: #76839a;
    --slate-300: #cfd7e4;
    --slate-200: #e5eaf1;
    --slate-100: #f3f6fa;
    --white: #fff;
    --green: #16875d;
    --red: #c43d4d;
    --orange: #d66a18;
    --violet: #6955d9;
    --shadow-lg: 0 30px 80px rgba(9, 28, 55, .16);
    --shadow-sm: 0 10px 30px rgba(16, 41, 75, .08);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--slate-900); background: var(--slate-100); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.auth-page { background: #edf3fa; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(480px, .95fr); }
.auth-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(44px, 7vw, 96px); color: var(--white); background: linear-gradient(145deg, #061326 0%, #0b2a53 58%, #075ccf 130%); }
.auth-visual::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom right, black, transparent 72%); }
.auth-visual__content, .auth-visual__footer { position: relative; z-index: 2; }
.auth-visual__content { max-width: 690px; margin: auto 0; }
.auth-visual h1 { max-width: 650px; margin: 18px 0; font-size: clamp(42px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.045em; }
.auth-visual p { max-width: 560px; margin: 0; color: #c9def7; font-size: 19px; line-height: 1.7; }
.auth-capabilities { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.auth-capabilities span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: #e7f3ff; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); }
.auth-visual__footer { color: #8fb7e5; font-size: 13px; letter-spacing: .08em; }
.auth-visual__glow { position: absolute; border-radius: 50%; filter: blur(4px); }
.auth-visual__glow--one { width: 380px; height: 380px; right: -130px; top: -120px; background: radial-gradient(circle, rgba(34, 168, 255, .42), transparent 68%); }
.auth-visual__glow--two { width: 480px; height: 480px; left: -180px; bottom: -200px; background: radial-gradient(circle, rgba(74, 91, 221, .3), transparent 68%); }
.auth-form-panel { display: grid; place-items: center; padding: 42px; background: linear-gradient(160deg, #f7faff, #eaf1f8); }
.auth-form-card { width: min(100%, 470px); padding: 44px; border: 1px solid rgba(164, 181, 204, .38); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-lg); }
.auth-logo { display: block; width: min(100%, 300px); height: auto; margin-bottom: 42px; }
.auth-heading h2 { margin: 8px 0 10px; font-size: 30px; line-height: 1.2; letter-spacing: -.025em; }
.auth-heading p { margin: 0 0 28px; color: var(--slate-500); line-height: 1.55; }
.eyebrow { color: var(--blue-700); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.eyebrow--light { color: var(--cyan-400); }
.auth-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field span { color: var(--slate-700); font-size: 13px; font-weight: 700; }
.field input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid var(--slate-300); border-radius: 12px; outline: none; background: #fbfdff; color: var(--slate-900); transition: border-color .18s, box-shadow .18s, background .18s; }
.field input:focus { border-color: var(--blue-500); background: var(--white); box-shadow: 0 0 0 4px rgba(21, 144, 255, .12); }
.check-field { display: flex; align-items: center; gap: 10px; color: var(--slate-700); font-size: 13px; }
.check-field input { width: 17px; height: 17px; accent-color: var(--blue-600); }
.button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; font-weight: 700; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: var(--white); background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); box-shadow: 0 12px 24px rgba(8, 116, 237, .22); }
.button--wide { width: 100%; min-height: 52px; margin-top: 4px; }
.button--ghost { border: 1px solid var(--slate-200); background: var(--white); color: var(--slate-700); }
.alert { margin-bottom: 20px; padding: 13px 15px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.alert--danger { border: 1px solid #f0c1c6; background: #fff1f2; color: #9f2836; }
.alert--success { border: 1px solid #aee1cd; background: #eefbf6; color: #176c4d; }
.auth-security-note { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--slate-200); color: var(--slate-500); font-size: 12px; line-height: 1.55; text-align: center; }

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 20px; color: #d8e7f7; background: linear-gradient(180deg, var(--navy-950), #0a2343); }
.sidebar__brand { display: grid; gap: 10px; padding: 6px 8px 30px; color: var(--white); text-decoration: none; }
.sidebar__brand img { width: 205px; max-width: 100%; filter: brightness(0) invert(1); opacity: .96; }
.sidebar__brand span { color: #82a9d4; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sidebar__nav { display: grid; gap: 6px; }
.nav-item { min-height: 48px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 11px; color: #b9cde4; text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-item--active { color: var(--white); background: linear-gradient(90deg, rgba(21, 144, 255, .3), rgba(21, 144, 255, .1)); box-shadow: inset 3px 0 var(--cyan-400); }
.nav-item--disabled { color: #718ba9; }
.nav-item small { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.nav-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }
.sidebar__footer { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 17px 10px 4px; border-top: 1px solid rgba(255,255,255,.08); color: #8ba9ca; font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #31d393; box-shadow: 0 0 0 4px rgba(49,211,147,.12); }
.admin-main { min-width: 0; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 34px; border-bottom: 1px solid var(--slate-200); background: rgba(255,255,255,.9); backdrop-filter: blur(12px); }
.topbar > div:first-child { display: grid; gap: 2px; }
.topbar__context { color: var(--slate-500); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.topbar strong { font-size: 16px; }
.topbar__account { display: flex; align-items: center; gap: 11px; }
.account-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--white); background: linear-gradient(135deg, var(--blue-700), var(--cyan-400)); font-weight: 800; }
.account-copy { display: grid; min-width: 130px; }
.account-copy strong { font-size: 13px; }
.account-copy small { color: var(--slate-500); font-size: 11px; }
.content { padding: 34px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-intro h1 { margin: 7px 0 7px; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.035em; }
.page-intro p { margin: 0; color: var(--slate-500); }
.date-chip { padding: 10px 14px; border: 1px solid var(--slate-200); border-radius: 999px; background: var(--white); color: var(--slate-700); font-size: 12px; font-weight: 700; box-shadow: var(--shadow-sm); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { min-height: 122px; display: flex; align-items: center; gap: 17px; padding: 22px; border: 1px solid var(--slate-200); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.stat-card__icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; font-size: 13px; font-weight: 900; }
.stat-card__icon--blue { color: #075ccf; background: #eaf3ff; }
.stat-card__icon--violet { color: var(--violet); background: #f0edff; }
.stat-card__icon--green { color: var(--green); background: #e7f8f1; }
.stat-card__icon--orange { color: var(--orange); background: #fff0e4; }
.stat-card div { display: grid; gap: 4px; }
.stat-card small { color: var(--slate-500); font-size: 12px; }
.stat-card strong { font-size: 28px; letter-spacing: -.03em; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr); gap: 20px; }
.panel { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.panel__header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--slate-200); }
.panel__header h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.015em; }
.live-badge { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: var(--green); background: #eefaf5; font-size: 11px; font-weight: 700; }
.live-badge span { width: 7px; height: 7px; border-radius: 50%; background: #2ac389; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 22px; border-bottom: 1px solid var(--slate-100); text-align: left; white-space: nowrap; }
th { color: var(--slate-500); background: #fbfcfe; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
td { color: var(--slate-700); font-size: 13px; }
td strong { color: var(--slate-900); }
.result-badge { display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.result-badge--ok { color: var(--green); background: #eaf9f3; }
.result-badge--failed { color: var(--red); background: #fff0f2; }
.empty-state { padding: 42px; color: var(--slate-500); text-align: center; }
.roadmap { display: grid; gap: 0; margin: 0; padding: 18px 22px 24px; list-style: none; }
.roadmap__item { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; min-height: 74px; }
.roadmap__item::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 1px; background: var(--slate-200); }
.roadmap__item:last-child::after { display: none; }
.roadmap__item > span { width: 33px; height: 33px; display: grid; place-items: center; z-index: 1; border: 1px solid var(--slate-300); border-radius: 10px; color: var(--slate-500); background: var(--white); font-size: 11px; font-weight: 800; }
.roadmap__item--done > span { border-color: var(--blue-600); color: var(--white); background: var(--blue-600); }
.roadmap__item div { display: grid; align-content: start; gap: 4px; padding-top: 2px; }
.roadmap__item strong { font-size: 13px; }
.roadmap__item small { color: var(--slate-500); font-size: 11px; line-height: 1.4; }

.text-link, .back-link { color: var(--blue-700); font-weight: 700; text-decoration: none; }
.back-link { display: inline-block; margin-bottom: 8px; font-size: 13px; }
.button--small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.button--danger { color: var(--red); background: #fff0f2; border: 1px solid #f0c1c6; }
.stat-grid--compact .stat-card { min-height: 92px; }
.product-tabs { display: flex; gap: 8px; margin: -8px 0 22px; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--slate-200); border-radius: 12px; background: var(--white); }
.product-tabs a { padding: 10px 15px; border-radius: 8px; color: var(--slate-700); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.product-tabs a.is-active { color: var(--white); background: var(--blue-700); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-card { display: flex; flex-direction: column; min-height: 330px; padding: 22px; border: 1px solid var(--slate-200); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.product-card header, .product-card footer, .release-heading, .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-card h2 { margin: 6px 0 0; font-size: 19px; }
.product-card > p { min-height: 44px; color: var(--slate-500); font-size: 13px; line-height: 1.55; }
.product-card dl { display: grid; gap: 10px; margin: 10px 0 22px; }
.product-card dl div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); }
.product-card dt { color: var(--slate-500); font-size: 11px; }
.product-card dd { margin: 0; max-width: 65%; overflow: hidden; color: var(--slate-700); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.product-card footer { justify-content: flex-start; margin-top: auto; }
.product-kind { color: var(--blue-700); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.status-pill { display: inline-flex; padding: 6px 9px; border-radius: 999px; color: var(--slate-500); background: var(--slate-100); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.status-pill--active { color: var(--green); background: #eaf9f3; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .75fr); gap: 20px; }
.form-panel { overflow: visible; margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 22px; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea, td select, .table-input { width: 100%; padding: 11px 13px; border: 1px solid var(--slate-300); border-radius: 10px; outline: none; background: #fbfdff; color: var(--slate-900); }
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(21, 144, 255, .1); }
.detail-list { display: grid; gap: 0; padding: 8px 22px 22px; }
.detail-list div { display: grid; gap: 7px; padding: 15px 0; border-bottom: 1px solid var(--slate-100); }
.detail-list small { color: var(--slate-500); font-weight: 700; }
.detail-list a { color: var(--blue-700); font-weight: 700; text-decoration: none; }
.detail-list code, .license-key { padding: 7px 9px; border-radius: 7px; background: var(--slate-100); color: var(--navy-800); font-size: 11px; overflow-wrap: anywhere; }
.compact-form { margin-bottom: 20px; }
.inline-form { display: flex; align-items: end; gap: 14px; padding: 20px 22px; }
.inline-form .field { min-width: 210px; }
.table-input { min-width: 125px; padding: 8px 9px; }
.actions { justify-content: flex-start; }
.pagination { padding: 16px 22px; }
.pagination nav > div:first-child { display: none; }
.pagination nav > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pagination nav span, .pagination nav a { color: var(--slate-700); font-size: 12px; }
.pagination nav a { text-decoration: none; }
.pagination svg { width: 18px; height: 18px; }
.release-list { display: grid; gap: 18px; }
.release-card { overflow: visible; }
.release-heading h2 { margin: 8px 0 0; font-size: 18px; }
.release-heading small { color: var(--slate-500); }
.activity-list { display: grid; padding: 8px 22px 20px; }
.activity-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--slate-100); }
.activity-item div { display: grid; gap: 3px; }
.activity-item strong { font-size: 13px; }
.activity-item small { color: var(--slate-500); font-size: 11px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-bar a { padding: 8px 12px; border: 1px solid var(--slate-200); border-radius: 999px; color: var(--slate-700); background: var(--white); font-size: 12px; font-weight: 700; text-decoration: none; }
.filter-bar a.is-active { border-color: var(--blue-700); color: var(--white); background: var(--blue-700); }
.status-form { display: flex; align-items: center; gap: 8px; }
.status-form select { min-width: 110px; padding: 8px; border: 1px solid var(--slate-300); border-radius: 8px; background: var(--white); }

@media (max-width: 1100px) {
    .auth-shell { grid-template-columns: .85fr 1.15fr; }
    .auth-visual { padding: 48px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .two-column { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .auth-form-panel { min-height: 100vh; padding: 22px; }
    .auth-form-card { padding: 30px 24px; }
    .admin-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; padding: 18px; }
    .sidebar__brand { padding-bottom: 16px; }
    .sidebar__brand img { width: 175px; }
    .sidebar__nav { grid-template-columns: repeat(2, minmax(118px, 1fr)); overflow-x: auto; }
    .sidebar__footer { display: none; }
    .nav-item { grid-template-columns: 26px 1fr; }
    .nav-item small { display: none; }
    .topbar { padding: 12px 18px; }
    .account-copy { display: none; }
    .content { padding: 24px 18px; }
    .product-grid { grid-template-columns: 1fr; }
    .inline-form { align-items: stretch; flex-direction: column; }
}

@media (max-width: 570px) {
    .topbar > div:first-child { display: none; }
    .topbar { justify-content: flex-end; }
    .page-intro { align-items: flex-start; flex-direction: column; }
    .stat-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 98px; }
    .panel__header { align-items: flex-start; }
    .live-badge { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .field--full { grid-column: auto; }
}