:root{
  --bg:#1b1d26; --sheet:#262a36; --nav:#262a36; --line:#3c3e4b; --text:#e4e4e4; --muted:#9a9db0;
  --primary:#714b67; --primary-h:#865a7b; --teal:#3ec9a5; --danger:#e5534b; --input:#1f222d; --hover:#2e3240;
  --r:4px; font-size:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif}
a{color:var(--teal);text-decoration:none}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* top bar */
.nav{display:flex;align-items:center;gap:4px;height:46px;padding:0 12px;background:var(--nav);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav-home{display:flex;padding:8px;border-radius:var(--r);color:var(--text)}
.nav-home svg{width:18px;height:18px;fill:currentColor;stroke:none}
.nav-home:hover,.nav-menu:hover{background:var(--hover)}
.nav-app{font-size:16px;font-weight:600;color:var(--text);padding:0 12px 0 6px}
.nav-menu{color:var(--text);padding:13px 10px;font-size:14px}
.nav-menu.on{box-shadow:inset 0 -2px var(--primary-h)}
.nav-grow{flex:1}
.nav-company select{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:var(--r);padding:5px 8px;max-width:220px}
.nav-company option{background:var(--sheet)}
.nav-user{position:relative;margin-left:6px}
.nav-user summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 6px;border-radius:var(--r)}
.nav-user summary::-webkit-details-marker{display:none}
.nav-user .menu{position:absolute;right:0;top:40px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);min-width:160px;padding:4px 0;box-shadow:0 8px 24px #0006}
.nav-user .menu a,.nav-user .menu button{display:block;width:100%;text-align:left;padding:8px 14px;color:var(--text);background:none;border:0;font:inherit;cursor:pointer}
.nav-user .menu a:hover,.nav-user .menu button:hover{background:var(--hover)}
.avatar{width:28px;height:28px;border-radius:var(--r);background:#5a7d9a;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:#fff;flex:none}
.avatar.sm{width:32px;height:32px}
@media (max-width:640px){.uname,.nav-menu{display:none}}

/* home */
.home{min-height:calc(100vh - 46px);display:flex;justify-content:center;padding:60px 16px;background:radial-gradient(ellipse at top,#2c2536 0%,var(--bg) 60%)}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,110px);gap:28px 22px;max-width:760px;width:100%;justify-content:center;align-content:start}
.home-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);padding:8px;border-radius:8px}
.home-app:hover{background:#ffffff0d}
.home-icon{width:68px;height:68px;border-radius:14px;background:var(--c);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #0005}
.home-icon svg{width:36px;height:36px;stroke-width:1.7}
.home-icon.big{width:88px;height:88px}
.home-name{font-size:14px}
.soon{position:absolute;top:2px;right:8px;font-size:10px;background:var(--line);color:var(--muted);padding:1px 6px;border-radius:8px}

/* control panel */
.cp{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--bg)}
.cp-left{display:flex;align-items:center;gap:8px}
.crumb{font-size:18px;margin-left:6px}
.crumb a{color:var(--teal)}
.cp-search{flex:1;min-width:200px;max-width:520px;margin:0 auto}
.cp-search input{width:100%}
.cp-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg a{padding:5px 10px;color:var(--muted)}
.seg a.on{background:var(--hover);color:var(--text)}
.pager{color:var(--muted);display:flex;gap:6px;align-items:center}
.pager a,.pager span{padding:2px 6px}

/* buttons & inputs */
.btn{display:inline-block;border:1px solid var(--line);background:var(--line);color:var(--text);padding:6px 12px;border-radius:var(--r);font:inherit;cursor:pointer;line-height:1.3}
.btn:hover{filter:brightness(1.15)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-h)}
.btn.ghost{background:transparent}
.btn.wide{width:100%;padding:10px}
input,select,textarea{background:var(--input);color:var(--text);border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-h)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary-h)}

/* list */
.list-wrap{overflow-x:auto}
.list{width:100%;border-collapse:collapse}
.list th{text-align:left;font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--sheet)}
.list th a{color:var(--text)}
.list td{padding:8px 12px;border-bottom:1px solid #2f3240}
.list tbody tr{cursor:pointer}
.list tbody tr:hover{background:var(--hover)}
.list tr.none td{color:var(--muted);cursor:default;padding:40px;text-align:center}

/* form */
.form-area{display:flex;gap:16px;padding:16px;align-items:flex-start}
.sheet{flex:1;max-width:1140px;margin:0 auto;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:24px 32px;position:relative;overflow:hidden}
.ribbon{position:absolute;right:-34px;top:18px;transform:rotate(45deg);background:var(--danger);color:#fff;font-size:11px;padding:3px 40px;font-weight:600}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}
.group{border:0;margin:0;padding:0;min-width:0}
.group legend{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:12px 0 8px;border-bottom:1px solid var(--line);width:100%;margin-bottom:6px}
.row{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:start;padding:5px 0}
.row label{font-weight:600;padding-top:6px}
.row .val input:not([type=checkbox]),.row .val select,.row .val textarea{width:100%}
.row .val small{display:block;color:var(--muted);margin-top:3px;font-size:12px}
.row .val small.e{color:var(--danger)}
.row.bad input,.row.bad select{border-color:var(--danger)}
.row .val ul{list-style:none;margin:0;padding:4px 0}
.row .val ul label{font-weight:400;display:flex;gap:6px;align-items:center;padding:2px 0}
.chatter{width:360px;flex:none;border-left:1px solid var(--line);padding-left:16px}
.chatter textarea{width:100%;margin-bottom:6px}
.chatter ul{list-style:none;padding:0;margin:14px 0}
.chatter li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #2f3240}
.chatter time{color:var(--muted);font-size:12px;margin-left:4px}
.chatter p{margin:3px 0 0}
.muted{color:var(--muted)}
.err{background:#e5534b22;border:1px solid var(--danger);color:#ffb3ae;padding:8px 12px;border-radius:var(--r);margin-bottom:12px}
@media (max-width:1000px){.form-area{flex-direction:column}.chatter{width:100%;border:0;padding:0}.groups{grid-template-columns:1fr}.sheet{padding:18px}}
@media (max-width:560px){.row{grid-template-columns:1fr}.row label{padding-top:0}}

/* toasts / empty */
.toasts{position:fixed;right:16px;top:58px;z-index:9;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--sheet);border:1px solid var(--line);border-left:4px solid var(--teal);padding:10px 16px;border-radius:var(--r);box-shadow:0 6px 18px #0006}
.toast.error{border-left-color:var(--danger)}
.empty{max-width:480px;margin:80px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px}
.empty p{color:var(--muted)}

/* login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,#2c2536 0%,var(--bg) 65%);padding:16px}
.login-card{width:100%;max-width:360px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:14px}
.login-card .brand{display:flex;align-items:center;gap:12px;font-size:20px;margin-bottom:6px}
.login-card .brand .home-icon{width:46px;height:46px;border-radius:10px}
.login-card .brand .home-icon svg{width:26px;height:26px}
.login-card .brand span{color:var(--muted)}
.login-card label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.login-card input{padding:9px 10px}