@import"https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:FILL@0..1&display=swap";:root{color-scheme:light;--bg: #f5f7fa;--panel: #ffffff;--panel-2: #edf3f8;--panel-3: #e2ebf3;--text: #1f2933;--muted: #52606d;--line: #d9e2ec;--primary: #1f4e79;--primary-strong: #153754;--secondary: #1c7c7d;--secondary-soft: rgba(28, 124, 125, .12);--accent: #d97706;--danger: #d64545;--success: #1b8c62;--shadow: 0 24px 60px rgba(31, 78, 121, .08);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px}*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(31,78,121,.08),transparent 26%),radial-gradient(circle at top right,rgba(28,124,125,.08),transparent 24%),linear-gradient(180deg,#f8fbfd 0%,var(--bg) 100%);color:var(--text);font-family:Hanken Grotesk,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,textarea,select{font:inherit}button{cursor:pointer}#root{min-height:100vh}.icon{font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24}.icon[data-filled=true]{font-variation-settings:"FILL" 1,"wght" 600,"GRAD" 0,"opsz" 24}.eyebrow{margin:0 0 6px;color:var(--muted);font-family:Inter,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}.sidebar{display:flex;flex-direction:column;gap:28px;padding:28px 20px;background:linear-gradient(180deg,#123a5cfa,#162d48fa),var(--primary);color:#fff;position:sticky;top:0;min-height:100vh}.brand-block{display:flex;align-items:center;gap:14px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:#ffffff24;box-shadow:inset 0 1px #fff3}.brand-block strong{display:block;font-size:18px}.brand-block span{color:#ffffffb8;font-size:13px}.nav-stack{display:grid;gap:10px}.nav-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:16px;background:transparent;color:#ffffffc7;text-align:left;transition:transform .16s ease,border-color .16s ease,background-color .16s ease,color .16s ease}.nav-item:hover{transform:translateY(-1px);background:#ffffff14;color:#fff}.nav-item strong,.nav-item span{display:block}.nav-item strong{font-size:15px;margin-bottom:4px}.nav-item span{font-size:12px;color:inherit;opacity:.72}.nav-item-active{background:#ffffff24;color:#fff;border-color:#ffffff1f;box-shadow:inset 0 1px #ffffff26}.sidebar-footer{margin-top:auto}.heartbeat-card{padding:18px;border-radius:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.12)}.heartbeat-card strong,.heartbeat-card span{display:block}.heartbeat-card strong{margin-bottom:8px;line-height:1.4}.heartbeat-card span{color:#ffffffb3;font-size:13px}.content-shell{display:flex;flex-direction:column;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 32px 18px}.topbar h1{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.05}.topbar-actions{display:flex;flex-wrap:wrap;gap:12px}.topbar-actions button,.hero-actions button,.section-actions button,.highlight-card,.tool-card,.chip,.alert-meta button{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:1px solid transparent;border-radius:999px;padding:10px 16px;background:var(--primary);color:#fff;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}.topbar-actions button:hover,.hero-actions button:hover,.section-actions button:hover,.highlight-card:hover,.tool-card:hover,.chip:hover,.alert-meta button:hover{transform:translateY(-1px);box-shadow:0 10px 24px #1f4e7929}.topbar-actions .ghost,.hero-actions .ghost,.chip,.alert-meta button{background:#ffffffe6;color:var(--primary);border-color:var(--line);box-shadow:none}.chip{padding:8px 14px;font-size:13px}.chip-active{background:var(--primary);color:#fff;border-color:transparent}.content-body{padding:0 32px 32px;animation:content-in .22s ease}@keyframes content-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.screen-stack{display:grid;gap:20px}.hero-panel,.section-card,.metric-card,.gateway-card{background:#ffffffe6;border:1px solid rgba(217,226,236,.92);border-radius:24px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.hero-panel{display:flex;justify-content:space-between;gap:20px;padding:28px;background:radial-gradient(circle at top right,rgba(28,124,125,.16),transparent 28%),radial-gradient(circle at bottom left,rgba(31,78,121,.14),transparent 30%),#fffffff5}.hero-panel.compact{align-items:center}.hero-copy{max-width:780px}.hero-copy h1{margin:0 0 10px;font-size:clamp(28px,4vw,42px);line-height:1.08}.hero-copy p:last-child{margin:0;max-width:720px;color:var(--muted);font-size:16px;line-height:1.65}.hero-actions,.chip-row,.section-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.hero-search{min-width:min(100%,360px)}.search-field{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:#fff}.search-field input{width:100%;border:0;outline:0;background:transparent}.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.metric-card,.gateway-card{padding:18px}.metric-card.brand{background:linear-gradient(135deg,#1f4e7914,#1c7c7d14),#fff;border-color:#1f4e792e}.metric-card.danger{background:linear-gradient(135deg,rgba(214,69,69,.08),transparent),#fff;border-color:#d6454529}.metric-head,.gateway-head,.metric-value-row,.alert-title,.alert-meta,.phone-header,.phone-list-item,.log-row,.log-main,.log-meta,.merchant-summary-card,.summary-metrics,.gateway-stats,.milestone,.highlight-card{display:flex;justify-content:space-between;gap:14px}.metric-head span:first-child,.metric-card p,.gateway-card p,.log-main span,.merchant-cell span,.mini-card p,.phone-list-item span,.tool-card p{color:var(--muted)}.metric-value-row{align-items:baseline;margin:14px 0 8px}.metric-value-row strong{font-size:34px;line-height:1}.metric-delta{padding:4px 8px;border-radius:999px;font-size:12px;font-family:Inter,sans-serif}.metric-delta.good{color:var(--success);background:#1b8c621f}.metric-delta.warn{color:var(--accent);background:#d977061f}.metric-delta.bad{color:var(--danger);background:#d645451f}.metric-delta.brand{color:var(--primary);background:#1f4e791f}.double-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);gap:20px}.detail-rail{display:grid;gap:20px}.section-card{padding:20px}.section-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.section-header h2,.section-card h3,.section-card h4,.gateway-card h3{margin:0}.trend-card{display:grid;gap:16px}.trend-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:16px;min-height:280px;padding:24px 20px 18px;border-radius:18px;background:linear-gradient(180deg,#1f4e7908,#1f4e7914),var(--panel-2)}.trend-column{display:grid;justify-items:center;gap:10px}.trend-bar{width:100%;min-height:56px;border-radius:18px 18px 8px 8px;background:linear-gradient(180deg,#1f4e79eb,#1c7c7dc7);box-shadow:0 18px 30px #1f4e792e}.trend-column span,.trend-legend span{color:var(--muted);font-family:Inter,sans-serif;font-size:12px}.trend-legend{display:flex;gap:16px;flex-wrap:wrap}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.legend-primary{background:var(--primary)}.legend-secondary{background:var(--secondary)}.alert-list,.milestone-list,.highlight-list,.detail-stack,.log-list,.phone-stack{display:grid;gap:14px}.alert-card,.milestone,.mini-card,.merchant-summary-card,.phone-hero,.phone-list-item,.tool-card,.log-row{border-radius:18px;border:1px solid var(--line);background:#fff}.alert-card{padding:16px}.alert-card.critical{border-color:#d645452e;background:linear-gradient(180deg,rgba(214,69,69,.08),transparent),#fff}.alert-title{justify-content:flex-start;align-items:center;margin-bottom:8px}.alert-card p{margin:0 0 12px;line-height:1.65;color:var(--muted)}.alert-meta{align-items:center;font-size:13px;color:var(--muted)}.milestone{align-items:center;padding:16px}.milestone.done{border-color:#1b8c6233}.milestone.active{border-color:#1f4e7933;background:linear-gradient(90deg,rgba(31,78,121,.08),transparent),#fff}.milestone-day,.milestone-state{flex:0 0 auto;font-family:Inter,sans-serif;font-size:12px}.milestone-day{padding:8px 10px;border-radius:999px;background:var(--panel-2);color:var(--primary);font-weight:600}.milestone-copy{display:grid;gap:4px;flex:1}.milestone-copy p{margin:0;color:var(--muted)}.milestone-state{color:var(--muted)}.highlight-card{align-items:center;padding:16px;text-align:left;border-radius:20px;background:#fff;border-color:var(--line);color:var(--text)}.highlight-card p{margin:4px 0 0;color:var(--muted);line-height:1.55}.highlight-icon,.tool-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#1f4e791a;color:var(--primary);flex:0 0 auto}.merchants-layout{grid-template-columns:minmax(0,1.65fr) minmax(320px,.95fr)}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.data-table th{color:var(--muted);font-family:Inter,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.data-table tbody tr{cursor:pointer;transition:background-color .15s ease}.data-table tbody tr:hover,.data-table tbody tr.row-active{background:#1f4e790d}.merchant-cell{display:flex;align-items:center;gap:12px}.merchant-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:700}.merchant-cell strong,.merchant-cell span{display:block}.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;font-size:12px;font-family:Inter,sans-serif;background:#1f4e7914;color:var(--primary)}.status-pill.good{background:#1b8c621f;color:var(--success)}.status-pill.warn{background:#d977061f;color:var(--accent)}.status-pill.default{background:#1f4e791a;color:var(--primary)}.merchant-summary-card{flex-direction:column;padding:18px}.summary-metrics{flex-wrap:wrap}.summary-metrics div,.gateway-stats div,.mini-card,.phone-mini-grid article{display:grid;gap:6px}.summary-metrics span,.gateway-stats span,.mini-card span,.phone-mini-grid span{color:var(--muted);font-size:13px}.summary-metrics strong,.gateway-stats strong,.mini-card strong,.phone-mini-grid strong{font-size:22px}.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mini-card{padding:16px}.task-list ul{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--muted);line-height:1.65}.detail-action-row{display:flex;flex-wrap:wrap;gap:10px}.detail-action-row button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border:1px solid transparent;border-radius:999px;background:var(--primary);color:#fff;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}.detail-action-row button:hover{transform:translateY(-1px);box-shadow:0 10px 20px #1f4e792e}.detail-action-row button.ghost{border-color:var(--line);background:#1f4e790a;color:var(--primary);box-shadow:none}.order-preview-summary,.phone-status-card,.phone-order-head,.phone-order-total{display:flex;justify-content:space-between;gap:14px}.order-preview-summary{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(31,78,121,.05),transparent),#fff}.order-preview-summary div{display:grid;gap:6px;flex:1}.order-preview-summary span,.order-preview-summary p{color:var(--muted)}.order-preview-summary p{margin:0;line-height:1.6}.form-stack,.toggle-list,.faq-selector,.preview-faq-list{display:grid;gap:14px}.field{display:grid;gap:8px}.field>span{color:var(--muted);font-family:Inter,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--text);padding:14px 16px;outline:0;resize:vertical}.field input:focus,.field textarea:focus{border-color:#1f4e7980;box-shadow:0 0 0 4px #1f4e7914}.pill-grid{display:flex;flex-wrap:wrap;gap:10px}.selector-card{width:100%;display:grid;gap:6px;text-align:left;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--text)}.selector-card p{margin:0;color:var(--muted);line-height:1.6}.selector-card-active{border-color:#1f4e7947;background:linear-gradient(180deg,rgba(31,78,121,.06),transparent),#fff}.toggle-row{width:100%;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--text);text-align:left}.toggle-row strong,.toggle-row span{display:block}.toggle-row span:last-child,.preview-head span{color:var(--muted)}.switch{width:44px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:background-color .16s ease}.switch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0000001f;transition:transform .16s ease}.switch-on{background:var(--secondary)}.switch-on:after{transform:translate(20px)}.preview-card{display:grid;gap:14px}.preview-head{display:flex;align-items:center;gap:12px}.preview-head strong,.preview-head span{display:block}.preview-bubble,.preview-faq-item{padding:14px 16px;border-radius:18px;border:1px solid var(--line)}.preview-bubble p,.preview-faq-item p{margin:6px 0 0;color:var(--muted);line-height:1.6}.preview-bubble-ai{background:#1c7c7d14;border-color:#1c7c7d29}.preview-bubble-user{justify-self:end;max-width:80%;background:#1f4e7914;border-color:#1f4e7929}.gateway-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gateway-card{display:grid;gap:16px}.gateway-stats{flex-wrap:wrap}.log-row{align-items:center;padding:14px 16px}.order-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.board-column{display:grid;gap:12px;padding:14px;border-radius:18px;background:var(--panel-2);border:1px solid var(--line)}.board-column-head{display:flex;justify-content:space-between;align-items:center}.board-column-head span{color:var(--muted);font-family:Inter,sans-serif;font-size:12px}.board-card-list{display:grid;gap:10px}.board-card{display:grid;gap:4px;padding:14px;border-radius:14px;background:#fff;border:1px solid rgba(217,226,236,.9)}.board-card span,.ledger-row span,.ledger-values span,.rule-card p{color:var(--muted)}.log-main{flex-direction:column;align-items:flex-start}.log-meta{align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px}.ledger-list{display:grid;gap:12px}.ledger-row{display:flex;justify-content:space-between;gap:16px;padding:16px;border-radius:18px;border:1px solid var(--line);background:#fff}.ledger-row strong,.ledger-row span,.ledger-values b,.ledger-values span{display:block}.ledger-values{text-align:right}.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rule-card{padding:16px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(31,78,121,.04),transparent),#fff}.rule-card p{margin:8px 0 0;line-height:1.6}.studio-layout{grid-template-columns:minmax(360px,.9fr) minmax(0,1fr)}.phone-shell{width:min(100%,340px);margin:0 auto;padding:16px;border-radius:36px;background:linear-gradient(180deg,#fffffff2,#edf3f8eb),#fff;border:8px solid #123a5c;box-shadow:0 28px 60px #123a5c2e,inset 0 0 0 1px #fff9}.phone-header{align-items:center;margin-bottom:14px;color:var(--primary);font-weight:600}.phone-hero,.phone-list-item,.tool-card{padding:16px}.phone-agent-card,.phone-faq-card{display:grid;gap:8px;padding:16px;border-radius:18px;border:1px solid var(--line);background:#fff}.phone-agent-card p,.phone-agent-card span,.phone-faq-item span,.phone-faq-item b{color:var(--muted)}.phone-agent-card-secondary{background:#1f4e790f}.phone-faq-item{display:grid;gap:4px;padding-top:8px;border-top:1px solid rgba(217,226,236,.9)}.phone-scene-banner,.phone-status-card,.phone-order-card,.phone-code-card,.phone-step-list,.phone-inline-actions{border-radius:18px;border:1px solid var(--line);background:#fff}.phone-scene-banner,.phone-code-card,.phone-order-card,.phone-step-list{padding:16px}.phone-scene-banner{display:grid;gap:6px;color:#fff}.phone-scene-banner.success{background:linear-gradient(135deg,var(--success),#2aa876)}.phone-scene-banner.verification{background:linear-gradient(135deg,var(--accent),#e49a2a)}.phone-scene-banner.pickup{background:linear-gradient(135deg,#1f4e79,#3f7fb5)}.phone-scene-banner.refund{background:linear-gradient(135deg,#7b341e,#c05621)}.phone-scene-banner span,.phone-scene-banner p{color:#ffffffd1}.phone-scene-banner p{margin:0}.phone-scene-banner strong{font-size:32px;line-height:1}.phone-status-card{padding:14px 16px}.phone-status-card div{display:grid;gap:4px;flex:1}.phone-status-card span,.phone-order-item span,.phone-code-card p,.phone-code-card span,.phone-step-item span,.phone-order-total span{color:var(--muted)}.phone-code-card{display:grid;gap:8px;background:linear-gradient(180deg,rgba(217,119,6,.08),transparent),#fff}.phone-qr-card{justify-items:center;text-align:center}.phone-qr-wrap{display:grid;place-items:center;width:190px;height:190px;padding:14px;border-radius:24px;background:linear-gradient(180deg,#1f4e7914,#1f4e7905);box-shadow:inset 0 0 0 1px #1f4e790f}.phone-code-card p,.phone-order-total{margin:0}.phone-code{font-size:28px;letter-spacing:.08em}.phone-order-card{display:grid;gap:14px}.phone-order-head span{color:var(--muted)}.phone-order-items{display:grid;gap:10px}.phone-order-item{display:flex;justify-content:space-between;gap:16px;align-items:center}.phone-order-item div{display:grid;gap:4px}.phone-order-total{padding-top:14px;border-top:1px solid var(--line);align-items:center}.phone-step-list{display:grid;gap:12px}.phone-step-item{display:flex;gap:10px;align-items:flex-start}.phone-step-item i{display:grid;place-items:center;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}.phone-step-item i:not(:empty){width:22px;height:22px;margin-top:0;color:#fff;font-family:Inter,sans-serif;font-size:11px;font-style:normal;font-weight:700}.phone-refund-reason{margin:0;color:var(--muted);line-height:1.6}.phone-inline-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}.phone-inline-actions button{border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--text);padding:12px 14px}.phone-inline-actions button.active{background:var(--primary);border-color:transparent;color:#fff}.phone-hero{display:grid;gap:6px;background:linear-gradient(135deg,var(--primary),#2c6698);color:#fff}.phone-hero.shadow{background:linear-gradient(135deg,var(--secondary),#2e999a)}.phone-hero .eyebrow,.phone-hero span{color:#ffffffc7}.phone-hero strong{font-size:38px;line-height:1}.phone-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.phone-mini-grid article{padding:14px;border-radius:16px;border:1px solid var(--line);background:#fff}.phone-list-item{align-items:center}.phone-list-item strong,.phone-list-item span{display:block}.phone-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.phone-nav button{display:grid;justify-items:center;gap:6px;padding:10px 8px;border:0;background:transparent;color:var(--muted);border-radius:14px}.phone-nav button.active{background:#1f4e7914;color:var(--primary)}.tool-card{width:100%;align-items:center;text-align:left;border-radius:18px;border-color:var(--line);background:#fff;color:var(--text)}.tool-card span:last-child{color:var(--secondary);font-weight:600}@media(max-width:1240px){.metric-grid,.gateway-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.double-grid,.merchants-layout,.studio-layout{grid-template-columns:1fr}.hero-panel{flex-direction:column}}@media(max-width:960px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;min-height:auto;padding-bottom:20px}.nav-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar,.content-body{padding-left:20px;padding-right:20px}.topbar{flex-direction:column;align-items:flex-start}}@media(max-width:680px){.nav-stack,.metric-grid,.gateway-grid,.mini-grid,.phone-mini-grid,.order-board,.rule-grid{grid-template-columns:1fr}.topbar-actions,.hero-actions,.chip-row,.topbar-actions button,.hero-actions button,.chip{width:100%}.data-table{min-width:620px}}
