:root { --an-ink:#242936; --an-muted:#667080; --an-line:#dfe2e8; --an-surface:#fff; --an-bg:#f4f5f7; --an-blue:#5868db; --an-blue-dark:#4353c7; --an-soft:#eef0fc; --bg:var(--an-bg); --surface:var(--an-surface); --surface-2:var(--an-soft); --text:var(--an-ink); --muted:var(--an-muted); --line:var(--an-line); --accent:var(--an-soft); --accent-text:var(--an-blue); --lime:var(--an-blue); --blue:var(--an-blue); }
:root[data-theme="dark"] { --an-ink:#e9ebf1; --an-muted:#a1a8b5; --an-line:#343844; --an-surface:#1b1e25; --an-bg:#111318; --an-blue:#a5afff; --an-blue-dark:#8490ed; --an-soft:#292d43; --bg:var(--an-bg); --surface:var(--an-surface); --surface-2:var(--an-soft); --text:var(--an-ink); --muted:var(--an-muted); --line:var(--an-line); --accent:var(--an-soft); --accent-text:var(--an-blue); --lime:var(--an-blue); --blue:var(--an-blue); }
body { background:var(--an-bg); color:var(--an-ink); }
.primary { background:var(--an-blue)!important; color:#fff!important; }.primary:hover { background:var(--an-blue-dark)!important; }
.tool-symbol { background:linear-gradient(135deg,#809be2,#476acc)!important; }
:root .panel,:root .recent,:root .tool-card { background:var(--an-surface); border-color:var(--an-line); color:var(--an-ink); }
:root .form-panel,:root .result-panel { background:var(--an-surface); }
:root .field label,:root .empty b,:root .result-head b { color:var(--an-ink); }
:root .field textarea,:root .field input,:root .field select,:root .auth-card input,:root .tabs,:root .uploadbox,:root .scenario,:root .outline,:root .recent button,:root .result-panel button,:root .layers button { background:var(--an-bg); color:var(--an-ink); border-color:var(--an-line); }
:root .tabs button { color:var(--an-muted); }:root .tabs button.active,:root .scenario.active { background:var(--an-soft); color:var(--an-blue); border-color:var(--an-blue); }
:root .scenario b,:root .scenario small { color:inherit; }:root .scenario small { opacity:.7; }
:root .empty { color:var(--an-muted); }:root .empty>div:first-child { background:var(--an-soft); color:var(--an-blue); }
:root .submitline,:root .result-head { border-color:var(--an-line); color:var(--an-muted); }:root .form-panel .submitline { background:var(--an-surface); }
:root .image-results figure,:root .canvas-scroller { background:var(--an-bg); }
:root .tool-card p,:root .tool-bottom { color:var(--an-muted); }
:root .compact-pagebar a,:root .back,:root .muted { color:var(--an-muted); }
.an-site-header { height:48px; min-height:48px; display:flex; align-items:center; gap:20px; padding:0 clamp(12px,2vw,28px); background:var(--an-surface); border-bottom:1px solid var(--an-line); color:var(--an-ink); }
.an-site-brand { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:15px; font-weight:750; text-decoration:none; color:var(--an-ink); }
.an-site-brand img { width:29px; height:29px; object-fit:contain; }.an-site-brand em { font-style:normal; color:var(--an-muted); font-weight:500; }
.an-site-header nav { display:flex; gap:3px; flex:1; min-width:0; align-items:center; overflow-x:auto; scrollbar-width:thin; }
.an-site-header nav>a { color:var(--an-muted); text-decoration:none; white-space:nowrap; flex:none; border-radius:7px; padding:7px 10px; font-size:13px; font-weight:650; cursor:pointer; }
.an-site-header nav>a:hover,.an-site-header nav>a.active { color:var(--an-blue); background:var(--an-soft); }
.an-site-header nav>a:focus-visible { outline:2px solid var(--an-blue); outline-offset:-2px; }
.an-site-spacer { flex:1; }.an-site-actions { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.an-theme { border:1px solid var(--an-line); border-radius:7px; background:var(--an-surface); color:var(--an-ink); width:30px; height:30px; padding:0; cursor:pointer; }
.an-site-profile { position:relative; }.an-site-profile summary { list-style:none; display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12px; }.an-site-profile summary::-webkit-details-marker { display:none; }
.an-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--an-blue); color:#fff; font-weight:800; }.an-profile-name { max-width:100px; overflow:hidden; text-overflow:ellipsis; }
.an-site-menu { position:absolute; z-index:30; right:0; top:calc(100% + 12px); min-width:150px; padding:6px; background:var(--an-surface); border:1px solid var(--an-line); box-shadow:0 15px 30px #142d4e25; border-radius:11px; }.an-site-menu a,.an-site-menu button { display:block; width:100%; text-align:left; padding:10px; border:0; border-radius:7px; color:var(--an-ink); background:transparent; text-decoration:none; font-size:12px; cursor:pointer; }.an-site-menu a:hover,.an-site-menu button:hover { background:var(--an-soft); }
@media(max-width:760px) { .an-site-header { gap:8px; padding:0 10px; }.an-site-brand { font-size:13px; }.an-site-brand img { width:25px; height:25px; }.an-site-actions { margin-left:auto; }.an-profile-name { display:none; } }
@media(max-width:480px) { .an-site-brand span { display:none; }.an-site-header nav { gap:0; }.an-site-header nav>a { padding:6px; font-size:12px; }.an-site-actions { gap:5px; } }
:root .account { padding-bottom:16px; }
:root .account .two-col { min-height:0; }
:root .account .form-panel { gap:10px; }
:root .canvas-layout { height:calc(100vh - 170px); min-height:0; }
:root .canvas-side { height:100%; max-height:none; min-height:0; overflow-y:auto; }
:root .canvas-side .button-row.sticky { background:var(--an-surface); border-top:1px solid var(--an-line); z-index:2; }
:root .canvas-scroller { max-height:none; }
:root .task-tab.active,:root .slot-card.active,:root .layers button.active { border-color:var(--an-blue); color:var(--an-blue); }
:root .range-field b,:root .result-grid figcaption a,:root .placeholder,:root .empty-result>span { color:var(--an-blue); }
:root .range-field input,:root .slot-top input { accent-color:var(--an-blue); }
:root .upload-target,:root .taskbar .new-task { border-color:var(--an-line); }
:root .preview-tools a,:root .slot-actions button,:root .slot-actions a { background:var(--an-soft); color:var(--an-blue); border-color:var(--an-line); }
:root .field input:focus,:root .field textarea:focus,:root .field select:focus { border-color:var(--an-blue); }
:root .video-agent-link,:root .video-agent-unavailable { flex:1; display:grid; place-items:center; min-height:42px; border-radius:11px; color:var(--an-blue); font-size:13px; font-weight:750; }
:root .video-agent-link:hover { background:var(--an-soft); }
:root .video-agent-unavailable { color:var(--an-muted); opacity:.7; }
@media(max-width:760px) { :root .canvas-layout { height:auto; min-height:620px; } :root .canvas-side { height:650px; } }
:root .canvas-side .button-row.sticky { display:grid; grid-template-columns:1fr 1fr; flex:none; }
:root .canvas-side .button-row.sticky>[data-act="generate-canvas"] { grid-column:1 / -1; }
body:has(.account) .foot { display:none; }
:root .account { height:calc(100vh - 48px); overflow:hidden; display:flex; flex-direction:column; }
:root .account .two-col { flex:1; min-height:0; overflow:hidden; }
:root .account .two-col>.panel { min-height:0; overflow:hidden; }
:root .account .ledger { flex:1; overflow:auto; min-height:0; }
:root .account .two-col>.account-settings { overflow-y:auto; }
:root .account .account-settings>h2,:root .account .account-settings>p { margin-bottom:0; }
:root .account .password-form { display:flex; flex-direction:column; gap:12px; flex-shrink:0; border-top:1px solid var(--an-line); padding-top:20px; margin-top:12px; }
:root .account .password-form h2,:root .account .password-form p { margin-bottom:0; }
@media(min-width:901px) { :root .account .account-settings .package-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } :root .account .account-settings .package-list button { padding:12px 8px; font-size:12px; text-align:center; } }
@media(max-width:760px) { :root .account { height:auto; overflow:visible; } :root .account .two-col { overflow:visible; } }
body:has(.canvas-layout) .foot { display:none; }
:root .workspace:has(.canvas-layout) { height:calc(100vh - 48px); overflow:hidden; display:flex; flex-direction:column; padding-bottom:12px; }
:root .workspace .canvas-layout { flex:1; height:auto; min-height:0; }
@media(max-width:760px) { :root .workspace:has(.canvas-layout) { height:auto; overflow:visible; } :root .workspace .canvas-layout { min-height:620px; } }
.an-task-progress .an-progress-track { position:relative; width:min(270px,75vw); height:4px; overflow:hidden; border-radius:4px; background:var(--an-line); margin:0 auto 20px; }
.an-task-progress .an-progress-track i { position:absolute; left:0; top:0; width:25%; height:100%; border-radius:4px; background:var(--an-blue); animation:an-task-indeterminate 1.6s ease-in-out infinite; }
@keyframes an-task-indeterminate { from { transform:translateX(-100%); } to { transform:translateX(500%); } }
.image-results figure>[data-image-preview] { display:block; width:100%; border:0; padding:0; background:transparent; cursor:zoom-in; }
.image-results figure>[data-image-preview] img { display:block; width:100%; height:auto; max-height:55vh; object-fit:contain; }
.an-home-compact { padding-top:20px; }
.an-home-launch { display:flex; align-items:center; flex-wrap:wrap; gap:7px; width:100%; min-height:65px; padding:10px; background:var(--an-surface); border:1px solid var(--an-line); border-radius:10px; }
.an-home-launch>input { flex:1; min-width:180px; height:34px; padding:5px 9px; border:0; outline:0; background:transparent; color:var(--an-ink); font:inherit; font-size:14px; }
.an-home-launch>.an-home-upload { padding:7px 9px; border-radius:6px; color:var(--an-blue); background:var(--an-soft); font-size:12px; cursor:pointer; white-space:nowrap; }
.an-home-launch>button { min-height:33px; padding:6px 11px; border:0; border-radius:6px; background:var(--an-blue); color:#fff; font-weight:700; cursor:pointer; }
.an-home-launch .an-home-files { display:flex; flex-basis:100%; gap:7px; margin:0; padding:0; }
.an-home-launch .an-home-files>span { display:flex; align-items:center; gap:4px; max-width:160px; color:var(--an-muted); }
.an-home-launch .an-home-files button { padding:0; border:0; background:transparent; cursor:zoom-in; }
.an-home-launch .an-home-files img { width:34px; height:34px; object-fit:cover; border-radius:5px; }
.an-home-launch .an-home-files small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-home-compact .an-section-label { margin:17px 0 11px; }
.an-home-compact .an-section-label h2 { margin:0; font-size:16px; }
.filechips { display:flex; flex-wrap:wrap; gap:6px; }
.filechips>span { display:flex; align-items:center; gap:5px; max-width:190px; padding:4px; border:1px solid var(--an-line); border-radius:7px; background:var(--an-surface); }
.filechips>span>[data-image-preview] { flex:none; border:0; padding:0; background:transparent; cursor:zoom-in; }
.filechips>span>[data-image-preview] img { display:block; width:30px; height:30px; object-fit:cover; border-radius:4px; }
.filechips>span>small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--an-muted); }
.filechips>span>[data-act="remove-upload"] { margin-left:auto; border:0; background:transparent; color:var(--an-muted); }
.result-panel .result-head span { display:none; }
:root[data-theme="light"] .field textarea,:root[data-theme="light"] .field input,:root[data-theme="light"] .field select,:root[data-theme="light"] .auth-card input,:root[data-theme="light"] .tabs,:root[data-theme="light"] .uploadbox,:root[data-theme="light"] .scenario,:root[data-theme="light"] .outline,:root[data-theme="light"] .recent button,:root[data-theme="light"] .result-panel button,:root[data-theme="light"] .layers button { background:var(--an-bg); color:var(--an-ink); border-color:var(--an-line); }
:root[data-theme="light"] .tabs button.active,:root[data-theme="light"] .scenario.active { background:var(--an-soft); color:var(--an-blue); border-color:var(--an-blue); }
:root[data-theme="light"] .field label,:root[data-theme="light"] .empty b { color:var(--an-ink); }
:root[data-theme="light"] .submitline,:root[data-theme="light"] .result-head,:root[data-theme="light"] .foot { border-color:var(--an-line); color:var(--an-muted); }
:root[data-theme="light"] .form-panel .submitline,:root[data-theme="light"] .button-row.sticky { background:var(--an-surface); }
:root[data-theme="light"] .image-results figure,:root[data-theme="light"] .canvas-scroller { background:var(--an-bg); }
:root[data-theme="light"] .image-size-controls { background:var(--an-bg); border-color:var(--an-line); }
:root[data-theme="light"] .image-size-controls select { background:var(--an-surface); color:var(--an-ink); border-color:var(--an-line); }
:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .auth-card input,:root[data-theme="dark"] .tabs,:root[data-theme="dark"] .uploadbox,:root[data-theme="dark"] .scenario,:root[data-theme="dark"] .outline,:root[data-theme="dark"] .recent button,:root[data-theme="dark"] .result-panel button,:root[data-theme="dark"] .layers button { background:var(--an-bg); color:var(--an-ink); border-color:var(--an-line); }
:root .tool-card.mint .tool-symbol { background:linear-gradient(135deg,#44c4ad,#5a70e2)!important; }
:root .tool-card.violet .tool-symbol { background:linear-gradient(135deg,#8d78e5,#5d6fe0)!important; }
:root .tool-card.blue .tool-symbol { background:linear-gradient(135deg,#63a9d8,#6480dd)!important; }
:root .tool-card.pink .tool-symbol { background:linear-gradient(135deg,#e493b2,#9c7de3)!important; }
:root .tool-card.cyan .tool-symbol { background:linear-gradient(135deg,#53bed0,#5688df)!important; }
.workspace-skeleton { display:grid; gap:20px; padding:12px 0; }
.workspace-skeleton i { display:block; height:36px; border-radius:8px; background:var(--surface-2); }
.workspace-skeleton i:nth-child(2) { height:100px; }