/* 拾流 · Pixel pomegranate. Shared by the customer and operator surfaces. */
:root { --blue:#245bdb; --blue-hover:#1948b6; --blue-tint:#eef3ff; --ink:#172238; --muted:#718096; --line:#e5eaf2; --wash:#f7f9fc; --brand-radius:6px; }
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.sl-icon { display:inline-block; flex:0 0 auto; vertical-align:-4px; width:18px; height:18px; color:inherit; overflow:visible; }
a>.sl-icon { width:15px; height:15px; vertical-align:-3px; margin-left:3px; }
.brand { gap:12px; line-height:1; }
.brand-lockup { display:block; width:116px; height:44px; object-fit:contain; flex-shrink:0; }
.brand-surface { border-left:1px solid var(--line); padding-left:15px; color:var(--muted); font-size:12px; font-weight:500; }
#top { height:70px; padding:0 30px; background:#fff; border-bottom:1px solid var(--line); }
#shell { min-height:calc(100vh - 70px); }
.top-actions { gap:22px; }
.top-actions>a { text-decoration:none; font-weight:500; }
.top-actions .account-name { padding-left:12px; border-left:1px solid var(--line); }
.top-actions a[href="#wallet"] { padding:6px 11px; border:1px solid #e0e8fa; background:#f7f9ff; border-radius:4px; font-variant-numeric:tabular-nums; }
button,.button,input,textarea,select { border-radius:var(--brand-radius); }
button,.button { font-weight:500; transition:background .15s,border-color .15s,box-shadow .15s; }
button.primary,.button.primary,[data-commercial] [type=submit] { box-shadow:0 1px 2px #17223814; }
button.primary:hover,.button.primary:hover { background:var(--blue-hover); border-color:var(--blue-hover); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
input:focus,textarea:focus,select:focus { border-color:var(--blue); }
#nav { top:70px; height:calc(100vh - 70px); background:#fafbfe; padding:25px 13px 20px; }
#nav a { border-radius:5px; min-height:42px; gap:12px; color:#657188; }
#nav a.active { box-shadow:none; background:#eaf0fe; color:var(--blue); position:relative; }
#nav a.active::before { content:""; width:3px; height:18px; background:var(--blue); position:absolute; left:0; top:12px; }
#nav a:hover { background:#f0f4fb; }
#nav a.active:hover { background:#eaf0fe; }
#nav .nav-icon { display:flex; align-items:center; justify-content:center; width:20px; height:20px; }
#nav .nav-icon .sl-icon { width:19px; height:19px; }
#nav .nav-section { font-size:11px; letter-spacing:1px; padding-top:29px; }
#nav .nav-section button { width:26px; height:26px; padding:4px; border-radius:4px; }
#nav .nav-section button:hover { background:#eaf0fe; color:var(--blue); }
#nav .count { font-variant-numeric:tabular-nums; font-size:10px; background:#edf1f7; padding:1px 6px; border-radius:3px; }
#nav .bottom { border-top:1px solid var(--line); padding-top:14px; }
#content { padding-top:36px; }
.page-head h1 { font-size:25px; letter-spacing:-.5px; font-weight:650; }
.page-head p { line-height:1.8; }
.page-head { margin-bottom:27px; }
.panel,.creator-card,.table-wrap,.video-card,.pending-list { border-radius:8px; }
.creator-card { transition:border-color .15s,box-shadow .15s; }
.creator-card:hover { border-color:#c7d6f3; box-shadow:0 4px 16px #17223806; }
.filters { gap:6px; }
.filters button { border-radius:4px; }
.filters button.active { box-shadow:inset 0 0 0 1px #dae5fc; }
.search-form { gap:0; }
.search-form input { border-radius:5px 0 0 5px; height:38px; }
.search-form button { border-radius:0 5px 5px 0; height:38px; }
.view-switch { display:inline-flex; background:var(--wash); border:1px solid var(--line); padding:3px; border-radius:6px; gap:3px; }
.view-switch button { border:0; border-radius:3px; min-height:29px; padding:4px 9px; }
.view-switch button.active { background:white; color:var(--blue); box-shadow:0 1px 4px #17223812; }
.view-switch .sl-icon { width:15px; height:15px; }
th { font-weight:550; font-size:12px; color:#69758a; background:#f8fafe; }
.status { border-radius:3px; font-size:11px; }
.balance { font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.empty { border-radius:8px; background:#fcfdff; border:1px dashed #d7e1f0; padding:65px 24px; }
.empty-mark { border:0; width:68px; height:76px; margin:0 auto 20px; display:grid; place-items:center; background:#f0f4ff; border-radius:8px; }
.empty-mark::after { display:none; }
.empty-mark img { opacity:.8; }
.empty h3 { font-size:16px; font-weight:600; }
.notice { border-radius:0 5px 5px 0; line-height:1.8; }
#dialog { border-radius:12px; box-shadow:0 20px 80px #17223824; padding:30px; border-color:#e4eaf4; }
#dialog::backdrop { background:#13223c55; backdrop-filter:blur(3px); }
.modal-head { gap:18px; }
.modal-head h2 { font-size:19px; letter-spacing:-.3px; }
.modal-head button { border:0; background:transparent; color:#7b879a; padding:5px; min-width:30px; min-height:30px; }
.auth-brand { display:flex; align-items:center; gap:18px; margin:4px 0 24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.auth-brand .brand-lockup { width:108px; height:41px; }
.auth-brand>span { font-size:12px; line-height:1.7; color:var(--muted); max-width:145px; border-left:1px solid var(--line); padding-left:18px; }
.auth-tabs button { border-radius:0; }
.auth-help { font-size:12px; }
#toast { border-radius:6px; background:var(--ink); box-shadow:0 6px 24px #17223820; }
.hero { position:relative; max-width:1100px; margin-top:64px; }
.hero::after { content:""; position:absolute; width:170px; height:194px; top:57px; right:3px; background:url('/static/brand/mark.svg') center/contain no-repeat; opacity:.075; pointer-events:none; }
.hero .eyebrow { display:flex; align-items:center; gap:10px; letter-spacing:1.5px; font-weight:500; font-size:12px; }
.seed-grid { width:15px; height:15px; display:grid; grid-template-columns:repeat(2,5px); grid-template-rows:repeat(2,5px); gap:3px; }
.seed-grid i { background:var(--blue); }
.seed-grid i:nth-child(2) { opacity:.35; }
.seed-grid i:nth-child(3) { opacity:.6; }
.hero h1 { font-weight:650; font-size:clamp(36px,4.5vw,60px); line-height:1.3; letter-spacing:-1.8px; position:relative; z-index:1; }
.hero>p { font-size:15px; line-height:1.95; max-width:590px; }
.hero>.actions .button,.hero>.actions button { min-height:43px; padding:10px 20px; }
.hero-grid { gap:26px; padding-top:30px; }
.hero-grid>div,.hero-grid>div+div { padding:0; border-left:0; }
.hero-grid .feature-icon { display:block; width:27px; height:27px; color:var(--blue); margin-bottom:18px; }
.hero-grid small { color:#8a96a8; font-size:10px; letter-spacing:1px; }
.hero-grid h3 { margin-top:9px; font-size:16px; }
.hero-grid p { font-size:12px; line-height:1.85; }
.hero .footer { display:flex; align-items:center; gap:10px; margin-top:40px; border-top:1px solid var(--line); padding-top:22px; color:#94a0b2; font-size:11px; }
.footer-brand { display:flex; align-items:center; gap:15px; margin-right:auto; }
.footer-brand .brand-lockup { width:74px; height:28px; opacity:.6; }
.footer-brand>span { color:#8a96a8; letter-spacing:1px; }
.footer a { color:#8a96a8; text-decoration:none; }
.checkout-status-icon { border-radius:5px; display:grid; place-items:center; }
.checkout-status-icon .sl-icon { width:25px; height:25px; }
.recharge-option>span { border-radius:5px; }
.operator-login { border-radius:10px; }
@media (min-width:1600px) { .hero { margin-top:85px; } }
@media (max-width:1100px) { .hero::after { width:125px; height:145px; right:0; opacity:.045; } }
@media (max-width:700px) {
 #top { height:64px; padding:0 17px; gap:10px; }
 .brand-lockup { width:101px; height:39px; }
 .top-actions { gap:11px; font-size:12px; }
 .top-actions button { font-size:12px; padding:6px 10px; }
 .top-actions .account-name { display:none; }
 #shell { min-height:calc(100vh - 64px); }
 #nav { top:64px; height:calc(100vh - 64px); }
 #content { padding:24px 18px 40px; }
 .hero { margin:25px auto 0; }
 .hero::after { display:none; }
 .hero h1 { font-size:34px; letter-spacing:-1px; line-height:1.35; }
 .hero>p { font-size:14px; line-height:1.9; margin-top:22px; }
 .hero>.actions { margin-bottom:42px; gap:9px; }
 .hero>.actions .button,.hero>.actions button { padding:10px 14px; font-size:13px; }
 .hero-grid { gap:26px; grid-template-columns:1fr; padding-top:25px; }
 .hero-grid>div { display:grid; grid-template-columns:34px 1fr; column-gap:14px; }
 .hero-grid .feature-icon { grid-row:1/4; margin:3px 0 0; width:25px; height:25px; }
 .hero-grid h3 { margin:5px 0; }
 .hero-grid p { max-width:none; margin-bottom:0; }
 .hero .footer { margin-top:28px; flex-wrap:wrap; }
 .footer-brand { flex:1 0 100%; margin-bottom:10px; }
 .page-head { gap:14px; }
 .page-head h1 { font-size:23px; }
 #dialog { padding:23px; }
 .auth-brand { gap:12px; }
 .auth-brand>span { padding-left:12px; }
 .brand-surface { padding-left:8px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
/* Keep compact toolbar labels and account identity on one line. */
.search-form button { min-width:78px; white-space:nowrap; flex-shrink:0; }
.top-actions .account-name { white-space:nowrap; }

.subscription .sl-icon { width:12px; height:12px; margin-right:3px; vertical-align:-2px; }
.record-grid,.grid-panel { border-radius:6px; }
.grid-tools button { white-space:nowrap; }
.grid-tools .sl-icon { width:15px; height:15px; }
.grid-empty { display:flex; flex-direction:column; align-items:center; gap:15px; padding:50px 24px; text-align:center; }
.grid-empty::before { content:""; width:36px; height:42px; background:url('/static/brand/mark.svg') center/contain no-repeat; opacity:.5; }
/* Center the empty state in the visible work area, even for wide tables. */
.record-grid:has(.grid-empty) { position:relative; min-height:230px; overflow:hidden; }
.record-grid .grid-empty { position:absolute; top:54px; left:0; right:0; padding:30px 24px; min-height:170px; justify-content:center; }

.api-platform { display:flex; align-items:center; gap:9px; color:var(--blue); margin-bottom:6px; }
.api-platform>.sl-icon { width:20px; height:20px; padding:5px; box-sizing:content-box; background:var(--blue-tint); border-radius:4px; }
.api-platform small { color:inherit; }
.api-card { border-radius:8px; transition:border-color .15s,box-shadow .15s; }
.api-card:hover { border-color:#c7d6f3; box-shadow:0 3px 12px #17223806; }
.data-square-intro { border-radius:6px; }
#workspace-table.tabulator { border-radius:7px; border-color:var(--line); }
#workspace-table .tabulator-header,#workspace-table .tabulator-col { background:#f8fafe; color:#69758a; font-weight:500; }
#workspace-table .tabulator-placeholder-contents { display:flex; flex-direction:column; align-items:center; gap:15px; color:var(--muted); font-size:13px; }
#workspace-table .tabulator-placeholder-contents::before { content:""; width:36px; height:42px; background:url('/static/brand/mark.svg') center/contain no-repeat; opacity:.55; }
#workspace-table .tabulator-row:hover { background:#f8faff; }
#workspace-table .tabulator-row.tabulator-selected { background:var(--blue-tint); }