:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--font-body:Arial,Helvetica,sans-serif;--line:#dedede;--muted:#626262;--color-text:#202020;--color-surface:#fff;--color-subtle:#f5f5f5;--radius:4px;--rail:48px;--drawer:216px;font-family:var(--font-body);font-size:13px;color:var(--color-text);background:#fafafa;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit;color:inherit}[hidden]{display:none!important}
button,.button{cursor:pointer;border:1px solid var(--line);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius);padding:var(--space-2) var(--space-3);text-decoration:none;font-size:13px;font-weight:600;min-height:34px}button:hover,.button:hover{background:#ededed;border-color:#aaa}button:disabled{opacity:.5;cursor:default}.primary{background:#292929;border-color:#292929;color:white}.primary:hover{background:#444;color:white}a{color:inherit;text-underline-offset:3px}:focus-visible{outline:2px solid #333;outline-offset:2px}
.shell{min-height:100vh;padding-left:var(--rail)}.nav-rail{position:fixed;inset:0 auto 0 0;width:var(--rail);border-right:1px solid var(--line);background:white;z-index:30;display:flex;align-items:center;flex-direction:column;padding:var(--space-2) var(--space-1);gap:var(--space-3)}.nav-rail button{padding:var(--space-2);width:36px;height:36px;font-size:17px}.rail-brand{font-size:11px;font-weight:700;text-decoration:none}
.sidebar{position:fixed;inset:0 auto 0 var(--rail);width:var(--drawer);background:white;border-right:1px solid var(--line);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3);z-index:20;overflow-y:auto}.brand{display:flex;align-items:center;font-size:15px;color:inherit;text-decoration:none;min-height:32px}.brand span{font-weight:700}.brand small{display:block;font-size:10px;color:var(--muted);margin-top:var(--space-1);font-weight:400}.site-label{color:var(--muted);font-size:11px;margin:var(--space-2) 0 0}.sidebar select{width:100%;margin:0}.sidebar nav{display:grid;gap:var(--space-1)}.sidebar nav button{text-align:left;background:transparent;color:var(--muted);border-color:transparent;padding:var(--space-2);font-weight:400}.sidebar nav button:hover{background:var(--color-subtle);color:var(--color-text)}.sidebar nav button.selected{background:#eaeaea;color:var(--color-text);font-weight:600}.sidebar-foot{margin-top:auto;padding-top:var(--space-4);font-size:11px;color:var(--muted);line-height:1.5}.sidebar-foot a{display:block;margin-top:var(--space-2)}.sidebar-foot small{font-size:11px}.nav-backdrop{display:none}
main{min-width:0;padding:var(--space-4)}body.nav-open main{margin-left:var(--drawer)}header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;font-weight:600;color:var(--muted)}h1{font-size:22px;letter-spacing:-.4px;margin:var(--space-1) 0 0}h2{font-size:16px;margin:0 0 var(--space-3)}h3{font-size:14px;margin:0 0 var(--space-2)}p{line-height:1.5;margin:var(--space-2) 0 var(--space-3)}.muted{color:var(--muted);font-size:12px;line-height:1.5}
.hero{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-3)}.hero h2{font-size:18px}.hero p{max-width:700px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-3)}.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);min-width:0}.metric{font-size:24px;font-weight:600;margin:var(--space-2) 0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.toolbar input{flex:1;min-width:140px}.toolbar>select{width:auto;max-width:100%}.toolbar>input,.toolbar>select{margin-top:0}.toolbar label{margin:0}.toolbar button{flex-shrink:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);background:white;border-radius:var(--radius)}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;color:var(--muted);font-size:11px;font-weight:600;background:var(--color-subtle)}td,th{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);vertical-align:top}td small{display:block;color:var(--muted);margin-top:var(--space-1)}tr:last-child td{border-bottom:0}.badge,.badge.approved{display:inline-block;padding:var(--space-1) var(--space-2);border-radius:var(--radius);background:#ededed;color:#444;font-size:11px;white-space:nowrap}.empty{text-align:center;padding:var(--space-5) var(--space-4)}.empty p{color:var(--muted)}
label{display:block;font-size:12px;font-weight:600;line-height:1.5;margin-bottom:var(--space-3)}input,select,textarea{display:block;width:100%;border:1px solid #bdbdbd;border-radius:var(--radius);padding:var(--space-2);background:white;margin-top:var(--space-1);min-height:34px}input[type=checkbox]{display:inline-block;width:auto;min-height:0;margin:0 var(--space-1) 0 0}textarea{resize:vertical}.code{font-family:var(--font-body);font-size:12px;line-height:1.5}#message:not(:empty){padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--color-subtle);margin-bottom:var(--space-3)}#message.error,#editor-error{color:#922b21}
dialog{border:1px solid var(--line);border-radius:var(--radius);max-width:1100px;width:calc(100% - 32px);max-height:90vh;padding:var(--space-4);color:var(--color-text)}dialog::backdrop{background:#0006}.editor-heading{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center}.editor-heading h2{margin:var(--space-1) 0 0}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--space-4)}.editor-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0}summary{cursor:pointer;font-size:13px;font-weight:600;min-height:28px}#history>div{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--line);padding:var(--space-2) 0;font-size:12px}#preview-body{border-top:1px solid var(--line);margin-top:var(--space-3);padding:var(--space-4);max-width:800px;overflow-wrap:anywhere}#preview-body h2{margin-top:var(--space-4)}.inventory{padding-left:var(--space-4)}.inventory li{margin-bottom:var(--space-3);line-height:1.5;font-size:13px}#workspace{overflow-wrap:anywhere;min-width:0}
.table-wrap table{min-width:560px}#portfolio-list table{min-width:900px}#portfolio-list+.toolbar{margin-top:var(--space-2)}
#setup-body{margin-top:var(--space-3)}#setup-form details{border-top:1px solid var(--line);padding:var(--space-2) 0}#setup-form summary{padding:var(--space-1) 0}#setup-form details>label{max-width:800px}#setup-form details>p{max-width:900px}#setup-form details select{width:auto;min-width:150px}#setup-error{color:#922b21}
:root{--line:#e8ebef;--muted:#667085;--color-text:#263044;--color-subtle:#f4f6fa;--radius:10px;background:#f8f9fc}
.card,.hero,.table-wrap,dialog{border-color:transparent;box-shadow:0 1px 3px #2630440c,0 3px 12px #26304405}.sidebar,.nav-rail{border-color:#edf0f4}.brand{gap:var(--space-2)}.brand img{flex-shrink:0}.rail-brand img{display:block}.sidebar nav button.selected{background:#edf1f8;color:#405c87}.primary{background:#4f658c;border-color:transparent}.primary:hover{background:#405674}.badge.approved{background:#edf6f0;color:#476857}input,select,textarea{border-color:#dce1e8;font-weight:400}.table-wrap th{background:#f7f8fb}td,th{border-color:#eef0f4}#sync-state[data-state=live]{color:#527560}#sync-state[data-state=offline]{color:#986b42}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body.nav-open main{margin-left:0}.sidebar{width:min(var(--drawer),calc(100vw - var(--rail)))}.nav-open .nav-backdrop{display:block;position:fixed;inset:0 0 0 var(--rail);z-index:15;background:#0003;border:0;border-radius:0}.grid,.editor-grid{grid-template-columns:1fr}main{padding:var(--space-3)}header{align-items:center}header .button{font-size:12px;padding:var(--space-2);white-space:nowrap}.card{padding:var(--space-3)}h1{font-size:20px}dialog{padding:var(--space-3)}.metrics{gap:var(--space-2)}.metric{font-size:22px}.toolbar>input{min-width:100px}.toolbar>select{max-width:100%}}