:root{
  --bg:#eef1f6; --surface:#ffffff; --surface-2:#f2f5fa; --text:#1e2733; --muted:#67727f;
  --border:#e2e8f1; --brand:#F57C00; --grad:linear-gradient(135deg,#FFB020 0%,#FF8A00 50%,#FF6A00 100%);
  --grad-red:linear-gradient(135deg,#FF6B6B 0%,#F5433C 55%,#E11D48 100%);
  --grad-green:linear-gradient(135deg,#4ADE80 0%,#22C55E 55%,#16A34A 100%);
  --grad-blue:linear-gradient(135deg,#38BDF8 0%,#2E9BFF 55%,#2563EB 100%);
  --grad-orange:linear-gradient(135deg,#FFB020 0%,#FF8A00 55%,#FF6A00 100%);
  --grad-purple:linear-gradient(135deg,#C86BFF 0%,#A24BF0 55%,#7C3AED 100%);
  --blue:#1e88e5; --green:#2e9e46; --red:#e5433c; --orange:#F59E0B; --lime:#8bc34a;
  --shadow:0 1px 2px rgba(20,30,45,.06),0 6px 18px rgba(20,30,45,.07); --radius:14px;
}
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0f1622; --surface:#182233; --surface-2:#212d40; --text:#eef3fa; --muted:#9fb0c6;
  --border:#2b3a52; --shadow:0 1px 3px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
#app{min-height:100dvh}
a{color:var(--brand);text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%}
[hidden]{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:10px 16px;border-radius:11px;font-weight:600;transition:.12s}
.btn:hover{filter:brightness(.98);border-color:#cfd8e6}
.btn.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(255,122,24,.35)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.sm{padding:7px 12px;border-radius:9px;font-size:13px}
.btn.block{width:100%}
.btn.ok{background:var(--grad-green);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(34,197,94,.3)}
.btn.blue{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(37,99,235,.3)}
.btn.danger-btn{color:#fff;background:var(--grad-red);border-color:transparent;box-shadow:0 4px 12px rgba(225,29,72,.3)}
.btn.ok:hover,.btn.blue:hover,.btn.danger-btn:hover{filter:brightness(1.06)}
.mini{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:5px 10px;font-size:14px;color:var(--text);font-weight:600;transition:.12s}
.mini:hover{filter:brightness(.97);border-color:#cfd8e6}
.mini.danger{color:#fff;background:var(--grad-red);border-color:transparent}
.mini.danger:hover,.mini.ok:hover,.mini.blue:hover{filter:brightness(1.06)}
.mini.blue{color:#fff;background:var(--grad-blue);border-color:transparent}

/* inputs */
.inp,.sel,.cell{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit}
.inp:focus,.sel:focus,.cell:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(245,124,0,.15)}
.inp.big{font-size:18px;padding:12px 14px}
.lbl{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:5px}
.sel{min-width:180px;max-width:100%}
.muted{color:var(--muted)}
.pre{white-space:pre-line}

/* AUTH */
.auth{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:2px}
.auth .title{font-size:44px;font-weight:800;margin-bottom:18px}
.auth form{width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center}
.auth .logo{width:72px;height:72px;border-radius:16px;margin-bottom:14px}
.auth .lbl{font-size:18px;color:var(--text);font-weight:600;margin:12px 0 6px;text-align:center}
.auth input{width:100%;text-align:center;font-size:20px;padding:11px 14px;border:none;border-bottom:2px solid var(--border);background:transparent;color:var(--text)}
.auth input:focus{outline:none;border-bottom-color:var(--brand)}
.auth .go{margin-top:26px;padding:11px 40px;border:2px solid var(--text);border-radius:10px;background:transparent;color:var(--text);font-size:18px;font-weight:600}
.auth .go:hover{background:var(--grad);border-color:transparent;color:#fff}
.auth .err{background:rgba(229,67,60,.1);color:var(--red);border:1px solid rgba(229,67,60,.3);padding:9px 12px;border-radius:9px;font-size:14px;margin-top:12px;text-align:center;width:100%}

/* SHELL */
.app-shell{display:flex;flex-direction:column;min-height:100dvh}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:0 14px;height:54px;background:var(--grad);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);padding-top:env(safe-area-inset-top)}
.topbar .u{font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sp{flex:1}
.topbar .ico{width:38px;height:38px;display:grid;place-items:center;border:none;background:rgba(255,255,255,.15);border-radius:10px;color:#fff}
.topbar .ico:hover{background:rgba(255,255,255,.28)}
.main{flex:1;min-height:0}
.footer{background:var(--surface-2);color:var(--muted);text-align:center;font-size:12px;padding:8px 12px;border-top:1px solid var(--border)}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin:6px 2px 10px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.card.pad0{padding:0;overflow:hidden}
.list-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1;min-width:0}
.list-item .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .sub{font-size:12px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:40px 16px}
.big-empty{font-size:18px;line-height:1.6}
.loading{text-align:center;color:var(--muted);padding:40px}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:s .8s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
td.num,th.num{text-align:right;white-space:nowrap}

/* MENU (user landing) */
.menu-wrap{max-width:760px;margin:0 auto;padding:24px 16px;min-height:calc(100dvh - 54px - 33px);display:flex;align-items:center}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%}
.mcard{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:.12s}
.mcard:hover{transform:translateY(-2px);border-color:#cfd8e6}
.mcard .ic{height:96px;display:grid;place-items:center}
.mcard .ic svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.mcard .t{font-size:18px;font-weight:700;text-align:center;color:var(--text)}
.mcard.small{grid-column:1 / -1;flex-direction:row;padding:16px 18px;gap:14px}
.mcard.small .ic{height:auto}
.mcard.small .ic svg{width:38px;height:38px}
.mcard.small .t{font-size:16px}

/* ADMIN grid + role chooser */
.admin-grid{max-width:900px;margin:0 auto;padding:24px 16px;display:grid;gap:20px;grid-template-columns:1fr 1fr;min-height:calc(100dvh - 54px - 33px);align-content:center}
.big-btn{border:none;border-radius:18px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;box-shadow:var(--shadow)}
.big-btn .t{font-size:22px;font-weight:700;text-align:center;line-height:1.2}
.big-btn svg{opacity:.95}
.bb-accounts{background:linear-gradient(180deg,#FFB900,#FFDC00)}
.bb-branches{background:linear-gradient(180deg,#E800FF,#8000FF)}
.bb-materials{background:linear-gradient(180deg,#FF8B00,#FF4600)}
.bb-works{background:linear-gradient(180deg,#00FF97,#00AEFF)}

/* LOBBY */
.lobby{display:grid;grid-template-columns:270px 1fr;min-height:calc(100dvh - 54px - 33px)}
.side{background:var(--surface-2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 14px;gap:8px}
.est-name{font-weight:800;font-size:17px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.total-badge{background:var(--lime);border-radius:16px;padding:10px 14px;text-align:center;box-shadow:0 4px 0 #6f9e2f}
.total-badge .v{font-size:34px;font-weight:800;color:#123d0a;line-height:1.1}
.total-badge .sub2{font-size:12px;color:#1c5216;margin-top:2px}
.rooms-count{text-align:center;font-size:22px;color:var(--muted)}
.hr{height:1px;background:var(--border);margin:8px 4px}
.b-add-room{background:var(--grad-blue);color:#fff;border:none;border-radius:12px;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:24px;font-weight:700;box-shadow:0 6px 16px rgba(37,99,235,.32)}
.b-add-room .pl{font-size:34px;line-height:1}
.b-add-room:hover{filter:brightness(1.06)}
.spacer{flex:1}
.b-lob{border:none;border-radius:11px;color:#fff;font-weight:700;font-size:16px;padding:12px 10px;box-shadow:var(--shadow)}
.b-other{background:var(--grad-orange);box-shadow:0 5px 14px rgba(255,122,24,.32)}
.b-sale{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none;font-size:14px;font-weight:600}
.b-price{background:var(--grad-green);box-shadow:0 5px 14px rgba(34,197,94,.3)}
.b-generate{background:var(--grad-red);box-shadow:0 5px 14px rgba(225,29,72,.3)}
.b-lob:hover{filter:brightness(1.06)}
.work-area{overflow:auto;padding:18px}
.rooms-list{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.room-card{background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow);padding:14px 16px;cursor:pointer;transition:.12s}
.room-card:hover{transform:translateY(-1px);border-color:#cfd8e6}
.rc-top{display:flex;align-items:center;gap:8px}
.rn{font-weight:800;font-size:20px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-actions{display:flex;gap:6px}
.rsep{height:1px;background:var(--border);margin:10px 0}
.rgrid{display:grid;grid-template-columns:1.1fr 1fr auto;gap:14px;align-items:start;font-size:13px}
.rgrid .rt{font-weight:800;color:var(--green);font-size:16px;text-align:right;white-space:nowrap}

/* ROOM screen */
.room-head{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px}
.rh-left{font-size:13px;color:var(--muted)}
.rh-center{text-align:center}
.rh-name{font-size:22px;font-weight:800}
.rh-btns{display:flex;gap:8px;justify-content:center;margin-top:6px}
.rh-right{text-align:right;font-size:14px;color:var(--muted)}
.rh-right b{color:var(--text);font-size:19px}
.cat-title{font-size:18px;font-weight:700;margin:6px 2px 10px}
.cat-grid{display:grid;gap:14px;margin-bottom:18px}
.cat-grid.two{grid-template-columns:1fr 1fr}
.cat-grid.three{grid-template-columns:1fr 1fr 1fr}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.12s}
.cat-card:hover{transform:translateY(-2px);border-color:var(--brand)}
.cc-t{font-size:20px;font-weight:800}
.cc-cnt{font-size:13px;color:var(--muted)}
.cc-sub{font-size:14px;color:var(--green);font-weight:700}
.save-row{display:flex;gap:10px;justify-content:flex-end;margin:6px 0 26px}

/* category editor table */
.cat-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.cat-list{max-height:62vh;overflow:auto;border:1px solid var(--border);border-radius:10px}
.cat-table{width:100%;border-collapse:collapse;font-size:13px}
.cat-table th{position:sticky;top:0;background:var(--surface-2);z-index:1}
.cat-table th,.cat-table td{padding:7px 9px;border-bottom:1px solid var(--border);vertical-align:middle}
.cat-table tr.on{background:rgba(245,124,0,.06)}
.cat-table .cn{max-width:280px}
.ck{display:flex;align-items:center;gap:8px;cursor:pointer}
.ck input{width:17px;height:17px;flex:none}
.cell{width:78px;padding:6px 8px;text-align:right}
.csel{width:118px;padding:6px 8px;text-align:left}
.cat-table .sum{font-weight:700;white-space:nowrap}

/* pickers */
.pick-row{display:flex;gap:8px;flex-wrap:wrap}
.pick-list{max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.pick-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.pick-item .grow{flex:1;min-width:0}
.pick-item .nm{font-weight:600;font-size:14px}
.pick-item .sub{font-size:12px;color:var(--muted)}
.areas{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.9}
.areas b{color:var(--text)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.seg-b{padding:9px 14px;background:var(--surface);border:none;color:var(--muted);font-weight:600}
.seg-b.on{background:var(--grad);color:#fff}
.dims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.dims2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dims label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.pair{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pair .inp{flex:1;min-width:0}
.pair span{color:var(--muted)}

/* DIALOG */
.dlg-backdrop{position:fixed;inset:0;background:rgba(15,22,34,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.dlg{background:var(--surface);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:100%;max-width:420px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.dlg.wide{max-width:720px}
.dlg.resizable{resize:both;min-width:340px;min-height:280px;max-width:96vw;max-height:94vh}
.dlg.resizable .dlg-body{flex:1 1 auto}
@media(max-width:560px){.dlg.resizable{resize:none;width:100%!important;height:auto!important}}
.dlg-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.dlg-head h3{margin:0;font-size:18px;flex:1}
.dlg-x{border:none;background:var(--surface-2);color:var(--muted);width:32px;height:32px;border-radius:9px;font-size:15px}
.dlg-body{padding:16px;overflow:auto}

/* install bar */
.install-bar{position:fixed;left:12px;right:12px;bottom:12px;max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;z-index:90}
.install-bar .grow{flex:1}

/* responsive */
@media(max-width:820px){
  .lobby{grid-template-columns:1fr}
  .side{border-right:none;border-bottom:1px solid var(--border);flex-direction:column}
  .side .spacer{display:none}
  .b-add-room{min-height:64px;font-size:20px;flex-direction:row;gap:10px}
  .b-add-room .pl{font-size:26px}
  .work-area{padding:14px}
  .room-head{grid-template-columns:1fr;text-align:center}
  .rh-left,.rh-right{text-align:center}
  .cat-grid.two,.cat-grid.three{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .menu-grid{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr}
  .cat-grid.two,.cat-grid.three{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr;gap:8px}
  .rgrid .rt{text-align:left}
  .dims{grid-template-columns:1fr 1fr}
  .auth .title{font-size:36px}
}

/* theme toggle */
.theme-fab{position:fixed;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:40;width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:18px;display:grid;place-items:center;box-shadow:var(--shadow)}

/* menu bright gradient tiles */
.menu-grid .big-btn{min-height:160px}
.menu-grid .wide{grid-column:1 / -1;min-height:92px;flex-direction:row;gap:14px}
.mm-new{background:linear-gradient(135deg,#FF8A80,#FF5252)}
.mm-open{background:linear-gradient(135deg,#5C9DF5,#1976D2)}
.mm-dl{background:linear-gradient(135deg,#B39DDB,#7C4DFF)}
@media(max-width:560px){ .menu-grid{grid-template-columns:1fr} .menu-grid .big-btn{min-height:120px} }

/* admin CRUD */
.badge{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.badge.on{background:rgba(46,158,70,.15);color:#2e9e46}
.badge.off{background:rgba(229,67,60,.15);color:#e5433c}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.mini.ok{color:#fff;background:var(--grad-green);border-color:transparent}
.b-cloud{background:var(--grad-blue);box-shadow:0 5px 14px rgba(37,99,235,.3)}

.b-act{background:var(--grad-purple);box-shadow:0 5px 14px rgba(124,58,237,.3)}

/* ===== v21: selects arrow, tiles, tables, checkboxes ===== */
select.inp,.sel,.csel{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a97ab' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:13px;padding-right:34px;
}
.csel{padding-right:30px;background-position:right 9px center}

/* role chooser + admin tiles (variant 3: badge over bright gradient card) */
.choose-wrap{max-width:1120px;margin:0 auto;padding:30px clamp(16px,5vw,56px);min-height:calc(100dvh - 54px - 33px);display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vh,44px)}
.choose-title{text-align:center;font-size:clamp(20px,2.4vw,26px);font-weight:800;color:var(--text);line-height:1.25}
.choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.2vw,44px);width:100%;margin:0 auto;padding-top:50px}
.admin-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,2.6vw,36px);width:100%;margin:0 auto;padding-top:50px}
.tile{position:relative;border:none;border-radius:24px;padding:60px 20px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(20,30,45,.22);transition:transform .14s, box-shadow .14s}
.choose-grid .tile{min-height:clamp(240px,34vh,320px)}
.admin-tiles .tile{min-height:clamp(210px,27vh,270px)}
.tile::after{content:"";position:absolute;inset:0;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 46%);pointer-events:none}
.tile:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(20,30,45,.32)}
.tile .badge{position:absolute;top:-36px;left:50%;transform:translateX(-50%);z-index:1;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:5px solid var(--surface2);box-shadow:0 8px 22px rgba(20,30,45,.26)}
.tile .badge svg{width:56px;height:56px;fill:currentColor}
.tile .tt{position:relative;z-index:1;font-size:clamp(17px,1.7vw,22px);font-weight:800;text-align:center;line-height:1.2;padding:0 6px}
.tile .ts{position:relative;z-index:1;font-size:13.5px;opacity:.92;text-align:center;line-height:1.25}
.tile-admin{background:linear-gradient(145deg,#8B5CF6 0%,#6366F1 48%,#3B82F6 100%)}
.tile-user{background:linear-gradient(145deg,#22E3B0 0%,#10C4A2 48%,#0EA5E9 100%)}
.tile-accounts{background:linear-gradient(145deg,#FFC24B 0%,#FF9F1C 48%,#FB6B3C 100%)}
.tile-branches{background:linear-gradient(145deg,#C86BFF 0%,#A24BF0 48%,#7C3AED 100%)}
.tile-materials{background:linear-gradient(145deg,#FF8A5B 0%,#FF6B4A 48%,#F43F5E 100%)}
.tile-works{background:linear-gradient(145deg,#7BE86B 0%,#3FD65A 48%,#16A34A 100%)}
.tile-groups{background:linear-gradient(145deg,#FF9EBB 0%,#FB6FA0 48%,#E84393 100%)}
.tile-admin .badge{color:#6D5DF6}
.tile-user .badge{color:#0FB6A6}
.tile-accounts .badge{color:#F97316}
.tile-branches .badge{color:#9333EA}
.tile-materials .badge{color:#F43F5E}
.tile-works .badge{color:#16A34A}
.tile-groups .badge{color:#E84393}
@media(max-width:560px){
  .choose-grid{grid-template-columns:1fr}
  .tile{padding:52px 16px 26px}
  .choose-grid .tile,.admin-tiles .tile{min-height:180px}
  .tile .badge{width:82px;height:82px;top:-30px}
  .tile .badge svg{width:46px;height:46px}
  .tile .tt{font-size:18px}
  .choose-title{font-size:19px}
}

/* generic data tables (users/branches/ref/estimates) */
.grid-table{width:100%;border-collapse:collapse;font-size:14px}
.grid-table th{background:var(--surface-2);color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;padding:10px 10px;border-bottom:2px solid var(--border);text-align:left;white-space:nowrap;position:sticky;top:0;z-index:1}
.grid-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.grid-table tr:last-child td{border-bottom:none}
.grid-table th.ctr,.grid-table td.ctr{text-align:center}
.grid-table th.num,.grid-table td.num{text-align:right;white-space:nowrap}
.grid-table td.empty{text-align:center;color:var(--muted);padding:26px}
.ref-table .nm-cell{width:100%;min-width:220px;text-align:left}
.ref-table .price-cell{width:108px;text-align:right}
.ref-table .csel{width:100%;min-width:132px}
.ref-table td{padding:6px 8px}

/* checkbox row */
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:14px;line-height:1.4}
.chk input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--brand)}
.badge.adm{background:rgba(92,107,192,.16);color:#5C6BC0}
:root[data-theme="dark"] .badge.adm{color:#9fa8f0}

/* ===== v23: sortable + resizable columns, branch table ===== */
.grid-table th.sortable{cursor:pointer;user-select:none}
.grid-table th.sortable:hover{color:var(--text)}
.grid-table th .sarr{display:inline-block;margin-left:5px;font-size:9px;opacity:.3;vertical-align:middle}
.grid-table th.sort-asc .sarr,.grid-table th.sort-desc .sarr{opacity:1;color:var(--brand)}
.col-resizer{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:3;touch-action:none}
.col-resizer::after{content:"";position:absolute;top:22%;right:4px;width:2px;height:56%;background:var(--border);border-radius:2px;transition:.12s}
.grid-table th:hover .col-resizer::after{background:var(--brand)}
.grid-table.resizing{cursor:col-resize;user-select:none}
.grid-table.resizing *{user-select:none}

/* branch table cells */
.brt td{vertical-align:middle}
.brt .cell-actions{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:nowrap;white-space:nowrap}
.contract-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;font-weight:600}
.contract-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.contract-none{color:var(--muted);font-size:13px}

/* ===== v25: search clear button, catEditor selected/drag ===== */
.search{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.search>input.srch{width:100%;padding-right:36px}
.search-x{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;background:var(--surface-2);color:var(--muted);border-radius:50%;display:none;place-items:center;font-size:12px;line-height:1;padding:0}
.search-x.show{display:grid}
.search-x:hover{color:#fff;background:var(--red)}

/* catEditor: selected rows pinned on top + drag */
.cat-table tr.on{background:rgba(245,124,0,.08)}
.cat-table .drag{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;margin-right:6px;color:var(--muted);cursor:grab;touch-action:none;font-size:15px;vertical-align:middle;border-radius:6px}
.cat-table .drag:hover{background:var(--surface-2);color:var(--text)}
.cat-table tr.dragging{opacity:.5}
.cat-table tr.drop-target td{box-shadow:inset 0 2px 0 var(--brand)}
.sel-sep td{padding:4px 9px !important;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);text-transform:uppercase;letter-spacing:.03em}
.cat-addrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cat-table.catsel{table-layout:fixed;width:100%;min-width:660px}
.cat-table.catsel td.cn{white-space:normal;word-break:break-word;max-width:none}
.cat-table.catsel td.cn .ck{display:inline}
.cat-table.catsel td.cn .ck input{vertical-align:middle;margin-right:6px}
.cat-table.catsel td.cn .drag{vertical-align:middle}
.cat-table.catsel{font-size:13px}
.cat-table.catsel th{white-space:normal;font-size:10.5px;line-height:1.15;vertical-align:middle}
.cat-table.catsel td,.cat-table.catsel th{padding:6px 7px}
.cat-table.catsel td.num{white-space:nowrap}
.cat-table.catsel .cell,.cat-table.catsel .csel{width:100%;min-width:0;box-sizing:border-box}
.cat-table.catsel .cell{padding:6px 6px;text-align:right}
.cat-table.catsel td.cn .rename{padding:2px 6px;font-size:12px}

/* ===== v27: update notifications ===== */
.upd-badge{position:fixed;right:16px;bottom:16px;z-index:200;display:inline-flex;align-items:center;gap:6px;background:var(--grad);color:#fff;border:none;border-radius:999px;padding:11px 18px;font-weight:700;box-shadow:0 8px 22px rgba(255,122,24,.4);animation:updpulse 2s ease-in-out infinite}
@keyframes updpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.upd-details{margin-top:6px;border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--surface-2)}
.upd-details summary{cursor:pointer;font-weight:600;color:var(--brand)}
.upd-notes{margin-top:8px;max-height:40vh;overflow:auto}
.upd-ver{margin-bottom:10px}
.upd-ver ul{margin:6px 0 0;padding-left:20px}
.upd-ver li{margin:3px 0}

/* ===== v28: adaptive selected-works (desktop row / mobile card) ===== */
.sel-cap{display:flex;gap:8px;align-items:center;padding:2px 8px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.sel-cap .cl-lead{flex:0 0 46px}
.sel-cap .cl-nm{flex:1 1 auto;min-width:0}
.sel-cap .cl-type{flex:0 0 116px}
.sel-cap .cl-cnt{flex:0 0 64px;text-align:right}
.sel-cap .cl-sale{flex:0 0 66px;text-align:right}
.sel-cap .cl-sum{flex:0 0 90px;text-align:right}
.sel-cap .cl-act{flex:0 0 58px}
.sel-list{display:flex;flex-direction:column;gap:6px}
.selrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:10px;background:rgba(245,124,0,.06)}
.selrow .drag{flex:0 0 20px;color:var(--muted);cursor:grab;text-align:center;touch-action:none;user-select:none}
.selrow .chk{flex:0 0 18px;width:18px;height:18px;accent-color:var(--brand)}
.selrow .nm{flex:1 1 auto;min-width:0;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selrow .fld{display:flex;align-items:center;gap:4px}
.selrow .fld .ml{display:none}
.selrow .fld-type{flex:0 0 116px}
.selrow .fld-type .selc{width:100%}
.selrow .fld-cnt{flex:0 0 64px}
.selrow .fld-sale{flex:0 0 66px}
.selrow .fld .inp{width:100%;text-align:right}
.selrow .fld-sale .pct{display:none}
.selrow .sum{flex:0 0 90px;text-align:right;font-weight:800;font-size:13px}
.selrow .acts{flex:0 0 58px;display:flex;gap:4px;justify-content:flex-end}
.selrow.dragging{opacity:.5;box-shadow:0 6px 18px rgba(20,30,45,.2)}
.ib{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:8px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;flex:none;padding:0;line-height:0}
.ib svg{display:block}
.ib.danger{color:#fff;background:var(--grad-red);border-color:transparent}
.sel-sep{margin:12px 0 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border-top:1px solid var(--border);padding-top:8px}
.pool-list{display:flex;flex-direction:column}
.poolrow{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid var(--border);cursor:pointer}
.poolrow:hover{background:var(--surface-2)}
.poolrow .chk{width:18px;height:18px;flex:none;accent-color:var(--brand)}
.poolrow .nm{flex:1 1 auto;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poolrow .pprice{flex:none;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
@media(max-width:1024px){
  .sel-cap{display:none}
  .selrow{flex-wrap:wrap;gap:6px 7px;padding:9px 11px;border-radius:12px}
  .selrow .nm{flex:1 1 55%;white-space:normal;overflow:visible;font-size:13.5px}
  .selrow .acts{order:4;flex:0 0 auto;gap:6px}
  .selrow .fld{order:5;flex:0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:2px 7px;gap:4px}
  .selrow .fld .ml{display:inline;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
  .selrow .fld-type,.selrow .fld-cnt,.selrow .fld-sale{flex:0 0 auto}
  .selrow .fld .inp{width:42px;padding:3px 4px;font-size:13px}
  .selrow .fld-type .selc{width:auto;padding:3px 20px 3px 6px;font-size:12.5px;background-position:right 5px center}
  .selrow .fld-sale .pct{display:inline;color:var(--muted);font-size:11px}
  .selrow .sum{order:6;flex:1 1 auto;text-align:right;font-size:14px;font-weight:800;margin-left:auto}
  .poolrow{align-items:flex-start}
  .poolrow .nm{white-space:normal;overflow:visible}
}

/* ===== v30: acts of completion ===== */
.acts-list{display:flex;flex-direction:column;gap:8px}
.act-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.act-item .grow{flex:1;min-width:0}
.act-item .nm{font-weight:700}
.act-item .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.act-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.act-form{display:flex;flex-wrap:wrap;gap:10px}
.act-form .af{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);flex:1 1 120px}
.act-form .af.g2{flex:1 1 220px}
.act-form .af .inp{width:100%}
.ac-room{margin-bottom:10px}
.ac-room-h{font-weight:700;font-size:13px;margin:8px 0 4px;color:var(--brand)}

/* ===== v31: contract cheat-sheet ===== */
.upd-notes code{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:12px;color:var(--brand)}
.upd-notes>div{margin:4px 0}

/* ===== v37: rich split auth ===== */
.auth2{min-height:100dvh;display:grid;grid-template-columns:1.15fr .85fr;background:var(--bg)}
.auth2-left{position:relative;overflow:hidden;background:linear-gradient(150deg,#8E0D16 0%,#5C0910 45%,#1E2129 100%);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:52px clamp(28px,4vw,64px)}
.auth2-left::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,4,6,.86) 0%,rgba(8,4,6,.7) 48%,rgba(8,4,6,.42) 100%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.a2-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.16}
.a2-inner{position:relative;z-index:1;max-width:600px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.a2-wm{font-weight:900;letter-spacing:3px;font-size:clamp(30px,3.4vw,42px);line-height:1;color:#fff}
.a2-wm span{display:block;letter-spacing:2px;font-size:12px;color:rgba(255,255,255,.9);font-weight:700;margin-top:6px;text-transform:uppercase}
.a2-h{font-size:clamp(20px,2.3vw,28px);line-height:1.25;margin:22px 0 12px;font-weight:800;max-width:560px;color:#fff}
.a2-desc{color:#fff;opacity:.96;font-size:14.5px;line-height:1.6;max-width:560px;margin:0 0 22px}
.a2-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:600px}
.a2-card{display:flex;gap:12px;align-items:flex-start;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:13px 14px}
.a2-card .ic{font-size:22px;line-height:1}
.a2-card b{display:block;font-size:14px;margin-bottom:2px;color:#fff}
.a2-card span{display:block;color:rgba(255,255,255,.86);font-size:12.5px;line-height:1.4}
.a2-foot{margin-top:26px;color:rgba(255,255,255,.9);font-size:12.5px;line-height:1.7;border-top:1px solid rgba(255,255,255,.22);padding-top:14px}
.a2-foot a{color:#FFD27A;font-weight:700}
.auth2-right{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--surface)}
.auth2-right form{width:100%;max-width:360px}
.a2-title{margin:0 0 4px;font-size:24px;color:var(--text)}
.a2-sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.auth2-right .lbl{font-size:13px;color:var(--muted);margin-top:12px}
.auth2-right .inp{width:100%;margin-top:6px}
.auth2-right .go{width:100%;margin-top:20px;border:none;border-radius:12px;padding:14px;font-weight:800;font-size:16px;color:#fff;background:var(--grad);box-shadow:0 6px 16px rgba(255,122,24,.35);cursor:pointer}
.auth2-right .go:hover{filter:brightness(1.05)}
.auth2-right .err{margin-top:14px;background:rgba(229,67,60,.12);color:#e5433c;border-radius:10px;padding:10px 12px;font-size:13.5px}
.a2-help{margin-top:16px;color:var(--muted);font-size:12.5px;text-align:center}
.a2-help a{color:var(--brand);font-weight:700}
@media(max-width:900px){
  .auth2{grid-template-columns:1fr}
  .auth2-left{padding:34px 22px 26px}
  .a2-grid{grid-template-columns:1fr}
  .a2-h{font-size:20px}
}

/* ===== v36: blocked overlay, branch checkbox grid ===== */
.block-ov{position:fixed;inset:0;z-index:9999;background:rgba(15,20,30,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.block-card{background:var(--surface);border-radius:18px;padding:30px 26px;max-width:400px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.block-card .bi{font-size:44px}
.block-card h2{margin:10px 0 6px;color:var(--red)}
.block-card p{color:var(--muted);font-size:14px;line-height:1.5}
.block-card .go{margin-top:16px;border:none;border-radius:11px;padding:12px 20px;font-weight:800;color:#fff;background:var(--grad);cursor:pointer}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;max-height:180px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.chk-grid .chk{font-size:13.5px}
@media(max-width:560px){.chk-grid{grid-template-columns:1fr}}

/* ===== v42: info note, action cells nowrap ===== */
.info-note{background:rgba(245,124,0,.1);border:1px solid rgba(245,124,0,.35);color:var(--text);border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.45;margin-bottom:10px}
.grid-table td.row-actions{white-space:nowrap;flex-wrap:nowrap}
.grid-table td.row-actions .mini{flex:none}