:root {
  --ink: #17201c;
  --muted: #66716b;
  --line: #dfe5e1;
  --soft: #f3f6f4;
  --canvas: #eef2ef;
  --panel: #ffffff;
  --green: #166744;
  --green-dark: #0f4d34;
  --mint: #dff3e8;
  --blue: #2463a8;
  --amber: #a45f08;
  --red: #b73838;
  --sidebar: #15221d;
  --shadow: 0 10px 28px rgba(27, 46, 37, .08);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.hidden { display: none !important; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 25px; line-height: 1.2; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 800; text-transform: uppercase; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(380px, .85fr); background: #f7f9f8; }
.login-brand { padding: clamp(40px, 8vw, 110px); color: #effaf4; background: var(--sidebar); display: flex; flex-direction: column; justify-content: center; gap: 36px; position: relative; overflow: hidden; }
.login-brand::after { content: ""; position: absolute; right: -100px; bottom: -180px; width: 420px; height: 420px; border: 80px solid rgba(116, 202, 158, .07); border-radius: 50%; }
.login-brand .eyebrow { color: #7fd3a6; margin-bottom: 10px; }
.login-brand h1 { font-size: clamp(36px, 5vw, 66px); max-width: 580px; }
.login-copy { color: #abc0b6; line-height: 1.8; max-width: 560px; margin-top: 18px; }
.brand-lock { width: 52px; height: 52px; display: grid; place-items: center; color: #78d19f; border: 1px solid #365247; background: #1a2c24; }
.brand-lock svg { width: 28px; height: 28px; }
.security-list { display: flex; flex-wrap: wrap; gap: 18px 28px; color: #c9d8d1; font-size: 13px; }
.security-list span { display: inline-flex; align-items: center; gap: 8px; }
.security-list svg { color: #73c797; }
.login-panel { display: grid; place-items: center; padding: 40px; }
.login-form { width: min(400px, 100%); display: grid; gap: 22px; }
.login-form h2 { font-size: 29px; margin: 6px 0 8px; }
.login-form > div > p:last-child { color: var(--muted); font-size: 14px; }
.login-form label, .dialog-form label { display: grid; gap: 8px; color: #34413b; font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; color: var(--ink); background: #fff; border: 1px solid #ccd5d0; border-radius: 6px; outline: none; transition: border .15s, box-shadow .15s; }
input, select { height: 43px; padding: 0 12px; }
textarea { padding: 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,103,68,.12); }
.form-error { color: var(--red); min-height: 18px; font-size: 13px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 14px; background: var(--sidebar); color: #d7e4dd; display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 8px 24px; border-bottom: 1px solid #2b3933; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: #7fd3a6; background: #1e382d; border: 1px solid #325044; border-radius: 6px; }
.brand b, .brand small, .sidebar-foot b, .sidebar-foot small { display: block; }
.brand b { font-size: 14px; }
.brand small, .sidebar-foot small { color: #7e9489; font-size: 10px; margin-top: 2px; }
nav { display: grid; gap: 5px; margin-top: 22px; }
.nav-item { height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 11px; color: #9db0a7; background: transparent; border: 0; border-radius: 6px; font-size: 13px; font-weight: 700; text-align: left; }
.nav-item:hover { color: #fff; background: #1d3028; }
.nav-item.active { color: #effff6; background: #25533f; }
.nav-item.active svg { color: #8addae; }
.sidebar-foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid #2b3933; display: flex; align-items: center; gap: 9px; font-size: 11px; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #39b676; box-shadow: 0 0 0 3px rgba(57,182,118,.12); }
.workspace { min-width: 0; }
.topbar { height: 75px; padding: 0 28px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 4; backdrop-filter: blur(10px); }
.topbar h1 { font-size: 19px; margin-top: 3px; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.env-badge { height: 31px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; color: #4c5a53; font-size: 11px; font-weight: 700; }
.icon-button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: #4d5b54; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.icon-button:hover { color: var(--green); border-color: #a9c7b8; }
.user-menu { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; text-align: left; color: var(--ink); }
.user-menu b, .user-menu small { display: block; }
.user-menu b { font-size: 12px; }
.user-menu small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.user-menu > svg { width: 14px; }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #d7e9df; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.content { padding: 28px; max-width: 1600px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }
.section-head { min-height: 45px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.section-head h2 { margin-bottom: 6px; }
.section-head p, .panel-head p { color: var(--muted); font-size: 12px; }
.button-group { display: flex; gap: 8px; }
.button { min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }
.button.primary { color: #fff; background: var(--green); border-color: var(--green); }
.button.primary:hover { background: var(--green-dark); }
.button.secondary { color: #394740; background: #fff; border-color: #cfd8d3; }
.button.danger { color: var(--red); background: #fff; border-color: #e7c8c8; }
.button.wide { width: 100%; height: 45px; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--green); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.text-button svg { width: 14px; }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric { min-height: 111px; padding: 17px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 4px 18px rgba(32,53,43,.04); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 700; }
.metric-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 5px; background: var(--soft); color: var(--green); }
.metric-value { font-size: 28px; font-weight: 750; margin-top: 13px; line-height: 1; }
.metric-sub { color: var(--muted); font-size: 10px; margin-top: 6px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 18px; }
.panel-head { min-height: 68px; padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.panel-head h3 { margin-bottom: 5px; }
.activity-list { min-height: 280px; }
.activity-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 13px 20px; border-bottom: 1px solid #edf1ef; }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: var(--soft); color: var(--green); }
.activity-copy b { display: block; font-size: 12px; }
.activity-copy small, .activity-time { color: var(--muted); font-size: 10px; }
.check-list { padding: 7px 20px 15px; }
.check-list > div { min-height: 62px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #edf1ef; }
.check-list > div:last-child { border-bottom: 0; }
.check-list > div > svg { width: 23px; height: 23px; padding: 5px; border-radius: 50%; color: var(--green); background: var(--mint); }
.check-list .warning > svg { color: var(--amber); background: #fff0d8; }
.check-list b, .check-list small { display: block; }
.check-list b { font-size: 11px; }
.check-list small { color: var(--muted); font-size: 10px; margin-top: 4px; }

.table-panel { overflow: hidden; box-shadow: 0 4px 18px rgba(32,53,43,.04); }
.filters { padding: 13px 15px; display: flex; gap: 9px; border-bottom: 1px solid var(--line); }
.filters input, .filters select { height: 36px; font-size: 12px; }
.search { width: min(360px, 100%); position: relative; }
.search svg { position: absolute; left: 10px; top: 9px; width: 16px; color: #718078; }
.search input { padding-left: 34px; }
.filters select { width: 145px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { padding: 11px 15px; color: #647169; background: #f6f8f7; border-bottom: 1px solid var(--line); text-align: left; text-transform: uppercase; font-size: 9px; font-weight: 800; white-space: nowrap; }
td { padding: 13px 15px; border-bottom: 1px solid #edf1ef; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfb; }
.cell-title { font-weight: 800; font-family: "Cascadia Code", Consolas, monospace; }
.cell-sub { color: var(--muted); font-size: 10px; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.active, .badge.online { color: #12633f; background: #def2e7; }
.badge.unused { color: #496078; background: #e8eef4; }
.badge.disabled, .badge.offline { color: #8a3030; background: #f7e4e4; }
.badge.expired { color: #8c5b10; background: #faecd5; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-action { width: 29px; height: 29px; padding: 0; display: grid; place-items: center; border-radius: 5px; border: 1px solid var(--line); background: #fff; color: #66736c; }
.row-action:hover { color: var(--green); border-color: #adc8ba; }
.row-action.danger:hover { color: var(--red); border-color: #dbb4b4; }
.row-action svg { width: 14px; }
.empty { min-height: 260px; padding: 40px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.empty svg { width: 30px; height: 30px; color: #90a199; margin-bottom: 12px; }
.empty b { color: var(--ink); font-size: 13px; }
.empty span { font-size: 11px; margin-top: 5px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 14px; }
.plan-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.plan-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-card h3 { font-size: 17px; }
.plan-price { color: var(--green); font-size: 11px; font-weight: 800; margin-top: 6px; }
.plan-count { min-width: 45px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 10px; }
.plan-specs { margin-top: 18px; display: grid; gap: 10px; }
.plan-spec { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.plan-spec b { color: var(--ink); }
.feature-list { display: flex; gap: 5px; flex-wrap: wrap; padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--line); }
.feature { padding: 4px 7px; background: var(--soft); border-radius: 4px; color: #526158; font-size: 9px; }
.integration-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 18px; }
.integration-fields { padding: 18px 20px; display: grid; gap: 13px; }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 7px; margin-top: 7px; }
.copy-field input { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }
.public-key { width: calc(100% - 40px); height: 252px; margin: 18px 20px; resize: none; font: 11px/1.6 "Cascadia Code", Consolas, monospace; }
.request-contract { margin-top: 18px; }
.contract-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.contract-grid > div { min-height: 130px; padding: 20px; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 9px; }
.contract-grid > div:last-child { border-right: 0; }
.contract-grid code { color: var(--green-dark); font-size: 11px; }
.contract-grid span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.account-popover { position: fixed; top: 67px; right: 25px; width: 150px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); z-index: 20; }
.account-popover button { width: 100%; height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 4px; background: transparent; color: var(--red); font-size: 11px; font-weight: 700; }
.account-popover button:hover { background: #fff3f3; }

dialog { width: min(580px, calc(100vw - 28px)); max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 7px; box-shadow: 0 28px 70px rgba(15,28,22,.28); }
dialog::backdrop { background: rgba(12,25,19,.58); backdrop-filter: blur(2px); }
.dialog-form { padding: 22px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.dialog-head h2 { margin-top: 5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.span-2 { grid-column: span 2; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 13px; display: flex; gap: 18px; }
legend { color: #34413b; font-size: 12px; font-weight: 700; }
.dialog-form label.check { display: flex; flex-direction: row; align-items: center; gap: 7px; font-weight: 500; }
.check input { width: 16px; height: 16px; accent-color: var(--green); }
.dialog-note { margin-top: 16px; padding: 11px; display: flex; gap: 9px; align-items: flex-start; color: #496057; background: #edf6f1; border: 1px solid #d5e9de; border-radius: 5px; font-size: 10px; line-height: 1.5; }
.dialog-note svg { flex: 0 0 auto; width: 15px; }
.dialog-note.warning { color: #784e0e; background: #fff7e8; border-color: #f0ddb8; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.result-form textarea { height: 260px; font: 12px/1.75 "Cascadia Code", Consolas, monospace; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; max-width: min(360px, calc(100vw - 40px)); padding: 12px 15px; color: #fff; background: var(--ink); border-radius: 6px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #9e3030; }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .integration-layout { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  body { padding-bottom: 66px; }
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 38vh; padding: 34px 24px; gap: 18px; justify-content: flex-end; }
  .login-brand h1 { font-size: 36px; }
  .login-copy { line-height: 1.55; }
  .security-list { display: none; }
  .brand-lock { width: 42px; height: 42px; }
  .login-panel { padding: 36px 24px; place-items: start center; }
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: auto 0 0; height: 62px; padding: 6px; display: block; border-top: 1px solid #31443b; }
  .brand, .sidebar-foot { display: none; }
  nav { height: 100%; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 0; }
  .nav-item { height: 50px; padding: 5px 2px; flex-direction: column; justify-content: center; gap: 3px; border-radius: 5px; font-size: 9px; }
  .nav-item svg { width: 17px; }
  .topbar { height: 65px; padding: 0 16px; }
  .env-badge, .user-menu > span:not(.avatar), .user-menu > svg { display: none; }
  .content { padding: 18px 14px; }
  .section-head { align-items: flex-start; gap: 12px; }
  .section-head p { max-width: 210px; }
  .button span { display: none; }
  .button { width: 38px; padding: 0; }
  .button-group { flex: 0 0 auto; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { min-height: 100px; padding: 14px; }
  .metric-value { font-size: 24px; }
  .plan-grid { grid-template-columns: 1fr; }
  .contract-grid { grid-template-columns: 1fr; }
  .contract-grid > div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .filters { flex-direction: column; }
  .filters select { width: 100%; }
  th, td { padding-left: 12px; padding-right: 12px; }
  .activity-item { grid-template-columns: 32px minmax(0, 1fr); }
  .activity-time { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  fieldset { flex-wrap: wrap; }
  .dialog-actions .button { width: auto; padding: 0 14px; }
  .dialog-actions .button span { display: inline; }
}

@media (max-width: 430px) {
  .metrics { gap: 8px; }
  .metric { min-width: 0; }
  .metric-top span:first-child { max-width: 80px; }
  nav { grid-template-columns: repeat(6, 1fr); }
  .nav-item.admin-only { display: none !important; }
}