:root { --an-ink:#17243a; --an-muted:#65758b; --an-line:#dce5ee; --an-surface:#fff; --an-bg:#f4f7fb; --an-blue:#436ce6; --an-blue-dark:#3154bf; --an-soft:#eaf0ff; }
:root[data-theme="dark"] { --an-ink:#e7eefc; --an-muted:#96a7c0; --an-line:#324158; --an-surface:#1a2638; --an-bg:#111b2a; --an-blue:#89a7ff; --an-blue-dark:#6184ef; --an-soft:#233657; }
body { background:var(--an-bg); color:var(--an-ink); }
.topbar { background:var(--an-surface)!important; border-color:var(--an-line)!important; }
.topbar nav { scrollbar-width:thin; }
.topbar nav a { white-space:nowrap; }
.topbar nav a.active,.topbar nav a:hover { color:var(--an-blue)!important; background:var(--an-soft)!important; }
.an-brand { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.an-brand img { width:36px; height:36px; object-fit:contain; margin-right:5px; }
.an-brand em { color:var(--an-muted)!important; }
.an-kicker { color:var(--an-blue); font-size:10px; letter-spacing:.17em; font-weight:850; }
.an-home-hero { min-height:380px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:35px; align-items:center; padding:42px 50px; border:1px solid var(--an-line); background:var(--an-surface); border-radius:28px; overflow:hidden; position:relative; }
.an-home-hero h1 { font-size:clamp(35px,4vw,62px); letter-spacing:-.055em; line-height:1.15; margin:13px 0; max-width:700px; }
.an-home-hero p { color:var(--an-muted); font-size:16px; line-height:1.7; }
.an-home-prompt { display:flex; gap:8px; padding:7px; border:1px solid var(--an-line); border-radius:16px; background:var(--an-bg); margin-top:24px; max-width:700px; }
.an-home-prompt input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--an-ink); padding:11px; }
.an-home-prompt button,.an-send,.an-new-session,.an-primary,.an-confirm { border:0; background:var(--an-blue); color:#fff; border-radius:11px; padding:11px 17px; font-weight:750; cursor:pointer; }
.an-home-prompt button:hover,.an-send:hover,.an-new-session:hover,.an-primary:hover,.an-confirm:hover { background:var(--an-blue-dark); }
.an-home-examples { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--an-muted); font-size:12px; margin-top:13px; }
.an-home-examples button { color:var(--an-blue); background:var(--an-soft); border:0; padding:7px 10px; border-radius:999px; cursor:pointer; }
.an-hero-art { aspect-ratio:1; border-radius:32px; background:radial-gradient(circle at 25% 20%,#c2d4ff,transparent 35%),radial-gradient(circle at 75% 80%,#92a9e7,transparent 42%),linear-gradient(135deg,#dbe8f4,#798db0); position:relative; box-shadow:inset 0 0 0 1px #ffffff78; transform:rotate(-5deg); }
.an-hero-art span { position:absolute; color:#fff; font-weight:850; letter-spacing:.12em; background:#254274ab; border:1px solid #ffffff8a; backdrop-filter:blur(8px); padding:9px 13px; border-radius:10px; box-shadow:0 12px 24px #324b6a28; }
.an-hero-art span:nth-child(1) { top:16%; left:9%; transform:rotate(-8deg); }
.an-hero-art span:nth-child(2) { top:49%; right:4%; transform:rotate(10deg); }
.an-hero-art span:nth-child(3) { bottom:12%; left:18%; transform:rotate(-3deg); }
.an-section-label { display:flex; align-items:end; justify-content:space-between; gap:15px; margin:42px 0 20px; }
.an-section-label h2 { margin:7px 0 0; font-size:26px; }
.an-section-label a { color:var(--an-blue); font-weight:750; }
.tool-card { background:var(--an-surface)!important; border-color:var(--an-line)!important; color:var(--an-ink)!important; }
.tool-card p,.tool-bottom { color:var(--an-muted)!important; }
.tool-bottom b { color:var(--an-blue)!important; border-color:var(--an-line)!important; }
.an-create { min-height:calc(100vh - 70px); max-width:1800px; margin:auto; padding:18px clamp(12px,2vw,30px); }
.an-create-loading { padding:60px; text-align:center; color:var(--an-muted); }
.an-layout { display:grid; grid-template-columns:265px minmax(0,1fr); gap:18px; min-height:calc(100vh - 115px); }
.an-sidebar,.an-main { background:var(--an-surface); border:1px solid var(--an-line); border-radius:22px; min-width:0; }
.an-sidebar { display:flex; flex-direction:column; padding:18px 13px; }
.an-side-head { padding:8px; }
.an-side-head h2 { font-size:22px; margin:8px 0 20px; }
.an-new-session { width:100%; text-align:left; }
.an-search { display:flex; align-items:center; gap:8px; border:1px solid var(--an-line); background:var(--an-bg); border-radius:11px; margin:14px 8px; padding:0 10px; color:var(--an-muted); }
.an-search input { width:100%; min-width:0; border:0; outline:0; padding:11px 0; background:transparent; color:var(--an-ink); }
.an-side-list { overflow:auto; flex:1; padding:7px 3px; }
.an-side-label { color:var(--an-muted); font-size:11px; font-weight:800; letter-spacing:.09em; display:block; padding:10px 13px; }
.an-session { display:flex; border-radius:11px; align-items:center; margin:3px 0; }
.an-session.active,.an-session:hover { background:var(--an-soft); }
.an-session>button:first-child { flex:1; min-width:0; border:0; background:transparent; color:var(--an-ink); text-align:left; padding:11px; cursor:pointer; }
.an-session b,.an-session small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-session b { font-size:13px; }
.an-session small { color:var(--an-muted); font-size:10px; margin-top:4px; }
.an-side-foot { border-top:1px solid var(--an-line); color:var(--an-muted); font-size:11px; padding:17px 8px 3px; }
.an-icon { background:transparent; border:0; color:var(--an-muted); font-size:19px; cursor:pointer; padding:4px 9px; }
.an-main { display:flex; flex-direction:column; height:calc(100vh - 115px); min-height:690px; }
.an-main-head { display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid var(--an-line); padding:22px 28px; }
.an-main-head h1 { font-size:22px; margin:6px 0 4px; }
.an-main-head p { color:var(--an-muted); font-size:12px; margin:0; }
.an-head-actions { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.an-balance { border:1px solid var(--an-line); border-radius:10px; padding:10px; color:var(--an-muted); font-size:12px; }
.an-transcript { flex:1; overflow-y:auto; padding:28px max(25px,calc((100% - 880px)/2)); scrollbar-width:thin; }
.an-welcome { text-align:center; display:grid; place-content:center; height:100%; min-height:260px; }
.an-orb { width:72px; height:72px; margin:auto; border-radius:23px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#7498f7,#355abc); box-shadow:0 18px 35px #456cd13d; font-size:31px; font-weight:800; }
.an-welcome h2 { font-size:26px; margin:20px 0 5px; }.an-welcome p,.an-muted { color:var(--an-muted); font-size:13px; line-height:1.6; }
.an-compose { margin:0 max(25px,calc((100% - 930px)/2)) 22px; background:var(--an-bg); border:1px solid var(--an-line); border-radius:17px; padding:13px; box-shadow:0 8px 30px #203d6810; }
.an-compose-top,.an-compose-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.an-compose-top>span:last-child { color:var(--an-muted); font-size:11px; }
.an-mode { display:flex; gap:5px; margin:13px 0; }.an-mode button { background:transparent; border:1px solid transparent; color:var(--an-muted); border-radius:9px; padding:8px 13px; cursor:pointer; }.an-mode button.active { color:var(--an-blue); background:var(--an-soft); border-color:var(--an-blue); }
.an-compose textarea { width:100%; min-height:75px; resize:vertical; border:0; outline:0; background:transparent; color:var(--an-ink); font:inherit; line-height:1.6; }
.an-compose-bottom { border-top:1px solid var(--an-line); padding-top:10px; }.an-compose-bottom>div { display:flex; gap:6px; flex-wrap:wrap; }
.an-attach-button { border:0; color:var(--an-muted); background:transparent; padding:9px; cursor:pointer; font-size:12px; }.an-send { white-space:nowrap; }.an-send:disabled { opacity:.5; cursor:default; }
.an-attachments { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }.an-attachment { display:flex; align-items:center; gap:5px; border:1px solid var(--an-line); border-radius:8px; padding:3px 7px; font-size:11px; }.an-attachment select { border:0; color:var(--an-ink); background:var(--an-surface); max-width:78px; }
.an-pricing-note { margin:8px 4px 0; color:var(--an-muted); font-size:11px; }
.an-gated { display:grid; place-content:center; text-align:center; min-height:65vh; }.an-gated h1 { margin:8px 0; }.an-gated p { color:var(--an-muted); }.an-gated a { color:var(--an-blue); font-weight:750; }
.an-message { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; margin:0 0 26px; }.an-message-icon { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--an-blue); color:#fff; font-size:12px; font-weight:800; }.an-message.user .an-message-icon { background:#6e7d91; }.an-message-meta { display:flex; gap:10px; align-items:center; }.an-message-meta strong { font-size:12px; }.an-message-meta time { color:var(--an-muted); font-size:10px; }.an-message-body>p { margin:8px 0; white-space:pre-wrap; line-height:1.7; font-size:13px; }.an-stream-status { color:var(--an-blue); font-size:12px; }
.an-proposal,.an-action { border:1px solid var(--an-line); background:var(--an-bg); border-radius:16px; padding:20px; margin:15px 0; }.an-proposal-head,.an-section-line { display:flex; justify-content:space-between; align-items:center; gap:15px; }.an-proposal h3 { margin:4px 0 17px; font-size:18px; }.an-badge { color:var(--an-blue); background:var(--an-soft); border-radius:999px; padding:6px 10px; font-size:11px; }.an-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }.an-field,.an-size-pair label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:750; }.an-field input,.an-field textarea,.an-field select,.an-shot input,.an-shot textarea,.an-size-pair input { background:var(--an-surface); color:var(--an-ink); border:1px solid var(--an-line); border-radius:9px; padding:9px; width:100%; font:inherit; }.an-field textarea { min-height:78px; resize:vertical; }.an-size-pair { display:flex; gap:8px; }.an-size-auto { align-self:end; color:var(--an-muted); font-size:11px; }.an-shots { border-top:1px solid var(--an-line); margin-top:16px; padding-top:15px; }.an-section-line span { color:var(--an-muted); font-size:11px; }.an-shot { display:grid; grid-template-columns:35px 1fr; gap:9px; border-left:2px solid var(--an-blue); margin:13px 0; padding-left:12px; }.an-shot-index { color:var(--an-blue); font-weight:800; font-size:11px; padding-top:11px; }.an-shot>div { display:grid; gap:6px; }.an-shot textarea { min-height:55px; }.an-shot-meta { display:flex; align-items:center; gap:20px; font-size:11px; }.an-shot-meta label { display:flex; align-items:center; gap:5px; }.an-shot-meta input[type=number] { width:52px; }.an-shot-meta input[type=checkbox] { width:auto; }.an-plan-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid var(--an-line); padding-top:14px; margin-top:15px; }.an-secondary { border:1px solid var(--an-line); background:var(--an-surface); color:var(--an-ink); border-radius:9px; padding:9px 12px; cursor:pointer; }.an-primary,.an-confirm { padding:9px 12px; }.an-confirm { margin-left:auto; }.an-quote { display:flex; flex-direction:column; gap:1px; margin-left:auto; font-size:11px; }.an-quote strong { color:var(--an-blue); font-size:17px; }.an-quote small { color:var(--an-muted); }.an-text-button { border:0; background:transparent; color:var(--an-blue); cursor:pointer; }.an-action { display:flex; justify-content:space-between; gap:10px; align-items:center; }.an-action>div { display:grid; gap:4px; }.an-action strong { font-size:13px; }.an-action small { color:var(--an-muted); }.an-action a { color:var(--an-blue); font-size:12px; }.an-media { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; margin:12px 0; }.an-media img,.an-media video { width:100%; max-height:340px; object-fit:contain; border-radius:10px; background:#111; }.an-error { color:#bb3d4d; font-size:12px; padding:7px 28px; }
.an-dialog { width:min(750px,95vw); max-height:80vh; border:1px solid var(--an-line); background:var(--an-surface); color:var(--an-ink); border-radius:17px; padding:20px; }.an-dialog::backdrop { background:#0b1733a8; }.an-dialog-head { display:flex; justify-content:space-between; }.an-dialog h2 { margin:6px 0 15px; }.an-assets-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; overflow:auto; }.an-assets-grid button { border:1px solid var(--an-line); background:var(--an-bg); color:var(--an-ink); padding:5px; border-radius:9px; cursor:pointer; }.an-assets-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }.an-assets-grid span { display:block; font-size:11px; padding:5px; }
@media(max-width:1100px) { .an-layout { grid-template-columns:215px minmax(0,1fr); gap:10px; } .an-create { padding:10px; } .an-home-hero { padding:32px; } }
@media(max-width:760px) { .an-layout { display:block; }.an-sidebar { margin-bottom:10px; }.an-side-list { max-height:170px; }.an-main { min-height:700px; height:calc(100vh - 260px); }.an-home-hero { display:block; padding:27px; }.an-hero-art { display:none; }.an-section-label { align-items:start; }.an-transcript { padding:20px 15px; }.an-compose { margin:0 12px 12px; }.an-main-head { padding:17px; }.an-plan-grid { grid-template-columns:1fr; }.an-assets-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .an-home-prompt { flex-direction:column; }.an-section-label a { display:none; }.an-create { padding:8px; }.an-main-head { align-items:start; }.an-main-head p,.an-balance { display:none; }.an-compose-top>span:last-child { display:none; }.an-compose-bottom { align-items:stretch; flex-direction:column; }.an-send { width:100%; }.an-plan-actions { align-items:stretch; }.an-quote { margin-left:0; }.an-confirm { margin-left:0; } }
.an-layout { grid-template-columns:235px minmax(0,1fr) 265px; }
.an-layout:has(.an-context.collapsed) { grid-template-columns:235px minmax(0,1fr) 48px; }
.an-main>.an-mode { border-bottom:1px solid var(--an-line); padding:9px 26px; margin:0; }
.an-main>.an-mode button { min-width:140px; }
.an-workflow { display:flex; align-items:center; gap:7px; margin:9px 0; font-size:11px; color:var(--an-muted); }
.an-workflow select { border:1px solid var(--an-line); color:var(--an-ink); background:var(--an-surface); border-radius:8px; padding:6px 9px; }
.an-attachment-thumb { width:32px; height:32px; object-fit:cover; border-radius:5px; }
.an-context { min-width:0; background:var(--an-surface); border:1px solid var(--an-line); border-radius:22px; overflow:hidden; }
.an-context-head { display:flex; align-items:center; justify-content:space-between; min-height:62px; padding:0 13px; border-bottom:1px solid var(--an-line); }
.an-context.collapsed .an-context-head { flex-direction:column; padding:12px 4px; gap:10px; }.an-context.collapsed .an-context-head strong { writing-mode:vertical-rl; font-size:12px; }
.an-context-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--an-line); }
.an-context-tabs button { border:0; background:transparent; color:var(--an-muted); padding:11px 3px; cursor:pointer; font-size:12px; }.an-context-tabs button.active { color:var(--an-blue); border-bottom:2px solid var(--an-blue); }
.an-context-body { padding:17px; overflow:auto; max-height:calc(100vh - 220px); }.an-context-body h3 { font-size:16px; line-height:1.4; }.an-context-body p { color:var(--an-muted); font-size:12px; line-height:1.6; }
.an-context-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.an-context-grid button { border:1px solid var(--an-line); color:var(--an-ink); background:var(--an-bg); padding:4px; border-radius:9px; cursor:pointer; }.an-context-grid img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:5px; }.an-context-grid span { font-size:10px; }
.an-context-result video { width:100%; max-height:180px; }.an-context-result a { color:var(--an-blue); font-size:11px; }
@media(max-width:1180px) { .an-layout,.an-layout:has(.an-context.collapsed) { grid-template-columns:205px minmax(0,1fr); }.an-context { grid-column:2; min-height:160px; }.an-main { min-height:680px; } }
@media(max-width:760px) { .an-layout,.an-layout:has(.an-context.collapsed) { display:block; }.an-context { margin-top:10px; }.an-context-body { max-height:320px; } }
.an-home-compact { padding-top:24px; }.an-home-entry { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(420px,1.2fr); align-items:center; gap:26px; border:1px solid var(--an-line); background:var(--an-surface); border-radius:18px; padding:23px 26px; }
.an-home-entry h1 { font-size:27px; margin:5px 0; line-height:1.2; letter-spacing:-.035em; }.an-home-entry p { color:var(--an-muted); font-size:12px; margin:0; }
.an-home-entry .an-home-prompt { margin:0; max-width:none; }.an-home-compact .an-section-label { margin:26px 0 13px; }.an-home-compact .an-section-label h2 { font-size:20px; }
.an-home-compact .tool-grid { gap:13px; }.an-home-compact .tool-card { min-height:190px; padding:22px; border-radius:19px; }.an-home-compact .tool-card h2 { font-size:18px; }.an-home-compact .tool-card p { font-size:12px; line-height:1.5; }.an-home-compact .tool-symbol { width:40px; height:40px; border-radius:11px; font-size:20px; margin-bottom:13px; }.an-home-compact .tool-bottom { padding-top:12px; }
.an-size-rule { display:block; color:var(--an-muted); font-size:11px; line-height:1.5; }.an-size-error { color:#c84954; font-size:11px; }.an-proposal.dirty .an-badge { color:#a46419; background:#fff1dc; }.an-result-buttons { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }.an-result-buttons button { font-size:10px; padding:6px; }
@media(max-width:850px) { .an-home-entry { grid-template-columns:1fr; gap:14px; }.an-home-compact .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .an-home-entry { padding:17px; }.an-home-compact .tool-grid { grid-template-columns:1fr; } }
.an-create { height:calc(100vh - 66px); min-height:0; padding-block:12px; }
.an-layout { height:100%; min-height:0; }
.an-sidebar,.an-context { min-height:0; }
.an-main { height:100%; min-height:0; }
@media(max-width:1180px) { .an-create { height:auto; min-height:calc(100vh - 66px); }.an-layout { height:auto; }.an-main { height:min(760px,calc(100vh - 90px)); min-height:580px; } }
@media(max-width:760px) { .an-main { height:calc(100vh - 160px); min-height:580px; } }
.an-home-entry .an-home-prompt { flex-wrap:wrap; }
.an-home-upload { color:var(--an-blue); background:var(--an-soft); border-radius:9px; padding:10px; white-space:nowrap; font-size:12px; cursor:pointer; }
.an-home-files { flex-basis:100%; color:var(--an-muted); font-size:11px; padding-inline:5px; }
.an-home-files:empty { display:none; }
.an-message-refs { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.an-message-refs>div { display:grid; gap:3px; color:var(--an-muted); font-size:10px; text-align:center; }
.an-message-refs img { width:62px; height:62px; object-fit:cover; border:1px solid var(--an-line); border-radius:7px; }
.an-action { display:block; }
.an-action-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.an-action-head small { margin-left:auto; }
.an-result-item { min-width:0; }
.an-result-item>a,.an-result-buttons a { display:inline-block; color:var(--an-blue); font-size:11px; padding:7px 4px; }
.an-image-size { display:block; color:var(--an-muted); font-size:10px; margin-top:5px; }
.an-turn-outcome { display:block; color:var(--an-muted); margin:7px 0; }
.an-message-billing,.an-billing-pending { margin:10px 0; padding:9px 11px; border:1px solid var(--an-line); border-radius:9px; background:var(--an-surface); color:var(--an-muted); font-size:11px; }
.an-message-billing { display:grid; gap:5px; }
.an-message-billing strong { color:var(--an-ink); font-size:12px; }
.an-message-billing details summary { cursor:pointer; color:var(--an-blue); }
.an-message-billing details small { display:block; margin-top:5px; line-height:1.5; }
.an-readonly-note { border-top:1px solid var(--an-line); color:var(--an-muted); padding:14px 22px; font-size:12px; }
.an-context-result { margin-bottom:12px; }
.an-context-result img { width:100%; max-height:180px; object-fit:contain; border-radius:8px; }
.an-plan-references { border-top:1px solid var(--an-line); padding-top:13px; margin-top:13px; }
.an-reference-row { display:flex; align-items:center; gap:7px; margin:9px 0; }
.an-plan-reference { display:flex; align-items:center; gap:7px; min-width:76px; }
.an-plan-reference img { width:52px; height:52px; object-fit:cover; border:1px solid var(--an-line); border-radius:8px; }
.an-plan-reference small,.an-reference-missing { color:var(--an-muted); font-size:10px; }
.an-reference-row select { min-width:0; border:1px solid var(--an-line); border-radius:8px; color:var(--an-ink); background:var(--an-surface); padding:7px; }
.an-reference-row select[data-binding-asset] { flex:1; }
.an-shot-directives { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:580px) { .an-reference-row { flex-wrap:wrap; }.an-shot-directives { grid-template-columns:1fr; } }
.an-main-head { min-height:62px; padding:10px 22px; }
.an-main-head h1 { font-size:17px; margin:0; }
.an-main>.an-mode { min-height:47px; padding:5px 20px; }
.an-main>.an-mode button { padding:7px 12px; }
.an-side-head h2 { font-size:18px; margin:0 0 12px; }
.an-compose { margin-bottom:14px; }
.an-workflow { margin:0 0 7px; }