/* Buildflowz UI System v1 — premium construction SaaS */
:root{
  --bg:#07111f;
  --bg-2:#0a1424;
  --surface:#0e1a2c;
  --surface-2:#12223a;
  --surface-3:#172a46;
  --surface-glass:rgba(15,28,48,.78);
  --line:#213653;
  --line-strong:#315276;
  --text:#f4f8ff;
  --text-2:#c7d4e6;
  --muted:#899fba;
  --primary:#5f87ff;
  --primary-2:#7b68ee;
  --primary-soft:rgba(95,135,255,.13);
  --accent:#33d4b3;
  --accent-soft:rgba(51,212,179,.11);
  --warning:#f4c85e;
  --warning-soft:rgba(244,200,94,.10);
  --danger:#ff7386;
  --danger-soft:rgba(255,115,134,.10);
  --shadow-sm:0 8px 24px rgba(0,0,0,.16);
  --shadow-md:0 18px 50px rgba(0,0,0,.22);
  --shadow-lg:0 36px 90px rgba(0,0,0,.28);
  --radius-sm:10px;
  --radius-md:15px;
  --radius-lg:22px;
  --radius-xl:28px;
  --sidebar:272px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f4f7fb;
  --bg-2:#edf2f8;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#edf3fa;
  --surface-glass:rgba(255,255,255,.86);
  --line:#dbe4ef;
  --line-strong:#c5d1df;
  --text:#132238;
  --text-2:#3e5068;
  --muted:#6f8197;
  --primary:#466ee8;
  --primary-2:#6c58d9;
  --primary-soft:rgba(70,110,232,.10);
  --accent:#139b7f;
  --accent-soft:rgba(19,155,127,.09);
  --warning:#a87800;
  --warning-soft:rgba(168,120,0,.08);
  --danger:#d8445a;
  --danger-soft:rgba(216,68,90,.08);
  --shadow-sm:0 8px 24px rgba(26,42,63,.07);
  --shadow-md:0 18px 50px rgba(26,42,63,.10);
  --shadow-lg:0 36px 90px rgba(26,42,63,.14);
  color-scheme:light;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,"Noto Sans Thai","Leelawadee UI","Segoe UI",system-ui,-apple-system,sans-serif!important;
  background:
    radial-gradient(circle at 13% -5%,rgba(95,135,255,.10),transparent 30rem),
    radial-gradient(circle at 90% 12%,rgba(51,212,179,.05),transparent 28rem),
    var(--bg)!important;
  color:var(--text)!important;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
button{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(95,135,255,.32);color:var(--text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid transparent;background-clip:padding-box;border-radius:20px}
.hidden{display:none!important}
.muted{color:var(--muted)!important}
.small{font-size:12px!important}
a{color:inherit}

h1,h2,h3,b,strong{letter-spacing:-.01em}
h1{font-weight:820}
h2{font-weight:780}
h3{font-weight:760}

.card{
  position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,white 4%),var(--surface))!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-sm);
}
.card::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.045),transparent 32%);
}
.card>*{position:relative;z-index:1}

.btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--line)!important;
  background:linear-gradient(180deg,var(--surface-3),var(--surface-2))!important;
  color:var(--text)!important;
  padding:9px 14px!important;
  border-radius:12px!important;
  font-weight:720!important;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px);border-color:var(--line-strong)!important;box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent);
  outline-offset:2px;
}
.btn.primary{
  border-color:color-mix(in srgb,var(--primary) 72%,white 8%)!important;
  background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
  box-shadow:0 10px 28px rgba(79,116,235,.22),0 1px 0 rgba(255,255,255,.18) inset!important;
  color:#fff!important;
}
.btn.primary:hover{box-shadow:0 14px 34px rgba(79,116,235,.30)!important}
.btn.good{
  background:linear-gradient(135deg,#2ac79f,var(--accent))!important;
  border-color:var(--accent)!important;
  color:#05231b!important;
  box-shadow:0 10px 24px rgba(51,212,179,.14)!important;
}
.btn.warn{background:linear-gradient(135deg,#ffd56a,var(--warning))!important;border-color:var(--warning)!important;color:#2d2305!important}
.btn.sm{min-height:34px;padding:6px 10px!important;font-size:12px!important}

.tag{
  display:inline-flex!important;
  align-items:center;
  gap:5px;
  min-height:25px;
  padding:4px 9px!important;
  border-radius:999px!important;
  border:1px solid var(--line)!important;
  background:color-mix(in srgb,var(--surface-2) 86%,transparent)!important;
  color:var(--muted)!important;
  font-size:11px!important;
  font-weight:700;
  letter-spacing:.01em;
}
.tag.good{color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))!important;background:var(--accent-soft)!important}
.tag.warn{color:var(--warning)!important;border-color:color-mix(in srgb,var(--warning) 30%,var(--line))!important;background:var(--warning-soft)!important}
.tag.red{color:var(--danger)!important;border-color:color-mix(in srgb,var(--danger) 30%,var(--line))!important;background:var(--danger-soft)!important}

.field{margin-top:15px!important}
.field label{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  color:var(--text-2)!important;
  font-size:12px!important;
  font-weight:680;
  margin-bottom:7px!important;
}
.field input,.field select,.field textarea,
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  width:100%;
  min-height:44px;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--bg) 82%,var(--surface) 18%)!important;
  color:var(--text)!important;
  padding:10px 12px!important;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)!important}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 68%,transparent)}

.notice{
  position:relative;
  padding:13px 15px 13px 42px!important;
  border:1px solid color-mix(in srgb,var(--warning) 27%,var(--line))!important;
  background:linear-gradient(90deg,var(--warning-soft),transparent)!important;
  border-radius:14px!important;
  color:color-mix(in srgb,var(--warning) 86%,var(--text) 14%)!important;
  font-size:12px!important;
  line-height:1.65!important;
}
.notice::before{
  content:"i";
  position:absolute;
  left:14px;top:13px;
  width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid currentColor;
  font-size:11px;font-weight:900;
}

.demo{
  border:1px dashed var(--line-strong)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.018)!important;
  padding:13px!important;
  color:var(--muted)!important;
}

.logo,.mini{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,var(--primary),var(--primary-2))!important;
  color:#fff!important;
  box-shadow:0 10px 25px rgba(75,103,220,.25),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.logo::after,.mini::after{
  content:"";
  position:absolute;
  width:58%;height:58%;
  right:-20%;bottom:-22%;
  border-radius:50%;
  background:rgba(51,212,179,.8);
  filter:blur(1px);
}

/* Auth screens */
.login,.page:has(>.card:only-child){
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(circle at 12% 12%,rgba(95,135,255,.16),transparent 32rem),
    radial-gradient(circle at 90% 88%,rgba(51,212,179,.08),transparent 32rem),
    var(--bg)!important;
  background-size:32px 32px,32px 32px,auto,auto,auto!important;
}
.login{min-height:100svh!important;padding:28px!important}
.loginbox{
  width:min(1080px,100%)!important;
  min-height:630px;
  border-radius:var(--radius-xl)!important;
  overflow:hidden;
  box-shadow:var(--shadow-lg)!important;
  border-color:color-mix(in srgb,var(--line) 70%,var(--primary) 30%)!important;
}
.hero{
  position:relative;
  overflow:hidden;
  padding:42px!important;
  background:
    radial-gradient(circle at 75% 15%,rgba(95,135,255,.24),transparent 20rem),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 86%,var(--primary) 14%),var(--surface))!important;
}
.hero::before{
  content:"";
  position:absolute;
  width:380px;height:380px;
  right:-180px;bottom:-170px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012);
}
.hero>*{position:relative;z-index:1}
.hero h1{
  font-size:clamp(38px,5vw,60px)!important;
  line-height:1.01!important;
  letter-spacing:-.045em!important;
  max-width:690px;
  margin-top:18px!important;
}
.hero p{max-width:650px;font-size:14px;line-height:1.75!important;color:var(--text-2)!important}
.flow{gap:10px!important}
.flow div{
  min-height:58px;
  display:flex;
  align-items:center;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.028)!important;
  color:var(--text-2);
  font-weight:650;
}
.loginpanel{
  padding:44px!important;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 92%,var(--bg) 8%))!important;
}
.loginpanel h2{font-size:26px!important;letter-spacing:-.025em}
.loginpanel>.btn.primary{width:100%;margin-top:4px;min-height:46px}

/* Shell */
.app{grid-template-columns:var(--sidebar) minmax(0,1fr)!important}
.side{
  width:var(--sidebar);
  padding:18px 14px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 10rem),
    color-mix(in srgb,var(--bg-2) 92%,black 8%)!important;
  border-right:1px solid var(--line)!important;
  z-index:20;
}
.side .brand{
  padding:4px 8px 17px;
  margin-bottom:6px!important;
  border-bottom:1px solid var(--line);
}
.side .brand .logo{width:42px!important;height:42px!important;border-radius:13px!important}
.side .brand b{font-size:15px}
.nav{padding-top:6px}
.navgroup{
  padding:16px 10px 7px!important;
  color:color-mix(in srgb,var(--muted) 72%,transparent)!important;
  font-size:10px!important;
  font-weight:800;
  letter-spacing:.13em!important;
}
.nav button{
  position:relative;
  min-height:43px;
  padding:10px 12px!important;
  margin:2px 0;
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:var(--muted)!important;
  font-weight:650!important;
  transition:all .18s var(--ease);
}
.nav button:hover{
  background:rgba(255,255,255,.035)!important;
  color:var(--text)!important;
  border-color:rgba(255,255,255,.025)!important;
}
.nav button.active{
  background:linear-gradient(90deg,var(--primary-soft),rgba(95,135,255,.035))!important;
  color:#dce6ff!important;
  border-color:color-mix(in srgb,var(--primary) 27%,var(--line))!important;
  box-shadow:inset 3px 0 0 var(--primary);
}
html[data-theme="light"] .nav button.active{color:var(--primary)!important}

.top{
  min-height:74px!important;
  height:auto!important;
  padding:11px 24px!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--surface-glass)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}
.top b{font-size:14px}
.main{max-width:1500px!important;padding:28px!important}
.page{animation:bzFade .25s var(--ease)}
@keyframes bzFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.head{margin-bottom:20px!important;align-items:flex-start!important}
.head h1{font-size:clamp(27px,3vw,36px)!important;letter-spacing:-.035em!important}
.head p{font-size:13px;line-height:1.65;color:var(--muted)!important}

.kpis{gap:14px!important}
.kpi{
  min-height:118px;
  padding:18px!important;
  overflow:hidden;
}
.kpi::before{
  content:"";
  position:absolute;
  width:4px;
  height:36px;
  left:0;
  top:22px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(var(--primary),var(--accent));
}
.kpi .muted,.kpi>.small{font-weight:650}
.kpi b,.kpi .v{
  font-size:30px!important;
  line-height:1.05;
  letter-spacing:-.035em;
  margin-top:9px!important;
  color:var(--text);
}

.grid{gap:14px!important}
.module{
  min-height:225px;
  padding:19px!important;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.module:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 25%,var(--line))!important;box-shadow:var(--shadow-md)}
.module .icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--line);
  font-size:24px!important;
}
.module h3{font-size:16px;margin-top:15px!important}
.module p{font-size:12.5px!important;line-height:1.6!important;color:var(--muted)!important}
.actions{gap:8px!important;margin-top:14px!important}

.section{
  padding:19px!important;
  margin-top:16px!important;
}
.section h3{font-size:15px;margin-bottom:15px!important}
.tablewrap{border-color:var(--line)!important;border-radius:14px!important}
table{border-collapse:separate!important;border-spacing:0}
th{
  position:sticky;top:0;
  z-index:1;
  padding:12px!important;
  color:var(--muted)!important;
  font-size:10px!important;
  letter-spacing:.08em;
  background:var(--surface-2)!important;
  border-bottom:1px solid var(--line)!important;
}
td{
  padding:13px 12px!important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent)!important;
  color:var(--text-2);
}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:rgba(255,255,255,.018)}
.check,.checkpill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px!important;
  border-radius:10px!important;
  background:var(--surface-2);
  border:1px solid var(--line)!important;
  color:var(--text-2);
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--primary);width:16px;height:16px}

/* Generic standalone / launcher pages */
.wrap{max-width:1180px!important;padding:26px!important}
.wrap>.top{
  position:relative!important;
  top:auto!important;
  margin:-2px 0 26px;
  padding:0!important;
  min-height:auto!important;
  border:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
.wrap>.top .brand .logo{width:44px;height:44px;border-radius:14px}
.wrap>h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;margin-bottom:6px!important}
.wrap>p.muted{font-size:14px;max-width:760px;line-height:1.7}
.appcard,.wrap>.grid>.card{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.appcard:hover,.wrap>.grid>.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--primary) 24%,var(--line))!important}
.appcard .icon,.wrap>.grid>.card>.icon{
  width:54px;height:54px;display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(145deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--line);
}
.appcard h2,.wrap>.grid>.card h2{font-size:18px;letter-spacing:-.02em}

/* Module apps */
.app>.top .brand{min-width:0}
.app>.top .brand>div:last-child{min-width:0}
.layout{gap:16px!important}
.tabbar{
  position:sticky;
  top:86px;
  z-index:2;
  padding:6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-glass);
  backdrop-filter:blur(12px);
}
.tabbar .btn{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.tabbar .btn.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
  color:#fff!important;
}
.status{
  border-radius:14px!important;
  background:linear-gradient(145deg,var(--surface-2),var(--surface))!important;
}
.item{
  background:rgba(255,255,255,.015);
  border-radius:12px!important;
}
.menu{gap:10px!important}
.menu .btn{
  min-height:96px!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  flex-direction:column;
  padding:15px!important;
}
.menu .btn b{font-size:14px}

/* Activation */
.page>.card{
  width:min(680px,100%)!important;
  padding:28px!important;
  box-shadow:var(--shadow-lg)!important;
}
.detail{
  background:var(--surface-2);
  border:1px solid var(--line)!important;
  border-radius:14px!important;
}

/* Modal */
.bz-modal{
  background:rgba(2,7,15,.72)!important;
  backdrop-filter:blur(8px);
}
.bz-modal-card{
  border-radius:22px!important;
  box-shadow:var(--shadow-lg);
}

/* UI system helpers */
.bz-theme-toggle{
  width:36px;height:36px;min-height:36px!important;
  padding:0!important;
  border-radius:11px!important;
}
.bz-proto-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px;border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.bz-proto-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.bz-sidebar-footer{
  margin-top:auto;
  padding:12px 9px 4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}
.side{display:flex;flex-direction:column}
.side .nav{flex:1}
.bz-nav-scrim{display:none}
.bz-command{
  position:relative;
  overflow:hidden;
  padding:24px!important;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 82% 10%,rgba(95,135,255,.20),transparent 18rem),
    linear-gradient(135deg,color-mix(in srgb,var(--surface) 86%,var(--primary) 14%),var(--surface))!important;
}
.bz-command::before{
  content:"";
  position:absolute;
  right:-55px;bottom:-95px;
  width:260px;height:260px;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 0 38px rgba(255,255,255,.018),0 0 0 76px rgba(255,255,255,.012);
}
.bz-command>*{position:relative;z-index:1}
.bz-command-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.bz-command h2{font-size:25px;margin:5px 0 5px;letter-spacing:-.035em}
.bz-command p{margin:0;color:var(--muted);max-width:780px}
.bz-command-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.bz-command-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bz-command-chip{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--text-2);font-size:11px;font-weight:650}

/* Responsive */
@media(max-width:1000px){
  :root{--sidebar:250px}
  .main{padding:22px!important}
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  .grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:760px){
  body{font-size:14px}
  .login{padding:12px!important;align-items:start!important}
  .loginbox{grid-template-columns:1fr!important;min-height:auto;border-radius:22px!important}
  .hero{min-height:auto!important;padding:24px!important}
  .hero h1{font-size:38px!important}
  .hero .flow{grid-template-columns:1fr 1fr!important}
  .loginpanel{padding:24px!important}
  .app{display:block!important}
  .side{
    position:fixed!important;
    left:-286px!important;
    top:0;
    width:272px!important;
    height:100svh!important;
    box-shadow:var(--shadow-lg);
    transition:left .22s var(--ease)!important;
  }
  .side.open{left:0!important}
  .bz-nav-scrim{
    position:fixed;inset:0;z-index:19;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(2px);
  }
  body.bz-menu-open .bz-nav-scrim{display:block}
  .top{padding:10px 13px!important;min-height:66px!important}
  .main{padding:16px!important}
  .head{flex-direction:column}
  .head h1{font-size:28px!important}
  .kpis,.grid,.formgrid{grid-template-columns:1fr!important}
  .kpi{min-height:104px}
  .module{min-height:auto}
  .actions .btn{min-height:42px}
  .tablewrap{margin-left:-2px;margin-right:-2px}
  .wrap{padding:16px!important}
  .wrap>.top{flex-direction:row!important}
  .layout{grid-template-columns:1fr!important}
  .tabbar{top:73px;overflow:auto;flex-wrap:nowrap!important}
  .tabbar .btn{white-space:nowrap}
  .bz-command-top{flex-direction:column}
  .bz-command-meta{justify-content:flex-start}
}
@media(max-width:430px){
  .hero h1{font-size:34px!important}
  .hero .flow{grid-template-columns:1fr!important}
  .flow div{min-height:50px}
  .loginpanel{padding:20px!important}
  .main{padding:13px!important}
  .top .actions{gap:5px!important}
  .top .btn.sm{padding:6px 8px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* Buildflowz v0.9.1 UI polish */
:where(a,button,[role="button"],.nav button):focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 32%,transparent)!important;
  outline-offset:2px!important;
}
.tablewrap{
  max-width:100%;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
}
.tablewrap table{width:100%;min-width:720px}
.bz-mobile-menu{display:none!important}
.bz-nav-scrim{touch-action:none}
.bz-theme-toggle,.bz-mobile-menu,.mobilemenu{flex:0 0 auto}
.top .brand{min-width:0}
.top .brand>div:last-child{min-width:0}
.top .brand b,.top .brand .small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:760px){
  body.bz-menu-open{overflow:hidden}
  .bz-mobile-menu,.mobilemenu{display:inline-flex!important;align-items:center;justify-content:center}
  .side{
    padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
    overscroll-behavior:contain;
  }
  .top{
    gap:9px!important;
    padding-left:calc(13px + env(safe-area-inset-left))!important;
    padding-right:calc(13px + env(safe-area-inset-right))!important;
  }
  .top>.actions,
  .app>.top>.actions,
  .app>.top>div:last-child{
    display:flex!important;
    gap:6px!important;
    flex-wrap:wrap;
    justify-content:flex-end;
    min-width:0;
  }
  .top .btn.sm{min-height:36px}
  .main{padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  .tablewrap{
    border:1px solid var(--line)!important;
    border-radius:12px!important;
    background:color-mix(in srgb,var(--surface) 82%,transparent);
  }
  .tablewrap table{min-width:680px}
  .bz-command{padding:18px!important}
  .bz-command-top{flex-direction:column}
  .bz-command-meta{justify-content:flex-start}
}
@media(max-width:420px){
  .login{padding:8px!important}
  .hero,.loginpanel{padding:20px!important}
  .hero h1{font-size:34px!important}
  .main{padding:12px!important}
  .section{padding:15px!important}
  .wrap{padding:14px!important}
  .head h1{font-size:26px!important}
  .top .btn.sm{padding:7px 9px!important}
  .bz-command h2{font-size:22px}
}
@media(hover:none){
  .btn:hover,.module:hover,.appcard:hover,.wrap>.grid>.card:hover{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}