:root { color-scheme:dark; --web-canvas:#101011; --web-panel:#1b1b1d; --web-panel2:#252527; --web-line:#303033; --web-text:#f0f0f1; --web-secondary:#a5a5ab; --web-muted:#77777e; --web-blue:#b6a0eb; --web-green:#93b5a0; }
* { box-sizing:border-box; }
html, body, #app { width:100%; height:100%; margin:0; overflow:hidden; background:var(--web-canvas); color:var(--web-text); font-family:"Noto Sans SC","Microsoft YaHei",sans-serif; }
button, input, select { font:inherit; }
:where(.web-header,.web-page,.web-topbar,.web-canvas-dock,.web-history-panel,.web-login,.web-import-dialog,.web-save-warning,.web-toast) button { border:1px solid var(--web-line); border-radius:9px; padding:9px 13px; background:var(--web-panel2); color:var(--web-text); cursor:pointer; transition:background .15s,border-color .15s; }
:where(.web-header,.web-page,.web-topbar,.web-canvas-dock,.web-history-panel,.web-login,.web-import-dialog,.web-save-warning,.web-toast) button:hover:not(:disabled) { background:#303033; border-color:#444449; }
:where(.web-header,.web-page,.web-topbar,.web-canvas-dock,.web-history-panel,.web-login,.web-import-dialog,.web-save-warning,.web-toast) button:disabled { opacity:.42; cursor:not-allowed; }
:where(.web-header,.web-page,.web-topbar,.web-history-panel,.web-login) input { min-width:0; padding:11px 13px; border:1px solid var(--web-line); border-radius:10px; background:#18181a; color:var(--web-text); }
:where(.web-shell,.web-login,.web-import-dialog) :is(button,input,select):focus-visible { outline:2px solid var(--web-blue); outline-offset:3px; }
.web-shell { position:relative; display:flex; flex-direction:column; width:100%; height:100%; background:var(--web-canvas); }
.web-header { flex:none; height:68px; display:flex; align-items:center; gap:52px; padding:0 44px; border-bottom:1px solid #242427; background:#111112; }
.web-brandlockup, .web-brand-lockup { display:flex; align-items:center; gap:11px; flex:none; }
.web-brand { display:grid; place-items:center; flex:none; width:31px; height:34px; border-radius:9px; overflow:hidden; background:#e4f730; }
.web-brand img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.4); }
.web-wordmark { color:#eeeef0; font-size:17px; font-weight:650; letter-spacing:.5px; white-space:nowrap; }
.web-primary-nav { align-self:stretch; display:flex; align-items:center; gap:28px; }
.web-primary-nav button { position:relative; height:100%; padding:0 3px; border:0; border-radius:0; background:none; color:var(--web-secondary); font-size:13px; }
.web-primary-nav button:hover:not(:disabled) { background:none; color:var(--web-text); }
.web-primary-nav button.active, .web-primary-nav button[aria-current="page"] { color:var(--web-text); }
.web-primary-nav button.active::after, .web-primary-nav button[aria-current="page"]::after { position:absolute; right:0; bottom:0; left:0; height:2px; background:var(--web-text); content:""; }
.web-header-account { margin-left:auto; display:flex; align-items:center; gap:18px; }
.web-mode-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #43384f; border-radius:20px; background:#29232f; color:#b8a8c8; font-size:10px; white-space:nowrap; }
.web-mode-pill::before { width:4px; height:4px; border-radius:50%; background:#b39acb; content:""; }
.web-account-chip, .web-avatar { display:grid; place-items:center; width:33px; height:33px; flex:none; padding:0!important; border:1px solid #4a4356!important; border-radius:50%!important; background:#39313f!important; color:#e0d7ed!important; font-size:12px; }
.web-main { position:relative; display:flex; flex:1; flex-direction:column; min-width:0; min-height:0; }
.web-fixture-banner { position:absolute; z-index:85; right:24px; bottom:11px; display:flex; gap:10px; align-items:center; max-width:calc(100% - 48px); padding:5px 9px; border:1px solid #343139; border-radius:6px; background:#19171de8; color:#b4a6c8; font-size:10px; line-height:1.5; pointer-events:none; }
.web-fixture-banner span:last-child { color:#87818e; }
.web-page { flex:1; min-height:0; overflow:auto; padding:40px 44px 64px; scrollbar-color:#39393f transparent; }
.web-page-header { display:flex; align-items:center; gap:20px; margin-bottom:32px; }
.web-page-header h1, .web-library-toolbar h1 { margin:0; color:#e9e9ec; font-size:22px; font-weight:550; letter-spacing:.1px; }
.web-page-header p { margin:8px 0 0; color:var(--web-muted); font-size:12px; }
.web-page-header>button { margin-left:auto; }
.web-primary, .web-page .web-primary, .web-history-panel .web-primary, .web-login .web-primary { border-color:#e7e5ec; background:#e7e5ec; color:#171619; font-weight:600; }
.web-primary:hover:not(:disabled), .web-page .web-primary:hover:not(:disabled), .web-history-panel .web-primary:hover:not(:disabled), .web-login .web-primary:hover:not(:disabled) { border-color:white; background:#fff; color:#111; }
.web-grow { flex:1; }
.web-library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.web-library-toolbar>div:first-child { display:flex; align-items:center; gap:28px; }
.web-library-actions { display:flex; align-items:center; gap:14px; }
.web-search { display:flex; align-items:center; gap:8px; width:220px; border:1px solid #2e2e32; border-radius:9px; padding:0 11px; background:#19191b; color:var(--web-muted); }
.web-search input { width:100%; padding:10px 0; border:0; outline-offset:0; background:none; font-size:12px; }
.web-search svg { width:15px; height:15px; flex:none; }
.web-view-switch { display:flex; gap:3px; padding:3px; border:1px solid #2d2d31; border-radius:9px; background:#18181a; }
.web-view-switch button { display:grid; place-items:center; width:31px; height:29px; padding:6px; border:0; border-radius:6px; background:none; color:var(--web-muted); }
.web-view-switch button.active, .web-view-switch button[aria-pressed="true"] { background:#313135; color:#eee; }
.web-view-switch svg { width:16px; height:16px; }
.web-board-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:27px 22px; }
.web-board-grid>.web-inline-error, .web-board-grid>p { grid-column:1/-1; color:var(--web-secondary); font-size:13px; }
.web-board-card { display:flex; flex-direction:column; min-width:0; padding:0!important; overflow:hidden; text-align:left; border:1px solid #29292c!important; border-radius:12px!important; background:#18181a!important; transition:border-color .15s,transform .15s; }
.web-board-card:hover:not(:disabled) { border-color:#5c536a!important; transform:translateY(-2px); }
.web-board-preview { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1.35; flex:none; overflow:hidden; background:#222225; }
.web-board-preview img { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.web-cover-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; width:100%; height:100%; color:#67656d; background:radial-gradient(circle at 50% 45%,#343039,transparent 75%),#222125; }
.web-cover-empty svg { width:38px; height:38px; opacity:.65; }
.web-board-caption { display:flex; flex-direction:column; gap:7px; padding:16px 16px 18px; }
.web-board-caption strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e4e3e8; font-size:13px; font-weight:500; }
.web-board-caption span { color:#797981; font-size:10px; }
.web-board-card.new { align-items:center; justify-content:center; gap:13px; min-height:240px; border-style:dashed!important; border-color:#3b3a40!important; background:#171719!important; color:#aaa7b2; text-align:center; }
.web-board-card.new>strong { font-size:13px; font-weight:500; }
.web-board-card.new>span:first-child, .web-board-card.new .web-new-icon, .web-board-card.new .web-new-plus { display:grid; place-items:center; width:46px; height:46px; border:1px solid #55515e; border-radius:50%; background:#28252e; color:#d6c9e8; font-size:25px; font-weight:300; }
.web-board-card.new small { color:var(--web-muted); font-size:11px; }
.web-board-grid.is-list { grid-template-columns:1fr; gap:10px; }
.web-board-grid.is-list .web-board-card { flex-direction:row; align-items:center; min-height:90px; }
.web-board-grid.is-list .web-board-preview { width:122px; aspect-ratio:1.35; }
.web-board-grid.is-list .web-board-caption { flex:1; padding:15px 22px; }
.web-board-grid.is-list .web-board-card.new { flex-direction:row; justify-content:flex-start; min-height:76px; padding:14px 22px!important; }
.web-tabs { display:flex; gap:4px; }
.web-tabs button { border:0; background:none; color:var(--web-muted); font-size:12px; padding:7px 13px; }
.web-tabs button[aria-pressed="true"], .web-tabs button.active { background:#303033; color:#f0edf5; }
.web-shell.is-canvas { background:#141416; }
.is-canvas .web-main, .is-canvas .web-board-stage { position:absolute; inset:0; }
.is-canvas .web-topbar { position:absolute; z-index:90; inset:20px 24px auto; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; pointer-events:none; }
.web-canvas-title, .web-canvas-actions { display:flex; align-items:center; gap:12px; min-width:0; min-height:42px; padding:5px 7px; border:1px solid #343438; border-radius:11px; background:#1c1c1fec; box-shadow:0 5px 20px #0002; backdrop-filter:blur(16px); pointer-events:auto; }
.web-canvas-title { max-width:50%; }
.web-canvas-actions { margin-left:auto; gap:16px; padding:5px 7px 5px 16px; }
.web-topbar strong { font-size:13px; font-weight:550; }
.web-topbar #web-board-title { max-width:240px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.web-topbar button { pointer-events:auto; }
.web-topbar .web-ghost { border:0; background:none; padding:0 7px; color:#aaa8b0; font-size:24px; line-height:1; }
.web-save-state { color:var(--web-secondary); font-size:10px; white-space:nowrap; }
.web-save-state[data-state="saved"] { color:#98a89e; }
.web-points { color:#c1bacd; font-size:11px; white-space:nowrap; }
.web-board-title { border:0; background:none; font-weight:600; }
.web-board-stage { position:relative; min-height:0; flex:1; }
#board-root { position:absolute; inset:0; }
#board-root .board-route { height:100%; }
/* Keep browser focus from scrolling independently of the native camera. */
#board-root .board-surface { overflow:clip; }
.is-canvas #board-root .board-route-head { display:none; }
.is-canvas #board-root .board-asset-toggle, .is-canvas #board-root .board-asset-panel { display:none; }
.is-canvas:not(.is-search-open) #board-root .board-search-control, .is-canvas:not(.is-search-open) #board-root .board-search-drawer { display:none; }
.is-canvas #board-root .board-search-control { top:78px; right:24px; }
.is-canvas #board-root .board-search-drawer { top:126px; right:24px; }
.is-canvas #board-root .board-minimap { left:auto; right:24px; bottom:86px; }
.web-canvas-dock { position:absolute; z-index:95; top:50%; left:20px; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px; border:1px solid #38383d; border-radius:13px; background:#232326ec; box-shadow:0 10px 28px #0003; backdrop-filter:blur(16px); }
.web-canvas-dock button { display:grid; place-items:center; width:37px; height:39px; padding:8px; border:0; background:none; color:#aaa8b1; }
.web-canvas-dock button.active, .web-canvas-dock button[aria-pressed="true"] { background:#3a3446; color:#d5c1ef; }
.web-canvas-dock svg { width:20px; height:20px; }
.web-canvas-dock hr { width:24px; margin:4px 0; border:0; border-top:1px solid #414047; }
.web-rail { display:none; }
.web-save-warning { position:relative; z-index:100; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; border:1px solid #654b54; border-radius:10px; background:#302429f5; color:#e2c4cd; font-size:11px; }
.is-canvas .web-save-warning { position:absolute; top:78px; left:24px; max-width:min(760px,calc(100% - 430px)); box-shadow:0 8px 24px #0003; }
.is-canvas #draft-recovery { top:auto; bottom:86px; left:210px; max-width:calc(100% - 440px); background:#292630f5; border-color:#554765; }
.web-save-warning span { flex:1; min-width:180px; }
.web-save-warning button { flex:none; font-size:11px; }
.web-save-warning[hidden], .web-upload-state[hidden] { display:none; }
.web-save-state[data-state="error"], .web-inline-error { color:#e6a9b7; }
.web-inline-error:empty { display:none; }
.web-upload-state { position:absolute; top:130px; right:24px; z-index:95; background:var(--web-panel2); padding:12px; border-radius:9px; }
.web-board-tools { position:absolute; top:78px; left:24px; z-index:90; display:flex; gap:5px; }
.web-board-tools button { font-size:12px; }
.web-history-panel { position:absolute; z-index:110; top:90px; bottom:90px; left:88px; display:flex; flex-direction:column; width:380px; max-width:calc(100% - 112px); overflow:hidden; border:1px solid #3b3a40; border-radius:16px; background:#1b1b1eef; box-shadow:0 20px 65px #0006; backdrop-filter:blur(22px); }
.web-history-panel[hidden] { display:none; }
.web-history-backdrop { position:absolute; inset:0; z-index:105; background:#0505068c; }
.web-library-count { font-size:11px; color:var(--web-muted); }
.web-canvas-actions>button { display:flex; align-items:center; gap:7px; }
.web-history-head>div:first-child { display:flex; align-items:center; gap:8px; }
.web-history-art>span { display:flex; align-items:center; gap:3px; }
.web-history-art>span .web-icon { width:13px; height:13px; }
.web-history-panel:not(.is-expanded):not(.is-detail) .web-history-size { display:none; }
.web-empty-canvas>small { margin-top:10px; color:var(--web-muted); font-size:11px; }
.is-canvas #board-root .board-surface { background-color:#0d0d0f; }
.web-history-panel.is-expanded { inset:6%; width:auto; max-width:none; }
.web-history-panel.is-detail { inset:50% auto auto 50%; width:min(1100px,calc(100% - 120px)); height:min(740px,calc(100% - 120px)); max-width:none; transform:translate(-50%,-50%); background:#202022; }
.web-history-head { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; min-height:63px; padding:17px 20px; border-bottom:1px solid #323236; }
.web-history-head strong { display:block; font-size:15px; font-weight:550; }
.web-history-head small { display:block; margin-top:4px; color:var(--web-muted); font-size:10px; }
.web-history-head>div:last-child { display:flex; align-items:center; gap:6px; }
.web-history-head button { display:grid; place-items:center; width:30px; height:30px; padding:5px; border:0; background:none; color:#a6a4ad; font-size:19px; }
.web-history-head button svg { width:16px; height:16px; }
.web-history-controls { flex:none; display:flex; flex-wrap:wrap; gap:12px; padding:16px 20px; border-bottom:1px solid #303034; }
.web-history-controls input { width:100%; padding:9px 11px; font-size:11px; }
.web-history-controls .web-tabs { gap:2px; }
.web-history-controls .web-tabs button { font-size:11px; padding:6px 11px; }
.web-history-scope { display:flex; gap:8px; align-items:center; color:#87848e; font-size:10px; }
.web-history-scope select { max-width:140px; padding:5px; border:1px solid var(--web-line); border-radius:6px; background:#232326; color:#bcb8c5; font-size:10px; }
.web-history-list { flex:1; min-height:0; overflow:auto; padding:18px 20px 26px; scrollbar-color:#414047 transparent; }
.web-history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
.web-history-day { grid-column:1/-1; margin:3px 0 0; color:#aaa6b1; font-size:11px; font-weight:450; }
.web-history-card { min-width:0; overflow:hidden; border:0; border-radius:8px; cursor:pointer; }
.web-history-card:focus-visible { outline:2px solid var(--web-blue); outline-offset:4px; }
.web-history-art { position:relative; width:100%; aspect-ratio:1; overflow:hidden; border:1px solid #343438; border-radius:9px; background:#28282b; transition:border-color .15s; }
.web-history-card:hover .web-history-art { border-color:#80718e; }
.web-history-art img { width:100%; height:100%; object-fit:cover; }
.web-history-art>span { position:absolute; right:6px; bottom:6px; padding:3px 5px; border-radius:4px; background:#17151dcc; color:#e3deea; font-size:8px; }
.web-history-copy { min-width:0; display:grid; gap:5px; padding:9px 1px 0; }
.web-history-copy strong { display:-webkit-box; overflow:hidden; font-size:11px; font-weight:450; line-height:1.6; -webkit-box-orient:vertical; -webkit-line-clamp:1; color:#bab6c2; }
.web-history-card:hover .web-history-copy strong { color:#eee9f6; }
.web-history-copy small, .web-history-copy em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7e7b85; font-size:9px; font-style:normal; }
.web-history-copy em { color:#a098ae; }
.web-history-list[aria-busy="true"] .web-history-grid { opacity:.65; }
.web-history-panel.is-expanded .web-history-grid { grid-template-columns:repeat(auto-fill,minmax(min(var(--history-size,170px),100%),1fr)); gap:24px 20px; }
.web-history-panel.is-expanded .web-history-controls input { width:280px; }
.web-history-panel.is-expanded .web-history-controls { align-items:center; }
.web-history-page .web-history-controls { align-items:center; padding:0 0 24px; border:0; }
.web-history-page .web-history-controls input { max-width:300px; }
.web-history-page .web-history-list { padding:8px 0 24px; overflow:visible; }
.web-history-page .web-history-grid { grid-template-columns:repeat(auto-fill,minmax(min(var(--history-size,170px),100%),1fr)); gap:26px 20px; }
.web-history-page .web-history-copy strong { font-size:12px; }
.web-history-detail { flex:1; min-height:0; overflow:auto; padding:20px; }
.is-detail .web-history-detail { display:grid; grid-template-columns:minmax(0,1fr) 340px; overflow:hidden; padding:0; }
.web-detail-preview-area { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:28px; background:#151516; overflow:hidden; }
.web-detail-art { display:grid; place-items:center; width:100%; aspect-ratio:16/10; overflow:hidden; margin-bottom:18px; border:1px solid #333337; border-radius:10px; background:#18181a; }
.web-detail-preview-area .web-detail-art { height:100%; max-height:100%; aspect-ratio:auto; margin:0; border:0; background:transparent; }
.web-detail-art img, .web-detail-art video { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.web-detail-info { min-height:0; overflow:auto; padding:24px; border-left:1px solid #333336; scrollbar-color:#414047 transparent; }
.web-history-detail label { display:block; margin-bottom:8px; color:#8e8998; font-size:10px; }
.web-history-detail p { margin:0; padding:12px; border:1px solid #38363d; border-radius:9px; background:#28262c; font-size:11px; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.web-facts { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; margin:22px 0; color:#847f8c; font-size:10px; }
.web-facts strong { display:block; margin-top:6px; color:#cecad6; font-size:11px; line-height:1.6; font-weight:450; overflow-wrap:anywhere; }
.web-detail-actions { position:sticky; z-index:2; bottom:0; display:flex; gap:8px; margin-top:15px; padding:10px 0; background:#202022; }
.web-detail-actions button { flex:1; min-width:0; font-size:11px; }
.web-download { width:100%; margin:0 0 10px; background:transparent!important; font-size:11px; }
.web-target-label { margin-top:20px; }
#history-target, #history-result { width:100%; margin-bottom:12px; padding:10px; border:1px solid #3b3742; border-radius:8px; background:#28262d; color:#d5cfdf; font-size:11px; }
.web-detail-message:empty { display:none; }
.web-detail-message { margin-top:12px!important; color:#bbb0c9; }
.web-detail-loading { padding:22px; color:var(--web-secondary); font-size:12px; }
.web-detail-references { display:flex; gap:9px; flex-wrap:wrap; }
.web-detail-references figure { margin:0; width:64px; color:var(--web-secondary); font-size:9px; overflow-wrap:anywhere; }
.web-detail-references figcaption { margin-top:5px; }
.web-detail-references img, .web-detail-references figure>span { width:64px; height:64px; object-fit:cover; border-radius:7px; }
.web-authorized-media { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:100%; min-height:0; color:var(--web-secondary); font-size:10px; text-align:center; }
.web-authorized-media button { max-width:100%; padding:6px 8px; font-size:10px; }
.web-detail-references .web-authorized-media { width:64px; height:64px; overflow:hidden; }
.web-detail-references .web-authorized-media button { padding:3px; font-size:8px; }
.web-media-placeholder { color:var(--web-muted); font-size:11px; }
.web-empty-history { grid-column:1/-1; padding:55px 5px; color:var(--web-secondary); text-align:center; font-size:13px; }
.web-empty-history p { margin-top:8px; color:var(--web-muted); font-size:11px; }
.web-list-end { text-align:center; color:var(--web-muted); font-size:10px; margin-top:24px; }
.web-load-more { display:block; margin:24px auto 0; font-size:11px; }
.web-login { display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:100%; height:100%; overflow:auto; padding:28px 16px; background:radial-gradient(ellipse at 50% 35%,#24202c80,transparent 65%),#111112; }
.web-login-card { width:400px; max-width:100%; padding:36px; border:1px solid #36323d; border-radius:18px; background:#1b1a1eee; box-shadow:0 30px 80px #0003; }
.web-brand.large { width:42px; height:44px; margin-bottom:24px; }
.web-login-card h1 { margin:0 0 10px; font-size:23px; font-weight:550; }
.web-login-card p { margin:0 0 27px; color:var(--web-secondary); font-size:12px; line-height:1.75; }
.web-login-card label { display:block; margin:19px 0 8px; color:#aaa4b5; font-size:11px; }
.web-login-card input { width:100%; background:#141316; font-size:12px; }
.web-code-row { display:flex; gap:8px; }
.web-code-row input { min-width:0; }
.web-code-row button { flex:none; padding:9px; font-size:11px; }
.web-login-card .web-primary { width:100%; margin-top:25px; padding:12px; font-size:12px; }
.web-login-card small { display:block; margin-top:20px; color:var(--web-muted); font-size:10px; line-height:1.7; text-align:center; }
.web-login-card .web-inline-error { margin-top:16px; color:#e6a9b7; }
#toast-region { position:fixed; z-index:200000; right:22px; bottom:42px; }
.web-toast { max-width:min(380px,calc(100vw - 44px)); padding:13px 16px; border:1px solid #54485f; border-radius:11px; background:#29252f; box-shadow:0 12px 40px #0005; color:#ded6e8; font-size:12px; line-height:1.7; }
.web-toast.error { border-color:#855560; color:#ead3db; }
.web-import-dialog { width:520px; max-width:calc(100% - 32px); max-height:80vh; padding:26px; border:1px solid #49404f; border-radius:16px; background:#1d1b20; color:var(--web-text); box-shadow:0 24px 80px #0008; }
.web-import-dialog::backdrop { background:#0009; }
.web-import-dialog h2 { margin:0; font-size:18px; font-weight:550; }
.web-import-note, .web-import-summary { color:var(--web-secondary); font-size:12px; line-height:1.7; }
.web-import-dialog ol { list-style:none; margin:16px 0; padding:0; max-height:45vh; overflow:auto; }
.web-import-dialog li { display:grid; grid-template-columns:1fr auto; gap:8px 14px; padding:14px 0; border-bottom:1px solid var(--web-line); font-size:12px; }
.web-import-dialog li strong, .web-import-dialog li span { grid-column:1; overflow-wrap:anywhere; }
.web-import-dialog li span { color:var(--web-secondary); }
.web-import-dialog li[data-state="error"] span { color:#e6a9b7; }
.web-import-dialog li[data-state="success"] span { color:var(--web-green); }
.web-import-dialog li div { grid-column:2; grid-row:1/span 3; display:flex; align-items:center; gap:6px; }
.web-import-dialog progress { width:100%; height:5px; accent-color:var(--web-blue); }
.web-import-dialog button { font-size:11px; }
.web-import-dialog [hidden] { display:none; }
.web-import-dialog footer { display:flex; justify-content:flex-end; }
.web-icon { display:block; flex:none; width:20px; height:20px; }
.web-board-card.new svg { width:24px; height:24px; }
.web-canvas-title button[data-action="rename"] { display:flex; align-items:center; gap:8px; min-width:0; padding:5px 7px; border:0; background:transparent; text-align:left; }
.web-canvas-title button[data-action="rename"] :is(strong,span) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.web-library-sort { display:flex; align-items:center; gap:7px; color:var(--web-secondary); font-size:11px; }
.web-library-sort select, select.web-library-sort { padding:9px 11px; border:1px solid var(--web-line); border-radius:9px; background:#19191b; color:#b8b5bf; font-size:11px; }
.web-history-size { display:flex; align-items:center; gap:8px; margin-left:auto; color:#96909f; font-size:10px; }
.web-history-size input[type="range"] { width:75px; min-width:75px; max-width:75px; height:16px; margin:0; padding:0; border:0; border-radius:0; background:transparent; accent-color:#c3b4d4; cursor:pointer; }
.web-dialog { width:410px; max-width:calc(100% - 32px); max-height:calc(100% - 48px); overflow:auto; padding:28px; border:1px solid #46404f; border-radius:16px; background:#201e24; color:var(--web-text); box-shadow:0 24px 90px #0008; }
.web-dialog::backdrop { background:#060508a8; backdrop-filter:blur(4px); }
.web-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.web-dialog h2 { margin:0 0 12px; color:#e9e4ef; font-size:19px; font-weight:550; }
.web-dialog p { margin:0 0 20px; color:#9b94a6; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.web-dialog form { margin:0; }
.web-dialog label { display:block; margin:20px 0 9px; color:#b4abbe; font-size:11px; }
.web-dialog input { width:100%; min-width:0; padding:11px 12px; border:1px solid #443c4d; border-radius:9px; background:#17151b; color:#eee7f5; font-size:12px; }
.web-dialog button, .web-canvas-add-menu button, .web-empty-canvas button { padding:9px 13px; border:1px solid #413a49; border-radius:9px; background:#302a37; color:#ded5e9; font-size:12px; cursor:pointer; }
.web-dialog button:hover:not(:disabled), .web-canvas-add-menu button:hover:not(:disabled), .web-empty-canvas button:hover:not(:disabled) { border-color:#655673; background:#3b3344; }
.web-dialog button:disabled, .web-canvas-add-menu button:disabled, .web-empty-canvas button:disabled { opacity:.42; cursor:not-allowed; }
.web-dialog :is(button,input):focus-visible, .web-canvas-add-menu button:focus-visible, .web-empty-canvas button:focus-visible { outline:2px solid var(--web-blue); outline-offset:3px; }
.web-dialog .web-primary, .web-empty-canvas .web-primary { border-color:#e7e5ec; background:#e7e5ec; color:#171619; }
.web-dialog .web-primary:hover:not(:disabled), .web-empty-canvas .web-primary:hover:not(:disabled) { border-color:#fff; background:#fff; color:#111; }
.web-dialog-actions, .web-dialog footer { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }
.web-account-details { display:flex; flex-direction:column; gap:12px; margin:18px 0 0; color:#a8a0b3; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.web-account-details strong { color:#eee7f5; font-size:16px; font-weight:550; }
.web-account-details p { margin:0; }
.web-account-details dl { display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin:0; }
.web-account-details dt { color:#8f849c; }
.web-account-details dd { margin:0; color:#d5cadd; }
.web-account-details>button { margin-top:10px; align-self:stretch; }
.web-canvas-add-menu[popover] { position:fixed; inset:50% auto auto 86px; transform:translateY(-50%); width:180px; max-width:calc(100vw - 100px); margin:0; padding:7px; border:1px solid #49414f; border-radius:12px; background:#25212bec; color:#e5dcec; box-shadow:0 14px 50px #0006; backdrop-filter:blur(20px); }
.web-canvas-add-menu:popover-open { display:grid; gap:4px; }
.web-canvas-add-menu button { display:flex; align-items:center; gap:11px; min-height:42px; width:100%; padding:9px 11px; border:0; border-radius:7px; background:transparent; text-align:left; }
.web-canvas-add-menu button .web-icon { width:18px; height:18px; color:#b9a5cf; }
.web-empty-canvas { position:absolute; z-index:25; top:46%; left:50%; transform:translate(-50%,-50%); width:min(560px,calc(100% - 150px)); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; pointer-events:auto; }
.web-empty-canvas[hidden] { display:none; }
.web-empty-canvas h1, .web-empty-canvas h2, .web-empty-canvas>strong { margin:0; color:#e0dbe7; font-size:25px; font-weight:500; letter-spacing:.5px; }
.web-empty-canvas p { margin:0; color:#85808d; font-size:12px; line-height:1.9; }
.web-empty-canvas>div, .web-empty-canvas-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:15px; }
.web-empty-canvas button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:11px 16px; background:#25222b; color:#c9bfda; font-size:11px; }
.web-empty-canvas button .web-icon { width:18px; height:18px; }
.is-canvas #board-root .board-empty-hint { display:none; }
/* Desktop-only features remain unavailable in the browser shell. */
.web-shell [data-action="toggle-theme"], .web-shell [data-action="switch-prompt-library"], .web-shell [data-add-action="audio"],
.web-shell [data-selection-menu-group="ai"], .web-shell [data-action="capture-frame"], .web-shell [data-action="crop"],
.asset-preview-overlay [data-action="crop-image"], .asset-preview-overlay [data-action="resize-image"],
.asset-preview-overlay .asset-preview-ai-control, .asset-preview-overlay [data-action="copy"],
.asset-preview-overlay [data-action="reveal"], .asset-preview-overlay [data-action="open"],
.asset-preview-overlay [data-action="capture-frame"], .asset-preview-overlay [data-action="clip"] { display:none; }
@media (min-width:1600px) { .web-header { padding-inline:56px; } .web-page { padding:46px 56px 64px; } .web-board-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px 24px; } }
@media (max-width:1100px) { .web-header { padding-inline:28px; gap:32px; } .web-page { padding:32px 28px 60px; } .web-board-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 17px; } .web-library-toolbar { gap:18px; } .web-library-toolbar>div:first-child { gap:18px; } .web-search { width:180px; } .web-history-panel.is-detail { width:calc(100% - 70px); height:calc(100% - 90px); } .is-detail .web-history-detail { grid-template-columns:minmax(0,1fr) 310px; } .web-detail-info { padding:20px; } }
@media (max-width:800px) { .web-header { height:68px; gap:24px; padding-inline:22px; } .web-primary-nav { gap:16px; } .web-wordmark { font-size:14px; } .web-header-account { gap:8px; } .web-library-toolbar { flex-wrap:wrap; } .web-library-actions { margin-left:auto; } .web-page { padding:28px 22px 60px; } .web-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .web-canvas-title { max-width:65%; } .web-canvas-actions { gap:8px; padding-left:7px; } .web-canvas-actions .web-points { display:none; } .web-topbar #web-board-title { max-width:170px; } .web-history-panel.is-detail { width:calc(100% - 48px); height:calc(100% - 64px); } .is-detail .web-history-detail { grid-template-columns:minmax(0,1fr) 280px; } .web-detail-preview-area { padding:16px; } .web-detail-info { padding:17px; } .is-canvas .web-save-warning { max-width:calc(100% - 48px); top:124px; } .is-canvas #draft-recovery { left:88px; bottom:86px; max-width:calc(100% - 112px); top:auto; } }
@media (max-width:640px) { .web-header { gap:14px; padding-inline:16px; } .web-primary-nav { gap:13px; } .web-primary-nav button { font-size:11px; } .web-wordmark { display:none; } .web-header-account .web-points { display:none; } .web-page { padding:25px 16px 60px; } .web-page-header h1, .web-library-toolbar h1 { font-size:19px; } .web-library-toolbar>div:first-child { flex-wrap:wrap; gap:15px; } .web-library-actions { width:100%; } .web-search { flex:1; } .web-board-grid { gap:16px 12px; } .web-board-card.new { min-height:180px; } .web-board-caption { padding:12px; } .web-board-caption strong { font-size:12px; } .web-board-caption span { font-size:9px; } .web-fixture-banner { right:12px; bottom:8px; max-width:calc(100% - 24px); font-size:9px; } .web-fixture-banner span:last-child { display:none; } .is-canvas .web-topbar { inset:14px 12px auto; gap:8px; } .web-canvas-title { max-width:calc(100% - 85px); gap:6px; } .web-topbar #web-board-title { max-width:125px; } .web-save-state { font-size:9px; } .web-canvas-dock { left:12px; padding:5px; } .web-canvas-dock button { width:33px; height:36px; } .is-canvas #board-root .board-search-control { right:12px; top:70px; } .is-canvas #board-root .board-search-drawer { right:12px; top:116px; } .web-history-panel { left:68px; top:75px; bottom:80px; width:calc(100% - 80px); max-width:none; } .web-history-panel.is-expanded { inset:16px; } .web-history-panel.is-detail { width:calc(100% - 24px); height:calc(100% - 32px); } .is-detail .web-history-detail { display:block; overflow:auto; } .web-detail-preview-area { height:260px; padding:18px; } .web-detail-info { overflow:visible; border-left:0; border-top:1px solid #333336; padding:20px; } .web-detail-actions { bottom:-1px; } .web-history-head, .web-history-controls, .web-history-list { padding-inline:16px; } .web-history-page .web-history-list { padding-inline:0; } .web-history-page .web-history-grid { gap:20px 13px; } .web-history-page .web-history-controls input { max-width:none; } .web-history-panel.is-expanded .web-history-controls input { width:100%; } .is-canvas #draft-recovery { left:68px; max-width:calc(100% - 80px); } }
@media (prefers-reduced-motion:reduce) { .web-shell *, .web-shell *::before, .web-shell *::after, .web-login * { animation:none!important; transition:none!important; } }