:root {
  --bg: #eff3f8;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: #ffffff;
  --text: #172033;
  --muted: #7c879d;
  --line: rgba(133, 152, 184, 0.16);
  --line-strong: rgba(104, 123, 158, 0.22);
  --shadow: 0 22px 60px rgba(20, 34, 68, 0.08);
  --shadow-soft: 0 10px 24px rgba(37, 58, 106, 0.08);
  --primary: #415cff;
  --primary-soft: rgba(65, 92, 255, 0.12);
  --purple: #7c4dff;
  --purple-soft: rgba(124, 77, 255, 0.12);
  --green: #2bb673;
  --green-soft: rgba(43, 182, 115, 0.12);
  --amber: #ffbb37;
  --amber-soft: rgba(255, 187, 55, 0.14);
  --red: #ff6a7b;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

/* JS 能力中心 */
.runtime-page { padding: 24px 28px 42px; color: #1e2442; }
.runtime-hero { display:flex; justify-content:space-between; align-items:flex-start; padding:30px 34px; border-radius:22px; color:#fff; background:linear-gradient(135deg,#202b69 0%,#3157d8 58%,#5d7cff 100%); box-shadow:0 16px 38px rgba(45,76,177,.2); }
.runtime-hero h1 { margin:7px 0 8px; font-size:30px; }
.runtime-hero p { margin:0; color:rgba(255,255,255,.75); }
.runtime-kicker { font-size:11px; letter-spacing:.18em; font-weight:800; color:#9de7ff; }
.runtime-online { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.12); font-size:13px; }
.runtime-online i { width:8px; height:8px; border-radius:50%; background:#ffb547; }
.runtime-online.online i { background:#48e5a4; box-shadow:0 0 0 5px rgba(72,229,164,.15); }
.runtime-hero-actions { display:flex; align-items:center; gap:10px; }
.runtime-hero-actions > a { padding:8px 12px; border:1px solid rgba(255,255,255,.2); border-radius:9px; color:#fff; background:rgba(255,255,255,.1); text-decoration:none; font-size:12px; }
.runtime-connect { display:flex; align-items:center; gap:12px; margin:18px 0; padding:14px 16px; background:#fff; border:1px solid #e7eaf4; border-radius:14px; }
.runtime-connect label { font-weight:700; }
.runtime-connect input { width:260px; }
.runtime-connect span { color:#7d839d; font-size:13px; }
.runtime-connect input,.runtime-inspector input,.runtime-tests-panel input,.runtime-filters input,.runtime-filters select { border:1px solid #dfe3ef; border-radius:9px; padding:10px 12px; background:#fff; color:#232946; outline:none; }
.runtime-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.runtime-metrics > div { padding:18px 20px; border:1px solid #e7eaf4; border-radius:14px; background:#fff; }
.runtime-metrics span { display:block; color:#8389a1; font-size:13px; }
.runtime-metrics strong { display:block; margin-top:5px; font-size:26px; }
.runtime-tabs { display:flex; gap:7px; padding:5px; width:max-content; background:#eef1f8; border-radius:11px; margin-bottom:14px; }
.runtime-tabs button { border:0; border-radius:8px; padding:9px 16px; background:transparent; color:#656b82; cursor:pointer; }
.runtime-tabs button.active { background:#fff; color:#3456da; font-weight:700; box-shadow:0 2px 8px rgba(31,45,92,.08); }
.runtime-workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.runtime-catalog,.runtime-inspector,.runtime-tests-panel { background:#fff; border:1px solid #e5e8f2; border-radius:16px; overflow:hidden; }
.runtime-filters { display:flex; align-items:center; gap:9px; padding:14px; border-bottom:1px solid #eceef5; }
.runtime-filters input { flex:1; }
.runtime-filters span { margin-left:auto; color:#858ba0; font-size:12px; white-space:nowrap; }
.runtime-table-wrap { max-height:620px; overflow:auto; }
.runtime-table { width:100%; border-collapse:collapse; font-size:13px; }
.runtime-table th { position:sticky; top:0; z-index:1; padding:11px 13px; text-align:left; background:#f8f9fc; color:#7a8097; font-weight:600; }
.runtime-table td { padding:11px 13px; border-top:1px solid #f0f1f6; }
.runtime-table tr { cursor:pointer; }
.runtime-table tbody tr:hover,.runtime-table tr.selected { background:#f5f7ff; }
.runtime-table code { color:#274fcf; font-size:12px; font-weight:650; }
.runtime-risk,.runtime-state { display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; white-space:nowrap; background:#f0f2f7; color:#697086; }
.runtime-risk.side_effect { background:#fff3db; color:#a26700; }
.runtime-risk.dangerous { background:#ffe8ea; color:#c03543; }
.runtime-state.ok { background:#e4f8ef; color:#18895d; }
.runtime-inspector { padding:20px; position:sticky; top:18px; }
.runtime-inspector h3 { margin:0 0 8px; word-break:break-all; }
.runtime-inspector p { color:#7b8197; font-size:13px; line-height:1.65; }
.runtime-inspector label,.runtime-tests-panel label { display:block; margin:16px 0 7px; font-size:12px; color:#73798f; font-weight:650; }
.runtime-inspector textarea { width:100%; min-height:90px; resize:vertical; padding:11px; border:1px solid #dfe3ef; border-radius:9px; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.runtime-inspector input,.runtime-tests-panel input { width:100%; }
.runtime-detail-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #eff1f6; font-size:13px; }
.primary-btn { border:0; border-radius:9px; padding:10px 16px; color:#fff; background:#4264e8; cursor:pointer; }
.primary-btn:disabled,button:disabled { opacity:.55; cursor:not-allowed; }
.primary-btn.wide { width:100%; margin-top:14px; }
.runtime-empty { min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#959aab; gap:6px; }
.runtime-result { max-height:290px; overflow:auto; margin:16px 0 0; padding:13px; border-radius:10px; white-space:pre-wrap; word-break:break-word; font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; background:#f4f6fa; }
.runtime-result.ok { border-left:3px solid #35b77e; }
.runtime-result.error { border-left:3px solid #e45461; color:#b33b46; }
.runtime-doc-grid,.runtime-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.runtime-doc-grid article,.runtime-examples article { padding:22px; background:#fff; border:1px solid #e5e8f2; border-radius:16px; }
.runtime-doc-grid article > span { color:#4d6cef; font-size:12px; font-weight:800; letter-spacing:.14em; }
.runtime-doc-grid h3,.runtime-examples b { margin:8px 0; }
.runtime-doc-grid p,.runtime-examples span { color:#7b8197; font-size:13px; line-height:1.65; }
.runtime-doc-grid pre,.runtime-examples pre { margin:15px 0 0; padding:14px; border-radius:10px; color:#dbe4ff; background:#202842; overflow:auto; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.runtime-doc-grid article.wide { grid-column:1/-1; }
.runtime-endpoints { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.runtime-endpoints code { padding:7px 10px; border-radius:7px; color:#3456da; background:#eef2ff; }
.runtime-doc-grid a { color:#3456da; font-weight:700; text-decoration:none; }
.runtime-examples article > div { display:flex; justify-content:space-between; gap:12px; }
.runtime-tests-panel { padding:26px; }
.runtime-tests-panel p { color:#7b8197; }
.runtime-tests-panel label { max-width:420px; }
.runtime-test-actions { display:flex; gap:10px; margin-top:18px; }
.runtime-test-actions button { border:1px solid #dfe3ef; border-radius:9px; padding:10px 17px; background:#fff; cursor:pointer; }
.runtime-test-actions .primary-btn { border-color:#4264e8; background:#4264e8; }
@media (max-width:1100px) { .runtime-workspace { grid-template-columns:1fr; } .runtime-inspector { position:static; } .runtime-metrics { grid-template-columns:repeat(2,1fr); } }

/* 在线 IDE */
.ide-page { padding:20px 22px 40px; color:#1d2438; }
.ide-head { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 26px; border-radius:18px; color:#fff; background:linear-gradient(125deg,#11182d 0%,#1d2e61 55%,#315be2 100%); box-shadow:0 16px 36px rgba(20,37,90,.2); }
.ide-head > div > span { color:#62dcff; font-size:10px; font-weight:800; letter-spacing:.18em; }
.ide-head h1 { margin:5px 0 5px; font-size:26px; }
.ide-head p { margin:0; color:rgba(255,255,255,.67); font-size:13px; }
.ide-online { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; }
.ide-online i { width:8px; height:8px; border-radius:50%; background:#ffb74d; }
.ide-online.online i { background:#45e3a1; box-shadow:0 0 0 5px rgba(69,227,161,.12); }
.ide-connect { display:flex; align-items:flex-end; gap:10px; margin:14px 0; padding:11px 13px; border:1px solid #e2e7f1; border-radius:13px; background:#fff; }
.ide-connect label { display:grid; gap:5px; color:#747d91; font-size:11px; font-weight:650; }
.ide-connect input,.ide-connect select,.ide-node-config select,.ide-node-search input { min-height:34px; padding:7px 10px; border:1px solid #dce2ee; border-radius:8px; color:#26304a; background:#fff; outline:none; }
.ide-connect select:focus,.ide-connect input:focus { border-color:#6e89ef; box-shadow:0 0 0 3px rgba(78,105,232,.1); }
.ide-connect select:disabled { color:#929bad; background:#f5f7fb; }
.ide-connect .ide-device-select { min-width:330px; }
.ide-connect .ide-device-select select { width:100%; max-width:440px; }
.ide-connect .ide-device-select small { max-width:440px; overflow:hidden; color:#9aa2b2; font-size:10px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.ide-connect .ide-token { flex:1; max-width:420px; }
.ide-connect button,.ide-pane header button { min-height:34px; padding:7px 12px; border:1px solid #dce2ee; border-radius:8px; color:#4e5870; background:#fff; cursor:pointer; }
.ide-connect > span { margin:0 0 9px auto; color:#7f899d; font-size:12px; }
.ide-studio { display:grid; grid-template-columns:minmax(270px,.78fr) minmax(320px,1.02fr) minmax(380px,1.2fr); height:calc(100vh - 220px); min-height:700px; gap:10px; }
.ide-pane { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #dfe5ef; border-radius:14px; background:#fff; box-shadow:0 7px 20px rgba(37,52,87,.05); }
.ide-pane > header { min-height:51px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-bottom:1px solid #e8ecf3; background:#fafbfd; }
.ide-pane > header > div { display:flex; align-items:baseline; gap:8px; min-width:0; }
.ide-pane > header b { font-size:13px; }
.ide-pane > header span { color:#8b94a7; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ide-pane > header .primary-btn { color:#fff; border-color:#4366ed; background:#4366ed; }
.ide-capture-actions { display:flex; align-items:center; gap:6px; }
.ide-pane > header .ide-deep-capture { color:#53617a; border-color:#d9e0ec; background:#f8f9fc; }
.ide-pane > header .ide-deep-capture:hover:not(:disabled) { color:#3759ce; border-color:#8fa2e9; background:#f2f5ff; }
.ide-editor { flex:1; min-height:280px; width:100%; resize:none; border:0; outline:0; padding:17px; color:#d7e1f8; caret-color:#73d9ff; background:#172036; tab-size:2; font:12px/1.68 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.ide-console { height:205px; display:flex; flex-direction:column; color:#cbd6eb; background:#101727; border-top:1px solid #2c3850; }
.ide-console > div { display:flex; justify-content:space-between; padding:9px 12px; color:#8492aa; border-bottom:1px solid #273148; font-size:10px; }
.ide-console pre { flex:1; overflow:auto; margin:0; padding:11px 13px; white-space:pre-wrap; word-break:break-word; color:#bde8d4; font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ide-node-config { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:10px; border-bottom:1px solid #edf0f5; background:#fff; }
.ide-node-config label { min-width:0; display:grid; gap:4px; color:#768095; font-size:10px; }
.ide-node-config select { width:100%; min-width:0; font-size:11px; }
.ide-capture-hint { padding:7px 10px; border-bottom:1px solid #edf0f5; background:#f8faff; color:#7f899c; font-size:9px; line-height:1.5; }
.ide-capture-hint b { color:#4562cf; }
.ide-check { display:flex !important; align-items:center; gap:5px !important; color:#6f788b !important; font-size:10px !important; white-space:nowrap; }
.ide-check input { margin:0; accent-color:#4767ed; }
.ide-depth { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:10px; padding:8px 11px; border-bottom:1px solid #edf0f5; color:#707a90; font-size:10px; }
.ide-depth b { color:#3159df; }
.ide-depth input { width:100%; accent-color:#4164e8; }
.ide-depth button { padding:4px 7px; border:1px solid #d9e0ee; border-radius:6px; color:#52617b; background:#fff; font-size:9px; cursor:pointer; }
.ide-node-search { display:grid; gap:6px; padding:9px 10px; border-bottom:1px solid #edf0f5; }
.ide-node-search input { width:100%; }
.ide-node-search span { color:#8790a2; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ide-node-list { flex:1; min-height:0; overflow:auto; padding:5px 0; }
.ide-node-list > button { width:100%; min-height:34px; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:7px; padding-top:5px; padding-right:9px; padding-bottom:5px; border:0; border-left:3px solid transparent; text-align:left; color:#394258; background:transparent; cursor:pointer; }
.ide-node-list > button:hover { background:#f5f7fc; }
.ide-node-list > button.selected { border-left-color:#4969ef; background:#edf2ff; }
.ide-node-list em { display:grid; place-items:center; width:22px; height:20px; border-radius:5px; color:#65718b; background:#edf0f6; font-size:9px; font-style:normal; }
.ide-node-list span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.ide-node-list small { max-width:80px; overflow:hidden; text-overflow:ellipsis; color:#a0a7b5; font-size:8px; white-space:nowrap; }
.ide-empty { padding:45px 18px; color:#99a1b1; text-align:center; font-size:11px; }
.ide-empty.compact { padding:20px 8px; }
.ide-device-stage { flex:1; min-height:360px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; background:linear-gradient(145deg,#eef2f8,#e4e9f2); }
.ide-screen { position:relative; max-width:100%; max-height:100%; aspect-ratio:1080/2340; height:100%; overflow:hidden; border:4px solid #172033; border-radius:16px; background:#111827; box-shadow:0 14px 30px rgba(22,33,58,.2); }
.ide-screen.node-canvas { background-color:#f7f9fd; background-image:linear-gradient(rgba(77,101,157,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(77,101,157,.09) 1px,transparent 1px),linear-gradient(rgba(77,101,157,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(77,101,157,.05) 1px,transparent 1px); background-size:40px 40px,40px 40px,10px 10px,10px 10px; }
.ide-screen img { display:block; width:100%; height:100%; object-fit:fill; }
.ide-preview-empty { position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:20px; color:#7f899c; font-size:9px; text-align:center; }
.ide-preview-empty b { color:#59677f; font-size:12px; }
.ide-node-box { position:absolute; z-index:2; padding:0; border:1px solid rgba(255,185,48,.72); background:transparent; pointer-events:auto; cursor:pointer; }
.ide-node-box.text { border-color:rgba(29,218,239,.9); background:rgba(29,218,239,.025); }
.ide-node-box.clickable { border-color:rgba(55,220,139,.92); background:rgba(55,220,139,.025); }
.ide-node-box.structure { border-color:rgba(255,185,48,.62); }
.ide-node-box.canvas-only { background:rgba(255,255,255,.16); }
.ide-node-box.canvas-only.text { background:rgba(29,218,239,.07); }
.ide-node-box.canvas-only.clickable { background:rgba(55,220,139,.07); }
.ide-node-box.canvas-only > span { position:absolute; left:1px; top:1px; max-width:calc(100% - 2px); overflow:hidden; color:#176c78; background:rgba(231,253,255,.9); font-size:6px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.ide-node-box.selected { z-index:5; border:2px solid #ff3f66; background:rgba(255,63,102,.08); box-shadow:0 0 0 1px rgba(255,255,255,.72),0 0 10px rgba(255,63,102,.5); }
.ide-bound-modes { display:flex; align-items:center; padding:2px; border-radius:7px; background:#edf1f7; }
.ide-pane > header .ide-bound-modes button { min-height:25px; padding:4px 7px; border:0; color:#768096; background:transparent; font-size:9px; }
.ide-pane > header .ide-bound-modes button.active { color:#fff; background:#4969eb; box-shadow:0 2px 7px rgba(73,105,235,.22); }
.ide-active-label { position:absolute; z-index:7; max-width:76%; display:grid; gap:1px; padding:4px 6px; border-radius:5px; color:#fff; background:rgba(20,28,46,.92); transform:translateY(calc(-100% - 4px)); box-shadow:0 4px 12px rgba(0,0,0,.28); pointer-events:none; }
.ide-active-label.below { transform:translateY(4px); }
.ide-active-label b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
.ide-active-label span { color:#aebbd2; font-size:7px; white-space:nowrap; }
.ide-bound-legend { display:flex; align-items:center; gap:9px; padding:6px 10px; border-top:1px solid #e7ebf2; color:#758095; background:#fafbfd; font-size:8px; }
.ide-bound-legend span { display:flex; align-items:center; gap:4px; }
.ide-bound-legend i { width:10px; height:7px; display:inline-block; border:1px solid; }
.ide-bound-legend i.text { border-color:#1ddacf; }
.ide-bound-legend i.clickable { border-color:#37dc8b; }
.ide-bound-legend i.structure { border-color:#ffb930; }
.ide-bound-legend i.selected { border:2px solid #ff3f66; }
.ide-bound-legend em { margin-left:auto; color:#99a2b2; font-style:normal; }
.ide-node-detail { height:162px; overflow:auto; padding:8px 12px; border-top:1px solid #e7ebf2; }
.ide-node-detail > div:first-child { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; }
.ide-node-detail > div:first-child span { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#65718a; font-size:9px; white-space:nowrap; }
.ide-node-detail dl { display:grid; grid-template-columns:58px minmax(0,1fr); gap:8px; margin:0; padding:5px 0; border-top:1px solid #f0f2f6; font-size:9px; }
.ide-node-detail dt { color:#8d95a5; }
.ide-node-detail dd { margin:0; overflow-wrap:anywhere; color:#3c465d; }
@media (max-width:1380px) { .ide-studio { grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr); height:auto; } .ide-preview-pane { grid-column:1/-1; min-height:820px; } .ide-node-detail { height:150px; } }
@media (max-width:920px) { .ide-studio { grid-template-columns:1fr; } .ide-preview-pane { grid-column:auto; } .ide-connect { align-items:stretch; flex-direction:column; } .ide-connect > span { margin:0; } }

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(101, 126, 255, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(124, 77, 255, 0.1), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #eff3f8 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.shell {
  display: grid;
  grid-template-columns: 152px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 18px 10px;
  border-right: 1px solid rgba(140, 152, 175, 0.16);
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.nav-caption {
  font-size: 11px;
  color: #99a4bb;
  margin: 18px 8px 10px;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  text-align: left;
  background: transparent;
  color: #4d5a74;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  transition: 0.18s ease;
}

.nav-item span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.72);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, #0f1b3a 0%, #1f2c54 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.nav-bullet {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.82;
}

.sidebar-foot {
  margin-top: auto;
  padding-top: 18px;
}

.mini-bot {
  margin-top: 18px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, #d6eeff 0%, #f5f8ff 100%);
  box-shadow: var(--shadow-soft);
  text-align: center;
  color: #4f5d79;
}

.main {
  padding: 16px 18px 20px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}

.crumb {
  color: var(--muted);
  font-size: 13px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.circle-btn,
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  color: #5a6784;
}

.avatar {
  background: linear-gradient(135deg, #111827 0%, #374151 100%);
  color: #fff;
  font-weight: 700;
}

.pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  color: #556178;
  font-size: 12px;
  white-space: nowrap;
}

.pill.gold {
  color: #7e5a12;
  background: linear-gradient(180deg, #fff7d8 0%, #f7ebbe 100%);
}

.page-grid {
  display: grid;
  gap: 14px;
}

.dashboard-page {
  display: grid;
  gap: 10px;
}

.dashboard-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 0;
}

.dashboard-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: #161d2f;
}

.dashboard-wave {
  font-size: 20px;
}

.dashboard-subtitle {
  margin-top: 6px;
  font-size: 11px;
  color: #97a1b7;
}

.dashboard-filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(134, 148, 178, 0.14);
}

.dashboard-icon-btn,
.dashboard-range {
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  color: #69748d;
  font-size: 11px;
}

.dashboard-icon-btn {
  width: 28px;
  padding: 0;
  background: rgba(244, 247, 251, 0.92);
}

.dashboard-range.active {
  color: #1d2942;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 3px 12px rgba(33, 49, 90, 0.08);
}

.dashboard-top-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr 0.98fr;
  gap: 10px;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;
  gap: 10px;
}

.dashboard-panel {
  min-height: 228px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(138, 151, 180, 0.12);
  box-shadow: 0 6px 18px rgba(36, 52, 88, 0.05);
}

.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dashboard-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: #232d45;
}

.dashboard-panel-sub {
  margin-top: 2px;
  font-size: 10px;
  color: #a0a9bc;
}

.dashboard-status-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  color: #23b86d;
  background: rgba(55, 210, 126, 0.12);
}

.dashboard-total {
  margin-top: 8px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: #1a243a;
}

.dashboard-total-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #98a2b8;
}

.dashboard-rows,
.dashboard-feedback-list,
.dashboard-platform-list {
  margin-top: 8px;
}

.dashboard-row,
.dashboard-platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  border-top: 1px solid rgba(140, 153, 181, 0.12);
  font-size: 12px;
  color: #4f5a73;
}

.dashboard-row-left,
.dashboard-platform-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.dashboard-total-side {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 10px;
  color: #9ca6ba;
}

.dashboard-total-side strong {
  font-size: 13px;
  color: #1d2942;
}

.dashboard-platform-left .muted {
  font-size: 10px;
}

.dashboard-platform-line {
  width: 3px;
  height: 12px;
  border-radius: 999px;
}

.dashboard-feedback-icon {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  opacity: 0.9;
}

.dashboard-device-panel {
  min-height: 215px;
}

.dashboard-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.dashboard-qr-card {
  padding: 10px 8px 8px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(252, 253, 255, 0.92);
}

.dashboard-qr-code {
  width: 70px;
  height: 70px;
  margin: 0 auto 8px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, #111 10%, transparent 10%, transparent 20%, #111 20%, #111 30%, transparent 30%, transparent 40%, #111 40%, #111 50%, transparent 50%, transparent 60%, #111 60%, #111 70%, transparent 70%, transparent 80%, #111 80%),
    linear-gradient(#111 10%, transparent 10%, transparent 20%, #111 20%, #111 30%, transparent 30%, transparent 40%, #111 40%, #111 50%, transparent 50%, transparent 60%, #111 60%, #111 70%, transparent 70%, transparent 80%, #111 80%),
    #fff;
  background-size: 18px 18px;
  border: 5px solid #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.06);
}

.dashboard-qr-title {
  font-size: 11px;
  font-weight: 700;
  color: #28324a;
}

.dashboard-qr-sub {
  margin-top: 4px;
  font-size: 10px;
  color: #9aa4b8;
}

.dashboard-stepbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.dashboard-step {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #93a0b8;
  background: rgba(235, 239, 247, 0.95);
}

.dashboard-step.active {
  color: #fff;
  background: #4880ff;
}

.dashboard-step-line {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: rgba(198, 207, 224, 0.62);
}

.dashboard-step-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 10px;
  color: #97a1b5;
}

.dashboard-opt-panel {
  min-height: 215px;
}

.dashboard-ai-link {
  padding: 0;
  background: transparent;
  color: #7a67ff;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-opt-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.dashboard-report-card,
.dashboard-alert-card {
  min-height: 144px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(137, 151, 180, 0.12);
  background: rgba(252, 253, 255, 0.94);
}

.dashboard-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-report-title {
  font-size: 12px;
  font-weight: 700;
  color: #202a42;
}

.dashboard-report-meta {
  font-size: 10px;
  color: #97a1b7;
  white-space: nowrap;
}

.dashboard-report-empty {
  min-height: 94px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px dashed rgba(188, 198, 216, 0.55);
  color: #b1b9c9;
  font-size: 11px;
}

.dashboard-alert-box {
  margin-top: 8px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 247, 247, 0.98), rgba(255, 242, 242, 0.96));
  border: 1px solid rgba(255, 196, 196, 0.72);
}

.dashboard-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}

.dashboard-alert-head span {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  color: #d45a5f;
  background: rgba(255, 117, 117, 0.12);
}

.dashboard-alert-box p {
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
  color: #8c6f74;
}

.content-page {
  display: grid;
  gap: 10px;
}

.content-stage-wrap {
  padding-top: 2px;
}

.content-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.content-stage-card {
  padding: 16px 16px 14px;
  border-radius: 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(138, 151, 180, 0.12);
  box-shadow: 0 4px 14px rgba(34, 52, 89, 0.04);
  color: #1f2942;
}

.content-stage-card.active {
  border-color: rgba(95, 107, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(95, 107, 255, 0.3);
}

.content-stage-icon {
  font-size: 12px;
  color: #9b8af8;
  margin-bottom: 14px;
}

.content-stage-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 5px;
}

.content-stage-sub {
  font-size: 11px;
  color: #9ca6ba;
}

.content-page-block {
  display: grid;
  gap: 8px;
}

.content-page-title {
  font-size: 16px;
  font-weight: 800;
  color: #1b2439;
}

.content-page-sub {
  font-size: 11px;
  color: #98a3b7;
}

.content-workspace {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(140, 153, 181, 0.12);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 4px 14px rgba(33, 51, 88, 0.04);
}

.content-side {
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(244, 247, 252, 0.96));
  border-right: 1px solid rgba(140, 153, 181, 0.12);
  display: grid;
  align-content: start;
  gap: 10px;
}

.content-side-section {
  display: grid;
  gap: 6px;
}

.content-side-separator {
  height: 1px;
  background: rgba(148, 160, 186, 0.16);
  margin: 2px 2px 4px;
}

.content-side-label {
  font-size: 10px;
  color: #9aa4b8;
  padding: 0 4px;
}

.content-chip,
.content-side-link,
.content-upload-trigger,
.content-lite-btn,
.content-mini-btn {
  border-radius: 10px;
}

.content-chip {
  height: 30px;
  padding: 0 12px;
  text-align: left;
  background: rgba(240, 244, 250, 0.95);
  color: #75809a;
  font-size: 11px;
}

.content-chip.active {
  color: #fff;
  background: linear-gradient(135deg, #4f67ff 0%, #7e56ff 100%);
}

.content-side-link {
  min-height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  background: transparent;
  color: #68748d;
  font-size: 11px;
}

.content-side-link.strong {
  min-height: 34px;
  padding: 0 12px;
}

.content-side-link.active {
  background: linear-gradient(135deg, #7c4dff 0%, #5b68ff 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(111, 99, 255, 0.2);
}

.content-tool-card {
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(140, 153, 181, 0.12);
  text-align: left;
  background: rgba(255, 255, 255, 0.92);
  color: #74809a;
  display: block;
  font-size: 10px;
  line-height: 1.45;
}

.content-tool-card.active {
  background: linear-gradient(180deg, rgba(247, 244, 255, 0.98), rgba(255, 255, 255, 0.98));
  border-color: rgba(116, 93, 255, 0.22);
  box-shadow: 0 8px 20px rgba(132, 111, 255, 0.08);
}

.content-tool-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.content-tool-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #8c96aa;
  background: rgba(243, 246, 252, 0.98);
  box-shadow: inset 0 0 0 1px rgba(146, 160, 188, 0.08);
}

.content-tool-icon.violet {
  color: #9b6dff;
  background: rgba(242, 234, 255, 0.98);
}

.content-tool-icon.blue {
  color: #7eb6e4;
  background: rgba(235, 247, 255, 0.98);
}

.content-tool-icon.green {
  color: #86be98;
  background: rgba(237, 249, 240, 0.98);
}

.content-tool-icon.pink {
  color: #d79ab8;
  background: rgba(253, 241, 247, 0.98);
}

.content-tool-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.content-tool-copy > span {
  color: #92a0b5;
}

.content-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.content-tool-head strong {
  font-size: 12px;
  color: #1e2840;
}

.content-tool-tag {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  color: #8d68ff;
  background: rgba(140, 110, 255, 0.12);
}

.content-search {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(140, 153, 181, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: #2a334a;
  font-size: 11px;
}

.content-main-panel {
  min-height: 498px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(251, 252, 255, 0.98), rgba(248, 250, 255, 0.98));
}

.content-toolbar {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: #eef3fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.content-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.content-upload-trigger {
  height: 24px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #6e7b96;
  font-size: 11px;
}

.content-toolbar-tip {
  font-size: 10px;
  color: #9ca6ba;
  white-space: nowrap;
}

.content-lite-btn {
  height: 24px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #77829a;
  font-size: 10px;
}

.content-lite-btn.danger {
  color: #e49494;
  background: rgba(255, 241, 241, 0.9);
}

.content-empty-stage {
  position: relative;
  min-height: 360px;
  margin-top: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
}

.content-watermark {
  position: absolute;
  left: 26px;
  top: 46px;
  font-size: 32px;
  color: rgba(120, 120, 120, 0.45);
  font-weight: 500;
}

.content-assets-head {
  margin: 10px 0 8px;
  font-size: 11px;
  color: #77829a;
}

.content-assets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.content-asset-card {
  display: grid;
  gap: 6px;
}

.content-asset-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 108, 108, 0.2), rgba(255, 215, 82, 0.22)),
    linear-gradient(180deg, #f7d08e 0%, #cf5a50 100%);
}

.content-asset-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 35%, rgba(255, 255, 255, 0.45), transparent 14%),
    radial-gradient(circle at 60% 45%, rgba(255, 255, 255, 0.38), transparent 12%),
    radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.32), transparent 10%);
}

.content-asset-badge,
.content-asset-duration {
  position: absolute;
  z-index: 1;
  font-size: 9px;
  border-radius: 999px;
}

.content-asset-badge {
  left: 6px;
  top: 6px;
  padding: 2px 6px;
  color: #536e9b;
  background: rgba(255, 255, 255, 0.92);
}

.content-asset-badge.used {
  color: #21aa68;
}

.content-asset-duration {
  right: 6px;
  bottom: 6px;
  padding: 2px 5px;
  color: #fff;
  background: rgba(17, 24, 39, 0.72);
}

.content-asset-title {
  font-size: 10px;
  color: #4b5670;
  line-height: 1.45;
}

.content-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.content-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1e2740;
}

.content-sheet-title.top-gap {
  margin-top: 4px;
}

.content-title-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #7a59ff;
}

.content-title-dot.dark {
  background: #20253c;
}

.content-title-dot.pink {
  background: #f0cce0;
}

.content-title-dot.magenta {
  background: #d96dff;
}

.content-title-dot.publish {
  background: #3b82f6;
}

.content-title-dot.project {
  background: #6478ff;
}

.content-create-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #8a62ff 0%, #6c73ff 100%);
  font-size: 11px;
}

.content-table {
  border-radius: 12px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  overflow: hidden;
  background: #fff;
}

.content-table-head,
.content-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.7fr 0.7fr 0.9fr 0.5fr;
  gap: 10px;
  align-items: center;
}

.content-table-head.touch,
.content-table-row.touch {
  grid-template-columns: 1fr 240px 160px;
}

.content-table-head.text-video,
.content-table-row.text-video {
  grid-template-columns: 1.1fr 1.9fr 1fr 0.9fr 0.7fr 0.95fr 0.45fr;
}

.content-table-head.publish,
.content-table-row.publish {
  grid-template-columns: 1.2fr 0.5fr 1fr 0.8fr 0.6fr 0.55fr 0.75fr;
}

.content-table-head.project,
.content-table-row.project {
  grid-template-columns: 1.2fr 0.7fr 1.1fr 0.72fr 0.9fr 0.52fr 0.72fr;
}

.content-table-head {
  min-height: 42px;
  padding: 0 12px;
  background: rgba(245, 248, 252, 0.92);
  color: #99a3b8;
  font-size: 10px;
}

.content-table-row {
  min-height: 54px;
  padding: 0 12px;
  border-top: 1px solid rgba(140, 153, 181, 0.1);
  color: #4b5772;
  font-size: 10px;
}

.content-table-button {
  width: 100%;
  text-align: left;
  background: #fff;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.content-table-button:hover {
  background: rgba(248, 250, 255, 0.98);
}

.content-table-row.publish.active {
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(250, 252, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(101, 132, 255, 0.14);
}

.content-table-row.project.active {
  background: linear-gradient(180deg, rgba(243, 246, 255, 0.98), rgba(250, 252, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(99, 118, 255, 0.16);
}

.content-task-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-task-name strong {
  font-size: 11px;
  color: #1c2740;
}

.content-row-actions {
  color: #8b96ad;
  font-size: 12px;
}

.publish-layout {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
}

.publish-menu-panel {
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  align-content: start;
  gap: 8px;
}

.publish-menu-card {
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background: rgba(246, 248, 252, 0.92);
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  text-align: left;
  color: #7d879b;
}

.publish-menu-card.active {
  background: linear-gradient(180deg, rgba(240, 245, 255, 0.98), rgba(250, 252, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(104, 126, 255, 0.14);
}

.publish-menu-icon {
  color: #7f8ca8;
  font-size: 10px;
  line-height: 1.8;
}

.publish-menu-card strong {
  display: block;
  font-size: 11px;
  color: #42506b;
}

.publish-menu-card span:last-child {
  font-size: 10px;
  color: #9da8bc;
}

.publish-board-panel {
  display: grid;
  gap: 10px;
}

.publish-summary-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 18px 2px;
}

.publish-summary-item {
  display: grid;
  gap: 2px;
}

.publish-summary-item span {
  font-size: 10px;
  color: #a0aabd;
}

.publish-summary-value {
  font-size: 32px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.publish-summary-value.slate {
  color: #30384a;
}

.publish-summary-value.amber {
  color: #d8963a;
}

.publish-summary-value.green {
  color: #3daf70;
}

.publish-summary-value.red {
  color: #e16b6b;
}

.publish-board-shell {
  border-radius: 18px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(255, 255, 255, 0.96);
  padding: 10px 12px 12px;
  display: grid;
  gap: 10px;
}

.publish-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.publish-filter-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.publish-filter-tab {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  color: #818ca2;
  font-size: 11px;
}

.publish-filter-tab.active {
  color: #5f8fff;
  background: rgba(236, 242, 255, 0.98);
}

.publish-new-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #5f8fff 0%, #5e79ff 100%);
  font-size: 11px;
  box-shadow: 0 8px 16px rgba(89, 125, 255, 0.22);
}

.publish-card-list {
  display: grid;
  gap: 10px;
}

.publish-task-card {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(234, 238, 245, 0.98);
  background: rgba(251, 252, 255, 0.98);
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  text-align: left;
}

.publish-task-card.active {
  box-shadow: inset 0 0 0 1px rgba(99, 134, 255, 0.14);
}

.publish-task-poster {
  min-height: 148px;
  border-radius: 12px;
  background: linear-gradient(180deg, #eef3fb 0%, #f7f9fc 100%);
  color: #b1bac9;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.publish-task-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.publish-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.publish-task-head strong {
  font-size: 28px;
  font-weight: 500;
  color: #20293f;
  letter-spacing: -0.02em;
}

.publish-task-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.publish-detail-link {
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #5d95ff;
  background: rgba(235, 243, 255, 0.98);
  font-size: 10px;
}

.publish-inline-status {
  color: #83c96d;
  font-size: 10px;
}

.publish-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.publish-metric-box {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(247, 249, 253, 0.96);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
}

.publish-metric-box span {
  font-size: 10px;
  color: #a3aec0;
}

.publish-metric-box strong {
  font-size: 12px;
  color: #4a566f;
  font-weight: 600;
}

.publish-metric-box strong.danger {
  color: #de7b7b;
}

.publish-task-foot {
  display: grid;
  gap: 8px;
}

.publish-platform-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #99a4b8;
}

.publish-platform-row em {
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  color: #22a567;
  background: rgba(228, 247, 237, 0.98);
}

.publish-copy-row {
  font-size: 11px;
  color: #8c97aa;
}

.publish-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 2px;
}

.publish-page-arrow,
.publish-page-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #8c97aa;
  font-size: 11px;
}

.publish-page-btn.active {
  color: #4f84ff;
  background: rgba(237, 243, 255, 0.98);
}

.project-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-manager-summary {
  font-size: 11px;
  color: #a1aabd;
  min-height: 1px;
}

.project-manager-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #66afff 0%, #4f8fff 100%);
}

.project-manager-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.project-manager-card,
.project-manager-add-card,
.publish-list-panel,
.publish-runtime-panel {
  border-radius: 16px;
  border: 1px solid rgba(139, 152, 180, 0.14);
  background: rgba(255, 255, 255, 0.96);
}

.project-manager-card {
  min-height: 166px;
  padding: 14px 16px 14px;
  display: grid;
  gap: 10px;
  align-content: start;
  text-align: left;
  box-shadow: 0 10px 24px rgba(31, 41, 66, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.project-manager-card.active {
  border-color: rgba(110, 103, 255, 0.78);
  box-shadow: 0 12px 28px rgba(95, 107, 255, 0.08), inset 0 0 0 1px rgba(125, 111, 255, 0.18);
}

.project-manager-card:hover,
.project-manager-add-card:hover {
  transform: translateY(-1px);
}

.project-manager-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #b4bdd0;
}

.project-manager-card-icon {
  font-size: 13px;
  color: #7d71f4;
}

.project-manager-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #c1c8d6;
}

.project-manager-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-manager-card-title-row strong {
  font-size: 15px;
  color: #1f2942;
}

.project-manager-card-desc {
  min-height: 72px;
  font-size: 11px;
  line-height: 1.8;
  color: #66758d;
}

.project-manager-card-link {
  font-size: 10px;
  color: #7291df;
}

.project-manager-card-meta {
  min-height: 28px;
  font-size: 10px;
  line-height: 1.6;
  color: #9aa4b6;
}

.project-manager-card-footer {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: #919caf;
}

.project-manager-add-card {
  min-height: 166px;
  border-style: dashed;
  border-color: rgba(189, 194, 207, 0.8);
  display: grid;
  place-items: center;
  gap: 8px;
  color: #a4acbb;
  background: rgba(255, 255, 255, 0.72);
}

.project-manager-add-icon {
  font-size: 28px;
  line-height: 1;
  color: #9aa5bb;
}

.publish-runtime-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 14px;
}

.content-create-modal-head.project {
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(90deg, #4a6bff 0%, #6d63ff 48%, #8e67ff 100%);
}

.project-modal {
  max-width: 760px;
}

.project-edit-modal {
  width: min(100%, 548px);
  max-width: 548px;
  border-radius: 16px;
  border: 1px solid rgba(214, 220, 231, 0.92);
  box-shadow: 0 20px 48px rgba(38, 45, 72, 0.16);
}

.project-edit-head {
  min-height: 48px;
  padding: 0 12px 0 16px;
}

.project-edit-head .content-create-modal-title strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.project-modal-body {
  gap: 12px;
  background: rgba(248, 250, 255, 0.96);
}

.project-edit-body {
  padding: 8px 8px 6px;
  gap: 8px;
  background: #fff;
}

.project-modal-textarea {
  min-height: 92px;
  resize: none;
  line-height: 1.65;
}

.project-edit-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #414d65;
}

.project-edit-label span {
  color: #ff5a6b;
}

.project-edit-label em {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: #5f93ff;
}

.project-edit-input,
.project-edit-textarea {
  border-radius: 13px;
  border-color: rgba(220, 224, 233, 0.98);
  box-shadow: none;
  font-size: 12px;
  color: #4a556e;
}

.project-edit-input {
  height: 30px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 0;
  padding-bottom: 0;
}

.project-edit-textarea {
  min-height: 64px;
  padding-top: 8px;
  resize: none;
  line-height: 1.5;
}

.project-edit-hint {
  margin-top: 0;
  font-size: 10px;
  line-height: 1.45;
  color: #b1b8c6;
}

.project-edit-inline-field {
  position: relative;
}

.project-edit-inline-field .project-edit-input {
  padding-right: 112px;
}

.project-edit-inline-actions {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.project-edit-mini-chip {
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5efff;
  color: #b18de3;
  font-size: 9px;
}

.project-edit-mini-chip.ghost {
  background: #faf4ff;
  color: #c5a7e6;
}

.project-edit-link-btn {
  padding: 0;
  justify-self: start;
  color: #6b93ff;
  background: transparent;
  font-size: 10px;
}

.project-edit-poi-list {
  display: grid;
  gap: 6px;
}

.project-edit-poi-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 6px;
}

.project-edit-poi-platform {
  font-size: 11px;
  color: #767f91;
}

.project-edit-poi-input {
  height: 28px;
  padding: 0 11px;
  border-radius: 13px;
  border: 1px solid rgba(220, 224, 233, 0.98);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #555f74;
  background: #fff;
}

.project-edit-poi-icon {
  font-size: 9px;
  color: #b8becb;
}

.project-edit-footer {
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(235, 238, 243, 0.96);
  background: #fff;
  box-shadow: none;
}

.project-edit-head .content-modal-close.publish {
  width: auto;
  height: auto;
  border-radius: 0;
  color: #b4bac5;
  background: transparent;
  font-size: 14px;
  line-height: 1;
}

.project-edit-footer .text-video-footer-btn {
  min-width: 56px;
  height: 24px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 10px;
}

.project-edit-footer .text-video-footer-btn.primary {
  background: linear-gradient(135deg, #5f8fff 0%, #4e80ff 100%);
}

.project-section-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: #fff;
  display: grid;
  gap: 10px;
}

.project-choice-row,
.project-account-grid,
.project-flow-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.project-choice-row.compact {
  gap: 6px;
}

.project-choice-chip,
.project-account-chip,
.project-flow-tag {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
}

.project-choice-chip {
  color: #667692;
  background: rgba(244, 247, 252, 0.98);
}

.project-choice-chip.active {
  color: #fff;
  background: linear-gradient(135deg, #586eff 0%, #855bff 100%);
}

.project-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-link-btn {
  padding: 0;
  color: #6f93ff;
  background: transparent;
  font-size: 11px;
}

.project-account-chip {
  color: #5f718f;
  background: rgba(243, 246, 252, 0.98);
}

.project-account-chip.active {
  color: #4a70de;
  background: rgba(235, 241, 255, 0.98);
}

.project-flow-tag {
  display: inline-flex;
  align-items: center;
  color: #6f7b95;
  background: rgba(243, 246, 252, 0.98);
}

.project-flow-tag.active {
  color: #5a6dff;
  background: rgba(235, 239, 255, 0.98);
}

.publish-runtime-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.publish-runtime-title {
  font-size: 14px;
  font-weight: 800;
  color: #1f2942;
}

.publish-runtime-sub {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
  color: #97a2b8;
}

.publish-status {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  white-space: nowrap;
}

.publish-status.green {
  color: #22a567;
  background: rgba(230, 247, 237, 0.98);
}

.publish-status.amber {
  color: #c6841d;
  background: rgba(255, 245, 223, 0.98);
}

.publish-status.purple {
  color: #7454ff;
  background: rgba(239, 235, 255, 0.98);
}

.publish-phone-shell {
  min-height: 560px;
  border-radius: 34px;
  padding: 14px 14px 18px;
  background: linear-gradient(180deg, #17191f 0%, #2e3443 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.publish-phone-notch {
  width: 122px;
  height: 22px;
  margin: 0 auto 8px;
  border-radius: 0 0 16px 16px;
  background: #0b0d12;
}

.publish-phone-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;
  margin-bottom: 10px;
}

.publish-phone-action {
  height: 30px;
  padding: 0 14px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #ff4b74 0%, #ff315b 100%);
  font-size: 12px;
  box-shadow: 0 8px 16px rgba(255, 72, 108, 0.25);
}

.publish-phone-status,
.publish-phone-editor,
.publish-phone-hashtags,
.publish-phone-keyboard {
  border-radius: 14px;
  background: #fff;
}

.publish-phone-status {
  padding: 12px;
  background: linear-gradient(180deg, rgba(67, 73, 84, 0.94), rgba(88, 95, 108, 0.94));
  color: #fff;
}

.publish-phone-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.82);
}

.publish-phone-online {
  color: #69e1b0;
}

.publish-phone-task {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}

.publish-phone-desc {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
}

.publish-phone-editor {
  min-height: 170px;
  margin-top: 12px;
  padding: 14px 12px;
  position: relative;
}

.publish-phone-counter {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 11px;
  color: #a6afbd;
}

.publish-phone-text {
  margin-top: 34px;
  color: #8a95a9;
  font-size: 13px;
}

.publish-phone-hashtags {
  display: flex;
  gap: 10px;
  padding: 12px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #303a52;
}

.publish-phone-keyboard {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: #f1f3f7;
}

.publish-phone-keyboard span {
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #2f3749;
  font-size: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.content-flow-card,
.content-form-sheet,
.content-placeholder-sheet {
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.content-flow-card {
  padding: 12px 14px;
  margin-bottom: 10px;
}

.content-flow-title,
.content-form-title {
  font-size: 13px;
  font-weight: 800;
  color: #202a42;
}

.content-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.content-flow-item {
  display: grid;
  gap: 5px;
  font-size: 10px;
  color: #7e88a0;
  line-height: 1.45;
}

.content-flow-item span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #7a59ff;
  font-size: 9px;
}

.content-flow-item strong {
  font-size: 11px;
  color: #1f2942;
}

.content-flow-item p,
.content-placeholder-sheet p {
  margin: 0;
  line-height: 1.5;
}

.content-form-sheet {
  padding: 14px 16px 16px;
}

.content-form-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.content-form-head.synthesis {
  margin-bottom: 2px;
}

.content-form-sub {
  margin-top: 4px;
  font-size: 10px;
  color: #95a0b5;
  line-height: 1.5;
}

.digital-studio-page {
  min-height: 540px;
  border-radius: 18px;
  border: 1px solid rgba(137, 151, 179, 0.1);
  background: rgba(255, 255, 255, 0.98);
  overflow: hidden;
}

.digital-studio-page.portrait {
  background: linear-gradient(180deg, rgba(252, 252, 255, 0.98), rgba(248, 250, 255, 0.98));
}

.digital-sheet {
  min-height: 540px;
  padding: 18px 18px 20px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.digital-sheet-portrait {
  padding-top: 10px;
}

.digital-flow-card {
  margin-bottom: 2px;
  border-radius: 16px;
}

.digital-flow-grid {
  gap: 14px;
}

.digital-portrait-form {
  border-radius: 16px;
}

.digital-sheet-synthesis {
  padding-top: 18px;
}

.digital-studio-page.synthesis {
  background: linear-gradient(180deg, rgba(252, 252, 255, 0.98), rgba(249, 250, 255, 0.98));
}

.digital-synthesis-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 2px 0;
}

.digital-synthesis-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: none;
  color: #d6a2bf;
  background: rgba(250, 237, 244, 0.98);
  font-size: 12px;
}

.digital-synthesis-title {
  font-size: 17px;
  font-weight: 800;
  color: #2c344a;
}

.digital-synthesis-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #99a4b8;
  line-height: 1.5;
}

.digital-synthesis-form {
  margin-top: 8px;
  padding: 14px 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(140, 152, 181, 0.1);
  background: rgba(255, 255, 255, 0.98);
  display: grid;
  gap: 14px;
}

.digital-sheet-voice {
  min-height: 420px;
  margin: 0 18px 20px;
  min-height: 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(140, 152, 181, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.digital-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #5c6781;
}

.digital-field-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.digital-field-control {
  min-height: 44px;
  border-radius: 12px;
  border-color: rgba(141, 154, 182, 0.14);
  color: #b5bcc9;
  box-shadow: inset 0 1px 2px rgba(239, 243, 249, 0.7);
}

.digital-select-value.active {
  color: #48536b;
}

.digital-select-open {
  z-index: 2;
}

.digital-dropdown-panel {
  top: calc(100% + 6px);
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(45, 60, 110, 0.08);
}

.digital-dropdown-panel .dropdown-item {
  min-height: 28px;
  padding: 7px 10px;
  font-size: 11px;
}

.digital-count-input {
  position: relative;
}

.digital-count-input span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #c0c6d2;
}

.digital-upload-panel {
  min-height: 112px;
  border-radius: 16px;
  border: 1px solid rgba(231, 235, 243, 0.98);
  background: linear-gradient(180deg, rgba(251, 252, 254, 0.98), rgba(255, 255, 255, 0.98));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #9ba6bb;
  text-align: center;
}

.digital-upload-panel strong {
  font-size: 15px;
  color: #384258;
}

.digital-upload-panel span {
  font-size: 11px;
}

.digital-upload-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #9ca6ba;
  background: rgba(240, 243, 248, 0.96);
  font-size: 15px;
}

.digital-pill-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.digital-pill-row.compact {
  margin-top: 8px;
}

.digital-soft-pill {
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: #b0b7c5;
  background: rgba(245, 247, 251, 0.98);
}

.digital-soft-pill.active {
  color: #b061f4;
  background: rgba(247, 235, 255, 0.98);
}

.digital-main-action {
  height: 32px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #8a62ff 0%, #6c73ff 100%);
}

.digital-main-action.disabled {
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #cfd3dc 0%, #c4c8d1 100%);
  box-shadow: none;
}

.digital-guide-block {
  display: grid;
  gap: 16px;
  padding-top: 6px;
}

.digital-guide-block.compact {
  gap: 14px;
  padding-top: 8px;
}

.digital-guide-title {
  font-size: 18px;
  font-weight: 800;
  color: #2b3348;
}

.digital-guide-title.small {
  font-size: 15px;
}

.digital-guide-section {
  display: grid;
  gap: 8px;
}

.digital-guide-section strong {
  font-size: 13px;
  color: #3a4357;
}

.digital-guide-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #6f7b91;
  font-size: 12px;
  line-height: 1.65;
}

.digital-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
}

.digital-hero-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: none;
  color: #7eb6e4;
  background: rgba(233, 245, 255, 0.98);
  font-size: 12px;
}

.digital-hero-icon.voice {
  color: #7ab3df;
  background: rgba(233, 245, 255, 0.98);
}

.digital-hero-title {
  font-size: 18px;
  font-weight: 800;
  color: #2a3248;
}

.digital-hero-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #98a4b8;
  line-height: 1.5;
}

.digital-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.digital-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #30384e;
}

.digital-card-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #a2adbf;
  line-height: 1.5;
}

.digital-ghost-action {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  color: #76a8e2;
  background: rgba(236, 246, 255, 0.98);
  font-size: 11px;
}

.digital-ghost-action.compact {
  height: 24px;
  padding: 0 10px;
  color: #d79ab8;
  background: rgba(253, 241, 247, 0.98);
}

.digital-text-link {
  padding: 0;
  color: #77a8df;
  background: transparent;
  font-size: 11px;
}

.digital-field-hint {
  font-size: 11px;
  color: #aeb6c5;
  line-height: 1.5;
}

.digital-script-panel {
  min-height: 112px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(140, 153, 181, 0.12);
  background: rgba(251, 252, 255, 0.98);
  color: #a0abbe;
  font-size: 12px;
  line-height: 1.75;
}

.digital-voice-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.digital-audio-card {
  min-height: 104px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(140, 153, 181, 0.12);
  background: rgba(251, 252, 255, 0.98);
  display: grid;
  align-content: center;
  gap: 8px;
}

.digital-audio-card.accent {
  background: linear-gradient(180deg, rgba(244, 249, 255, 0.98), rgba(250, 252, 255, 0.98));
}

.digital-audio-card-label {
  font-size: 10px;
  color: #b1b8c7;
}

.digital-audio-card strong {
  font-size: 13px;
  color: #3a4458;
}

.digital-audio-card small {
  font-size: 11px;
  color: #9ca7bb;
  line-height: 1.5;
}

.digital-dual-grid {
  gap: 14px;
}

.digital-textarea-wrap {
  position: relative;
}

.digital-script-textarea {
  min-height: 126px;
  padding: 14px 16px 34px;
  border-radius: 14px;
  border-color: rgba(140, 153, 181, 0.14);
  resize: none;
  color: #b5bcc9;
  line-height: 1.6;
}

.digital-counter {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 10px;
  color: #bcc3cf;
}

.content-large-upload {
  min-height: 148px;
  border-radius: 14px;
  border: 1px dashed rgba(177, 188, 210, 0.9);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.98), rgba(247, 249, 253, 0.98)),
    linear-gradient(180deg, rgba(251, 252, 255, 0.96), rgba(245, 248, 253, 0.96));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: #8c98af;
  font-size: 11px;
  text-align: center;
}

.content-upload-file {
  color: #8668ff;
}

.content-title-dot.lavender {
  background: #e7d6f4;
}

.content-count-input {
  position: relative;
}

.content-count-input span,
.content-text-count {
  position: absolute;
  right: 12px;
  font-size: 10px;
  color: #b0b8c8;
}

.content-count-input span {
  top: 50%;
  transform: translateY(-50%);
}

.content-dropdown-wide {
  width: calc(100% - 2px);
  top: calc(100% + 4px);
  padding: 6px;
  border-radius: 12px;
}

.content-textarea-wrap {
  position: relative;
}

.content-ai-btn {
  position: absolute;
  right: 12px;
  top: -28px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  color: #d79ab8;
  background: rgba(252, 238, 244, 0.98);
  font-size: 10px;
}

.synthesis-sheet {
  min-height: 418px;
}

.synthesis-form {
  gap: 12px;
}

.synthesis-form .field-label {
  color: #6f7c96;
}

.synthesis-dropdown-field {
  z-index: 2;
}

.content-select {
  position: relative;
  padding-right: 34px;
}

.content-select::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #a7b0c1;
  font-size: 12px;
}

.dropdown-item {
  min-height: 30px;
  display: flex;
  align-items: center;
}

.synthesis-textarea {
  min-height: 170px;
  padding-top: 12px;
  padding-right: 56px;
  resize: none;
}

.content-text-count {
  bottom: 12px;
}

.content-placeholder-sheet {
  min-height: 240px;
  padding: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #8d97ac;
  text-align: center;
}

.content-placeholder-sheet.large {
  min-height: 320px;
}

.content-mini-btn {
  height: 24px;
  padding: 0 10px;
  font-size: 10px;
  background: rgba(244, 247, 252, 0.98);
  color: #7c889f;
}

.content-mini-btn.blue {
  color: #78a8ff;
  background: rgba(238, 247, 255, 0.98);
}

.content-mini-btn.red {
  color: #f09da2;
  background: rgba(255, 243, 243, 0.98);
}

.content-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 28px 24px;
  background: rgba(232, 236, 244, 0.56);
  backdrop-filter: blur(4px);
}

.content-create-modal {
  width: min(100%, 640px);
  max-width: 640px;
  max-height: calc(100vh - 56px);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(40, 44, 98, 0.28);
  border: 1px solid rgba(127, 110, 255, 0.2);
  background: #fff;
}

.content-create-modal-head {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  background: linear-gradient(90deg, #6f49ff 0%, #7f57ff 45%, #9380ff 100%);
}

.content-create-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.content-modal-icon,
.content-modal-close {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
}

.content-modal-close {
  padding: 0;
}

.content-create-modal-head.text-video {
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(90deg, #3c78e8 0%, #5b57f3 45%, #ea4b91 100%);
}

.content-create-modal-head.publish {
  min-height: 48px;
  color: #1f2942;
  background: #fff;
  border-bottom: 1px solid rgba(139, 152, 180, 0.12);
}

.content-create-modal-title.publish {
  color: #1f2942;
}

.content-modal-close.publish {
  color: #8d98ad;
  background: rgba(242, 245, 250, 0.96);
}

.content-create-modal-body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.content-inline-tip {
  color: #b7bfce;
  font-size: 11px;
  font-weight: 400;
}

.content-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -1px;
}

.content-ai-mini-btn {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #9e80d2;
  background: rgba(249, 241, 255, 0.98);
  font-size: 11px;
}

.content-modal-textarea {
  min-height: 128px;
  padding-top: 12px;
  line-height: 1.6;
  resize: none;
}

.content-textarea-wrap.modal .content-text-count {
  right: 12px;
  bottom: 10px;
}

.content-media-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #67748e;
}

.content-media-switch label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.content-media-switch input {
  margin: 0;
}

.content-upload-hint {
  font-size: 11px;
  color: #adb6c6;
}

.content-modal-upload {
  min-height: 132px;
  border-radius: 14px;
  border: 1px dashed rgba(194, 174, 220, 0.9);
  background: linear-gradient(180deg, rgba(252, 247, 255, 0.92), rgba(255, 252, 255, 0.98));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  color: #9682b7;
  font-size: 12px;
}

.content-modal-upload-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #b393dc;
  background: rgba(237, 225, 255, 0.88);
  font-size: 16px;
}

.content-generate-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.content-step-btn,
.content-step-value {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(245, 248, 252, 0.96);
  color: #6d7890;
  font-size: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
}

.content-step-value {
  width: 38px;
  color: #2c364d;
  background: #fff;
}

.content-modal-subtitle {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}

.publish-modal {
  max-width: 760px;
}

.publish-modal-body {
  gap: 12px;
  background: rgba(249, 251, 255, 0.96);
}

.publish-section-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: #fff;
  display: grid;
  gap: 10px;
}

.publish-type-row,
.publish-inline-actions,
.publish-account-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.publish-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.publish-type-chip,
.publish-light-btn,
.publish-copy-tag,
.publish-account-chip {
  height: 28px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
}

.publish-type-chip {
  color: #6c7c98;
  background: rgba(244, 247, 252, 0.98);
}

.publish-type-chip.active {
  color: #fff;
  background: linear-gradient(135deg, #3682ff 0%, #3b6dff 100%);
}

.publish-light-btn,
.publish-copy-tag {
  color: #6f85bb;
  background: rgba(241, 246, 255, 0.98);
}

.publish-link-btn {
  color: #74a1ff;
  background: transparent;
  font-size: 11px;
  padding: 0;
}

.publish-upload-caption {
  font-size: 11px;
  color: #9ca6ba;
}

.publish-upload-box {
  position: relative;
  min-height: 122px;
  border-radius: 12px;
  border: 1px dashed rgba(208, 219, 234, 0.96);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(246, 249, 252, 0.98));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: #b1bac9;
  font-size: 11px;
}

.publish-refresh-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #6ea5ff;
  background: rgba(238, 246, 255, 0.98);
  font-size: 10px;
}

.publish-upload-play {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #9ab2d6;
  background: rgba(240, 244, 250, 0.98);
}

.publish-copy-card {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(251, 252, 255, 0.98);
  display: grid;
  gap: 10px;
}

.publish-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.publish-copy-head strong {
  font-size: 12px;
  color: #273148;
}

.publish-copy-textarea {
  min-height: 84px;
  resize: none;
}

.publish-tag-input {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(180, 191, 211, 0.35);
  background: rgba(250, 251, 255, 0.98);
  color: #67748e;
  font-size: 11px;
  line-height: 1.5;
}

.publish-poi-grid {
  display: grid;
  gap: 8px;
}

.publish-poi-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #6c7893;
}

.publish-poi-input {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(180, 191, 211, 0.35);
  background: rgba(250, 251, 255, 0.98);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a0aabc;
}

.publish-account-chip {
  color: #617291;
  background: rgba(243, 246, 252, 0.98);
}

.publish-account-chip.active {
  color: #3b6bdb;
  background: rgba(233, 241, 255, 0.98);
}

.publish-schedule-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.publish-schedule-chip,
.publish-schedule-select {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
}

.publish-schedule-chip {
  color: #6f7d97;
  background: rgba(244, 247, 252, 0.98);
}

.publish-schedule-chip.active {
  color: #3f78ea;
  background: rgba(235, 243, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(77, 135, 255, 0.16);
}

.publish-schedule-select {
  position: relative;
  padding-right: 28px;
  color: #63718c;
  background: rgba(247, 249, 253, 0.98);
  border: 1px solid rgba(180, 191, 211, 0.36);
}

.publish-schedule-select::after {
  content: "⌄";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #a3adbf;
  font-size: 12px;
}

.publish-platform-summary {
  font-size: 11px;
  color: #a0aabc;
}

.publish-device-list {
  display: grid;
  gap: 8px;
}

.publish-device-row {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(250, 251, 255, 0.98);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.publish-device-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.publish-device-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(188, 198, 216, 0.9);
  background: #fff;
  flex: none;
}

.publish-device-info {
  display: grid;
  gap: 3px;
}

.publish-device-info strong {
  font-size: 11px;
  color: #273148;
}

.publish-device-info span {
  font-size: 10px;
  color: #a2acbe;
}

.publish-device-status {
  font-size: 11px;
  color: #adb6c6;
  white-space: nowrap;
}

.publish-device-status.online {
  color: #2eaf6e;
}

.publish-footer {
  background: #fff;
}

.text-video-modal {
  max-width: 700px;
}

.text-video-result-modal {
  max-width: 420px;
}

.text-video-modal-body {
  gap: 12px;
}

.text-video-result-body {
  gap: 14px;
}

.text-video-prompt {
  min-height: 84px;
  resize: none;
}

.text-video-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.text-video-tag {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #70809d;
  background: rgba(240, 244, 250, 0.96);
  font-size: 10px;
}

.text-video-tag.primary {
  color: #5582ea;
  background: rgba(231, 239, 255, 0.98);
}

.text-video-tag.green {
  color: #2cb36f;
  background: rgba(228, 247, 236, 0.98);
}

.text-video-ratio-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.text-video-ratio-btn {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(171, 182, 203, 0.3);
  background: #fff;
  color: #5d6c88;
  font-size: 12px;
}

.text-video-ratio-btn.active {
  border-color: rgba(88, 129, 236, 0.46);
  box-shadow: inset 0 0 0 1px rgba(88, 129, 236, 0.14);
  color: #3454a8;
  background: rgba(246, 250, 255, 0.98);
}

.text-video-reference {
  min-height: 78px;
  resize: none;
  line-height: 1.6;
}

.text-video-upload-btn {
  height: 30px;
  width: fit-content;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px dashed rgba(112, 132, 194, 0.5);
  color: #5d72ba;
  background: rgba(245, 248, 255, 0.98);
  font-size: 12px;
}

.content-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(250, 251, 255, 0.96);
  flex: 0 0 auto;
  box-shadow: 0 -8px 24px rgba(33, 40, 64, 0.04);
}

.text-video-footer-btn {
  min-width: 84px;
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  color: #6e7b96;
  background: rgba(243, 246, 252, 0.96);
  font-size: 12px;
}

.text-video-footer-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #6d63ff 0%, #8e57ff 100%);
}

.text-video-detail-box {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(180, 191, 211, 0.35);
  background: rgba(249, 251, 255, 0.98);
  color: #5f6d87;
  font-size: 12px;
  line-height: 1.55;
}

.text-video-result-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(164, 176, 198, 0.32);
  background: linear-gradient(180deg, #f6d18d 0%, #cb6a3d 100%);
}

.text-video-result-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(80, 48, 20, 0.18), transparent 28%, rgba(39, 28, 16, 0.22) 100%),
    repeating-linear-gradient(0deg, rgba(90, 63, 30, 0.14) 0 3px, transparent 3px 28px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 58px);
}

.text-video-result-poster.bakery {
  background:
    radial-gradient(circle at 18% 78%, rgba(255, 237, 189, 0.9), transparent 14%),
    radial-gradient(circle at 34% 78%, rgba(255, 237, 189, 0.92), transparent 14%),
    radial-gradient(circle at 52% 78%, rgba(255, 237, 189, 0.9), transparent 13%),
    radial-gradient(circle at 70% 78%, rgba(255, 237, 189, 0.9), transparent 14%),
    linear-gradient(180deg, #f4d489 0%, #dd8b3d 48%, #7f5329 100%);
}

.text-video-result-poster.flower {
  background:
    radial-gradient(circle at 20% 68%, rgba(255, 189, 216, 0.95), transparent 15%),
    radial-gradient(circle at 40% 70%, rgba(255, 229, 141, 0.9), transparent 13%),
    radial-gradient(circle at 62% 66%, rgba(226, 169, 255, 0.92), transparent 14%),
    radial-gradient(circle at 78% 72%, rgba(255, 171, 196, 0.9), transparent 13%),
    linear-gradient(180deg, #e5f0d7 0%, #95bb7b 46%, #577a4a 100%);
}

.text-video-result-poster.service {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 32%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 30%, transparent 30% 100%),
    linear-gradient(180deg, #dce7f1 0%, #8fb0c8 45%, #4e6c83 100%);
}

.text-video-poster-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-video-poster-sign {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  letter-spacing: 1px;
}

.text-video-play {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
  font-size: 18px;
}

.text-video-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: #8d98ad;
}

.text-video-link-btn {
  color: #6e7fff;
  background: transparent;
  font-size: 11px;
  padding: 0;
}

.mobile-page {
  display: grid;
  gap: 10px;
}

.mobile-hero,
.mobile-toolbar,
.mobile-board {
  border-radius: 16px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.mobile-hero {
  min-height: 84px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-page-title {
  font-size: 18px;
  font-weight: 800;
  color: #1b2439;
}

.mobile-page-subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: #99a4b9;
}

.mobile-hero-summary {
  height: 32px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  color: #5b6d8b;
  background: rgba(247, 249, 253, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.34);
  font-size: 12px;
}

.mobile-toolbar {
  min-height: 50px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-run-btn,
.mobile-select-chip,
.mobile-chip-btn,
.mobile-platform-tab,
.mobile-mini-action,
.mobile-cycle-shortcut,
.mobile-cycle-save {
  height: 28px;
  border-radius: 10px;
  font-size: 11px;
}

.mobile-run-btn {
  padding: 0 12px;
  color: #31415f;
  background: rgba(245, 247, 251, 0.98);
  border: 1px solid rgba(187, 198, 216, 0.4);
}

.mobile-select-chip {
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: #5c6984;
  background: #fff;
  border: 1px solid rgba(187, 198, 216, 0.44);
}

.mobile-select-chip.small {
  padding-inline: 10px;
}

.mobile-toolbar-tip {
  margin-left: auto;
  font-size: 10px;
  color: #afb7c6;
}

.mobile-board {
  padding: 10px;
  display: grid;
  gap: 10px;
}

.mobile-device-card,
.mobile-platform-panel,
.mobile-cycle-card,
.mobile-ai-card,
.mobile-footer-note {
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(252, 253, 255, 0.98);
}

.mobile-device-card {
  min-height: 54px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-device-main,
.mobile-device-actions,
.mobile-status-dots,
.mobile-platform-tabs,
.mobile-legend-row,
.mobile-cycle-actions,
.mobile-cycle-row,
.mobile-save-wrap {
  display: flex;
  align-items: center;
}

.mobile-device-main {
  gap: 10px;
}

.mobile-device-badge {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #6c7893;
  background: rgba(240, 244, 250, 0.98);
  font-size: 12px;
  font-weight: 700;
}

.mobile-device-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e2740;
}

.mobile-device-sub {
  margin-top: 2px;
  font-size: 10px;
  color: #9ca6ba;
}

.mobile-device-tag {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #b98642;
  background: rgba(252, 244, 223, 0.98);
  font-size: 10px;
}

.mobile-device-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mobile-inline-select {
  height: 28px;
  padding: 0 28px 0 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  position: relative;
  color: #5f6d87;
  background: #fff;
  border: 1px solid rgba(187, 198, 216, 0.44);
  font-size: 11px;
}

.mobile-inline-select::after {
  content: "⌄";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #afb7c6;
}

.mobile-chip-btn {
  padding: 0 10px;
  color: #60708b;
  background: rgba(244, 247, 252, 0.98);
}

.mobile-chip-btn.success {
  color: #2a9f66;
  background: rgba(231, 247, 238, 0.98);
}

.mobile-status-dots {
  gap: 6px;
}

.mobile-status-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.mobile-status-dot.dark {
  background: #2a3249;
}

.mobile-status-dot.amber {
  background: #f4a54d;
}

.mobile-status-dot.pink {
  background: #eb6b9a;
}

.mobile-status-dot.green {
  background: #54c28d;
}

.mobile-platform-panel {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.mobile-section-title {
  font-size: 14px;
  font-weight: 800;
  color: #1f2942;
}

.mobile-section-title span {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 400;
  color: #98a3b8;
}

.mobile-platform-tabs {
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-platform-tab {
  padding: 0 12px;
  color: #687895;
  background: rgba(247, 249, 253, 0.98);
  border: 1px solid rgba(184, 195, 214, 0.42);
}

.mobile-platform-tab.active {
  color: #2d3b57;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(101, 123, 255, 0.1);
}

.mobile-platform-alert {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  color: #b08b39;
  background: rgba(255, 247, 214, 0.72);
  border: 1px dashed rgba(230, 198, 101, 0.76);
  font-size: 10px;
}

.mobile-progress-list {
  display: grid;
  gap: 8px;
}

.mobile-progress-row {
  display: grid;
  grid-template-columns: 22px 1fr 42px 34px;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: #74809a;
}

.mobile-progress-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
}

.mobile-progress-icon.dark {
  background: #263047;
}

.mobile-progress-icon.amber {
  background: #f0a24b;
}

.mobile-progress-icon.pink {
  background: #ec7098;
}

.mobile-progress-icon.green {
  background: #56c38f;
}

.mobile-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(225, 231, 241, 0.96);
}

.mobile-progress-fill {
  height: 100%;
  border-radius: inherit;
}

.mobile-progress-reset {
  height: 20px;
  border-radius: 999px;
  color: #9aa5bb;
  background: rgba(244, 247, 252, 0.98);
  font-size: 9px;
}

.pc-live-panel {
  background: #fff;
  border: 1px solid rgba(224, 228, 238, 0.9);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.pc-live-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.pc-live-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2637;
}

.pc-live-meta {
  font-size: 11px;
  color: #7f8aa2;
}

.pc-live-strategies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.pc-live-strat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(224, 228, 238, 0.9);
  font-size: 12px;
  color: #46506a;
}

.pc-live-strat.on {
  border-color: rgba(79, 139, 255, 0.5);
  background: rgba(79, 139, 255, 0.06);
  color: #2a3550;
  font-weight: 600;
}

.pc-live-leads-head {
  font-size: 12px;
  font-weight: 600;
  color: #46506a;
  border-top: 1px dashed rgba(224, 228, 238, 0.9);
  padding-top: 10px;
}

.mobile-lead-empty {
  font-size: 11px;
  color: #9aa5bb;
  padding: 10px 0;
}

.mobile-lead-list {
  display: grid;
  gap: 8px;
}

.mobile-lead-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
}

.mobile-lead-plat {
  font-size: 10px;
  color: #4f6bed;
  background: rgba(79, 107, 237, 0.1);
  border-radius: 6px;
  padding: 3px 6px;
  text-align: center;
}

.mobile-lead-nick {
  font-size: 12px;
  color: #303b52;
  font-weight: 600;
}

.mobile-lead-nick em {
  font-style: normal;
  font-weight: 400;
  color: #9aa5bb;
  font-size: 10px;
}

.mobile-lead-cmt {
  font-size: 11px;
  color: #74809a;
}

.mobile-lead-acts {
  display: flex;
  gap: 4px;
}

.mobile-lead-act {
  font-size: 9px;
  color: #2f8f5b;
  background: rgba(101, 201, 143, 0.14);
  border-radius: 5px;
  padding: 2px 5px;
}

.mobile-platform-alert.ok {
  color: #2f8f5b;
  background: rgba(224, 248, 233, 0.8);
  border: 1px dashed rgba(101, 201, 143, 0.76);
}

.mobile-platform-ratio-input {
  width: 42px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(210, 217, 230, 0.9);
  background: #fff;
  text-align: center;
  font-size: 11px;
  color: #303b52;
}

.mobile-platform-bind-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.mobile-platform-bind-row .mobile-progress-reset {
  height: 26px;
  padding: 0 16px;
  font-size: 11px;
}

.mobile-progress-reset.ready {
  color: #fff;
  background: linear-gradient(135deg, #4f8bff, #3f6fe0);
}

.mobile-timeline-caption {
  font-size: 10px;
  color: #7f8aa2;
}

.mobile-timeline-scale {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  color: #b0b8c8;
  font-size: 9px;
}

.mobile-timeline-scale span:last-child {
  text-align: right;
}

.mobile-legend-row {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  color: #8d98ad;
  font-size: 9px;
}

.mobile-strategy-list {
  display: grid;
  gap: 8px;
}

.mobile-strategy-card {
  min-height: 56px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(253, 253, 255, 0.98);
  display: grid;
  grid-template-columns: 1fr auto 42px;
  align-items: center;
  gap: 12px;
}

.mobile-strategy-card.active {
  box-shadow: inset 0 0 0 1px rgba(218, 197, 118, 0.4);
}

.mobile-strategy-button {
  width: 100%;
  text-align: left;
}

.mobile-strategy-left,
.mobile-strategy-mid {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-strategy-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}

.mobile-strategy-icon.gray {
  color: #8f9aac;
  background: rgba(240, 244, 250, 0.98);
}

.mobile-strategy-icon.blue {
  color: #5f87d6;
  background: rgba(233, 241, 255, 0.98);
}

.mobile-strategy-icon.purple {
  color: #8f75d5;
  background: rgba(241, 236, 255, 0.98);
}

.mobile-strategy-icon.amber {
  color: #c28d38;
  background: rgba(255, 244, 220, 0.98);
}

.mobile-strategy-icon.green {
  color: #4da781;
  background: rgba(231, 247, 239, 0.98);
}

.mobile-strategy-title {
  font-size: 12px;
  font-weight: 800;
  color: #263048;
}

.mobile-strategy-desc {
  margin-top: 2px;
  font-size: 10px;
  color: #a0aabc;
}

.mobile-mini-action {
  padding: 0 10px;
  color: #7f8da7;
  background: rgba(244, 247, 252, 0.98);
}

.mobile-time-pill {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #8b97ad;
  background: rgba(245, 248, 252, 0.98);
  font-size: 10px;
}

.mobile-time-pill.empty {
  color: #c0c7d4;
}

.mobile-switch {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(229, 234, 242, 0.98);
  position: relative;
}

.mobile-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 38, 62, 0.18);
}

.mobile-switch.on {
  background: rgba(90, 118, 255, 0.92);
}

.mobile-switch.on::after {
  left: 18px;
}

.mobile-cycle-card {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.mobile-cycle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-cycle-title {
  font-size: 14px;
  font-weight: 800;
  color: #202a42;
}

.mobile-cycle-sub,
.mobile-cycle-plan {
  font-size: 10px;
  color: #99a4b9;
}

.mobile-cycle-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-cycle-shortcut {
  padding: 0 10px;
  color: #7e8ba4;
  background: rgba(244, 247, 252, 0.98);
}

.mobile-cycle-shortcut.active {
  color: #516fda;
  background: rgba(236, 242, 255, 0.98);
}

.mobile-cycle-save {
  padding: 0 12px;
  color: #fff;
  background: linear-gradient(135deg, #4b83ee 0%, #2f6ecf 100%);
  box-shadow: 0 10px 22px rgba(60, 113, 207, 0.2);
}

.mobile-cycle-form {
  padding: 10px 0 2px;
  border-top: 1px solid rgba(139, 152, 180, 0.12);
  display: grid;
  gap: 8px;
}

.mobile-cycle-row {
  gap: 10px;
  flex-wrap: wrap;
  color: #67748e;
  font-size: 11px;
}

.mobile-cycle-input,
.mobile-cycle-stepper {
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(187, 198, 216, 0.44);
  background: #fff;
}

.mobile-cycle-input {
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}

.mobile-cycle-stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mobile-cycle-stepper button,
.mobile-cycle-stepper span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #6a7893;
  background: transparent;
  font-size: 12px;
}

.mobile-cycle-stepper span {
  width: 34px;
  border-left: 1px solid rgba(187, 198, 216, 0.44);
  border-right: 1px solid rgba(187, 198, 216, 0.44);
}

.mobile-ai-card {
  min-height: 56px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(245, 246, 255, 0.98), rgba(250, 251, 255, 0.98));
}

.mobile-ai-title {
  font-size: 14px;
  font-weight: 800;
  color: #535f8e;
}

.mobile-ai-title span {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 400;
  color: #9ea8bb;
}

.mobile-footer-note {
  min-height: 40px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  color: #a1aabc;
  font-size: 10px;
}

.mobile-save-wrap {
  justify-content: center;
}

.mobile-save-btn {
  width: 92px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #4f87e7 0%, #2c67c8 100%);
  box-shadow: 0 10px 24px rgba(54, 105, 197, 0.2);
  font-size: 12px;
}

.mobile-modal-backdrop {
  align-items: center;
  justify-items: center;
  background: rgba(37, 44, 63, 0.34);
}

.mobile-keyword-modal {
  width: min(100%, 540px);
  max-height: calc(100vh - 72px);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(188, 197, 214, 0.38);
  background: #fff;
  box-shadow: 0 28px 72px rgba(31, 42, 78, 0.26);
}

.mobile-keyword-head {
  min-height: 68px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(139, 152, 180, 0.12);
}

.mobile-keyword-head-icon,
.mobile-keyword-close {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.mobile-keyword-head-icon {
  color: #6287d7;
  background: rgba(234, 242, 255, 0.98);
  font-weight: 700;
}

.mobile-keyword-head-icon.industry {
  color: #9b78d7;
  background: rgba(244, 236, 255, 0.98);
}

.mobile-keyword-head-icon.interaction {
  color: #d2a542;
  background: rgba(255, 246, 222, 0.98);
}

.mobile-keyword-head-icon.nurture {
  color: #43b091;
  background: rgba(231, 247, 239, 0.98);
}

.mobile-keyword-head-icon.whitelist {
  color: #df7ba8;
  background: rgba(255, 239, 247, 0.98);
}

.mobile-keyword-close {
  color: #a8b2c3;
  background: transparent;
}

.mobile-keyword-title {
  font-size: 18px;
  font-weight: 800;
  color: #212c45;
}

.mobile-keyword-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #8e99ae;
}

.mobile-keyword-body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 14px;
  overflow: auto;
}

.mobile-keyword-section-title {
  font-size: 14px;
  font-weight: 800;
  color: #253049;
}

.mobile-keyword-section-title.large {
  font-size: 13px;
}

.mobile-keyword-section-title span {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #9aa4b8;
}

.mobile-keyword-field,
.mobile-keyword-strategy-card {
  display: grid;
  gap: 8px;
}

.mobile-keyword-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2a334a;
}

.mobile-keyword-label span {
  font-size: 11px;
  color: #a1aabc;
  font-weight: 400;
}

.mobile-keyword-label.plain {
  justify-content: flex-start;
}

.mobile-inline-note {
  margin-left: 8px;
  color: #9ea8bb;
  font-size: 11px;
  font-weight: 400;
}

.mobile-keyword-empty {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  color: #a7b0c1;
  background: rgba(247, 249, 253, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.32);
  font-size: 11px;
}

.mobile-keyword-input-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
}

.mobile-keyword-input-row.compact {
  grid-template-columns: 1fr auto;
}

.mobile-keyword-input {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(186, 197, 216, 0.38);
  background: #fff;
  color: #5d6c87;
  font-size: 12px;
}

.mobile-keyword-ai-btn,
.mobile-keyword-add-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
}

.mobile-keyword-ai-btn {
  color: #9777d7;
  background: rgba(247, 239, 255, 0.98);
}

.mobile-keyword-add-btn {
  color: #fff;
  background: linear-gradient(180deg, #326ebf 0%, #245ca5 100%);
}

.mobile-keyword-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-keyword-chip {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #7a879f;
  background: rgba(247, 249, 253, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.32);
  font-size: 11px;
}

.mobile-keyword-chip.active {
  color: #fff;
  background: #1e2d4b;
  border-color: #1e2d4b;
}

.mobile-keyword-tag-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-keyword-tag {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #6480b7;
  background: rgba(242, 246, 255, 0.98);
  border: 1px solid rgba(197, 211, 238, 0.72);
  font-size: 11px;
}

.mobile-city-chip.active {
  color: #fff;
  background: #f0a44e;
  border-color: #f0a44e;
}

.mobile-keyword-tip {
  font-size: 11px;
  color: #9da7ba;
}

.mobile-city-alert {
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(232, 202, 141, 0.58);
  background: rgba(255, 246, 228, 0.96);
  display: grid;
  gap: 4px;
}

.mobile-city-alert strong {
  font-size: 12px;
  color: #d08d2f;
}

.mobile-city-alert span {
  font-size: 11px;
  color: #c3a169;
}

.mobile-keyword-strategy-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(251, 252, 255, 0.98);
}

.mobile-keyword-strategy-head,
.mobile-keyword-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-keyword-protect {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #c48d34;
  background: rgba(255, 244, 218, 0.98);
  font-size: 11px;
}

.mobile-keyword-slider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mobile-keyword-slider-card {
  display: grid;
  gap: 6px;
}

.mobile-keyword-slider-label {
  font-size: 11px;
  color: #7c879d;
}

.mobile-keyword-slider-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.mobile-keyword-slider-value.danger {
  color: #f36d6d;
}

.mobile-keyword-slider-value.warn {
  color: #e5b143;
}

.mobile-keyword-slider-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(223, 230, 240, 0.96);
}

.mobile-keyword-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: inherit;
  background: #57a3f0;
}

.mobile-keyword-slider-fill.wide {
  width: 60%;
}

.mobile-keyword-slider-fill.narrow {
  width: 15%;
}

.mobile-keyword-slider-fill.low-22 {
  width: 22%;
}

.mobile-keyword-slider-fill.low-17 {
  width: 17%;
}

.mobile-keyword-slider-fill.mid-39 {
  width: 39%;
}

.mobile-keyword-slider-fill.mid-32 {
  width: 32%;
}

.mobile-keyword-slider-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #57a3f0;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(66, 98, 156, 0.16);
}

.mobile-keyword-slider-thumb.wide {
  left: 60%;
}

.mobile-keyword-slider-thumb.narrow {
  left: 15%;
}

.mobile-keyword-slider-thumb.low-22 {
  left: 22%;
}

.mobile-keyword-slider-thumb.low-17 {
  left: 17%;
}

.mobile-keyword-slider-thumb.mid-39 {
  left: 39%;
}

.mobile-keyword-slider-thumb.mid-32 {
  left: 32%;
}

.mobile-keyword-protect-tip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  color: #71a285;
  background: rgba(231, 247, 238, 0.98);
  font-size: 11px;
}

.mobile-keyword-enable {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7d8aa4;
  font-size: 11px;
}

.mobile-keyword-copy-card {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(220, 226, 237, 0.92);
  background: rgba(249, 250, 253, 0.98);
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  gap: 8px;
  align-items: start;
}

.mobile-keyword-copy-index {
  color: #8c98ad;
  font-size: 11px;
  line-height: 1.6;
}

.mobile-keyword-copy-text {
  color: #4b5670;
  font-size: 11px;
  line-height: 1.5;
}

.mobile-keyword-copy-delete {
  color: #c0c8d7;
  background: transparent;
  font-size: 12px;
  line-height: 1.4;
}

.mobile-city-ai-link {
  width: fit-content;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #9777d7;
  background: rgba(247, 239, 255, 0.98);
  font-size: 11px;
}

.mobile-keyword-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(139, 152, 180, 0.12);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: rgba(250, 251, 255, 0.98);
}

.mobile-keyword-cancel,
.mobile-keyword-save {
  min-width: 88px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
}

.mobile-keyword-cancel {
  color: #8b97ad;
  background: rgba(243, 246, 252, 0.96);
}

.mobile-keyword-save {
  color: #fff;
  background: linear-gradient(180deg, #4d84e5 0%, #2d67c8 100%);
}

.mobile-city-modal {
  width: min(100%, 500px);
}

.mobile-city-footer {
  justify-content: space-between;
  align-items: center;
}

.mobile-city-save {
  flex: 1;
  max-width: 260px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #4d84e5 0%, #2d67c8 100%);
  font-size: 12px;
}

.mobile-interaction-modal {
  width: min(100%, 760px);
  max-height: calc(100vh - 80px);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(188, 197, 214, 0.38);
  background: #fff;
  box-shadow: 0 28px 72px rgba(31, 42, 78, 0.26);
}

.mobile-interaction-head-actions,
.mobile-interaction-reply-modes,
.mobile-interaction-rule-head,
.mobile-interaction-rule-card-head,
.mobile-interaction-radio-row {
  display: flex;
  align-items: center;
}

.mobile-interaction-head-actions {
  gap: 10px;
}

.mobile-interaction-badge {
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #c7982f;
  background: rgba(255, 246, 222, 0.98);
  border: 1px solid rgba(239, 213, 152, 0.82);
  font-size: 12px;
  font-weight: 700;
}

.mobile-interaction-body {
  gap: 16px;
}

.mobile-interaction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mobile-interaction-card,
.mobile-interaction-rule-panel,
.mobile-interaction-rule-card {
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(251, 252, 255, 0.98);
}

.mobile-interaction-card {
  min-height: 92px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  box-shadow: inset 0 0 0 1px rgba(229, 214, 171, 0.3);
}

.mobile-interaction-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #273048;
}

.mobile-interaction-card-desc {
  margin-top: 4px;
  font-size: 11px;
  color: #9ba5b8;
  line-height: 1.45;
}

.mobile-interaction-reply-modes {
  gap: 8px;
  color: #8c98ad;
  font-size: 11px;
}

.mobile-interaction-rule-panel {
  padding: 12px;
  display: grid;
  gap: 12px;
}

.mobile-interaction-rule-head {
  justify-content: space-between;
  gap: 12px;
}

.mobile-interaction-rule-beta {
  color: #e16f6f;
  font-size: 11px;
}

.mobile-interaction-add-rule {
  color: #5e7fe3;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.mobile-interaction-rule-desc {
  font-size: 11px;
  color: #98a4b8;
  line-height: 1.5;
}

.mobile-interaction-rule-card {
  padding: 12px;
  display: grid;
  gap: 12px;
}

.mobile-interaction-rule-card-head {
  justify-content: space-between;
}

.mobile-interaction-rule-card-head strong {
  font-size: 14px;
  color: #263048;
}

.mobile-interaction-form {
  display: grid;
  gap: 12px;
}

.mobile-interaction-form-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.mobile-interaction-step {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #5086e6 0%, #2f69ca 100%);
  font-size: 11px;
  font-weight: 700;
  margin-top: 20px;
}

.mobile-interaction-form-main {
  display: grid;
  gap: 6px;
}

.mobile-interaction-form-label {
  font-size: 12px;
  font-weight: 700;
  color: #49556f;
}

.mobile-interaction-form-tip {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #9ea8bb;
}

.mobile-interaction-select {
  height: 36px;
  padding: 0 34px 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  position: relative;
  color: #5d6c87;
  background: #fff;
  border: 1px solid rgba(186, 197, 216, 0.38);
  font-size: 12px;
}

.mobile-interaction-select::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #afbacb;
}

.mobile-interaction-select.empty {
  color: #afbacb;
}

.mobile-interaction-inline-switch {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.mobile-interaction-radio-row {
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-interaction-radio {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  color: #7f8da7;
  background: rgba(246, 248, 252, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.32);
  font-size: 11px;
}

.mobile-interaction-radio.active {
  color: #4f82dd;
  background: rgba(235, 242, 255, 0.98);
  border-color: rgba(120, 152, 222, 0.45);
}

.mobile-interaction-form .mobile-keyword-input {
  width: 100%;
}

.mobile-interaction-footer {
  justify-content: center;
}

.mobile-nurture-modal {
  width: min(100%, 690px);
  max-height: calc(100vh - 80px);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(188, 197, 214, 0.38);
  background: #fff;
  box-shadow: 0 28px 72px rgba(31, 42, 78, 0.26);
}

.mobile-nurture-body {
  gap: 16px;
}

.mobile-nurture-mode-row,
.mobile-nurture-slider-head {
  display: flex;
  align-items: center;
}

.mobile-nurture-mode-row {
  gap: 10px;
}

.mobile-nurture-mode {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  color: #97a4b8;
  background: rgba(246, 248, 252, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.32);
  font-size: 13px;
  font-weight: 700;
}

.mobile-nurture-mode.active {
  color: #3e9e85;
  background: rgba(234, 247, 241, 0.98);
  border-color: rgba(112, 191, 164, 0.45);
}

.mobile-nurture-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mobile-nurture-card {
  min-height: 78px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(172, 222, 208, 0.52);
  background: rgba(238, 249, 245, 0.98);
}

.mobile-nurture-card:last-child {
  grid-column: 1 / 2;
}

.mobile-nurture-comment-head {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6d7890;
  font-size: 12px;
  font-weight: 700;
}

.mobile-nurture-comment-head strong {
  color: #7a86a0;
  font-size: 12px;
}

.mobile-nurture-comment-list {
  display: grid;
  gap: 8px;
}

.mobile-nurture-comment-item {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(220, 226, 237, 0.92);
  background: rgba(255, 255, 255, 0.98);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #505b74;
  font-size: 12px;
}

.mobile-nurture-slider-block {
  display: grid;
  gap: 8px;
}

.mobile-nurture-slider-head {
  justify-content: space-between;
  color: #6c7790;
  font-size: 12px;
}

.mobile-nurture-slider-head strong {
  font-size: 18px;
  color: #1f2942;
}

.mobile-keyword-slider-track.nurture {
  height: 5px;
}

.mobile-keyword-slider-fill.pink {
  background: #f05d84;
}

.mobile-keyword-slider-fill.blue {
  background: #57a3f0;
}

.mobile-keyword-slider-fill.purple {
  background: #9874e2;
}

.mobile-keyword-slider-fill.medium {
  width: 20%;
}

.mobile-keyword-slider-fill.low {
  width: 10%;
}

.mobile-keyword-slider-thumb.pink {
  border-color: #f05d84;
}

.mobile-keyword-slider-thumb.blue {
  border-color: #57a3f0;
}

.mobile-keyword-slider-thumb.purple {
  border-color: #9874e2;
}

.mobile-keyword-slider-thumb.medium {
  left: 20%;
}

.mobile-keyword-slider-thumb.low {
  left: 10%;
}

.mobile-nurture-footer {
  justify-content: center;
}

.mobile-whitelist-modal {
  width: min(100%, 540px);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(188, 197, 214, 0.38);
  background: #fff;
  box-shadow: 0 28px 72px rgba(31, 42, 78, 0.26);
}

.mobile-whitelist-body {
  gap: 10px;
}

.mobile-whitelist-toolbar,
.mobile-whitelist-tabs,
.mobile-whitelist-subfooter {
  display: flex;
  align-items: center;
}

.mobile-whitelist-toolbar {
  justify-content: space-between;
  gap: 12px;
}

.mobile-whitelist-tabs {
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-whitelist-tab {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #8a97ad;
  background: rgba(246, 248, 252, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.32);
  font-size: 11px;
}

.mobile-whitelist-tab.active {
  color: #fff;
  background: #0f1d3f;
  border-color: #0f1d3f;
}

.mobile-whitelist-add-btn {
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: #0f1d3f;
  font-size: 11px;
  font-weight: 700;
}

.mobile-whitelist-empty {
  min-height: 98px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #c2c9d5;
  font-size: 11px;
}

.mobile-whitelist-footer {
  justify-content: flex-end;
}

.mobile-whitelist-submodal {
  width: min(100%, 500px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 214, 0.38);
  background: #fff;
  box-shadow: 0 28px 72px rgba(31, 42, 78, 0.2);
}

.mobile-whitelist-subhead {
  min-height: 64px;
}

.mobile-whitelist-subtitle {
  font-size: 18px;
  font-weight: 800;
  color: #212c45;
}

.mobile-whitelist-form {
  padding: 8px 18px 14px;
  display: grid;
  gap: 10px;
}

.mobile-whitelist-form-label {
  font-size: 12px;
  color: #6d7890;
}

.mobile-whitelist-tabs.form {
  margin-bottom: 2px;
}

.mobile-whitelist-subfooter {
  padding: 6px 18px 18px;
  justify-content: space-between;
  gap: 8px;
}

.mobile-whitelist-confirm {
  flex: 1;
  max-width: 160px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #9ebfdd 0%, #7fa5c9 100%);
  font-size: 12px;
}

.pc-matrix-page {
  display: grid;
  gap: 10px;
}

.pc-matrix-hero,
.pc-matrix-toolbar,
.pc-matrix-board {
  border-radius: 16px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.pc-matrix-hero {
  min-height: 84px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pc-matrix-title-row,
.pc-matrix-toolbar,
.pc-matrix-device-head,
.pc-matrix-device-main,
.pc-matrix-device-side,
.pc-matrix-platform-row,
.pc-matrix-strategy-actions,
.pc-matrix-feature-actions,
.pc-matrix-cycle-meta,
.pc-matrix-cycle-actions {
  display: flex;
  align-items: center;
}

.pc-matrix-title-row {
  gap: 10px;
}

.pc-matrix-title {
  font-size: 18px;
  font-weight: 800;
  color: #1b2439;
}

.pc-matrix-download-btn,
.pc-matrix-run-btn,
.pc-matrix-select-chip,
.pc-matrix-light-pill,
.pc-matrix-platform-tab,
.pc-matrix-config-btn,
.pc-matrix-feature-btn,
.pc-matrix-day-pill,
.pc-matrix-save-btn {
  height: 28px;
  border-radius: 10px;
  font-size: 11px;
}

.pc-matrix-download-btn {
  padding: 0 12px;
  color: #4d8ed3;
  background: rgba(236, 246, 255, 0.98);
}

.pc-matrix-subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: #99a4b9;
}

.pc-matrix-summary {
  height: 32px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  color: #7a5aa6;
  background: rgba(250, 245, 255, 0.98);
  border: 1px solid rgba(208, 194, 232, 0.42);
  font-size: 11px;
}

.pc-matrix-toolbar {
  min-height: 50px;
  padding: 8px 12px;
  gap: 10px;
}

.pc-matrix-run-btn {
  padding: 0 12px;
  color: #31415f;
  background: rgba(245, 247, 251, 0.98);
  border: 1px solid rgba(187, 198, 216, 0.4);
}

.pc-matrix-select-chip {
  min-width: 112px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: #5c6984;
  background: #fff;
  border: 1px solid rgba(128, 191, 210, 0.46);
  box-shadow: inset 0 0 0 1px rgba(114, 175, 197, 0.14);
}

.pc-matrix-board {
  padding: 10px;
}

.pc-matrix-device-card {
  border-radius: 16px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: rgba(252, 253, 255, 0.98);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.pc-matrix-device-head {
  justify-content: space-between;
  gap: 12px;
}

.pc-matrix-device-main {
  gap: 10px;
}

.pc-matrix-device-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(216, 241, 242, 0.98);
  box-shadow: inset 0 0 0 1px rgba(129, 205, 208, 0.5);
}

.pc-matrix-device-name {
  font-size: 14px;
  font-weight: 800;
  color: #1e2740;
}

.pc-matrix-device-tag {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #8f98aa;
  background: rgba(243, 246, 252, 0.98);
  font-size: 10px;
}

.pc-matrix-device-side {
  gap: 8px;
}

.pc-matrix-light-pill {
  padding: 0 10px;
  color: #69b8c6;
  background: rgba(236, 251, 252, 0.98);
}

.pc-matrix-light-pill.purple {
  color: #9b7dd0;
  background: rgba(248, 241, 255, 0.98);
}

.pc-matrix-project-card,
.pc-matrix-platform-card,
.pc-matrix-cycle-bar {
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.pc-matrix-project-title,
.pc-matrix-card-title {
  font-size: 13px;
  font-weight: 800;
  color: #263048;
}

.pc-matrix-project-sub {
  font-size: 10px;
  color: #a1aabc;
}

.pc-matrix-project-select {
  width: 160px;
  height: 34px;
  padding: 0 34px 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  position: relative;
  color: #5d6c87;
  background: #fff;
  border: 1px solid rgba(186, 197, 216, 0.38);
  font-size: 12px;
}

.pc-matrix-project-select::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #afbacb;
}

.pc-matrix-platform-row {
  gap: 8px;
}

.pc-matrix-platform-tab {
  flex: 1;
  justify-content: center;
  color: #7f8da7;
  background: rgba(251, 252, 255, 0.98);
  border: 1px solid rgba(220, 226, 236, 0.9);
}

.pc-matrix-platform-tab.active {
  color: #fff;
  background: linear-gradient(180deg, #243656 0%, #172947 100%);
}

.pc-matrix-strategy-list,
.pc-matrix-card-grid {
  display: grid;
  gap: 10px;
}

.pc-matrix-strategy-row,
.pc-matrix-feature-card {
  border-radius: 14px;
  background: #fff;
}

.pc-matrix-strategy-row {
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pc-matrix-strategy-row.blue {
  box-shadow: inset 0 0 0 1px rgba(107, 168, 235, 0.55);
}

.pc-matrix-strategy-row.pink {
  box-shadow: inset 0 0 0 1px rgba(222, 129, 170, 0.52);
}

.pc-matrix-strategy-row.purple {
  box-shadow: inset 0 0 0 1px rgba(151, 123, 208, 0.52);
}

.pc-matrix-strategy-row.cyan {
  box-shadow: inset 0 0 0 1px rgba(92, 205, 222, 0.55);
}

.pc-matrix-strategy-row.violet {
  box-shadow: inset 0 0 0 1px rgba(147, 116, 202, 0.52);
}

.pc-matrix-strategy-row.gray {
  box-shadow: inset 0 0 0 1px rgba(194, 200, 211, 0.55);
}

.pc-matrix-strategy-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pc-matrix-strategy-icon,
.pc-matrix-feature-icon {
  width: 14px;
  height: 14px;
  border-radius: 999px;
}

.pc-matrix-strategy-icon.blue { background: #83caf2; }
.pc-matrix-strategy-icon.pink { background: #e595bc; }
.pc-matrix-strategy-icon.purple { background: #9b83d7; }
.pc-matrix-strategy-icon.cyan { background: #79dde2; }
.pc-matrix-strategy-icon.violet { background: #a689e0; }
.pc-matrix-strategy-icon.gray { background: #c6ccd6; }

.pc-matrix-strategy-name,
.pc-matrix-feature-name {
  font-size: 13px;
  font-weight: 800;
  color: #263048;
}

.pc-matrix-strategy-desc,
.pc-matrix-feature-desc {
  margin-top: 2px;
  font-size: 10px;
  color: #a0aabc;
}

.pc-matrix-strategy-actions {
  gap: 10px;
}

.pc-matrix-config-btn,
.pc-matrix-feature-btn {
  padding: 0 12px;
  color: #5d6c87;
  background: rgba(246, 248, 252, 0.98);
}

.pc-matrix-feature-btn.tag {
  color: #8f74d6;
  background: rgba(244, 239, 255, 0.98);
}

.pc-matrix-toggle {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(229, 234, 242, 0.98);
  position: relative;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}

.pc-matrix-toggle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  transition: left 0.2s;
}

.pc-matrix-toggle.on {
  background: #34d399;
}

.pc-matrix-toggle.on::after {
  left: 16px;
}

.pc-matrix-card-title {
  text-align: center;
  color: #b29adc;
  font-size: 11px;
  font-weight: 600;
}

.pc-matrix-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pc-matrix-feature-card {
  min-height: 96px;
  padding: 12px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  display: grid;
  gap: 4px;
}

.pc-matrix-feature-card.violet {
  box-shadow: inset 0 0 0 1px rgba(179, 141, 231, 0.26);
}

.pc-matrix-feature-card.slate {
  box-shadow: inset 0 0 0 1px rgba(201, 208, 220, 0.28);
}

.pc-matrix-feature-card.green {
  box-shadow: inset 0 0 0 1px rgba(149, 214, 182, 0.26);
}

.pc-matrix-feature-icon.violet { background: #c9b3f0; }
.pc-matrix-feature-icon.slate { background: #cfd7e5; }
.pc-matrix-feature-icon.green { background: #9cdeb7; }

.pc-matrix-feature-actions {
  gap: 8px;
  margin-top: 6px;
}

.pc-matrix-cycle-bar {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.pc-matrix-cycle-title {
  font-size: 12px;
  font-weight: 800;
  color: #263048;
}

.pc-matrix-cycle-title span {
  margin-left: 6px;
  font-weight: 400;
  color: #a1aabc;
  font-size: 10px;
}

.pc-matrix-cycle-meta {
  gap: 8px;
  margin-top: 10px;
  color: #97a3b8;
  font-size: 10px;
}

.pc-matrix-time-chip {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #6f7f9b;
  background: rgba(246, 248, 252, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.32);
}

.pc-matrix-cycle-actions {
  gap: 8px;
}

.pc-matrix-day-pill {
  padding: 0 12px;
  color: #8b97ad;
  background: rgba(246, 248, 252, 0.98);
}

.pc-matrix-day-pill.active {
  color: #57c1ca;
  background: rgba(236, 251, 252, 0.98);
}

.pc-matrix-save-btn {
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(180deg, #4f87e7 0%, #2c67c8 100%);
  box-shadow: 0 10px 24px rgba(54, 105, 197, 0.2);
}

.pc-strategy-modal-backdrop {
  align-items: center;
  justify-items: center;
  background: rgba(37, 44, 63, 0.34);
}

.pc-strategy-modal {
  width: min(100%, 780px);
  max-height: calc(100vh - 70px);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(188, 197, 214, 0.38);
  background: #fff;
  box-shadow: 0 28px 72px rgba(31, 42, 78, 0.26);
}

.pc-strategy-modal.wide {
  width: min(100%, 980px);
}

.pc-strategy-modal.whitelist {
  width: min(100%, 820px);
}

.pc-strategy-modal-head {
  min-height: 72px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 28px 1fr auto 24px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(139, 152, 180, 0.12);
}

.pc-strategy-modal-icon,
.pc-strategy-modal-close {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.pc-strategy-modal-icon {
  color: #fff;
  font-weight: 700;
}

.pc-strategy-modal-icon.blue { background: #368cff; }
.pc-strategy-modal-icon.violet { background: #8558ef; }
.pc-strategy-modal-icon.purple { background: #706cf2; }
.pc-strategy-modal-icon.cyan { background: #269cff; }
.pc-strategy-modal-icon.green { background: #22b172; }
.pc-strategy-modal-icon.slate { background: #8ba8cb; }
.pc-strategy-modal-icon.mint { background: #7dd8b7; }
.pc-strategy-modal-icon.pink { background: #2f7bff; }

.pc-strategy-modal-breadcrumb {
  font-size: 11px;
  color: #9ca7bb;
}

.pc-strategy-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #212c45;
}

.pc-strategy-modal-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #8e99ae;
}

.pc-strategy-modal-close {
  color: #a8b2c3;
  background: transparent;
}

.pc-strategy-modal-body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 14px;
  overflow: auto;
  background: rgba(252, 253, 255, 0.98);
}

.pc-strategy-modal-body.plain {
  padding-top: 14px;
  background: #fff;
}

.pc-strategy-hero {
  min-height: 108px;
  border-radius: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  color: #fff;
}

.pc-strategy-hero.blue {
  background: linear-gradient(135deg, #1f56ff 0%, #1ec2de 100%);
}

.pc-strategy-hero.violet {
  background: linear-gradient(135deg, #35246d 0%, #f05cbc 100%);
}

.pc-strategy-hero.purple {
  background: linear-gradient(135deg, #3537cf 0%, #8c8ef7 100%);
}

.pc-strategy-hero.cyan {
  background: linear-gradient(135deg, #1e58ec 0%, #24cbe4 100%);
}

.pc-strategy-hero.green {
  background: linear-gradient(135deg, #0d4e68 0%, #30cb64 100%);
}

.pc-strategy-hero-tag {
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
}

.pc-strategy-hero-text {
  margin-top: 14px;
  max-width: 380px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.pc-strategy-hero-stats,
.pc-strategy-chip-row,
.pc-strategy-inline-switch,
.pc-strategy-switch-right {
  display: flex;
  align-items: center;
}

.pc-strategy-hero-stats {
  gap: 10px;
}

.pc-strategy-hero-stat {
  min-width: 84px;
  min-height: 78px;
  padding: 12px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
}

.pc-strategy-hero-stat strong {
  font-size: 20px;
}

.pc-strategy-hero-stat span {
  font-size: 11px;
  opacity: 0.92;
}

.pc-strategy-section {
  display: grid;
  gap: 10px;
}

.pc-strategy-section-title {
  font-size: 14px;
  font-weight: 800;
  color: #263048;
}

.pc-strategy-section-sub,
.pc-strategy-field small,
.pc-strategy-card small,
.pc-strategy-switch-desc {
  font-size: 11px;
  color: #9ca7bb;
}

.pc-strategy-large-card,
.pc-strategy-card,
.pc-strategy-switch-row {
  border-radius: 16px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: #fff;
}

.pc-strategy-large-card {
  padding: 14px;
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(251, 253, 255, 0.98));
}

.pc-strategy-large-card.compact {
  padding-bottom: 10px;
}

.pc-strategy-field {
  display: grid;
  gap: 6px;
}

.pc-strategy-field span,
.pc-strategy-card-title,
.pc-strategy-switch-title {
  font-size: 12px;
  font-weight: 700;
  color: #364157;
}

.pc-strategy-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.pc-strategy-input,
.pc-strategy-textarea,
.pc-strategy-select {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(186, 197, 216, 0.38);
  background: #fff;
  color: #5d6c87;
  font-size: 12px;
}

.pc-strategy-textarea {
  min-height: 100px;
  padding-top: 12px;
  resize: none;
}

.pc-strategy-primary-btn,
.pc-strategy-save-btn,
.pc-strategy-close-btn {
  height: 38px;
  border-radius: 12px;
  font-size: 12px;
}

.pc-strategy-primary-btn.small {
  height: 38px;
  padding: 0 14px;
  color: #fff;
  background: #0d1c3f;
}

.pc-strategy-grid {
  display: grid;
  gap: 12px;
}

.pc-strategy-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-strategy-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.pc-strategy-chip-row {
  gap: 8px;
  flex-wrap: wrap;
}

.pc-strategy-chip {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #7a879f;
  background: rgba(247, 249, 253, 0.98);
  border: 1px solid rgba(186, 197, 216, 0.32);
  font-size: 11px;
}

.pc-strategy-chip.active {
  color: #fff;
  background: #1f58ec;
  border-color: #1f58ec;
}

.pc-strategy-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pc-strategy-keyword-tag {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #5c7fbe;
  background: rgba(243, 247, 255, 0.98);
  border: 1px solid rgba(200, 214, 238, 0.72);
  font-size: 11px;
}

.pc-strategy-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.pc-strategy-time-input {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(186, 197, 216, 0.38);
  background: #fff;
  color: #b1bac9;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.pc-strategy-time-sep {
  color: #9aa5ba;
  font-size: 12px;
}

.pc-strategy-inline-switch {
  gap: 10px;
  color: #8e9ab0;
  font-size: 11px;
}

.pc-strategy-switch-list {
  display: grid;
  gap: 10px;
}

.pc-strategy-switch-row {
  min-height: 74px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pc-strategy-switch-right {
  gap: 10px;
  color: #8e9ab0;
  font-size: 11px;
}

.pc-strategy-modal-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(139, 152, 180, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: rgba(250, 251, 255, 0.98);
}

.pc-strategy-modal-footer.light {
  justify-content: flex-start;
  background: #fff;
}

.pc-whitelist-layout {
  display: grid;
  gap: 14px;
}

.pc-whitelist-hero {
  min-height: 146px;
  border-radius: 18px;
  padding: 18px 18px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  color: #fff;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #251b67 0%, #7c31f6 42%, #ff6ca2 100%);
}

.pc-whitelist-hero-tag {
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
}

.pc-whitelist-hero-text {
  margin-top: 18px;
  max-width: 330px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.pc-whitelist-hero-stats {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.pc-whitelist-hero-stat {
  width: 84px;
  min-height: 88px;
  padding: 10px 8px;
  border-radius: 18px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.14);
}

.pc-whitelist-hero-stat strong {
  font-size: 22px;
  font-weight: 800;
}

.pc-whitelist-hero-stat span {
  font-size: 11px;
  opacity: 0.92;
}

.pc-whitelist-card {
  border-radius: 16px;
  border: 1px solid rgba(210, 225, 245, 0.82);
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.pc-whitelist-card.hero-surface {
  background: linear-gradient(180deg, rgba(240, 248, 255, 0.98), rgba(249, 252, 255, 0.98));
}

.pc-whitelist-card.subtle {
  background: rgba(248, 250, 255, 0.98);
}

.pc-whitelist-textarea {
  min-height: 104px;
  border-color: rgba(122, 184, 244, 0.58);
  box-shadow: inset 0 0 0 1px rgba(84, 164, 242, 0.1);
}

.pc-whitelist-keyword-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.pc-whitelist-keyword-row .pc-strategy-input {
  color: #afb8c8;
}

.pc-strategy-grid.two.whitelist-bottom {
  align-items: stretch;
}

.pc-strategy-save-btn {
  flex: 1;
  color: #fff;
  background: linear-gradient(180deg, #0d1334 0%, #06102c 100%);
}

.pc-strategy-close-btn {
  min-width: 72px;
  color: #8b97ad;
  background: rgba(243, 246, 252, 0.96);
}

.pc-map-head-actions,
.pc-map-query-row,
.pc-enterprise-selector-grid,
.pc-enterprise-table-head,
.pc-enterprise-table-headbar {
  display: flex;
  align-items: center;
}

.pc-map-head-actions {
  gap: 8px;
}

.pc-map-head-btn,
.pc-map-search-btn,
.pc-map-reset-btn,
.pc-enterprise-export-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
}

.pc-map-head-btn {
  color: #5d6c87;
  background: rgba(245, 247, 251, 0.98);
}

.pc-enterprise-layout,
.pc-map-layout,
.pc-enterprise-filter-list {
  display: grid;
  gap: 12px;
}

.pc-enterprise-topbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pc-enterprise-tagline {
  color: #6792cb;
  font-size: 11px;
  font-weight: 700;
}

.pc-enterprise-tagline.right {
  text-align: left;
}

.pc-enterprise-selector-grid {
  align-items: stretch;
  gap: 16px;
}

.pc-enterprise-region-panel,
.pc-enterprise-industry-panel,
.pc-enterprise-table {
  border-radius: 14px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: #fff;
}

.pc-enterprise-region-panel,
.pc-enterprise-industry-panel {
  min-height: 166px;
  padding: 10px 0;
  overflow: auto;
}

.pc-enterprise-region-panel {
  width: 46%;
}

.pc-enterprise-industry-panel {
  width: 54%;
}

.pc-enterprise-region-item,
.pc-enterprise-industry-item {
  min-height: 28px;
  padding: 0 14px;
  display: grid;
  align-items: center;
  gap: 8px;
  color: #5e6c86;
  font-size: 11px;
}

.pc-enterprise-region-item {
  grid-template-columns: 10px 1fr;
}

.pc-enterprise-industry-item {
  grid-template-columns: 18px 1fr 16px;
  border: 1px solid rgba(230, 235, 244, 0.9);
  border-radius: 10px;
  margin: 0 10px 8px;
}

.pc-enterprise-region-item.active,
.pc-enterprise-industry-item.active {
  color: #5d85c4;
}

.pc-enterprise-industry-item.active {
  background: rgba(243, 248, 255, 0.98);
  border-color: rgba(164, 190, 230, 0.55);
}

.pc-enterprise-caret,
.pc-enterprise-letter {
  color: #afbacb;
}

.pc-enterprise-radio {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(190, 199, 213, 0.8);
}

.pc-enterprise-industry-item.active .pc-enterprise-radio {
  border-color: #71a5e6;
  box-shadow: inset 0 0 0 3px #71a5e6;
}

.pc-enterprise-filter-list {
  gap: 8px;
}

.pc-enterprise-filter-row,
.pc-map-inline-field {
  display: grid;
  align-items: center;
  gap: 8px;
}

.pc-enterprise-filter-row {
  grid-template-columns: 72px 1fr;
}

.pc-enterprise-filter-row span,
.pc-map-inline-field span,
.pc-map-query-title,
.pc-enterprise-total {
  font-size: 12px;
  color: #364157;
}

.pc-enterprise-table-headbar {
  justify-content: space-between;
  gap: 12px;
}

.pc-enterprise-total strong {
  color: #1f2a42;
}

.pc-enterprise-export-btn {
  color: #6a778f;
  background: rgba(245, 247, 251, 0.98);
}

.pc-enterprise-table {
  min-height: 184px;
  overflow: hidden;
}

.pc-enterprise-table-head {
  min-height: 42px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 0.75fr 0.7fr 0.7fr 0.75fr 1.1fr;
  gap: 12px;
  color: #98a3b7;
  font-size: 11px;
  border-bottom: 1px solid rgba(235, 239, 246, 0.9);
}

.pc-enterprise-table-empty {
  min-height: 140px;
  display: grid;
  place-items: center;
  color: #c0c8d7;
  font-size: 11px;
}

.pc-map-layout {
  min-height: 470px;
}

.pc-map-query-title {
  font-weight: 800;
}

.pc-map-query-row {
  gap: 10px;
  flex-wrap: wrap;
}

.pc-map-inline-field {
  grid-template-columns: auto 180px;
}

.pc-map-input-chip {
  min-width: 180px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  color: #97a2b7;
  background: #fff;
  border: 1px solid rgba(186, 197, 216, 0.38);
  font-size: 12px;
}

.pc-map-search-btn {
  color: #fff;
  background: linear-gradient(180deg, #93e5cb 0%, #6ad3b1 100%);
}

.pc-map-reset-btn {
  color: #7f8da7;
  background: rgba(245, 247, 251, 0.98);
}

.pc-map-empty {
  flex: 1 1 auto;
  min-height: 330px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #c4cbd8;
}

.pc-map-empty-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(140, 229, 199, 0.95) 0%, rgba(140, 229, 199, 0.22) 65%, transparent 66%);
}

.pc-map-empty-title {
  color: #7e8b9f;
  font-size: 12px;
  font-weight: 700;
}

.pc-map-empty-sub {
  color: #bac3d2;
  font-size: 11px;
}

.pc-strategy-modal.publish {
  width: min(100%, 760px);
}

.pc-strategy-modal-icon.D {
  background: #6e56ea;
}

.pc-publish-layout,
.pc-publish-section,
.pc-publish-account-wrap,
.pc-publish-poi-list,
.pc-publish-topic-tags {
  display: grid;
  gap: 12px;
}

.pc-publish-layout {
  gap: 14px;
}

.pc-publish-head-chip,
.pc-publish-device-pill,
.pc-publish-video-tab,
.pc-publish-topic-tag,
.pc-publish-schedule-tab {
  border-radius: 999px;
  font-size: 11px;
}

.pc-publish-head-chip {
  justify-self: end;
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: #8e6ee8;
  background: rgba(244, 238, 255, 0.98);
}

.pc-publish-section {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(139, 152, 180, 0.12);
  background: #fff;
}

.pc-publish-section.compact {
  gap: 10px;
}

.pc-publish-section-title,
.pc-publish-inline-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 800;
  color: #263048;
}

.pc-publish-section-title small,
.pc-publish-inline-title small,
.pc-publish-inline-meta,
.pc-publish-upload-state,
.pc-publish-upload-sub,
.pc-publish-poi-tip {
  font-size: 11px;
  color: #9ca7bb;
}

.pc-publish-step {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #8f63f1 0%, #6b4be0 100%);
  font-size: 11px;
}

.pc-publish-device-row,
.pc-publish-account-grid,
.pc-publish-video-tabs,
.pc-publish-title-row,
.pc-publish-datetime-row {
  display: grid;
  gap: 10px;
}

.pc-publish-device-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-publish-device-pill,
.pc-publish-video-tab,
.pc-publish-schedule-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(216, 221, 233, 0.9);
  color: #7e8ba5;
  background: rgba(249, 250, 254, 0.98);
}

.pc-publish-device-pill.active,
.pc-publish-video-tab.active,
.pc-publish-schedule-tab.active {
  color: #8b64e8;
  border-color: rgba(171, 142, 233, 0.6);
  background: rgba(247, 242, 255, 0.98);
}

.pc-publish-select,
.pc-publish-datetime-field,
.pc-publish-poi-input {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  color: #7d8aa3;
  border: 1px solid rgba(186, 197, 216, 0.38);
  background: #fff;
  font-size: 12px;
}

.pc-publish-account-wrap {
  padding: 12px;
  border-radius: 14px;
  background: rgba(247, 244, 255, 0.6);
}

.pc-publish-account-header {
  color: #8f98aa;
  font-size: 11px;
}

.pc-publish-account-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pc-publish-account-card {
  min-height: 104px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(221, 226, 236, 0.9);
  background: #fff;
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  position: relative;
}

.pc-publish-account-card.active {
  border-color: rgba(157, 127, 231, 0.58);
  box-shadow: inset 0 0 0 1px rgba(157, 127, 231, 0.18);
  background: rgba(250, 246, 255, 0.98);
}

.pc-publish-account-platform {
  width: fit-content;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: #11192f;
  font-size: 10px;
}

.pc-publish-account-check {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(201, 209, 222, 0.9);
  background: #fff;
}

.pc-publish-account-check.active {
  border-color: #8d6fe8;
  box-shadow: inset 0 0 0 4px #8d6fe8;
}

.pc-publish-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d6dbe7 0%, #aab5cb 100%);
}

.pc-publish-avatar.photo {
  background: radial-gradient(circle at 42% 34%, #f9d6cf 0 22%, #49372f 23% 34%, #f4e1de 35% 44%, #d7a99d 45% 60%, #efe8f2 61%);
}

.pc-publish-avatar.logo {
  border-radius: 10px;
  background: linear-gradient(135deg, #0f182f 0%, #edf1f7 100%);
}

.pc-publish-account-name {
  color: #5f6c87;
  font-size: 11px;
}

.pc-publish-video-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-publish-upload-card {
  min-height: 82px;
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed rgba(216, 206, 237, 0.9);
  background: rgba(251, 249, 255, 0.92);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
}

.pc-publish-selected-list,
.pc-publish-title-list,
.pc-publish-cycle-box,
.pc-publish-cycle-pills {
  display: grid;
  gap: 10px;
}

.pc-publish-selected-item,
.pc-publish-title-item {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(223, 228, 238, 0.92);
  background: rgba(249, 250, 254, 0.98);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pc-publish-selected-name,
.pc-publish-title-item {
  color: #5f6c87;
  font-size: 12px;
  font-weight: 700;
}

.pc-publish-selected-meta {
  margin-top: 4px;
  color: #9ca7bb;
  font-size: 11px;
}

.pc-publish-selected-remove,
.pc-publish-file-btn.secondary {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
}

.pc-publish-selected-remove {
  color: #8b97ad;
  background: rgba(243, 246, 252, 0.98);
}

.pc-publish-file-btn.secondary {
  justify-self: start;
}

.pc-publish-upload-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #a98fe8;
  background: rgba(242, 236, 255, 0.98);
  font-size: 12px;
}

.pc-publish-upload-title {
  color: #646f87;
  font-size: 12px;
  font-weight: 700;
}

.pc-publish-file-btn,
.pc-publish-add-btn,
.pc-publish-topic-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
}

.pc-publish-file-btn,
.pc-publish-add-btn {
  color: #8d6fe8;
  background: rgba(244, 238, 255, 0.98);
}

.pc-publish-title-row {
  grid-template-columns: 1fr auto;
}

.pc-publish-inline-meta {
  justify-self: end;
  margin-top: -6px;
}

.pc-publish-topic-btn {
  color: #fff;
  background: linear-gradient(180deg, #b875ff 0%, #9254f5 100%);
}

.pc-publish-topic-tags {
  grid-template-columns: repeat(5, max-content);
  gap: 10px;
}

.pc-publish-topic-tag {
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  color: #9b88d7;
  background: rgba(248, 244, 255, 0.98);
}

.pc-publish-topic-tag.active {
  color: #fff;
  background: linear-gradient(180deg, #b875ff 0%, #9254f5 100%);
}

.pc-publish-poi-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr 22px;
  gap: 8px;
  align-items: center;
}

.pc-publish-poi-row.active {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(163, 192, 233, 0.22);
}

.pc-publish-poi-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
}

.pc-publish-poi-icon.抖 { background: #161823; }
.pc-publish-poi-icon.红 { background: #ff6d4d; }
.pc-publish-poi-icon.视 { background: #4aa9ff; }
.pc-publish-poi-icon.快 { background: #ffad38; }

.pc-publish-poi-search {
  color: #b8c1d1;
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.pc-publish-poi-input.active {
  border-color: rgba(150, 180, 228, 0.6);
  box-shadow: inset 0 0 0 1px rgba(150, 180, 228, 0.18);
}

.pc-publish-schedule-tabs {
  padding: 6px;
  border-radius: 14px;
  background: rgba(244, 247, 252, 0.96);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pc-publish-datetime-row {
  grid-template-columns: 180px 1fr;
}

.pc-publish-datetime-row.cycle {
  grid-template-columns: 140px 1fr;
}

.pc-publish-datetime-field.wide {
  color: #a0aabc;
}

.pc-publish-datetime-field.input {
  width: 100%;
}

.pc-publish-cycle-pills {
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
}

.pc-publish-cycle-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #8b97ad;
  background: rgba(243, 246, 252, 0.98);
  font-size: 11px;
}

.pc-publish-cycle-pill.active {
  color: #fff;
  background: linear-gradient(180deg, #8f63f1 0%, #6b4be0 100%);
}

.mobile-submodal-layer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(37, 44, 63, 0.18);
}

.mobile-city-ai-modal {
  width: min(100%, 460px);
  border-radius: 18px;
  border: 1px solid rgba(188, 197, 214, 0.38);
  background: #fff;
  box-shadow: 0 28px 72px rgba(31, 42, 78, 0.2);
  overflow: hidden;
}

.mobile-city-ai-head {
  min-height: 72px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 34px 1fr 24px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(139, 152, 180, 0.12);
}

.mobile-city-ai-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #58a6d7;
  background: rgba(232, 246, 255, 0.98);
  font-size: 12px;
  font-weight: 800;
}

.mobile-city-ai-title {
  font-size: 18px;
  font-weight: 800;
  color: #212c45;
}

.mobile-city-ai-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #8e99ae;
}

.mobile-city-ai-body {
  padding: 14px 18px 10px;
  display: grid;
  gap: 12px;
}

.mobile-city-ai-field {
  display: grid;
  gap: 6px;
}

.mobile-city-ai-field span {
  font-size: 12px;
  color: #6d7890;
}

.mobile-city-ai-footer {
  padding: 4px 18px 18px;
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 8px;
}

.mobile-city-ai-confirm,
.mobile-city-ai-cancel {
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
}

.mobile-city-ai-confirm {
  color: #fff;
  background: linear-gradient(180deg, #4d84e5 0%, #2d67c8 100%);
}

.mobile-city-ai-cancel {
  color: #8b97ad;
  background: rgba(243, 246, 252, 0.96);
}

.hero {
  padding: 20px 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(252, 253, 255, 0.86) 100%),
    radial-gradient(circle at top left, rgba(98, 117, 255, 0.14), transparent 22%);
  box-shadow: var(--shadow);
  border: 1px solid rgba(129, 146, 182, 0.14);
}

.hero-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.hero-title h1,
.page-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.hero-subtitle,
.page-subtitle {
  color: var(--muted);
  font-size: 12px;
}

.chip-row,
.stat-row,
.card-grid,
.split-grid,
.timeline,
.reference-grid,
.toolbar,
.metric-grid {
  display: grid;
  gap: 12px;
}

.chip-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  margin-top: 18px;
}

.chip {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.9);
  border: 1px solid var(--line);
  color: #53617d;
  font-size: 12px;
}

.chip strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 4px;
}

.card,
.glass-card {
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid rgba(139, 152, 180, 0.14);
  box-shadow: var(--shadow-soft);
}

.card {
  padding: 16px;
}

.glass-card {
  padding: 18px;
  backdrop-filter: blur(18px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
  padding: 16px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(136, 152, 185, 0.14);
  box-shadow: var(--shadow-soft);
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
}

.metric-value {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 8px;
}

.metric-foot {
  color: #5d6880;
  font-size: 13px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 6px var(--green-soft);
}

.toolbar {
  grid-template-columns: 1.4fr 1fr auto auto;
  align-items: center;
}

.search {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(248, 250, 255, 0.92);
  color: var(--text);
}

.primary-btn,
.secondary-btn,
.ghost-btn {
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  transition: 0.18s ease;
}

.primary-btn {
  color: #fff;
  background: linear-gradient(135deg, #4966ff 0%, #734dff 100%);
  box-shadow: 0 12px 30px rgba(86, 95, 255, 0.24);
}

.secondary-btn {
  color: var(--primary);
  background: var(--primary-soft);
}

.ghost-btn {
  color: #5b6680;
  background: rgba(243, 246, 251, 0.88);
}

.card-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.split-grid.two {
  grid-template-columns: 1.2fr 0.8fr;
}

.split-grid.three {
  grid-template-columns: 0.95fr 1.4fr 0.9fr;
}

.stack {
  display: grid;
  gap: 12px;
}

.progress-list,
.simple-list,
.timeline-list,
.tab-row,
.conversation-list,
.device-grid {
  display: grid;
  gap: 12px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(249, 251, 255, 0.88);
  border: 1px solid var(--line);
}

.list-main {
  display: grid;
  gap: 4px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: #59647d;
  background: rgba(245, 248, 252, 0.9);
  border: 1px solid rgba(134, 149, 178, 0.14);
}

.tag.primary {
  color: var(--primary);
  background: var(--primary-soft);
}

.tag.purple {
  color: var(--purple);
  background: var(--purple-soft);
}

.tag.green {
  color: var(--green);
  background: var(--green-soft);
}

.tag.amber {
  color: #b27b10;
  background: var(--amber-soft);
}

.tag.red {
  color: #ce4c5c;
  background: rgba(255, 106, 123, 0.12);
}

.tab-row {
  grid-template-columns: repeat(auto-fit, minmax(80px, max-content));
}

.tab {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  background: rgba(243, 247, 252, 0.9);
  color: #57637c;
}

.tab.active {
  background: linear-gradient(135deg, #172846 0%, #21345a 100%);
  color: #fff;
}

.progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(201, 212, 230, 0.42);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b8cff 0%, #7c4dff 100%);
}

.timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.timeline-step {
  padding: 14px;
  border-radius: 18px;
  background: rgba(249, 250, 255, 0.9);
  border: 1px solid var(--line);
}

.timeline-step .step-index {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #6f65ff 0%, #9261ff 100%);
  color: #fff;
  font-size: 12px;
  margin-bottom: 10px;
}

.upload-box,
.chat-window,
.device-card,
.reference-card,
.phone-card,
.message-panel {
  border-radius: 22px;
  border: 1px dashed rgba(122, 137, 166, 0.28);
  background: rgba(249, 251, 255, 0.88);
}

.upload-box {
  padding: 28px 18px;
  text-align: center;
  color: #7b86a0;
  font-size: 13px;
}

.flow-form {
  display: grid;
  gap: 10px;
}

.field {
  display: grid;
  gap: 6px;
}

.field-label {
  font-size: 12px;
  font-weight: 600;
}

.field-control {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 13px;
}

.dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.message-layout {
  display: grid;
  grid-template-columns: 270px 1fr 260px;
  gap: 14px;
}

.conversation-list {
  max-height: 560px;
  overflow: auto;
}

.conversation {
  padding: 12px;
  border-radius: 16px;
  background: rgba(246, 249, 255, 0.92);
  border: 1px solid var(--line);
}

.conversation.active {
  border-color: rgba(88, 105, 255, 0.24);
  background: linear-gradient(180deg, rgba(238, 242, 255, 0.96), rgba(247, 249, 255, 0.92));
}

.chat-window {
  padding: 16px;
  min-height: 560px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.bubble {
  max-width: 76%;
  padding: 12px 14px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 13px;
  color: #44526e;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.bubble.self {
  justify-self: end;
  color: #fff;
  background: linear-gradient(135deg, #2241e6 0%, #6b4dff 100%);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.action-tile {
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(248, 250, 255, 0.92);
  border: 1px solid var(--line);
  text-align: center;
  color: #59657f;
}

.device-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-card {
  min-height: 290px;
  padding: 12px;
}

.phone-card {
  height: 196px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 30%),
    linear-gradient(180deg, #111827 0%, #0b1220 100%);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.phone-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #52d483;
  box-shadow: 0 0 16px #52d483;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reference-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reference-card {
  overflow: hidden;
}

.reference-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(134, 148, 178, 0.14);
}

.reference-body {
  padding: 12px;
  display: grid;
  gap: 6px;
}

.reference-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.summary-box {
  padding: 16px;
  border-radius: 18px;
  background: rgba(250, 251, 255, 0.92);
  border: 1px solid var(--line);
}

.summary-box ul {
  margin: 0;
  padding-left: 18px;
  color: #52607b;
  line-height: 1.8;
}

.modal-stage {
  position: relative;
  min-height: 520px;
  padding: 20px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(230, 236, 248, 0.55), rgba(239, 243, 248, 0.92));
}

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(168, 180, 210, 0.18);
  backdrop-filter: blur(2px);
}

.modal-shell {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(129, 146, 182, 0.18);
  box-shadow: 0 24px 64px rgba(44, 58, 103, 0.16);
  overflow: hidden;
}

.modal-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(90deg, #5b7cff 0%, #7a59ff 50%, #ef5ba1 100%);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
}

.modal-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
}

.modal-body {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 16px;
}

.result-video-frame {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.result-video-frame img {
  width: 100%;
  display: block;
}

.result-video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.digital-human-layout,
.touch-list-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}

.digital-human-side,
.touch-list-side {
  padding: 12px;
  border-radius: 20px;
  background: rgba(245, 248, 253, 0.9);
  border: 1px solid var(--line);
  display: grid;
  align-content: start;
  gap: 10px;
}

.digital-human-nav {
  padding: 10px 12px;
  border-radius: 12px;
  color: #5d6881;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(136, 152, 185, 0.12);
  font-size: 13px;
}

.digital-human-nav.active {
  color: #fff;
  background: linear-gradient(135deg, #6a57ff 0%, #8c54ff 100%);
}

.digital-human-main,
.touch-list-main {
  padding: 16px;
  border-radius: 20px;
  background: rgba(252, 253, 255, 0.96);
  border: 1px solid var(--line);
}

.dropdown-open {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(136, 152, 185, 0.18);
  box-shadow: var(--shadow-soft);
  z-index: 2;
  display: grid;
  gap: 6px;
}

.dropdown-item {
  padding: 8px 10px;
  border-radius: 10px;
  color: #5d6881;
  font-size: 13px;
}

.dropdown-item.active {
  background: rgba(73, 102, 255, 0.08);
  color: var(--primary);
}

.workspace-board {
  border-radius: 20px;
  background: rgba(251, 252, 255, 0.96);
  border: 1px solid var(--line);
  overflow: hidden;
}

.workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.12);
}

.workspace-layout {
  display: grid;
  grid-template-columns: 264px 272px 1fr;
  min-height: 500px;
}

.workspace-side,
.workspace-middle,
.workspace-main,
.workspace-chat-main,
.workspace-actions-panel {
  padding: 12px;
}

.workspace-side,
.workspace-middle {
  border-right: 1px solid rgba(136, 152, 185, 0.12);
}

.workspace-company,
.workspace-customer,
.workspace-thread {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(248, 250, 255, 0.86);
  margin-bottom: 8px;
}

.workspace-button-reset {
  width: 100%;
  text-align: left;
}

.workspace-company strong,
.workspace-customer strong,
.workspace-thread strong {
  font-size: 13px;
}

.workspace-company .muted,
.workspace-customer .muted,
.workspace-thread .muted {
  font-size: 11px;
  line-height: 1.35;
}

.workspace-company.active,
.workspace-customer.active,
.workspace-thread.active {
  background: linear-gradient(180deg, rgba(238, 242, 255, 0.96), rgba(247, 249, 255, 0.92));
  border-color: rgba(88, 105, 255, 0.2);
}

.workspace-company-badge,
.workspace-avatar,
.workspace-thread-dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  color: #4c5a73;
  background: linear-gradient(135deg, #f485c4 0%, #ff9e47 100%);
}

.workspace-avatar {
  background: rgba(234, 238, 248, 0.95);
}

.workspace-thread-dot {
  background: #eef1ff;
}

.workspace-red-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff5c74;
}

.workspace-blank {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  color: #8a95ab;
  justify-items: start;
  padding: 24px;
}

.workspace-blank.workspace-blank-left {
  align-content: center;
}

.workspace-blank h3 {
  margin: 0 0 8px;
  font-size: 28px;
  color: #1e273a;
}

.workspace-chat-header,
.workspace-chat-top {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.12);
}

.workspace-chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-chat-body,
.ai-chat-scroll {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.workspace-message-time {
  font-size: 11px;
  color: #98a3ba;
  margin-bottom: 6px;
}

.workspace-message-bubble {
  width: fit-content;
  max-width: 460px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 250, 255, 0.98);
  border: 1px solid rgba(136, 152, 185, 0.12);
  color: #4b5872;
  line-height: 1.5;
  font-size: 12px;
}

.ai-detail-layout {
  grid-template-columns: 280px 1fr 260px;
}

.workspace-stat-card {
  padding: 12px;
  border-radius: 16px;
  background: rgba(247, 249, 255, 0.96);
  border: 1px solid var(--line);
  margin-bottom: 12px;
}

.workspace-stat-value {
  font-size: 30px;
  font-weight: 800;
}

.workspace-side-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.ai-chat-row {
  display: flex;
}

.ai-chat-row.self {
  justify-content: flex-end;
}

.ai-chat-bubble {
  max-width: 62%;
  padding: 9px 11px;
  border-radius: 10px;
  color: #47536d;
  background: #fff;
  border: 1px solid rgba(136, 152, 185, 0.12);
  font-size: 12px;
  line-height: 1.45;
}

.ai-chat-bubble.self {
  color: #20402b;
  background: #8df16e;
  border-color: rgba(84, 165, 68, 0.28);
}

.workspace-bottom-tools {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
}

.workspace-actions-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  border-left: 1px solid rgba(136, 152, 185, 0.12);
  background: rgba(249, 251, 255, 0.78);
}

.summary-box.summary-box-tight {
  padding: 12px 14px;
}

.workspace-back-inline {
  padding-inline: 12px;
}

.ai-page {
  display: grid;
  gap: 8px;
}

.ai-board {
  border-radius: 18px;
  border: 1px solid rgba(136, 152, 185, 0.12);
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
}

.ai-layout {
  display: grid;
  grid-template-columns: 190px 300px 1fr 168px;
  height: clamp(560px, calc(100vh - 210px), 920px);
  height: clamp(560px, calc(100dvh - 210px), 920px);
  min-height: 0;
  overflow: hidden;
}

.ai-account-panel,
.ai-device-panel,
.ai-thread-panel,
.ai-chat-panel,
.ai-action-panel {
  min-width: 0;
}

.ai-account-panel,
.ai-device-panel,
.ai-thread-panel,
.ai-chat-panel {
  border-right: 1px solid rgba(136, 152, 185, 0.12);
}

.ai-account-panel,
.ai-device-panel {
  padding: 10px 8px;
  background: rgba(247, 249, 253, 0.98);
}

.ai-account-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.ai-device-stat {
  padding: 10px 8px 14px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.1);
  margin-bottom: 8px;
}

.ai-device-stat-label,
.ai-device-stat-sub,
.ai-thread-sub,
.ai-thread-account,
.ai-thread-preview,
.ai-chat-empty-sub,
.ai-chat-header-sub,
.ai-action-section-title,
.ai-running-text {
  font-size: 10px;
  color: #97a3b9;
}

.ai-device-stat-value {
  margin-top: 4px;
  font-size: 34px;
  font-weight: 800;
  color: #1a2440;
  line-height: 1;
}

.ai-device-list,
.ai-account-list,
.ai-thread-list,
.ai-bind-list {
  display: grid;
  gap: 8px;
}

.ai-device-card {
  position: relative;
  width: 100%;
  padding: 10px 6px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.ai-device-card.active {
  background: linear-gradient(180deg, rgba(239, 242, 255, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(129, 112, 237, 0.16);
}

.ai-account-list {
  display: grid;
  min-height: 0;
  padding-right: 3px;
  gap: 7px;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ai-account-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  text-align: left;
  cursor: pointer;
}

.ai-account-card.active {
  border-color: rgba(83, 108, 230, 0.24);
  background: #f0f4ff;
  box-shadow: inset 0 0 0 1px rgba(83, 108, 230, 0.07);
}

.ai-account-all-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #17213e, #385ac5);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.ai-account-meta {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.ai-account-meta strong,
.ai-account-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-account-meta strong {
  color: #26324b;
  font-size: 11px;
}

.ai-account-meta span {
  color: #98a3b7;
  font-size: 9px;
}

.ai-account-card > em {
  position: absolute;
  right: 8px;
  bottom: 7px;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border-radius: 999px;
  background: #596fe6;
  color: #fff;
  font-size: 8px;
  font-style: normal;
}

.ai-device-edit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: #c0c8d7;
  font-size: 10px;
}

.ai-device-avatar,
.ai-thread-avatar,
.ai-chat-avatar {
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.ai-device-avatar {
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 12px;
}

.ai-device-avatar.violet {
  background: linear-gradient(135deg, #7566ff 0%, #5950de 100%);
}

.ai-device-avatar.ash {
  color: #6f7b92;
  background: rgba(233, 238, 247, 0.98);
}

.ai-device-avatar.gray {
  color: #6f7b92;
  background: rgba(237, 240, 246, 0.98);
}

.ai-device-avatar.blue {
  background: linear-gradient(135deg, #76a4ff 0%, #4c73e8 100%);
}

.ai-device-meta {
  display: grid;
  gap: 2px;
}

.ai-device-meta strong {
  font-size: 10px;
  color: #1f2942;
}

.ai-device-meta span {
  font-size: 9px;
  color: #a0abc0;
}

.ai-online-dot,
.ai-running-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #46c66f;
}

.ai-online-dot {
  position: absolute;
  right: 10px;
  top: 10px;
}

.ai-thread-panel {
  padding: 10px 10px 10px;
  background: rgba(250, 252, 255, 0.98);
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.ai-thread-head {
  padding: 2px 2px 10px;
}

.ai-thread-title {
  font-size: 16px;
  font-weight: 800;
  color: #1b2440;
}

.ai-thread-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.ai-thread-tab {
  height: 28px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 11px;
  color: #7c89a3;
  background: rgba(244, 246, 251, 0.98);
}

.ai-thread-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #5d69ff 0%, #5d48ea 100%);
}

.ai-thread-search {
  margin-bottom: 10px;
}

.ai-thread-search-input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(191, 201, 217, 0.4);
  background: rgba(247, 249, 253, 0.98);
  font-size: 11px;
  color: #2c3750;
}

.ai-thread-list {
  min-height: 0;
  padding-right: 3px;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ai-account-list::-webkit-scrollbar,
.ai-thread-list::-webkit-scrollbar,
.ai-action-panel::-webkit-scrollbar,
.ai-chat-scroll::-webkit-scrollbar {
  width: 6px;
}

.ai-account-list::-webkit-scrollbar-thumb,
.ai-thread-list::-webkit-scrollbar-thumb,
.ai-action-panel::-webkit-scrollbar-thumb,
.ai-chat-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(129, 143, 171, 0.32);
}

.ai-thread-card {
  position: relative;
  width: 100%;
  min-height: 74px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(228, 232, 241, 0.9);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  text-align: left;
}

.ai-thread-card.active {
  border-color: rgba(113, 123, 255, 0.28);
  background: linear-gradient(180deg, rgba(242, 245, 255, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(111, 124, 255, 0.14);
}

.ai-thread-avatar {
  width: 28px;
  height: 28px;
  color: #6a7690;
  font-size: 11px;
  background: rgba(233, 238, 247, 0.98);
}

.ai-thread-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-thread-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-thread-line strong {
  font-size: 11px;
  color: #1f2942;
}

.ai-thread-line span {
  font-size: 9px;
  color: #a2adc0;
}

.ai-thread-preview,
.ai-thread-account {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-thread-tag {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #6f5ef4;
  background: rgba(241, 236, 255, 0.98);
  font-size: 9px;
}

.ai-chat-panel {
  background: rgba(255, 255, 255, 0.98);
  display: grid;
  min-height: 0;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.ai-chat-empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
}

.ai-chat-empty-title,
.ai-chat-header strong {
  font-size: 14px;
  color: #1d2640;
  font-weight: 800;
}

.ai-chat-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-chat-chip {
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #6b7288;
  background: rgba(241, 242, 246, 0.98);
  font-size: 9px;
}

.ai-chat-header,
.ai-chat-footer,
.ai-chat-header-actions,
.ai-chat-footer-left,
.ai-chat-footer-right,
.ai-action-section-title {
  display: flex;
  align-items: center;
}

.ai-chat-header {
  min-height: 56px;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.12);
}

.ai-chat-header-actions,
.ai-chat-footer-left,
.ai-chat-footer-right {
  gap: 8px;
}

.ai-chat-association {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin-right: 3px;
}

.ai-chat-association strong {
  max-width: 180px;
  overflow: hidden;
  color: #3e4b64;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-association span {
  color: #99a4b8;
  font-size: 9px;
  white-space: nowrap;
}

.ai-chat-icon-btn,
.ai-chat-mini-btn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #9ba6ba;
  background: rgba(245, 247, 251, 0.98);
  font-size: 12px;
}

.ai-chat-input-shell {
  min-width: 0;
  flex: 1;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(205, 213, 225, 0.65);
  background: rgba(255, 255, 255, 0.98);
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.ai-chat-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #647089;
  font-size: 11px;
}

.ai-chat-scroll.modern {
  padding: 14px 18px;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.98)),
    linear-gradient(90deg, rgba(238, 242, 249, 0.45) 1px, transparent 1px),
    linear-gradient(rgba(238, 242, 249, 0.45) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}

.ai-chat-date-divider {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 999px;
  color: #8d98ad;
  background: rgba(247, 249, 252, 0.98);
  font-size: 10px;
}

.ai-chat-row.modern {
  gap: 10px;
  align-items: flex-start;
}

.ai-chat-row.modern.self {
  justify-content: flex-end;
}

.ai-chat-avatar {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #7ad0ff 0%, #5e80ff 100%);
}

.ai-chat-avatar.self {
  background: linear-gradient(135deg, #d9d9d9 0%, #bcbcbc 100%);
  order: 2;
}

.ai-chat-bubble-wrap {
  max-width: 68%;
  display: grid;
  gap: 4px;
}

.ai-chat-msg-sender {
  max-width: 100%;
  overflow: hidden;
  color: #596984;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-msg-time {
  font-size: 9px;
  color: #b0b8c7;
}

.ai-chat-bubble.modern {
  padding: 10px 12px;
  border-radius: 4px;
  color: #515c73;
  background: #fff;
  border: 1px solid rgba(209, 217, 230, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.ai-chat-bubble.self.modern {
  color: #234726;
  background: #8de95f;
  border-color: rgba(92, 167, 74, 0.28);
}

.ai-chat-footer {
  min-height: 56px;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid rgba(136, 152, 185, 0.12);
}

.ai-chat-toggle-label {
  font-size: 10px;
  color: #8e9ab0;
}

.ai-chat-switch {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  position: relative;
  background: rgba(216, 224, 237, 0.98);
}

.ai-chat-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
}

.ai-chat-switch.active {
  background: linear-gradient(135deg, #7a67ff 0%, #5d5cff 100%);
}

.ai-chat-switch.active::after {
  left: 16px;
}

.ai-action-panel {
  padding: 12px 10px;
  background: rgba(249, 251, 255, 0.98);
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ai-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.ai-action-grid.mini {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-action-tile {
  min-height: 46px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid rgba(223, 228, 238, 0.9);
  background: rgba(255, 255, 255, 0.98);
  color: #48556f;
  font-size: 10px;
  line-height: 1.3;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
}

.ai-action-tile.mini {
  min-height: 38px;
}

.ai-action-icon {
  font-size: 13px;
  color: #8a96aa;
}

.ai-action-section-title {
  gap: 6px;
  justify-content: space-between;
  color: #7e8ba3;
}

.ai-bind-list {
  margin-top: 8px;
}

.ai-bind-item {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.98);
  color: #596880;
  font-size: 10px;
  justify-content: space-between;
}

.ai-bind-index {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #6e7a92;
  background: rgba(233, 238, 247, 0.98);
  font-size: 9px;
}

.ai-bind-index.light {
  background: rgba(240, 242, 247, 0.98);
}

.ai-bind-index.violet {
  color: #fff;
  background: linear-gradient(135deg, #7f6fff 0%, #6052eb 100%);
}

.ai-bind-item em {
  font-style: normal;
  color: #4fb36d;
}

.assistant-page {
  display: grid;
  gap: 8px;
}

.assistant-shell {
  border-radius: 18px;
  border: 1px solid rgba(136, 152, 185, 0.12);
  background: rgba(255, 255, 255, 0.96);
  padding: 14px;
}

.assistant-layout {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr) 246px;
  min-height: 620px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(223, 229, 240, 0.92);
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.assistant-session-panel,
.assistant-chat-panel {
  border-right: 1px solid rgba(136, 152, 185, 0.12);
}

.assistant-session-panel {
  padding: 12px 10px;
  background: rgba(244, 247, 252, 0.98);
  display: grid;
  align-content: start;
  gap: 12px;
}

.assistant-session-head,
.assistant-chat-header,
.assistant-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.assistant-session-title,
.assistant-side-title {
  font-size: 15px;
  font-weight: 800;
  color: #1a2440;
}

.assistant-session-create {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, #243a76 0%, #182956 100%);
}

.assistant-session-list,
.assistant-side-list {
  display: grid;
  gap: 10px;
}

.assistant-session-card {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  border: 1px solid rgba(223, 228, 238, 0.92);
  background: rgba(255, 255, 255, 0.98);
  display: grid;
  gap: 8px;
}

.assistant-session-card.active {
  color: #fff;
  border-color: rgba(26, 48, 108, 0.18);
  background: linear-gradient(180deg, #1f2f63 0%, #13234f 100%);
  box-shadow: 0 20px 36px rgba(21, 35, 78, 0.22);
}

.assistant-session-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assistant-session-line strong {
  font-size: 12px;
}

.assistant-session-line span,
.assistant-session-preview,
.assistant-session-meta {
  font-size: 10px;
}

.assistant-session-preview {
  line-height: 1.5;
  color: #8b97ac;
}

.assistant-session-card.active .assistant-session-preview,
.assistant-session-card.active .assistant-session-line span,
.assistant-session-card.active .assistant-session-meta {
  color: rgba(229, 235, 247, 0.86);
}

.assistant-session-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #9aa5ba;
}

.assistant-session-badge {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(239, 243, 249, 0.98);
  color: #7d88a1;
}

.assistant-session-badge.active {
  color: #1b8d5f;
  background: rgba(220, 247, 232, 0.98);
}

.assistant-chat-panel {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background: rgba(255, 255, 255, 0.98);
}

.assistant-chat-header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.12);
}

.assistant-chat-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.assistant-chat-logo {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.assistant-chat-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.assistant-chat-sub,
.assistant-side-code,
.assistant-side-card span,
.assistant-side-card small,
.assistant-confirm-text,
.assistant-chat-status {
  font-size: 10px;
  color: #98a4b8;
}

.assistant-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.assistant-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #37c77a;
  box-shadow: 0 0 0 6px rgba(55, 199, 122, 0.12);
}

.assistant-chat-scroll {
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at top left, rgba(135, 156, 255, 0.08), transparent 24%),
    rgba(252, 253, 255, 0.98);
}

.assistant-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.assistant-bubble-row.self {
  justify-content: flex-end;
}

.assistant-bubble-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, #73c7ff 0%, #5b7eff 100%);
}

.assistant-bubble-avatar.self {
  order: 2;
  background: linear-gradient(135deg, #273865 0%, #182957 100%);
}

.assistant-bubble-wrap {
  max-width: 78%;
}

.assistant-bubble {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(217, 223, 234, 0.88);
  background: rgba(255, 255, 255, 0.98);
  color: #4c5870;
  font-size: 12px;
  line-height: 1.68;
  box-shadow: 0 10px 24px rgba(22, 31, 61, 0.06);
}

.assistant-bubble.self {
  color: #fff;
  border-color: rgba(26, 48, 108, 0.2);
  background: linear-gradient(135deg, #223867 0%, #162a56 100%);
}

.assistant-quick-row {
  padding: 12px 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assistant-quick-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #57647d;
  font-size: 11px;
  background: rgba(245, 247, 252, 0.98);
  border: 1px solid rgba(218, 224, 236, 0.92);
}

.assistant-input-panel {
  padding: 12px 18px 18px;
  display: grid;
  gap: 10px;
}

.assistant-input {
  width: 100%;
  min-height: 96px;
  resize: none;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(211, 219, 233, 0.92);
  background: rgba(248, 250, 255, 0.98);
  color: #24314c;
  font-size: 12px;
  line-height: 1.6;
}

.assistant-side-panel {
  padding: 16px 14px;
  background: rgba(247, 249, 253, 0.92);
  display: grid;
  align-content: start;
  gap: 14px;
}

.assistant-side-card,
.assistant-confirm-box {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(220, 226, 237, 0.92);
  background: rgba(255, 255, 255, 0.98);
  display: grid;
  gap: 6px;
}

.assistant-side-card strong,
.assistant-confirm-title {
  font-size: 13px;
  color: #1e2741;
  font-weight: 800;
}

.assistant-confirm-box {
  background:
    linear-gradient(180deg, rgba(36, 56, 103, 0.96) 0%, rgba(24, 42, 86, 0.96) 100%),
    rgba(255, 255, 255, 0.98);
}

.assistant-confirm-title,
.assistant-confirm-text {
  color: #fff;
}

.assistant-confirm-text {
  line-height: 1.6;
  color: rgba(233, 238, 247, 0.82);
}

.assistant-confirm-btn {
  height: 34px;
  border-radius: 10px;
  color: #24314b;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, #d9ecff 0%, #ffffff 100%);
}

.geo-page {
  min-height: 100%;
}

.geo-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}

.geo-menu,
.geo-content {
  border-radius: 20px;
  border: 1px solid rgba(220, 226, 236, 0.92);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 28px rgba(39, 52, 86, 0.06);
}

.geo-menu {
  padding: 18px 14px;
  align-self: start;
  display: grid;
  gap: 14px;
}

.geo-menu-title {
  color: #9aa5b8;
  font-size: 12px;
  font-weight: 700;
}

.geo-menu-list {
  display: grid;
  gap: 8px;
}

.geo-menu-item {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid rgba(229, 234, 242, 0.96);
  background: rgba(248, 250, 253, 0.98);
}

.geo-menu-item.active {
  border-color: rgba(81, 102, 255, 0.18);
  background: linear-gradient(180deg, rgba(242, 246, 255, 0.98), rgba(249, 250, 253, 0.98));
}

.geo-menu-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6e7dff 0%, #855eff 100%);
  flex: 0 0 auto;
}

.geo-menu-copy {
  display: grid;
  gap: 4px;
}

.geo-menu-copy strong {
  color: #202942;
  font-size: 13px;
}

.geo-menu-copy span {
  color: #8b96aa;
  font-size: 11px;
}

.geo-content {
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
}

.geo-crumb {
  color: #c2c9d5;
  font-size: 12px;
  font-weight: 700;
}

.geo-welcome-card,
.geo-platform-card {
  border-radius: 18px;
  border: 1px solid rgba(230, 234, 241, 0.94);
  background: #fff;
}

.geo-welcome-card {
  padding: 18px 18px 16px;
}

.geo-welcome-title {
  color: #1f2941;
  font-size: 28px;
  font-weight: 800;
}

.geo-welcome-sub {
  margin-top: 6px;
  color: #9ba6ba;
  font-size: 13px;
}

.geo-welcome-panel {
  margin-top: 18px;
  min-height: 210px;
  padding: 18px 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(236, 239, 245, 0.94);
  background: rgba(252, 252, 253, 0.98);
}

.geo-welcome-panel-title {
  color: #57637e;
  font-size: 13px;
}

.geo-welcome-list {
  margin: 14px 0 0;
  padding-left: 18px;
  color: #5b6780;
  font-size: 13px;
  line-height: 2;
}

.geo-welcome-warn {
  margin-top: 10px;
  color: #d69a36;
  font-size: 12px;
}

.geo-platform-card {
  padding: 14px 14px 16px;
}

.geo-platform-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #24304b;
  font-size: 14px;
  font-weight: 700;
}

.geo-platform-square {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #101827;
}

.geo-platform-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.geo-platform-pill {
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.geo-platform-pill.cyan {
  background: linear-gradient(90deg, #29c8ef 0%, #2a73e8 100%);
}

.geo-platform-pill.orange {
  background: linear-gradient(90deg, #ff8d1a 0%, #ff5f17 100%);
}

.geo-platform-pill.green {
  background: linear-gradient(90deg, #1bc86f 0%, #23b95e 100%);
}

.geo-platform-pill.pink {
  background: linear-gradient(90deg, #ff4b97 0%, #e13faf 100%);
}

.geo-platform-pill.red {
  background: linear-gradient(90deg, #ff2b36 0%, #ea0817 100%);
}

.geo-platform-pill.indigo {
  background: linear-gradient(90deg, #4c6cff 0%, #6355ea 100%);
}

.geo-platform-pill.magenta {
  background: linear-gradient(90deg, #ff1278 0%, #d2127d 100%);
}

.geo-platform-pill.blue {
  background: linear-gradient(90deg, #32c5eb 0%, #2c8ddd 100%);
}

.geo-platform-pill.deepblue {
  background: linear-gradient(90deg, #356cff 0%, #3254d9 100%);
}

.geo-platform-pill.purple {
  background: linear-gradient(90deg, #b04cf5 0%, #d05ddb 100%);
}

.geo-platform-pill.orange-red {
  background: linear-gradient(90deg, #ff6d2c 0%, #ff4417 100%);
}

.geo-platform-pill.amber {
  background: linear-gradient(90deg, #ff9f1d 0%, #ffb321 100%);
}

.geo-footer-bar {
  padding: 12px 6px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.geo-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7d8799;
  font-size: 12px;
}

.geo-next-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #121f3d 0%, #0d1530 100%);
  font-size: 13px;
  font-weight: 700;
}

.device-ops-page {
  display: grid;
  gap: 8px;
}

/* 任务中心 */
.task-center-page { padding: 20px 22px 46px; color: #19213a; }
.task-center-hero { min-height: 142px; padding: 26px 30px; border-radius: 24px; background: linear-gradient(120deg,#111b38,#273f90 68%,#4169e8); color:#fff; display:flex; align-items:center; justify-content:space-between; box-shadow:0 18px 36px rgba(35,56,128,.17); }
.task-center-hero span,.task-modal-head small { color:#75dcff; letter-spacing:2px; font-size:11px; font-weight:800; }
.task-center-hero h1 { margin:7px 0 6px; font-size:28px; }
.task-center-hero p { margin:0; color:#c8d3ef; }
.task-center-hero > button { border:0; border-radius:14px; padding:13px 20px; background:#fff; color:#3159d8; font-weight:800; cursor:pointer; }
.task-stat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:16px 0; }
.task-stat { min-height:88px; padding:16px 18px; border:1px solid #e4e8f3; border-radius:17px; background:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.task-stat span { color:#7d879e; font-size:12px; }.task-stat strong { font-size:27px; }.task-stat.blue{background:#f2f6ff}.task-stat.purple{background:#f5f2ff}.task-stat.green{background:#f1fbf6}.task-stat.orange{background:#fff8ed}.task-stat.red{background:#fff2f3}
.task-list-card { border:1px solid #e2e7f2; border-radius:20px; background:#fff; overflow:hidden; }
.task-list-toolbar { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf0f6; }
.task-status-tabs { display:flex; gap:6px; }.task-status-tabs button,.task-search button { border:0; border-radius:10px; padding:9px 13px; background:#f5f7fb; color:#67728b; cursor:pointer; }.task-status-tabs button.active { background:#315bea; color:#fff; }
.task-search { display:flex; gap:8px; }.task-search input { width:250px; border:1px solid #dfe4ef; border-radius:10px; padding:9px 12px; outline:none; }
.task-notice { margin:12px 18px 0; padding:10px 13px; border-radius:10px; background:#f0f5ff; color:#3153b9; font-size:13px; }
.task-table { overflow-x:auto; }.task-table-row { min-width:1120px; display:grid; grid-template-columns:1.6fr 1.25fr .65fr 1fr .75fr .8fr 1.05fr 1.3fr; gap:12px; padding:13px 18px; align-items:center; border-top:1px solid #f0f2f7; font-size:13px; cursor:pointer; }.task-table-row:hover:not(.head){background:#fafbff}.task-table-row.head { color:#8a93a7; background:#fafbfe; border:0; cursor:default; font-size:12px; }.task-table-row span { min-width:0; }.task-table-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.task-table-row small { display:block; margin-top:4px; color:#98a0b3; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-status { display:inline-flex; padding:5px 9px; border-radius:999px; font-style:normal; font-size:11px; background:#eef1f7; color:#67728a; }.task-status.running{background:#edf2ff;color:#315be6}.task-status.warning{background:#fff4df;color:#b06b00}.task-status.paused{background:#f2efff;color:#6b52c8}.task-status.success{background:#eaf9f0;color:#238750}.task-status.failed{background:#ffedef;color:#c43b4f}.task-status.cancelled{background:#f0f1f4;color:#737b8c}
.task-progress { width:88px; height:6px; border-radius:4px; background:#edf0f6; overflow:hidden; }.task-progress i{display:block;height:100%;background:linear-gradient(90deg,#315bea,#6f7cff);border-radius:4px}.task-actions{display:flex;gap:5px;flex-wrap:wrap}.task-actions button{border:1px solid #dce2ef;background:#fff;color:#3f4b64;padding:5px 8px;border-radius:7px;cursor:pointer}.task-actions button.danger{color:#c83e50;border-color:#f0cbd1}.task-empty{padding:38px;text-align:center;color:#929bae}
.task-progress.ongoing i { background: linear-gradient(90deg,#20b98b,#71dfb9,#20b98b); background-size:200% 100%; animation:task-monitor-flow 1.8s linear infinite; }
@keyframes task-monitor-flow { from { background-position:100% 0; } to { background-position:-100% 0; } }
.task-drawer-mask,.task-modal-mask { position:fixed; inset:0; z-index:60; background:rgba(15,23,43,.4); backdrop-filter:blur(3px); }
.task-drawer { position:absolute; right:0; top:0; bottom:0; width:min(520px,92vw); background:#fff; padding:24px; overflow:auto; box-shadow:-20px 0 50px rgba(19,29,58,.18); }
.task-drawer-head,.task-modal-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #edf0f5; padding-bottom:16px; }.task-drawer-head h2,.task-modal-head h2{margin:5px 0 0}.task-drawer-head button,.task-modal-head button{border:0;background:#f2f4f8;border-radius:10px;width:34px;height:34px;font-size:22px;cursor:pointer}.task-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 24px}.task-detail-grid>div{padding:13px;border-radius:12px;background:#f7f8fc}.task-detail-grid span{display:block;color:#929bae;font-size:11px;margin-bottom:5px}.task-detail-grid strong{font-size:13px;word-break:break-all}.task-drawer h3{font-size:15px}.task-log{display:flex;gap:12px;padding:10px 2px}.task-log>i{width:9px;height:9px;margin-top:4px;border-radius:50%;background:#4b6fec;box-shadow:0 0 0 4px #edf1ff}.task-log.error>i{background:#dd4960;box-shadow:0 0 0 4px #ffedf0}.task-log div{border-bottom:1px solid #edf0f5;padding-bottom:11px;flex:1}.task-log time,.task-log small{display:block;color:#9aa2b4;font-size:11px}.task-log strong{display:block;margin:4px 0;font-size:13px}
.task-create-modal { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(820px,92vw); max-height:92vh; overflow:auto; padding:24px; border-radius:22px; background:#fff; box-shadow:0 30px 80px rgba(19,29,58,.25); }.task-modal-head p{margin:6px 0 0;color:#929bad;font-size:11px}.task-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.task-form-grid label,.task-param-editor{display:flex;flex-direction:column;gap:6px}.task-form-grid label.wide{grid-column:1/-1}.task-form-grid label>span,.task-param-editor>span,.task-device-picker>span,.task-risk-grid label>span{font-size:12px;color:#69748b;font-weight:700}.task-form-grid input,.task-form-grid select,.task-param-editor textarea,.task-risk-grid input{border:1px solid #dfe4ef;border-radius:10px;padding:10px 11px;background:#fff;outline:none}.task-form-grid input:disabled{background:#f5f7fb;color:#8e98aa}.task-risk-grid{display:grid;grid-template-columns:1fr 1.35fr 1.3fr;gap:10px;margin-top:16px;padding:13px;border:1px solid #e7ebf3;border-radius:13px;background:#fafbfe}.task-risk-grid label{display:flex;flex-direction:column;gap:6px}.task-risk-grid label>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}.task-risk-grid b{color:#9aa3b2;font-size:10px}.task-risk-grid .task-risk-check{flex-direction:row;align-items:center;padding-top:19px}.task-risk-check input{width:16px;height:16px;padding:0}.task-risk-check span{font-size:10px!important}.task-device-picker{margin:18px 0}.task-device-picker>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.task-device-picker button{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;text-align:left;border:1px solid #e0e5f0;border-radius:11px;background:#fff;padding:10px;cursor:pointer}.task-device-picker button.active{border-color:#4168ec;background:#f1f5ff}.task-device-picker button i{color:#55bb78}.task-device-picker button small{color:#929bae}.task-param-editor textarea{min-height:100px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.task-advanced{padding:10px 12px;border:1px solid #e4e8f1;border-radius:11px;background:#fbfcff}.task-advanced summary{color:#68758d;font-size:11px;font-weight:700;cursor:pointer}.task-advanced .task-param-editor{margin-top:10px}.task-audit-hint{margin-top:12px;padding:9px 11px;border-radius:9px;background:#f0f4ff;color:#6074bb;font-size:9px;line-height:1.5;word-break:break-all}.task-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.task-modal-actions button{border:1px solid #dce2ed;border-radius:10px;background:#fff;padding:10px 18px;cursor:pointer}.task-modal-actions button.primary{border-color:#315bea;background:#315bea;color:#fff}.task-modal-actions button:disabled{cursor:not-allowed;opacity:.5}
@media(max-width:1100px){.task-stat-grid{grid-template-columns:repeat(3,1fr)}.task-center-hero{align-items:flex-start;gap:18px;flex-direction:column}.task-device-picker>div{grid-template-columns:1fr 1fr}.task-risk-grid{grid-template-columns:1fr}}

.device-ops-shell {
  border-radius: 18px;
  border: 1px solid rgba(136, 152, 185, 0.12);
  background: rgba(255, 255, 255, 0.96);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.device-ops-code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #95a2b7;
}

.device-ops-title {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 800;
  color: #151f39;
}

.device-ops-sub,
.device-ops-stat-label,
.device-ops-stat-foot,
.device-ops-card-sub {
  font-size: 11px;
  color: #97a3b7;
}

.device-ops-toolbar,
.device-ops-filters,
.device-ops-tools,
.device-ops-card-line {
  display: flex;
  align-items: center;
}

.device-ops-toolbar,
.device-ops-filters {
  justify-content: space-between;
  gap: 12px;
}

.device-ops-toolbar {
  align-items: flex-start;
}

.device-ops-stats {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.device-ops-stat-card {
  min-height: 88px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(222, 228, 239, 0.8);
  display: grid;
  align-content: start;
  gap: 6px;
}

.device-ops-stat-card.blue {
  background: linear-gradient(180deg, rgba(245, 248, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.device-ops-stat-card.green {
  background: linear-gradient(180deg, rgba(241, 251, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.device-ops-stat-card.gray {
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.device-ops-stat-card.purple {
  background: linear-gradient(180deg, rgba(248, 243, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.device-ops-stat-value {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #172039;
}

.device-ops-tools {
  gap: 10px;
}

.device-ops-tool-btn,
.device-filter-pill,
.device-select-chip {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
}

.device-ops-tool-btn {
  color: #7a869f;
  background: rgba(250, 251, 254, 0.98);
  border: 1px solid rgba(214, 221, 233, 0.9);
}

.device-ops-search {
  min-width: 210px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(214, 221, 233, 0.9);
  background: rgba(250, 251, 254, 0.98);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #afb8c8;
}

.device-ops-search input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 11px;
  color: #32405a;
}

.device-select-chip {
  color: #9aa5bb;
  background: rgba(250, 251, 254, 0.98);
  border: 1px solid rgba(219, 225, 236, 0.9);
}

.device-select-chip.active {
  color: #5f67ff;
  background: rgba(238, 241, 255, 0.98);
}

.device-filter-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.device-filter-pill {
  color: #76829b;
  background: rgba(246, 248, 252, 0.98);
}

.device-filter-pill.active {
  color: #fff;
  background: linear-gradient(135deg, #4f75ff 0%, #5f68ff 100%);
}

.device-ops-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.device-ops-card {
  width: 100%;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(225, 230, 239, 0.95);
  background: rgba(255, 255, 255, 0.98);
  position: relative;
  text-align: left;
}

.device-ops-check {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 15px;
  height: 15px;
  border-radius: 6px;
  border: 1px solid rgba(236, 240, 247, 0.9);
  background: rgba(255, 255, 255, 0.95);
}

.device-ops-check.active {
  border-color: #6b63ff;
  background: linear-gradient(135deg, #6b63ff 0%, #5d6dff 100%);
}

.device-ops-phone {
  position: relative;
  aspect-ratio: 0.68;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(180deg, #111827 0%, #060b14 100%);
}

.device-ops-phone::after {
  content: "";
  position: absolute;
  inset: 10px 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.device-ops-live-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(65, 77, 101, 0.86);
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
}

.device-ops-live-badge.active {
  background: #ff5a5f;
}

.device-ops-live-wrap {
  position: absolute;
  inset: 0;
}

.device-ops-live-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.device-ops-scene {
  position: absolute;
  inset: 0;
}

.device-ops-scene.park {
  background:
    linear-gradient(180deg, rgba(98, 138, 207, 0.12), rgba(18, 28, 54, 0.1)),
    linear-gradient(180deg, #98c5f7 0%, #c8e0ff 34%, #4a7c4a 35%, #274d27 100%);
}

.device-ops-scene.park::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 15%;
  height: 27%;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, #f5f6f7 0%, #cfd4db 100%);
  box-shadow: 0 10px 20px rgba(14, 20, 32, 0.22);
}

.device-ops-scene.park::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, #b0bccf 0%, #8fa1ba 100%);
}

.device-ops-scene.shop {
  background:
    linear-gradient(180deg, rgba(245, 247, 251, 0.08), rgba(9, 11, 16, 0.04)),
    linear-gradient(180deg, #bac7dd 0%, #f1f6ff 36%, #d7dbe2 37%, #737a84 100%);
}

.device-ops-scene.shop::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 21%;
  height: 34%;
  background: linear-gradient(180deg, #9b6b43 0%, #5a3521 100%);
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 12px 22px rgba(11, 13, 18, 0.28);
}

.device-ops-scene.shop::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(225deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(315deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(180deg, #2b313c 0%, #161a22 100%);
}

.device-ops-offline-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  color: rgba(233, 238, 247, 0.46);
  font-size: 11px;
  text-align: center;
}

.device-ops-offline-mark.active {
  color: rgba(233, 238, 247, 0.72);
}

.device-preview-play {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.device-preview-play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid rgba(255, 255, 255, 0.82);
}

.device-preview-toggle {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #fff;
  background: rgba(74, 101, 224, 0.88);
  font-size: 9px;
  cursor: pointer;
}

.device-preview-toggle.stop {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 4;
  background: rgba(18, 25, 39, 0.78);
}

.device-ops-offline-icon {
  width: 20px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(230, 235, 244, 0.28);
  justify-self: center;
  position: relative;
}

.device-ops-offline-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 999px;
  background: rgba(230, 235, 244, 0.22);
}

.device-ops-card-meta {
  padding: 10px 10px 12px;
  display: grid;
  gap: 4px;
}

.device-ops-card-line {
  justify-content: space-between;
  gap: 8px;
}

.device-ops-card-line strong {
  font-size: 11px;
  color: #1b2640;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-status-text {
  font-size: 10px;
  color: #a0a9ba;
}

.device-status-text.online {
  color: #56b976;
}

.device-view-tabs {
  display: inline-flex;
  width: fit-content;
  padding: 4px;
  gap: 4px;
  border: 1px solid #e3e8f2;
  border-radius: 13px;
  background: #f5f7fb;
}

.device-view-tabs button {
  min-width: 150px;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #78849a;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}

.device-view-tabs button span,
.device-view-tabs button small { display: block; }
.device-view-tabs button span { font-size: 13px; font-weight: 800; }
.device-view-tabs button small { margin-top: 3px; font-size: 10px; color: #9ba5b7; }
.device-view-tabs button.active { color: #274fd2; background: #fff; box-shadow: 0 4px 14px rgba(35,56,112,.09); }
.device-view-tabs button.active small { color: #6f83c5; }

.mobile-operations-shell { display: grid; gap: 14px; }
.mobile-module-tabs { display: inline-flex; width: fit-content; gap: 5px; padding: 5px; border: 1px solid #e1e6f1; border-radius: 13px; background: #f4f6fb; }
.mobile-module-tabs button { min-width: 112px; padding: 10px 15px; border: 0; border-radius: 9px; background: transparent; color: #7b879c; font-weight: 700; cursor: pointer; }
.mobile-module-tabs button.active { background: #fff; color: #3158d5; box-shadow: 0 5px 16px rgba(37,56,105,.1); }
.app-manage-page { display: grid; gap: 14px; }
.app-manage-card,.device-applications-panel { padding: 20px; border: 1px solid #e4e8f1; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(24,42,79,.04); }
.app-manage-head,.device-applications-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.app-manage-head small,.device-applications-head small { color: #6780de; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.app-manage-head h2,.device-applications-head h3 { margin: 4px 0; color: #17223b; font-size: 19px; }
.app-manage-head p,.device-applications-head p { margin: 0; color: #929cad; font-size: 11px; }
.app-manage-head>button,.app-manage-head select,.device-applications-head select { min-height: 38px; padding: 0 13px; border: 1px solid #dce2ed; border-radius: 9px; background: #fff; color: #40506c; }
.app-manage-notice { margin-bottom: 14px; padding: 10px 12px; border-radius: 9px; background: #f1f5ff; color: #3d5dcc; font-size: 11px; }
.app-editor-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.app-editor-grid label { display: grid; gap: 6px; color: #647189; font-size: 10px; font-weight: 700; }
.app-editor-grid label.wide { grid-column: span 2; }
.app-editor-grid label.runtime-identifier-field { grid-column: span 2; }
.app-editor-grid input,.app-editor-grid select,.account-editor-row input,.account-editor-row select { min-width: 0; height: 39px; padding: 0 11px; border: 1px solid #dfe4ed; border-radius: 9px; outline: none; color: #273550; background: #fff; }
.app-editor-grid input:focus,.account-editor-row input:focus { border-color: #5a75e8; box-shadow: 0 0 0 3px rgba(90,117,232,.09); }
.runtime-configured-summary { grid-column: 1/-1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid #e5e9f1; border-radius: 10px; background: #f8f9fc; }
.runtime-configured-summary>span { flex: 0 0 auto; color: #69758a; font-size: 10px; font-weight: 800; }
.runtime-configured-summary>div { display: flex; flex-wrap: wrap; gap: 6px; }
.runtime-configured-summary button { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; padding: 0 8px; border: 1px solid #dfe4ed; border-radius: 7px; background: #fff; color: #8690a1; font-size: 9px; cursor: pointer; }
.runtime-configured-summary button.active { border-color: #5d78e7; background: #eef2ff; color: #3e5ed2; }
.runtime-configured-summary button i { width: 6px; height: 6px; border-radius: 50%; background: #c4cbd7; }
.runtime-configured-summary button i.configured { background: #52bd7b; box-shadow: 0 0 0 3px rgba(82,189,123,.12); }
.app-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.app-editor-actions button,.account-editor-row button { min-height: 36px; padding: 0 15px; border: 1px solid #dae0eb; border-radius: 9px; background: #fff; color: #536178; cursor: pointer; }
.app-editor-actions button.primary,.account-editor-row button { border-color: #4567e6; background: #4567e6; color: #fff; }
.application-catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.application-catalog-item,.device-app-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px; border: 1px solid #e6eaf2; border-radius: 13px; background: #fbfcff; }
.application-catalog-item>button { margin-left: auto; border: 0; background: transparent; color: #4665d7; cursor: pointer; }
.application-icon { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg,#315de5,#7991f4); color: #fff; font-size: 17px; font-weight: 900; }
.application-icon.small { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.application-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.application-main,.device-app-main { display: grid; min-width: 0; gap: 4px; }
.application-main>div { display: flex; align-items: center; gap: 7px; }
.application-main strong,.device-app-main strong { color: #1d2942; font-size: 12px; }
.application-main span { padding: 2px 5px; border-radius: 5px; background: #eef2ff; color: #6477c9; font-size: 8px; }
.application-main code,.device-app-main code { overflow: hidden; color: #607089; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.application-main small { color: #9aa4b4; font-size: 9px; }
.application-main small b { display: inline-block; min-width: 47px; margin-right: 6px; color: #64728a; font-size: 8px; }
.application-platform-tabs { display: flex; gap: 7px; margin: -2px 0 14px; padding-bottom: 2px; overflow-x: auto; }
.application-platform-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid #e0e5ef; border-radius: 9px; background: #fff; color: #778399; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.application-platform-tabs button span { display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: 6px; background: #f0f2f7; color: #8791a3; font-size: 8px; }
.application-platform-tabs button.active { border-color: #5d78ea; background: #eef2ff; color: #3659d2; box-shadow: 0 5px 14px rgba(54,89,210,.09); }
.application-platform-tabs button.active span { background: #4968de; color: #fff; }
.application-runtime-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.application-main .application-runtime-badges span { padding: 2px 6px; border-radius: 5px; font-size: 8px; font-weight: 800; }
.application-main .application-runtime-badges .runtime-android { background: #e9f7ee; color: #32855a; }
.application-main .application-runtime-badges .runtime-ios { background: #edf1f7; color: #4f5d73; }
.application-main .application-runtime-badges .runtime-harmony { background: #fff0f0; color: #d25555; }
.application-main .application-runtime-badges .runtime-browser { background: #f1edff; color: #7657d1; }
.application-platform-empty { padding: 34px 16px; border: 1px dashed #dce2ed; border-radius: 12px; background: #fafbfe; color: #909bad; font-size: 11px; text-align: center; }
.device-app-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.device-app-item.bound { border-color: #cbd6ff; background: #f8f9ff; }
.device-app-main { flex: 1; }
.device-app-main>div { display: flex; flex-wrap: wrap; gap: 4px; }
.state-chip { padding: 3px 6px; border-radius: 6px; background: #eef0f4; color: #9099a8; font-size: 8px; }
.state-chip.ok { background: #e9f8ef; color: #3d9b65; }
.state-chip.blue { background: #e9efff; color: #4263d9; }
.state-chip.purple { background: #f0ecff; color: #7459d8; }
.device-app-actions { display: grid; flex: 0 0 66px; gap: 5px; }
.device-app-actions button { min-height: 27px; border: 1px solid #dce2ed; border-radius: 7px; background: #fff; color: #657188; font-size: 9px; cursor: pointer; }
.device-app-actions button.on { border-color: #735ee1; color: #684fd8; background: #f2efff; }
.device-app-actions button:disabled { opacity: .45; cursor: not-allowed; }
.account-editor-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.2fr auto; gap: 9px; }
.account-instance-list { display: grid; gap: 8px; margin-top: 16px; }
.account-instance-list article { display: grid; grid-template-columns: 38px minmax(150px,1fr) 2fr auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid #e7eaf1; border-radius: 12px; }
.account-instance-list article>div:nth-child(2) { display: grid; gap: 3px; }
.account-instance-list strong { color: #24304a; font-size: 11px; }
.account-instance-list span { color: #8994a6; font-size: 9px; }
.account-instance-devices { display: flex; flex-wrap: wrap; gap: 5px; }
.account-instance-devices span { padding: 4px 7px; border-radius: 6px; background: #f0f3f9; }
.account-instance-list em { color: #45a36f; font-size: 9px; font-style: normal; }
.device-app-summary { display: flex; gap: 10px; margin-bottom: 12px; }
.device-app-summary span { padding: 8px 11px; border-radius: 9px; background: #f3f6fc; color: #7e899c; font-size: 10px; }
.device-app-summary strong { margin-right: 4px; color: #284fd0; font-size: 14px; }
.device-account-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #edf0f5; }
.device-account-strip strong { margin-right: 5px; color: #33415e; font-size: 10px; }
.device-account-strip span { padding: 5px 8px; border-radius: 7px; background: #f1f4fa; color: #657188; font-size: 9px; }
.device-account-strip em { color: #9aa4b4; font-size: 9px; font-style: normal; }
.ai-application-filter { display: flex; gap: 5px; padding: 0 12px 10px; overflow-x: auto; }
.ai-application-filter button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid #e3e7ef; border-radius: 8px; background: #fff; color: #78849a; font-size: 9px; white-space: nowrap; cursor: pointer; }
.ai-application-filter button.active { border-color: #5571e8; background: #eef2ff; color: #3d5ed6; }
.ai-application-filter button span { font-weight: 900; }
.ai-application-filter button em { padding: 1px 4px; border-radius: 5px; background: rgba(77,102,218,.1); font-size: 8px; font-style: normal; }
.ai-application-filter .application-icon.small { width: 20px; height: 20px; flex-basis: 20px; border-radius: 6px; }
.ai-action-empty { grid-column: 1/-1; padding: 14px 6px; color: #9aa4b4; font-size: 9px; text-align: center; }
.ai-action-account-note { margin-top: 8px; padding: 8px; border-radius: 8px; background: #f5f7fb; color: #8d97a8; font-size: 9px; line-height: 1.5; }
.ai-action-account-context { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid #dfe6f5; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(35,56,112,.05); }
.ai-action-account-context .application-icon.small { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
.ai-action-account-context>div { display: grid; min-width: 0; gap: 3px; }
.ai-action-account-context strong { overflow: hidden; color: #26334d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-action-account-context span { overflow: hidden; color: #919bad; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ai-action-account-context em { color: #a0a9b8; font-size: 8px; font-style: normal; }
.ai-action-account-context em.online { color: #4caf73; }
.ai-bind-item em.offline { color: #a0a9b8; }

.device-list-notice {
  padding: 9px 12px;
  border-radius: 9px;
  background: #eff8f2;
  color: #34875a;
  font-size: 11px;
}

.device-list-wrap {
  overflow-x: auto;
  border: 1px solid #e7eaf1;
  border-radius: 14px;
  background: #fff;
}

.device-list-table { min-width: 1030px; }
.device-list-row {
  display: grid;
  grid-template-columns: 28px 68px minmax(140px,1.25fr) minmax(145px,1.15fr) minmax(120px,.9fr) minmax(115px,.9fr) minmax(135px,1fr) 120px 76px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 8px 14px;
  border-top: 1px solid #edf0f5;
  transition: background .16s ease;
}

.device-list-row:not(.device-list-head):hover { background: #f9fbff; }
.device-list-row.selected { background: #f5f7ff; }
.device-list-head {
  min-height: 42px;
  border-top: 0;
  background: #f7f8fb;
  color: #8b95a7;
  font-size: 10px;
  font-weight: 700;
}

.device-row-check {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid #d6dce8;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.device-row-check.active { border-color: #4c68ea; background: #4c68ea; box-shadow: inset 0 0 0 4px #4c68ea; }
.device-row-check.active::after { content: "✓"; display: block; color: #fff; font-size: 11px; line-height: 15px; }
.device-list-status { display: inline-flex; align-items: center; gap: 6px; color: #919bad; font-size: 11px; }
.device-list-status i { width: 7px; height: 7px; border-radius: 50%; background: #b4bcc9; }
.device-list-status.online { color: #3a9b68; }
.device-list-status.online i { background: #55c989; box-shadow: 0 0 0 4px rgba(85,201,137,.12); }
.device-list-name,.device-list-stack { min-width: 0; display: grid; gap: 4px; }
.device-list-name strong,.device-list-stack strong { overflow: hidden; color: #17213a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.device-list-name small,.device-list-stack small { overflow: hidden; color: #98a2b4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.device-list-code { overflow: hidden; color: #526079; font-size: 10px; text-overflow: ellipsis; }
.device-capability-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 42px; overflow: hidden; }
.device-capability-list span { max-width: 76px; padding: 3px 6px; overflow: hidden; border-radius: 5px; background: #eef2ff; color: #536aca; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.device-capability-list small { color: #a0a8b6; font-size: 10px; }
.device-list-time { color: #69758a; font-size: 10px; }
.device-remark-btn { min-height: 29px; border: 1px solid #dce2ed; border-radius: 8px; background: #fff; color: #526078; font-size: 10px; cursor: pointer; }
.device-remark-btn:hover { border-color: #7d92e9; color: #3659d4; background: #f5f7ff; }
.device-list-empty { padding: 48px; color: #9aa3b3; text-align: center; font-size: 12px; }
.device-preview-note { padding: 10px 12px; border: 1px solid #e0e6f5; border-radius: 10px; background: #f7f9ff; color: #7d879b; font-size: 11px; }
.device-preview-note span { margin-right: 8px; color: #375bd4; font-weight: 800; }

.device-remark-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18,27,49,.42);
  backdrop-filter: blur(3px);
}

.device-remark-modal { width: min(450px,94vw); padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(16,28,54,.25); }
.device-remark-head { display: flex; align-items: flex-start; justify-content: space-between; }
.device-remark-head small { color: #6b80d8; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.device-remark-head h3 { margin: 4px 0 0; color: #17213a; font-size: 19px; }
.device-remark-head>button { width: 31px; height: 31px; border: 0; border-radius: 9px; background: #f2f4f8; color: #798398; font-size: 20px; cursor: pointer; }
.device-remark-device { display: flex; justify-content: space-between; gap: 14px; margin: 20px 0 16px; padding: 12px; border-radius: 10px; background: #f7f8fc; }
.device-remark-device strong { color: #35415a; font-size: 12px; }
.device-remark-device code { color: #8a94a6; font-size: 10px; }
.device-remark-modal label { display: grid; gap: 7px; }
.device-remark-modal label span { color: #526078; font-size: 11px; font-weight: 700; }
.device-remark-modal input { height: 42px; padding: 0 12px; border: 1px solid #dce2ed; border-radius: 10px; outline: none; color: #26334d; }
.device-remark-modal input:focus { border-color: #5875eb; box-shadow: 0 0 0 3px rgba(88,117,235,.1); }
.device-remark-modal p { margin: 8px 0 20px; color: #9aa3b3; font-size: 10px; }
.device-remark-actions { display: flex; justify-content: flex-end; gap: 8px; }
.device-remark-actions button { min-height: 36px; padding: 0 16px; border: 1px solid #dce2ed; border-radius: 9px; background: #fff; color: #617087; cursor: pointer; }
.device-remark-actions button.primary { border-color: #4164e5; background: #4164e5; color: #fff; }
.device-remark-actions button:disabled { opacity: .6; cursor: wait; }

@media (max-width: 1200px) {
  .device-ops-toolbar { flex-direction: column; }
  .device-ops-tools { width: 100%; }
  .device-ops-search { flex: 1; }
  .device-ops-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 1400px) {
  .device-list-table { min-width: 900px; }
  .device-list-row { grid-template-columns: 28px 64px minmax(135px,1.2fr) minmax(140px,1.1fr) minmax(115px,.9fr) minmax(110px,.85fr) 120px 76px; }
  .device-list-row > :nth-child(7) { display: none; }
}

@media (max-width: 800px) {
  .device-view-tabs { display: grid; width: 100%; grid-template-columns: repeat(3,1fr); }
  .device-view-tabs button { min-width: 0; }
  .device-ops-stats { grid-template-columns: 1fr 1fr; }
  .device-ops-filters { align-items: flex-start; flex-direction: column; }
  .device-ops-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-editor-grid,.application-catalog-grid,.device-app-grid { grid-template-columns: 1fr; }
  .app-editor-grid label.wide { grid-column: auto; }
  .app-editor-grid label.runtime-identifier-field { grid-column: auto; }
  .runtime-configured-summary { align-items: flex-start; flex-direction: column; }
  .account-editor-row { grid-template-columns: 1fr; }
  .account-instance-list article { grid-template-columns: 38px 1fr; }
  .account-instance-devices,.account-instance-list em { grid-column: 2; }
}

.automation-assets-page { display: grid; gap: 16px; }
.automation-assets-page .hero { margin-bottom: 0; }
.asset-tabs { display: inline-flex; width: fit-content; padding: 5px; gap: 5px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.82); }
.asset-tabs button { border: 0; border-radius: 10px; padding: 10px 18px; color: #7a849b; background: transparent; font-weight: 800; cursor: pointer; }
.asset-tabs button.active { color: #315fe8; background: #fff; box-shadow: 0 8px 24px rgba(31,48,92,.08); }
.asset-notice { padding: 12px 16px; border-radius: 12px; font-weight: 700; }
.asset-notice.success { color: #137448; background: #edf9f3; border: 1px solid #c9ecd9; }
.asset-notice.error { color: #b43a48; background: #fff1f2; border: 1px solid #ffd7dc; }
.asset-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.asset-summary-grid article { display: grid; gap: 7px; min-height: 112px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.94); }
.asset-summary-grid span,.asset-summary-grid small { color: #8b95aa; }
.asset-summary-grid strong { color: #17213b; font-size: 27px; }
.asset-list-card { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.96); overflow: hidden; }
.asset-list-card > header { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.asset-list-card header small { color: #6f8ce7; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.asset-list-card header h2 { margin: 5px 0 0; color: #17213b; font-size: 21px; }
.asset-list-card header > span { color: #8b95aa; font-size: 13px; }
.asset-table { min-width: 1080px; }
.asset-list-card { overflow-x: auto; }
.asset-table-row { display: grid; grid-template-columns: 1.3fr 1fr .62fr 1fr .72fr .65fr 1.2fr; gap: 14px; align-items: center; min-height: 72px; padding: 10px 20px; border-bottom: 1px solid #edf0f6; color: #35405b; font-size: 13px; }
.asset-table-row.head { min-height: 42px; color: #7f899f; background: #f8f9fc; font-weight: 800; }
.asset-table-row > span { min-width: 0; }
.asset-table-row strong,.asset-table-row b { display: block; color: #1e2943; }
.asset-table-row small { display: block; margin-top: 5px; overflow: hidden; color: #8a95aa; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.asset-digest { overflow: hidden; color: #78849c; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
.asset-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-style: normal; font-weight: 800; }
.asset-status.draft { color: #69758c; background: #f0f2f6; }
.asset-status.testing { color: #a46b0b; background: #fff5db; }
.asset-status.published { color: #168454; background: #e8f8f0; }
.asset-status.disabled { color: #b24a58; background: #fff0f2; }
.asset-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-actions button { padding: 7px 9px; border: 1px solid #dce2ef; border-radius: 8px; color: #53617b; background: #fff; cursor: pointer; }
.asset-actions button.primary { color: #315fe8; border-color: #bfd0ff; background: #f2f6ff; }
.asset-actions button.danger { color: #c04b59; }
.asset-empty { padding: 54px 20px; color: #8d97aa; text-align: center; }
.asset-modal-mask { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(20,28,52,.48); backdrop-filter: blur(5px); }
.asset-modal { width: min(980px,95vw); max-height: 92vh; padding: 24px; overflow-y: auto; border-radius: 22px; background: #fff; box-shadow: 0 32px 90px rgba(17,28,58,.28); }
.asset-modal > header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.asset-modal header small { color: #63c8ee; font-weight: 900; letter-spacing: .12em; }
.asset-modal header h2 { margin: 5px 0 0; color: #19243e; }
.asset-modal header button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: #f3f5f9; font-size: 22px; cursor: pointer; }
.asset-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.asset-form-grid label,.asset-wide { display: grid; gap: 7px; color: #68748d; font-size: 12px; font-weight: 800; }
.asset-form-grid input,.asset-form-grid select,.asset-wide textarea { width: 100%; border: 1px solid #dce2ee; border-radius: 10px; padding: 11px 12px; color: #28334d; background: #fff; font: inherit; outline: none; }
.asset-form-grid input:focus,.asset-form-grid select:focus,.asset-wide textarea:focus { border-color: #6f91f4; box-shadow: 0 0 0 3px rgba(71,107,222,.09); }
.asset-wide { margin-top: 14px; }
.asset-wide textarea { min-height: 76px; resize: vertical; }
.asset-wide textarea.code { min-height: 110px; color: #d7e3ff; background: #151e35; font: 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.asset-wide textarea.tall { min-height: 180px; }
.asset-wide textarea.source { min-height: 300px; }
.asset-check { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: #56627a; }
.asset-modal > footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.asset-modal > footer button { padding: 10px 18px; border: 1px solid #dce2ee; border-radius: 10px; background: #fff; cursor: pointer; }
.asset-modal > footer button.primary { color: #fff; border-color: #3f67e8; background: #3f67e8; }

.private-page {
  display: grid;
  gap: 8px;
}

.private-board {
  border-radius: 18px;
  border: 1px solid rgba(136, 152, 185, 0.12);
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
}

.private-board-auto {
  overflow: visible;
  background: transparent;
  border: 0;
}

.private-toolbar,
.private-toolbar-left,
.private-toolbar-right,
.private-chat-empty-head,
.private-chat-title-wrap,
.private-message-row,
.private-customer-line {
  display: flex;
  align-items: center;
}

.private-toolbar {
  min-height: 42px;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.12);
}

.private-toolbar-left,
.private-toolbar-right,
.private-chat-title-wrap,
.private-message-row {
  gap: 8px;
}

.private-toolbar-label,
.private-toolbar-chip,
.private-toolbar-link,
.private-toolbar-toggle {
  font-size: 11px;
}

.private-toolbar-label,
.private-toolbar-link {
  color: #8d97ab;
}

.private-toolbar-chip,
.private-toolbar-toggle,
.private-customer-tab,
.private-chat-back,
.private-auto-btn,
.private-auto-switch {
  height: 28px;
  padding: 0 12px;
  border-radius: 10px;
}

.private-toolbar-chip {
  color: #fff;
  background: linear-gradient(135deg, #4d7eff 0%, #5c68ff 100%);
}

.private-toolbar-link {
  background: transparent;
  padding: 0;
}

.private-toolbar-toggle,
.private-customer-tab,
.private-chat-back {
  color: #71809c;
  background: rgba(245, 247, 251, 0.98);
}

.private-toolbar-toggle.active {
  color: #1e2740;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(140, 153, 181, 0.16);
}

.private-layout {
  display: grid;
  grid-template-columns: 204px 246px 1fr;
  min-height: 548px;
}

.private-company-panel,
.private-customer-panel,
.private-chat-panel {
  min-width: 0;
}

.private-company-panel,
.private-customer-panel {
  border-right: 1px solid rgba(136, 152, 185, 0.12);
}

.private-company-panel {
  padding: 8px 8px;
  background: rgba(251, 252, 255, 0.98);
}

.private-company-card {
  position: relative;
  width: 100%;
  min-height: 88px;
  padding: 9px 10px 9px 8px;
  margin-bottom: 6px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: #fff;
  display: grid;
  grid-template-columns: 14px 44px 1fr;
  gap: 9px;
  text-align: left;
}

.private-company-card.active {
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
  border-color: rgba(165, 185, 230, 0.34);
}

.private-company-delete {
  align-self: start;
  color: #d0d6e2;
  font-size: 10px;
  line-height: 1;
  margin-top: 4px;
}

.private-company-badge,
.private-customer-avatar,
.private-chat-avatar-placeholder,
.private-message-side {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.private-company-badge.pink {
  background: linear-gradient(135deg, #e455c1 0%, #ff6f7d 100%);
}

.private-company-badge.blue {
  background: linear-gradient(135deg, #3f7dff 0%, #2957d8 100%);
}

.private-company-badge.orange {
  background: linear-gradient(135deg, #ff9b3d 0%, #ff6b24 100%);
}

.private-company-main {
  display: grid;
  gap: 4px;
  padding-right: 10px;
}

.private-company-main strong {
  font-size: 10.5px;
  line-height: 1.4;
  color: #1d2640;
}

.private-company-main span,
.private-chat-company,
.private-chat-empty-sub {
  font-size: 9.5px;
  line-height: 1.4;
  color: #97a2b8;
}

.private-unread-dot,
.private-customer-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff4d6d;
}

.private-unread-dot {
  right: 10px;
  top: 16px;
}

.private-customer-panel {
  padding: 8px 8px 0;
  background: rgba(249, 251, 255, 0.96);
}

.private-customer-head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 6px;
}

.private-customer-tab.active {
  color: #5878c7;
  background: rgba(232, 240, 255, 0.98);
}

.private-search-wrap {
  margin-bottom: 6px;
}

.private-search-input {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(191, 201, 217, 0.4);
  background: #fff;
  color: #2d3850;
  font-size: 11px;
}

.private-customer-list {
  display: grid;
}

.private-customer-card {
  position: relative;
  width: 100%;
  padding: 8px 9px;
  border-radius: 12px;
  background: transparent;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  text-align: left;
}

.private-customer-card.active {
  background: rgba(241, 246, 255, 0.98);
}

.private-customer-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.private-customer-avatar.ash {
  color: #707c93;
  background: rgba(233, 238, 247, 0.98);
}

.private-customer-avatar.violet {
  background: linear-gradient(135deg, #9792ff 0%, #706af5 100%);
}

.private-customer-avatar.gray {
  color: #707c93;
  background: rgba(232, 234, 241, 0.98);
}

.private-customer-avatar.sand {
  background: linear-gradient(135deg, #d5c09a 0%, #b79f78 100%);
}

.private-customer-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.private-customer-line {
  justify-content: space-between;
  gap: 8px;
}

.private-customer-line strong {
  font-size: 10.5px;
  color: #202941;
}

.private-customer-line span,
.private-customer-sub,
.private-customer-preview {
  font-size: 9.5px;
  color: #96a2b7;
}

.private-customer-sub,
.private-customer-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.private-customer-preview {
  color: #7d8aa4;
}

.private-customer-dot {
  right: 8px;
  top: 12px;
}

.private-chat-panel {
  background: rgba(253, 253, 255, 0.98);
  display: grid;
  grid-template-rows: auto 1fr;
}

.private-chat-empty {
  min-height: 100%;
  padding: 20px 20px;
  display: grid;
  align-content: start;
}

.private-chat-empty-head {
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.12);
}

.private-chat-avatar-placeholder {
  width: 28px;
  height: 28px;
  color: #6f7a91;
  background: rgba(236, 239, 246, 0.98);
  font-size: 12px;
}

.private-chat-empty-title,
.private-chat-header strong {
  font-size: 14px;
  color: #1c2540;
  font-weight: 800;
}

.private-chat-empty-tip {
  min-height: 350px;
  display: grid;
  place-items: center;
  color: #b1b9c8;
  font-size: 12px;
}

.private-chat-header {
  min-height: 62px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(136, 152, 185, 0.12);
}

.private-chat-body {
  padding: 12px 24px 12px 18px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.private-message-row {
  align-items: flex-start;
}

.private-message-side {
  width: 24px;
  height: 24px;
  color: #6f7a91;
  background: rgba(236, 239, 246, 0.98);
  font-size: 10px;
}

.private-message-content {
  display: grid;
  gap: 5px;
}

.private-message-time {
  width: fit-content;
  padding: 0 8px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #9aa4b8;
  background: rgba(245, 247, 251, 0.98);
  font-size: 10px;
}

.private-message-bubble {
  max-width: 500px;
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(246, 248, 252, 0.98);
  color: #415069;
  font-size: 11.5px;
  line-height: 1.55;
}

.private-auto-panel {
  padding: 18px 18px 20px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.private-auto-header,
.private-auto-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.private-auto-title {
  font-size: 16px;
  font-weight: 800;
  color: #1b2440;
}

.private-auto-sub,
.private-auto-card span,
.private-auto-card small,
.private-auto-rule-text {
  font-size: 11px;
  color: #95a1b8;
}

.private-auto-status {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
}

.private-auto-status.active {
  color: #4f6dff;
  background: rgba(233, 240, 255, 0.98);
}

.private-auto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.private-auto-card,
.private-auto-rule {
  border-radius: 14px;
  border: 1px solid rgba(136, 152, 185, 0.12);
  background: rgba(255, 255, 255, 0.98);
}

.private-auto-card {
  min-height: 96px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.private-auto-card strong,
.private-auto-rule-title {
  font-size: 14px;
  color: #1f2942;
  font-weight: 800;
}

.private-auto-rule-list {
  display: grid;
  gap: 10px;
}

.private-auto-rule {
  min-height: 72px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.private-auto-switch {
  min-width: 44px;
  color: #8794ab;
  background: rgba(245, 247, 251, 0.98);
  font-size: 11px;
}

.private-auto-switch.active {
  color: #fff;
  background: linear-gradient(135deg, #4a73ff 0%, #626bff 100%);
}

.private-auto-btn {
  min-width: 124px;
  font-size: 11px;
}

.private-auto-btn.ghost {
  color: #7e8ca3;
  background: rgba(245, 247, 251, 0.98);
}

.private-auto-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #4d7eff 0%, #6b68ff 100%);
}

.private-auto-page {
  display: grid;
  gap: 12px;
}

.private-auto-page-head,
.private-auto-page-tabs,
.private-auto-page-filters {
  display: flex;
  align-items: center;
}

.private-auto-page-head {
  justify-content: space-between;
  gap: 12px;
}

.private-auto-page-title {
  font-size: 18px;
  font-weight: 800;
  color: #1c2338;
}

.private-auto-page-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #9aa4b8;
}

.private-auto-page-tabs {
  gap: 8px;
}

.private-auto-page-tab {
  height: 34px;
  padding: 0 14px;
  border-radius: 14px;
  color: #677691;
  background: rgba(247, 248, 252, 0.98);
  border: 1px solid rgba(214, 220, 232, 0.72);
  font-size: 12px;
}

.private-auto-page-tab.active {
  color: #2a3247;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(137, 149, 176, 0.18);
}

.private-auto-page-alert {
  min-height: 28px;
  padding: 0 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  color: #bd9240;
  background: rgba(255, 247, 214, 0.58);
  border: 1px solid rgba(240, 226, 178, 0.72);
  font-size: 11px;
}

.private-auto-page-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.private-auto-page-stat {
  min-height: 92px;
  border-radius: 18px;
  border: 1px solid rgba(221, 226, 236, 0.9);
  background: rgba(255, 255, 255, 0.98);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
}

.private-auto-page-stat span {
  font-size: 11px;
  color: #a0a8b8;
}

.private-auto-page-stat strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  color: #151d2d;
}

.private-auto-page-filters {
  gap: 10px;
  flex-wrap: wrap;
}

.private-auto-filter-group {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.private-auto-filter-group.short {
  grid-template-columns: auto auto;
}

.private-auto-filter-group label {
  font-size: 11px;
  color: #7f8aa0;
}

.private-auto-filter-input,
.private-auto-filter-select {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(199, 207, 219, 0.55);
  background: #fff;
  color: #5a6781;
  font-size: 11px;
}

.private-auto-filter-input {
  width: 180px;
  padding: 0 12px;
}

.private-auto-filter-select {
  min-width: 74px;
  padding: 0 30px 0 12px;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.private-auto-filter-select::after {
  content: "⌄";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #aab3c4;
}

.private-auto-filter-btn,
.private-auto-refresh {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 11px;
}

.private-auto-filter-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #4b86ff 0%, #536cff 100%);
}

.private-auto-filter-btn.success {
  color: #fff;
  background: linear-gradient(135deg, #36c87b 0%, #2db97e 100%);
}

.private-auto-refresh {
  margin-left: auto;
  color: #8f99ae;
  background: transparent;
}

.private-auto-page-table {
  border-radius: 16px;
  border: 1px solid rgba(226, 231, 239, 0.96);
  background: rgba(255, 255, 255, 0.98);
  overflow: hidden;
  min-height: 250px;
}

.private-auto-table-head {
  min-height: 42px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 44px 56px 90px 96px 72px 92px 68px 72px 72px 76px 52px;
  align-items: center;
  gap: 10px;
  color: #8b95ab;
  background: rgba(249, 250, 252, 0.98);
  font-size: 11px;
}

.private-auto-table-empty {
  min-height: 330px;
  background: rgba(255, 255, 255, 0.98);
}

.touch-list-header,
.touch-table-head,
.touch-table-row {
  display: grid;
  grid-template-columns: 1fr 260px 160px;
  gap: 14px;
  align-items: center;
}

.touch-list-header {
  margin-bottom: 18px;
}

.touch-table {
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #fff;
}

.touch-table-head {
  padding: 12px 14px;
  color: #8a95ab;
  background: rgba(245, 248, 253, 0.9);
  font-size: 12px;
}

.touch-table-row {
  padding: 14px;
  border-top: 1px solid rgba(136, 152, 185, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

.modal-section-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  color: #1a2338;
  margin-top: 2px;
}

.modal-tip-strip {
  background: linear-gradient(180deg, #edf4ff 0%, #eff6ff 100%);
  color: #95a1b8;
}

.touch-input-highlight {
  box-shadow: inset 0 0 0 1px rgba(92, 110, 255, 0.06);
}

.touch-upload-box {
  min-height: 96px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(246, 249, 255, 0.96)),
    repeating-linear-gradient(
      45deg,
      rgba(210, 219, 238, 0.08) 0,
      rgba(210, 219, 238, 0.08) 8px,
      transparent 8px,
      transparent 16px
    );
}

.upload-box.compact {
  padding: 18px 14px;
}

.touch-modal-form {
  gap: 8px;
}

.touch-modal-form .field {
  gap: 5px;
}

.touch-modal-form .field-label {
  font-size: 11px;
  color: #4d5a74;
}

.touch-modal-form .field-control {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 12px;
}

.touch-modal-form .dual {
  gap: 10px;
}

.subview-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.subview-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(244, 247, 252, 0.95);
  color: #5b6781;
  border: 1px solid rgba(136, 152, 185, 0.14);
  font-size: 12px;
  font-weight: 600;
}

.subview-pill.active {
  color: #fff;
  background: linear-gradient(135deg, #5267ff 0%, #7a59ff 100%);
  box-shadow: 0 10px 22px rgba(86, 95, 255, 0.18);
}

.page-title-tight {
  font-size: 18px;
}

.section-top-gap {
  margin-top: 12px;
}

.chat-window-compact {
  min-height: 340px;
}

.floating-helper {
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: grid;
  gap: 10px;
}

.helper-chip {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #4785ff 0%, #6454ff 100%);
  box-shadow: 0 18px 30px rgba(84, 97, 255, 0.3);
}

.footer-note {
  color: #8b95aa;
  font-size: 12px;
  text-align: center;
  padding: 8px 0 14px;
}

.ai-config-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid #dce5ff;
  border-radius: 16px;
  color: #536078;
  background: linear-gradient(110deg, #f5f8ff, #fbfaff);
}

.ai-config-notice strong { color: #1e2a45; white-space: nowrap; }
.ai-config-feedback { padding: 12px 16px; border-radius: 12px; background: #eef3ff; color: #3653b8; }
.ai-config-feedback.success { background: #eaf8ef; color: #22814b; }
.ai-config-feedback.error { background: #fff0f2; color: #bd4051; }

.ai-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ai-provider-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid #e1e6f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(45, 58, 94, .06);
}

.ai-provider-card.enabled { border-color: #b9c8ff; box-shadow: 0 14px 34px rgba(64, 92, 205, .1); }
.ai-provider-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ai-provider-card header small { color: #8893aa; font-size: 10px; letter-spacing: .11em; }
.ai-provider-card h2 { margin: 5px 0 0; color: #1a2540; font-size: 19px; }
.ai-provider-card > label { display: grid; gap: 7px; color: #6c768b; font-size: 12px; }
.ai-provider-card > label > input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #dfe4ee;
  border-radius: 10px;
  outline: none;
  color: #27334e;
  background: #fbfcff;
}
.ai-provider-card > label > input:focus { border-color: #758ce7; box-shadow: 0 0 0 3px rgba(90, 116, 225, .1); }
.provider-status { padding: 5px 9px; border-radius: 999px; color: #69748a; background: #f0f2f6; font-size: 11px; white-space: nowrap; }
.provider-status.ready { color: #187443; background: #e8f8ef; }
.provider-status.error { color: #b83749; background: #ffedf0; }
.provider-status.unconfigured { color: #8a6418; background: #fff5d9; }
.provider-switch-row { display: flex; justify-content: space-between; align-items: center; color: #7b859a; font-size: 12px; }
.provider-switch-row label { display: flex; align-items: center; gap: 7px; color: #34415d; }
.provider-meta { min-height: 32px; padding: 10px 12px; border-radius: 10px; color: #778197; background: #f7f8fb; font-size: 12px; line-height: 1.45; }
.ai-provider-card footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.reply-config-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid #dce5ff;
  border-radius: 16px;
  color: #5d6980;
  background: linear-gradient(110deg, #f5f8ff, #fbfaff);
}
.reply-config-notice strong { color: #1e2a45; white-space: nowrap; }
.reply-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.reply-metric-grid > div { display: grid; gap: 5px; padding: 17px 19px; border: 1px solid #e2e7f3; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(48, 65, 110, .04); }
.reply-metric-grid small { color: #8290a8; font-size: 12px; }
.reply-metric-grid strong { color: #182544; font-size: 25px; line-height: 1.1; }
.reply-metric-grid span { color: #8994a7; font-size: 11px; }
.reply-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.reply-tabs button { padding: 10px 16px; border: 1px solid #e0e5f0; border-radius: 10px; color: #65718a; background: #fff; cursor: pointer; }
.reply-tabs button.active { border-color: #5976ed; color: #fff; background: linear-gradient(135deg, #5278ed, #7259e9); box-shadow: 0 8px 16px rgba(82, 104, 225, .2); }
.reply-config-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.7fr); gap: 18px; align-items: start; }
.reply-list-card, .reply-editor-card { border: 1px solid #e0e6f1; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(45, 58, 94, .06); }
.reply-list-card { overflow: hidden; }
.reply-list-card > header, .reply-editor-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid #edf0f5; }
.reply-list-card header small, .reply-editor-card header small { color: #8c98ae; font-size: 10px; letter-spacing: .11em; }
.reply-list-card h2, .reply-editor-card h2 { margin: 5px 0 0; color: #1b2743; font-size: 18px; }
.reply-list-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; width: 100%; gap: 10px; padding: 14px 16px; border: 0; border-bottom: 1px solid #f0f2f6; text-align: left; color: inherit; background: #fff; cursor: pointer; }
.reply-list-row:hover, .reply-list-row.selected { background: #f5f7ff; }
.reply-list-row.selected { box-shadow: inset 3px 0 #5c75ec; }
.reply-row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #526ce1; background: #edf1ff; font-weight: 700; font-size: 13px; }
.reply-list-row span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.reply-list-row strong { overflow: hidden; color: #2a3650; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.reply-list-row em { overflow: hidden; color: #8b95a7; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.reply-list-row i { padding: 4px 7px; border-radius: 999px; color: #8190a4; background: #f1f3f7; font-size: 10px; font-style: normal; }
.reply-list-row i.on { color: #16834b; background: #e6f8ec; }
.reply-empty, .reply-editor-empty { display: grid; gap: 8px; padding: 26px 20px; color: #8993a5; font-size: 13px; line-height: 1.6; }
.reply-editor-empty { min-height: 240px; align-content: center; text-align: center; }
.reply-editor-empty strong { color: #34415a; font-size: 16px; }
.reply-editor-card { display: grid; gap: 18px; padding-bottom: 18px; }
.reply-editor-card > :not(header):not(.reply-editor-empty):not(.reply-editor-footer) { margin-inline: 20px; }
.switch-inline { display: inline-flex; align-items: center; gap: 7px; color: #536078; font-size: 12px; white-space: nowrap; }
.reply-device-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 11px 12px; border-radius: 11px; color: #748099; background: #f6f8fc; font-size: 12px; }
.reply-device-picker button { border: 1px solid #dbe2f6; border-radius: 8px; padding: 6px 8px; color: #4865cf; background: #fff; cursor: pointer; }
.reply-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reply-form-grid label, .reply-wide-field, .reply-scene-objectives label { display: grid; gap: 6px; color: #6a768d; font-size: 12px; }
.reply-form-grid input, .reply-form-grid select, .reply-wide-field input, .reply-wide-field textarea, .reply-scene-objectives input { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #dde3ee; border-radius: 10px; outline: none; color: #27334e; background: #fbfcff; font: inherit; }
.reply-wide-field textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.reply-wide-field textarea.tall { min-height: 220px; }
.reply-form-grid input:focus, .reply-form-grid select:focus, .reply-wide-field input:focus, .reply-wide-field textarea:focus, .reply-scene-objectives input:focus { border-color: #758ce7; box-shadow: 0 0 0 3px rgba(90, 116, 225, .1); }
.reply-scene-block { display: grid; gap: 11px; padding: 15px; border: 1px solid #e6eaf3; border-radius: 13px; background: #fbfcff; color: #35415d; font-size: 13px; }
.scene-options { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.scene-options label, .reply-knowledge-selector label { display: inline-flex; align-items: center; gap: 6px; color: #55627a; font-size: 12px; }
.reply-scene-objectives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.reply-inline-inputs { display: flex; align-items: center; gap: 6px; }
.reply-inline-inputs input { min-width: 0; }
.reply-inline-inputs b { color: #9ba5b6; font-size: 11px; font-weight: 500; white-space: nowrap; }
.reply-knowledge-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 13px 15px; border-radius: 12px; color: #536078; background: #f7f8fc; }
.reply-knowledge-selector strong { color: #34415a; font-size: 13px; }
.reply-knowledge-selector small { margin-left: 3px; color: #9aa3b5; }
.reply-editor-footer { display: flex; justify-content: flex-end; gap: 9px; margin: 2px 20px 0; }
.danger-btn { margin-right: auto; padding: 9px 13px; border: 1px solid #ffd6dc; border-radius: 10px; color: #c84657; background: #fff5f6; cursor: pointer; }
.danger-btn:disabled { opacity: .55; cursor: default; }

.reply-workbench { display: grid; gap: 16px; }
.reply-workbench-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.reply-workbench-metrics > div { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid #e2e7f3; border-radius: 14px; background: #fff; }
.reply-workbench-metrics small { color: #8490a6; font-size: 11px; }
.reply-workbench-metrics strong { color: #1d2945; font-size: 22px; }
.reply-workbench-layout { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.5fr); gap: 16px; min-height: 560px; }
.reply-inbox-card, .reply-recommend-card { overflow: hidden; border: 1px solid #e0e6f1; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(45, 58, 94, .06); }
.reply-inbox-card > header, .reply-recommend-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 19px; border-bottom: 1px solid #edf0f5; }
.reply-inbox-card header small, .reply-recommend-card header small { color: #8c98ae; font-size: 10px; letter-spacing: .11em; }
.reply-inbox-card h2, .reply-recommend-card h2 { margin: 4px 0 0; color: #1c2844; font-size: 17px; }
.reply-recommend-card header span { display: block; margin-top: 4px; color: #8893a7; font-size: 11px; }
.reply-inbox-list { overflow-y: auto; max-height: 620px; }
.reply-inbox-list > button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid #f0f2f6; text-align: left; background: #fff; cursor: pointer; }
.reply-inbox-list > button:hover, .reply-inbox-list > button.selected { background: #f5f7ff; }
.reply-inbox-list > button.selected { box-shadow: inset 3px 0 #5c75ec; }
.reply-inbox-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #d8dde7; }
.reply-inbox-dot.on { background: #ff6175; box-shadow: 0 0 0 3px #ffe9ed; }
.reply-inbox-list button > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.reply-inbox-list strong { overflow: hidden; color: #293650; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.reply-inbox-list em { color: #8d97aa; font-size: 10px; font-style: normal; }
.reply-inbox-list p { overflow: hidden; margin: 2px 0 0; color: #69758b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reply-inbox-list i { padding: 4px 7px; border-radius: 999px; color: #b33d50; background: #ffedf0; font-size: 10px; font-style: normal; white-space: nowrap; }
.reply-recommend-card { display: flex; flex-direction: column; }
.reply-recommend-card > :not(header):not(.reply-editor-empty):not(footer) { margin-inline: 20px; }
.reply-context-preview { margin-top: 18px; padding: 13px 15px; border-radius: 13px; background: #f6f8fc; }
.reply-context-preview strong, .reply-knowledge-hits strong, .reply-risk-box strong { color: #35415a; font-size: 12px; }
.reply-context-preview p { margin: 7px 0 0; color: #48556e; font-size: 13px; line-height: 1.6; }
.reply-draft-meta { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: #8691a5; font-size: 11px; }
.reply-draft-meta i, .reply-draft-meta b { padding: 4px 7px; border-radius: 999px; font-style: normal; font-weight: 500; }
.reply-draft-meta i.risk-low { color: #19764a; background: #e8f8ef; }
.reply-draft-meta i.risk-medium { color: #95640f; background: #fff3d6; }
.reply-draft-meta i.risk-high { color: #b53648; background: #ffeaee; }
.reply-draft-meta b { margin-left: auto; color: #526be0; background: #eef1ff; }
.reply-draft-editor { display: grid; gap: 7px; margin-top: 12px; color: #5e6b82; font-size: 12px; }
.reply-draft-editor textarea { min-height: 120px; padding: 13px; border: 1px solid #dce3ef; border-radius: 12px; outline: none; resize: vertical; color: #26334c; background: #fbfcff; font: inherit; font-size: 14px; line-height: 1.7; }
.reply-draft-editor textarea:focus { border-color: #758ce7; box-shadow: 0 0 0 3px rgba(90,116,225,.1); }
.reply-draft-editor small { color: #9aa4b5; text-align: right; }
.reply-risk-box, .reply-knowledge-hits { display: grid; gap: 7px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 11px; line-height: 1.5; }
.reply-risk-box { color: #9d4653; background: #fff2f4; }
.reply-knowledge-hits { color: #66738a; background: #f5f7fb; }
.reply-safe-box { margin-top: 12px; padding: 11px 13px; border-radius: 11px; color: #1c754b; background: #ecf8f1; font-size: 12px; }
.reply-feedback-row { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #768197; font-size: 12px; }
.reply-feedback-row button { padding: 6px 9px; border: 1px solid #dfe4ee; border-radius: 8px; color: #526078; background: #fff; cursor: pointer; }
.reply-recommend-card > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: auto; padding: 16px 20px; border-top: 1px solid #edf0f5; }
.reply-learning-center { display: grid; gap: 16px; }
.learning-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; border: 1px solid #dce4fb; border-radius: 18px; background: linear-gradient(120deg, #f9fbff, #f1f3ff); }
.learning-banner small, .learning-section header small { color: #6680d8; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.learning-banner h2 { margin: 5px 0 7px; color: #1c2946; font-size: 23px; }
.learning-banner p { margin: 0; max-width: 780px; color: #69758d; line-height: 1.65; }
.learning-locked { flex: none; padding: 9px 14px; border: 1px solid #f0d79b; border-radius: 999px; color: #9b6a13; background: #fff8e6; font-size: 12px; font-weight: 700; }
.learning-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.learning-metrics > div { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #e2e7f3; border-radius: 14px; background: #fff; }
.learning-metrics small { color: #8490a6; font-size: 11px; }
.learning-metrics strong { color: #1d2945; font-size: 23px; }
.learning-metrics span { color: #98a2b5; font-size: 10px; }
.learning-section { padding: 20px; border: 1px solid #e1e6f1; border-radius: 18px; background: #fff; }
.learning-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.learning-section > header h3 { margin: 4px 0 0; color: #1d2945; font-size: 18px; }
.learning-section > header > span { color: #8894aa; font-size: 11px; }
.learning-dataset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.learning-dataset-grid article { display: grid; gap: 10px; padding: 16px; border: 1px solid #e5e9f2; border-radius: 14px; background: #fbfcff; }
.learning-dataset-grid article > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.learning-dataset-grid article i, .learning-dataset-grid article b { padding: 4px 8px; border-radius: 999px; font-size: 10px; font-style: normal; }
.learning-dataset-grid article i { color: #536fd0; background: #edf2ff; }
.learning-dataset-grid article b { color: #8b6a24; background: #fff6dd; }
.learning-dataset-grid h4 { margin: 0; color: #1e2a45; font-size: 15px; }
.learning-dataset-grid p { min-height: 40px; margin: 0; color: #748096; font-size: 12px; line-height: 1.55; }
.learning-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e9edf5; }
.learning-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5577ed, #755ae9); }
.learning-dataset-grid footer { display: flex; justify-content: space-between; color: #8b96aa; font-size: 10px; }
.learning-bottom-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; }
.learning-gates > div { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid #edf0f6; }
.learning-gates > div span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #3c9d6c; background: #eaf8f0; font-size: 11px; }
.learning-gates > div b { color: #34415d; font-size: 12px; }
.learning-gates > div em { color: #9aa4b5; font-size: 10px; font-style: normal; }
.learning-roadmap { display: grid; gap: 8px; }
.learning-roadmap > div { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #edf0f6; border-radius: 10px; }
.learning-roadmap > div > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #586ed0; background: #edf1ff; font-weight: 800; }
.learning-roadmap b { color: #273450; font-size: 12px; }
.learning-roadmap p { margin: 3px 0 0; color: #8a95a8; font-size: 10px; }
.learning-roadmap i { color: #8a95a8; font-size: 10px; font-style: normal; }
.learning-roadmap .current { border-color: #bfccf8; background: #f7f9ff; }
.learning-roadmap .current i { color: #4f6fe0; font-weight: 700; }
.learning-policy-note { display: flex; gap: 14px; padding: 14px 17px; border: 1px solid #f0dfb2; border-radius: 13px; color: #7a6841; background: #fffbef; font-size: 11px; line-height: 1.65; }
.learning-policy-note strong { flex: none; color: #6d541c; }

@media (max-width: 1280px) {
  .ai-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reply-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reply-workbench-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learning-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learning-dataset-grid { grid-template-columns: 1fr; }
  .metric-grid,
  .card-grid.cols-4,
  .timeline,
  .reference-grid,
  .summary-grid,
  .split-grid.three,
  .message-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-layout,
  .ai-detail-layout,
  .private-layout,
  .digital-human-layout,
  .touch-list-shell,
  .project-manager-grid,
  .publish-layout,
  .touch-list-header,
  .touch-table-head,
  .touch-table-row {
    grid-template-columns: 1fr;
  }

  .message-layout > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .ai-provider-grid { grid-template-columns: 1fr; }
  .ai-config-notice { align-items: flex-start; flex-direction: column; }
  .reply-config-notice { align-items: flex-start; flex-direction: column; }
  .reply-config-layout { grid-template-columns: 1fr; }
  .reply-workbench-layout { grid-template-columns: 1fr; }
  .reply-workbench-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-bottom-grid { grid-template-columns: 1fr; }
  .learning-banner { align-items: flex-start; flex-direction: column; }
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .toolbar,
  .metric-grid,
  .split-grid.two,
  .split-grid.three,
  .card-grid.cols-3,
  .card-grid.cols-4,
  .timeline,
  .reference-grid,
  .summary-grid,
  .message-layout,
  .device-grid,
  .dual {
    grid-template-columns: 1fr;
  }

  .workspace-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .private-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
  }

  .main {
    padding: 14px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 管理后台登录、账号与权限中心 */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.08fr) minmax(480px, .92fr); background: #fff; }
.login-brand-panel { position: relative; overflow: hidden; padding: 62px 7vw 48px; color: #17233d; background: radial-gradient(circle at 92% 10%,#e9f4ff 0 13%,transparent 32%),linear-gradient(145deg,#f6fbff 0%,#eef5ff 58%,#f4f8ff 100%); display: flex; flex-direction: column; justify-content: space-between; border-right:1px solid #eef2f8; }
.login-brand-panel::before,.login-brand-panel::after { content:""; position:absolute; border-radius:50%; border:1px solid #dce9fa; background:transparent; }
.login-brand-panel::before { width: 520px; height: 520px; right: -260px; top: -250px; }
.login-brand-panel::after { width: 620px; height: 620px; right: -340px; bottom: -430px; }
.login-brand { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.login-brand img { width: 46px; height: 46px; object-fit:contain; }
.login-brand strong,.login-brand>div>small { display:block; }
.login-brand strong { font-size: 22px; }
.login-brand>div>small { color:#9ba7b9; font-size:11px; margin-top:4px; }
.login-value { max-width: 670px; position:relative; z-index:1; margin-top:6vh; }
.login-value>small { color:#3e75e8; font-weight:800; letter-spacing:1.5px; display:flex; align-items:center; gap:9px; }
.login-value>small i { width:8px; height:8px; border-radius:50%; background:#5ccbe9; box-shadow:0 0 0 6px #5ccbe922; }
.login-value h1 { font-size: clamp(38px,3.4vw,58px); line-height:1.18; margin:24px 0 20px; letter-spacing:-2px; }
.login-value>p { max-width:650px; color:#7c899e; font-size:15px; line-height:2; }
.login-benefits { display:grid; gap:18px; margin-top:42px; }
.login-benefits>div { display:flex; align-items:center; gap:16px; }
.login-benefits b { width:46px; height:46px; border:1px solid #dce6f6; background:#fff; color:#4d7bea; border-radius:13px; display:grid; place-items:center; font-size:12px; box-shadow:0 8px 24px #5475ae0b; }
.login-benefits strong,.login-benefits small { display:block; }
.login-benefits strong { font-size:14px; margin-bottom:4px; }
.login-benefits small { color:#939eb0; font-size:12px; }
.login-security-row { display:flex; gap:10px; position:relative; z-index:1; }
.login-security-row span { border:1px solid #dde7f5; background:#ffffffa8; padding:8px 13px; border-radius:999px; font-size:11px; color:#718097; }
.login-form-panel { position:relative; display:grid; place-items:center; padding:40px 7vw; background:#fff; }
.login-card { width:min(500px,100%); background:#fff; padding:24px 16px; border:0; border-radius:22px; box-shadow:none; }
.login-title small { color:#3976ec; font-weight:800; letter-spacing:1.2px; font-size:12px; }
.login-title h2 { font-size:34px; margin:13px 0 8px; letter-spacing:-1px; }
.login-title p { color:#98a3b4; margin:0 0 34px; }
.login-card>label:not(.login-remember) { display:block; margin-bottom:17px; }
.login-card label span { display:block; color:#566178; font-size:12px; font-weight:600; margin-bottom:7px; }
.login-card input { width:100%; border:1px solid #dce3ee; border-radius:12px; padding:15px 14px; outline:none; font-size:14px; }
.login-card input:focus { border-color:#5577e9; box-shadow:0 0 0 4px #5577e914; }
.login-password-field { position:relative; }
.login-password-field input { padding-right:48px; }
.login-password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:9px; color:#8b96aa; background:transparent; cursor:pointer; }
.login-password-toggle:hover,.login-password-toggle:focus-visible,.login-password-toggle.is-visible { color:#356ee0; background:#edf3ff; outline:none; }
.login-password-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.login-remember { display:flex; align-items:center; gap:8px; color:#6f7b90; font-size:12px; margin:3px 0 18px; }
.login-remember input { width:auto; }
.login-submit { width:100%; border:0; border-radius:12px; color:#fff; padding:15px; font-weight:700; cursor:pointer; background:linear-gradient(135deg,#3470e8,#2855c6); box-shadow:0 12px 28px #3262d32b; }
.login-submit:disabled { opacity:.6; }
.login-hint { text-align:center; color:#a0a9b9; font-size:10px; margin:15px 0 0; }
.login-copyright { position:absolute; bottom:28px; color:#bbc3cf; font-size:10px; }
.login-error,.auth-notice { color:#b74c55; background:#fff0f1; border:1px solid #ffdadd; padding:10px 12px; border-radius:9px; font-size:12px; margin-bottom:16px; }
.auth-loading { min-height:100vh; display:grid; place-content:center; gap:13px; text-align:center; background:#f5f7fc; color:#788499; }
.auth-loading div { width:34px; height:34px; margin:auto; border:3px solid #dbe2f0; border-top-color:#486de4; border-radius:50%; animation:auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform:rotate(360deg) } }
.auth-user-pill { display:flex; align-items:center; gap:7px; border:0; background:#fff; border-radius:999px; padding:4px 10px 4px 4px; cursor:pointer; box-shadow:0 2px 10px #25345c12; }
.auth-user-pill span { width:34px; height:34px; border-radius:50%; background:#172238; color:#fff; display:grid; place-items:center; font-weight:700; }
.auth-user-pill em { font-style:normal; font-size:11px; font-weight:700; }
.auth-user-pill small { color:#9aa4b5; font-size:9px; }
.auth-current-user { margin-top:17px; display:flex; align-items:center; gap:12px; max-width:620px; background:#ffffff13; border:1px solid #ffffff1e; border-radius:13px; padding:11px 13px; }
.auth-current-user .auth-avatar { width:38px; height:38px; background:#fff; color:#355dd7; display:grid; place-items:center; border-radius:11px; font-weight:800; }
.auth-current-user div { flex:1; }
.auth-current-user strong,.auth-current-user small { display:block; }
.auth-current-user small { color:#cbd6f4; margin-top:3px; font-size:10px; }
.auth-current-user i { color:#dce5ff; font-style:normal; font-size:10px; }
.auth-create-card { background:#fff; border:1px solid #dfe6f2; border-radius:16px; padding:18px 20px; }
.auth-create-card header { display:flex; justify-content:space-between; align-items:center; }
.auth-create-card h3 { margin:0; }
.auth-create-card header span { color:#929cad; font-size:11px; }
.auth-form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:16px 0; }
.auth-form-grid label span { display:block; color:#6c778b; font-size:11px; margin-bottom:6px; }
.auth-form-grid input,.auth-form-grid select { width:100%; border:1px solid #dce3ed; border-radius:9px; padding:9px 11px; background:#fff; }
.auth-create-card footer { display:flex; justify-content:flex-end; gap:9px; }
.auth-grid { display:grid; grid-template-columns:minmax(650px,1.45fr) minmax(340px,.75fr); gap:16px; }
.auth-user-table { overflow:auto; }
.auth-table-head,.auth-table-row { min-width:680px; display:grid; grid-template-columns:1.5fr 1fr .8fr .6fr 1.1fr; gap:10px; align-items:center; padding:11px 8px; border-bottom:1px solid #edf0f5; }
.auth-table-head { background:#f8f9fc; color:#8b96a8; font-size:10px; font-weight:700; }
.auth-table-row span { font-size:11px; }
.auth-table-row span:first-child strong,.auth-table-row span:first-child small { display:block; }
.auth-table-row span:first-child small { color:#909bad; margin-top:3px; }
.auth-table-row button { border:0; background:#eef3ff; color:#3f65d9; border-radius:7px; padding:5px 7px; margin-right:5px; cursor:pointer; font-size:10px; }
.auth-table-row .good { color:#18945c; }.auth-table-row .warn { color:#b47815; }.auth-table-row .off { color:#a2aaba; }
.auth-audit-list { display:grid; gap:5px; max-height:440px; overflow:auto; }
.auth-audit-list>div { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:9px; padding:9px; border-radius:9px; background:#f8f9fc; }
.auth-audit-list i { width:7px; height:7px; border-radius:50%; background:#31bd7b; }.auth-audit-list i.failed { background:#e16a73; }
.auth-audit-list strong,.auth-audit-list small { display:block; }.auth-audit-list strong { font-size:10px; }.auth-audit-list small { color:#98a2b2; margin-top:3px; font-size:9px; }.auth-audit-list em { font-size:9px; color:#8a95a7; font-style:normal; }
@media(max-width:1100px){.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.auth-grid{grid-template-columns:1fr}.auth-form-grid{grid-template-columns:1fr 1fr}}