:root { color-scheme:light; --navy:#1b2559; --deep-blue:#09315d; --blue:#328be9; --blue-hover:#227edc; --cyan:#bdddff; --panel:#f4f6fa; --canvas:#e0e4ed; --line:#e5eaf8; --muted:#a3aed0; --success:#03b785; --white:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:#fff; color:var(--navy); }
.workspace { display:contents!important; }
.viewer { grid-column:2!important; grid-row:2!important; }
.preview-actions { flex-wrap:wrap; justify-content:flex-end; }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:300px minmax(0,1fr); grid-template-rows:102px minmax(0,1fr); }
.topbar { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:16px; padding:0 16px; border-radius:16px; background:var(--panel); }
.topbar-title strong,.topbar-title small { display:block; }.topbar-title strong { font-size:18px; line-height:28px; }.topbar-title small { color:var(--muted); font-size:11px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }.status { display:flex; align-items:center; gap:8px; margin-right:6px; color:#707eae; font-size:11px; }.status i { width:7px; height:7px; border-radius:50%; background:#ffbf0e; }.status.ready i { background:var(--success); }.status.error i { background:#e94f64; }
.button { min-height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:100px; padding:0 18px; color:var(--navy); background:white; text-decoration:none; cursor:pointer; font-size:12px; font-weight:600; transition:.15s ease; }.button:hover { transform:translateY(-1px); }.button.ghost { border-color:var(--line); }.button.ghost:hover { border-color:var(--blue); color:var(--blue); }.button.primary { color:white; background:var(--blue); }.button.primary:hover { background:var(--blue-hover); }
.sidebar { grid-column:1; grid-row:1/3; min-height:0; display:flex; flex-direction:column; padding:28px 12px 20px; overflow:hidden; color:white; background:linear-gradient(165deg,#153fa3 3.6%,#051f3d 99.3%); }
.brand { width:115px; height:39px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0 12px 31px; }.brand img { display:block; object-fit:contain; }.brand-wordmark { width:115px; height:26px; }.brand-tagline { width:113px; height:7px; margin-left:1px; }
.sidebar-head { display:flex; align-items:flex-end; justify-content:space-between; padding:0 12px 16px; }.eyebrow { color:var(--blue); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }.sidebar .eyebrow { color:var(--cyan); }.sidebar h1 { margin:5px 0 0; color:white; font-size:18px; line-height:24px; }.total-badge { min-width:28px; padding:4px 8px; border-radius:99px; color:white; background:rgba(255,255,255,.12); font-size:11px; text-align:center; }
.search { display:flex; align-items:center; gap:9px; margin:0 4px 14px; padding:0 12px; height:42px; border:1px solid rgba(189,221,255,.18); border-radius:12px; background:rgba(9,49,93,.86); color:var(--cyan); }.search:focus-within { border-color:#5fb0ff; box-shadow:0 0 0 3px rgba(50,139,233,.2); }.search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:white; font-size:12px; }.search input::placeholder { color:#879bc2; }.search kbd { border-radius:5px; padding:2px 5px; color:#9bb2d8; background:rgba(255,255,255,.08); font:9px inherit; }
.tree { min-height:0; overflow:auto; padding:0 4px 30px; scrollbar-color:#2e5b91 transparent; }.tree details { position:relative; }.tree summary { list-style:none; }.tree summary::-webkit-details-marker { display:none; }.tree-row { width:100%; min-height:40px; display:flex; align-items:center; gap:8px; border:0; border-radius:12px; padding:7px 10px; background:transparent; color:#c0ccec; text-align:left; cursor:pointer; font-size:12px; }.tree-row:hover { background:rgba(255,255,255,.08); color:white; }.tree-row.selected { color:white; background:var(--blue); }.tree-row .name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.tree-row .count { color:#8197bf; font-size:10px; }.tree-row.selected .count { color:white; opacity:.8; }.tree-row .chevron { width:9px; color:#7990b8; font-size:9px; transition:transform .15s; }.tree details[open]>summary .chevron { transform:rotate(90deg); }.tree-icon { width:18px; color:#9db3da; text-align:center; }.tree-children { margin-left:16px; padding-left:6px; border-left:1px solid rgba(189,221,255,.14); }.tree-root>.tree-row { font-weight:600; color:white; }
.workspace { grid-column:2; min-width:0; min-height:0; display:block; }.viewer { min-width:0; min-height:100%; position:relative; overflow:auto; padding:0 16px 16px; }.empty-state { min-height:calc(100vh - 118px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; border-radius:16px; background:var(--panel); text-align:center; }.empty-state h2 { margin:9px 0 7px; font-size:24px; }.empty-state p { max-width:430px; margin:0; color:#707eae; font-size:12px; line-height:18px; }.empty-visual { width:180px; height:125px; position:relative; margin-bottom:24px; }.mini-banner { position:absolute; display:block; border:1px solid #b9c4d7; border-radius:12px; background:white; box-shadow:0 12px 32px rgba(27,37,89,.12); }.mini-banner:after { content:""; position:absolute; inset:9px; border-radius:6px; background:linear-gradient(90deg,var(--blue) 0 38%,#d9e1ed 38% 100%); }.mini-banner.one { width:132px; height:42px; left:22px; top:14px; transform:rotate(-7deg); }.mini-banner.two { width:105px; height:52px; right:2px; top:50px; transform:rotate(8deg); }.mini-banner.three { width:138px; height:46px; left:0; bottom:4px; transform:rotate(-2deg); }
.hidden { display:none!important; }.preview-panel { min-height:calc(100vh - 118px); display:grid; grid-template-rows:auto auto minmax(420px,1fr); border-radius:16px; overflow:hidden; background:var(--panel); }.preview-toolbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px; border-bottom:1px solid var(--line); }.preview-title { min-width:0; display:flex; align-items:center; gap:12px; }.file-icon { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; border-radius:16px; color:var(--blue); background:var(--cyan); font-size:9px; font-weight:700; }.preview-title h2 { max-width:600px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; font-size:18px; line-height:28px; }.preview-title p { max-width:700px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0 0; color:#707eae; font-size:11px; }.preview-actions { display:flex; gap:10px; }.icon-button { width:36px; height:36px; border:1px solid var(--blue); border-radius:100px; color:var(--blue); background:transparent; cursor:pointer; font-size:16px; }.icon-button:hover { background:var(--cyan); }.copy-button.copied { color:var(--success); border-color:var(--success); }
.meta-strip { min-height:58px; display:flex; align-items:center; padding:8px 16px; border-bottom:1px solid var(--line); background:white; }.meta-strip>span { min-width:130px; padding-right:26px; margin-right:26px; border-right:1px solid var(--line); }.meta-strip>span:last-child { border:0; }.meta-strip small,.meta-strip strong { display:block; }.meta-strip small { margin-bottom:4px; color:var(--muted); font-size:9px; font-weight:600; text-transform:uppercase; }.meta-strip strong { color:var(--navy); font-size:11px; }
.stage-wrap { min-height:420px; position:relative; display:flex; align-items:center; justify-content:center; padding:64px 40px; overflow:auto; background:var(--canvas); }.stage-grid { position:absolute; inset:0; opacity:.32; background-image:linear-gradient(rgba(27,37,89,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(27,37,89,.09) 1px,transparent 1px); background-size:24px 24px; }.frame-shell { box-sizing:content-box; position:relative; z-index:1; flex:0 0 auto; display:block; overflow:hidden; border:1px solid #b6c0d0; background:white; box-shadow:0 18px 50px rgba(27,37,89,.18); }.frame-shell iframe { display:block; width:100%; height:100%; border:0; background:transparent; }.stage-note { position:absolute; z-index:1; bottom:20px; color:#707eae; font-size:10px; }
dialog { width:min(640px,calc(100% - 28px)); border:1px solid var(--line); border-radius:16px; padding:0; color:var(--navy); background:white; box-shadow:0 30px 100px rgba(27,37,89,.26); }dialog::backdrop { background:rgba(5,31,61,.54); backdrop-filter:blur(4px); }dialog form { padding:24px; }.dialog-head { display:flex; justify-content:space-between; gap:20px; }.dialog-head h2 { margin:5px 0 0; font-size:21px; }.dialog-close { width:32px; height:32px; border:0; border-radius:100px; color:var(--navy); background:var(--panel); cursor:pointer; font-size:20px; }.dialog-copy { color:#707eae; font-size:12px; line-height:18px; }.root-inputs { display:grid; gap:8px; margin:18px 0 10px; }.root-input-row { display:flex; gap:7px; }.root-input-row input { min-width:0; flex:1; height:42px; border:1px solid var(--line); border-radius:12px; outline:0; padding:0 12px; color:var(--navy); background:var(--panel); font-size:12px; }.root-input-row input:focus { border-color:var(--blue); }.remove-root { width:42px; border:1px solid var(--line); border-radius:12px; color:#707eae; background:var(--panel); cursor:pointer; }.add-root { border:0; padding:7px 0; color:var(--blue); background:none; cursor:pointer; font-size:12px; font-weight:600; }.dialog-message { min-height:20px; margin-top:8px; color:#e94f64; font-size:11px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; padding-top:16px; border-top:1px solid var(--line); }.tree-empty { padding:32px 16px; color:#9db3da; text-align:center; font-size:12px; line-height:18px; }
@media (max-width:900px) { .app-shell { grid-template-columns:270px minmax(0,1fr); }.status { display:none; }.stage-wrap { padding-inline:20px; }.preview-title p { max-width:420px; }.meta-strip>span { min-width:105px; margin-right:15px; padding-right:15px; } }
@media (max-width:650px) { .app-shell { display:block; }.topbar { min-height:70px; margin:10px; }.topbar-title small,.topbar-actions .ghost { display:none; }.sidebar { height:44vh; padding-top:20px; }.brand { margin-bottom:20px; }.viewer { min-height:56vh; padding:0 10px 10px; }.empty-state,.preview-panel { min-height:56vh; }.preview-toolbar { align-items:flex-start; }.preview-title p { max-width:220px; }.copy-button { padding-inline:12px; }.meta-strip { overflow-x:auto; }.stage-wrap { min-height:340px; align-items:flex-start; justify-content:flex-start; }.frame-shell { margin:auto; } }