.screen-options{border:0;padding:0;display:grid;gap:8px;margin:20px 0}.screen-options legend{font-size:13px;font-weight:700;margin-bottom:10px}.motion-option{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);margin:15px 0 20px}.motion-option input{accent-color:var(--blue)}.screen-summary{display:none}.screen-summary h1{font-size:28px;letter-spacing:-.04em;margin:8px 0}.screen-summary p{font-size:13px;color:var(--muted);margin:0}.screen-eyebrow{font-size:11px;letter-spacing:.15em;color:var(--blue-2);font-weight:800}.screen-metrics{display:flex;gap:12px}.screen-metrics>span{display:grid;gap:5px;font-size:12px;color:var(--muted);padding:15px 20px;border:1px solid var(--border);background:var(--panel-2);border-radius:12px}.screen-metrics strong{font-size:25px;color:var(--text)}
body[data-screen="workspace"] .app{max-width:none;padding:26px 26px 26px 272px}body[data-screen="workspace"] .topbar{position:fixed;left:16px;top:16px;bottom:16px;width:230px;z-index:50;margin:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;border-radius:18px;padding:20px 14px;gap:24px}body[data-screen="workspace"] .brand{min-width:0;flex-wrap:wrap;margin:0;gap:8px}body[data-screen="workspace"] .brand-title{font-size:16px}body[data-screen="workspace"] .local{width:100%}body[data-screen="workspace"] .search-wrap{flex:0 0 auto;min-width:0;order:0}body[data-screen="workspace"] .search{font-size:12px}body[data-screen="workspace"] .actions{display:flex;flex-direction:column;gap:10px}body[data-screen="workspace"] .actions .btn{text-align:left;width:100%;min-height:46px}body[data-screen="workspace"] .screen-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0 28px}body[data-screen="workspace"] .column{border-radius:18px;min-height:400px}body[data-screen="workspace"] .card{border-radius:12px}
body[data-screen="dashboard"] .app{max-width:1600px;padding:24px}body[data-screen="dashboard"] .topbar{border-radius:20px;padding:18px 20px;gap:18px;box-shadow:var(--shadow)}body[data-screen="dashboard"] .brand{width:100%;margin:0;min-width:0}body[data-screen="dashboard"] .search-wrap{order:2;flex:1 1 280px}body[data-screen="dashboard"] .actions{order:1;flex:1 1 auto}body[data-screen="dashboard"] .screen-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px;margin:24px 0;background:var(--panel);border:1px solid var(--border);border-radius:22px}body[data-screen="dashboard"] .column{border-radius:18px;border-top:3px solid var(--blue);padding:16px}body[data-screen="dashboard"] .card{box-shadow:var(--shadow);border-radius:14px}body[data-screen="dashboard"] .column-head{padding-bottom:16px}
body[data-motion="on"] :is(.btn,.card,.column,.layout-option,.theme-option){transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}body[data-motion="on"] .settings-dialog[open]{animation:screen-appear .18s ease-out}body[data-motion="on"] .monitor-panel:not(.hidden){animation:screen-appear .18s ease-out}body[data-motion="on"] .layout-option:hover{transform:translateY(-2px)}body[data-motion="off"] *,body[data-motion="off"] *::before,body[data-motion="off"] *::after{animation:none!important;transition:none!important}
@keyframes screen-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){body[data-screen="workspace"] .screen-summary{align-items:flex-start;flex-direction:column}.screen-summary h1{font-size:24px}}@media(max-width:700px){body[data-screen="workspace"] .app{padding:10px}body[data-screen="workspace"] .topbar{position:static;width:auto;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;padding:14px;margin-bottom:15px}body[data-screen="workspace"] .brand{width:100%}body[data-screen="workspace"] .local{width:auto}body[data-screen="workspace"] .search-wrap{width:100%;order:2}body[data-screen="workspace"] .actions{flex-direction:row;flex-wrap:wrap}body[data-screen="workspace"] .actions .btn{width:auto;flex:1;min-height:40px;text-align:center}body[data-screen="workspace"] .column{min-height:0}body[data-screen="dashboard"] .app{padding:10px}body[data-screen="dashboard"] .screen-summary{flex-direction:column;align-items:flex-start;padding:20px}.screen-metrics{flex-wrap:wrap}.screen-metrics>span{padding:12px 15px}}
@media(prefers-reduced-motion:reduce){body[data-motion="on"] *{animation:none!important;transition:none!important}}
body[data-screen="workspace"][data-layout="list"] .column,body[data-screen="workspace"][data-layout="tiles"] .column{min-height:0}
body .card:has(.card-actions){padding-right:98px}