:root {
  color-scheme: light;
  --ink: #12251f;
  --muted: #52635d;
  --paper: #f4f3ed;
  --panel: #fffefa;
  --night: #061815;
  --night-2: #0c2821;
  --green: #32d28e;
  --green-deep: #08714f;
  --line: rgba(18,37,31,.18);
  --danger: #a43b31;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; transform: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(8,113,79,.25); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.merchant-context {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;padding:16px;background:#e6f2eb;border:1px solid #aac8ba;}
.plan-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px;margin-bottom:12px;}
.project-access-list {padding:12px;border:1px solid var(--line);max-height:220px;overflow:auto;}
.dialog-card {max-height:calc(100dvh - 32px);overflow-y:auto;}
.recovery-result {white-space:pre-wrap;overflow-wrap:anywhere;}
.merchant-portal .sidebar {background:#123c30;}
.merchant-portal .topbar h1 {font-family:inherit;font-size:28px;}
.mark { width: 29px; height: 25px; position: relative; display: inline-block; flex: 0 0 auto; }
.mark i { width: 15px; height: 15px; position: absolute; border: 1.8px solid var(--green); border-radius: 50%; }
.mark i:nth-child(1) { left: 0; top: 0; }
.mark i:nth-child(2) { right: 0; top: 0; }
.mark i:nth-child(3) { left: 7px; bottom: 0; }

.auth-screen { min-height: 100vh; padding: 0 max(24px, calc((100% - 1280px)/2)); display: grid; grid-template-rows: 90px 1fr 70px; color: #eaf9f3; background: var(--night); }
.auth-screen::before { content: ""; width: 44vw; height: 44vw; position: fixed; left: 16%; bottom: -26vw; border: 1px solid rgba(50,210,142,.12); border-radius: 50%; box-shadow: 0 0 0 8vw rgba(50,210,142,.015), 0 0 0 16vw rgba(50,210,142,.012); pointer-events: none; }
.auth-brand { width: fit-content; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.portal-brand-text { display: grid; gap: 3px; line-height: 1.05; letter-spacing: .04em; }
.portal-brand-text b { font-size: 15px; }
.portal-brand-text small { color: #9eb9af; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.auth-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(60px,10vw,160px); align-items: center; }
.auth-copy { max-width: 680px; position: relative; z-index: 1; }
.kicker, .panel-head p, .topbar p, .dialog-head p, .player-head p { margin: 0; color: var(--green-deep); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.auth-copy .kicker { color: var(--green); }
.auth-copy h1 { margin: 22px 0 28px; font-family: "Songti SC", "STSong", serif; font-size: clamp(50px,6vw,82px); font-weight: 500; line-height: 1.18; letter-spacing: -.055em; }
.auth-copy > p:not(.kicker) { max-width: 600px; color: #abc5bb; font-size: 15px; line-height: 1.9; }
.auth-signal { margin-top: 46px; display: flex; align-items: center; gap: 11px; color: #b4cbc2; font-size: 12px; }
.auth-signal span, .online-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(50,210,142,.1); }
.login-card { padding: 40px; position: relative; z-index: 1; color: var(--ink); background: #f5f4ed; box-shadow: 0 40px 100px rgba(0,0,0,.28); }
.login-card-head { padding-bottom: 26px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--green-deep); font: 800 11px ui-monospace, monospace; letter-spacing: .13em; }
.login-card-head b { color: #65756f; }
.login-card h2 { margin: 34px 0 7px; font-family: "Songti SC", serif; font-size: 31px; font-weight: 600; }
.login-card > p { margin: 0 0 28px; color: var(--muted); font-size: 13px; }
.login-card label, .dialog-card label { margin: 18px 0 7px; display: block; color: #3f514a; font-size: 13px; font-weight: 700; }
.login-card input, .dialog-card input, .dialog-card select, .dialog-card textarea { width: 100%; height: 48px; padding: 0 14px; color: var(--ink); border: 1px solid rgba(18,37,31,.24); outline: none; background: #fff; font-size: 14px; transition: border .2s, box-shadow .2s; }
.login-card input:focus, .dialog-card input:focus, .dialog-card select:focus, .dialog-card textarea:focus { border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(11,124,88,.08); }
.form-error, .dialog-error { min-height: 20px; margin: 12px 0 !important; color: var(--danger) !important; font-size: 12px !important; }
.primary-button { min-height: 47px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; border: 0; background: var(--ink); font-size: 13px; font-weight: 700; transition: background .2s, transform .2s; }
.primary-button:hover { background: var(--green-deep); transform: translateY(-1px); }
.primary-button.compact { min-height: 40px; justify-content: center; }
.login-card .primary-button { width: 100%; }
.login-help { margin-top: 14px; display: inline-block; color: var(--green-deep); font-size: 12px; font-weight: 700; }
.reset-screen { display: grid; }
.reset-shell { width: min(440px, 100%); margin: auto; }
.reset-shell .login-card { width: 100%; }
.auth-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #91aea3; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; letter-spacing: .05em; }

.console { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { height: 100vh; padding: 30px 22px 22px; position: sticky; top: 0; display: flex; flex-direction: column; color: #dff4ec; background: var(--night); }
.sidebar-brand { height: 46px; display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; letter-spacing: .08em; }
.sidebar-brand .portal-brand-text small { color: #8eafa3; }
.sidebar nav { margin-top: 50px; display: grid; gap: 7px; }
.sidebar { overflow-y: auto; }
.nav-item { width: 100%; height: 46px; padding: 0 13px; display: grid; grid-template-columns: 31px 1fr; align-items: center; color: #a8c1b8; border: 0; border-left: 2px solid transparent; text-align: left; background: transparent; transition: color .2s, background .2s; }
.nav-item i { color: #78998d; font: normal 11px ui-monospace, monospace; }
.nav-item span { font-size: 14px; }
.nav-item:hover { color: #fff; }
.nav-item.active { color: #fff; border-left-color: var(--green); background: rgba(50,210,142,.09); }
.nav-item.active i { color: var(--green); }
.storage-note { margin-top: auto; padding: 16px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); }
.storage-note > span { color: #f1b65f; font: 800 11px ui-monospace, monospace; letter-spacing: .12em; }
.storage-note p { margin: 8px 0 0; color: #9eb9af; font-size: 12px; line-height: 1.65; }
.account-card { width: 100%; margin-top: 16px; padding: 13px 4px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; color: #d7ebe4; border-top: 1px solid rgba(255,255,255,.08); text-align: left; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; color: var(--night); border-radius: 50%; background: var(--green); font-size: 11px; font-weight: 800; }
.account-card > span:nth-child(2) { display: grid; gap: 3px; }
.account-card b { font-size: 13px; }
.account-card small { color: #9bb7ad; font-size: 11px; }
.account-actions { display: grid; gap: 4px; }
.account-actions button { padding: 2px; color: #abc3ba; border: 0; background: transparent; font-size: 11px; }

.main-area { min-width: 0; padding: 0 42px 60px; }
.topbar { min-height: 118px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 8px 0 0; font-family: "Songti SC", serif; font-size: 31px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.online-pill { height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 9px; color: #3f544c; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.65); font-size: 12px; }
.online-pill i { width: 6px; height: 6px; }
.outline-button { min-height: 40px; padding: 0 15px; color: var(--ink); border: 1px solid rgba(18,37,31,.24); background: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; }
.outline-button:hover { border-color: var(--green-deep); background: #fff; }
.view { padding-top: 36px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--panel); }
.metric-grid article { min-height: 142px; padding: 24px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.metric-grid article:last-child { border: 0; }
.metric-grid span { color: var(--muted); font-size: 13px; }
.metric-grid strong { margin-top: 15px; font-family: "Songti SC", serif; font-size: 34px; font-weight: 500; }
.metric-grid small { margin-top: auto; color: #65756f; font-size: 11px; }
.overview-grid { margin-top: 22px; display: grid; grid-template-columns: 1.55fr .75fr; gap: 22px; }
.panel { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.panel-head { min-height: 86px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 6px 0 0; font-family: "Songti SC", serif; font-size: 21px; font-weight: 600; }
.text-button { color: var(--green-deep); border: 0; background: none; font-size: 12px; font-weight: 700; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { height: 46px; padding: 0 16px; color: #53645e; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: .02em; }
td { min-height: 60px; padding: 12px 16px; color: #344740; border-bottom: 1px solid rgba(18,37,31,.1); font-size: 13px; white-space: nowrap; }
tbody tr:hover { background: rgba(8,113,79,.035); }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); font-weight: 700; }
td small { color: #63736d; font-size: 11px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.empty-row td { height: 150px; color: #8b9893; text-align: center; }
.status-badge { padding: 5px 9px; color: #465a52; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; font-weight: 700; }
.status-badge.sealed { color: var(--green-deep); border-color: rgba(11,124,88,.22); background: rgba(50,210,142,.08); }
.status-badge.recording { color: #81530f; border-color: rgba(129,83,15,.3); background: rgba(231,165,72,.14); }
.status-badge.debug-environment { color: #8b330e; border-color: #d88454; background: #fff0e6; }
.project-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.table-action { min-height: 32px; padding: 6px 10px; color: #056647; border: 1px solid rgba(8,113,79,.32); background: rgba(50,210,142,.08); font-size: 12px; font-weight: 700; }
.table-action:hover { color: #fff; background: var(--green-deep); }
.chain-panel { padding-bottom: 10px; }
.chain-visual { padding: 34px 24px 28px; display: grid; grid-template-columns: 34px 1fr 34px 1fr 34px; align-items: center; }
.chain-visual > b { height: 1px; background: #c9d0cc; }
.chain-node { width: 34px; height: 34px; position: relative; display: grid; place-items: center; color: #61716b; border: 1px solid #aeb9b4; border-radius: 50%; font: 11px ui-monospace, monospace; }
.chain-node.done { color: var(--night); border-color: var(--green); background: var(--green); }
.chain-panel ol { margin: 0; padding: 0 24px; list-style: none; }
.chain-panel li { min-height: 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-size: 12px; }
.chain-panel li b { color: var(--green-deep); font-size: 11px; }
.chain-panel li b.pending { color: #81530f; }

.filter-bar, .section-actions { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.filter-bar { flex-wrap: wrap; }
.filter-bar label { font-size: 12px; color: var(--muted); }
.filter-bar label input { display: block; min-width: 190px; }
.pagination { margin-top: 18px; display:flex; align-items:center; justify-content:center; gap:20px; }
.player-controls { padding-top: 12px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:#d3eee3; font-size:13px; }
.player-controls input[type=range] { flex:1; min-width:180px; accent-color:var(--green); }
.player-controls select { color:var(--ink); background:#fff; min-height:36px; }
.filter-bar input, .filter-bar select { height: 43px; padding: 0 13px; color: var(--ink); border: 1px solid rgba(18,37,31,.22); outline: none; background: var(--panel); font-size: 13px; }
.filter-bar input { min-width: 360px; flex: 1; }
.section-actions { justify-content: space-between; }
.section-actions p { max-width: 700px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project-card { min-height: 225px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); }
.project-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.project-card-head > span { color: var(--green-deep); font: 11px ui-monospace, monospace; }
.project-card h2 { margin: 28px 0 7px; font-family: "Songti SC", serif; font-size: 23px; }
.project-card > p { margin: 0; color: var(--muted); font-size: 12px; }
.project-meta { margin-top: 28px; padding-top: 16px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.project-meta span { display: grid; gap: 5px; color: #5f716a; font-size: 11px; }
.project-meta b { color: var(--ink); font: 700 13px ui-monospace, monospace; }
.project-card footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.project-origin { max-width: 66%; overflow: hidden; color: #53665f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.integration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.integration-steps { grid-row: span 2; }
.integration-steps ol { margin: 0; padding: 8px 24px 24px; list-style: none; }
.integration-steps li { min-height: 84px; display: grid; grid-template-columns: 48px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.integration-steps li > b { color: var(--green-deep); font: 11px ui-monospace, monospace; }
.integration-steps li > span { display: grid; gap: 7px; }
.integration-steps strong { font-size: 13px; }
.integration-steps small { color: var(--muted); font-size: 12px; }
.code-panel pre { margin: 0; padding: 24px; overflow: auto; color: #d3eee3; background: var(--night); font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-note { padding: 14px 20px; display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 11px; line-height: 1.7; }
.code-note i { width: 6px; height: 6px; margin-top: 4px; flex: 0 0 auto; border-radius: 50%; background: var(--green-deep); }
.integration-guide { display: grid; gap: 20px; }
.integration-overview { padding-bottom: 0; }
.integration-concepts { display: grid; grid-template-columns: repeat(3, 1fr); }
.integration-concepts > div { min-height: 138px; padding: 22px; display: grid; align-content: start; gap: 10px; border-right: 1px solid var(--line); }
.integration-concepts > div:last-child { border-right: 0; }
.integration-concepts b, .confirmation-rules b { color: var(--green-deep); font-size: 14px; }
.integration-concepts span, .confirmation-rules p, .mode-comparison p { margin: 0; color: #344740; font-size: 13px; line-height: 1.8; }
.integration-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 20px; align-items: start; }
.integration-layout .integration-steps { grid-row: auto; }
.integration-mode-card { position: sticky; top: 18px; }
.mode-comparison { display: grid; grid-template-columns: 1fr 1fr; }
.mode-comparison section { min-height: 210px; padding: 22px; border-right: 1px solid var(--line); }
.mode-comparison section:last-child { border-right: 0; }
.mode-comparison span { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.mode-comparison h3 { margin: 10px 0; font-size: 18px; }
.mode-comparison strong { display: block; margin-top: 16px; color: var(--green-deep); font-size: 13px; }
.integration-warning { margin: 0; padding: 15px 20px; color: #67440c; background: #fff4d9; border-top: 1px solid #d7b467; font-size: 13px; line-height: 1.7; }
.integration-warning code, .code-note code, .confirmation-rules code { font: 12px ui-monospace, monospace; }
.integration-code-card .panel-head { align-items: center; }
.integration-code-card pre { margin: 0; padding: 24px; overflow: auto; color: #d3eee3; background: var(--night); font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.integration-code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.integration-resilience-card { border-color: #74aa91; }
.resilience-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.resilience-grid > div { min-height: 155px; padding: 22px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.resilience-grid > div:nth-child(3n) { border-right: 0; }
.resilience-grid b { color: var(--green-deep); font-size: 14px; }
.resilience-grid p { margin: 10px 0 0; color: #344740; font-size: 13px; line-height: 1.8; }
.resilience-grid code { font: 12px ui-monospace, monospace; }
.confirmation-code-card { border: 1px solid #74aa91; }
.confirmation-rules { display: grid; grid-template-columns: 1fr 1fr; }
.confirmation-rules > div { min-height: 145px; padding: 20px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.confirmation-rules > div:nth-child(2n) { border-right: 0; }
.integration-check-grid { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(620px, 1.35fr); gap: 20px; padding: 20px; overflow-x: auto; }
.integration-check-grid ul { margin: 0; padding: 0 0 0 22px; color: #344740; font-size: 13px; line-height: 2; }
.integration-check-grid table { min-width: 620px; }
.integration-check-grid th, .integration-check-grid td { font-size: 12px; }

dialog { max-width: none; max-height: none; padding: 0; border: 0; background: transparent; }
dialog::backdrop { background: rgba(3,16,13,.72); backdrop-filter: blur(5px); }
.dialog-card { width: min(480px, calc(100vw - 30px)); padding: 30px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(0,0,0,.3); }
.dialog-head { padding-bottom: 20px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dialog-head h2, .player-head h2 { margin: 7px 0 0; font-family: "Songti SC", serif; font-size: 25px; }
.dialog-head > button, .player-head button { min-width: 32px; height: 32px; color: var(--ink); border: 1px solid var(--line); background: transparent; }
.dialog-card > small { display: block; margin-top: 8px; color: #596b64; font-size: 12px; line-height: 1.6; }
.project-settings-card { width: min(620px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow-y: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.checkbox-label { display: flex !important; align-items: center; gap: 8px; }
.checkbox-label input { width: auto; height: auto; }
.dialog-card > .primary-button { width: 100%; margin-top: 18px; justify-content: center; }
.dialog-card textarea { min-height: 94px; padding: 12px; resize: vertical; font: 13px/1.6 ui-monospace, monospace; }
.credential-card > div > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.danger-note { color: var(--danger) !important; font-size: 12px !important; font-weight: 700; }
.settings-divider { height: 1px; margin: 24px 0; background: var(--line); }
.project-settings-heading { margin: 24px 0 8px; color: var(--ink); font-size: 16px; }
.settings-divider + .project-settings-heading { margin-top: 0; }
.setting-help { margin: 6px 0 10px; color: #52635d; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.setting-explainer { margin: 8px 0 18px; border: 1px solid #c3d4ca; border-radius: 6px; background: #fffefa; }
.setting-explainer > summary { min-height: 44px; padding: 11px 12px; color: #08714f; font-size: 13px; font-weight: 700; line-height: 1.7; cursor: pointer; overflow-wrap: anywhere; }
.setting-explainer > summary:focus-visible { outline: 3px solid #08714f; outline-offset: 2px; border-radius: 4px; }
.setting-explainer[open] > summary { border-bottom: 1px solid #c3d4ca; }
.setting-explainer-body { padding: 0 12px; color: #344740; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.setting-explainer-body p { margin: 12px 0; }
.verification-details { min-width: 220px; max-width: 440px; margin: 8px 0; white-space: normal; }
.verification-cloud-status { margin-top: 4px; color: #52635d; font-size: 13px; }
.verification-cloud-status.is-verified { color: #08714f; }
.verification-cloud-status.is-error { color: var(--danger); }
.account-settings h3 { margin: 20px 0 10px; font-family: "Songti SC", serif; font-size: 18px; }
.account-settings form > .outline-button { margin-top: 12px; }
.account-settings #mfa-status { color: var(--muted); font-size: 13px; }
#mfa-setup { margin-top: 18px; padding: 16px; border: 1px solid var(--line); background: #fff; }
#mfa-setup img { width: 180px; height: 180px; display: block; margin: 0 auto 12px; }
#mfa-secret { display: block; padding: 9px; overflow-wrap: anywhere; color: var(--green-deep); background: var(--paper); font-size: 12px; }
.recovery-codes { margin-top: 14px; padding: 14px; border: 1px solid #d5a54b; background: #fff8e8; }
.recovery-codes pre { columns: 2; color: var(--ink); font: 12px/1.8 ui-monospace, monospace; }
.recovery-codes small { color: var(--muted); font-size: 11px; }
.credential-list { display: grid; gap: 8px; }
.credential-list article { padding: 10px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.credential-list article > span { display: grid; gap: 4px; }
.credential-list small, .credential-list em { color: var(--muted); font-size: 11px; font-style: normal; }
.case-card { width: min(620px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow-y: auto; }
.case-summary { margin: 18px 0; padding: 14px; display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--muted); border: 1px solid var(--line); background: #fff; font-size: 12px; }
.case-card textarea { min-height: 76px; padding: 10px; resize: vertical; }
.case-notes { margin-top: 14px; display: grid; gap: 8px; }
.case-notes article { padding: 12px; border: 1px solid var(--line); background: #fff; }
.case-notes article b, .case-notes article time { font-size: 11px; }
.case-notes article time { margin-left: 10px; color: var(--muted); }
.case-notes article p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
.case-exports { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.debug-environment-warning { margin: 10px 0 18px; padding: 14px; color: #71300f; border: 1px solid #dc9466; background: #fff1e7; font-size: 13px; line-height: 1.75; }
.debug-log-list { max-height: 420px; overflow: auto; display: grid; gap: 8px; }
.debug-log-entry { padding: 12px; border: 1px solid var(--line); background: #fff; overflow-wrap: anywhere; }
.debug-log-entry.error { border-color: #d98787; background: #fff4f4; }
.debug-log-entry.warn { border-color: #dfba74; background: #fff9e9; }
.debug-log-entry header { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.debug-log-entry > strong { display: block; margin-top: 7px; font-size: 13px; }
.debug-log-entry pre { max-height: 240px; margin: 9px 0 0; padding: 10px; overflow: auto; white-space: pre-wrap; color: #d9f1e6; background: #10211c; font: 11px/1.65 ui-monospace, monospace; }
.empty-hint { color: var(--muted); font-size: 12px; }
.audit-security-panel { margin-top: 20px; }
.player-dialog { width: min(1180px, calc(100vw - 30px)); height: min(820px, calc(100dvh - 30px)); padding: 24px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); color: #e7f7f1; background: var(--night); }
.player-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; min-width:0; }
.player-head h2 { overflow-wrap:anywhere; }
.player-head > div:last-child { display: flex; gap: 7px; }
.player-head button { color: #cce5dc; border-color: rgba(255,255,255,.14); }
.player-meta { min-height: 48px; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 12px 24px; color: #abc5bb; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 12px; }
.player-mount { position:relative; min-height:0; min-width:0; margin-top:20px; overflow:hidden; display:grid; place-items:center; background:#0b211c; }
.player-mount > span { color: #abc5bb; font-size: 13px; }
.replay-viewport { position:absolute; inset:0; overflow:hidden; overscroll-behavior:contain; }
.replay-stage { position:relative; }
.player-resolution { color:#abc5bb; font-size:12px; white-space:nowrap; }
.player-status { color:#cce5dc; font-size:12px; white-space:nowrap; }
.player-status[data-state=playing] { color:#72efb7; }
.player-head button:disabled { cursor:default; opacity:.6; }
.player-dialog:fullscreen, #player-dialog.is-expanded .player-dialog { width:100vw; height:100dvh; }
#player-dialog.is-expanded { width:100vw; height:100dvh; margin:0; }
@media (max-width:760px) {
 .player-dialog { width:calc(100vw - 12px); height:calc(100dvh - 12px); padding:12px; }
 .player-head h2 { font-size:18px; }
 .player-head > div:last-child { flex-wrap:wrap; }
 .player-meta { padding:10px 0; gap:6px 12px; }
 .player-controls { gap:8px; }
 .player-controls input[type=range] { flex-basis:100%; min-width:0; width:100%; }
 .player-controls select { max-width:100%; min-width:0; }
 .player-mount { margin-top:12px; }
}
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; gap: 8px; }
.toast { min-width: 280px; padding: 14px 17px; color: #eaf9f3; border-left: 3px solid var(--green); background: var(--night); box-shadow: 0 15px 40px rgba(0,0,0,.25); font-size: 13px; }
.toast.error { border-color: #dc6d61; }

@media (max-width: 1100px) {
  .console { grid-template-columns: 210px 1fr; }
  .main-area { padding-left: 26px; padding-right: 26px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid article:nth-child(2) { border-right: 0; }
  .metric-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .overview-grid, .integration-grid, .integration-layout, .integration-code-grid { grid-template-columns: 1fr; }
  .integration-concepts, .mode-comparison, .confirmation-rules, .resilience-grid { grid-template-columns: 1fr; }
  .integration-concepts > div, .mode-comparison section, .confirmation-rules > div, .resilience-grid > div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .integration-mode-card { position: static; }
  .project-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .auth-screen { padding: 0 18px; grid-template-rows: 70px 1fr 55px; }
  .auth-grid { padding: 35px 0; grid-template-columns: 1fr; gap: 38px; }
  .auth-copy h1 { font-size: 46px; }
  .login-card { padding: 28px 22px; }
  .console { display: block; }
  .sidebar { height: auto; padding: 16px; position: static; }
  .sidebar-brand, .storage-note { display: none; }
  .sidebar nav { margin: 0; display: flex; overflow-x: auto; }
  .nav-item { min-width: 128px; }
  .account-card { margin: 10px 0 0; padding: 10px 4px 0; }
  .main-area { padding: 0 16px 40px; }
  .topbar { min-height: 100px; }
  .online-pill { display: none; }
  .metric-grid, .project-grid { grid-template-columns: 1fr; }
  .metric-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .filter-bar, .section-actions { align-items: stretch; flex-direction: column; }
  .filter-bar input { min-width: 0; width: 100%; }
  .filter-bar select, .filter-bar button, .section-actions button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
.sandbox-body { min-height: 100vh; color: #eaf9f3; background: var(--night); }
.sandbox-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 70px; }
.sandbox-shell > header { height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.sandbox-hero { padding: 64px 0 46px; }
.sandbox-hero > p { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.sandbox-hero h1 { margin: 14px 0 20px; font-family: "Songti SC", serif; font-size: clamp(48px,7vw,80px); font-weight: 500; line-height: 1.08; }
.sandbox-hero > span { color: #abc5bb; font-size: 14px; }
.sandbox-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; color: var(--ink); }
.sandbox-controls, .sandbox-form, .sandbox-business { padding-bottom: 24px; }
.sandbox-controls > label, .sandbox-form > label, .sandbox-business-fields > label { margin: 18px 24px 7px; display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.sandbox-controls select, .sandbox-form input, .sandbox-form select, .sandbox-form textarea, .sandbox-business input { min-height: 44px; padding: 9px 12px; color: var(--ink); border: 1px solid rgba(18,37,31,.24); background: #fff; font-size: 14px; }
.sandbox-form textarea { min-height: 90px; resize: vertical; }
.sandbox-controls .row-actions, .sandbox-form > button { margin: 20px 24px 0; }
.sandbox-controls pre { min-height: 180px; margin: 22px 24px 0; padding: 14px; overflow: auto; color: #c2ddd3; background: var(--night); font: 12px/1.7 ui-monospace, monospace; white-space: pre-wrap; }
.sandbox-business { grid-column: 1 / -1; }
.sandbox-business-fields { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; }
.sandbox-business-fields .checkbox-label { min-height: 44px; display: flex; align-items: center; color: var(--ink); }
.sandbox-business-fields .checkbox-label input { min-height: auto; width: 18px; height: 18px; }
.sandbox-business > button, .sandbox-business > .setting-help { margin: 20px 24px 0; }
@media (max-width: 760px) { .sandbox-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sandbox-business-fields { grid-template-columns: 1fr; } }