:root {
  color-scheme: dark;
  --bg: #080612;
  --panel: #12101e;
  --panel-2: #19162a;
  --line: rgba(255, 255, 255, .1);
  --muted: #8c859d;
  --text: #f8f6ff;
  --violet: #a816ff;
  --blue: #2477ff;
  --cyan: #51d9d0;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #05050b; color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }

.admin-auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 32px 20px; background: radial-gradient(circle at 70% 8%, rgba(36,119,255,.16), transparent 30%), #07070d; }
.admin-auth-loading { color: var(--muted); font-size: 13px; }
.admin-auth-panel { width: min(420px,100%); padding: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #12111b; box-shadow: 0 26px 80px rgba(0,0,0,.36); }
.admin-auth-brand { display: flex; align-items: center; gap: 12px; }
.admin-auth-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: linear-gradient(135deg,#236cf0,#7442d8); color: #fff; font-size: 20px; font-weight: 800; }
.admin-auth-brand strong, .admin-auth-brand span { display: block; }
.admin-auth-brand strong { font-size: 18px; }
.admin-auth-brand span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.admin-auth-panel h2 { margin: 28px 0 7px; font-size: 22px; letter-spacing: 0; }
.admin-auth-panel > p { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.admin-auth-form { display: grid; gap: 14px; }
.admin-auth-form label { display: grid; gap: 7px; color: #aaa4b8; font-size: 11px; }
.admin-auth-form input { width: 100%; padding: 12px 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; outline: 0; background: #0b0a12; color: #fff; }
.admin-auth-form input:focus { border-color: #4d8cff; box-shadow: 0 0 0 3px rgba(77,140,255,.12); }
.admin-auth-form button { min-height: 44px; margin-top: 4px; border: 0; border-radius: 7px; background: linear-gradient(100deg,#6f32d8,#2477ff); color: #fff; font-weight: 700; }
.admin-auth-form button:disabled { cursor: wait; opacity: .62; }
.admin-auth-error { min-height: 18px; margin: 0; color: #ff8fa3; font-size: 11px; }
.admin-auth-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); color: #777082; font-size: 10px; line-height: 1.6; }
.admin-session-control { display: grid; justify-items: end; gap: 7px; }
.admin-session-control .save-state b { color: #bcb5cb; font-size: 11px; font-weight: 500; }
#admin-logout { border: 0; padding: 0; background: transparent; color: #81798f; font-size: 10px; }
#admin-logout:hover { color: #fff; }

.workspace { display: flex; min-height: 100vh; background: radial-gradient(circle at 72% 10%, #1d1641 0, transparent 34%), #07070d; }
.editor-panel { width: 420px; min-height: 100vh; max-height: 100vh; overflow: auto; display: flex; flex-direction: column; padding: 30px 28px 24px; border-right: 1px solid var(--line); background: rgba(13, 12, 23, .95); }
.editor-topline, .stage-toolbar, .section-label, .editor-footer, .stage-actions { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { display: block; color: #9f91ff; font-size: 10px; letter-spacing: 2px; font-weight: 700; }
h1 { margin: 8px 0 0; font-size: 24px; letter-spacing: 0; }
.save-state { color: var(--muted); font-size: 12px; }
.save-state i, .pulse { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4cddb0; box-shadow: 0 0 16px #4cddb0; }
.page-tabs { display: flex; gap: 6px; margin-top: 30px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: #0d0c16; }
.page-tab { flex: 1; border: 0; border-radius: 9px; padding: 10px 0; background: transparent; color: var(--muted); font-size: 13px; }
.page-tab.is-active { background: linear-gradient(100deg, #5822a1, #214da6); color: #fff; }
.editor-section { margin-top: 26px; }
.editor-section.is-hidden { display: none; }
.section-label { align-items: flex-end; margin-bottom: 16px; }
.section-label span { font-weight: 700; font-size: 15px; }
.section-label small { color: var(--muted); font-size: 11px; }
.field-label { display: block; margin-top: 14px; color: #afa8bf; font-size: 12px; }
.field-label input { width: 100%; margin-top: 7px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: #0d0c16; color: #fff; font-size: 13px; }
.field-label input:focus { border-color: #725eff; box-shadow: 0 0 0 3px rgba(114, 94, 255, .12); }
.is-hidden { display: none !important; }
.admin-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 24px; padding-bottom: 4px; }
.admin-nav-label { grid-column: 1 / -1; margin-top: 10px; color: #686174; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
.admin-nav-item { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 9px 7px; background: #0d0c16; color: var(--muted); font-size: 11px; text-align: center; }
.admin-nav-item.is-active { border-color: rgba(125,101,255,.65); background: linear-gradient(100deg,rgba(88,34,161,.55),rgba(33,77,166,.55)); color: #fff; }
.asset-admin-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.asset-admin-summary > div { padding: 13px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #171523; }
.asset-admin-summary strong, .asset-admin-summary span { display: block; }
.asset-admin-summary strong { color: #a99aff; font-size: 18px; }
.asset-admin-summary span { margin-top: 4px; color: #91899f; font-size: 9px; }
.material-admin-tabs { position: sticky; top: -1px; z-index: 5; background: rgba(13,12,22,.96); backdrop-filter: blur(10px); }
.material-admin-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.material-summary-card { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #171523; color: #aaa2b6; text-align: left; }
.material-summary-card.active { border-color: rgba(114,94,255,.72); background: #1d1932; color: #fff; }
.material-summary-card i { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 7px; background: #282143; color: #a99aff; font-size: 11px; font-style: normal; }
.material-summary-card span, .material-summary-card strong, .material-summary-card small { display: block; min-width: 0; }
.material-summary-card strong { font-size: 14px; }
.material-summary-card small { margin-top: 2px; color: #91899f; font-size: 8px; white-space: nowrap; }
.admin-config-row.material-ip-row, .admin-config-row.material-avatar-row, .admin-config-row.material-voice-row { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 8px; }
.admin-config-row.material-avatar-row > button:last-child, .admin-config-row.material-voice-row > button:last-child { justify-self: start; }
.material-section-divider { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.material-section-divider strong { font-size: 11px; }
.material-section-divider span { color: #8d8498; font-size: 8px; }
.material-rule-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.material-rule-card { display: grid; grid-template-columns: minmax(210px,1fr) 130px 150px; gap: 12px; align-items: end; margin-top: 12px; padding: 13px; border: 1px solid rgba(118,89,247,.3); border-radius: 8px; background: #171524; }
.material-rule-grid .material-rule-card { grid-template-columns: minmax(180px,1fr) 108px 125px; margin-top: 0; }
.material-rule-card > div { align-self: center; }
.material-rule-card strong, .material-rule-card small { display: block; }
.material-rule-card strong { color: #f3efff; font-size: 12px; }
.material-rule-card > div small { margin-top: 5px; color: #91899f; font-size: 9px; line-height: 1.45; }
.material-rule-card label { display: grid; gap: 6px; min-width: 0; }
.material-rule-card label small { color: #91899f; font-size: 8px; }
.material-rule-card select, .material-rule-card input { width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; outline: 0; background: #0e0d17; color: #f5f2ff; font-size: 10px; }
.material-rule-card select:focus, .material-rule-card input:focus { border-color: #7659f7; }
.material-avatar-tabs { margin: 12px 0; }
.phone-case-cover img, .phone-case-cover video { display: block; width: 100%; height: auto; object-fit: contain; }
.sheet-preview img, .sheet-preview video { display: block; width: 100%; max-height: 180px; object-fit: contain; border-radius: 12px; }
.case-workflow-note { display: block; margin-top: 8px; color: #91899f; font-size: 8px; }
.case-input-page { padding-bottom: 0; }
.workflow-page-intro { padding: 4px 2px 2px; }
.workflow-page-intro p { margin: 0; color: #aaa4b8; font-size: 10px; line-height: 1.65; }
.case-input-form { display: grid; gap: 12px; margin-top: 13px; }
.workflow-step-card { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #171523; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.workflow-step-title { display: flex; align-items: center; gap: 8px; }
.workflow-step-title > b { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: #3478f3; color: #fff; font-size: 10px; }
.workflow-step-title > strong { min-width: 0; color: #f8f6ff; font-size: 12px; }
.workflow-step-title > em { margin-left: auto; color: #ff94a5; font-size: 8px; font-style: normal; font-weight: 500; }
.workflow-step-title > em.optional { color: #777082; }
.workflow-field-description { margin: -3px 0 0 30px !important; color: #858092 !important; font-size: 8px !important; line-height: 1.5; }
.workflow-text-control { display: block; width: 100%; min-height: 41px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: 0; background: #0f0e19; color: #fff; font: inherit; font-size: 13px; }
textarea.workflow-text-control { min-height: 112px; resize: vertical; line-height: 1.65; }
.workflow-text-control:focus { border-color: #725eff; box-shadow: 0 0 0 2px rgba(114,94,255,.12); }
.workflow-upload-zone { display: grid; min-height: 104px; place-items: center; align-content: center; gap: 5px; border: 1px dashed rgba(82,151,255,.58); border-radius: 10px; background: rgba(42,110,212,.08); }
.workflow-upload-zone:disabled { opacity: .55; }
.workflow-upload-zone .workflow-upload-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #a8a3b5; font-size: 17px; line-height: 1; }
.workflow-upload-zone strong { color: #5b9eff; font-size: 11px; }
.workflow-upload-zone small { color: #7e788a; font-size: 8px; text-align: center; }
.workflow-upload-previews { display: flex; gap: 8px; overflow-x: auto; }
.workflow-upload-preview { position: relative; width: 66px; min-width: 66px; }
.workflow-upload-preview img, .workflow-upload-preview video, .workflow-upload-preview > span { display: grid; width: 66px; height: 66px; place-items: center; object-fit: cover; border-radius: 8px; background: #0d0c16; color: #a99aff; }
.workflow-upload-preview button { position: absolute; top: -5px; right: -5px; display: grid; width: 18px; height: 18px; min-height: 0; place-items: center; border: 0; border-radius: 50%; background: #3b3847; color: #fff; font-size: 13px; line-height: 1; }
.workflow-upload-preview small { display: block; overflow: hidden; margin-top: 4px; color: #777082; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-option-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.workflow-option { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #0f0e19; color: #aaa4b8; font-size: 9px; }
.workflow-option.selected { border-color: #438cff; background: rgba(52,120,243,.13); color: #70aaff; }
.workflow-option.ratio { min-height: 44px; flex-direction: column; gap: 4px; }
.workflow-option.ratio i { display: block; width: 18px; max-height: 18px; border-radius: 2px; background: #777482; }
.workflow-option.ratio.selected i { background: #5b9eff; }
.workflow-no-options { grid-column: 1 / -1; padding: 8px; color: #777082; font-size: 8px; text-align: center; }
.workflow-result-preview { display: grid; gap: 9px; margin-top: 14px; padding: 12px; border: 1px solid rgba(91,158,255,.3); border-radius: 11px; background: #171523; }
.workflow-result-preview.succeeded { border-color: rgba(75,221,172,.34); }
.workflow-result-preview.failed { border-color: rgba(255,112,137,.34); }
.workflow-result-preview header { display: flex; min-width: 0; align-items: center; gap: 6px; }
.workflow-result-preview header i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #5b9eff; box-shadow: 0 0 9px rgba(91,158,255,.7); }
.workflow-result-preview.succeeded header i { background: #4bddac; box-shadow: 0 0 9px rgba(75,221,172,.62); }
.workflow-result-preview.failed header i { background: #ff7089; box-shadow: 0 0 9px rgba(255,112,137,.62); }
.workflow-result-preview header strong { font-size: 11px; }
.workflow-result-preview header small { overflow: hidden; margin-left: auto; color: #777082; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-result-preview pre, .workflow-result-preview p { overflow: auto; max-height: 180px; margin: 0; padding: 10px; border-radius: 8px; background: #0f0e19; color: #d6d1df; font: 9px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.workflow-result-preview p { color: #ff9bad; }
.workflow-result-preview > button { width: max-content; min-height: 28px; padding: 0 11px; border: 1px solid rgba(91,158,255,.35); border-radius: 7px; background: rgba(91,158,255,.1); color: #70aaff; font-size: 9px; }
.workflow-run-media { display: grid; gap: 8px; }
.workflow-run-media.multiple { grid-template-columns: repeat(2,minmax(0,1fr)); }
.workflow-run-media-item { display: block; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #0f0e19; }
.workflow-run-media-item.video, .workflow-run-media-item.link { grid-column: 1 / -1; width: 100%; }
.workflow-run-media-item img, .workflow-run-media-item.video { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #05050a; }
.workflow-run-media.multiple .workflow-run-media-item.image img { height: 142px; object-fit: cover; }
.workflow-run-media-item.link { padding: 10px; color: #70aaff; font-size: 9px; text-align: center; }
.workflow-run-spacer { height: 105px; }
.workflow-run-dock { position: sticky; bottom: -28px; z-index: 8; margin: 18px -15px -28px; padding: 10px 15px 22px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(8,6,18,.96); backdrop-filter: blur(12px); }
.workflow-run-dock .preview-primary { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 12px; }
.workflow-run-dock .preview-primary strong { font-size: 12px; }
.workflow-run-dock .preview-primary span { color: rgba(255,255,255,.76); font-size: 8px; }
.workflow-run-dock > small { display: block; margin-top: 6px; color: #686270; font-size: 7px; text-align: center; }
.workflow-showcase-preview { display: grid; gap: 7px; margin-top: 12px; padding: 12px; border: 1px solid rgba(126,110,221,.24); border-radius: 12px; background: #171523; }
.workflow-showcase-preview strong { font-size: 12px; }
.workflow-showcase-preview p, .workflow-showcase-preview div { margin: 0; color: #aaa2b6; font-size: 9px; line-height: 1.5; white-space: pre-wrap; }
.workflow-showcase-preview img, .workflow-showcase-preview video { display: block; width: 100%; max-height: 240px; object-fit: contain; border-radius: 9px; background: #0d0c16; }
.admin-context { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 23px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.admin-context strong { font-size: 15px; }
.admin-context span { color: var(--muted); font-size: 10px; text-align: right; }
.admin-config-list { display: grid; gap: 8px; margin-top: 12px; }
.admin-config-row { display: grid; grid-template-columns: 17px 1fr 1.5fr 42px 70px; gap: 6px; align-items: end; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: #171524; }
.admin-config-row.compact { grid-template-columns: 1.5fr 1fr 56px 56px; margin-top: 8px; }
.admin-drag { color: #756f83; font-size: 17px; align-self: center; }
.admin-config-row label, .admin-inline-grid label, .admin-field-wide { display: block; min-width: 0; color: #aaa2b6; font-size: 9px; }
.admin-config-row label small, .admin-inline-grid label small, .admin-field-wide small { display: block; margin-bottom: 5px; color: #aaa2b6; font-size: 9px; }
.admin-config-row input, .admin-config-row select, .admin-inline-grid input, .admin-inline-grid select, .admin-field-wide textarea { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 8px; outline: 0; background: #0d0c16; color: #fff; font-size: 10px; }
.admin-config-row input:focus, .admin-inline-grid input:focus, .admin-field-wide textarea:focus { border-color: #725eff; }
.admin-config-row select, .admin-inline-grid select { padding-right: 2px; }
.admin-config-card { margin-top: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #171524; }
.case-category-list { display: grid; gap: 8px; }
.case-category-row { display: grid; grid-template-columns: minmax(0, 1fr) 82px auto; gap: 8px; align-items: end; }
.case-category-row input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 8px; outline: 0; background: #0d0c16; color: #fff; font-size: 10px; }
.case-admin-media-preview { display: flex; min-width: 72px; min-height: 42px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #0d0c16; color: #777082; font-size: 8px; }
.case-admin-media-preview img, .case-admin-media-preview video { display: block; width: 72px; height: 52px; object-fit: contain; }
.case-preset-editor { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.case-preset-editor.is-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8f879a; font-size: 9px; }
.case-preset-editor.is-empty strong { color: #d8d3e1; font-size: 10px; }
.case-preset-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.case-preset-head > div { display: flex; flex-direction: column; gap: 4px; }
.case-preset-head strong { color: #ded9e7; font-size: 11px; }
.case-preset-head span { color: #817a8e; font-size: 8px; }
.case-preset-head > b { color: #67dcb4; font-size: 8px; font-weight: 500; }
.case-preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.case-preset-field { min-width: 0; color: #aaa2b6; font-size: 8px; }
.case-preset-field > small { display: flex; min-height: 17px; align-items: center; gap: 6px; margin-bottom: 5px; }
.case-preset-field > small span { color: #c9c3d3; }
.case-preset-field code { color: #67dcb4; font-size: 7px; }
.case-preset-field em { margin-left: auto; color: #837b8f; font-size: 7px; font-style: normal; }
.case-preset-field input, .case-preset-field select, .case-preset-field textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; outline: 0; background: #0d0c16; color: #fff; font: inherit; font-size: 9px; }
.case-preset-field textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.case-preset-field p { margin: 5px 0 0; color: #716a7d; font-size: 7px; line-height: 1.45; }
.case-preset-upload { display: grid; gap: 6px; }
.case-preset-upload-button { display: flex; min-height: 54px; align-items: center; gap: 9px; box-sizing: border-box; padding: 9px 10px; border: 1px dashed #526fbb; border-radius: 8px; background: #11182c; color: #e8edf9; cursor: pointer; transition: border-color .18s ease, background .18s ease, opacity .18s ease; }
.case-preset-upload-button:hover { border-color: #6c8ce1; background: #151e36; }
.case-preset-upload-button > b { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: #2f6df6; color: #fff; font-size: 17px; font-weight: 400; }
.case-preset-upload-button > img { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 6px; object-fit: cover; }
.case-preset-upload-button > span { display: grid; min-width: 0; gap: 3px; }
.case-preset-upload-button strong { color: #f4f6fb; font-size: 9px; font-weight: 600; }
.case-preset-upload-button small { color: #7f89a4; font-size: 7px; line-height: 1.35; }
.case-preset-upload.is-uploading .case-preset-upload-button { pointer-events: none; opacity: .65; }
.case-preset-upload.is-uploading .case-preset-upload-button strong { font-size: 0; }
.case-preset-upload.is-uploading .case-preset-upload-button strong::after { content: '正在上传…'; font-size: 9px; }
.case-preset-uploaded { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; border-radius: 6px; background: rgba(103,220,180,.08); }
.case-preset-uploaded > span { overflow: hidden; color: #9bcdbd; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.case-preset-uploaded button { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: #ff7c9b; font-size: 7px; cursor: pointer; }
.digital-route-table { display: grid; gap: 0; }
.digital-route-row { display: grid; grid-template-columns: 150px repeat(3, minmax(160px, 1fr)); gap: 10px; padding: 14px 8px; border-top: 1px solid rgba(255,255,255,.07); color: #d8d3e1; font-size: 10px; align-items: end; }
.digital-route-row:first-child { border-top: 0; }
.digital-route-identity { align-self: center; display: grid; gap: 6px; }
.digital-route-identity strong { color: #f4f1f8; font-size: 11px; }
.digital-route-row code { color: #a99aff; font-size: 9px; }
.digital-route-row label { display: grid; gap: 5px; min-width: 0; }
.digital-route-row label small { color: #8f889c; font-size: 8px; }
.digital-route-row input, .digital-route-row select, .digital-route-row textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 8px; background: #0d0c16; color: #fff; font: inherit; font-size: 10px; }
.digital-route-row input[readonly] { color: #918a9d; background: #0a0911; }
.home-feature-route-row { grid-template-columns: 150px minmax(320px, 2fr) minmax(170px, 1fr) minmax(160px, 1fr) minmax(170px, 1fr); align-items: start; }
.home-route-workflows { display: grid; gap: 7px; min-width: 0; }
.home-route-workflows > small { color: #8f889c; font-size: 8px; }
.home-route-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.home-route-choice { display: flex !important; min-width: 0; align-items: center; gap: 7px !important; padding: 7px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: #0d0c16; }
.home-route-choice input { width: 14px !important; height: 14px; flex: 0 0 14px; padding: 0 !important; accent-color: #705cff; }
.home-route-choice span { display: grid; min-width: 0; gap: 2px; }
.home-route-choice strong, .home-route-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-route-choice strong { color: #f4f0fa; font-size: 9px; }
.home-route-choice small { color: #756f80; font-size: 7px; }
.digital-route-workflow { grid-column: span 2; }
.digital-route-defaults { grid-column: 2 / -1; }
.digital-route-defaults textarea { resize: vertical; line-height: 1.5; }
@media (max-width: 1050px) { .digital-route-row { grid-template-columns: 130px repeat(2, minmax(160px, 1fr)); } .digital-route-defaults { grid-column: 2 / -1; } }
@media (max-width: 1050px) { .home-feature-route-row { grid-template-columns: 130px minmax(300px, 2fr) minmax(170px, 1fr); } }
.digital-billing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.digital-route-preview { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; margin: 10px 0; padding: 10px; border: 1px solid rgba(126,110,221,.28); border-radius: 10px; background: #11101b; }
.digital-route-preview code { color: #a99aff; font-size: 8px; }
.digital-route-preview span { color: #d8d3e1; font-size: 9px; text-align: right; }
.digital-route-preview b { grid-column: 1 / -1; color: #55d9a7; font-size: 10px; font-weight: 600; }
.fixed-group-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.fixed-group-summary span { padding: 9px; border: 1px solid rgba(126,110,221,.3); border-radius: 8px; background: #11101b; color: #ddd6ff; font-size: 10px; font-weight: 700; text-align: center; }
.navigation-group-card { margin-top: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: #12101e; }
.navigation-group-head { display: flex; align-items: center; justify-content: space-between; }
.navigation-group-head div { display: flex; align-items: center; gap: 8px; }
.navigation-group-head strong { font-size: 12px; }
.navigation-group-head code { color: #8d7bff; font-size: 8px; }
.navigation-group-head > span { padding: 3px 6px; border-radius: 5px; background: rgba(85,217,167,.1); color: #55d9a7; font-size: 8px; }
.navigation-group-card > p { margin: 5px 0 9px; color: #8e879b; font-size: 8px; }
.navigation-preview-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.navigation-preview-row b, .navigation-preview-row i { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #aaa2b6; font-size: 8px; font-style: normal; font-weight: 400; }
.navigation-preview-row b { border-color: #725eff; color: #fff; }
.navigation-config-list, .catalog-config-list { display: grid; gap: 8px; }
.navigation-config-row { display: grid; grid-template-columns: minmax(150px,1fr) 64px 72px 34px; gap: 8px; align-items: end; padding: 9px; border-top: 1px solid rgba(255,255,255,.06); }
.navigation-config-row label, .catalog-config-row label { min-width: 0; color: #aaa2b6; font-size: 8px; }
.navigation-config-row small, .catalog-config-row small { display: block; margin-bottom: 4px; }
.navigation-config-row input, .navigation-config-row select, .catalog-config-row input, .catalog-config-row select { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; padding: 7px; background: #0d0c16; color: #fff; font-size: 9px; }
.catalog-config-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; align-items: end; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: #12101e; }
.catalog-config-row.workflow { grid-template-columns: repeat(2,minmax(0,1fr)); }
.workflow-id-sync { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; min-width: 0; }
.workflow-id-sync label { min-width: 0; }
.workflow-sync-one { display: inline-flex; min-height: 31px; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid rgba(101,213,189,.35); border-radius: 7px; background: rgba(101,213,189,.08); color: #77ddc8; font-size: 8px; white-space: nowrap; }
.workflow-sync-one:hover { border-color: rgba(101,213,189,.65); background: rgba(101,213,189,.14); }
.workflow-sync-one:disabled { cursor: wait; opacity: .72; }
.workflow-sync-one .button-spinner { width: 10px; height: 10px; border: 2px solid rgba(119,221,200,.28); border-top-color: #77ddc8; border-radius: 50%; animation: spin .7s linear infinite; }
.catalog-config-row.agent { grid-template-columns: repeat(2,minmax(0,1fr)); }
.catalog-config-row > * { min-width: 0; }
.catalog-config-row > .table-link { justify-self: start; padding: 5px 0; }
.agent-config-card { padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: #12101e; }
.agent-config-card .catalog-config-row { padding: 0 0 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; background: transparent; }
.agent-config-card .agent-operation-grid { margin-top: 10px; }
.agent-operation-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 150px; gap: 9px; align-items: end; }
.agent-operation-grid.compact { grid-template-columns: minmax(0,1fr) 150px 180px; }
.agent-operation-grid label { min-width: 0; color: #aaa2b6; font-size: 8px; }
.agent-operation-grid small { display: block; margin-bottom: 4px; }
.agent-operation-grid input, .agent-operation-grid textarea, .agent-operation-grid select { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; padding: 7px; outline: 0; background: #0d0c16; color: #fff; font: inherit; font-size: 9px; }
.agent-operation-grid textarea { min-height: 64px; resize: vertical; line-height: 1.45; }
.agent-operation-grid input:focus, .agent-operation-grid textarea:focus { border-color: #725eff; }
.workflow-showcase-config { margin-top: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(126,110,221,.045); }
.workflow-schema-config { margin-top: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(50,181,216,.035); }
.workflow-page-settings { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.workflow-page-settings label { min-width: 0; color: #aaa2b6; font-size: 8px; }
.workflow-page-settings small { display: block; margin-bottom: 5px; }
.workflow-page-settings input, .workflow-page-settings textarea { width: 100%; min-height: 32px; box-sizing: border-box; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; outline: 0; background: #0d0c16; color: #fff; font: inherit; font-size: 9px; }
.workflow-page-settings textarea { height: 62px; resize: vertical; line-height: 1.45; }
.workflow-page-settings input:focus, .workflow-page-settings textarea:focus { border-color: #725eff; }
.workflow-schema-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.workflow-schema-head div { display: grid; gap: 3px; }
.workflow-schema-head strong { color: #d8d3e1; font-size: 10px; }
.workflow-schema-head span { color: #777082; font-size: 8px; }
.workflow-schema-head b { flex: 0 0 auto; color: #65d5bd; font-size: 8px; font-weight: 600; }
.workflow-schema-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.workflow-schema-head-actions button { min-height: 29px; padding: 0 11px; border: 1px solid rgba(101,213,189,.35); border-radius: 7px; background: rgba(101,213,189,.08); color: #77ddc8; font-size: 8px; }
.workflow-output-head { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.workflow-schema-param { margin-top: 8px; padding: 10px; border: 1px dashed rgba(135,127,166,.3); border-radius: 8px; background: rgba(13,12,22,.58); }
.workflow-schema-param-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.workflow-schema-param-toolbar span { color: #777082; font-size: 8px; }
.workflow-schema-param-toolbar button { border: 0; background: transparent; color: #ff7185; font-size: 8px; }
.workflow-schema-param-top { display: grid; grid-template-columns: minmax(100px,.7fr) repeat(2,minmax(150px,1fr)); gap: 8px; }
.workflow-schema-param.is-output .workflow-schema-param-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 90px; }
.workflow-schema-param-bottom { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 9px; }
.workflow-schema-param-bottom > label { min-width: 105px; flex: 1 1 110px; }
.workflow-schema-param-bottom > .workflow-schema-toggle { flex: 0 0 90px; }
.workflow-schema-param label { min-width: 0; color: #aaa2b6; font-size: 8px; }
.workflow-schema-param small { display: block; margin-bottom: 5px; }
.workflow-schema-param input:not([type="checkbox"]), .workflow-schema-param select { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; outline: 0; background: #0d0c16; color: #fff; font: inherit; font-size: 9px; }
.workflow-schema-param input[readonly] { color: #8de0d0; }
.workflow-schema-param input:focus, .workflow-schema-param select:focus { border-color: #725eff; }
.workflow-schema-toggle > span { position: relative; display: flex; align-items: center; gap: 6px; min-height: 31px; }
.workflow-schema-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.workflow-schema-toggle i { position: relative; width: 30px; height: 17px; border-radius: 99px; background: #3a3746; transition: .2s; }
.workflow-schema-toggle i::after { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; content: ''; transition: .2s; }
.workflow-schema-toggle input:checked + i { background: #3478f3; }
.workflow-schema-toggle input:checked + i::after { transform: translateX(13px); }
.workflow-schema-toggle b { color: #aaa2b6; font-size: 8px; font-weight: 500; }
.workflow-source-type { align-self: center; color: #6f697a; font-size: 8px; white-space: nowrap; }
.workflow-options-field { display: block; margin-top: 9px; color: #aaa2b6; font-size: 8px; }
.workflow-enum-options { display: grid; gap: 7px; }
.workflow-enum-option-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 28px; gap: 8px; align-items: end; }
.workflow-enum-option-row label { min-width: 0; }
.workflow-enum-option-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.workflow-option-remove { width: 28px; height: 31px; padding: 0; border: 0; background: transparent; color: #8e8798; font-size: 17px; cursor: pointer; }
.workflow-option-remove:hover { color: #ff8491; }
.workflow-option-add { min-height: 31px; margin-top: 8px; padding: 0 11px; font-size: 9px; }
.workflow-option-empty { padding: 10px; border: 1px dashed rgba(135,127,166,.3); border-radius: 7px; color: #777082; font-size: 8px; text-align: center; }
.workflow-showcase-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workflow-showcase-head strong { color: #d8d3e1; font-size: 10px; }
.workflow-showcase-head label { color: #aaa2b6; font-size: 9px; }
.workflow-showcase-head input { accent-color: #725eff; }
.workflow-showcase-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.workflow-showcase-fields.is-muted { opacity: .45; }
.workflow-showcase-fields label { min-width: 0; color: #aaa2b6; font-size: 8px; }
.workflow-showcase-fields label small { display: block; margin-bottom: 4px; }
.workflow-showcase-fields input, .workflow-showcase-fields select, .workflow-showcase-fields textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; padding: 7px; background: #0d0c16; color: #fff; font: inherit; font-size: 9px; }
.workflow-showcase-fields .admin-field-wide { grid-column: 1 / -1; }
.admin-banner-list { display: grid; gap: 10px; }
.admin-banner-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: #12101e; }
.admin-banner-media { display: grid; width: 92px; min-width: 92px; align-content: start; gap: 5px; color: #8e879b; font-size: 8px; }
.admin-banner-thumb { display: block !important; width: 92px !important; height: 58px !important; max-width: 92px !important; max-height: 58px !important; object-fit: contain; object-position: center; border-radius: 7px; background: #0d0c16; }
.admin-banner-thumb.empty { display: grid !important; place-items: center; padding: 6px; color: #777082; font-size: 8px; text-align: center; }
.admin-banner-fields { min-width: 0; }
.admin-banner-upload { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin-top: 9px; color: #aaa2b6; font-size: 9px; }
.admin-banner-upload input { min-width: 0; color: #aaa2b6; font-size: 9px; }
.admin-banner-upload small { grid-column: 1 / -1; overflow: hidden; color: #777082; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.admin-banner-remove { display: block; margin-top: 7px; color: #ff8994; }
.admin-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.admin-card-head strong { font-size: 12px; }
.admin-card-head span { color: #a59aff; font-size: 9px; }
.admin-inline-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.admin-field-wide { margin-top: 10px; }
.admin-field-wide textarea { height: 58px; resize: vertical; line-height: 1.45; }
.admin-save { width: 100%; margin-top: 12px; text-align: center; }
.dashboard-context { align-items: center; }
.dashboard-context > div { display: grid; gap: 5px; }
.dashboard-context > div span { text-align: left; }
.admin-period, .chart-filter { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 10px; background: #0d0c16; color: #bdb4d0; font-size: 10px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 13px; }
.dashboard-metric { position: relative; min-height: 86px; padding: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #171524; }
.dashboard-metric::before { content: ""; position: absolute; right: -22px; top: -26px; width: 70px; height: 70px; border-radius: 50%; background: var(--metric-color, #725eff); opacity: .18; filter: blur(5px); }
.dashboard-metric > div { display: flex; justify-content: space-between; gap: 5px; }
.dashboard-metric > span, .dashboard-metric > div > span { color: #c8c0d4; font-size: 10px; }
.dashboard-metric small { color: #777082; font-size: 8px; }
.dashboard-metric strong { display: block; margin-top: 9px; color: var(--metric-color, #fff); font-size: 21px; letter-spacing: 0; }
.dashboard-metric em { display: block; margin-top: 5px; color: #8f879e; font-size: 8px; font-style: normal; }
.dashboard-metric.blue { --metric-color: #5e91ff; } .dashboard-metric.violet { --metric-color: #a99aff; } .dashboard-metric.green { --metric-color: #4fe0ac; } .dashboard-metric.cyan { --metric-color: #55d6dd; } .dashboard-metric.orange { --metric-color: #ffb45d; } .dashboard-metric.pink { --metric-color: #e780ff; } .dashboard-metric.teal { --metric-color: #55d6bb; } .dashboard-metric.red { --metric-color: #ff7787; }
.dashboard-chart-card { margin-top: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #171524; }
.dashboard-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.dashboard-chart-head strong { display: block; font-size: 12px; }
.dashboard-chart-head small { display: block; margin-top: 5px; color: #847c91; font-size: 9px; }
.dashboard-chart { display: flex; height: 150px; margin-top: 13px; padding: 10px 4px 0 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 11px; color: #6d6678; font-size: 8px; }
.chart-bars { display: flex; flex: 1; align-items: flex-end; justify-content: space-around; gap: 4px; padding-left: 10px; background: repeating-linear-gradient(to bottom, transparent 0 44px, rgba(255,255,255,.05) 45px 46px); }
.chart-bars i { display: block; width: 12px; min-height: 12px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg,#9a69ff,#277fff); position: relative; }
.chart-bars i:nth-child(3n) { background: linear-gradient(180deg,#54dfc2,#277fff); }
.chart-bars i span { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); color: #696172; font-size: 7px; }
.dashboard-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compact-chart { min-height: 170px; }
.chart-value { color: #7bdcbf; font-size: 15px; }
.chart-value small { display: inline; color: #898293; font-size: 8px; }
.usage-line { display: flex; align-items: flex-end; gap: 5px; height: 76px; margin-top: 21px; padding: 0 7px; border-bottom: 1px solid rgba(255,255,255,.08); }
.usage-line i { flex: 1; height: 30%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg,#e881ff,#5c5cff); }
.usage-line i:nth-child(2) { height: 44%; } .usage-line i:nth-child(3) { height: 38%; } .usage-line i:nth-child(4) { height: 65%; } .usage-line i:nth-child(5) { height: 52%; } .usage-line i:nth-child(6) { height: 81%; } .usage-line i:nth-child(7) { height: 72%; }
.dashboard-quick { display: grid; align-content: start; gap: 8px; margin-top: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #171524; }
.dashboard-quick > strong { margin-bottom: 3px; font-size: 12px; }
.dashboard-quick button { display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); padding: 7px 0; background: transparent; color: #bcb1ff; font-size: 10px; text-align: left; }
.dashboard-quick button:last-child { border-bottom: 0; }
.dashboard-quick b { font-size: 15px; font-weight: 400; }
.admin-table-card { margin-top: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #171524; }
.admin-table-head, .admin-table-row { display: grid; grid-template-columns: 1.35fr 1fr .75fr 1fr; gap: 8px; align-items: center; padding: 12px; }
.admin-table-head { color: #777082; font-size: 9px; background: rgba(255,255,255,.025); }
.admin-table-row { border-top: 1px solid rgba(255,255,255,.06); color: #d4cddd; font-size: 9px; }
.admin-table-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { display: inline-block; width: fit-content; padding: 4px 6px; border-radius: 999px; font-size: 8px; font-weight: 500; }
.status-pill.green { color: #67e2b5; background: rgba(67,218,164,.12); } .status-pill.blue { color: #79a7ff; background: rgba(61,126,255,.13); } .status-pill.purple { color: #c09cff; background: rgba(142,86,255,.15); } .status-pill.gray { color: #aaa2b5; background: rgba(255,255,255,.08); } .status-pill.red { color: #ff8994; background: rgba(255,89,104,.12); }
.redeem-create-card { margin-top: 13px; }
.distribution-metrics { grid-template-columns: repeat(3, 1fr); }
.distribution-metrics .dashboard-metric { min-height: 93px; }
.distribution-metrics .dashboard-metric strong { font-size: 17px; }
.asset-admin-row { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.asset-admin-row > div { display: grid; flex: 1; gap: 3px; }
.asset-admin-row strong { font-size: 10px; } .asset-admin-row small { color: #8d8498; font-size: 8px; }
.asset-admin-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: linear-gradient(135deg,#6f39ff,#1c7cff); color: #fff; font-size: 10px; }
.asset-admin-row .outline-button { width: auto; margin: 0; padding: 6px 8px; border-style: solid; font-size: 9px; }
.schema-preview { display: grid; grid-template-columns: 1fr 2fr; gap: 7px 10px; align-items: center; }
.schema-preview code { color: #8ce7d0; font-size: 9px; } .schema-preview span { color: #9a91a6; font-size: 9px; }
.admin-toolbar { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; }
.admin-toolbar .outline-button { width: auto; flex: 0 0 auto; margin: 0; padding: 7px 9px; border-style: solid; font-size: 9px; }
.admin-segment { display: flex; gap: 4px; margin-top: 13px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: #0d0c16; }
.admin-segment button { flex: 1; border: 0; border-radius: 7px; padding: 8px 7px; background: transparent; color: #8e879b; font-size: 10px; white-space: nowrap; }
.admin-segment button.active { background: linear-gradient(100deg,#5822a1,#214da6); color: #fff; }
.admin-segment-scroll { overflow-x: auto; scrollbar-width: thin; }
.admin-segment-scroll button { flex: 0 0 auto; }
.integration-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.integration-summary-grid button { min-height: 72px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: #0d0c16; color: #fff; text-align: left; }
.integration-summary-grid button b { display: block; color: #9b83ff; font-size: 14px; }
.integration-summary-grid button strong { display: block; margin-top: 6px; font-size: 10px; }
.integration-summary-grid button small { display: block; margin-top: 3px; color: #8e879b; font-size: 8px; }
.security-note { margin-top: 12px; padding: 9px 10px; border-left: 2px solid #ffb45d; background: rgba(255,180,93,.07); color: #b8aebd; font-size: 9px; line-height: 1.55; }
.secret-hint { display: block; min-height: 10px; margin-top: 3px; color: #8e879b; font-size: 7px; font-style: normal; }
.model-secret-field { position: relative; }
.model-secret-status { display: flex; min-height: 18px; margin-top: 6px; align-items: center; gap: 6px; color: #90899b; font-size: 9px; font-style: normal; }
.model-secret-status i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #777082; }
.model-secret-status.ready { color: #68d9b4; }
.model-secret-status.ready i { background: #4bddac; box-shadow: 0 0 8px rgba(75,221,172,.45); }
.model-secret-status.error { color: #ff8fa2; }
.model-secret-status.error i { background: #ff7089; }
.model-advanced { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 12px; }
.model-advanced summary { width: max-content; color: #9f94bd; font-size: 10px; cursor: pointer; }
.model-advanced .admin-inline-grid { margin-top: 12px; }
.model-advanced p { margin: 9px 0 0; color: #81798e; font-size: 8px; line-height: 1.55; }
.model-config-card .admin-help-text { display: block; margin-top: 5px; color: #777082; font-size: 8px; line-height: 1.45; }
.model-config-card .admin-save:disabled { opacity: .55; cursor: wait; }
.coze-table .admin-wide-head, .coze-table .admin-wide-row { grid-template-columns: 72px 112px 120px 132px 110px 118px 72px 64px 190px; }
.admin-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.agent-table .admin-wide-head, .agent-table .admin-wide-row { grid-template-columns: 45px 140px 80px 90px 90px 48px 60px 70px; }
.workflow-table .admin-wide-head, .workflow-table .admin-wide-row { grid-template-columns: 45px 150px 140px 90px 48px 60px 70px; }
.admin-wide-table { margin-top: 13px; overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #171524; scrollbar-width: thin; }
.admin-wide-head, .admin-wide-row { display: grid; min-width: 940px; gap: 10px; align-items: center; padding: 11px 12px; }
.admin-wide-head { color: #777082; font-size: 8px; background: rgba(255,255,255,.025); }
.admin-wide-row { border-top: 1px solid rgba(255,255,255,.06); color: #d4cddd; font-size: 8px; }
.admin-wide-head > span, .admin-wide-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-check { color: #8d8798; font-size: 12px; line-height: 1; }
.users-table .admin-wide-head, .users-table .admin-wide-row { grid-template-columns: 28px 55px 90px 58px 70px 58px 72px 62px 125px 88px 125px 125px 50px 65px; }
.orders-table .admin-wide-head, .orders-table .admin-wide-row { grid-template-columns: 28px 55px 58px 90px 80px 70px 60px 78px 85px 65px 72px 90px 125px 125px 110px; }
.redeem-table .admin-wide-head, .redeem-table .admin-wide-row { grid-template-columns: 45px 58px 145px 72px 80px 65px 105px 110px 95px 125px 125px 90px; }
.recharge-table .admin-wide-head, .recharge-table .admin-wide-row { grid-template-columns: 45px 90px 75px 70px 48px 80px 125px 110px 90px 60px 88px; }
.membership-config-table .admin-wide-head, .membership-config-table .admin-wide-row { grid-template-columns: 42px 92px 72px 70px 88px 118px 48px 82px 112px 92px 58px 86px; }
.credit-config-table .admin-wide-head, .credit-config-table .admin-wide-row { grid-template-columns: 42px 92px 72px 88px 88px 88px 82px 48px 58px 86px; }
.distributor-admin-table .admin-wide-head, .distributor-admin-table .admin-wide-row { min-width: 1530px; grid-template-columns: 34px 82px 110px 120px 95px 100px 95px 90px 90px 70px 58px 132px 132px 210px; }
.distributor-admin-table .table-check { display: grid; place-items: center; }
.distributor-admin-table .table-check input { width: 14px; height: 14px; accent-color: #6f55ff; }
.distributor-crud-toolbar { align-items: center; }
.admin-search-field { display: flex; width: min(320px, 50vw); align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 0 9px; background: #0d0c16; color: #888096; }
.admin-search-field input { width: 100%; border: 0; padding: 8px 0; outline: 0; background: transparent; color: #fff; font-size: 10px; }
.admin-toolbar .outline-button.danger { border-color: rgba(255,95,113,.32); color: #ff8290; }
.admin-toolbar .outline-button:disabled { cursor: not-allowed; opacity: .42; }
.danger-small { border: 1px solid rgba(255,95,113,.42); border-radius: 8px; padding: 9px 13px; background: rgba(255,77,98,.14); color: #ff8290; font: inherit; font-size: 10px; }
.admin-delete-warning { margin-top: 15px; border-left: 3px solid #ff6d7d; padding: 12px 14px; background: rgba(255,92,111,.07); }
.admin-delete-warning strong { font-size: 12px; }
.admin-delete-warning p { margin: 7px 0 0; color: #aaa2b4; font-size: 10px; line-height: 1.65; }
.commission-ledger-table .admin-wide-head, .commission-ledger-table .admin-wide-row { min-width: 1320px; grid-template-columns: 250px 76px 86px 96px 70px 110px 175px 132px 132px 58px; }
.commission-ledger-table .admin-wide-row > span:first-child { white-space: normal; line-height: 1.45; }
.transaction-in { color: #54dda7; font-weight: 600; }
.transaction-out { color: #ff9a70; font-weight: 600; }
.transaction-pending { color: #aaa2b4; font-weight: 600; }
.distribution-record-list-preview .payout-amount.pending { color: #aaa2b4; }
.membership-entitlement-box { margin-top: 14px; padding: 12px; border: 1px solid rgba(132,108,255,.22); border-radius: 10px; background: rgba(91,60,245,.07); }
.membership-entitlement-box > strong { display: block; margin-bottom: 10px; color: #e7e1ff; font-size: 11px; }
.admin-toggle-field { display: flex; align-items: center; gap: 7px; color: #c5baff; font-size: 10px; }
.admin-toggle-field input { accent-color: #7157ff; }
.admin-help-text { display: block; margin-top: 8px; color: #8e879b; font-size: 8px; line-height: 1.5; }
.table-link { border: 0; padding: 0; background: transparent; color: #83aaff; font-size: 8px; white-space: nowrap; }
.table-link.danger { color: #ff7d8d; }
.status-pill.yellow { color: #ffd265; background: rgba(255,194,53,.15); }
.admin-large-textarea { width: 100%; min-height: 76px; resize: vertical; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 9px; outline: 0; background: #0d0c16; color: #fff; font-size: 10px; line-height: 1.45; }
.special-promoter-rule { margin-top: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #0d0c16; }
.special-promoter-rule-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 8px; }
.special-promoter-rule-head input:not([type="checkbox"]) { width: 100%; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; padding: 7px; outline: 0; background: #171524; color: #fff; font-size: 10px; }
.special-promoter-enabled { display: flex; align-items: center; gap: 4px; color: #bdb5c8; font-size: 9px; white-space: nowrap; }
.special-promoter-enabled small { display: block; margin-right: 2px; color: #aaa2b6; font-size: 8px; }
.special-promoter-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 9px; color: #aaa2b6; font-size: 9px; }
.special-promoter-options label { display: flex; align-items: center; gap: 4px; }
.special-promoter-options input, .special-promoter-enabled input { accent-color: #7b5cff; }
.marketing-tags-field { grid-column: 1 / -1; }
.marketing-tag-row { display: flex; gap: 7px; margin-top: 6px; }
.marketing-tag-row input { flex: 1; min-width: 0; }
.marketing-tag-row button { width: 30px; border: 0; border-radius: 7px; background: rgba(255,255,255,.08); color: #aaa2b6; font-size: 16px; }
.marketing-tags-field > .outline-button { width: auto; margin-top: 7px; padding: 6px 9px; font-size: 9px; }
.admin-modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(3,2,8,.72); backdrop-filter: blur(5px); }
.admin-modal { width: min(390px, 100%); max-height: 90vh; overflow: auto; padding: 18px; border: 1px solid rgba(132,108,255,.35); border-radius: 16px; background: #171524; box-shadow: 0 25px 80px rgba(0,0,0,.5); }
.admin-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-modal-head strong { display: block; font-size: 15px; }
.admin-modal-head span { display: block; margin-top: 5px; color: #8e879b; font-size: 9px; }
.admin-modal-head button { border: 0; padding: 0; background: transparent; color: #aaa1b3; font-size: 26px; line-height: 20px; }
.admin-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.admin-modal-grid label { display: block; min-width: 0; color: #aaa2b6; font-size: 9px; }
.admin-modal-grid label small { display: block; margin-bottom: 5px; }
.admin-modal-grid input, .admin-modal-grid select, .admin-modal-grid textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 9px; outline: 0; background: #0d0c16; color: #fff; font: inherit; font-size: 10px; }
.admin-modal-grid textarea { min-height: 76px; resize: vertical; }
.coze-edit-modal { width: min(520px,100%); }
.admin-modal .admin-field-wide { margin-top: 11px; }
.admin-modal-grid .admin-field-wide { grid-column: 1 / -1; }
.admin-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.admin-modal-foot .outline-button { width: auto; margin: 0; padding: 9px 13px; border-style: solid; }
.admin-modal-foot .outline-button.danger { border-color: rgba(255,95,113,.35); color: #ff8290; }
.admin-modal-foot .primary-small { padding: 9px 13px; }
.distributor-edit-modal { width: min(560px, 100%); }
.distributor-edit-modal .admin-modal-grid label.admin-toggle-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #e8e4f3;
}
.distributor-edit-modal .admin-modal-grid label.admin-toggle-field input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
}
.admin-generated-field { display: grid; align-content: center; gap: 6px; min-height: 57px; padding: 9px; border: 1px dashed rgba(132,108,255,.35); border-radius: 8px; background: rgba(91,60,245,.07); }
.admin-generated-field small { color: #aaa2b6; font-size: 9px; }
.admin-generated-field strong { color: #bdb3ff; font-size: 10px; }
.distributor-detail-modal { width: min(620px, 100%); }
.distributor-detail-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.distributor-detail-metrics > div { min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #0d0c16; }
.distributor-detail-metrics small, .distributor-detail-metrics strong { display: block; }
.distributor-detail-metrics small { color: #8e879b; font-size: 8px; }
.distributor-detail-metrics strong { margin-top: 5px; overflow-wrap: anywhere; color: #f2eef9; font-size: 11px; }
.distributor-qr-preview { display: grid; justify-items: center; gap: 8px; margin-top: 12px; padding: 13px; border: 1px solid rgba(132,108,255,.22); border-radius: 8px; background: rgba(91,60,245,.07); }
.distributor-qr-preview strong { font-size: 11px; }
.distributor-qr-preview img { width: 150px; height: 150px; border-radius: 6px; background: #fff; }
.distributor-qr-preview small { max-width: 100%; overflow-wrap: anywhere; color: #8e879b; font-size: 8px; }
.payout-review-modal { width: min(720px, 100%); }
.payout-review-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(190px, .65fr); gap: 14px; margin-top: 14px; }
.payout-review-note { display: grid; gap: 6px; margin-top: 10px; padding: 11px; border-left: 2px solid #5a8dff; background: rgba(61,108,255,.08); }
.payout-review-note strong { font-size: 10px; }
.payout-review-note span { color: #9e96aa; font-size: 9px; line-height: 1.55; }
.payout-review-qr { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 12px; border: 1px solid rgba(132,108,255,.22); border-radius: 9px; background: #0d0c16; text-align: center; }
.payout-review-qr strong { font-size: 11px; }
.payout-review-qr img, .payout-qr-missing { width: 180px; height: 180px; border-radius: 7px; background: #fff; object-fit: contain; }
.payout-qr-missing { display: grid; place-items: center; color: #777082; font-size: 10px; }
.payout-review-qr small { color: #8e879b; font-size: 8px; line-height: 1.5; }
.block-list { display: grid; gap: 8px; margin-top: 12px; }
.block-item { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: #171524; }
.drag { color: #756f83; font-size: 18px; }
.block-item span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.block-item b { font-size: 13px; font-weight: 600; }
.block-item small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-item em { padding: 4px 7px; border-radius: 999px; background: rgba(72, 221, 176, .1); color: #6ee4bd; font-size: 10px; font-style: normal; }
.outline-button { width: 100%; margin-top: 14px; padding: 11px; border: 1px dashed rgba(133, 114, 255, .42); border-radius: 11px; background: transparent; color: #bcb2ff; font-size: 12px; }
.outline-button:hover { background: rgba(111, 83, 239, .1); }
.editor-footer { gap: 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.editor-footer span { line-height: 1.45; }
.primary-small, .stage-actions button { border: 0; border-radius: 9px; padding: 9px 12px; background: linear-gradient(100deg, var(--violet), var(--blue)); color: #fff; font-size: 12px; white-space: nowrap; }

.preview-stage { flex: 1; min-width: 680px; display: flex; flex-direction: column; align-items: center; padding: 34px 40px; }
.stage-toolbar { width: min(760px, 100%); color: #beb7cd; }
.stage-toolbar strong { display: block; margin-top: 8px; color: #f4f1ff; font-size: 16px; }
.stage-actions { gap: 16px; color: var(--muted); font-size: 11px; }
.stage-actions button { background: #201b36; color: #cfc5fa; }
.device-shadow { margin-top: 28px; padding: 11px; border-radius: 40px; background: linear-gradient(135deg, #30234f, #0b1230); box-shadow: 0 35px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.device { position: relative; width: 390px; height: 844px; overflow: hidden; border: 5px solid #11111b; border-radius: 34px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.device-status { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: #f8f7ff; font-size: 11px; font-weight: 600; background: rgba(8, 6, 18, .48); }
#phone-app { position: relative; height: 100%; overflow: auto; scrollbar-width: none; }
#phone-app::-webkit-scrollbar { display: none; }
.device-home-indicator { position: absolute; z-index: 20; left: 50%; bottom: 7px; width: 102px; height: 4px; transform: translateX(-50%); border-radius: 99px; background: rgba(255,255,255,.66); }
.stage-note { margin-top: 22px; color: #807a8d; font-size: 12px; }

.phone-page { min-height: 100%; padding: 55px 15px 92px; background: radial-gradient(circle at 90% 5%, rgba(65,63,169,.3), transparent 32%), #080612; }
.phone-topbar { display: flex; align-items: center; justify-content: space-between; height: 38px; margin-bottom: 16px; }
.phone-brand { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.phone-brand b { margin-right: 2px; color: #9b83ff; font-size: 18px; }
.phone-icon { color: #a7a0b7; font-size: 24px; }
.phone-banner { position: relative; height: 183px; overflow: hidden; padding: 26px 24px; border-radius: 19px; background: linear-gradient(120deg, #28135f, #43219a 48%, #126bb6); }
.phone-banner.has-image { display: grid; place-items: center; padding: 0; background: #080612; cursor: grab; touch-action: pan-y; user-select: none; }
.phone-banner.has-image:active { cursor: grabbing; }
.phone-banner.has-image::after { display: none; }
.phone-banner-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.phone-banner.is-empty { display: grid; place-items: center; padding: 0; border: 1px dashed rgba(128,103,255,.42); background: #12101e; }
.phone-banner.is-empty::after { display: none; }
.phone-banner-empty { color: #8e879b; font-size: 11px; }
.phone-banner.blue { background: linear-gradient(120deg, #072e47, #0f5798 58%, #3935b4); }
.phone-banner.pink { background: linear-gradient(120deg, #3d155d, #922d96 55%, #dc4c93); }
.phone-banner::after { content: ""; position: absolute; right: -42px; bottom: -54px; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; box-shadow: 0 0 42px rgba(104,184,255,.55); }
.phone-kicker { position: relative; z-index: 1; color: #d7d1ff; font-size: 8px; letter-spacing: 1.6px; }
.phone-banner h2 { position: relative; z-index: 1; max-width: 210px; margin: 16px 0 0; font-size: 27px; line-height: 1.18; }
.phone-banner p { position: relative; z-index: 1; max-width: 220px; margin: 10px 0 0; color: rgba(255,255,255,.75); font-size: 11px; }
.phone-orbit { position: absolute; right: 44px; bottom: 38px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ddfbff, #638bff 48%, #7134ea 70%, transparent 72%); box-shadow: 0 0 28px rgba(116,181,255,.8); }
.phone-dots { display: flex; gap: 5px; margin: 10px 0 0 4px; }
.phone-dots i { width: 17px; height: 3px; border-radius: 5px; background: #4d4660; }
.phone-dots i.active { background: #fff; }
.phone-section { margin-top: 20px; }
.phone-section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.phone-section-head h3 { margin: 0; color: #988fa9; font-size: 10px; font-weight: 400; }
.phone-section-head span { color: #988fa9; font-size: 10px; }
.phone-section.case-section { margin-top: 10px; }
.phone-entry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone-entry { position: relative; min-height: 88px; overflow: hidden; padding: 13px 14px; border: 1px solid rgba(137,110,255,.25); border-radius: 14px; background: linear-gradient(145deg, #25184a, #14162f); }
.phone-entry.green { background: linear-gradient(145deg, #133e48, #112335); border-color: rgba(81,217,208,.23); }
.phone-entry strong { display: block; font-size: 15px; }
.phone-entry small { display: block; margin-top: 7px; color: #a8a0b8; font-size: 10px; line-height: 1.4; }
.phone-entry b { position: absolute; right: 12px; bottom: 8px; color: #87a9ff; font-size: 19px; }
.phone-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.phone-tool { padding: 10px 14px; border: 1px solid rgba(98,186,255,.18); border-radius: 13px; background: #14182e; }
.phone-tool i { display: block; width: 24px; height: 24px; margin-bottom: 7px; border-radius: 8px; background: linear-gradient(135deg, #5b3cf5, #42b9ff); color: #fff; font-size: 10px; font-style: normal; line-height: 24px; text-align: center; }
.phone-tool.cyan i { background: linear-gradient(135deg, #00b9c8, #59e2b2); }
.phone-tool strong { font-size: 13px; }
.phone-tool small { display: block; margin-top: 4px; color: #938ca1; font-size: 9px; }
.phone-digital { position: relative; display: block; width: 100%; overflow: hidden; padding: 17px; border: 1px solid rgba(203,119,255,.32); border-radius: 14px; background: linear-gradient(104deg, #271351, #371d79 54%, #123d9b); text-align: left; }
.phone-digital::after { content: "AI"; position: absolute; right: 15px; bottom: -17px; color: rgba(255,255,255,.08); font-size: 63px; font-weight: 800; }
.phone-digital small, .phone-digital strong, .phone-digital p { position: relative; z-index: 1; display: block; }
.phone-digital small { color: #c9aaff; font-size: 9px; }
.phone-digital strong { margin-top: 6px; font-size: 17px; }
.phone-digital p { margin: 5px 0 0; color: #c4bcd7; font-size: 10px; }
.phone-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.case-filter-row { display: flex; gap: 6px; margin: -2px 0 10px; overflow-x: auto; scrollbar-width: none; }
.case-filter-row::-webkit-scrollbar { display: none; }
.case-filter { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: 6px 11px; background: transparent; color: #91899f; font-size: 9px; }
.case-filter.active { border-color: #6c5dff; background: rgba(105,83,255,.2); color: #e8e1ff; }
.phone-case { display: block; width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: #171523; text-align: left; }
.phone-case-cover { position: relative; display: flex; min-height: 132px; align-items: flex-end; padding: 13px; box-sizing: border-box; background: linear-gradient(145deg, #163d70, #211c61 55%, #0d1324); }
.phone-case-cover.pink { height: 164px; background: linear-gradient(145deg, #731d88, #de4c9a 56%, #36176b); }
.phone-case-cover.green { height: 150px; background: linear-gradient(145deg, #155c55, #1c9c8a 52%, #0a2838); }
.phone-case-cover.orange { height: 118px; background: linear-gradient(145deg, #9a4428, #c9893b 54%, #512b36); }
.phone-case-cover.has-media { height: auto; min-height: 0; padding: 0; align-items: stretch; background: #11101b; }
.phone-case-cover.media-video.has-media { aspect-ratio: 3 / 4; }
.phone-case-cover.has-media img { height: auto; min-height: 0; }
.phone-case-cover.has-media video { width: 100%; height: 100%; min-height: 0; object-fit: cover; pointer-events: none; }
.case-overlay-title { position: absolute; right: 10px; bottom: 9px; left: 10px; color: #fff; font-size: 12px; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.phone-case-cover small { display: none; }
.case-cover-placeholder { display: block; margin-bottom: 3px; font-size: 13px; }
.play { position: absolute; top: 50%; left: 50%; width: 33px; height: 33px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(0,0,0,.27); color: #fff; font-size: 13px; line-height: 31px; text-align: center; }
.phone-case-body { display: none; }
.phone-nav { position: fixed; z-index: 9; bottom: 0; width: 380px; display: flex; justify-content: space-around; padding: 9px 8px 19px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(9,8,19,.96); }
.phone-nav button { border: 0; background: transparent; color: #777389; font-size: 12px; }
.phone-nav button b { display: block; margin-bottom: 4px; color: inherit; font-size: 21px; font-weight: 400; }
.phone-nav button.active { color: #fff; }
.phone-nav button.active b { color: #9582ff; }
.phone-module { padding: 16px 12px; border: 1px solid rgba(126,110,221,.2); border-radius: 15px; background: linear-gradient(145deg, rgba(30,25,55,.95), rgba(17,17,37,.92)); }
.phone-module + .phone-module { margin-top: 12px; }
.phone-module h3 { margin: 0; font-size: 16px; }
.phone-module p { margin: 5px 0 12px; color: #938da8; font-size: 10px; }
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px 4px; }
.module-cell { text-align: center; }
.module-cell i { display: block; width: 32px; height: 32px; margin: 0 auto 6px; border: 1px solid rgba(120,172,255,.32); border-radius: 10px; background: linear-gradient(140deg, rgba(93,71,222,.46), rgba(24,143,194,.3)); color: #d0caff; font-size: 10px; font-style: normal; line-height: 32px; }
.module-cell strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.module-cell small { display: block; margin-top: 3px; overflow: hidden; color: #888298; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.learn-card { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; }
.learn-cover { height: 92px; padding: 11px; background: linear-gradient(145deg, #14496a, #24205f); }
.learn-cover.pink { height: 128px; background: linear-gradient(145deg, #742a79, #cb4d91); }
.learn-cover.green { height: 108px; background: linear-gradient(145deg, #155c5a, #182f4c); }
.learn-cover.orange { height: 118px; background: linear-gradient(145deg, #833a2c, #b78543); }
.learn-cover strong { font-size: 12px; }
.learn-body { padding: 9px; }
.learn-body strong { display: block; font-size: 10px; line-height: 1.4; }
.learn-body small { display: block; margin-top: 6px; color: #888298; font-size: 8px; }
.mine-card { padding: 17px; border: 1px solid rgba(134,106,255,.18); border-radius: 16px; background: linear-gradient(145deg, #1d173b, #12172f); }
.mine-user { display: flex; align-items: center; }
.mine-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #b476ff, #3c84ff); color: #fff; font-size: 18px; font-weight: 700; line-height: 46px; text-align: center; }
.mine-user div { margin-left: 10px; }
.mine-user strong { display: block; font-size: 15px; }
.mine-user small { display: block; margin-top: 4px; color: #958da6; font-size: 10px; }
.mine-balance { display: flex; align-items: end; justify-content: space-between; margin-top: 17px; }
.mine-balance small { display: block; color: #9991aa; font-size: 10px; }
.mine-balance strong { display: block; margin-top: 4px; font-size: 30px; }
.mine-balance button { border: 0; border-radius: 9px; padding: 9px 13px; background: linear-gradient(100deg,#a316ff,#276cff); color: #fff; font-size: 11px; }
.mine-section-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 1px 9px; }
.mine-section-head strong { font-size: 15px; }
.mine-section-head button { border: 0; padding: 0; background: transparent; color: #9d92ff; font-size: 11px; }
.mine-section-head.asset-center-heading { margin-top: 18px; margin-bottom: 8px; }
.mine-section-head.asset-center-heading span { color: #8e879b; font-size: 10px; }
.asset-center-entry { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(91,156,255,.24); border-radius: 13px; background: linear-gradient(110deg,rgba(46,46,116,.7),rgba(19,35,67,.84)); color: #fff; text-align: left; }
.asset-center-entry-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#2dd9c2,#426bff); color: #fff; font-size: 12px; font-weight: 700; }
.asset-center-entry span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.asset-center-entry strong { font-size: 12px; }
.asset-center-entry small { color: #b6b0c8; font-size: 9px; }
.asset-center-entry > b { color: #a99cff; font-size: 19px; font-weight: 400; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.stat { padding: 15px; border-radius: 13px; background: #171523; }
.stat strong { display: block; color: #8e9cff; font-size: 28px; }
.stat small { display: block; margin-top: 5px; color: #aaa3b8; font-size: 11px; }
.task-list { margin-top: 12px; padding: 7px 15px; border-radius: 15px; background: #171523; }
.task { display: flex; width: 100%; align-items: center; gap: 10px; padding: 13px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; color: #fff; text-align: left; }
.task:last-child { border-bottom: 0; }
.task-icon { width: 32px; height: 32px; border-radius: 9px; background: rgba(102,82,229,.2); color: #b1a0ff; font-size: 12px; line-height: 32px; text-align: center; }
.task span { font-size: 12px; }
.task b { margin-left: auto; color: #9d92ff; font-size: 13px; }
.task b.success { color: #4de0a8; font-size: 10px; }
.stat { width: 100%; border: 0; color: #fff; text-align: left; }
.recharge-flow-page, .works-flow-page, .simple-list-flow-page, .redeem-flow-page, .service-flow-page { padding-bottom: 30px; }
.recharge-panel-preview, .notice-panel-preview, .works-filter-preview, .redeem-panel-preview { border: 1px solid rgba(126,110,221,.18); border-radius: 16px; background: #171523; }
.recharge-head-preview { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.recharge-head-preview strong { font-size: 17px; }
.recharge-head-preview button { border: 0; padding: 0; background: transparent; color: #a59aff; font-size: 10px; }
.recharge-plans { display: flex; gap: 9px; overflow-x: auto; padding: 17px 16px 20px; scrollbar-width: none; }
.recharge-plans::-webkit-scrollbar { display: none; }
.recharge-plan { flex: 0 0 116px; height: 190px; padding: 18px 8px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #12101c; color: #fff; text-align: center; }
.recharge-plan.featured { border-color: #f0c744; background: linear-gradient(145deg,rgba(97,74,28,.4),#171523); }
.recharge-plan.selected { border-color: #8e75ff; box-shadow: 0 0 0 2px rgba(142,117,255,.18); }
.recharge-plan strong { display: block; font-size: 14px; }
.recharge-plan b { display: block; margin-top: 14px; font-size: 22px; }
.recharge-plan b small { margin-right: 2px; font-size: 11px; font-weight: 400; }
.recharge-plan b em { color: #aaa2b4; font-size: 10px; font-style: normal; font-weight: 400; }
.recharge-plan span { display: block; margin-top: 12px; border-radius: 99px; background: rgba(255,255,255,.06); color: #aaa2b4; font-size: 8px; line-height: 23px; white-space: nowrap; }
.recharge-plan.featured span { color: #e4c579; background: rgba(240,199,68,.1); }
.recharge-tags { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; margin-top: 9px; }
.recharge-tags span { display: block; margin: 0; padding: 0; color: #b8a7ff; font-size: 8px; line-height: 17px; }
.credit-recharge-plan > b { color: #b5b0bd; font-size: 18px; font-weight: 400; }
.credit-recharge-plan .credit-gift { display: block; margin-top: 8px; border: 0; border-radius: 0; background: transparent; color: #ffb14a; font-size: 9px; line-height: 18px; }
.credit-recharge-plan > span { margin-top: 10px; background: transparent; color: #c6c0ce; }
.credit-recharge-plan > em { display: block; color: #56a8ff; font-size: 21px; font-style: normal; font-weight: 700; }
.notice-panel-preview { margin-top: 14px; padding: 16px; }
.notice-panel-preview > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.notice-panel-preview strong { font-size: 15px; }
.notice-panel-preview span { color: #a49cae; font-size: 10px; }
.notice-panel-preview p { margin: 9px 0 0; color: #aaa2b4; font-size: 9px; line-height: 1.6; }
.recharge-buy { margin-top: 14px; }
.works-filter-preview { padding: 16px; }
.works-filter-preview > strong { display: block; margin-bottom: 11px; font-size: 15px; }
.work-filter-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.work-filter-row::-webkit-scrollbar { display: none; }
.work-filter { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: 8px 15px; background: transparent; color: #9890a4; font-size: 11px; }
.work-filter.active { border-color: #6c5dff; background: linear-gradient(100deg,#5a25b9,#2457db); color: #fff; }
.works-grid-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; align-items: start; }
.work-record { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: #171523; color: #fff; text-align: left; }
.work-record-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.work-cover-preview { position: relative; height: 145px; padding: 12px; background: linear-gradient(145deg,#1c4c86,#2b236a); }
.work-cover-preview.purple { background: linear-gradient(145deg,#642a97,#253e9d); }
.work-cover-preview.green { background: linear-gradient(145deg,#17645d,#1e9b87); }
.work-cover-preview.red { background: linear-gradient(145deg,#722942,#39214f); }
.work-cover-preview strong { font-size: 12px; }
.work-cover-preview em { position: absolute; bottom: 12px; left: 12px; color: rgba(255,255,255,.78); font-size: 9px; font-style: normal; }
.work-check-preview { position: absolute; top: 10px; right: 10px; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: rgba(80,87,97,.85); color: #43a0ff; font-size: 15px; }
.work-record-copy { min-height: 41px; padding: 10px 35px 10px 10px; }
.work-record-copy strong { display: block; font-size: 10px; }
.work-record-copy small { display: block; margin-top: 6px; color: #8e879a; font-size: 8px; }
.work-record-delete { position: absolute; right: 6px; bottom: 6px; display: grid; width: 26px; height: 26px; min-height: 0; padding: 0; place-items: center; border: 0; border-radius: 6px; background: rgba(255,92,114,.1); color: #ff7185; font-size: 12px; line-height: 1; }
.work-record-title-preview { margin: 5px 0; font-size: 14px; }
.work-record-title-preview.result { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.work-record-title-preview.result h3 { margin: 0; font-size: 16px; }
.work-record-title-preview.result button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: rgba(255,255,255,.06); color: #a99aff; font-size: 10px; }
.work-input-list-preview { margin: 8px 0 0; }
.work-input-item-preview { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.work-input-item-preview header { display: flex; align-items: center; justify-content: space-between; }
.work-input-item-preview header strong { font-size: 13px; }
.work-input-item-preview header button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: rgba(255,255,255,.06); color: #a99aff; font-size: 10px; }
.work-input-item-preview p { margin: 8px 0 0; color: #b7b0c3; font-size: 14px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; }
.work-detail-flow-page .work-input-item-preview > p { font-size: 14px; }
.work-input-file-preview { display: flex; min-width: 0; align-items: center; gap: 7px; }
.work-input-file-preview span { flex: 0 0 auto; padding: 3px 6px; border-radius: 4px; background: rgba(91,158,255,.12); color: #70aaff; font-size: 10px; font-weight: 500; }
.work-input-file-preview b { overflow: hidden; color: #b7b0c3; font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.work-input-empty-preview { padding: 15px 0; color: #928a9d; font-size: 11px; }
.work-input-image-grid-preview { display: grid; grid-template-columns: repeat(3,76px); gap: 7px; margin-top: 9px; }
.work-input-image-preview { display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #11101b; cursor: zoom-in; }
.work-input-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-result-media-preview { display: grid; gap: 14px; }
.work-result-media-preview.image-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.work-result-media-item-preview { min-width: 0; }
.work-result-media-item-preview.video, .work-result-media-item-preview.link { grid-column: 1 / -1; }
.work-result-media-preview video, .work-result-media-preview img { display: block; width: 100%; max-height: 470px; object-fit: contain; border-radius: 10px; background: #05050a; }
.work-result-media-preview.image-grid .work-result-media-item-preview.image img { height: 190px; object-fit: cover; }
.work-result-image-preview { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: #05050a; cursor: zoom-in; }
.work-result-image-preview span { position: absolute; right: 10px; bottom: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(5,5,10,.7); color: #fff; font-size: 8px; }
.work-result-actions-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.work-result-actions-preview button { min-height: 30px; border: 1px solid rgba(112,170,255,.3); border-radius: 7px; background: rgba(91,158,255,.08); color: #70aaff; font-size: 9px; }
.work-result-actions-preview button.primary { border: 0; background: linear-gradient(100deg,#9f16ff,#167cff); color: #fff; }
.task-submit-overlay { position: absolute; z-index: 60; inset: 0; display: flex; box-sizing: border-box; align-items: center; justify-content: center; flex-direction: column; padding: 20px; background: rgba(5,5,10,.72); backdrop-filter: blur(7px); }
.task-submit-dialog { width: 100%; padding: 27px 22px 21px; border-radius: 16px; background: #fff; color: #171721; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.32); }
.task-submit-dialog > strong { display: block; font-size: 20px; font-weight: 600; }
.task-submit-dialog > p { margin: 13px 0 0; color: #777783; font-size: 13px; line-height: 1.65; }
.task-submit-estimate { display: inline-block; margin-top: 10px; padding: 6px 11px; border-radius: 99px; background: #eef4ff; color: #2868dc; font-size: 11px; }
.task-submit-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 21px; }
.task-submit-dialog button { min-height: 44px; border: 0; border-radius: 10px; background: #f1f1f4; color: #34343d; font-size: 14px; }
.task-submit-dialog button.primary { background: linear-gradient(100deg,#0878f8,#6744ee); color: #fff; box-shadow: 0 7px 14px rgba(61,96,239,.24); }
.task-submit-close { display: grid; width: 38px; height: 38px; min-height: 0; margin-top: 22px; place-items: center; border: 0; background: transparent; color: #fff; font-size: 32px; font-weight: 200; line-height: 1; }
.credit-freeze-overlay { position: absolute; z-index: 61; inset: 0; display: flex; box-sizing: border-box; align-items: center; justify-content: center; flex-direction: column; padding: 20px; background: rgba(5,5,10,.76); backdrop-filter: blur(7px); }
.credit-freeze-dialog-preview { width: 100%; box-sizing: border-box; padding: 24px 20px 20px; border-radius: 16px; background: #fff; color: #171721; }
.credit-freeze-dialog-preview > strong { display: block; font-size: 20px; text-align: center; }
.credit-freeze-amount-preview { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 12px 13px; border-radius: 9px; background: #eef4ff; color: #4f5565; font-size: 12px; }
.credit-freeze-amount-preview b { color: #2868dc; font-size: 17px; }
.credit-freeze-dialog-preview > p { margin: 12px 0 0; color: #656574; font-size: 12px; line-height: 1.65; }
.credit-freeze-dialog-preview > button { width: 100%; min-height: 44px; margin-top: 17px; border: 0; border-radius: 10px; background: linear-gradient(100deg,#0878f8,#6744ee); color: #fff; font-size: 14px; }
.credit-freeze-dialog-preview.insufficient .credit-freeze-amount-preview { background: #fff0f3; }
.credit-freeze-dialog-preview.insufficient .credit-freeze-amount-preview b { color: #e54863; }
.membership-required-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.credit-freeze-dialog-preview .membership-required-actions button { min-height: 42px; margin: 0; border: 1px solid #d9d5e7; border-radius: 10px; background: #fff; color: #51496c; font-size: 13px; }
.credit-freeze-dialog-preview .membership-required-actions button.primary { border-color: transparent; background: linear-gradient(100deg,#a613ff,#0878f8); color: #fff; }
.credit-freeze-close-preview { display: grid; width: 38px; height: 38px; min-height: 0; margin-top: 21px; place-items: center; border: 0; background: transparent; color: #fff; font-size: 32px; font-weight: 200; line-height: 1; }
.work-result-error-preview, .work-result-link-preview { margin-top: 12px; padding: 13px; border: 1px solid rgba(126,110,221,.22); border-radius: 10px; background: #171523; }
.work-result-text-preview { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 11px 12px; border: 0; border-radius: 4px 12px 12px; background: #1a1727; }
.work-result-plain-preview { margin: 0; color: #f4f1fa; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.work-result-error-preview p, .work-result-link-preview p { overflow: auto; max-height: 420px; margin: 0; color: #f4f1fa; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.work-continue-preview { width: 100%; margin-top: 15px; font-size: 13px; }
.work-detail-flow-page .flow-topbar strong { max-width: 260px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.work-media-preview-overlay { position: absolute; z-index: 70; inset: 0; display: grid; padding: 42px 14px 24px; place-items: center; background: rgba(2,2,8,.94); }
.work-media-preview-overlay img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.work-media-preview-close { position: absolute; top: 16px; right: 14px; display: grid; width: 32px; height: 32px; min-height: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 24px; line-height: 1; }
.work-result-error-preview { border-color: rgba(255,112,137,.26); }
.work-result-running-preview { display: flex; min-height: 260px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #f4f1fa; text-align: center; }
.work-result-running-preview i { width: 28px; height: 28px; border: 3px solid rgba(112,170,255,.18); border-top-color: #70aaff; border-radius: 50%; animation: work-running-preview-spin .8s linear infinite; }
.work-result-running-preview strong { font-size: 15px; }
.work-result-running-preview span { color: #928a9d; font-size: 11px; }
@keyframes work-running-preview-spin { to { transform: rotate(360deg); } }
.work-result-empty-preview { display: flex; min-height: 260px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #928a9d; font-size: 13px; text-align: center; }
.work-result-empty-preview b { font-size: 28px; font-weight: 300; }
.empty-state-preview { grid-column: 1 / -1; display: flex; min-height: 170px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #928a9d; font-size: 12px; }
.empty-state-preview b { font-size: 27px; font-weight: 300; }
.usage-record-preview { display: flex; align-items: center; justify-content: space-between; min-height: 130px; padding: 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: #171523; }
.usage-record-preview strong { display: block; font-size: 16px; }
.usage-record-preview small { display: block; margin-top: 9px; color: #9690a0; font-size: 9px; }
.usage-record-preview b { color: #ff5966; font-size: 17px; }
.usage-list-end-preview { padding: 28px 0; color: #928a9d; font-size: 12px; text-align: center; }
.simple-list-flow-page > .empty-state-preview { min-height: 300px; }
.redeem-panel-preview { padding: 22px 16px; text-align: center; }
.redeem-success-preview { display: grid; gap: 4px; margin-bottom: 9px; padding: 11px 12px; border: 1px solid rgba(78,214,170,.28); border-radius: 12px; background: rgba(78,214,170,.08); }
.redeem-success-preview strong { color: #67e2b5; font-size: 12px; }
.redeem-success-preview span { color: #aaa6b6; font-size: 9px; line-height: 1.5; }
.redeem-panel-preview > strong { display: block; font-size: 19px; }
.redeem-panel-preview > p { margin: 11px 0 22px; color: #9b94a5; font-size: 11px; }
.redeem-input-row { display: flex; gap: 8px; align-items: center; }
.redeem-input-row input { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 15px 12px; outline: 0; background: #11101b; color: #fff; font-size: 11px; }
.redeem-input-row button { border: 0; border-radius: 12px; padding: 15px 15px; background: linear-gradient(100deg,#147cff,#6443ff); color: #fff; font-size: 11px; }
.record-heading-preview { margin: 24px 2px 0; font-size: 17px; font-weight: 500; }
.redeem-flow-page > .empty-state-preview { min-height: 260px; }
.service-card-preview { margin: 80px 18px 0; padding: 24px 18px 20px; border-radius: 18px; background: #f8f8fb; color: #1d2130; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.qr-pattern-preview { position: relative; width: 190px; height: 190px; margin: 0 auto; background: repeating-linear-gradient(45deg,#15151a 0 4px,#fff 4px 9px), repeating-linear-gradient(-45deg,transparent 0 7px,#15151a 7px 10px); mix-blend-mode: multiply; }
.qr-pattern-preview::before, .qr-pattern-preview::after { content: ""; position: absolute; width: 39px; height: 39px; border: 9px solid #15151a; background: #fff; }
.qr-pattern-preview::before { top: 10px; left: 10px; }
.qr-pattern-preview::after { right: 10px; bottom: 10px; }
.qr-pattern-preview span { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 42px; height: 42px; transform: translate(-50%,-50%); place-items: center; border-radius: 8px; background: #15151a; color: #fff; font-size: 9px; }
.service-card-preview p { margin: 18px 0 0; color: #75798a; font-size: 11px; }
.service-close-preview { display: block; margin: 28px auto 0; border: 0; background: transparent; color: #f8f6ff; font-size: 31px; font-weight: 200; }
.flow-page { min-height: 100%; padding: 55px 15px 28px; background: radial-gradient(circle at 90% 5%, rgba(65,63,169,.3), transparent 32%), #080612; }
.flow-topbar { display: flex; align-items: center; justify-content: space-between; height: 38px; margin-bottom: 14px; }
.flow-back { border: 0; padding: 0 8px 0 0; background: transparent; color: #f4f1ff; font-size: 28px; }
.flow-topbar strong { font-size: 16px; }
.workflow-title-preview { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 7px; }
.workflow-title-preview > strong { overflow: hidden; max-width: 240px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-switch-button-preview { display: grid; width: 27px; height: 27px; min-height: 0; padding: 0; place-items: center; border: 1px solid rgba(116,105,255,.58); border-radius: 50%; background: rgba(80,70,180,.18); color: #a99aff; font-size: 16px; line-height: 1; }
.workflow-switch-overlay { position: absolute; z-index: 80; inset: 0; display: flex; align-items: flex-end; background: rgba(2,1,8,.72); }
.workflow-switch-panel-preview { width: 100%; max-height: 72%; box-sizing: border-box; padding: 8px 15px 22px; border-radius: 20px 20px 0 0; background: #181526; box-shadow: 0 -16px 48px rgba(0,0,0,.42); }
.workflow-switch-panel-preview .sheet-handle { width: 34px; height: 4px; margin: 0 auto 13px; border-radius: 99px; background: #625c73; }
.workflow-switch-panel-preview header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workflow-switch-panel-preview header > span { display: grid; gap: 4px; }
.workflow-switch-panel-preview header strong { color: #f8f6ff; font-size: 16px; }
.workflow-switch-panel-preview header small { color: #8f8999; font-size: 10px; }
.workflow-switch-panel-preview header button { display: grid; width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #242032; color: #bbb4c6; font-size: 20px; }
.workflow-switch-options-preview { display: grid; max-height: 380px; gap: 8px; margin-top: 14px; overflow-y: auto; }
.workflow-switch-option-preview { display: flex; width: 100%; min-height: 64px; box-sizing: border-box; margin: 0; padding: 10px; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #11101b; color: #f7f5ff; text-align: left; }
.workflow-switch-option-preview.selected { border-color: #6257ff; background: rgba(81,70,190,.16); }
.workflow-switch-option-preview > b { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#a313ff,#145dff); color: #fff; font-size: 12px; letter-spacing: 0; }
.workflow-switch-option-preview > span { display: grid; min-width: 0; flex: 1; gap: 4px; }
.workflow-switch-option-preview span strong, .workflow-switch-option-preview span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-switch-option-preview span strong { font-size: 13px; }
.workflow-switch-option-preview span small { color: #8f8999; font-size: 9px; }
.workflow-switch-option-preview > i { color: #8f83ff; font-size: 18px; font-style: normal; }
.flow-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #151320; }
.flow-search span { color: #aaa2b9; font-size: 17px; }
.flow-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 12px; }
.flow-page p { margin: 14px 0 0; color: #a7a0b5; font-size: 9px; }
.flow-filter-row { display: flex; gap: 6px; margin: 13px 0 10px; overflow-x: auto; scrollbar-width: none; }
.flow-filter-row::-webkit-scrollbar { display: none; }
.catalog-config-row label:has(select[data-field="navigationId"]:empty) { display: none; }
.flow-filter { flex: 0 0 auto; padding: 7px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; background: transparent; color: #91899f; font-size: 11px; }
.flow-filter.active { border-color: #6c5dff; background: rgba(105,83,255,.2); color: #e8e1ff; }
.flow-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; align-items: start; }
.flow-column { display: grid; min-width: 0; gap: 8px; }
.agent-chat-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.agent-chat-page .flow-topbar strong { font-size: 17px; }
.agent-chat-opening-card { padding: 14px 15px; border: 1px solid rgba(126,110,221,.24); border-radius: 12px; background: #171523; color: #f4f1fa; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.agent-chat-messages { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 9px; overflow-y: auto; padding: 14px 0; }
.agent-chat-message { align-self: flex-start; max-width: 90%; }
.agent-chat-message > div { padding: 11px 12px; border-radius: 4px 12px 12px; background: #1a1727; color: #f4f1fa; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.agent-chat-message .markdown-body { color: #f4f1fa; white-space: normal; }
.agent-chat-message .markdown-body * { color: inherit; }
.agent-chat-message .markdown-body p { margin: 0 0 10px; color: inherit; font-size: inherit; line-height: inherit; }
.agent-chat-message .markdown-body p:last-child { margin-bottom: 0; }
.agent-chat-message .markdown-body h1,
.agent-chat-message .markdown-body h2,
.agent-chat-message .markdown-body h3,
.agent-chat-message .markdown-body h4,
.agent-chat-message .markdown-body h5,
.agent-chat-message .markdown-body h6 { margin: 13px 0 7px; color: #f4f1fa; font-size: 14px; line-height: 1.5; }
.agent-chat-message .markdown-body h1:first-child,
.agent-chat-message .markdown-body h2:first-child,
.agent-chat-message .markdown-body h3:first-child { margin-top: 0; }
.agent-chat-message .markdown-body ul,
.agent-chat-message .markdown-body ol { margin: 6px 0 8px; padding-left: 18px; }
.agent-chat-message .markdown-body li { margin: 3px 0; }
.agent-chat-message .markdown-body hr { height: 1px; margin: 10px 0; border: 0; background: rgba(255,255,255,.12); }
.agent-chat-message .markdown-body blockquote { margin: 8px 0; padding-left: 8px; border-left: 2px solid #8068ee; color: #f4f1fa; }
.agent-chat-message .markdown-body code { padding: 1px 3px; border-radius: 3px; background: rgba(255,255,255,.08); color: #f4f1fa; }
.agent-chat-message .markdown-body pre { overflow-x: auto; margin: 8px 0; padding: 8px; border-radius: 6px; background: #0e0c16; }
.agent-chat-message .markdown-body pre code { padding: 0; background: transparent; }
.agent-chat-message.is-user { align-self: flex-end; }
.agent-chat-message.is-user > div { border-radius: 12px 4px 12px 12px; background: linear-gradient(135deg,#6943d7,#245fca); }
.agent-chat-message.is-streaming > div::after { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: #9c82ff; content: ''; vertical-align: -2px; animation: agent-chat-caret .8s steps(1) infinite; }
.agent-chat-message.is-loading { display: flex; width: auto; height: 28px; align-items: center; padding: 0 4px; background: transparent; }
.agent-chat-typing { display: flex; gap: 5px; align-items: center; }
.agent-chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: #bcb7c8; animation: agent-chat-dot 1.15s ease-in-out infinite; }
.agent-chat-typing i:nth-child(2) { animation-delay: .16s; }
.agent-chat-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes agent-chat-dot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes agent-chat-caret { 50% { opacity: 0; } }
.agent-chat-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; padding: 7px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #151320; }
.agent-chat-composer textarea { width: 100%; height: 34px; min-height: 34px; max-height: 88px; box-sizing: border-box; overflow-y: auto; resize: none; border: 0; padding: 6px 2px; outline: 0; background: transparent; color: #f4f1fa; font: inherit; font-size: 13px; line-height: 20px; }
.agent-chat-composer button { height: 34px; border: 0; border-radius: 9px; padding: 0 13px; background: linear-gradient(100deg,#842cff,#167cff); color: #fff; font-size: 12px; }
.agent-chat-composer button:disabled { opacity: .45; }
.flow-card { display: block; width: 100%; min-width: 0; max-width: 100%; padding: 15px 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; color: #fff; text-align: center; }
.flow-icon { display: block; width: 28px; height: 28px; margin: 0 auto 10px; border-radius: 50%; background: linear-gradient(135deg,#28e4c4,#306bff); color: #fff; font-size: 14px; font-weight: 800; line-height: 28px; text-align: center; letter-spacing: 0; }
.flow-icon.pink { background: linear-gradient(135deg,#f05bca,#5a52ff); }
.flow-icon.green { background: linear-gradient(135deg,#58dfad,#2d76ff); }
.flow-icon.orange { background: linear-gradient(135deg,#ff9a4a,#dd4f91); }
.flow-card strong { display: block; font-size: 13px; line-height: 1.35; }
.flow-card small { display: block; width: 100%; min-width: 0; margin-top: 7px; overflow: hidden; color: #aaa2b6; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.flow-card footer { display: flex; justify-content: space-between; margin-top: 10px; color: #8f84dd; font-size: 10px; }
.ip-profile-flow-page > p { margin-top: 13px; color: #9f97aa; font-size: 9px; }
.ip-intro-preview { padding: 15px; border: 1px solid rgba(126,110,221,.22); border-radius: 14px; background: linear-gradient(145deg,#241351,#123d80); }
.ip-intro-preview strong { font-size: 14px; }
.ip-intro-preview p { margin: 7px 0 0; color: #c5bdd7; font-size: 9px; line-height: 1.5; }
.ip-section-head-preview { display: flex; align-items: center; justify-content: space-between; margin: 16px 1px 9px; }
.ip-section-head-preview strong { font-size: 14px; }
.ip-section-head-preview button { border: 0; padding: 0; background: transparent; color: #a59aff; font-size: 9px; }
.ip-profile-card-row { position: relative; margin-top: 8px; }
.ip-profile-card-preview { display: flex; align-items: center; width: 100%; min-height: 67px; padding: 13px 55px 13px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; color: #fff; text-align: left; }
.ip-profile-card-preview > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#2be2c7,#316cff); font-size: 11px; }
.ip-profile-card-preview > span { display: flex; flex: 1; flex-direction: column; gap: 4px; margin-left: 9px; }
.ip-profile-card-preview strong { font-size: 11px; }
.ip-profile-card-preview small { color: #aaa2b4; font-size: 8px; }
.ip-profile-card-preview em { color: #6fd8bd; font-size: 8px; font-style: normal; }
.ip-profile-card-preview > i { position: absolute; right: 13px; top: 10px; color: #9d92ff; font-size: 18px; font-style: normal; }
.ip-profile-delete-preview { position: absolute; right: 12px; bottom: 9px; border: 0; padding: 3px 0; background: transparent; color: #ff7387; font-size: 9px; }
.ip-form-preview { display: grid; gap: 10px; margin-top: 15px; }
.ip-field-preview { display: block; }
.ip-field-preview span { display: block; margin-bottom: 6px; color: #d9d3e7; font-size: 11px; font-weight: 600; }
.ip-field-preview textarea { width: 100%; min-height: 56px; border: 1px solid rgba(134,106,255,.22); border-radius: 10px; padding: 10px; outline: 0; resize: vertical; background: #11101b; color: #fff; font: inherit; font-size: 10px; line-height: 1.5; }
.ip-field-preview textarea.is-large { min-height: 82px; }
.profile-reference-preview { display: flex; align-items: center; width: 100%; margin-top: 10px; padding: 10px; border: 1px solid rgba(134,106,255,.35); border-radius: 10px; background: rgba(75,48,150,.2); color: #c9c0e3; text-align: left; }
.profile-reference-preview span { font-size: 9px; }
.profile-reference-preview b { margin-left: auto; color: #a99aff; font-size: 9px; font-weight: 400; }
.profile-reference-preview i { margin-left: 7px; color: #a99aff; font-size: 13px; font-style: normal; }
.digital-flow-page, .copy-flow-page { padding-bottom: 28px; }
.avatar-preview { position: relative; height: 245px; margin: 10px auto 0; overflow: hidden; border: 1px solid rgba(156,128,255,.34); border-radius: 18px; background: linear-gradient(150deg,#dce5e8,#71819c 50%,#202445); }
.avatar-glow { position: absolute; left: 20px; top: 18px; width: 100px; height: 100px; border-radius: 50%; background: rgba(139,99,255,.45); filter: blur(28px); }
.avatar-hair { position: absolute; left: 105px; top: 31px; width: 92px; height: 100px; border-radius: 50% 50% 38% 42%; background: linear-gradient(145deg,#35304d,#131727 75%); }
.avatar-head { position: absolute; left: 114px; top: 46px; width: 72px; height: 94px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 48% 32%,#f5d1bd,#a85e58 74%); }
.avatar-body { position: absolute; left: 48px; right: 48px; bottom: -45px; height: 150px; border-radius: 50% 50% 0 0; background: linear-gradient(135deg,#f8f8f2 0%,#c4cedb 50%,#293450 51%,#121a2e 100%); }
.replace-avatar-preview { display: block; margin: 9px auto 16px; border: 0; border-radius: 99px; padding: 7px 13px; background: #211d2e; color: #c4bade; font-size: 10px; }
.digital-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.digital-mode { padding: 13px 11px; border: 1px solid rgba(127,94,255,.23); border-radius: 13px; background: #1b1827; color: #fff; text-align: left; }
.digital-mode.active { border-color: #8167ff; background: linear-gradient(145deg,#261a4b,#1c2347); }
.digital-mode i { display: block; width: 25px; height: 25px; border-radius: 8px; background: linear-gradient(135deg,#a713ff,#135eff); font-size: 11px; font-style: normal; line-height: 25px; text-align: center; }
.digital-mode strong { display: block; margin-top: 9px; font-size: 11px; }
.digital-mode small { display: block; margin-top: 4px; color: #91899e; font-size: 8px; }
.audio-preview { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 15px; border: 1px dashed rgba(142,120,255,.42); border-radius: 13px; background: rgba(25,20,46,.72); color: #b9b1cc; font-size: 10px; }
.audio-preview b { color: #af92ff; font-size: 25px; }
.audio-preview small { color: #898197; font-size: 8px; }
.preview-primary { width: 100%; margin-top: 15px; border: 0; border-radius: 99px; padding: 12px; background: linear-gradient(100deg,#a715ff,#147cff); color: #fff; font-size: 12px; }
.preview-primary.compact { margin-top: 10px; }
.copy-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 10px; background: #171422; }
.copy-segment button { border: 0; border-radius: 8px; padding: 9px 0; background: transparent; color: #8e879b; font-size: 11px; }
.copy-segment button.active { background: linear-gradient(100deg,#6c25d7,#2457db); color: #fff; }
.copy-link-row { display: flex; gap: 6px; margin-top: 12px; padding: 5px 5px 5px 11px; border: 1px solid rgba(134,106,255,.26); border-radius: 11px; background: #11101b; }
.copy-link-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 9px; }
.copy-link-row button { display: grid; width: 38px; min-width: 38px; height: 29px; padding: 0; place-items: center; border: 0; border-radius: 8px; background: #4d39bb; color: #fff; font-size: 9px; }
.copy-link-row button.is-loading { width: 29px; min-width: 29px; border-radius: 50%; }
.copy-extract-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.38); border-top-color: #fff; border-radius: 50%; animation: copy-extract-spin .75s linear infinite; }
@keyframes copy-extract-spin { to { transform: rotate(360deg); } }
.script-preview-card { position: relative; margin-top: 20px; padding: 11px 11px 27px; border: 1px solid rgba(134,106,255,.22); border-radius: 12px; background: #11101b; }
.script-preview-card textarea { width: 100%; height: 395px; border: 0; outline: 0; resize: none; background: transparent; color: #f5f2ff; font-size: 13px; line-height: 1.65; }
.script-preview-card span { position: absolute; right: 11px; bottom: 9px; color: #898197; font-size: 9px; }
.voice-preview { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 12px; border-radius: 12px; background: #171523; color: #fff; }
.voice-preview b { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#809a9a,#213e4c); font-size: 12px; line-height: 30px; text-align: center; }
.voice-preview b.playing { background: linear-gradient(135deg,#8d24ff,#2468ff); box-shadow: 0 0 14px rgba(92,70,255,.34); }
.voice-preview span { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.voice-preview small { color: #8c8498; font-size: 9px; }
.voice-preview em { margin-left: auto; color: #9e96aa; font-size: 15px; font-style: normal; }
.voice-preview { border: 0; text-align: left; cursor: pointer; }
.copy-flow-page > .preview-primary { font-size: 14px; }
.selected-asset-preview { display: block; margin: -7px auto 10px; color: #8f84a4; font-size: 8px; text-align: center; }
.asset-flow-page > p { margin-top: 14px; color: #9f97aa; font-size: 9px; line-height: 1.5; }
.asset-tabs-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 10px; background: #171422; }
.asset-tabs-preview button { border: 0; border-radius: 8px; padding: 9px 0; background: transparent; color: #8e879b; font-size: 11px; }
.asset-tabs-preview button.active { background: linear-gradient(100deg,#6c25d7,#2457db); color: #fff; }
.asset-grid-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.asset-card-preview { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; color: #fff; text-align: left; }
.asset-avatar-preview { position: relative; height: 138px; overflow: hidden; background: linear-gradient(150deg,#dce5e8,#71819c 50%,#202445); }
.asset-avatar-preview.purple { background: linear-gradient(150deg,#8c78c9,#2b2e68); }
.asset-avatar-preview.green { background: linear-gradient(150deg,#6aada4,#1d4b5d); }
.asset-avatar-preview.orange { background: linear-gradient(150deg,#d7a274,#3b3659); }
.asset-avatar-preview span { position: absolute; top: 34px; left: 50%; width: 38px; height: 52px; transform: translateX(-50%); border-radius: 50%; background: #d59783; box-shadow: 0 -13px 0 9px #28263a; }
.asset-avatar-preview::after { content: ""; position: absolute; right: 18px; bottom: -40px; left: 18px; height: 100px; border-radius: 50% 50% 0 0; background: linear-gradient(135deg,#f6f7f1,#35405b); }
.asset-card-preview > strong, .asset-card-preview > small { display: block; padding: 0 10px; }
.asset-card-preview > strong { margin-top: 9px; font-size: 10px; }
.asset-card-preview > small { margin: 5px 0 10px; color: #91899f; font-size: 8px; }
.asset-library-info { margin-top: 14px; padding: 12px; border: 1px solid rgba(76,153,255,.22); border-radius: 12px; background: rgba(41,91,173,.18); }
.asset-library-info strong, .asset-library-info span { display: block; }
.asset-library-info strong { font-size: 11px; }
.asset-library-info span { margin-top: 5px; color: #aaa9c1; font-size: 8px; line-height: 1.5; }
.asset-mine-toolbar { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.asset-mine-toolbar strong { font-size: 12px; }
.asset-mine-toolbar span { color: #91899f; font-size: 9px; }
.asset-mine-grid { margin-top: 10px; }
.user-asset-card { padding-bottom: 8px; }
.asset-card-select { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; }
.asset-card-select > strong, .asset-card-select > small { display: block; padding: 0 10px; }
.asset-card-select > strong { margin-top: 8px; font-size: 10px; }
.asset-card-select > small { margin-top: 4px; color: #91899f; font-size: 8px; }
.asset-media-preview { height: 112px; overflow: hidden; background: #202036; }
.asset-media-preview img, .asset-media-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.asset-media-preview .asset-avatar-preview { height: 100%; }
.asset-media-preview .asset-avatar-preview em { position: absolute; top: 8px; left: 8px; padding: 3px 6px; border-radius: 5px; background: rgba(16,14,29,.72); color: #fff; font-size: 8px; font-style: normal; }
.asset-card-actions { display: flex; gap: 12px; padding: 0 10px; }
.asset-card-actions .table-link { padding: 0; font-size: 8px; }
.asset-upload-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.asset-upload-trigger { min-height: 92px; margin-top: 10px; cursor: pointer; }
.asset-upload-options .asset-upload-trigger { min-height: 104px; margin-top: 0; }
.asset-upload-toolbar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.asset-upload-toolbar > span { color: #91899f; font-size: 9px; }
.asset-upload-pill { display: flex; align-items: center; gap: 5px; min-width: 82px; justify-content: center; padding: 9px 16px; border: 0; border-radius: 99px; background: linear-gradient(100deg,#6c25d7,#3478f3); color: #fff; }
.asset-upload-pill b { font-size: 18px; font-weight: 300; line-height: 1; }
.asset-upload-pill strong { font-size: 11px; }
.asset-upload-chooser { margin-top: 10px; padding: 10px; border: 1px solid rgba(132,107,255,.48); border-radius: 13px; background: #171523; }
.asset-upload-chooser-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.asset-upload-chooser-head strong { font-size: 12px; }
.asset-upload-chooser-head .table-link { padding: 0; color: #aaa2b6; font-size: 18px; line-height: 1; }
.asset-upload-type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 10px; background: #11101b; }
.asset-upload-type-tabs button { border: 0; border-radius: 8px; padding: 8px 0; background: transparent; color: #91899f; font-size: 10px; }
.asset-upload-type-tabs button.active { background: linear-gradient(100deg,#6c25d7,#3478f3); color: #fff; }
.asset-upload-drop { display: flex; min-height: 142px; align-items: center; justify-content: center; flex-direction: column; width: 100%; margin-top: 10px; border: 1px dashed rgba(132,107,255,.48); border-radius: 12px; background: #11101b; color: #fff; }
.asset-upload-drop b { color: #8e9cff; font-size: 25px; font-weight: 400; }
.asset-upload-drop strong { margin-top: 7px; font-size: 11px; }
.asset-upload-drop small { margin-top: 6px; color: #91899f; font-size: 8px; }
.asset-upload-sheet-backdrop { position: absolute; z-index: 50; inset: 0; display: flex; align-items: flex-end; background: rgba(0,0,0,.58); }
.asset-upload-sheet { width: 100%; max-height: 84%; overflow: auto; padding: 10px 15px 22px; box-sizing: border-box; border-radius: 24px 24px 0 0; background: #171523; box-shadow: 0 -14px 35px rgba(0,0,0,.45); }
.asset-upload-sheet-handle { width: 48px; height: 4px; margin: 0 auto 14px; border-radius: 99px; background: rgba(255,255,255,.22); }
.asset-upload-sheet .asset-upload-chooser-head { margin-bottom: 12px; }
.asset-upload-sheet .asset-upload-type-tabs { margin-top: 0; }
.asset-upload-sheet .asset-upload-drop { min-height: 180px; }
.asset-upload-sheet .asset-pending-panel { margin-bottom: 0; }
.asset-upload-trigger b { width: 30px; height: 30px; font-size: 16px; }
.asset-upload-trigger strong { margin-top: 6px; font-size: 10px; }
.asset-upload-trigger small { margin-top: 3px; font-size: 7px; }
.asset-filter-row { display: flex; gap: 6px; margin-top: 10px; }
.asset-filter-button { flex: 1; padding: 7px 0; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: transparent; color: #91899f; font-size: 9px; }
.asset-filter-button.active { border-color: #7659f7; background: linear-gradient(100deg,#6c25d7,#2457db); color: #fff; }
.asset-file-input { display: none; }
.asset-empty-preview { margin-top: 10px; padding: 24px 14px; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; color: #91899f; font-size: 9px; text-align: center; }
.asset-center-intro, .material-library-intro { margin-top: 10px; padding: 15px; border: 1px solid rgba(126,110,221,.24); border-radius: 14px; background: linear-gradient(145deg,#241351,#123d80); }
.asset-center-intro strong, .material-library-intro strong { font-size: 14px; }
.asset-center-intro p, .material-library-intro p { margin: 7px 0 0; color: #c5bdd7; font-size: 9px; line-height: 1.5; }
.asset-center-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: #171523; text-align: center; }
.asset-center-summary div { min-width: 0; }
.asset-center-summary strong, .asset-center-summary small { display: block; }
.asset-center-summary strong { color: #a99aff; font-size: 16px; }
.asset-center-summary small { margin-top: 4px; color: #91899f; font-size: 8px; }
.asset-center-section-head, .material-library-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 17px 1px 9px; }
.asset-center-section-head strong, .material-library-toolbar strong { font-size: 13px; }
.asset-center-section-head span, .material-library-toolbar span { color: #91899f; font-size: 8px; }
.asset-center-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asset-center-card { position: relative; display: flex; min-height: 104px; flex-direction: column; align-items: flex-start; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; color: #fff; text-align: left; }
.asset-center-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#5f53ff,#268bdb); font-size: 11px; font-weight: 700; }
.asset-center-card.teal .asset-center-icon { background: linear-gradient(135deg,#2bd9c7,#2873a7); }
.asset-center-card.orange .asset-center-icon { background: linear-gradient(135deg,#ffab5c,#dc4f91); }
.asset-center-card.cyan .asset-center-icon { background: linear-gradient(135deg,#32d9de,#3875ff); }
.asset-center-card-copy { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.asset-center-card-copy strong { font-size: 11px; }
.asset-center-card-copy small { color: #aaa2b6; font-size: 8px; line-height: 1.35; }
.asset-center-card em { margin-top: 7px; color: #6fd8bd; font-size: 8px; font-style: normal; }
.asset-center-card > b { position: absolute; right: 11px; bottom: 10px; color: #9d92ff; font-size: 15px; font-weight: 400; }
.asset-center-note { display: flex; gap: 9px; margin-top: 12px; padding: 11px; border: 1px solid rgba(77,214,183,.18); border-radius: 12px; background: rgba(33,99,91,.18); }
.asset-center-note > span { color: #65dfc1; font-size: 16px; }
.asset-center-note p { display: flex; flex: 1; flex-direction: column; gap: 4px; margin: 0; }
.asset-center-note strong { color: #d7fff4; font-size: 9px; }
.asset-center-note small { color: #9bc6bd; font-size: 8px; line-height: 1.4; }
.material-filter-row { margin-top: 0; }
.material-library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.material-library-card { position: relative; overflow: hidden; padding: 0 0 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; color: #fff; text-align: left; }
.material-library-cover { position: relative; display: grid; height: 104px; place-items: center; background: linear-gradient(145deg,#263d87,#5632a2); }
.material-library-card.pink .material-library-cover { background: linear-gradient(145deg,#743573,#cb4d91); }
.material-library-card.green .material-library-cover { background: linear-gradient(145deg,#176466,#1e315a); }
.material-library-card.orange .material-library-cover { background: linear-gradient(145deg,#894529,#b47d42); }
.material-library-cover span { color: rgba(255,255,255,.9); font-size: 27px; font-weight: 800; }
.material-library-cover small { position: absolute; top: 8px; left: 8px; padding: 3px 5px; border-radius: 5px; background: rgba(12,11,22,.6); color: #fff; font-size: 7px; }
.material-library-card > strong, .material-library-card > small { display: block; padding: 0 10px; }
.material-library-card > strong { margin-top: 9px; font-size: 10px; }
.material-library-card > small { margin-top: 4px; color: #91899f; font-size: 8px; }
.material-library-card > em { display: inline-block; margin: 7px 10px 0; color: #6fd8bd; font-size: 8px; font-style: normal; }
.material-upload-button { margin-top: 14px; }
.asset-upload-preview { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 150px; margin-top: 14px; border: 1px dashed rgba(132,107,255,.48); border-radius: 14px; background: #171523; color: #fff; text-align: center; }
.asset-upload-preview b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#762bff,#1d6cff); font-size: 20px; font-weight: 300; }
.asset-upload-preview strong { margin-top: 9px; font-size: 11px; }
.asset-upload-preview small { margin-top: 5px; color: #91899f; font-size: 8px; }
.asset-upload-preview.secondary { min-height: 110px; border-style: solid; }
.asset-pending-panel { margin-top: 10px; padding: 11px; border: 1px solid rgba(132,107,255,.48); border-radius: 12px; background: #171523; }
.asset-pending-form { min-width: 0; }
.asset-pending-form > strong { display: block; font-size: 10px; }
.asset-pending-form label { display: grid; gap: 4px; margin-top: 7px; color: #91899f; font-size: 8px; }
.asset-pending-form input { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; outline: 0; background: #0f0d18; color: #fff; font-size: 9px; }
.asset-pending-form input:focus { border-color: #8064ff; }
.asset-pending-form > small { display: block; margin-top: 6px; color: #91899f; font-size: 7px; line-height: 1.4; }
.asset-pending-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.asset-pending-actions .table-link { padding: 6px 0; font-size: 8px; }
.asset-pending-actions .preview-primary { width: auto; margin-top: 0; padding: 7px 9px; border-radius: 8px; font-size: 8px; }
.voice-options-preview { display: grid; gap: 8px; margin-top: 14px; }
.voice-option-preview { display: flex; align-items: center; width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; color: #fff; text-align: left; }
.voice-option-preview > b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#809a9a,#213e4c); font-size: 11px; }
.voice-option-preview > b.playing { background: linear-gradient(135deg,#8d24ff,#2468ff); box-shadow: 0 0 14px rgba(92,70,255,.34); }
.voice-option-preview > span { display: flex; flex: 1; flex-direction: column; gap: 4px; margin-left: 10px; }
.voice-option-preview strong { font-size: 10px; }
.voice-option-preview small { color: #91899f; font-size: 8px; }
.voice-option-preview > i { color: #9e96aa; font-size: 17px; font-style: normal; }
.voice-upload-options { display: grid; gap: 10px; margin-top: 14px; }
.voice-upload-options .asset-upload-preview { margin-top: 0; min-height: 150px; }
.voice-upload-options .asset-upload-preview.secondary { min-height: 110px; }
.voice-upload-options button.asset-upload-preview { width: 100%; padding: 12px; font-family: inherit; cursor: pointer; }
.voice-upload-options .asset-upload-preview.is-recording { border-color: #ff657d; background: rgba(80,25,43,.34); }
.voice-upload-options .asset-upload-preview.is-recording b { background: #d83b58; }
.voice-upload-options .asset-upload-preview.is-recording small { color: #ff9baa; }
.voice-saved-section-head { display: flex; align-items: center; justify-content: space-between; margin: 17px 1px 9px; }
.voice-saved-section-head strong { font-size: 13px; }
.voice-saved-section-head span { color: #91899f; font-size: 8px; }
.voice-saved-list { display: grid; gap: 8px; margin-top: 12px; }
.voice-saved-card { overflow: hidden; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #171523; }
.voice-saved-main { display: flex; align-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; }
.voice-saved-main > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#809a9a,#213e4c); font-size: 11px; }
.voice-saved-main > b.playing { background: linear-gradient(135deg,#8d24ff,#2468ff); box-shadow: 0 0 14px rgba(92,70,255,.34); }
.voice-saved-main > span { display: flex; flex: 1; flex-direction: column; gap: 4px; margin-left: 10px; }
.voice-saved-main strong { font-size: 10px; }
.voice-saved-main small { color: #91899f; font-size: 8px; }
.voice-saved-actions { display: flex; gap: 12px; margin-top: 9px; padding-left: 44px; }
.voice-saved-actions .table-link { padding: 0; font-size: 8px; }
.voice-pending-panel { margin-top: 12px; padding: 11px; border: 1px solid rgba(132,107,255,.48); border-radius: 12px; background: #171523; }
.voice-pending-panel > strong { display: block; font-size: 10px; }
.voice-pending-panel input { width: 100%; margin-top: 8px; padding: 8px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #0f0d18; color: #fff; font-size: 9px; }
.voice-pending-panel small { display: block; margin-top: 6px; color: #91899f; font-size: 8px; }
.voice-pending-panel > div { display: flex; justify-content: flex-end; gap: 12px; margin-top: 9px; }
.voice-audio-player { display: block; width: 100%; height: 30px; margin-top: 9px; color-scheme: dark; }
.rewrite-sheet { position: absolute; z-index: 40; inset: 0; background: rgba(0,0,0,.58); }
.rewrite-sheet-inner { position: absolute; right: 0; bottom: 0; left: 0; padding: 12px 15px 22px; border-radius: 18px 18px 0 0; background: #1a1727; box-shadow: 0 -18px 42px rgba(0,0,0,.3); }
.sheet-handle { width: 35px; height: 4px; margin: 0 auto 13px; border-radius: 99px; background: #625c73; }
.rewrite-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.rewrite-sheet-head strong { font-size: 15px; }
.rewrite-sheet-head button { border: 0; padding: 0; background: transparent; color: #aaa2b7; font-size: 20px; }
.rewrite-sheet-inner > p { margin: 6px 0 12px; color: #9f97aa; font-size: 9px; }
.rewrite-options { display: grid; gap: 7px; }
.rewrite-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #12101c; color: #fff; text-align: left; }
.rewrite-option.active { border-color: #725aff; background: linear-gradient(100deg,rgba(107,37,215,.33),rgba(36,87,219,.3)); }
.rewrite-option > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: linear-gradient(135deg,#762bff,#1d6cff); font-size: 11px; }
.rewrite-option > span { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.rewrite-option strong { font-size: 10px; }
.rewrite-option small { color: #958da4; font-size: 8px; }
.rewrite-option i { color: transparent; font-size: 12px; font-style: normal; }
.rewrite-option.active i { color: #fff; }
.rewrite-requirement { width: 100%; height: 58px; margin-top: 8px; padding: 9px; border: 1px solid rgba(134,106,255,.35); border-radius: 10px; outline: 0; resize: none; background: #11101b; color: #f5f2ff; font-size: 10px; line-height: 1.45; }
.rewrite-confirm { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; }
.rewrite-confirm:disabled { cursor: wait; opacity: .82; }
.rewrite-loading-spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.38); border-top-color: #fff; border-radius: 50%; animation: copy-extract-spin .75s linear infinite; }
.profile-picker-overlay { position: absolute; z-index: 50; inset: 0; background: rgba(0,0,0,.64); }
.profile-picker-panel { position: absolute; right: 0; bottom: 0; left: 0; max-height: 72%; padding: 12px 15px 21px; border-radius: 18px 18px 0 0; background: #1a1727; box-shadow: 0 -18px 42px rgba(0,0,0,.34); }
.profile-picker-panel > p { margin: 6px 0 12px; color: #9f97aa; font-size: 9px; line-height: 1.45; }
.profile-picker-options { display: grid; max-height: 270px; gap: 7px; overflow-y: auto; }
.profile-picker-option { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 58px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #12101c; color: #fff; text-align: left; }
.profile-picker-option.active { border-color: #725aff; background: linear-gradient(100deg,rgba(107,37,215,.33),rgba(36,87,219,.3)); }
.profile-picker-option > b { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 9px; background: linear-gradient(135deg,#762bff,#1d6cff); font-size: 10px; }
.profile-picker-option > span { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.profile-picker-option strong, .profile-picker-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-picker-option strong { font-size: 10px; }
.profile-picker-option small { color: #958da4; font-size: 8px; }
.profile-picker-option > i { width: 16px; color: #fff; font-size: 12px; font-style: normal; text-align: right; }
.profile-picker-empty-preview { display: grid; min-height: 100px; place-content: center; gap: 5px; border: 1px dashed rgba(134,106,255,.4); border-radius: 11px; text-align: center; }
.profile-picker-empty-preview strong { font-size: 10px; }
.profile-picker-empty-preview small { color: #958da4; font-size: 8px; }
.profile-picker-footer { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin-top: 11px; }
.profile-picker-footer button { width: 100%; min-height: 35px; margin: 0; }
.digital-flow-page, .audio-flow-page { padding-bottom: 24px; }
.digital-flow-page .avatar-preview, .audio-flow-page .avatar-preview { width: 180px; height: 320px; margin-top: 6px; border-radius: 13px; aspect-ratio: 9 / 16; }
.digital-flow-page .avatar-glow, .audio-flow-page .avatar-glow { left: 17px; top: 20px; width: 70px; height: 70px; }
.digital-flow-page .avatar-hair, .audio-flow-page .avatar-hair { left: 55px; top: 43px; width: 72px; height: 103px; }
.digital-flow-page .avatar-head, .audio-flow-page .avatar-head { left: 65px; top: 60px; width: 55px; height: 78px; }
.digital-flow-page .avatar-body, .audio-flow-page .avatar-body { left: 20px; right: 20px; bottom: -52px; height: 170px; }
.selected-avatar-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.digital-flow-page .replace-avatar-preview, .audio-flow-page .replace-avatar-preview { margin-top: 10px; margin-bottom: 14px; }
.driver-list-preview { display: grid; gap: 10px; margin-top: 17px; }
.driver-card-preview { display: flex; align-items: center; width: 100%; min-height: 78px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.04); border-radius: 42px; background: #1c1925; color: #fff; text-align: left; }
.driver-icon-preview { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 47px; height: 47px; border: 1px solid #5d2cff; border-radius: 50%; background: linear-gradient(135deg,#241140,#0d4aae); font-size: 21px; box-shadow: 0 0 18px rgba(99,48,255,.18); }
.driver-icon-preview.text span { margin-left: -6px; margin-top: 13px; font-size: 12px; }
.driver-card-preview > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; margin-left: 12px; min-width: 0; }
.driver-card-preview strong { font-size: 15px; }
.driver-card-preview small { color: #a49cae; font-size: 9px; white-space: nowrap; }
.driver-card-preview > b { margin-left: auto; font-size: 23px; font-weight: 300; }
.audio-action-panel { margin-top: -2px; text-align: center; }
.audio-initial-preview { padding-top: 8px; }
.record-button-preview { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 auto; border: 0; border-radius: 50%; background: linear-gradient(135deg,#a313ff,#145dff); box-shadow: 0 13px 32px rgba(111,37,255,.42); color: #fff; }
.record-button-preview b { font-size: 32px; font-weight: 400; }
.record-button-preview.recording { background: linear-gradient(135deg,#ff4d8a,#ff6a36); box-shadow: 0 13px 32px rgba(255,67,102,.32); }
.audio-action-panel > small { display: block; margin-top: 8px; color: #a9a1b3; font-size: 9px; }
.audio-or { display: flex; align-items: center; gap: 11px; margin: 25px 0 11px; color: #8f8999; font-size: 12px; }
.audio-or::before, .audio-or::after { content: ""; flex: 1; height: 1px; background: #85808d; opacity: .7; }
.upload-audio-preview { border: 0; padding: 0; background: transparent; color: #f7f4ff; font-size: 12px; }
.upload-audio-preview b { margin-left: 3px; font-size: 15px; font-weight: 400; }
.audio-action-panel p { margin: 9px 0 0; color: #908a9b; font-size: 9px; }
.consent-preview { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; color: #b0a8ba; font-size: 9px; }
.consent-preview input { width: 14px; height: 14px; accent-color: #8d39ff; }
.audio-recording-preview { display: grid; justify-items: center; gap: 16px; padding-top: 10px; }
.audio-recording-preview > small { color: #8f8999; font-size: 13px; }
.audio-recording-preview > strong { color: #fff; font-size: 34px; font-weight: 400; font-variant-numeric: tabular-nums; }
.audio-wave-preview { display: flex; height: 25px; align-items: center; justify-content: center; gap: 3px; }
.audio-wave-preview i { width: 2px; height: 12px; border-radius: 99px; background: #fff; animation: audio-wave-pulse .75s ease-in-out infinite alternate; animation-delay: calc(var(--wave-index) * -45ms); }
.audio-wave-preview i:nth-child(3n) { height: 24px; }
.audio-wave-preview i:nth-child(4n) { height: 18px; }
.audio-wave-preview i:nth-child(5n) { height: 9px; }
@keyframes audio-wave-pulse { to { transform: scaleY(.45); opacity: .6; } }
.audio-finished-preview { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 26px; padding: 28px 20px 0; }
.audio-state-button { display: grid; width: 74px; height: 74px; min-height: 0; margin: 0 auto; padding: 0; place-items: center; border: 1px solid #5d2cff; border-radius: 50%; background: #11172f; color: #fff; box-shadow: none; }
.audio-state-button b { font-size: 27px; font-weight: 400; line-height: 1; }
.audio-state-button.confirm { width: 88px; height: 88px; border: 0; background: linear-gradient(135deg,#a313ff,#145dff); box-shadow: 0 13px 32px rgba(111,37,255,.42); }
.audio-state-button.confirm b { font-size: 38px; }
.audio-ready-preview { display: grid; gap: 7px; margin-top: 12px; padding: 10px; border: 1px solid rgba(89,221,177,.24); border-radius: 8px; background: rgba(89,221,177,.06); text-align: left; }
.audio-ready-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.audio-ready-preview strong { color: #e9fff8; font-size: 10px; }
.audio-ready-preview small { margin: 0; color: #8fdcc4; font-size: 8px; }
.audio-ready-preview audio { width: 100%; height: 30px; }
.preview-primary.muted { opacity: .55; }
.bottom-sheet { position: fixed; z-index: 30; inset: 0; background: rgba(0,0,0,.56); }
.bottom-sheet-inner { position: absolute; right: 0; bottom: 0; left: 0; padding: 14px 16px 24px; border-radius: 20px 20px 0 0; background: #181526; }
.bottom-sheet-inner::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 17px; border-radius: 99px; background: #625c73; }
.sheet-preview { position: relative; height: 205px; padding: 18px; border-radius: 14px; background: linear-gradient(145deg,#163b73,#201348 68%,#5d267d); }
.sheet-preview.media-video { height: auto; min-height: 0; padding: 0; background: #11101b; }
.sheet-preview.media-video video { height: min(52vh, 420px); max-height: min(52vh, 420px); aspect-ratio: 2 / 3; object-fit: contain; background: #05050a; }
.sheet-preview.pink { background: linear-gradient(145deg,#502361,#d74f8f 58%,#1b276d); }
.sheet-preview strong { display: block; font-size: 16px; }
.sheet-preview small { display: block; margin-top: 6px; color: rgba(255,255,255,.74); font-size: 9px; }
.bottom-sheet h3 { margin: 16px 0 0; font-size: 16px; }
.bottom-sheet p { margin: 6px 0 0; color: #a8a2b7; font-size: 10px; line-height: 1.5; }
.same-button { width: 100%; margin-top: 15px; padding: 12px; border: 0; border-radius: 99px; background: linear-gradient(100deg,#a715ff,#147cff); color: #fff; font-size: 13px; }
.distribution-flow-page { padding-bottom: 34px; }
.distribution-summary-preview { padding: 15px; border: 1px solid rgba(82,117,255,.18); border-radius: 14px; background: #171a21; }
.distribution-access-note { display: grid; gap: 5px; margin-bottom: 9px; padding: 11px 12px; border: 1px solid rgba(255,180,93,.24); border-radius: 12px; background: rgba(255,180,93,.08); }
.distribution-access-note.unlocked { border-color: rgba(77,224,168,.28); background: rgba(77,224,168,.08); }
.distribution-access-note b { color: #ffd27b; font-size: 12px; }
.distribution-access-note.unlocked b { color: #67e2b5; }
.distribution-access-note span { color: #a8a1b0; font-size: 9px; line-height: 1.5; }
.distribution-access-note button { width: fit-content; border: 0; border-radius: 99px; padding: 6px 9px; background: rgba(38,103,207,.4); color: #80b5ff; font-size: 9px; }
.distribution-flow-page .is-disabled { opacity: .48; cursor: not-allowed; }
.distribution-sheet { position: absolute; z-index: 45; inset: 0; background: rgba(0,0,0,.58); }
.distribution-sheet-inner { position: absolute; right: 0; bottom: 0; left: 0; padding: 12px 15px 22px; border-radius: 18px 18px 0 0; background: #1a1727; box-shadow: 0 -18px 42px rgba(0,0,0,.3); }
.distribution-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.distribution-sheet-head strong { font-size: 15px; }
.distribution-sheet-head button { border: 0; padding: 0; background: transparent; color: #aaa2b7; font-size: 20px; }
.distribution-sheet-inner > p { margin: 6px 0 12px; color: #9f97aa; font-size: 9px; line-height: 1.5; }
.commission-policy-copy { margin-top: 12px; padding: 12px; border: 1px solid rgba(134,106,255,.22); border-radius: 10px; background: #11101b; color: #d7d1e2; font-size: 10px; line-height: 1.8; }
.distribution-amount-field { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding: 12px; border: 1px solid rgba(134,106,255,.35); border-radius: 10px; background: #11101b; }
.distribution-amount-field span { color: #bcb3cb; font-size: 17px; }
.distribution-amount-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 17px; }
.distribution-available { display: block; margin-top: 6px; color: #8e879b; font-size: 8px; }
.distribution-manual-note { margin-top: 12px; padding: 9px 10px; border-left: 2px solid #ffb45d; background: rgba(255,180,93,.07); color: #b8aebd; font-size: 8px; line-height: 1.5; }
.distribution-sheet-inner > .preview-primary { margin-top: 13px; }
.payout-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.payout-methods button { padding: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: #11101b; color: #bbb3c5; font-size: 10px; }
.payout-methods button.active { border-color: #56d999; background: rgba(65,214,153,.12); color: #67e2b5; }
.payout-upload-label { display: block; margin-top: 13px; color: #c9c2d3; font-size: 10px; }
.payout-upload-box { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; min-height: 92px; margin-top: 7px; border: 1px dashed rgba(132,107,255,.48); border-radius: 10px; background: #11101b; color: #c9c2d3; }
.payout-upload-box b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#762bff,#1d6cff); color: #fff; font-size: 16px; font-weight: 400; }
.payout-upload-box span { margin-top: 6px; font-size: 9px; }
.payout-upload-box.uploaded { border-style: solid; border-color: rgba(77,224,168,.45); }
.payout-upload-box.uploaded b { background: #35bb84; }
.payout-upload-box img { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; }
.distribution-summary-head { display: flex; align-items: center; justify-content: space-between; }
.distribution-summary-head strong { font-size: 16px; }
.distribution-summary-head button, .distribution-withdraw-preview button { border: 0; border-radius: 99px; padding: 7px 11px; background: rgba(32,94,192,.42); color: #66a8ff; font-size: 10px; }
.distribution-metrics-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 18px; padding-bottom: 13px; border-bottom: 1px solid rgba(130,151,199,.22); text-align: center; }
.distribution-metrics-preview b, .distribution-metrics-preview small { display: block; }
.distribution-metrics-preview b { font-size: 16px; }
.distribution-metrics-preview small { margin-top: 5px; color: #aaa6b6; font-size: 9px; }
.distribution-withdraw-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(130,151,199,.22); }
.distribution-withdraw-preview strong { width: 100%; color: #bdb8c8; font-size: 11px; }
.distribution-withdraw-preview button:nth-child(3) { background: rgba(0,133,84,.3); color: #37df9a; }
.distribution-tools-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 11px; }
.distribution-tools-preview button { border: 1px solid rgba(143,157,198,.5); border-radius: 99px; padding: 8px 5px; background: transparent; color: #f1eff7; font-size: 9px; }
.distribution-tabs-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 11px; padding: 4px; border-radius: 10px; background: #171523; }
.distribution-tab-preview { border: 0; border-radius: 7px; padding: 8px 2px; background: transparent; color: #928b9e; font-size: 9px; }
.distribution-tab-preview.active { background: linear-gradient(100deg,#4321a2,#1a4f9a); color: #fff; }
.distribution-record-list-preview { display: grid; gap: 0; margin-top: 8px; padding: 0 11px; border-radius: 12px; background: #171523; }
.distribution-record-list-preview > div { position: relative; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.distribution-record-list-preview > div:last-child { border-bottom: 0; }
.distribution-record-list-preview strong, .distribution-record-list-preview small { display: block; }
.distribution-record-list-preview strong { font-size: 11px; }
.distribution-record-list-preview small { margin-top: 4px; color: #91899f; font-size: 9px; }
.distribution-record-list-preview b { position: absolute; top: 18px; right: 0; color: #4de0a8; font-size: 11px; }
.distribution-record-list-preview b.payout-amount { color: #ff9a70; }
.distribution-empty-preview { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 135px; color: #928a9d; font-size: 11px; }
.distribution-empty-preview b { margin-bottom: 8px; font-size: 22px; font-weight: 300; }
.distribution-settings-preview { margin-top: 9px; padding: 12px; border-radius: 12px; background: #171523; }
.distribution-settings-preview > strong { display: block; margin-bottom: 3px; font-size: 12px; }
.distribution-settings-preview button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid rgba(255,255,255,.06); background: transparent; color: #f1eff7; text-align: left; font-size: 10px; }
.distribution-settings-preview em { color: #a79cff; font-style: normal; }
.distribution-settings-preview p { margin-top: 2px; color: #8c8599; font-size: 9px; line-height: 1.5; }
.distributor-lock-preview { margin-top: 70px; padding: 34px 15px; border: 1px solid rgba(126,110,221,.22); border-radius: 14px; background: #171523; text-align: center; }
.distributor-lock-preview > b { display: grid; width: 42px; height: 42px; margin: 0 auto; place-items: center; border-radius: 12px; background: linear-gradient(135deg,#762bff,#1d6cff); font-size: 18px; }
.distributor-lock-preview strong { display: block; margin-top: 12px; font-size: 14px; }
.distributor-lock-preview p { margin-top: 7px; font-size: 9px; line-height: 1.5; }
.distributor-lock-preview .preview-primary { margin-top: 16px; }
.service-owner-preview { display: block; margin-top: 16px; color: #1d2130; font-size: 12px; }

@media (max-width: 900px) {
  .workspace { display: block; }
  .editor-panel { width: auto; min-height: auto; }
  .editor-footer { margin-top: 26px; }
  .preview-stage { min-width: 0; padding: 34px 18px; }
  .material-rule-grid { grid-template-columns: 1fr; }
  .material-rule-card, .material-rule-grid .material-rule-card { grid-template-columns: minmax(0,1fr) 105px 125px; }
  .payout-review-layout { grid-template-columns: 1fr; }
}