:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0d0e12; color: #f2f3f7; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
.auth-shell { height: 100vh; height: 100dvh; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 24px; background: radial-gradient(circle at 20% 10%, #392118 0, transparent 36%), #0d0e12; }
.auth-card { width: min(440px, 100%); padding: 30px; border: 1px solid #343741; border-radius: 18px; background: #14151aef; box-shadow: 0 24px 70px #0009; }
.auth-brand { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 26px; }.auth-brand h1 { margin: 0 0 7px; font-size: 25px; }.auth-brand p { margin: 0; color: #9295a0; font-size: 13px; line-height: 1.5; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 20px; padding: 4px; border-radius: 10px; background: #0d0e12; }.auth-tabs button { border: 0; border-radius: 7px; padding: 9px; background: transparent; color: #9295a0; cursor: pointer; }.auth-tabs button.active { background: #272a33; color: #fff; }
.auth-form button { width: 100%; border: 0; border-radius: 8px; padding: 11px; background: #ff6a3d; color: #fff; cursor: pointer; }.auth-form button:disabled { opacity: .55; cursor: wait; }#auth-state { min-height: 20px; margin: 16px 0 0; color: #9295a0; font-size: 12px; }
.app-shell { height: 100vh; height: 100dvh; display: grid; grid-template: 58px minmax(0,1fr) / 168px minmax(0,1fr) 260px; }
.topbar { min-width: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; border-bottom: 1px solid #292b34; background: #14151a; }.topbar > div:first-child { min-width:0; display:flex; align-items:center }.topbar > div:first-child strong { flex:none }.topbar .crumb { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; background: #ff6a3d; font-size: 11px; font-weight: 800; }
.crumb, .hint, #inspector-empty, #node-meta { color: #828592; font-size: 12px; }
.status { color: #a3a6b0; font-size: 12px; }.status span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #60d394; }.project-actions { min-width:0; display:flex; align-items:center; gap:8px }.project-actions button,.workflow button { flex:none; border:1px solid #343741; border-radius:7px; padding:7px 9px; background:#1b1d24; color:#c7c9d1; cursor:pointer }
.toolbox, .inspector { z-index: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px 14px; border-right: 1px solid #292b34; background: #14151a; }.inspector { overflow-x: hidden; border-right: 0; border-left: 1px solid #292b34; }
.eyebrow { margin: 0 0 14px; color: #696c77; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.tool { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #c7c9d1; text-transform: capitalize; cursor: pointer; }.tool:hover { border-color: #383b46; background: #1c1e25; }.tool span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #272a33; color: #ff916f; }
.hint { line-height: 1.7; }
.viewport { position: relative; min-height: 0; overflow: hidden; cursor: grab; background-color: #101116; background-image: radial-gradient(#353743 1px, transparent 1px); background-size: 24px 24px; }
.canvas { position: absolute; inset: 0; transform-origin: 0 0; }
.edges { position:absolute; overflow:visible; width:1px; height:1px; pointer-events:none; }
.edges line { stroke:#ff6a3d; stroke-width:3; pointer-events:stroke; cursor:pointer; }
.graph-group { position:absolute; border:2px dashed #596074; border-radius:18px; padding:10px; color:#9299aa; background:#272b3822; }
.node { position: absolute; width: 250px; min-height: 132px; border: 1px solid #353843; border-radius: 12px; background: #1a1c23; box-shadow: 0 12px 28px #0007; overflow: hidden; cursor: move; user-select: none; }.node.selected { border-color: #ff7047; box-shadow: 0 0 0 2px #ff704733, 0 12px 28px #0007; }
.node header { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #2b2e37; }.node header span { color: #ff8b68; }.node header strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.node header small { color: #6f727d; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.node p { min-height: 48px; margin: 0; padding: 12px; color: #aeb0b9; font-size: 12px; line-height: 1.5; }.node footer { padding: 0 12px 10px; color: #696c77; font-size: 10px; }.node footer i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #e5af53; }
.zoom { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; border: 1px solid #333640; border-radius: 8px; background: #181a20; overflow: hidden; }.zoom button { width: 32px; height: 30px; border: 0; background: transparent; color: #bbb; cursor: pointer; }.zoom output { width: 48px; text-align: center; color: #898c96; font-size: 10px; }
label { display: grid; gap: 7px; margin-bottom: 16px; color: #888b96; font-size: 11px; }input, textarea, select { width: 100%; min-width: 0; border: 1px solid #343741; border-radius: 7px; padding: 9px; background: #1b1d24; color: #eee; }textarea { resize: vertical; }select { cursor: pointer; color-scheme: dark; }
.generation fieldset { min-width: 0; margin: 0 0 14px; border: 1px solid #343741; border-radius: 9px; padding: 12px; }.generation legend { padding: 0 5px; color: #9295a0; font-size: 11px; }
.generation { margin-top: 20px; padding-top: 16px; border-top: 1px solid #292b34; }.generation button { width: 100%; border: 0; border-radius: 8px; padding: 10px; background: #ff6a3d; color: white; cursor: pointer; }.generation button:disabled { opacity: .5; cursor: wait; }.failure-toggle { display: flex; grid-template-columns: auto 1fr; align-items: center; }.failure-toggle input { width: auto; }#generation-state { min-height: 32px; color: #9295a0; font-size: 11px; line-height: 1.45; }.node footer[data-state="succeeded"] i { background: #60d394; }.node footer[data-state="failed"] i { background: #ed6a5a; }.node footer[data-state="running"] i, .node footer[data-state="queued"] i { background: #66a3ff; }
#upload-state { margin-top: -8px; color: #9295a0; font-size: 11px; }#result-download { display: block; color: #ff916f; font-size: 12px; text-align: center; }#result-download[hidden] { display: none; }
.workflow { display:grid; gap:7px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #292b34 }.workflow button { width:100%; text-align:left }.workflow p { margin:3px 0; color:#9295a0; font-size:11px; line-height:1.4 }.workflow a { color:#ff916f; font-size:12px }.workflow a[hidden] { display:none }
.access-dialog { width:min(560px,calc(100% - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; border:1px solid #343741; border-radius:16px; padding:26px; background:#14151a; color:#f2f3f7; box-shadow:0 24px 70px #000b }.access-dialog::backdrop { background:#000b }.dialog-close { float:right; border:0; background:transparent; color:#aaa; font-size:24px; cursor:pointer }.access-dialog ol { padding-left:20px; color:#b8bac3; font-size:12px; line-height:1.6 }
.admin-body { min-height:100vh; overflow:auto; background:#0d0e12 }.admin-shell { width:min(1050px,calc(100% - 32px)); margin:32px auto }.admin-shell header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px }.admin-shell header div { display:flex; align-items:center }.admin-shell h1 { font-size:24px }.admin-shell a { color:#ff916f }.admin-auth { display:grid; grid-template-columns:2fr 1fr auto; gap:12px; align-items:end; padding:18px; border:1px solid #343741; border-radius:12px; background:#14151a }.admin-auth label { margin:0 }.admin-auth button,.application-action button { border:0; border-radius:8px; padding:10px 14px; background:#ff6a3d; color:white; cursor:pointer }.application-list { display:grid; gap:14px }.application-card { padding:20px; border:1px solid #343741; border-radius:12px; background:#14151a }.application-card h2 { margin:0 0 8px; font-size:16px }.application-card p { color:#a3a6b0; font-size:13px }.application-action { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; align-items:end; margin-top:12px }.application-action label { margin:0 }.application-action .danger { background:#9f3e3e }
@media (max-width: 760px) { .app-shell { grid-template: 54px minmax(150px,1fr) minmax(210px,42dvh) / 64px minmax(0,1fr); }.topbar { padding: 0 8px; }.crumb, .status, #rename-project, #archive-project { display: none; }.project-actions { gap:4px; overflow-x:auto; scrollbar-width:none }.project-actions::-webkit-scrollbar { display:none }.project-actions button { display:block; padding:6px; font-size:10px }.toolbox { padding: 14px 8px; }.tool { justify-content: center; padding: 8px; font-size: 0; }.tool span { font-size: 14px; }.hint { display: none; }.inspector { grid-column: 1 / -1; border-top: 1px solid #292b34; border-left: 0; padding: 12px; }.inspector .eyebrow { display: none; }.workflow { grid-template-columns:1fr 1fr; margin-bottom:8px;padding-bottom:8px}.workflow p,.workflow a { grid-column:1/-1 }#node-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }#node-form[hidden] { display: none; }#node-form > section,#node-meta { grid-column:1/-1 }label { margin: 0; }textarea { height: 54px; }.admin-shell { width:min(100% - 24px,1050px); margin:16px auto }.admin-shell header { align-items:flex-start; gap:12px }.admin-shell h1 { margin:4px 0; font-size:18px }.admin-auth,.application-action { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }.admin-auth button,.application-action button { width:100% }.application-card { padding:14px }.access-dialog { padding:20px } }
@media (max-width: 480px) { .auth-shell { align-items:start; padding:12px }.auth-card { padding:20px; border-radius:14px }.auth-brand { margin-bottom:18px }.topbar .mark { margin-right:5px }.topbar > div:first-child strong { font-size:12px }.project-actions button { padding:6px 5px }.app-shell { grid-template-columns:54px minmax(0,1fr) }#node-form { grid-template-columns:minmax(0,1fr) }#node-form > * { grid-column:1/-1 }.workflow { grid-template-columns:1fr }.admin-shell header { flex-direction:column }.admin-auth,.application-action { grid-template-columns:minmax(0,1fr) }.access-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); padding:16px }.dialog-close { position:sticky; top:0 } }
@media (max-height: 520px) and (min-width: 761px) { .app-shell { grid-template-columns:130px minmax(0,1fr) 250px }.toolbox,.inspector { padding-top:10px; padding-bottom:10px }.workflow { margin-bottom:10px; padding-bottom:10px }.eyebrow { margin-bottom:8px } }