/* KAPOK adaptation of the reference Lindui soft-brand workspace.
   Presentation and management interactions only; business/auth boundaries stay intact. */
:root {
  color-scheme: light;
  --bg:#f8f9f5; --bg-elev:#ffffff; --panel:#ffffff; --panel-2:#f2f7f3; --sunken:#f6f9f5;
  --ink:#183f3b; --ink-2:#425f58; --muted:#6b7e75;
  --line:#dce8e1; --line-strong:#aacdbd; --hairline:#e7eee8;
  --gold:#227263; --gold-bright:#17594e; --gold-deep:#18574a; --gold-wash:#eaf5ef;
  --ok:#267461; --ok-wash:#eaf6ee; --bad:#b7483d; --bad-wash:#fff0ed;
  --warn:#987142; --warn-wash:#f8f0e5; --info:#497c8c; --info-wash:#edf5f7;
  --shadow:0 24px 60px -20px #244c3540; --shadow-soft:0 5px 24px #3f612306; --inner-lift:none;
  --radius:16px; --radius-lg:20px;
  --sans:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --display:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
body { background:var(--bg); font-size:14px; line-height:1.65; }
::selection { background:#cde7d8; color:var(--ink); }
::-webkit-scrollbar-thumb { background:#b4cbbf; border:3px solid transparent; background-clip:content-box; }
.ui-icon { width:19px; height:19px; flex:none; display:inline-block; vertical-align:middle; }
.app { grid-template-columns:242px minmax(0,1fr); }
#sidebar { padding:26px 18px 20px; background:#fff; border-right:1px solid var(--line); }
.brand { padding:0 10px 26px; gap:11px; }
.brand svg { width:42px; height:42px; }
.brand strong { font-family:var(--sans); font-size:22px; font-weight:750; letter-spacing:-.7px; }
.brand span { color:var(--muted); font-size:10px; letter-spacing:1px; margin-top:2px; }
.sidebar-profile { display:flex; gap:11px; align-items:center; padding:20px 10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:25px; }
.profile-avatar { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#e6f2e9; color:var(--gold); font-size:17px; font-weight:650; flex:none; }
.profile-copy { min-width:0; }
.profile-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.profile-copy small { display:block; color:var(--muted); font-size:11px; margin-top:1px; }
.nav-caption { margin:0 12px 11px; font-size:10px; letter-spacing:1.6px; color:#84978c; }
.nav { gap:5px; }
.nav button { display:flex; align-items:center; gap:11px; padding:12px; min-height:44px; font-size:13px; border-radius:10px; color:var(--muted); }
.nav button::before { display:none; }
.nav button:hover { color:var(--gold); background:#f4f8f3; }
.nav button.active { background:#eaf4eb; color:#1c6553; font-weight:650; }
.nav button .nav-caret { width:13px; margin-left:auto; opacity:.5; }
.side-foot { padding:18px 10px 0; border-color:var(--line); font-size:11px; }
.side-foot .foot-lock { display:flex; gap:7px; align-items:center; margin-bottom:5px; color:#598570; }
.side-foot .ui-icon { width:15px; height:15px; }
.main { padding:0 34px 48px; }
.topbar { min-height:112px; padding:25px 0 23px; margin-bottom:27px; align-items:center; border-color:var(--line); }
.topbar h1 { font-size:26px; line-height:1.4; letter-spacing:-.6px; font-weight:650; }
.topbar p { margin-top:5px; font-size:12px; }
.topbar .eyebrow { display:block; margin-bottom:4px; color:#81928a; font-size:9px; letter-spacing:1.7px; }
.top-actions { flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.refresh-caption { font-size:10px; color:#829188; }
.top-actions .btn { min-height:35px; padding:7px 10px; font-size:12px; }
.top-actions .ui-icon { width:15px; height:15px; }
.btn { border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink-2); box-shadow:none; min-height:39px; font-weight:600; }
.btn:hover { background:#f2f7f2; border-color:#bdd5c6; }
.btn.primary { background:#227263; border-color:#227263; color:#fff; box-shadow:none; }
.btn.primary:hover { background:#17594e; border-color:#17594e; }
.btn.ghost { background:#fff; color:var(--ink-2); border-color:var(--line); }
.btn.ghost:hover { background:#f2f7f2; color:var(--gold); }
.btn.danger { background:#fff3ef; color:#a54940; border-color:#ebcec7; }
.btn.danger:hover { background:#fbe7e1; color:#913d34; }
.btn.small { min-height:32px; padding:6px 11px; font-size:12px; }
.btn:disabled { opacity:.5; }
input,select,textarea { background:#fcfdfa; color:var(--ink); border:1px solid #d9e5dc; border-radius:9px; box-shadow:none; min-height:41px; font-size:13px; }
input::placeholder,textarea::placeholder { color:#96a399; }
select { appearance:auto; background-image:none; padding-right:12px; }
input:focus,select:focus,textarea:focus { border-color:#328976; box-shadow:0 0 0 3px #32897612; }
.field>span { color:#506c60; font-size:12px; font-weight:600; letter-spacing:0; }
.filters { padding:19px 20px; background:#fff; border:1px solid var(--line); border-radius:13px; margin-bottom:18px; gap:12px; }
.filters .field { min-width:120px; flex:1; }
.filters .field.grow { flex:2; min-width:190px; }
.card,.stat,.product { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-soft); }
.card { padding:23px; }
.stat { padding:22px 23px; }
.stat::before { display:none; }
.stat>span { color:var(--muted); letter-spacing:0; text-transform:none; font:500 12px/1.5 var(--sans); }
.stat>strong { color:var(--ink); font-size:31px; font-weight:600; font-family:var(--sans); letter-spacing:-1px; line-height:1.6; }
.stat em { font-size:11px; margin-top:2px; }
.stats { gap:17px; margin-bottom:22px; }
.section-title { margin-top:25px; margin-bottom:14px; }
.section-title h2,.card>h2 { font-family:var(--sans); font-size:17px; font-weight:650; letter-spacing:-.3px; }
.split { gap:22px; }
.banner { background:#eef5ed; color:#587261; border:1px solid #dae8d9; border-radius:10px; padding:12px 15px; font-size:12px; }
.banner.bad { background:#fff1ec; color:#98493b; border:1px solid #f0d7cd; }
.banner.ok { background:#edf6ee; color:#39725a; border:1px solid #d6e8dc; }
.banner.warn { background:#faf2e7; color:#866541; border:1px solid #ecdfc9; }
.banner strong { color:inherit; }
.pill { color:#7d6549; border-color:#e9ddc9; background:#f7f0e6; font-size:10px; padding:4px 9px; }
.pill.live { color:#246b57; border-color:#d7e7dc; background:#edf7ef; }
.pill.prod { color:#985343; border-color:#ecd9cd; background:#faf0e8; }
.table-wrap { background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:none; }
table { font-size:12px; }
th { color:#6f8377; background:#f4f8f3; font-size:11px; font-weight:600; border-color:var(--line); }
th,td { padding:14px 16px; }
td { border-color:#eaf0e9; color:#436152; }
tbody tr:hover { background:#f7faf5; }
tbody tr.selected { background:#edf6ee; }
td .id { color:#6b8779; font-size:10px; }
.empty-state { padding:45px 20px; color:var(--muted); }
.empty-state::before { background:#edf5ec; color:#6a9b7c; box-shadow:none; }
.badge { font-size:10px; border-radius:7px; padding:3px 8px; }
.badge.ok { background:#edf6ee; color:#2e7859; border-color:#d4e8d8; }
.badge.bad { background:#fff0ec; color:#aa5145; border-color:#eed8d0; }
.badge.warn { background:#fcf3e5; color:#967443; border-color:#ecdfc5; }
.badge.wait { background:#eef6f8; color:#4c7b88; border-color:#d7e7eb; }
.badge.muted { background:#f3f6f1; color:#7b8b7e; border-color:#e1e8df; }
.product { padding:19px; }
.product.selected { background:#eff8f0; border-color:#6aab89; box-shadow:0 0 0 2px #78ad8c12; }
.product .bin { color:#245c4d; font-family:var(--mono); font-size:23px; }
.product:hover { transform:none; }
.pay-box,.feature { background:#f3f8f1; border-color:#deeadb; }
.money,.feature strong,.pay-box strong { font-family:var(--sans); }
.drawer-back,.modal-back { background:#1f43332e; backdrop-filter:blur(4px); }
.drawer,.modal { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow); }
.drawer { padding:28px; }
.modal { border-radius:17px; padding:26px; }
.modal h3,.drawer h3 { font-family:var(--sans); font-weight:650; letter-spacing:0; }
.modal h3 { font-size:19px; }
.modal p { color:var(--muted); }
.kv>span { color:var(--muted); font-size:12px; letter-spacing:0; }
.vcard,.vcard.visa,.vcard.mastercard,.vcard.discover { background:linear-gradient(145deg,#296d5e,#143f38); color:#ecf7ed; border-color:#34715c; }
.vcard-issuer { color:#daeee0; font-family:var(--sans); }
.vcard-meta b,.pan { color:#f0f7ed; }
.vcard-meta span { color:#b9d0c0; }
.toast { background:#fff; color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--gold); box-shadow:0 10px 35px #244a3425; }
.workspace-footer { margin-top:38px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; color:#849286; font-size:10px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:13px; margin:0 0 16px; }
.panel-heading h2 { margin:0; font-size:17px; font-weight:650; }
.panel-heading p { margin:4px 0 0; font-size:11px; color:var(--muted); }
.status-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 17px; }
.status-tabs button { background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 13px; color:var(--muted); font-size:12px; }
.status-tabs button.active { background:#eaf4eb; color:#24684f; border-color:#b9d7c5; font-weight:600; }
.selection-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; background:#edf6ee; border:1px solid #d4e7d8; border-radius:11px; margin-bottom:14px; }
.selection-bar .row-actions { align-items:center; }
.selection-bar>span { font-size:12px; color:#426d54; }
.table-select { width:16px; height:16px; min-height:16px; padding:0; margin:0; accent-color:#227263; vertical-align:middle; cursor:pointer; }
.select-cell { width:38px; padding-right:0; }
.card-identity { display:flex; gap:10px; align-items:center; }
.card-symbol { display:grid; place-items:center; background:#edf5ec; color:#559172; width:35px; height:35px; border-radius:9px; flex:none; }
.card-identity strong { display:block; color:#2e5747; font-size:12px; font-weight:600; }
.card-identity .id { display:block; max-width:180px; margin-top:3px; }
.icon-btn { display:inline-flex; align-items:center; gap:5px; }
.user-name { display:flex; align-items:center; gap:9px; }
.user-name .profile-avatar { width:29px; height:29px; font-size:12px; border-radius:9px; }
.table-summary { color:#87978b; font-size:10px; margin:12px 2px 26px; }
.flow-steps { display:flex; align-items:center; gap:12px; margin:20px 0 25px; }
.flow-step { display:flex; align-items:center; gap:8px; color:#809488; font-size:11px; white-space:nowrap; }
.flow-step b { display:grid; place-items:center; width:27px; height:27px; border:1px solid #d6e5d9; border-radius:50%; font-size:11px; font-weight:500; }
.flow-step.active { color:#225c4e; font-weight:600; }
.flow-step.active b { background:#277a67; color:#fff; border-color:#277a67; box-shadow:0 0 0 4px #277a6709; }
.flow-step.done b { background:#e7f4e9; color:#428464; }
.flow-rule { height:1px; flex:1; background:#dce8df; min-width:12px; }

/* Login/registration: warm intro + white step-driven form, matching the reference. */
body.is-auth-view .app { display:block; }
body.is-auth-view #sidebar { position:static; width:min(1240px,calc(100% - 64px)); height:94px; padding:0; margin:auto; border:0; border-bottom:1px solid var(--line); background:transparent; flex-direction:row; align-items:center; justify-content:space-between; }
body.is-auth-view .brand { padding:0; }
.auth-header-end { display:flex; align-items:center; gap:18px; color:#6a8071; font-size:12px; }
.service-chip { display:inline-flex; align-items:center; gap:7px; border-radius:7px; background:#eaf3eb; padding:7px 11px; font-size:11px; }
.service-chip .ui-icon { width:14px; height:14px; }
body.is-auth-view .main { width:min(1240px,calc(100% - 64px)); margin:auto; padding:44px 0 30px; }
body.is-auth-view .topbar { display:none; }
.auth-workspace { display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1fr); gap:42px; align-items:stretch; }
.auth-intro { position:relative; overflow:hidden; background:#e5f0e8; border:1px solid #d4e6da; border-radius:24px; padding:40px 38px 30px; display:flex; flex-direction:column; min-height:650px; }
.auth-intro>.eyebrow { margin:0; color:#648270; font-size:10px; letter-spacing:1.8px; }
.auth-intro h1 { color:#174f44; font-family:var(--sans); font-size:42px; font-weight:650; line-height:1.5; letter-spacing:-1.2px; margin:25px 0 15px; }
.auth-intro>p { color:#57756a; font-size:13px; max-width:340px; line-height:1.95; margin:0; }
.brand-art { position:relative; flex:1; min-height:235px; display:grid; place-items:center; isolation:isolate; margin:15px 0 24px; }
.art-grid { position:absolute; inset:0; background-image:linear-gradient(#acc39925 1px,transparent 1px),linear-gradient(90deg,#acc39925 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse,#000,transparent 70%); }
.art-orbit { position:absolute; width:300px; height:145px; border:1px solid #b6d5c1; border-radius:50%; transform:rotate(-25deg); z-index:-1; }
.art-orbit.second { width:240px; height:210px; transform:rotate(33deg); border-style:dashed; }
.art-card { position:relative; width:230px; height:144px; padding:23px; background:#f8fcf5; border:1px solid #fff; border-radius:19px; box-shadow:0 16px 35px #456a3718; transform:rotate(-8deg); }
.art-card::before { content:""; position:absolute; inset:-13px 9px 13px -9px; background:#bfdaca; border:1px solid #d7e9d8; border-radius:19px; transform:rotate(15deg); z-index:-1; }
.art-card strong { font-size:18px; letter-spacing:1px; color:#29694f; }
.art-card>.ui-icon { float:right; color:#73a48a; }
.art-card .art-number { margin-top:23px; font:15px var(--mono); color:#739582; letter-spacing:4px; }
.art-card small { display:block; color:#7e9c88; font-size:8px; letter-spacing:2px; margin-top:10px; }
.art-spark { position:absolute; right:9px; top:24px; background:#f3dcc7; border:1px solid #ebcaae; color:#92704d; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.intro-reassurance { display:flex; gap:12px; border-top:1px solid #c9ded0; padding-top:24px; color:#578c72; }
.intro-reassurance>div>strong { display:block; font-size:12px; color:#285e4e; font-weight:600; }
.intro-reassurance p { color:#668371; font-size:11px; line-height:1.8; margin:6px 0 0; }
.auth-flow { min-width:0; }
.environment-strip { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 18px; border:1px solid #eadfce; border-radius:10px; background:#f6efe5; color:#796047; font-size:11px; }
.environment-strip>span { display:flex; align-items:center; gap:10px; }
.environment-strip strong { font-size:17px; font-weight:650; }
.environment-strip small { font-size:10px; }
.auth-flow .flow-steps { margin:22px 0 24px; }
.auth-shell.card { max-width:none; margin:0; padding:32px; min-height:525px; border-radius:18px; display:flex; flex-direction:column; }
.auth-heading { display:flex; gap:13px; align-items:center; }
.auth-heading .title-icon { display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:13px; color:#53806b; background:#e9f4ec; }
.auth-heading h2 { margin:0; font-size:24px; color:#245c50; letter-spacing:-.7px; font-weight:650; }
.auth-heading p { margin:5px 0 0; font-size:12px; color:var(--muted); }
.auth-tabs { margin:24px 0 21px; border-bottom:1px solid var(--line); gap:22px; }
.auth-tabs .btn { border:0; border-bottom:2px solid transparent; border-radius:0; padding:9px 0; min-height:38px; background:none; color:#8a9a8e; font-size:13px; }
.auth-tabs .btn.primary { border-bottom-color:#328976; color:#246b57; }
.auth-tabs .btn.primary:hover, .auth-tabs .btn.primary:focus-visible { background:#eef6f0; color:#17594e; border-bottom-color:#328976; }
.auth-form { gap:16px; }
.auth-shell > .auth-form { margin-top:24px; }
.auth-form input { min-height:48px; padding:12px 14px; }
.auth-form .field { min-width:0; }
.auth-submit { min-height:47px; margin-top:5px; }
.auth-submit .ui-icon { width:16px; height:16px; margin-left:8px; }
.auth-note { display:flex; align-items:flex-start; gap:9px; padding-top:21px; border-top:1px solid #e9f0e9; margin-top:auto; padding-bottom:0; font-size:10px; color:#71927a; }
.auth-note .ui-icon { width:14px; height:14px; margin-top:3px; }
.auth-note p { margin:0; }
.auth-features { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:28px 0; }
.auth-features>div+div { border-left:1px solid var(--line); padding-left:24px; }
.auth-features .ui-icon { color:#75a98d; width:17px; }
.auth-features strong { display:block; font-size:12px; margin:8px 0 4px; font-weight:600; color:#3b6e56; }
.auth-features p { margin:0; font-size:10px; color:#7e9382; line-height:1.8; }
@media(max-width:1120px) {
  .app { grid-template-columns:210px minmax(0,1fr); }
  .main { padding-left:23px; padding-right:23px; }
  .topbar { align-items:flex-start; }
  .top-actions { max-width:260px; }
  .refresh-caption { display:none; }
  .auth-workspace { gap:25px; }
  .auth-intro { padding:32px 28px; }
  .auth-intro h1 { font-size:35px; }
}
@media(max-width:980px) {
  .app { display:block; }
  #sidebar { position:static; height:auto; padding:19px 22px 13px; border-right:0; border-bottom:1px solid var(--line); }
  .brand { padding:0 0 15px; }
  .sidebar-profile,.nav-caption,.side-foot { display:none; }
  .nav { flex-direction:row; overflow:auto; padding-bottom:3px; gap:5px; }
  .nav button { white-space:nowrap; padding:9px 12px; min-height:38px; }
  .nav button .nav-caret { display:none; }
  .nav .ui-icon { width:16px; height:16px; }
  .main { padding:0 22px 35px; }
  .topbar { min-height:104px; }
  .top-actions { max-width:310px; }
  .split { grid-template-columns:1fr; }
}
@media(max-width:800px) {
  body.is-auth-view #sidebar,body.is-auth-view .main { width:calc(100% - 36px); }
  body.is-auth-view #sidebar { height:78px; }
  body.is-auth-view .main { padding-top:25px; }
  .auth-workspace { grid-template-columns:1fr; gap:24px; }
  .auth-intro { min-height:0; padding:25px; border-radius:18px; }
  .auth-intro h1 { font-size:30px; margin:12px 0 9px; }
  .auth-intro h1 br { display:none; }
  .auth-intro>p { max-width:none; font-size:12px; }
  .brand-art,.intro-reassurance { display:none; }
  .auth-flow .flow-steps { margin:20px 0; }
  .auth-shell.card { min-height:0; padding:28px; }
  .auth-note { margin-top:10px; }
  .auth-header-end>span:not(.service-chip) { display:none; }
}
@media(max-width:520px) {
  #sidebar { padding:17px 16px 10px; }
  .main { padding:0 16px 28px; }
  .topbar { flex-direction:column; gap:13px; padding:21px 0; align-items:stretch; }
  .topbar h1 { font-size:24px; }
  .top-actions { justify-content:flex-start; max-width:none; }
  .top-actions .account-button { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stats { grid-template-columns:1fr 1fr; gap:10px; }
  .stat { padding:16px; }
  .stat strong { font-size:25px; }
  .filters { padding:15px; gap:10px; }
  .filters .field,.filters .field.grow { min-width:0; flex-basis:calc(50% - 10px); }
  .filters .field.grow { flex-basis:100%; }
  .selection-bar { align-items:flex-start; flex-direction:column; }
  .card { padding:19px; }
  .drawer { padding:21px; width:100%; max-width:100%; }
  .modal { padding:23px; }
  .workspace-footer { flex-direction:column; gap:5px; font-size:10px; }
  .auth-header-end { gap:0; }
  .service-chip { font-size:9px; padding:6px 8px; }
  .auth-intro h1 { font-size:27px; }
  .auth-shell.card { padding:23px; }
  .auth-heading h2 { font-size:22px; }
  .environment-strip { padding:13px; gap:8px; }
  .environment-strip strong { font-size:15px; }
  .environment-strip small { max-width:94px; text-align:right; }
  .flow-steps { gap:8px; }
  .flow-step { gap:5px; font-size:10px; }
  .flow-step b { width:23px; height:23px; }
  .flow-rule { min-width:6px; }
  .auth-features { gap:15px; }
  .auth-features>div+div { padding-left:15px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }