:root{--bg:#f4f5f1;--panel:#fff;--ink:#202d28;--muted:#617069;--line:#dce2dc;--accent:#245d45;--soft:#e7f1e9}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,sans-serif}body.dark{--bg:#16201c;--panel:#202e27;--ink:#f0f4ef;--muted:#b2c1b7;--line:#3d5145;--accent:#9bd4ac;--soft:#304d3a}header{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:18px 26px;background:var(--panel);border-bottom:1px solid var(--line)}header strong{font-size:24px;letter-spacing:4px}header small{margin-right:auto}button,input,select,textarea{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:10px 13px}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button.primary{background:var(--accent);color:var(--bg)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}input,select,textarea{width:100%}label{display:block;margin:12px 0}small,.muted{color:var(--muted)}.layout{display:grid;grid-template-columns:220px minmax(0,1fr)}nav{padding:24px 14px;border-right:1px solid var(--line)}nav button{display:block;width:100%;margin:5px 0;text-align:left;background:transparent;border:0}nav button.active{background:var(--soft);font-weight:650}main{padding:32px;min-width:0;max-width:1350px}h1{font-size:29px;letter-spacing:-.6px;margin:0 0 8px}h2{font-size:19px;margin:0 0 15px}p{margin:8px 0 16px}.card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;margin:16px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid .card{margin:0}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.badge{font-size:12px;display:inline-block;background:var(--soft);color:var(--accent);padding:4px 9px;border-radius:6px}.metric{font-size:28px;font-weight:650;margin:8px 0}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap}td,th{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}th{font-size:12px;color:var(--muted)}.login{max-width:460px;margin:55px auto}.login button{width:100%;margin-top:10px}#status{position:sticky;top:0;z-index:5;background:var(--soft);padding:0 24px;white-space:pre-wrap}#status:not(:empty){padding:12px 24px}dialog{width:min(550px,94vw);max-height:90vh;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:24px}dialog::backdrop{background:#0008}.message{padding:13px;background:var(--soft);border-radius:8px;margin:10px 0;white-space:pre-wrap}a{color:var(--accent)}@media(max-width:760px){.layout{grid-template-columns:1fr}nav{display:flex;overflow:auto;padding:8px}nav button{width:auto;white-space:nowrap}.grid{grid-template-columns:1fr}main{padding:20px 14px}header{padding:12px;gap:10px}.login{margin:25px 14px}h1{font-size:25px}}

/* Shared visual language from the original LUM CRM. */
:root{--bg:#f7f8fa;--panel:#fff;--ink:#1f2937;--muted:#667085;--line:#e5e9ee;--accent:#2c5878;--soft:#eef3f7}
body.dark{--bg:#161a1f;--panel:#1f252d;--ink:#e6eaf0;--muted:#a7b1be;--line:#2b333d;--accent:#5b9dc8;--soft:#263848}
body{font-family:system-ui,-apple-system,"Inter","Segoe UI",Roboto,sans-serif;font-size:14px}
header{background:linear-gradient(135deg,#1f3a2e,#2e5a45);color:#f5f2e6;padding:10px 18px;gap:16px;border-bottom:1px solid #14261d;min-height:60px}
.brand-logo{height:34px;width:100px;object-fit:contain;display:block;flex-shrink:0}
header small{color:#d8d2c6}header button{border-color:#ffffff50;color:#f5f2e6;background:transparent;padding:6px 10px}
.layout{min-height:calc(100vh - 60px);grid-template-columns:216px minmax(0,1fr)}nav{background:var(--panel);padding:18px 12px}nav button{border-radius:5px;padding:10px 12px}nav button.active{box-shadow:inset 3px 0 var(--accent)}
button,input,select,textarea{border-radius:5px}button.primary{color:#fff;background:var(--accent)}body.dark button.primary{color:#101821}
.card{border-radius:7px;padding:20px}main{max-width:none;padding:26px 30px}h1{font-size:25px;font-weight:650}h2{font-size:18px}.generator-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}#projectGenerator{display:block;width:100%;height:calc(100vh - 165px);min-height:600px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
@media(max-width:760px){.layout{grid-template-columns:1fr}main{padding:18px 12px}nav{padding:6px}nav p{display:none}.generator-heading{flex-wrap:wrap}#projectGenerator{height:75vh;min-height:520px}.brand-logo{width:88px;height:30px}}

.price-filters{display:grid;grid-template-columns:minmax(180px,1fr) 200px auto;gap:10px}.product-name{white-space:normal;min-width:230px;max-width:420px}@media(max-width:760px){.price-filters{grid-template-columns:1fr}.product-name{min-width:180px}}

/* Messages and filenames must remain readable on narrow screens. */
.message,.message p,.message a{overflow-wrap:anywhere;word-break:normal}.message img{object-fit:contain}dialog{overflow:auto}dialog input[type=file]{min-width:0;max-width:100%}@media(max-width:600px){dialog{padding:16px}.message{padding:10px}}

.thread-row{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding:16px 0}.thread-row p{overflow-wrap:anywhere;margin:0}.thread-row:last-child{border-bottom:0}@media(max-width:760px){.layout{grid-template-rows:min-content 1fr}nav{align-self:start;align-items:center}.thread-row{grid-template-columns:1fr}.thread-row button{width:100%}}

/* Give the editor the same viewport as a standalone generator. */
#app:not([hidden]) #projectGenerator{position:fixed;inset:0;z-index:100;width:100vw;height:100vh;height:100dvh;min-height:0;border:0;border-radius:0;margin:0}
#projectGenerator[aria-busy="true"]{visibility:hidden}

#nav .menuHead,#nav button,#nav .menuIdentity{display:flex;align-items:center;gap:10px}
#nav svg{width:19px;height:19px;flex:none}
#nav .menuHead{color:var(--muted);font-size:12px;font-weight:650}
#nav #menuToggle{width:38px;height:36px;justify-content:center;padding:6px}
#nav .menuIdentity{margin:10px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
#nav .menuIdentity img{width:36px;height:36px;object-fit:contain;background:white;border-radius:7px}
#nav .menuIdentity small{display:block;color:var(--muted)}
#nav button[data-page]{border-radius:8px;min-height:38px}

.compact-menu #nav .menuLabel{display:none}
@media(min-width:761px){.layout.compact-menu{grid-template-columns:64px minmax(0,1fr)}.compact-menu #nav{padding-inline:8px}.compact-menu #nav button,.compact-menu #nav .menuIdentity{justify-content:center}.compact-menu #nav .menuIdentity:empty{display:none}}
@media(max-width:760px){#nav .menuIdentity{display:none}#nav .menuHead{flex:none}#nav button[data-page]{flex:none}}

.editor-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.editor-actions [hidden]{display:none!important}
#main:has(#projectGenerator){position:fixed;inset:0;z-index:101;display:flex;flex-direction:column;padding:0;background:var(--panel);overflow:hidden}
#main:has(#projectGenerator) .generator-heading{flex:none;padding:5px 12px;gap:6px;border-bottom:1px solid var(--line)}
#main:has(#projectGenerator) .generator-heading h1{font-size:16px;margin:0}
#main:has(#projectGenerator) .generator-heading p{display:none}
#app:not([hidden]) #main #projectGenerator{position:static;flex:1;min-height:0;width:100%;height:0}

#main .generator-heading[hidden],#editorLoadStatus[hidden]{display:none!important}

#nav{background:#23262d;color:#b7bbc2;border-color:#14161a}
#nav .menuHead,#nav .menuIdentity small{color:#b7bbc2}
#nav .menuIdentity{border-color:#41454d}
#nav button{color:#b7bbc2;background:transparent}
#nav button svg{color:#8b8e93;stroke-width:1.75}
#nav button:is(:hover,:focus-visible,.active){background:#2b2f37;color:#fff}
#nav button:focus-visible{outline:2px solid #c9a24b;outline-offset:-2px}
#nav button.active{box-shadow:inset 3px 0 #c9a24b}
#nav button:hover svg,#nav button.active svg{color:#c9a24b}
#app:has(#projectGenerator){position:fixed;inset:0;z-index:101;height:100dvh;min-height:0;background:var(--panel)}
#app:has(#projectGenerator) #main{position:static;min-width:0;min-height:0}
#app:has(#projectGenerator) #nav{overflow:auto}