:root { --bg:#10120f; --panel:#151713; --panel-2:#1b1e19; --line:#343832; --ink:#ecefe9; --muted:#969d93; --accent:#ff7157; --green:#8fc89a; --blue:#86aee8; --danger:#e58b78; --radius:6px; color-scheme:dark; font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-width:320px; margin:0; color:var(--ink); background:var(--bg); letter-spacing:0; }
button,input,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
a { color:inherit; }
[hidden] { display:none !important; }
.skip-link { position:fixed; z-index:100; left:12px; top:-60px; padding:10px 14px; color:#111; background:var(--accent); }
.skip-link:focus { top:12px; }
.app-header { position:sticky; z-index:20; top:0; height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 20px; border-bottom:1px solid var(--line); background:rgba(16,18,15,.97); }
.app-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.app-brand img { width:30px; height:30px; border-radius:5px; }
.app-brand span { font-weight:760; }
.app-brand small { padding-left:10px; color:var(--muted); border-left:1px solid var(--line); font-size:11px; }
.app-header-actions { display:flex; align-items:center; gap:8px; }
.service-state { display:flex; align-items:center; gap:7px; margin-right:10px; color:var(--muted); font-size:11px; }
.service-state i { width:7px; height:7px; border-radius:50%; background:#757b72; }
.service-state.is-ready i { background:var(--green); }
.balance-button,.quiet-button,.avatar-button { min-height:36px; color:var(--ink); border:1px solid var(--line); border-radius:4px; background:var(--panel); }
.balance-button { display:flex; align-items:center; gap:8px; padding:0 12px; }
.balance-button span { color:var(--muted); font-size:11px; }.balance-button strong { color:var(--green); }
.quiet-button { padding:0 13px; }.quiet-button:hover { border-color:#646b61; background:var(--panel-2); }.quiet-button:disabled { opacity:.35; cursor:not-allowed; }
.avatar-button { width:36px; padding:0; background:#232821; }.avatar-button span { color:var(--green); font-weight:800; }
.app-shell { min-height:calc(100dvh - 64px); display:grid; grid-template-columns:264px minmax(520px,1fr) 260px; }
.project-rail,.activity-rail { min-width:0; padding:22px 18px; background:#121410; }
.project-rail { border-right:1px solid var(--line); }.activity-rail { border-left:1px solid var(--line); }
.rail-heading { display:flex; gap:11px; align-items:center; margin-bottom:18px; }.rail-heading>span,.step-index span { color:var(--accent); font:800 10px/1 ui-monospace,Consolas,monospace; }.rail-heading strong,.rail-heading small { display:block; }.rail-heading strong { font-size:13px; }.rail-heading small { margin-top:3px; color:var(--muted); font-size:10px; }
.project-rail label { display:block; margin-top:13px; color:#b9bfb6; font-size:11px; }.project-rail input,.project-rail textarea { width:100%; margin-top:6px; padding:10px 11px; color:var(--ink); border:1px solid var(--line); border-radius:4px; outline:0; background:#0d0f0c; resize:vertical; }.project-rail input:focus,.project-rail textarea:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(134,174,232,.15); }
.primary-action { min-height:44px; display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin-top:18px; padding:0 15px; color:#15110f; border:1px solid var(--accent); border-radius:4px; background:var(--accent); font-weight:780; }.primary-action span { padding-left:12px; border-left:1px solid rgba(17,17,17,.3); font-size:10px; }.primary-action:hover { background:#ff826c; }.primary-action:disabled { opacity:.35; cursor:not-allowed; }.primary-action.compact { width:auto; min-width:150px; margin:0; }
.plan-heading { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.seven-day-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }.seven-day-list button { width:100%; display:grid; grid-template-columns:24px 1fr; gap:8px; padding:10px 8px; color:#b8beb5; border:0; border-left:2px solid transparent; background:transparent; text-align:left; }.seven-day-list button:hover,.seven-day-list button[aria-current="true"] { color:var(--ink); border-left-color:var(--accent); background:var(--panel); }.seven-day-list button span { color:#676e65; font:700 9px/1.4 ui-monospace,Consolas,monospace; }.seven-day-list button strong { font-size:11px; line-height:1.5; }.empty-row { padding:14px 0; color:#6f766c; font-size:11px; }
.content-workspace { min-width:0; padding:0 28px 80px; }.workspace-toolbar { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }.workspace-toolbar p { margin:0 0 7px; color:var(--muted); font-size:10px; }.workspace-toolbar h1 { max-width:680px; margin:0; font-size:22px; line-height:1.25; }.toolbar-actions { display:flex; gap:7px; flex:0 0 auto; }
.production-step { display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; padding-top:34px; }.step-index { display:flex; flex-direction:column; align-items:center; gap:10px; }.step-index i { width:1px; min-height:120px; flex:1; background:var(--line); }.step-title { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }.step-title h2 { margin:0; font-size:17px; }.step-title p { margin:6px 0 0; color:var(--muted); font-size:11px; }
.article-empty { min-height:240px; display:grid; place-content:center; text-align:center; }.article-empty strong { font-size:14px; }.article-empty p { margin:8px 0 0; color:var(--muted); font-size:11px; }
.article-preview { max-width:760px; padding:32px 0; }.article-preview header p { margin:0 0 28px; color:#b9c0b6; font-size:15px; line-height:1.8; }.article-preview section { padding:22px 0; border-top:1px solid var(--line); }.article-preview h3 { margin:0 0 12px; font-size:18px; }.article-preview section p { margin:0; color:#c8cdc5; font-size:14px; line-height:1.9; white-space:pre-wrap; }.article-preview aside { margin-top:24px; padding:18px 20px; border-left:3px solid var(--green); background:#161b15; }.article-preview aside strong { font-size:12px; }.article-preview aside ul { margin:10px 0 0; padding-left:18px; color:#b8c0b6; font-size:12px; line-height:1.8; }
.ai-output-label { margin:0 0 22px !important; padding:10px 12px; color:#e9d9b8 !important; border:1px solid #665b45; background:#1c1912; font-size:11px !important; line-height:1.6 !important; }
.visual-list { display:grid; margin-top:8px; }.visual-item { display:grid; grid-template-columns:118px minmax(0,1fr) 132px; gap:16px; align-items:center; min-height:132px; padding:14px 0; border-bottom:1px solid var(--line); }.visual-preview { width:118px; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; color:#687067; border:1px solid var(--line); background:#0c0e0b; font-size:10px; }.visual-item[data-role="wide-cover"] .visual-preview { aspect-ratio:16/9; }.visual-preview img { width:100%; height:100%; object-fit:cover; }.visual-copy strong,.visual-copy span { display:block; }.visual-copy strong { font-size:12px; }.visual-copy span { margin-top:5px; color:var(--muted); font-size:10px; }.visual-copy p { display:-webkit-box; overflow:hidden; margin:9px 0 0; color:#aeb5ab; font-size:11px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.visual-item button { min-height:38px; color:var(--ink); border:1px solid var(--line); border-radius:4px; background:var(--panel); font-size:11px; }.visual-item button:hover { border-color:var(--accent); }.visual-item button:disabled { opacity:.4; cursor:not-allowed; }
.activity-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--line); }.activity-heading strong,.activity-heading small { display:block; }.activity-heading strong { font-size:13px; }.activity-heading small { margin-top:3px; color:var(--muted); font-size:10px; }.activity-heading>span { color:var(--green); font-size:10px; }
.activity-log { height:310px; overflow:auto; padding:10px 0; scrollbar-width:thin; }.activity-log p { display:grid; grid-template-columns:48px 1fr; gap:8px; margin:0; padding:8px 0; border-bottom:1px solid #252923; }.activity-log time { color:#656c63; font:700 9px/1.5 ui-monospace,Consolas,monospace; }.activity-log span { color:#aeb5ab; font-size:10px; line-height:1.55; }
.cost-table { margin-top:20px; border-top:1px solid var(--line); }.cost-table div { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:11px; }.cost-table span { color:var(--muted); }.cost-table strong { color:var(--green); }.cost-table small { display:block; margin-top:10px; color:#737a71; font-size:9px; }
.desktop-link { display:block; margin-top:26px; padding:14px 0; border-block:1px solid var(--line); text-decoration:none; }.desktop-link strong,.desktop-link span { display:block; }.desktop-link strong { font-size:11px; }.desktop-link span { margin-top:5px; color:var(--accent); font-size:10px; }
.auth-screen { min-height:100dvh; display:grid; grid-template-columns:minmax(420px,1fr) minmax(420px,1fr); background:#0d0f0c; }.auth-intro { display:flex; flex-direction:column; justify-content:center; padding:80px max(48px,8vw); border-right:1px solid var(--line); background:#121510; }.auth-intro>a { position:absolute; top:28px; text-decoration:none; color:var(--muted); font-size:12px; }.auth-intro>p { color:var(--accent); font:800 10px/1 ui-monospace,Consolas,monospace; }.auth-intro h1 { margin:18px 0 32px; font-size:46px; line-height:1.12; }.auth-intro ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.auth-intro li { padding:13px 0; color:#aeb5ab; border-bottom:1px solid var(--line); font-size:12px; }.auth-intro li::before { content:""; display:inline-block; width:6px; height:6px; margin-right:10px; background:var(--green); }
.auth-form-wrap { width:min(420px,calc(100% - 48px)); margin:auto; }.auth-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:34px; border-bottom:1px solid var(--line); }.auth-tabs button { min-height:44px; color:var(--muted); border:0; border-bottom:2px solid transparent; background:transparent; }.auth-tabs button[aria-selected="true"] { color:var(--ink); border-color:var(--accent); }.auth-form-wrap h2 { margin:0 0 24px; font-size:24px; }.auth-form-wrap label { display:block; margin-top:16px; color:#b8beb5; font-size:11px; }.auth-form-wrap input:not([type="checkbox"]) { width:100%; min-height:46px; margin-top:7px; padding:0 12px; color:var(--ink); border:1px solid var(--line); border-radius:4px; outline:0; background:var(--panel); }.auth-form-wrap input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(134,174,232,.15); }.consent-list { margin:20px 0 0; padding:0; border:0; }.consent-list legend { color:#d9ddd6; font-size:11px; }.terms-check { display:grid !important; grid-template-columns:18px 1fr; align-items:start; gap:8px; line-height:1.6; }.terms-check input { margin:2px 0 0; }.terms-check a { color:var(--accent); }.form-status { min-height:22px; color:var(--danger); font-size:11px; }
.sheet-dialog { width:min(680px,calc(100% - 28px)); padding:0; color:var(--ink); border:1px solid #454b42; border-radius:var(--radius); background:#121410; box-shadow:0 28px 100px rgba(0,0,0,.65); }.sheet-dialog::backdrop { background:rgba(3,4,3,.76); }.sheet-dialog>form { position:absolute; top:12px; right:12px; }.dialog-close { width:34px; height:34px; color:var(--muted); border:1px solid var(--line); border-radius:4px; background:var(--panel); font-size:20px; }.sheet-dialog header { padding:30px 32px 20px; border-bottom:1px solid var(--line); }.sheet-dialog header p { margin:0; color:var(--accent); font:800 9px/1 ui-monospace,Consolas,monospace; }.sheet-dialog header h2 { margin:10px 0 6px; font-size:24px; }.sheet-dialog header span { color:var(--muted); font-size:11px; }.point-plans { display:grid; grid-template-columns:repeat(3,1fr); }.point-plans button { min-height:150px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:22px; color:var(--ink); border:0; border-right:1px solid var(--line); background:transparent; text-align:left; }.point-plans button:last-child { border-right:0; }.point-plans button:hover,.point-plans .recommended { background:#1a1e18; }.point-plans span { color:var(--muted); font-size:10px; }.point-plans strong { margin-top:12px; font-size:18px; }.point-plans small { margin-top:5px; color:var(--green); font-size:12px; }.dialog-note,.dialog-status { margin:0; padding:15px 32px; color:var(--muted); border-top:1px solid var(--line); font-size:10px; line-height:1.6; }.dialog-status { min-height:46px; color:#c2c8bf; }.ledger-list { max-height:420px; overflow:auto; padding:4px 32px 24px; }.ledger-entry { display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }.ledger-entry strong,.ledger-entry small { display:block; }.ledger-entry strong { font-size:11px; }.ledger-entry small { margin-top:4px; color:var(--muted); font-size:9px; }.ledger-entry>span { color:var(--green); font-weight:800; }.ledger-entry>span.is-debit { color:var(--danger); }
.account-menu { position:fixed; z-index:40; top:58px; right:16px; width:240px; padding:16px; border:1px solid var(--line); border-radius:4px; background:#171a16; box-shadow:0 18px 52px rgba(0,0,0,.45); }.account-menu strong,.account-menu span { display:block; }.account-menu strong { font-size:12px; }.account-menu span { margin-top:5px; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }.account-menu button,.account-menu a { width:100%; min-height:36px; display:flex; align-items:center; justify-content:center; margin-top:10px; padding:0 10px; color:var(--ink); border:1px solid var(--line); border-radius:4px; background:#10120f; font-size:11px; text-decoration:none; }.account-menu [data-delete-account] { color:#f0b2a5; border-color:#6c4038; }.sheet-dialog>form[data-delete-account-form] { position:static; display:grid; gap:16px; padding:24px 32px 32px; }.sheet-dialog>form[data-delete-account-form] label { display:grid; gap:7px; color:#c7ccc4; font-size:11px; }.sheet-dialog>form[data-delete-account-form] input { min-height:44px; padding:0 12px; color:var(--ink); border:1px solid var(--line); border-radius:4px; background:var(--panel); }.danger-action { min-height:42px; color:#fff; border:1px solid #9a5144; border-radius:4px; background:#7f3f35; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
@media (max-width:1180px) { .app-shell { grid-template-columns:240px minmax(480px,1fr); }.activity-rail { grid-column:1/-1; display:grid; grid-template-columns:220px 1fr 200px; gap:24px; border-top:1px solid var(--line); border-left:0; }.activity-log { height:160px; }.cost-table { margin-top:0; }.desktop-link { margin-top:0; } }
@media (max-width:820px) { .app-header { padding-inline:12px; }.service-state,.app-brand small { display:none; }.app-shell { display:block; }.project-rail,.activity-rail { border:0; border-bottom:1px solid var(--line); }.content-workspace { padding-inline:16px; }.activity-rail { display:block; }.workspace-toolbar { align-items:flex-start; flex-direction:column; padding:20px 0; }.toolbar-actions { width:100%; }.toolbar-actions button { flex:1; }.step-title { flex-direction:column; }.primary-action.compact { width:100%; }.visual-item { grid-template-columns:90px 1fr; }.visual-preview { width:90px; }.visual-item button { grid-column:1/-1; }.auth-screen { grid-template-columns:1fr; }.auth-intro { min-height:360px; padding:72px 28px 42px; border-right:0; border-bottom:1px solid var(--line); }.auth-intro h1 { font-size:34px; }.auth-form-wrap { padding:44px 0 70px; }.point-plans { grid-template-columns:1fr; }.point-plans button { min-height:92px; border-right:0; border-bottom:1px solid var(--line); }.point-plans button:last-child { border-bottom:0; } }
@media (max-width:520px) { .app-brand span { font-size:13px; }.app-header-actions>.quiet-button { display:none; }.content-workspace { padding-inline:12px; }.production-step { grid-template-columns:26px 1fr; gap:8px; }.workspace-toolbar h1 { font-size:18px; }.project-rail { padding-inline:14px; }.article-preview { padding-top:22px; }.auth-intro { min-height:330px; }.auth-intro h1 { font-size:30px; }.auth-intro ul { display:grid; grid-template-columns:1fr 1fr; }.auth-intro li { padding-right:10px; font-size:10px; } }