:root {
  color-scheme: light;
  --ink: #172037;
  --muted: #737d92;
  --line: #e7eaf0;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --blue: #4158e8;
  --blue-deep: #2c3fae;
  --violet: #7856dc;
  --green: #16a46c;
  --orange: #e98742;
  --red: #d84d65;
  --shadow: 0 14px 40px rgba(26, 36, 73, 0.08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.muted { color: var(--muted); }
.eyebrow { display: inline-block; color: var(--blue); font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .16em; }
.eyebrow.light { color: rgba(255,255,255,.68); }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(440px, .95fr); }
.login-story { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 48px clamp(48px, 7vw, 112px); color: #fff; background: linear-gradient(145deg, #142661 0%, #243ba1 52%, #4958cb 100%); }
.login-story::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom right, #000, transparent 72%); }
.login-story::after { content: ""; position: absolute; width: 520px; height: 520px; right: -240px; top: 50%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 64px rgba(255,255,255,.035), 0 0 0 128px rgba(255,255,255,.025); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.brand-light { color: #fff; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(145deg, #6d79ff, #3e54e4); border-radius: 10px; box-shadow: 0 7px 18px rgba(52,68,194,.28); }
.brand-mark svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.story-copy { margin: auto 0; max-width: 630px; }
.story-copy h1 { margin: 24px 0 22px; font-size: clamp(44px, 5.2vw, 76px); line-height: 1.13; letter-spacing: -.055em; }
.story-copy p { max-width: 500px; margin: 0; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.85; }
.story-proof { display: flex; align-items: center; gap: 18px; }
.proof-stack { display: flex; padding-left: 8px; }
.proof-stack span { width: 36px; height: 36px; margin-left: -8px; display: grid; place-items: center; border: 2px solid #3146a4; border-radius: 50%; color: #283775; background: #eef1ff; font-size: 11px; font-weight: 800; }
.story-proof p { margin: 0; color: rgba(255,255,255,.57); font-size: 12px; line-height: 1.5; }
.story-proof strong { color: #fff; font-size: 13px; }
.orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.orb-one { width: 240px; height: 240px; right: 12%; top: 17%; background: radial-gradient(circle at 30% 30%, rgba(151,168,255,.28), rgba(84,95,215,.04) 67%); }
.orb-two { width: 160px; height: 160px; left: -70px; bottom: 18%; background: rgba(104,123,255,.14); }

.login-panel { display: grid; place-items: center; padding: 48px; background: #fff; }
.login-card { width: min(420px, 100%); }
.login-card h2 { margin: 15px 0 8px; font-size: 34px; letter-spacing: -.04em; }
.login-card > .muted { margin: 0 0 38px; font-size: 14px; }
.mobile-brand { display: none; }
.field { display: grid; gap: 9px; margin-bottom: 20px; color: #414b60; font-size: 13px; font-weight: 650; }
.field > span:first-child { display: flex; justify-content: space-between; align-items: center; }
.field em { color: #9ba3b3; font-size: 11px; font-style: normal; font-weight: 500; }
.input-wrap, .select-wrap { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within, .select-wrap:focus-within, textarea:focus { border-color: #8793f5; box-shadow: 0 0 0 4px rgba(65,88,232,.09); }
.input-wrap svg { width: 18px; fill: none; stroke: #9aa3b6; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.input-wrap input, .select-wrap select { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
.input-wrap input::placeholder, textarea::placeholder { color: #b0b6c3; }
.icon-button { padding: 5px; border: 0; color: #7d879a; background: none; cursor: pointer; font-size: 12px; }
textarea { width: 100%; resize: vertical; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 17px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button.primary { color: #fff; background: linear-gradient(135deg, #5268ee, #354bd7); box-shadow: 0 8px 20px rgba(62,82,219,.2); }
.button.primary:hover { box-shadow: 0 11px 25px rgba(62,82,219,.3); }
.button.wide { width: 100%; min-height: 50px; margin-top: 8px; justify-content: space-between; padding: 0 20px; }
.button.subtle { border: 1px solid var(--line); background: #fff; }
.button.ghost { color: var(--muted); }
.security-note { margin: 22px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #9aa3b5; font-size: 11px; }
.security-note svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px 1fr; }
.sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; display: flex; flex-direction: column; padding: 27px 18px 18px; border-right: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(18px); }
.sidebar-top { padding: 0 12px 28px; display: flex; align-items: center; justify-content: space-between; }
.mobile-close { display: none; border: 0; background: none; font-size: 26px; }
.nav-list { display: grid; gap: 5px; }
.nav-item { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 13px; padding: 0 13px; border: 0; border-radius: 10px; color: #6e788d; background: none; cursor: pointer; text-align: left; font-size: 13px; font-weight: 650; }
.nav-item:hover { color: var(--ink); background: #f5f7fb; }
.nav-item.active { color: #344bd1; background: #eef1ff; }
.nav-icon { width: 22px; text-align: center; font-size: 18px; line-height: 1; }
.nav-label { margin: 25px 13px 8px; color: #adb4c2; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-foot { margin-top: auto; }
.secure-state { margin: 0 12px 12px; display: flex; align-items: center; gap: 8px; color: #8d96a8; font-size: 10px; }
.secure-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22,164,108,.12); }
.nav-item.logout { border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }

.workspace { min-width: 0; }
.topbar { height: 88px; display: flex; align-items: center; padding: 0 clamp(24px, 4vw, 58px); border-bottom: 1px solid rgba(231,234,240,.8); background: rgba(245,247,251,.82); backdrop-filter: blur(16px); }
.topbar h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.02em; }
.page-kicker { margin: 0; color: #a1a9b8; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.menu-button { display: none; }
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #6c7af3, #4055d8); font-size: 13px; font-weight: 800; }
.user-meta { display: grid; gap: 2px; }
.user-meta strong { font-size: 12px; }
.user-meta span { color: var(--muted); font-size: 10px; }
.page-container { padding: 36px clamp(24px, 4vw, 58px) 64px; }
.page-section { max-width: 1400px; margin: 0 auto; animation: page-in .28s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
.hero-card { position: relative; isolation: isolate; overflow: hidden; min-height: 190px; display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 39px 42px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #263b9d 0%, #394fd0 50%, #5f61d6 100%); box-shadow: 0 18px 42px rgba(50,66,170,.16); }
.hero-card h1 { margin: 13px 0 10px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.hero-card p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; }
.hero-button { position: relative; z-index: 2; flex: 0 0 auto; color: #3245b1; background: #fff; box-shadow: 0 10px 25px rgba(24,34,93,.18); }
.hero-grid { position: absolute; z-index: -1; width: 420px; height: 320px; right: 5%; top: -68px; opacity: .17; transform: perspective(500px) rotateX(57deg) rotateZ(-18deg); background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle, #000 12%, transparent 70%); }
.stats-grid { margin: 22px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.stat-card { padding: 21px 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 5px 18px rgba(30,41,73,.035); }
.stat-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 650; }
.stat-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 800; }
.stat-icon.blue { color: var(--blue); background: #edf0ff; }.stat-icon.violet { color: var(--violet); background: #f3efff; }.stat-icon.green { color: var(--green); background: #ebfaf4; }.stat-icon.orange { color: var(--orange); background: #fff4eb; }
.stat-card > strong { display: block; margin: 17px 0 5px; font-size: 27px; letter-spacing: -.03em; }
.stat-card small { color: #9ba3b2; font-size: 10px; }.stat-card small.positive { color: var(--green); }
.asset-grid { margin-bottom: 22px; display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; }
.asset-panel { min-width: 0; overflow: hidden; }.panel-value { color: var(--blue); font-size: 11px; font-weight: 800; }.danger-value { min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--red); background: #fff0f3; font-size: 11px; font-weight: 800; }
.category-list { min-height: 190px; display: grid; align-content: center; gap: 17px; padding: 22px; }.category-row > div:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }.category-row strong { font-size: 11px; text-transform: capitalize; }.category-row span:last-child { margin-left: auto; color: var(--muted); font-size: 10px; }.category-dot { width: 8px; height: 8px; border-radius: 3px; background: #596de9; }.category-dot.color-1 { background: #8c66db; }.category-dot.color-2 { background: #20ad7a; }.category-dot.color-3 { background: #ef9857; }.category-dot.color-4 { background: #e55e75; }.category-track { height: 5px; overflow: hidden; border-radius: 10px; background: #f0f2f6; }.category-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7080ed, #495ee0); }
.quality-body { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 46px); padding: 20px; }.quality-ring { --score-angle: 0deg; position: relative; width: 112px; height: 112px; flex: 0 0 auto; display: grid; place-content: center; border-radius: 50%; text-align: center; background: conic-gradient(#4f64e5 var(--score-angle), #eceef5 0); }.quality-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }.quality-ring strong, .quality-ring span { position: relative; z-index: 1; }.quality-ring strong { font-size: 20px; }.quality-ring span { margin-top: 3px; color: var(--muted); font-size: 8px; }.quality-legend { display: grid; gap: 10px; }.quality-legend > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }.quality-legend i { width: 7px; height: 7px; border-radius: 50%; }.quality-legend i.good { background: var(--green); }.quality-legend i.warn { background: #e9a33e; }.quality-legend i.bad { background: var(--red); }.quality-legend i.neutral { background: #8a94a8; }.quality-legend strong { margin-left: auto; color: var(--ink); font-size: 10px; }
.attention-list { min-height: 190px; max-height: 244px; overflow-y: auto; padding: 8px 12px; }.attention-row { width: 100%; display: grid; grid-template-columns: 27px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; }.attention-row:hover { background: #faf6f7; }.attention-row > span:nth-child(2) { min-width: 0; }.attention-row strong, .attention-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attention-row strong { color: #465066; font-size: 10px; }.attention-row small { margin-top: 4px; color: #9aa3b3; font-size: 8px; }.attention-row b { color: #b2b8c5; font-size: 11px; }.attention-alert { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--red); background: #fff0f2; font-size: 10px; font-weight: 800; }.inline-empty { margin: auto; color: var(--muted); text-align: center; font-size: 10px; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 6px 24px rgba(29,40,73,.04); }
.panel-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 22px; border-bottom: 1px solid var(--line); }
.panel-head.compact { min-height: 72px; margin: -6px -4px 24px; padding: 0 4px 18px; }
.panel-head h3 { margin: 0 0 5px; font-size: 14px; }.panel-head p { margin: 0; color: var(--muted); font-size: 10px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 13px 18px; color: #99a2b3; background: #fafbfc; text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
td { padding: 16px 18px; border-top: 1px solid #f0f2f6; color: #535d72; white-space: nowrap; }
tbody tr { transition: background .16s; } tbody tr:hover { background: #fbfcff; }
.tag-cell { display: inline-flex; align-items: center; gap: 9px; color: #303b52; font-weight: 700; }.tag-dot { width: 8px; height: 8px; border-radius: 3px; background: #7282ef; box-shadow: 0 0 0 4px #eef0ff; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; }.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status.good { color: #16845c; background: #ecf9f4; }.status.bad { color: #c95c48; background: #fff1ef; }.status.neutral { color: #6e7890; background: #f1f3f7; }
.health { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; }.health::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.health.good { color: var(--green); }.health.bad { color: var(--red); }.health.neutral { color: #9aa3b3; }
.status-stack { display: grid; justify-items: start; gap: 6px; }.owner-cell, .channel-name { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }.owner-cell + small, .channel-name + small, .request-score + small { display: block; margin-top: 4px; color: #9aa3b3; font-size: 9px; }.metric-good { color: var(--green); font-weight: 800; }.outcome { font-size: 9px; font-weight: 750; }.outcome.good { color: var(--green); }.outcome.bad { color: var(--red); }.outcome.neutral { color: #8a93a5; }.remark-cell { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }.request-score { display: block; color: #4f5b72; font-weight: 700; }
.table-link { border: 0; color: var(--blue); background: none; cursor: pointer; font-size: 11px; font-weight: 700; }
.empty-state { padding: 56px 20px; text-align: center; }.empty-state > span { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 12px; color: #7a88e9; background: #f0f2ff; font-size: 21px; }.empty-state h4 { margin: 0 0 5px; }.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
.section-heading { min-height: 94px; display: flex; align-items: start; justify-content: space-between; gap: 30px; }.section-heading h1 { margin: 10px 0 7px; font-size: 30px; letter-spacing: -.04em; }.section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.filter-bar { display: flex; gap: 9px; padding: 16px 20px; border-bottom: 1px solid var(--line); }.search-box { min-width: 260px; max-width: 410px; flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; }.search-box span { color: #929bad; font-size: 19px; }.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-box.uploader-search { min-width: 200px; max-width: 300px; }
.pagination { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.pagination > div { display: flex; align-items: center; gap: 12px; }.page-button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }.page-button:disabled { opacity: .35; cursor: default; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr); gap: 22px; align-items: start; }.form-panel { padding: 28px 30px; }.privacy-pill, .admin-badge { padding: 6px 9px; border-radius: 8px; color: #297f62; background: #eaf8f2; font-size: 10px; font-weight: 800; }
.file-drop { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: -6px 0 22px; border: 1px dashed #cdd3df; border-radius: 11px; color: #667187; background: #fafbfc; cursor: pointer; }.file-drop:hover, .file-drop.dragging { border-color: #7b89eb; background: #f5f6ff; }.file-drop input { display: none; }.drop-icon { margin-bottom: 4px; color: var(--blue); font-size: 20px; }.file-drop strong { font-size: 11px; }.file-drop small { margin-top: 4px; color: #a3aab8; font-size: 9px; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.form-actions > div { color: var(--muted); font-size: 11px; }.form-actions > div strong { color: var(--ink); font-size: 15px; }.form-actions.right { justify-content: flex-end; }
.upload-aside { display: grid; gap: 12px; }.tip-card { display: flex; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.75); }.tip-number { flex: 0 0 auto; color: #a1a8e8; font: 700 11px/1 ui-monospace, monospace; }.tip-card h4 { margin: 0 0 7px; font-size: 12px; }.tip-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.result-card { padding: 20px; border: 1px solid #caebdf; border-radius: 14px; background: #effaf6; }.result-card h4 { margin: 0 0 13px; color: #247457; }.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.result-grid div { padding: 10px; border-radius: 8px; background: rgba(255,255,255,.72); }.result-grid strong { display: block; font-size: 17px; }.result-grid span { color: var(--muted); font-size: 9px; }.result-card p { margin: 13px 0 0; color: #5d756c; font-size: 9px; line-height: 1.5; word-break: break-all; }
.upload-warning { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; padding: 15px 17px; border: 1px solid #f2d9b6; border-radius: 13px; color: #7c572a; background: #fff9ef; }.upload-warning > span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: #a76616; background: #ffedce; font-size: 11px; font-weight: 900; }.upload-warning strong { display: block; margin: 1px 0 4px; font-size: 12px; }.upload-warning p { margin: 0; color: #9a7548; font-size: 10px; line-height: 1.6; }
.upload-panel { overflow: hidden; }.upload-panel-head { min-height: 76px; }.upload-workspace { display: grid; grid-template-columns: minmax(360px, .88fr) minmax(420px, 1.12fr); }.upload-config-column, .upload-keys-column { min-width: 0; padding: 25px 26px; }.upload-config-column { border-right: 1px solid var(--line); background: #fcfcfe; }.upload-keys-column { background: #fff; }.field-help { margin-top: -2px; color: #9ba3b3; font-size: 9px; font-weight: 500; line-height: 1.55; }
.upload-category-field > span:first-child { margin-bottom: 1px; }.category-family-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }.category-family { min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 10px 5px 9px; border: 1px solid var(--line); border-radius: 12px; color: #6a7384; background: #fff; cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .16s; }.category-family:hover { transform: translateY(-1px); }.category-family.active { border-color: var(--family-color); color: var(--family-color); box-shadow: 0 6px 17px color-mix(in srgb, var(--family-color) 20%, transparent); }.category-family > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg, var(--family-color), color-mix(in srgb, var(--family-color) 72%, #fff)); font-size: 11px; font-weight: 850; }.category-family strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }.category-family small { max-width: 100%; overflow: hidden; color: #a0a7b4; font-size: 7px; white-space: nowrap; }
.family-aws { --family-color: #f59d2a; }.family-anthropic { --family-color: #d97757; }.family-openai { --family-color: #10a37f; }.family-azure { --family-color: #0078d4; }.family-google { --family-color: #4285f4; }
.category-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.category-variant { padding: 6px 11px; border: 1px solid #dfe2e8; border-radius: 999px; color: #626c7d; background: #fff; cursor: pointer; font-size: 9px; }.category-variant.active { border-color: var(--family-color); color: #fff; background: var(--family-color); box-shadow: 0 4px 10px color-mix(in srgb, var(--family-color) 24%, transparent); }.category-help { min-height: 48px; margin-top: 10px; padding: 10px 12px; border-radius: 9px; color: #667188; background: #f1f4f9; font-size: 9px; font-weight: 500; line-height: 1.55; }
.tag-preview { display: grid; gap: 6px; margin-top: -7px; padding: 12px 14px; border: 1px solid #dfe4ff; border-radius: 11px; background: #f7f8ff; }.tag-preview > span { color: #7280a4; font-size: 9px; font-weight: 750; }.tag-preview code { overflow-wrap: anywhere; color: #4054cf; font-size: 11px; }.tag-preview small { color: #9ba3b5; font-size: 8px; line-height: 1.45; }
.upload-proxy-field { margin: 20px 0 0; }
.upload-keys-field { margin-bottom: 11px; }.upload-keys-field textarea { min-height: 278px; }.upload-analysis { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }.upload-analysis > span { padding: 5px 8px; border-radius: 7px; color: #7b8495; background: #f1f3f6; font-size: 8px; }.upload-analysis strong { font-size: 9px; }.upload-analysis .analysis-good { color: #1b7b58; background: #eaf8f2; }.upload-analysis .analysis-warn { color: #95621f; background: #fff5e6; }.upload-analysis .analysis-bad { color: #b24859; background: #ffeff2; }.upload-invalid-list { margin: -2px 0 12px; padding: 10px 12px; border-radius: 9px; color: #b24859; background: #fff2f4; font-size: 9px; line-height: 1.65; }
.file-drop.compact-drop { min-height: 64px; flex-direction: row; gap: 11px; margin: 0; }.compact-drop .drop-icon { margin: 0; }.compact-drop > span:last-child { display: grid; gap: 2px; }.compact-drop small { margin: 0; }.upload-submit-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 16px 26px; border-top: 1px solid var(--line); background: #fafbfc; }.upload-submit-row p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }.upload-result { margin: 0 26px 24px; }.result-batches { display: grid; gap: 6px; margin-top: 13px; }.result-batch { display: flex; justify-content: space-between; gap: 14px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.72); }.result-batch code { overflow-wrap: anywhere; color: #2f6854; font-size: 9px; }.result-batch span { flex: 0 0 auto; color: #81978e; font-size: 8px; }.upload-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 15px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.permission-preview { display: flex; gap: 14px; margin: 10px 0 24px; padding: 17px; border: 1px solid #e5e8fb; border-radius: 11px; background: #f7f8ff; }.permission-icon { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #4b60de; background: #e8ebff; }.permission-preview strong { font-size: 11px; }.permission-preview p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.admin-note { position: relative; overflow: hidden; padding: 27px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #273c9a, #4557c8); box-shadow: var(--shadow); }.admin-note > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font: 700 13px Georgia, serif; }.admin-note h3 { margin: 24px 0 12px; }.admin-note p { margin: 0; color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.8; }.admin-badge { color: #5a46aa; background: #f0ecff; }
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 10px; }.toast { min-width: 280px; max-width: 420px; display: flex; gap: 11px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 44px rgba(27,37,69,.16); animation: toast-in .24s ease-out; font-size: 12px; }.toast strong { display: block; margin-bottom: 3px; }.toast span { color: var(--muted); }.toast.success::before { content: "✓"; color: var(--green); font-weight: 800; }.toast.error::before { content: "!"; color: var(--red); font-weight: 800; }@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.drawer-open { overflow: hidden; }.drawer { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }.drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(18,26,51,.38); backdrop-filter: blur(3px); }.drawer-panel { position: relative; width: min(660px, 94vw); height: 100%; overflow-y: auto; background: #f8f9fc; box-shadow: -25px 0 70px rgba(20,29,59,.2); animation: drawer-in .24s ease-out; }.drawer-head { position: sticky; top: 0; z-index: 2; min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }.drawer-head h2 { margin: 8px 0 0; font-size: 20px; letter-spacing: -.03em; }.drawer-close { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 22px; }.drawer-content { padding: 22px 28px 46px; }.drawer-key-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #293d9f, #5261cf); }.drawer-key-card > div:first-child { min-width: 0; }.drawer-key-card span:first-child { display: block; margin-bottom: 7px; color: rgba(255,255,255,.65); font-size: 9px; }.drawer-key-card code { display: block; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 12px; }.drawer-key-card .status { background: rgba(255,255,255,.92); }.drawer-key-card .health.neutral { color: rgba(255,255,255,.7); }.detail-section { margin-top: 18px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.detail-section h3 { margin: 0 0 18px; font-size: 12px; }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 24px; }.detail-item { min-width: 0; }.detail-item.wide { grid-column: 1 / -1; }.detail-item span, .detail-item strong { display: block; }.detail-item span { margin-bottom: 6px; color: #9aa3b3; font-size: 9px; }.detail-item strong { overflow-wrap: anywhere; color: #4a556b; font-size: 10px; line-height: 1.55; }.drawer.hidden { display: none; }@keyframes drawer-in { from { transform: translateX(30px); opacity: .6; } }

.key-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.key-summary-grid article { padding: 17px 20px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.84); }
.key-summary-grid span, .key-summary-grid strong { display: block; }
.key-summary-grid span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.key-summary-grid strong { margin-top: 9px; font-size: 20px; letter-spacing: -.03em; }
.directory-tabs { display: flex; gap: 5px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.directory-tab { padding: 9px 14px; border: 0; border-radius: 9px; color: #7e8799; background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.directory-tab.active { color: #354bd0; background: #e9edff; box-shadow: inset 0 0 0 1px #dce2ff; }
.tag-summary-toolbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.tag-group-pill { display: inline-flex; padding: 6px 10px; border-radius: 8px; color: #bd3a77; background: #fff0f6; font-weight: 750; }
.key-count { color: #2588ed; font-size: 17px; }
.upload-destination, .availability-counts { display: flex; flex-wrap: wrap; gap: 5px; }
.route-chip, .availability-chip { display: inline-flex; padding: 5px 8px; border-radius: 7px; font-size: 9px; font-weight: 750; }
.route-chip.submitted { color: #2875cf; background: #eaf4ff; }.route-chip.added { color: #3b941e; background: #f0fae9; }
.route-chip.skipped { color: #9b661e; background: #fff5e4; }.route-chip.invalid, .route-chip.failed { color: #b24859; background: #ffeff2; }
.availability-chip.enabled { color: #2f901d; background: #f2fbe9; }.availability-chip.disabled { color: #626b78; background: #f2f3f5; }
.manage-tag-button { min-height: 32px; padding: 0 11px; white-space: nowrap; }
.metric-neutral { color: #7b8599; font-weight: 750; }.metric-bad { color: var(--red); font-weight: 750; }
.channel-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.date-range-filter, .filter-select { min-height: 42px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.date-range-filter { gap: 7px; padding: 0 11px; color: #a0a8b6; }.date-range-filter input { width: 126px; border: 0; outline: 0; color: #5b6577; background: transparent; font-size: 10px; }
.filter-select { min-width: 132px; padding: 0 11px; }.filter-select select { width: 100%; border: 0; outline: 0; color: #5b6577; background: transparent; font-size: 11px; }
.search-box.channel-keyword { min-height: 42px; min-width: 230px; max-width: 340px; }
.channel-list-table { min-width: 1740px; }.channel-list-table td { vertical-align: top; }
.channel-id { color: #344158; font-weight: 750; }.channel-group { display: inline-flex; padding: 5px 8px; border-radius: 6px; color: #59616e; background: #f3f4f6; font-size: 9px; font-weight: 700; }
.tag-group-pill.compact { padding: 5px 8px; font-size: 9px; }.channel-category { display: inline-flex; padding: 5px 8px; border-radius: 6px; font-size: 9px; font-weight: 750; }.channel-category.aws { color: #c27813; background: #fff5e4; }.channel-category.aws-claude { color: #3372bd; background: #edf5ff; }.channel-category.anthropic { color: #7851b8; background: #f5efff; }.channel-category.default { color: #687286; background: #f1f3f6; }
.boost-switch { position: relative; width: 30px; height: 18px; display: inline-flex; border-radius: 999px; background: #d8dce4; box-shadow: inset 0 0 0 1px rgba(53,66,90,.08); }.boost-switch i { position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(35,44,64,.2); transition: transform .16s; }.boost-switch.active { background: #5b9ef3; }.boost-switch.active i { transform: translateX(12px); }
.channel-key-cell { display: grid; justify-items: start; gap: 5px; }.channel-key-cell code { color: #465064; font-size: 9px; }.aggregate-key { padding: 4px 6px; border-radius: 6px; color: #7c4bbb; background: #f7efff; font-size: 8px; font-weight: 750; }
.channel-status-cell { min-width: 150px; white-space: normal; }.channel-status-stack { display: grid; justify-items: start; gap: 5px; }.channel-status-stack small { max-width: 145px; color: #9aa2af; font-size: 8px; line-height: 1.45; }.channel-status-token { display: inline-flex; max-width: 150px; padding: 4px 7px; overflow: hidden; border-radius: 6px; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 750; }.channel-status-token.enabled { color: #2f901d; background: #f0fae9; }.channel-status-token.disabled, .channel-status-token.dead { color: #c74757; background: #ffeff2; }.channel-status-token.auto-disabled, .channel-status-token.limited { color: #c47416; background: #fff4de; }.channel-status-token.deleted, .channel-status-token.unknown, .channel-status-token.source { color: #717989; background: #f1f2f4; }.channel-status-token.inventory, .channel-status-token.frozen { color: #3978c8; background: #ebf4ff; }.channel-status-token.priority { color: #b17813; background: #fff6d8; }
.onboard-regions { min-width: 175px; display: flex; flex-wrap: wrap; gap: 5px; }.onboard-regions span, .onboard-state { display: inline-flex; padding: 4px 7px; border-radius: 6px; font-size: 8px; font-weight: 750; }.onboard-regions span { color: #376fcd; background: #eef4ff; }.onboard-state.online { color: #27865e; background: #ebf8f2; }.onboard-state.pending, .onboard-state.retrying { color: #3d75c0; background: #edf5ff; }.onboard-state.failed { color: #bf4e5e; background: #fff0f2; }.onboard-state.empty { color: #9aa2af; background: transparent; }
.channel-created-at { min-width: 142px; max-width: 150px; white-space: normal; line-height: 1.5; }.detail-link { padding: 5px 8px; border-radius: 7px; background: #f1f3ff; }
.row-actions { display: flex; align-items: center; gap: 4px; }
.sync-link { padding: 5px 8px; border-radius: 7px; color: #23775d; background: #edf9f5; }
.sync-link:disabled { opacity: .55; cursor: wait; }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }.login-story { display: none; }.login-panel { min-height: 100vh; padding: 30px; }.mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 54px; }.mobile-brand .brand-mark { width: 30px; height: 30px; }
  .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 260px; transition: transform .22s; box-shadow: 20px 0 50px rgba(20,30,62,.13); }.sidebar.open { transform: translateX(0); }.mobile-close { display: block; }.sidebar-backdrop { position: fixed; inset: 0; z-index: 20; display: block !important; background: rgba(18,26,51,.35); backdrop-filter: blur(2px); }.sidebar-backdrop.hidden { display: none !important; }.menu-button { width: 38px; height: 38px; display: grid; place-items: center; margin-right: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.stats-grid { grid-template-columns: repeat(3, 1fr); }.asset-grid { grid-template-columns: 1fr 1fr; }.attention-panel { grid-column: 1 / -1; }.two-column, .admin-grid, .upload-workspace { grid-template-columns: 1fr; }.upload-config-column { border-right: 0; border-bottom: 1px solid var(--line); }.key-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .login-panel { padding: 24px; }.login-card h2 { font-size: 29px; }.topbar { height: 74px; padding: 0 18px; }.page-container { padding: 24px 16px 46px; }.user-meta { display: none; }.hero-card { min-height: 230px; align-items: start; flex-direction: column; padding: 29px 26px; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.stats-grid .stat-card:last-child { grid-column: 1 / -1; }.asset-grid { grid-template-columns: 1fr; }.attention-panel { grid-column: auto; }.stat-card { padding: 17px; }.stat-card > strong { font-size: 23px; }.section-heading { flex-direction: column; margin-bottom: 22px; }.section-heading .button, .admin-badge { align-self: flex-start; }.form-panel { padding: 22px 18px; }.field-row { grid-template-columns: 1fr; gap: 0; }.filter-bar { flex-wrap: wrap; }.search-box { min-width: 100%; min-height: 42px; }.toast-region { left: 14px; right: 14px; bottom: 14px; }.toast { min-width: 0; }.pagination { padding: 0 14px; }.drawer-head, .drawer-content { padding-left: 18px; padding-right: 18px; }.detail-grid { grid-template-columns: 1fr; }.detail-item.wide { grid-column: auto; }.key-summary-grid { grid-template-columns: 1fr; gap: 8px; }.key-summary-grid article { padding: 14px; }.directory-tabs { overflow-x: auto; }.directory-tab { white-space: nowrap; }.tag-summary-toolbar { align-items: flex-start; flex-direction: column; padding: 14px 18px; }.tag-summary-toolbar .button { width: 100%; }.upload-panel-head { align-items: flex-start; flex-direction: column; }.upload-config-column, .upload-keys-column { padding: 21px 18px; }.category-family-grid { grid-template-columns: repeat(3, 1fr); }.upload-submit-row { align-items: stretch; flex-direction: column; padding: 16px 18px; }.upload-submit-row .button { width: 100%; }.upload-tips { grid-template-columns: 1fr; }.upload-result { margin-left: 18px; margin-right: 18px; }.result-batch { align-items: flex-start; flex-direction: column; }.result-batch span { flex: auto; }
}
@media (max-width: 620px) {
  .channel-list-toolbar { align-items: stretch; }
  .date-range-filter, .filter-select, .search-box.channel-keyword { width: 100%; max-width: none; }
  .date-range-filter { justify-content: space-between; }
  .date-range-filter input { width: 44%; }
  .channel-list-toolbar > .button { flex: 1; }
}