:root{
  --header:48px;
  --nav-collapsed:58px;
  --nav-expanded:252px;
  --nav-w:58px;

  --bg:#f4f8fa;
  --surface:#fff;
  --surface2:#f8fbfc;
  --surface3:#eef4f6;
  --line:#dbe6e9;
  --line2:#c7d7db;
  --text:#18242d;
  --muted:#748591;

  --primary:#3474d1;
  --primary2:#245fb2;
  --primarySoft:#eaf2fd;

  --accent:#0f8fd8;
  --accentSoft:#e7f5fd;

  --success:#1d9a68;
  --successSoft:#e8f7f0;
  --warning:#d28c25;
  --warningSoft:#fff4e5;
  --danger:#d75656;
  --dangerSoft:#fff0f0;

  --shadowSm:0 5px 16px rgba(24,58,64,.06);
  --shadow:0 16px 46px rgba(24,58,64,.12);

  --r:9px;
  --rl:14px;
  --field:40px;
}

body[data-theme="fluent-default"]{
  --primary:#3474d1;--primary2:#245fb2;--primarySoft:#eaf2fd;
  --accent:#0f8fd8;--accentSoft:#e7f5fd;
}
body.dark[data-theme="outlook"]{
  --primary:#5d96e8;--primary2:#78aaf0;--primarySoft:#182d48;
  --accent:#43a9e6;--accentSoft:#183244;
}

body[data-theme="indigo"]{
  --primary:#5064df;--primary2:#4051bd;--primarySoft:#edf0ff;
  --accent:#159d9b;--accentSoft:#e7f8f7;
}
body[data-theme="graphite"]{
  --primary:#43525e;--primary2:#303d46;--primarySoft:#edf1f3;
  --accent:#6c62d8;--accentSoft:#efefff;
}
body.dark{
  --bg:#10171a;--surface:#172126;--surface2:#1d292f;--surface3:#223238;
  --line:#31444a;--line2:#40575e;--text:#eef5f6;--muted:#9fb1b7;
  --primarySoft:#17363a;--accentSoft:#29294b;--successSoft:#17352b;--warningSoft:#3b2f1c;--dangerSoft:#3b2222;
  --shadowSm:0 6px 18px rgba(0,0,0,.22);--shadow:0 18px 48px rgba(0,0,0,.34);
}


body.dark[data-theme="outlook"]{
  --primary:#5d96e8;--primary2:#78aaf0;--primarySoft:#182d48;
  --accent:#43a9e6;--accentSoft:#183244;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);font-size:13px;
  background:
    radial-gradient(circle at 85% 0,color-mix(in srgb,var(--primarySoft) 72%,transparent),transparent 380px),
    linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 94%,var(--primarySoft)));
  overflow:hidden
}
button,input,textarea,select{font:inherit} button{cursor:pointer} svg{display:block}.hidden{display:none!important}

/* ===== SHELL ===== */
body.nav-open{--nav-w:var(--nav-expanded)}
.app{
  height:100vh;
  display:grid;
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  grid-template-rows:var(--header) minmax(0,1fr);
  transition:grid-template-columns .14s ease;
}
.sidebar{
  grid-column:1;grid-row:1/3;
  background:color-mix(in srgb,var(--surface) 97%,var(--primarySoft));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow:hidden;z-index:80;
  transition:box-shadow .18s ease;
}
body.nav-open .sidebar{box-shadow:8px 0 24px rgba(24,58,64,.045)}
.sidebar-head{
  height:var(--header);flex:0 0 var(--header);
  display:flex;align-items:center;gap:8px;padding:0 9px;
  border-bottom:1px solid var(--line);
}
.brand{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px;
  background:linear-gradient(145deg,var(--primary),var(--accent));color:#fff;font-weight:900;font-size:12px;
  box-shadow:0 5px 13px color-mix(in srgb,var(--primary) 18%,transparent)
}
.brand-copy{
  min-width:0;flex:1;opacity:0;transform:translateX(-6px);pointer-events:none;transition:.14s ease
}
body.nav-open .brand-copy{opacity:1;transform:none;pointer-events:auto}
.brand-copy b{display:block;font-size:9px;white-space:nowrap}.brand-copy small{display:block;font-size:5.8px;color:var(--muted);margin-top:1px;white-space:nowrap}
.nav-toggle{
  width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--muted);
  display:grid;place-items:center;flex:0 0 28px
}
.nav-toggle:hover{background:var(--primarySoft);color:var(--primary)}
.nav-toggle svg{width:15px;height:15px}
body:not(.nav-open) .sidebar-head{justify-content:center;padding:0}
body:not(.nav-open) .brand,body:not(.nav-open) .brand-copy{display:none}

.sidebar-search-wrap{
  overflow:hidden;max-height:0;opacity:0;transform:translateY(-5px);transition:.15s ease;
  padding:0 8px
}
body.nav-open .sidebar-search-wrap{max-height:48px;opacity:1;transform:none;padding-top:7px}
.sidebar-search{
  height:32px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);
  display:flex;align-items:center;gap:6px;padding:0 8px;color:var(--muted)
}
.sidebar-search svg{width:14px;height:14px}.sidebar-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:7.4px}
.sidebar-scroll{flex:1;overflow:auto;padding:5px 6px 8px}
.nav-section{
  height:0;overflow:hidden;opacity:0;
  color:var(--muted);font-size:5.8px;font-weight:850;text-transform:uppercase;letter-spacing:.7px;
  padding:0 8px;transition:.12s ease
}
body.nav-open .nav-section{height:auto;opacity:1;padding-top:10px;padding-bottom:4px}
.nav-link{
  width:100%;height:36px;border:0;border-radius:9px;background:transparent;color:var(--text);
  display:flex;align-items:center;gap:8px;padding:0 7px;text-align:left;position:relative;transition:.14s ease
}
.nav-link + .nav-link{margin-top:3px}.nav-link:hover{background:var(--surface2)}.nav-link.active{background:linear-gradient(90deg,var(--primarySoft),color-mix(in srgb,var(--accentSoft) 48%,var(--surface)));color:var(--primary)}
.nav-link.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--primary),var(--accent))}
.nav-icon{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--muted);flex:0 0 24px
}
.nav-link:hover .nav-icon,.nav-link.active .nav-icon{color:var(--primary);background:var(--surface)}
.nav-icon svg{width:16px;height:16px}
.nav-label{
  flex:1;min-width:0;font-size:7.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateX(-5px);transition:.13s ease
}
.nav-arr{color:var(--muted);opacity:0;transition:.13s}
body.nav-open .nav-label,body.nav-open .nav-arr{opacity:1;transform:none}
body:not(.nav-open) .nav-link{justify-content:center;padding:0}
body:not(.nav-open) .nav-label,body:not(.nav-open) .nav-arr{display:none}
body:not(.nav-open) .nav-link.active:before{left:auto;right:-6px}
.nav-divider{height:1px;background:var(--line);margin:8px 8px}

.sidebar-footer{border-top:1px solid var(--line);padding:7px;background:var(--surface);position:relative}
.user-btn{
  width:100%;height:43px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);
  display:flex;align-items:center;gap:7px;padding:0 7px;text-align:left;color:var(--text)
}
.user-btn:hover{background:var(--primarySoft)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,#f1c68f,#b46e45);display:grid;place-items:center;font-size:7px;font-weight:800;flex:0 0 28px}
.user-copy{min-width:0;flex:1;opacity:0;transform:translateX(-5px);transition:.13s}.user-copy b{display:block;font-size:6.9px}.user-copy small{display:block;font-size:5.7px;color:var(--muted)}
.user-chevron{opacity:0;color:var(--muted)}
body.nav-open .user-copy,body.nav-open .user-chevron{opacity:1;transform:none}
body:not(.nav-open) .user-btn{justify-content:center;padding:0}
body:not(.nav-open) .user-copy,body:not(.nav-open) .user-chevron{display:none}

/* ===== APPBAR ===== */
.topbar{
  grid-column:2;grid-row:1;
  height:var(--header);
  background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 10px;z-index:60
}
.mobile-menu{display:none}
.product{min-width:138px}.product b{display:block;font-size:9px}.product small{display:block;font-size:5.7px;color:var(--muted);margin-top:1px}
.global-search{
  flex:0 1 520px;min-width:220px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  display:flex;align-items:center;gap:7px;padding:0 9px;color:var(--muted)
}
.global-search:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 6%,transparent)}
.global-search svg{width:15px;height:15px}.global-search span{font-size:7.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-search kbd{margin-left:auto;font-size:5.8px;border:1px solid var(--line);border-radius:5px;background:var(--surface2);padding:1px 4px}
.spacer{flex:1}
.contexts{display:flex;gap:2px}
.context{
  height:32px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);
  display:flex;align-items:center;gap:6px;padding:0 7px
}
.context:hover{background:var(--surface);border-color:var(--line)}
.context .ico{width:20px;height:20px;border-radius:6px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.context .ico svg{width:13px;height:13px}
.context b{display:block;font-size:6.8px;white-space:nowrap}.context small{display:block;font-size:5.4px;color:var(--muted)}
.icon-btn{width:32px;height:32px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);display:grid;place-items:center;position:relative}.icon-btn:hover{background:var(--primarySoft);border-color:var(--line);color:var(--primary)}.icon-btn svg{width:15px;height:15px}.badge-dot{position:absolute;right:-2px;top:-3px;min-width:14px;height:14px;border-radius:8px;background:var(--danger);color:#fff;display:grid;place-items:center;font-size:5px;border:2px solid var(--surface)}
.top-profile{height:32px;border:1px solid var(--line);border-radius:9px;background:var(--surface);display:flex;align-items:center;gap:6px;padding:0 6px 0 4px}.top-profile .user-avatar{width:24px;height:24px;font-size:6.5px}.top-profile b{display:block;font-size:6.7px}.top-profile small{display:block;font-size:5.5px;color:var(--muted)}

/* ===== WORK ===== */
.work{grid-column:2;grid-row:2;overflow:auto;padding:10px}.page{max-width:1720px;margin:0 auto;animation:pageIn .2s ease both}@keyframes pageIn{from{opacity:0;transform:translateY(5px)}}
.page-head{display:flex;align-items:flex-start;gap:10px;margin:1px 0 9px}.crumb{font-size:5.9px;color:var(--muted);margin-bottom:3px}.page-head h1{margin:0;font-size:20px;letter-spacing:-.35px}.page-head p{margin:4px 0 0;font-size:7.6px;color:var(--muted)}
.commands{margin-left:auto;display:flex;align-items:center;gap:5px}.btn{height:30px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:6.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:5px}.btn:hover{background:var(--primarySoft);border-color:color-mix(in srgb,var(--primary) 34%,var(--line))}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}

/* ===== PANELS ===== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadowSm);overflow:hidden;min-width:0}.panel-head{height:37px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2));display:flex;align-items:center;gap:5px;padding:0 9px}.panel-head b{font-size:7.5px}.panel-head small{font-size:5.7px;color:var(--muted)}.panel-head .spacer{flex:1}.panel-head button{border:0;background:transparent;color:var(--primary);font-size:6px}

/* ===== DASHBOARD ===== */
.hero{min-height:101px;border-radius:14px;padding:14px 16px;margin-bottom:8px;color:#fff;background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.18),transparent 230px),linear-gradient(112deg,var(--primary2),var(--primary),color-mix(in srgb,var(--primary) 70%,var(--accent)));box-shadow:0 14px 32px color-mix(in srgb,var(--primary) 15%,transparent)}.hero h2{margin:0;font-size:17px}.hero p{margin:4px 0 0;font-size:7px;color:rgba(255,255,255,.82)}.hero-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.hero-chip{height:30px;min-width:108px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.09);display:flex;align-items:center;gap:7px;padding:0 8px}.hero-chip .dot{width:7px;height:7px;border-radius:50%;background:#a7ffd6}.hero-chip b{display:block;font-size:6.8px}.hero-chip small{display:block;font-size:5.4px;color:rgba(255,255,255,.76)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:8px}.kpi{min-height:108px;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadowSm);padding:9px;display:flex;flex-direction:column}.kpi-top{display:flex;justify-content:space-between;gap:6px}.kpi-label{font-size:6.2px;color:var(--muted)}.kpi-value{font-size:16px;font-weight:850;margin-top:4px}.trend{font-size:5.7px;color:var(--success);margin-top:5px}.trend.down{color:var(--danger)}.kpi-icon{width:28px;height:28px;border-radius:8px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.kpi-icon.alt{background:var(--accentSoft);color:var(--accent)}.kpi-icon.warn{background:var(--warningSoft);color:var(--warning)}.kpi-icon svg{width:14px;height:14px}.spark{height:29px;margin-top:auto}.spark svg{width:100%;height:100%}.spark .line{fill:none;stroke-width:2;stroke-linecap:round}.spark .area{opacity:.12}.spark.a .line{stroke:var(--primary)}.spark.a .area{fill:var(--primary)}.spark.b .line{stroke:#4c88ff}.spark.b .area{fill:#4c88ff}.spark.c .line{stroke:var(--accent)}.spark.c .area{fill:var(--accent)}.spark.d .line{stroke:#ef9a28}.spark.d .area{fill:#ef9a28}.spark.e .line{stroke:var(--success)}.spark.e .area{fill:var(--success)}
.dash-grid{display:grid;grid-template-columns:1.05fr .95fr .72fr;gap:7px}.decision{padding:5px 8px}.decision-row{min-height:46px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:26px 1fr auto;gap:7px;align-items:center;padding:5px 0}.decision-row:last-child{border-bottom:0}.decision-ico{width:26px;height:26px;border-radius:8px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.decision-ico svg{width:13px;height:13px}.decision-row b{display:block;font-size:6.8px}.decision-row small{display:block;font-size:5.5px;color:var(--muted);margin-top:2px}.state{height:18px;padding:0 5px;border-radius:5px;display:inline-flex;align-items:center;font-size:5.3px;font-weight:750}.state.pending{background:var(--warningSoft);color:var(--warning)}.state.review{background:var(--accentSoft);color:var(--accent)}.state.ok{background:var(--successSoft);color:var(--success)}
.chart{height:195px;position:relative;padding:8px 8px 20px}.chart .gridline{position:absolute;left:8px;right:8px;height:1px;background:var(--line)}.chart .gridline:nth-child(1){top:18%}.chart .gridline:nth-child(2){top:38%}.chart .gridline:nth-child(3){top:58%}.chart .gridline:nth-child(4){top:78%}.chart svg{position:absolute;left:8px;right:8px;top:8px;bottom:22px;width:calc(100% - 16px);height:calc(100% - 30px)}.chart .line{fill:none;stroke:var(--primary);stroke-width:2.3}.chart .area{fill:url(#chartGrad);opacity:.8}.xlabs{position:absolute;left:9px;right:9px;bottom:4px;display:flex;justify-content:space-between;font-size:5.5px;color:var(--muted)}
.quick-grid{padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.quick{min-height:55px;border:1px solid var(--line);border-radius:9px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text);font-size:6px;font-weight:700}.quick:hover{background:var(--primarySoft)}.qico{width:25px;height:25px;border-radius:8px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.qico svg{width:13px;height:13px}

/* ===== MATERIAL FIELD SYSTEM ===== */
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 8px}
.aj-field,.aj-select,.aj-search-select,.aj-multi{position:relative;min-width:0}
.aj-box{
  height:var(--field);border:1px solid var(--line2);border-radius:8px;background:var(--surface);
  display:flex;align-items:center;position:relative;transition:.13s ease
}
.aj-field:hover .aj-box,.aj-select:hover .aj-box,.aj-search-select:hover .aj-box,.aj-multi:hover .aj-box{border-color:#9fb8bd}
.aj-field:focus-within .aj-box,.aj-select.open .aj-box,.aj-search-select.open .aj-box,.aj-multi.open .aj-box{
  border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary),0 0 0 3px color-mix(in srgb,var(--primary) 7%,transparent)
}
.aj-input,.aj-textarea{
  width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;color:var(--text);
  padding:7px 9px 0;font-size:7.3px
}
.aj-label{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:6.8px;color:var(--muted);
  pointer-events:none;transition:.12s ease;background:transparent;padding:0;z-index:4
}
.aj-field.floating .aj-label,.aj-field:focus-within .aj-label,.aj-select.floating .aj-label,.aj-select.open .aj-label,.aj-search-select.floating .aj-label,.aj-search-select.open .aj-label,.aj-multi.floating .aj-label,.aj-multi.open .aj-label{
  top:0;left:8px;transform:translateY(-50%);background:var(--surface);padding:0 4px;color:var(--primary);font-size:5.6px
}
.aj-field:not(.floating):not(:focus-within) .aj-input{padding-top:0}
.aj-display{flex:1;min-width:0;padding:7px 9px 0;font-size:7.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aj-select:not(.floating):not(.open) .aj-display,.aj-search-select:not(.floating):not(.open) .aj-display{padding-top:0}
.aj-trailing{width:30px;height:100%;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}.aj-trailing svg{width:13px;height:13px}
.aj-leading{width:30px;height:100%;display:grid;place-items:center;color:var(--muted);flex:0 0 30px}.aj-leading svg{width:13px;height:13px}
.aj-prefix,.aj-suffix{font-size:6.4px;color:var(--muted);padding:0 4px}
.aj-textarea-wrap .aj-box{height:72px;align-items:flex-start}.aj-textarea{resize:none;padding-top:13px}
.aj-filled .aj-box{background:var(--surface2);border-color:transparent;border-bottom-color:var(--line2);border-radius:8px 8px 3px 3px}.aj-filled:focus-within .aj-box{border-bottom-color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
.aj-error .aj-box{border-color:var(--danger)}.aj-error .aj-label{color:var(--danger)}.helper{font-size:5.4px;color:var(--muted);margin:3px 2px 0}.aj-error .helper{color:var(--danger)}
.aj-disabled{opacity:.55;pointer-events:none}.aj-readonly .aj-box{background:var(--surface2)}
.aj-check{display:flex;align-items:center;gap:6px;font-size:6.5px}.aj-check input{accent-color:var(--primary)}
.aj-radio{display:flex;align-items:center;gap:6px;font-size:6.5px}.aj-radio input{accent-color:var(--primary)}
.switchline{height:var(--field);display:flex;align-items:center;gap:7px}.switch{width:36px;height:20px;border:0;border-radius:14px;background:#c6d2d4;padding:2px}.switch i{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.17);transition:.15s}.switch.on{background:var(--primary)}.switch.on i{transform:translateX(16px)}.switchline span{font-size:6.5px}

/* normal select */
.select-menu,.search-menu,.multi-menu{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:210;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);overflow:hidden
}
.aj-select.open .select-menu,.aj-search-select.open .search-menu,.aj-multi.open .multi-menu{display:block;animation:pop .12s ease}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
.menu-head{padding:8px 9px 6px;background:linear-gradient(180deg,var(--surface),var(--surface2));border-bottom:1px solid var(--line)}.menu-head b{display:block;font-size:7px}.menu-head small{display:block;font-size:5.6px;color:var(--muted);margin-top:2px}
.menu-list{max-height:188px;overflow:auto;padding:5px}
.menu-option{min-height:33px;border-radius:8px;display:flex;align-items:center;gap:7px;padding:5px 7px;cursor:pointer}.menu-option:hover,.menu-option.selected{background:linear-gradient(90deg,var(--primarySoft),color-mix(in srgb,var(--accentSoft) 46%,var(--surface)))}.menu-option .oi{width:25px;height:25px;border-radius:7px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center;flex:0 0 25px}.menu-option .oi svg{width:12px;height:12px}.menu-option b{display:block;font-size:6.6px}.menu-option small{display:block;font-size:5.5px;color:var(--muted);margin-top:1px}.menu-option .checkmark{margin-left:auto;color:var(--primary)}
.search-box{height:31px;margin:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);display:flex;align-items:center;gap:6px;padding:0 7px}.search-box svg{width:13px;height:13px;color:var(--muted)}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:6.9px}
.no-results{padding:12px;text-align:center;font-size:6px;color:var(--muted)}

/* multi select */
.aj-multi .aj-box{height:auto;min-height:var(--field);padding:5px 31px 5px 7px;flex-wrap:wrap;align-content:center;gap:4px}
.multi-chips{display:flex;gap:4px;flex-wrap:wrap;min-width:0}
.multi-placeholder{font-size:7px;color:var(--muted)}
.tag{height:21px;border-radius:7px;background:var(--primarySoft);color:var(--primary);display:inline-flex;align-items:center;gap:4px;padding:0 6px;font-size:5.7px}.tag button{border:0;background:transparent;color:inherit;padding:0}
.multi-count{height:21px;border-radius:7px;background:var(--accentSoft);color:var(--accent);display:inline-flex;align-items:center;padding:0 6px;font-size:5.7px}
.multi-option{min-height:32px;border-radius:8px;display:flex;align-items:center;gap:7px;padding:4px 7px;font-size:6.3px;cursor:pointer}.multi-option:hover{background:var(--primarySoft)}.multi-option input{accent-color:var(--primary)}
.multi-actions{height:34px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:0 6px}

/* controls studio */
.control-toolbar{display:flex;gap:5px;align-items:center;overflow:auto;margin-bottom:8px}.control-toolbar .btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.control-section{margin-bottom:8px}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.control-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadowSm);overflow:visible;min-width:0}.control-card .panel-head{border-radius:11px 11px 0 0}.control-body{padding:9px}
.demo-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.demo-col{display:flex;flex-direction:column;gap:7px}.chip{height:22px;border-radius:7px;background:var(--primarySoft);color:var(--primary);display:inline-flex;align-items:center;padding:0 7px;font-size:5.8px;font-weight:750}.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f1c68f,#b46e45);font-size:7px;font-weight:800}.badge2{height:20px;min-width:20px;border-radius:7px;background:var(--dangerSoft);color:var(--danger);display:inline-grid;place-items:center;font-size:5.8px}.slider{width:150px;accent-color:var(--primary)}
.progress{height:6px;border-radius:5px;background:var(--surface3);overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent))}
.circle-progress{width:35px;height:35px;border-radius:50%;background:conic-gradient(var(--primary) 72%,var(--surface3) 0);display:grid;place-items:center}.circle-progress:after{content:"72%";width:27px;height:27px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:5.4px}
.skeleton{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--surface3),color-mix(in srgb,var(--surface3) 55%,var(--surface)),var(--surface3));background-size:200% 100%;animation:shimmer 1.3s infinite}@keyframes shimmer{to{background-position:-200% 0}}
.message{border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));background:var(--primarySoft);color:var(--primary);padding:8px;border-radius:8px;font-size:6px}
.accordion{border:1px solid var(--line);border-radius:8px;overflow:hidden}.accordion-head{width:100%;height:32px;border:0;background:var(--surface2);display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:6.4px}.accordion-body{display:none;padding:8px;font-size:5.8px;color:var(--muted)}.accordion.open .accordion-body{display:block}
.tabs-demo{display:flex;border-bottom:1px solid var(--line)}.tabs-demo button{height:29px;border:0;background:transparent;font-size:5.9px;color:var(--muted);padding:0 8px;position:relative}.tabs-demo button.active{color:var(--primary)}.tabs-demo button.active:after{content:"";position:absolute;left:5px;right:5px;bottom:-1px;height:2px;background:var(--primary)}
.toolbar{height:32px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:3px;padding:0 4px}.toolbar button{width:27px;height:25px;border:0;border-radius:6px;background:transparent;color:var(--muted)}.toolbar button:hover{background:var(--primarySoft);color:var(--primary)}
.tree{font-size:6.2px}.tree ul{list-style:none;margin:4px 0 0;padding-left:15px}.tree button{border:0;background:transparent;color:var(--text);padding:2px 0;font-size:6.2px}.tree .closed{display:none}
.wizard{display:flex;gap:4px;flex-wrap:wrap}.wiz-step{height:26px;min-width:52px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:grid;place-items:center;font-size:5.7px}.wiz-step.active{background:var(--primary);border-color:var(--primary);color:#fff}
.sort-list{display:flex;flex-direction:column;gap:5px}.sort-item{height:29px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);display:flex;align-items:center;gap:7px;padding:0 8px;font-size:5.9px;cursor:grab}.sort-item.dragging{opacity:.45}
.upload-zone{height:74px;border:1px dashed var(--line2);border-radius:9px;background:var(--surface2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:5.8px;color:var(--muted)}.upload-zone.drag{border-color:var(--primary);background:var(--primarySoft);color:var(--primary)}
.pagination{display:flex;gap:4px}.page-btn{width:27px;height:27px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:5.8px}.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.splitter{display:grid;grid-template-columns:1fr 6px 1fr;height:90px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.pane{padding:7px;font-size:5.8px;background:var(--surface2)}.splitter-bar{background:var(--line);cursor:col-resize}
.multisplit{display:grid;grid-template-columns:1fr 5px 1fr 5px 1fr;height:80px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.context-demo{position:relative}.context-menu{display:none;position:absolute;left:20px;top:20px;width:130px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:4px;z-index:230}.context-menu.show{display:block}.context-menu button{width:100%;height:28px;border:0;border-radius:6px;background:transparent;text-align:left;font-size:5.8px}.context-menu button:hover{background:var(--primarySoft)}
.tooltip-target{position:relative}.tooltip-target:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#19252b;color:#fff;padding:4px 6px;border-radius:5px;font-size:5.4px;white-space:nowrap;z-index:240}
.color-input{width:36px;height:30px;border:0;background:transparent;padding:0}
.query-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.dual{display:grid;grid-template-columns:1fr 34px 1fr;gap:5px}.dual-box{height:100px;border:1px solid var(--line);border-radius:8px;overflow:auto;padding:4px}.dual-item{height:27px;border-radius:6px;padding:0 6px;display:flex;align-items:center;font-size:5.8px}.dual-item.selected{background:var(--primarySoft);color:var(--primary)}.dual-actions{display:flex;flex-direction:column;gap:5px;justify-content:center}.dual-actions button{height:27px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.signature{width:100%;height:80px;border:1px solid var(--line);border-radius:8px;background:#fff;touch-action:none}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.kan-col{background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:5px}.kan-col b{font-size:5.8px}.kan-card{margin-top:5px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px;font-size:5.6px}
.timeline{position:relative;padding-left:14px}.timeline:before{content:"";position:absolute;left:5px;top:3px;bottom:3px;width:1px;background:var(--line)}.timeline-item{position:relative;margin:0 0 7px;font-size:5.7px}.timeline-item:before{content:"";position:absolute;left:-12px;top:2px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.gantt{height:82px;position:relative;background:repeating-linear-gradient(90deg,var(--surface2) 0 40px,var(--line) 41px);border:1px solid var(--line);border-radius:8px;padding:8px}.gantt-bar{height:14px;border-radius:5px;background:var(--primary);margin-bottom:7px}.gantt-bar.b2{margin-left:25%;width:55%;background:var(--accent)}
.scheduler{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}.day{min-height:58px;border-right:1px solid var(--line);padding:4px;font-size:5.4px}.day:last-child{border-right:0}.event{margin-top:5px;border-radius:5px;background:var(--primarySoft);color:var(--primary);padding:3px}
.qr{width:64px;height:64px;background:repeating-conic-gradient(#18242d 0 25%,#fff 0 50%) 50%/16px 16px;border:5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.pull-box{height:62px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:5.8px;color:var(--muted);touch-action:none}
.splash-preview{height:74px;border-radius:8px;background:linear-gradient(145deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff;font-size:7px;font-weight:800}

/* inventory */
.grid-tools{height:41px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 8px}.grid-search{height:29px;width:230px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);display:flex;align-items:center;padding:0 8px}.grid-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:6.8px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:6.6px}.table th{height:30px;padding:0 8px;text-align:left;background:var(--surface2);color:var(--muted);font-size:5.8px;border-bottom:1px solid var(--line);white-space:nowrap}.table th.sortable{cursor:pointer}.table td{height:34px;padding:0 8px;border-bottom:1px solid var(--line);white-space:nowrap}.table tbody tr:hover{background:var(--primarySoft)}.table tbody tr.selected{background:linear-gradient(90deg,var(--primarySoft),color-mix(in srgb,var(--accentSoft) 45%,var(--surface)))}.hidecol{display:none!important}

/* popovers / profile / overlay */
.pop{display:none;position:fixed;z-index:250;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);overflow:hidden}.pop.show{display:block;animation:pop .12s ease}.pop-head{padding:8px 9px 6px;background:linear-gradient(180deg,var(--surface),var(--surface2));display:flex;align-items:center;justify-content:space-between}.pop-head b{display:block;font-size:7.3px}.pop-head small{display:block;font-size:5.6px;color:var(--muted);margin-top:2px}.pop-search{height:32px;margin:0 6px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);display:flex;align-items:center;padding:0 7px}.pop-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:6.9px}.results{max-height:300px;overflow:auto;padding:0 5px 6px}.result{height:34px;border-radius:8px;display:flex;align-items:center;gap:7px;padding:0 7px;cursor:pointer}.result:hover{background:var(--primarySoft)}.ri{width:25px;height:25px;border-radius:7px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.ri svg{width:12px;height:12px}.result b{font-size:6.5px}.result small{display:block;font-size:5.4px;color:var(--muted)}
.launch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:7px}.app-card{min-height:61px;border:1px solid var(--line);border-radius:9px;background:var(--surface);display:grid;grid-template-columns:28px 1fr;align-items:center;gap:7px;padding:6px;text-align:left}.app-card:hover{background:var(--primarySoft)}.ai{width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,var(--primarySoft),var(--accentSoft));color:var(--primary);display:grid;place-items:center}.ai svg{width:14px;height:14px}.app-card b{font-size:6.5px}.app-card small{display:block;font-size:5.4px;color:var(--muted)}
.profile-pop{width:242px}.profile-head{padding:9px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2))}.profile-head .user-avatar{width:34px;height:34px}.profile-head b{display:block;font-size:7.7px}.profile-head small{display:block;font-size:5.6px;color:var(--muted)}.profile-list{padding:5px}.profile-item{width:100%;height:34px;border:0;border-radius:8px;background:transparent;text-align:left;color:var(--text);padding:0 8px;font-size:6.5px}.profile-item:hover{background:var(--surface2)}
.overlay{display:none;position:fixed;inset:0;background:rgba(17,31,35,.28);backdrop-filter:blur(1px);z-index:280}.overlay.show{display:block}.dialog{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 20px));background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);z-index:290}.dialog.show{display:block}.dialog-head{height:40px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 10px}.dialog-head b{font-size:7.5px}.dialog-body{padding:10px}.dialog-foot{height:42px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 10px}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(350px,88vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:-16px 0 44px rgba(24,58,64,.16);z-index:295;transform:translateX(102%);transition:.18s}.drawer.show{transform:none}.drawer-head{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 10px}.drawer-head b{font-size:7.5px}.drawer-body{padding:10px}
.toast-stack{position:fixed;right:12px;top:58px;z-index:350;display:flex;flex-direction:column;gap:6px}.toast{width:270px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:10px;box-shadow:var(--shadow);padding:8px;display:flex;gap:7px}.toast .ti{width:23px;height:23px;border-radius:7px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.toast .ti svg{width:12px;height:12px}.toast b{display:block;font-size:6.8px}.toast small{display:block;font-size:5.6px;color:var(--muted);margin-top:2px}

/* responsive */
.mobile-backdrop{display:none}
@media(max-width:1350px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dash-grid{grid-template-columns:1fr 1fr}.dash-grid>.panel:nth-child(3){grid-column:span 2}
  .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1050px){
  .contexts{display:none}.product{display:none}.global-search{flex:1;min-width:0}
}
@media(max-width:780px){
  :root{--nav-w:0px}
  body.nav-open{--nav-w:0px}
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:min(290px,88vw);z-index:320;transform:translateX(-102%);
    box-shadow:18px 0 44px rgba(24,58,64,.18);transition:transform .14s ease
  }
  body.mobile-nav .sidebar{transform:none}
  .sidebar-head{justify-content:flex-start!important;padding:0 9px!important}.brand,.brand-copy{display:block!important;opacity:1!important;transform:none!important}.nav-toggle{margin-left:auto}
  .sidebar-search-wrap{max-height:48px!important;opacity:1!important;transform:none!important;padding:7px 8px 0!important}
  .nav-section{height:auto!important;opacity:1!important;padding:10px 8px 4px!important}
  .nav-label,.nav-arr,.user-copy,.user-chevron{display:block!important;opacity:1!important;transform:none!important}
  .nav-link{justify-content:flex-start!important;padding:0 7px!important}.user-btn{justify-content:flex-start!important;padding:0 7px!important}
  .topbar,.work{grid-column:1}.mobile-menu{display:grid}.work{padding:8px}
  .mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(16,32,36,.28);z-index:310;opacity:0;pointer-events:none;transition:.15s}
  body.mobile-nav .mobile-backdrop{opacity:1;pointer-events:auto}
  .page-head{display:block}.commands{margin-top:8px;overflow:auto}
  .kpis,.dash-grid,.form-grid,.control-grid{grid-template-columns:1fr}.dash-grid>.panel:nth-child(3){grid-column:auto}
}
@media(max-width:620px){
  .global-search span,.global-search kbd{display:none}.top-profile b,.top-profile small{display:none}
  .launch-grid{grid-template-columns:1fr}
  .table-wrap{overflow:visible}.table,.table tbody{display:block;width:100%}.table thead{display:none}.table tr{display:block;margin:7px;border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden}.table td{display:flex;align-items:center;justify-content:space-between;gap:8px;height:auto;min-height:29px;padding:5px 8px;border-bottom:1px solid var(--line);white-space:normal;text-align:right}.table td:last-child{border-bottom:0}.table td:before{content:attr(data-label);font-size:5.6px;color:var(--muted);font-weight:700;text-align:left;flex:0 0 38%}
  .pop{left:8px!important;right:8px!important;top:55px!important;width:auto!important}
  .query-row{grid-template-columns:1fr}.kanban{grid-template-columns:1fr}
}

.query-row select,.query-row input{
  height:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--text);outline:0;padding:0 7px;font-size:5.9px
}
.query-row select:focus,.query-row input:focus{
  border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 7%,transparent)
}


/* ==========================================================
   V20 REFINEMENT LAYER
   ========================================================== */

/* live shell settings */
body[data-menu-width="narrow"]{--nav-expanded:232px}
body[data-menu-width="standard"]{--nav-expanded:252px}
body[data-menu-width="wide"]{--nav-expanded:282px}

body[data-radius="5"]{--r:5px;--rl:5px;--control-radius:4px}
body[data-radius="8"]{--r:8px;--rl:8px;--control-radius:4px}
body[data-radius="12"]{--r:12px;--rl:12px;--control-radius:4px}

/* Control size system. Medium is intentionally the default. */
body[data-control-size="small"]{
  --control-h:32px;--control-font:11px;--control-label:10px;--control-floating:9px;
  --menu-font:11px;--menu-sub:9.5px;--menu-row:31px;--chip-h:19px;
}
body[data-control-size="medium"]{
  --control-h:36px;--control-font:12px;--control-label:11px;--control-floating:9.5px;
  --menu-font:11.5px;--menu-sub:10px;--menu-row:34px;--chip-h:21px;
}
body[data-control-size="large"]{
  --control-h:42px;--control-font:13px;--control-label:12px;--control-floating:10px;
  --menu-font:12.5px;--menu-sub:10.5px;--menu-row:38px;--chip-h:24px;
}

/* Do not allow a form panel to clip its dropdowns. */
.panel.dropdown-host{overflow:visible}
.panel.dropdown-host>.panel-head{border-radius:var(--rl) var(--rl) 0 0}
.panel.dropdown-host .select-menu,
.panel.dropdown-host .search-menu,
.panel.dropdown-host .multi-menu{z-index:500}

/* Material controls now use a real proportional type scale. */
.aj-box{height:var(--control-h);min-height:var(--control-h);border-radius:var(--control-radius,var(--r))}
.aj-input,.aj-textarea,.aj-display{font-size:var(--control-font)}
.aj-label{font-size:var(--control-label)}
.aj-field.floating .aj-label,.aj-field:focus-within .aj-label,
.aj-select.floating .aj-label,.aj-select.open .aj-label,
.aj-search-select.floating .aj-label,.aj-search-select.open .aj-label,
.aj-multi.floating .aj-label,.aj-multi.open .aj-label{
  font-size:var(--control-floating)
}
.aj-leading,.aj-trailing{width:32px;flex:0 0 32px}
.aj-leading svg,.aj-trailing svg{width:15px;height:15px}
.aj-prefix,.aj-suffix{font-size:calc(var(--control-font) - 1px)}
.helper{font-size:10px}
.aj-textarea-wrap .aj-box{height:calc(var(--control-h) * 1.9)}
.switchline{height:var(--control-h)}
.switchline span,.aj-check,.aj-radio{font-size:var(--control-font)}

/* Unified dropdown icon. */
.aj-trailing{border-radius:0 var(--control-radius,var(--r)) var(--control-radius,var(--r)) 0}
.aj-chevron{transition:transform .15s ease;stroke-linecap:round;stroke-linejoin:round}
.aj-select.open .aj-chevron,.aj-search-select.open .aj-chevron,.aj-multi.open .aj-chevron{transform:rotate(180deg)}
.aj-trailing:hover{color:var(--primary);background:color-mix(in srgb,var(--primarySoft) 60%,transparent)}

/* Dropdown surfaces and typography. */
.select-menu,.search-menu,.multi-menu{
  border-radius:calc(var(--control-radius,var(--r)) + 3px);
  max-height:min(330px,calc(100vh - 72px));
  overflow:hidden;
}
.aj-select.drop-up .select-menu,.aj-search-select.drop-up .search-menu,.aj-multi.drop-up .multi-menu{
  top:auto;bottom:calc(100% + 6px)
}
.menu-head{padding:9px 10px 7px}
.menu-head b{font-size:12px}
.menu-head small{font-size:10px}
.search-box{height:34px;margin:7px}
.search-box input{font-size:11.5px}
.search-box svg{width:15px;height:15px}
.menu-list{max-height:220px;padding:5px}
.menu-option{min-height:var(--menu-row);padding:5px 8px}
.menu-option b,.multi-option{font-size:var(--menu-font)}
.menu-option small{font-size:var(--menu-sub)}
.menu-option .oi{width:27px;height:27px;flex-basis:27px}
.multi-option{min-height:var(--menu-row);padding:5px 8px}
.multi-actions{height:40px;padding:0 7px}

/* Multi-select chips scale with control size. */
.aj-multi .aj-box{min-height:var(--control-h);padding:5px 34px 5px 7px}
.tag,.multi-count{height:var(--chip-h);font-size:10.5px;padding:0 7px}
.multi-placeholder{font-size:var(--control-font)}

/* Current screenshot issue: dropdowns must be allowed outside the transaction card. */
#page-transaction .dropdown-host{position:relative;z-index:4}
#page-transaction .dropdown-host:has(.open){z-index:40}

/* Menu top-area hover target and stable animation. */
.sidebar-head,.nav-toggle{pointer-events:auto}
body[data-menu-mode="compact"]:not(.nav-open){--nav-w:var(--nav-collapsed)}
body[data-menu-mode="pinned"]{--nav-w:var(--nav-expanded)}
body[data-menu-mode="pinned"] .brand-copy,
body[data-menu-mode="pinned"] .nav-label,
body[data-menu-mode="pinned"] .nav-arr,
body[data-menu-mode="pinned"] .user-copy,
body[data-menu-mode="pinned"] .user-chevron{opacity:1;transform:none;pointer-events:auto}
body[data-menu-mode="pinned"] .sidebar-search-wrap{max-height:48px;opacity:1;transform:none;padding-top:7px}
body[data-menu-mode="pinned"] .nav-section{height:auto;opacity:1;padding-top:10px;padding-bottom:4px}

/* Density setting. */
body[data-density="compact"] .work{padding:10px}
body[data-density="compact"] .control-grid{gap:8px}
body[data-density="comfortable"] .work{padding:15px}
body[data-density="comfortable"] .control-grid{gap:12px}
body[data-density="comfortable"] .page-head{margin-bottom:13px}
body[data-density="comfortable"] .form-grid{gap:15px 11px}

/* Settings layout */
.settings-grid-v20{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.settings-preview-card{grid-column:span 2}
.settings-preview-grid{grid-template-columns:1fr 1fr}
.setting-segment{
  display:flex;gap:4px;padding:3px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface2);width:max-content;max-width:100%;flex-wrap:wrap
}
.setting-segment button{
  min-height:28px;border:0;border-radius:7px;background:transparent;color:var(--muted);
  padding:0 9px;font-size:11px;font-weight:650
}
.setting-segment button:hover{background:var(--surface);color:var(--text)}
.setting-segment button.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 5px rgba(24,58,64,.08)}
.setting-note{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.45}
.runtime-box{font-size:10.5px;color:var(--muted);line-height:1.55}

/* Scale the Control Studio card examples to the selected size. */
.control-body .btn{font-size:11px}
.control-body .chip{font-size:10px}
.control-body .state{font-size:9px}

/* Radius follows the setting across key surfaces. */
.aj-box,.btn,.search-box,.menu-option,.multi-option,.setting-segment,.setting-segment button{border-radius:var(--control-radius,var(--r))}
.control-card,.panel{border-radius:var(--rl)}

/* No visual clipping on control cards containing an open dropdown. */
.control-card{overflow:visible}
.control-card>.panel-head{border-radius:var(--rl) var(--rl) 0 0}
.control-card:has(.open){position:relative;z-index:50}

/* Header remains exact 48px. */
.topbar{height:48px;min-height:48px}

/* Mobile keeps usable sizes. */
@media(max-width:1050px){
  .settings-grid-v20{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  .settings-grid-v20{grid-template-columns:1fr}
  .settings-preview-card{grid-column:auto}
  .settings-preview-grid{grid-template-columns:1fr}
}


/* ==========================================================
   V21 APP-STYLE REFINEMENT
   ========================================================== */

:root{
  --headerCard:#ffffff;
  --headerSoft:#f6fafb;
}

/* cleaner, more app-like header */
.topbar{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(18,30,34,.04);
  padding:0 16px;
  gap:10px;
}
.product{
  min-width:170px;
  display:flex;
  align-items:center;
  gap:10px;
}
.product::before{
  content:"A";
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 22%,transparent);
}
.product b{font-size:14px;line-height:1.1;letter-spacing:-.02em}
.product small{font-size:10px;line-height:1.1;margin-top:2px}
.global-search{
  height:40px;border-radius:14px;padding:0 13px;gap:10px;
  border-color:#d9e4e8;background:#fff;
}
.global-search svg{width:17px;height:17px}
.global-search span{font-size:12.5px}
.global-search kbd{
  font-size:10px;padding:3px 7px;border-radius:8px;
  background:var(--surface2);color:var(--muted)
}
.contexts{gap:5px}
.context{
  height:40px;border-radius:14px;padding:0 11px;gap:8px;
}
.context .ico{width:24px;height:24px;border-radius:8px}
.context .ico svg{width:15px;height:15px}
.context b{font-size:11.5px;line-height:1.1}
.context small{font-size:9px;line-height:1.1;margin-top:2px}
.icon-btn{
  width:36px;height:36px;border-radius:12px;
  border-color:transparent;background:transparent;
}
.icon-btn svg{width:17px;height:17px}
.top-profile{
  height:38px;border-radius:14px;padding:0 10px 0 5px;gap:8px;
  border-color:#dde7eb;box-shadow:0 1px 0 rgba(15,23,29,.02);
}
.top-profile:hover{background:var(--primarySoft);border-color:#d3e0e6}
.top-profile .user-avatar{width:28px;height:28px;font-size:10px}
.top-profile-copy{display:flex;flex-direction:column;align-items:flex-start}
.top-profile b{font-size:11.8px;line-height:1.05}
.top-profile small{font-size:9.5px;line-height:1.05;color:var(--muted);margin-top:2px}
.top-profile-arrow{width:15px;height:15px;color:var(--muted);margin-left:2px}

/* side user button refined */
.user-btn{
  height:56px;border-radius:16px;padding:0 10px;gap:10px;
  background:linear-gradient(180deg,#ffffff,#f8fbfc);
}
.user-btn .user-avatar{width:34px;height:34px;font-size:12px}
.user-copy b{font-size:12px;line-height:1.08}
.user-copy small{font-size:9.5px;line-height:1.08;margin-top:2px}
.user-chevron{font-size:15px}
body:not(.nav-open) .user-btn{
  width:40px;height:40px;min-height:40px;border-radius:12px;padding:0;
}
body:not(.nav-open) .user-btn .user-avatar{width:28px;height:28px;font-size:10px}

/* better control alignment */
body[data-control-size="small"]{
  --control-h:34px;--control-font:12px;--control-label:10.5px;--control-floating:10px;
  --control-pad-top:12px;--control-pad-x:12px;--label-inline-top:50%;
}
body[data-control-size="medium"]{
  --control-h:40px;--control-font:13px;--control-label:11px;--control-floating:10px;
  --control-pad-top:14px;--control-pad-x:12px;--label-inline-top:50%;
}
body[data-control-size="large"]{
  --control-h:46px;--control-font:14px;--control-label:12px;--control-floating:10.5px;
  --control-pad-top:16px;--control-pad-x:13px;--label-inline-top:50%;
}

.aj-box{
  min-height:var(--control-h);
  align-items:stretch;
  border-color:#d4e1e6;
}
.aj-input,.aj-textarea{
  font-size:var(--control-font);
  line-height:1.2;
  padding:var(--control-pad-top) var(--control-pad-x) 0;
}
.aj-display{
  display:flex;align-items:center;
  min-height:var(--control-h);
  padding:var(--control-pad-top) var(--control-pad-x) 0;
  font-size:var(--control-font);
  line-height:1.2;
}
.aj-field:not(.floating):not(:focus-within) .aj-input,
.aj-select:not(.floating):not(.open) .aj-display,
.aj-search-select:not(.floating):not(.open) .aj-display{
  padding-top:0;
  display:flex;
  align-items:center;
}
.aj-label{
  left:var(--control-pad-x);
  top:var(--label-inline-top);
  font-size:var(--control-label);
  font-weight:500;
  letter-spacing:0;
  line-height:1;
}
.aj-field.floating .aj-label,.aj-field:focus-within .aj-label,
.aj-select.floating .aj-label,.aj-select.open .aj-label,
.aj-search-select.floating .aj-label,.aj-search-select.open .aj-label,
.aj-multi.floating .aj-label,.aj-multi.open .aj-label{
  left:10px;
  top:1px;
  font-size:var(--control-floating);
  padding:0 5px;
}
.aj-leading,.aj-trailing{
  width:36px;flex:0 0 36px;
}
.aj-leading svg,.aj-trailing svg{width:16px;height:16px}
.aj-prefix,.aj-suffix{font-size:11px}
.helper{font-size:10px}
.tag,.multi-count{font-size:11px}
.multi-placeholder{font-size:var(--control-font)}
.search-box{
  height:38px;margin:8px;
}
.search-box input{font-size:12px}
.menu-head b{font-size:12px}
.menu-head small{font-size:10px}
.menu-option b,.multi-option{font-size:12px;line-height:1.25}
.menu-option small{font-size:10px}
.multi-actions{height:42px}
.switchline span,.aj-check,.aj-radio{font-size:12px}

/* page buttons and panel headings more readable */
.page-head h1{font-size:18px}
.page-head p{font-size:12px}
.crumb{font-size:10px}
.btn{font-size:12px;height:34px;padding:0 12px;border-radius:10px}
.panel-head{height:44px;padding:0 12px}
.panel-head b{font-size:12px}
.panel-head small{font-size:10px}

/* app-style account sheet */
.profile-pop-v21{
  width:274px;
  overflow:visible;
  border-radius:22px;
}
.account-sheet{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 16px 40px rgba(20,34,38,.16);
  overflow:hidden;
}
.account-top{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px 12px;
}
.account-user{
  min-width:0;flex:1;
  display:flex;align-items:center;gap:10px;
}
.account-avatar{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:800;
  background:linear-gradient(145deg,#96a39f,#747f7c);
}
.account-copy{min-width:0;display:flex;flex-direction:column}
.account-copy b{
  font-size:12px;line-height:1.08;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.account-copy small{
  font-size:9.5px;line-height:1.08;color:var(--muted);margin-top:3px
}
.account-go{
  width:28px;height:28px;border:0;border-radius:10px;background:transparent;color:var(--muted);
  display:grid;place-items:center
}
.account-go:hover{background:var(--surface2);color:var(--text)}
.account-go svg{width:15px;height:15px}
.account-divider{height:1px;background:var(--line);margin:0 14px}
.account-group{padding:10px 8px}
.account-item{
  width:100%;height:42px;border:0;border-radius:12px;background:transparent;
  display:flex;align-items:center;gap:12px;text-align:left;color:var(--text);
  padding:0 12px;font-size:12px;font-weight:500;
}
.account-item:hover{background:var(--surface2)}
.account-item .ai{
  width:26px;height:26px;border-radius:10px;
  display:grid;place-items:center;color:var(--text)
}
.account-item .ai svg{width:19px;height:19px}
.account-item.has-arrow .tail-arrow{
  width:15px;height:15px;color:var(--muted);margin-left:auto
}

/* make popover feel like app card */
.pop.profile-pop-v21{
  padding:0;border:0;background:transparent;box-shadow:none;
}
@media(max-width:620px){
  .profile-pop-v21{width:min(300px,calc(100vw - 20px))}
}

/* header on small devices */
@media(max-width:1050px){
  .topbar{padding:0 10px}
}
@media(max-width:620px){
  .product{min-width:auto}
  .product::before{width:24px;height:24px;border-radius:8px;font-size:11px}
  .top-profile{padding:0 6px}
  .top-profile-arrow,.top-profile small,.top-profile b{display:none}
}


/* ==========================================================
   V22 ALIGNMENT + SETTINGS POPUP
   ========================================================== */

/* Better field / select alignment */
.aj-box{
  align-items:stretch;
}
.aj-input,.aj-display,.aj-textarea{
  line-height:1.18;
  letter-spacing:0;
}
body[data-control-size="small"]{
  --ctrl-pad-x:12px;--ctrl-float-top:2px;--ctrl-value-pad-top:14px;--ctrl-value-pad-bottom:4px;
}
body[data-control-size="medium"]{
  --ctrl-pad-x:13px;--ctrl-float-top:2px;--ctrl-value-pad-top:16px;--ctrl-value-pad-bottom:4px;
}
body[data-control-size="large"]{
  --ctrl-pad-x:14px;--ctrl-float-top:2px;--ctrl-value-pad-top:18px;--ctrl-value-pad-bottom:5px;
}
.aj-label{
  left:var(--ctrl-pad-x);
  top:50%;
  transform:translateY(-50%);
  line-height:1;
}
.aj-field .aj-input,
.aj-select .aj-display,
.aj-search-select .aj-display{
  padding-left:var(--ctrl-pad-x);
  padding-right:var(--ctrl-pad-x);
}
.aj-field:not(.floating):not(:focus-within) .aj-input,
.aj-select:not(.floating):not(.open) .aj-display,
.aj-search-select:not(.floating):not(.open) .aj-display{
  display:flex;
  align-items:center;
  padding-top:0;
  padding-bottom:0;
}
.aj-field.floating .aj-label,.aj-field:focus-within .aj-label,
.aj-select.floating .aj-label,.aj-select.open .aj-label,
.aj-search-select.floating .aj-label,.aj-search-select.open .aj-label,
.aj-multi.floating .aj-label,.aj-multi.open .aj-label{
  top:var(--ctrl-float-top);
  transform:none;
  left:10px;
  padding:0 5px;
  line-height:1;
}
.aj-field.floating .aj-input,.aj-field:focus-within .aj-input,
.aj-select.floating .aj-display,.aj-select.open .aj-display,
.aj-search-select.floating .aj-display,.aj-search-select.open .aj-display{
  padding-top:var(--ctrl-value-pad-top);
  padding-bottom:var(--ctrl-value-pad-bottom);
}
.aj-input::placeholder{color:#9aa7b1}
.aj-prefix,.aj-suffix,.helper{line-height:1}
.aj-leading,.aj-trailing{display:grid;place-items:center}
.aj-leading svg,.aj-trailing svg,.aj-chevron{width:16px;height:16px}
.switchline span{line-height:1.2}

/* Dropdown selected state */
.menu-option{position:relative}
.menu-option .checkmark{
  margin-left:auto;
  display:none;
  color:var(--primary);
  font-weight:800;
  font-size:13px;
  line-height:1;
}
.menu-option.selected .checkmark{
  display:block;
}
.menu-option.selected{
  background:linear-gradient(90deg,var(--primarySoft),color-mix(in srgb,var(--accentSoft) 46%,var(--surface)));
}
.menu-option.selected .oi{
  background:color-mix(in srgb,var(--primarySoft) 40%, #fff);
  color:var(--primary);
}

/* Settings popup */
.settings-modal{
  position:fixed;inset:0;display:none;z-index:420;
  background:rgba(16,24,28,.24);
  backdrop-filter:blur(4px);
  padding:18px;
}
.settings-modal.show{display:flex;align-items:center;justify-content:center}
.settings-shell{
  width:min(980px,calc(100vw - 20px));
  height:min(720px,calc(100vh - 24px));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(16,32,36,.20);
  overflow:hidden;
  display:grid;
  grid-template-columns:260px 1fr;
}
.settings-sidebar{
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  display:flex;flex-direction:column;min-width:0;
}
.settings-close-row{
  padding:16px 16px 6px;
}
.settings-close{
  width:48px;height:48px;border-radius:16px;
  border:2px solid color-mix(in srgb,var(--text) 12%, transparent);
  background:var(--surface);color:var(--text);
  display:grid;place-items:center;
}
.settings-close svg{width:22px;height:22px}
.settings-nav{
  padding:8px 12px 16px;
  overflow:auto;
  display:flex;flex-direction:column;gap:4px
}
.settings-nav button{
  height:44px;border:0;border-radius:14px;
  background:transparent;color:var(--text);
  display:flex;align-items:center;gap:12px;
  text-align:left;padding:0 14px;font-size:14px;font-weight:500;
}
.settings-nav button.active,.settings-nav button:hover{
  background:var(--surface2)
}
.settings-nav .si{width:20px;text-align:center;font-size:18px}
.settings-content{
  padding:22px 22px 26px;
  overflow:auto;
}
.settings-pane{display:none}
.settings-pane.active{display:block}
.settings-pane-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.settings-pane-head h2{
  margin:0;font-size:18px;line-height:1.1
}
.settings-banner{
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  padding:18px;
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:14px;
  align-items:start;
  margin-bottom:18px;
}
.settings-banner-ico{
  width:42px;height:42px;border-radius:14px;
  background:var(--primarySoft);color:var(--primary);
  display:grid;place-items:center;
}
.settings-banner-ico svg{width:22px;height:22px}
.settings-banner-copy b{display:block;font-size:16px;line-height:1.1}
.settings-banner-copy p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.settings-row{
  min-height:68px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:0 2px;
}
.settings-row>span:first-child{
  font-size:15px;font-weight:500;line-height:1.2
}
.setting-value{
  font-size:14px;color:var(--text);white-space:nowrap
}
.setting-inline{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
.mini-opt,.mini-dot{
  height:34px;padding:0 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);
  display:inline-flex;align-items:center;gap:8px;font-size:13px;
}
.mini-opt.active,.mini-dot.active{
  background:var(--primarySoft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 24%, var(--line));
}
.mini-dot i{
  width:10px;height:10px;border-radius:50%;display:inline-block
}
.modal-switch{height:auto}
@media (max-width:860px){
  .settings-shell{grid-template-columns:1fr;height:min(760px,calc(100vh - 20px))}
  .settings-sidebar{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:620px){
  .settings-modal{padding:8px}
  .settings-shell{width:100%;height:100%;border-radius:18px}
  .settings-content{padding:16px}
  .settings-banner{grid-template-columns:1fr}
}


/* ==========================================================
   V23 CONTROL ALIGNMENT
   Keep current control sizes; fix only typography/baseline.
   ========================================================== */

.aj-box{
  align-items:center !important;
}

/* standard value baseline */
.aj-input{
  box-sizing:border-box;
  height:100%;
  min-height:0;
  padding:0 var(--ctrl-pad-x,13px) !important;
  line-height:normal !important;
  display:block;
  font-weight:400;
}
.aj-display{
  box-sizing:border-box;
  height:100%;
  min-height:0;
  padding:0 var(--ctrl-pad-x,13px) !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.2 !important;
  font-weight:400;
}

/* floated field: value moves down a small, consistent amount */
.aj-field.floating .aj-input,
.aj-field:focus-within .aj-input{
  padding-top:7px !important;
}
.aj-select.floating .aj-display,
.aj-select.open .aj-display,
.aj-search-select.floating .aj-display,
.aj-search-select.open .aj-display{
  padding-top:7px !important;
}

/* label centered exactly over the outline border */
.aj-label{
  top:50% !important;
  left:var(--ctrl-pad-x,13px) !important;
  transform:translateY(-50%) !important;
  padding:0 !important;
  line-height:1 !important;
  white-space:nowrap;
  font-weight:500;
  background:transparent !important;
}
.aj-field.floating .aj-label,
.aj-field:focus-within .aj-label,
.aj-select.floating .aj-label,
.aj-select.open .aj-label,
.aj-search-select.floating .aj-label,
.aj-search-select.open .aj-label,
.aj-multi.floating .aj-label,
.aj-multi.open .aj-label{
  top:0 !important;
  left:10px !important;
  transform:translateY(-50%) !important;
  padding:0 5px !important;
  background:var(--surface) !important;
  line-height:1 !important;
}

/* leading/trailing icons share the value row */
.aj-leading,.aj-trailing{
  height:100% !important;
  align-self:stretch;
  display:grid !important;
  place-items:center !important;
}
.aj-prefix,.aj-suffix{
  align-self:center;
  line-height:1 !important;
}

/* Multi-select follows the same label/value rhythm */
.aj-multi .aj-box{
  min-height:var(--control-h);
  height:auto;
  align-items:center !important;
  padding:5px 36px 5px 10px !important;
}
.aj-multi.floating .aj-box,
.aj-multi.open .aj-box{
  padding-top:8px !important;
}
.multi-chips{
  min-height:24px;
  display:flex;
  align-items:center;
  align-content:center;
  gap:5px;
  flex-wrap:wrap;
}
.tag,.multi-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
}
.switchline{
  align-items:center !important;
}
.switchline span{
  display:flex;
  align-items:center;
  line-height:1.15 !important;
}

/* dropdown selected item */
.menu-option{
  align-items:center !important;
}
.menu-option > span:nth-child(2){
  min-width:0;
  flex:1;
}
.menu-option.selected{
  background:linear-gradient(90deg,var(--primarySoft),color-mix(in srgb,var(--accentSoft) 45%,var(--surface))) !important;
}
.menu-option .checkmark{
  width:22px;
  height:22px;
  margin-left:auto;
  border-radius:7px;
  display:grid !important;
  place-items:center;
  color:transparent;
  font-size:14px;
  font-weight:900;
}
.menu-option.selected .checkmark{
  color:var(--primary);
  background:color-mix(in srgb,var(--primarySoft) 75%,var(--surface));
}

/* ==========================================================
   V23 EDIT PROFILE MODAL
   ========================================================== */
.profile-edit-modal{
  position:fixed;
  inset:0;
  z-index:520;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(17,24,28,.26);
  backdrop-filter:blur(4px);
}
.profile-edit-modal.show{
  display:flex;
}
.profile-edit-card{
  width:min(520px,calc(100vw - 24px));
  max-height:calc(100vh - 30px);
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 24px 70px rgba(15,28,33,.22);
  padding:18px 18px 16px;
  animation:profileModalIn .16s ease both;
}
@keyframes profileModalIn{
  from{opacity:0;transform:translateY(8px) scale(.99)}
  to{opacity:1;transform:none}
}
.profile-edit-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
}
.profile-edit-head h2{
  margin:0;
  font-size:20px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.02em;
}
.profile-edit-x{
  width:34px;height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
}
.profile-edit-x:hover{background:var(--surface2);color:var(--text)}
.profile-edit-x svg{width:18px;height:18px}

.profile-avatar-area{
  width:160px;
  height:160px;
  margin:28px auto 30px;
  position:relative;
}
.profile-avatar-large{
  width:150px;height:150px;
  margin:auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(145deg,#9aa5a4,#788482);
  color:#fff;
  font-size:52px;
  font-weight:300;
  letter-spacing:-2px;
}
.profile-avatar-large img{
  width:100%;height:100%;
  object-fit:cover;
}
.profile-camera{
  position:absolute;
  right:4px;
  bottom:8px;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  display:grid;
  place-items:center;
  box-shadow:0 4px 12px rgba(20,34,38,.10);
}
.profile-camera:hover{background:var(--surface2)}
.profile-camera svg{width:17px;height:17px}

.profile-edit-fields{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.profile-edit-field{
  min-height:66px;
  border:1px solid var(--line2);
  border-radius:10px;
  background:var(--surface);
  padding:10px 13px 8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.profile-edit-field:focus-within{
  border-color:var(--text);
  box-shadow:0 0 0 1px var(--text);
}
.profile-edit-field span{
  font-size:11px;
  line-height:1;
  color:var(--text);
  font-weight:500;
}
.profile-edit-field input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  padding:0;
  font-size:15px;
  line-height:1.25;
}
.profile-edit-help{
  margin:14px 8px 0;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.profile-edit-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.profile-secondary,.profile-primary{
  height:42px;
  padding:0 18px;
  border-radius:22px;
  font-size:14px;
  font-weight:650;
}
.profile-secondary{
  border:1px solid var(--line2);
  background:var(--surface);
  color:var(--text);
}
.profile-secondary:hover{background:var(--surface2)}
.profile-primary{
  border:1px solid #151515;
  background:#151515;
  color:#fff;
}
.profile-primary:hover{background:#272727}
@media(max-width:620px){
  .profile-edit-card{padding:16px 14px 14px;border-radius:16px}
  .profile-avatar-area{margin-top:18px;margin-bottom:22px}
}


/* =============================
   V24 PREMIUM MENU + MODERN MATERIAL POLISH
   ============================= */
body{
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb,var(--accentSoft) 78%,transparent), transparent 380px),
    radial-gradient(circle at 0 0, color-mix(in srgb,var(--primarySoft) 72%,transparent), transparent 280px),
    linear-gradient(180deg,#f7fafc 0%,#f1f6f8 100%);
}
body.dark{
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb,var(--accentSoft) 45%,transparent), transparent 360px),
    radial-gradient(circle at 0 0, color-mix(in srgb,var(--primarySoft) 40%,transparent), transparent 260px),
    linear-gradient(180deg,#0f171a 0%,#0d1316 100%);
}
.topbar{
  box-shadow:0 10px 26px rgba(16,31,36,.04);
}
.sidebar{
  border-right:1px solid color-mix(in srgb,var(--line) 84%, white);
  box-shadow:8px 0 28px rgba(18,33,38,.035);
}
.sidebar-head{
  padding:11px 12px 9px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%, white);
}
.brand{
  width:32px;height:32px;border-radius:11px;
  box-shadow:0 6px 14px rgba(101,91,216,.16);
}
.brand-copy b{font-size:14px;letter-spacing:-.01em;font-weight:800}
.brand-copy small{font-size:10.5px;line-height:1.15}
.nav-toggle{
  width:36px;height:36px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--surface),var(--surface2));color:var(--muted);
  display:grid;place-items:center;flex:0 0 36px;
  box-shadow:0 3px 10px rgba(17,34,39,.06);transition:.16s ease;
}
.nav-toggle:hover{
  color:var(--primary);border-color:color-mix(in srgb,var(--primary) 38%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 55%,white),var(--surface));
  transform:translateY(-1px);
}
.nav-toggle svg{width:18px;height:18px}
.sidebar-search-wrap{padding:10px 12px 8px}
.sidebar-search{
  height:38px;border-radius:12px;padding:0 12px;gap:10px;
  background:linear-gradient(180deg,var(--surface),var(--surface2));
}
.sidebar-search input{font-size:12.6px}
.sidebar-search svg{width:16px;height:16px}
.nav-section{
  font-size:10.7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#7b8d9b;margin:14px 16px 8px;
}
.nav-link{
  height:42px;margin:3px 10px;padding:0 12px;border-radius:13px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:#334552;
  transition:.16s ease;gap:11px;
}
.nav-link:hover{
  background:linear-gradient(90deg,color-mix(in srgb,var(--primarySoft) 85%,white),var(--surface));
  color:var(--primary2);transform:translateX(1px);
}
.nav-link.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accentSoft) 48%,white),color-mix(in srgb,var(--primarySoft) 85%,white));
  color:var(--primary2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 10%,transparent),0 8px 18px rgba(101,91,216,.08);
}
.nav-link.active:before{background:linear-gradient(180deg,var(--accent),var(--primary));width:3px;border-radius:3px}
.nav-icon{
  width:26px;height:26px;border-radius:9px;flex:0 0 26px;
  background:transparent;color:#6e7f8b;display:grid;place-items:center;transition:.16s ease;
}
.nav-link:hover .nav-icon,.nav-link.active .nav-icon{
  background:color-mix(in srgb,var(--primarySoft) 70%,white);color:var(--primary);
}
.nav-icon svg{width:15px;height:15px}
.nav-label{font-size:13px;line-height:1;font-weight:600}
.nav-arr{font-size:16px;font-weight:400}
body:not(.nav-open) .nav-link{margin-inline:8px}
body:not(.nav-open) .nav-icon{background:transparent}
.user-btn{
  height:52px;border-radius:15px;padding:0 10px;
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  box-shadow:0 6px 16px rgba(18,34,39,.045);
}
.user-avatar{width:34px;height:34px;flex-basis:34px;font-size:11px}
.user-copy b{font-size:13px;font-weight:700;line-height:1.1}
.user-copy small{font-size:10.5px;line-height:1.15}
.user-chevron{font-size:15px}
.product{display:flex;align-items:center;gap:10px;min-width:160px}
.product:before{
  content:'A';width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:0 0 34px;
  background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;font-weight:800;font-size:14px;
  box-shadow:0 8px 18px rgba(101,91,216,.18);
}
.product b{font-size:13.5px;line-height:1.02;font-weight:800;letter-spacing:-.01em}
.product small{font-size:10.5px;line-height:1.1;margin-top:1px}
.global-search{height:38px;border-radius:13px;padding:0 12px 0 11px;box-shadow:0 3px 12px rgba(16,31,36,.03)}
.global-search span{font-size:13px}
.global-search kbd{font-size:10px;padding:2px 6px;border-radius:6px}
.contexts{gap:4px}
.context{height:36px;border-radius:11px;padding:0 9px}
.context .ico{width:22px;height:22px;border-radius:7px}
.context b{font-size:12px;font-weight:700}
.context small{font-size:10px;line-height:1.1}
.icon-btn{width:34px;height:34px;border-radius:11px}
.top-profile{height:38px;border-radius:14px;padding:0 10px 0 6px;gap:8px;box-shadow:0 3px 12px rgba(16,31,36,.04)}
.top-profile-copy b{font-size:13px;line-height:1.08;font-weight:700}
.top-profile-copy small{font-size:10px;line-height:1.1}
.card,.transaction-card,.search-pop,.pop,.drawer,.wizard,.catalog-card,.settings-panel,.profile-edit-card{box-shadow:0 10px 32px rgba(17,34,39,.06)}

/* Material control text alignment polish */
.aj-box{align-items:center !important}
.aj-input,.aj-display{
  font-size:14px !important;
  line-height:1.15 !important;
  color:var(--text);
}
.aj-display{display:flex !important;align-items:center !important;padding:14px 12px 0 !important}
.aj-input{
  padding:0 12px !important;
  line-height:calc(var(--field) - 2px) !important;
}
.aj-field.floating .aj-input,.aj-field:focus-within .aj-input{
  padding:14px 12px 0 !important;
  line-height:1.12 !important;
}
.aj-select:not(.floating):not(.open) .aj-display,.aj-search-select:not(.floating):not(.open) .aj-display{padding-top:0 !important}
.aj-select.floating .aj-display,.aj-select.open .aj-display,.aj-search-select.floating .aj-display,.aj-search-select.open .aj-display{padding-top:14px !important}
.aj-label{
  font-size:12px !important;
  color:#647886 !important;
  left:12px !important;
}
.aj-field.floating .aj-label,.aj-field:focus-within .aj-label,.aj-select.floating .aj-label,.aj-select.open .aj-label,.aj-search-select.floating .aj-label,.aj-search-select.open .aj-label,.aj-multi.floating .aj-label,.aj-multi.open .aj-label{
  left:10px !important;
  font-size:10px !important;
  font-weight:700 !important;
}
.aj-leading,.aj-trailing{width:34px !important;flex-basis:34px !important}
.aj-leading svg,.aj-trailing svg{width:16px !important;height:16px !important}
.aj-prefix,.aj-suffix{font-size:11px !important}
.multi-chips{min-height:28px;align-items:center}
.tag,.multi-count{font-size:12px;line-height:1;height:26px;padding:0 10px;border-radius:9px}
.switchline span{font-size:13px !important;line-height:1.15 !important;display:flex;align-items:center}
.menu-option{font-size:13px}
.menu-option small{font-size:10.5px}
.menu-option.selected .checkmark{font-size:13px}
@media (max-width:1100px){
  .product{min-width:0}.product:before{display:none}
  .product small{display:none}
}


/* ==========================================================
   V26 TRUE CENTERED MATERIAL CONTROLS
   Label floats independently; value never moves down.
   ========================================================== */

/* One common center axis for every one-line Material control. */
.aj-box{
  align-items:center !important;
}

/* INPUT VALUE: true vertical center, same axis as icons. */
.aj-input{
  height:100% !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  padding:0 12px !important;
  margin:0 !important;
  line-height:normal !important;
  font-size:14px !important;
  font-weight:400 !important;
  transform:none !important;
}

/* Floating/focused input must NOT be pushed downward. */
.aj-field.floating .aj-input,
.aj-field:focus-within .aj-input,
.aj-filled.floating .aj-input,
.aj-filled:focus-within .aj-input{
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:normal !important;
  transform:none !important;
}

/* SELECT VALUE: flex gives exact vertical centering. */
.aj-display{
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
  padding:0 12px !important;
  margin:0 !important;
  line-height:1.15 !important;
  font-size:14px !important;
  font-weight:400 !important;
  transform:none !important;
}
.aj-select.floating .aj-display,
.aj-select.open .aj-display,
.aj-search-select.floating .aj-display,
.aj-search-select.open .aj-display,
.aj-select:not(.floating):not(.open) .aj-display,
.aj-search-select:not(.floating):not(.open) .aj-display{
  padding-top:0 !important;
  padding-bottom:0 !important;
  transform:none !important;
}

/* Floating label stays on outline and does not participate in value layout. */
.aj-label{
  top:50% !important;
  transform:translateY(-50%) !important;
  line-height:1 !important;
}
.aj-field.floating .aj-label,
.aj-field:focus-within .aj-label,
.aj-select.floating .aj-label,
.aj-select.open .aj-label,
.aj-search-select.floating .aj-label,
.aj-search-select.open .aj-label,
.aj-multi.floating .aj-label,
.aj-multi.open .aj-label{
  top:0 !important;
  transform:translateY(-50%) !important;
  background:var(--surface) !important;
  padding:0 5px !important;
  z-index:5 !important;
}

/* Leading/trailing icons, prefix and suffix use the exact same center axis. */
.aj-leading,
.aj-trailing{
  height:100% !important;
  align-self:stretch !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
}
.aj-prefix,
.aj-suffix{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  line-height:1 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Text that follows a leading icon starts after the icon but remains centered. */
.aj-box:has(.aj-leading) .aj-input{
  padding-left:2px !important;
}
.aj-box:has(.aj-prefix) .aj-input{
  padding-left:4px !important;
}

/* Native date/time/number controls also stay centered. */
.aj-input[type="date"],
.aj-input[type="time"],
.aj-input[type="number"]{
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:normal !important;
}

/* Filled field: label may float, value still remains centered. */
.aj-filled .aj-box{
  align-items:center !important;
}

/* Textarea is the only control intentionally top aligned. */
.aj-textarea-wrap .aj-box{
  align-items:flex-start !important;
}
.aj-textarea{
  padding:18px 12px 8px !important;
  line-height:1.35 !important;
  font-size:14px !important;
}

/* Multi-select chips centered in the same control row. */
.aj-multi .aj-box{
  display:flex !important;
  align-items:center !important;
  align-content:center !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
}
.aj-multi.floating .aj-box,
.aj-multi.open .aj-box{
  padding-top:5px !important;
}
.multi-chips{
  display:flex !important;
  align-items:center !important;
  align-content:center !important;
  min-height:28px !important;
}
.tag,.multi-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}

/* Keep helper/error outside the center axis. */
.helper{
  line-height:1.25 !important;
  margin-top:4px !important;
}

/* Studio demo card spacing so fields do not visually touch. */
.demo-col{
  gap:12px !important;
}
.control-body{
  padding:12px !important;
}


/* ============================
   V26 Material control polish
   ============================ */
.aj-input,.aj-textarea,.aj-display{font-size:6.95px !important;}
.aj-label{font-size:6.45px !important;color:var(--muted) !important;}
.aj-prefix,.aj-suffix{font-size:6.05px !important;}
.aj-trailing svg,.aj-leading svg{width:12px !important;height:12px !important;}
.aj-field:focus-within .aj-label,
.aj-select.open .aj-label,
.aj-search-select.open .aj-label,
.aj-multi.open .aj-label{color:var(--primary) !important;}
.aj-field:focus-within .aj-box,
.aj-select.open .aj-box,
.aj-search-select.open .aj-box,
.aj-multi.open .aj-box{border-color:var(--primary) !important;box-shadow:inset 0 0 0 1px var(--primary),0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent) !important;}

/* true center text alignment */
.aj-box{display:flex;align-items:center !important;}
.aj-input{
  height:100% !important;
  padding:0 9px !important;
  line-height:calc(var(--field) - 2px) !important;
  vertical-align:middle !important;
}
.aj-field.floating .aj-input,.aj-field:focus-within .aj-input{padding-top:0 !important;}
.aj-display{display:flex !important;align-items:center !important;height:100% !important;padding:0 9px !important;line-height:1.1 !important;}
.aj-select.floating .aj-display,.aj-select.open .aj-display,.aj-search-select.floating .aj-display,.aj-search-select.open .aj-display{padding-top:0 !important;}
.aj-field:not(.floating):not(:focus-within) .aj-input{padding-top:0 !important;}

/* leading icon alignment and label/value start */
.aj-leading{width:28px !important;flex:0 0 28px !important;display:grid !important;place-items:center !important;}
.aj-field.has-leading .aj-input{padding-left:0 !important;}
.aj-field.has-leading .aj-label{left:28px !important;}
.aj-field.has-leading.floating .aj-label,
.aj-field.has-leading:focus-within .aj-label{left:26px !important;}
.aj-field.has-leading .aj-input::placeholder{color:#9aa8b2;opacity:.95;}

/* prefix/suffix centered */
.aj-prefix,.aj-suffix{display:flex;align-items:center;align-self:center;height:100%;padding:0 6px !important;white-space:nowrap;}

/* textarea stays top aligned */
.aj-textarea-wrap .aj-box{align-items:flex-start !important;}
.aj-textarea{padding:12px 9px 8px !important;line-height:1.3 !important;}

/* searchable/multi visual polish */
.multi-chips{display:flex;align-items:center;gap:4px;min-height:24px;}
.tag,.multi-count{display:inline-flex;align-items:center;line-height:1;}
.menu-option.selected,.multi-option.selected{background:color-mix(in srgb,var(--primarySoft) 65%,var(--surface));}


/* ==========================================================
   V27 READABLE PREMIUM MATERIAL UI
   ========================================================== */
:root{
  --disabled-bg:#edf2f4;
  --disabled-border:#c9d5da;
  --disabled-text:#667984;
  --popup-radius:5px;
  --control-radius:4px;
}
body.dark{
  --disabled-bg:#202d32;
  --disabled-border:#41545b;
  --disabled-text:#a8b7bd;
}
html,body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:Inter,"Segoe UI Variable","Segoe UI",Arial,sans-serif;
}
body[data-radius="5"]{--r:5px;--rl:5px;--control-radius:4px}
.aj-box,.btn,.search-box,.menu-option,.multi-option,.setting-segment,.setting-segment button,
.grid-search,.toolbar,.accordion,.pagination .page-btn,.query-row select,.query-row input{border-radius:4px !important}
.panel,.control-card,.kpi,.quick,.decision-ico,.qico,.hero-chip{border-radius:5px !important}
.pop,.profile-pop-v21,.account-sheet,.dialog,.settings-shell,.settings-banner,.profile-edit-card,
.select-menu,.search-menu,.multi-menu,.drawer{border-radius:5px !important}

body[data-control-size="small"]{
  --control-font:11.5px;--control-label:10px;--control-floating:9.5px;--menu-font:11.5px;--menu-sub:10px;
}
body[data-control-size="medium"]{
  --control-font:12.5px;--control-label:10.8px;--control-floating:10px;--menu-font:12.5px;--menu-sub:10.5px;
}
body[data-control-size="large"]{
  --control-font:13.5px;--control-label:11.5px;--control-floating:10.5px;--menu-font:13.5px;--menu-sub:11px;
}
.aj-input,.aj-display{font-size:var(--control-font) !important;font-weight:450 !important;color:var(--text) !important}
.aj-textarea{font-size:12.5px !important;color:var(--text) !important}
.aj-label{font-size:var(--control-label) !important;font-weight:650 !important;color:#667b88 !important}
.aj-field.floating .aj-label,.aj-field:focus-within .aj-label,
.aj-select.floating .aj-label,.aj-select.open .aj-label,
.aj-search-select.floating .aj-label,.aj-search-select.open .aj-label,
.aj-multi.floating .aj-label,.aj-multi.open .aj-label{font-size:var(--control-floating) !important}
.aj-prefix,.aj-suffix{font-size:10.5px !important;font-weight:600;color:#728590 !important}
.helper{font-size:10.5px !important;font-weight:500}
.tag,.multi-count{font-size:12.5px !important;font-weight:550}
.multi-placeholder{font-size:12.5px !important}
.switchline span,.aj-check,.aj-radio{font-size:12.5px !important}
.menu-head b{font-size:12.5px !important}.menu-head small{font-size:10.5px !important}
.menu-option b,.multi-option{font-size:var(--menu-font) !important}.menu-option small{font-size:var(--menu-sub) !important}

.aj-field:focus-within .aj-box,.aj-select.open .aj-box,.aj-search-select.open .aj-box,.aj-multi.open .aj-box{
  border-color:var(--primary) !important;
  box-shadow:inset 0 0 0 1px var(--primary),0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent) !important;
}
.aj-field:focus-within .aj-label,.aj-select.open .aj-label,.aj-search-select.open .aj-label,.aj-multi.open .aj-label{
  color:var(--primary) !important;
}

.aj-disabled{opacity:1 !important;pointer-events:none}
.aj-disabled .aj-box{
  background:var(--disabled-bg) !important;
  border-color:var(--disabled-border) !important;
  box-shadow:none !important;
}
.aj-disabled .aj-input,.aj-disabled .aj-display,.aj-disabled .aj-prefix,.aj-disabled .aj-suffix{
  color:var(--disabled-text) !important;
  -webkit-text-fill-color:var(--disabled-text) !important;
  opacity:1 !important;
}
.aj-disabled .aj-label{color:var(--disabled-text) !important;background:var(--disabled-bg) !important}
.aj-readonly .aj-box{background:color-mix(in srgb,var(--surface2) 78%,var(--surface)) !important;border-color:#d2dde1 !important}
.aj-readonly .aj-input{color:#425660 !important}

.sidebar-scroll{
  flex:1;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:3px 5px 6px !important;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--primary) 72%,var(--line2)) transparent;
  scrollbar-gutter:stable;
}
.sidebar-scroll::-webkit-scrollbar{width:7px;height:0}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 76%,#fff),color-mix(in srgb,var(--accent) 62%,var(--primary)));
  border-radius:7px;border:2px solid transparent;background-clip:padding-box;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:var(--primary);border:1px solid transparent;background-clip:padding-box}
.sidebar{overflow:hidden !important}
.nav-section{
  margin:8px 9px 4px !important;
  padding:0 4px !important;
  font-size:9.8px !important;
  line-height:1.1;
  letter-spacing:.10em !important;
  font-weight:800 !important;
}
body.nav-open .nav-section{padding-top:7px !important;padding-bottom:2px !important}
.nav-link{
  min-height:34px !important;
  height:auto !important;
  margin:1px 3px !important;
  padding:5px 8px !important;
  gap:8px !important;
  border-radius:5px !important;
  align-items:center !important;
}
.nav-icon{width:24px !important;height:24px !important;flex:0 0 24px !important;border-radius:5px !important}
.nav-icon svg{width:15px !important;height:15px !important}
.nav-label{
  font-size:12.6px !important;
  line-height:1.16 !important;
  font-weight:620 !important;
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  overflow-wrap:anywhere;
}
.nav-arr{font-size:14px !important;line-height:1;align-self:center}
body:not(.nav-open) .nav-link{height:36px !important;min-height:36px !important;padding:0 !important;margin:1px 3px !important}
body:not(.nav-open) .nav-label,body:not(.nav-open) .nav-arr{display:none !important}
.nav-divider{margin:5px 7px !important}
.sidebar-search-wrap{padding-left:7px !important;padding-right:7px !important}
body.nav-open .sidebar-search-wrap{padding-top:5px !important}
.sidebar-search{height:32px !important;border-radius:5px !important}
.sidebar-search input{font-size:11.8px !important}
.sidebar-footer{padding:5px !important}
.user-btn{height:46px !important;border-radius:5px !important}
.user-copy b{font-size:12.5px !important}.user-copy small{font-size:10.5px !important}
.sidebar,.sidebar-scroll,.sidebar-footer,.sidebar-head,.sidebar-search-wrap{max-width:100%;min-width:0}
.sidebar-scroll *{max-width:100%}

.settings-content,.settings-nav,.menu-list,.results,.drawer-body,.work{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--primary) 68%,var(--line2)) transparent;
}
.settings-content::-webkit-scrollbar,.settings-nav::-webkit-scrollbar,.menu-list::-webkit-scrollbar,.results::-webkit-scrollbar,.drawer-body::-webkit-scrollbar,.work::-webkit-scrollbar{width:7px;height:7px}
.settings-content::-webkit-scrollbar-thumb,.settings-nav::-webkit-scrollbar-thumb,.menu-list::-webkit-scrollbar-thumb,.results::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb,.work::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--primary) 70%,var(--line2));border-radius:7px
}

:root{--muted:#657985}
body.dark{--muted:#a8b8be}
.page-head p,.crumb,.panel-head small,.kpi-label,.decision-row small,.account-copy small,.top-profile small{font-weight:450}


/* ==========================================================
   V28 DARK MODE / HEADER / POPUP POLISH
   ========================================================== */
body.dark{
  background:
    radial-gradient(circle at 85% 0, color-mix(in srgb,var(--primary) 12%, transparent), transparent 420px),
    linear-gradient(180deg,#0d1519 0%, #10191e 34%, #111b20 100%) !important;
}
body.dark .app{background:transparent}
body.dark .sidebar{
  background:linear-gradient(180deg,#121d22 0%, #132027 55%, #10191f 100%) !important;
  border-right:1px solid color-mix(in srgb,var(--primary) 20%, var(--line)) !important;
  box-shadow:10px 0 34px rgba(0,0,0,.20);
}
body.dark .sidebar-head,
body.dark .sidebar-search-wrap,
body.dark .sidebar-footer,
body.dark .topbar{
  border-color:color-mix(in srgb,var(--primary) 18%, var(--line)) !important;
}
body.dark .topbar{
  background:linear-gradient(180deg, rgba(13,22,27,.96), rgba(15,24,29,.92)) !important;
  color:var(--text) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}
body.dark .global-search,
body.dark .context,
body.dark .top-actions .ghost,
body.dark .top-profile,
body.dark .mobile-menu,
body.dark .nav-toggle,
body.dark .pin-btn,
body.dark .settings-close,
body.dark .profile-edit-card,
body.dark .settings-shell,
body.dark .dialog,
body.dark .drawer,
body.dark .control-card,
body.dark .panel,
body.dark .hero,
body.dark .kpi,
body.dark .quick,
body.dark .select-menu,
body.dark .search-menu,
body.dark .multi-menu{
  background-color:#132128 !important;
}
body.dark .global-search,
body.dark .context,
body.dark .top-profile,
body.dark .top-actions .ghost,
body.dark .mobile-menu,
body.dark .nav-toggle,
body.dark .pin-btn{
  border:1px solid color-mix(in srgb,var(--primary) 16%, var(--line)) !important;
}
body.dark .context:hover,
body.dark .top-actions .ghost:hover,
body.dark .mobile-menu:hover,
body.dark .nav-toggle:hover,
body.dark .pin-btn:hover,
body.dark .settings-close:hover{
  background:color-mix(in srgb,var(--primarySoft) 60%, #16262d) !important;
  border-color:color-mix(in srgb,var(--primary) 34%, var(--line)) !important;
}
body.dark .product b,
body.dark .product small,
body.dark .context b,
body.dark .context small,
body.dark .top-profile b,
body.dark .top-profile small,
body.dark .page-head p,
body.dark .crumb,
body.dark .panel-head small,
body.dark .panel-head b,
body.dark .helper,
body.dark .menu-head small,
body.dark .menu-head b{color:var(--text) !important}
body.dark .product small,
body.dark .context small,
body.dark .top-profile small,
body.dark .page-head p,
body.dark .crumb,
body.dark .helper,
body.dark .kpi small,
body.dark .muted,
body.dark .panel-head small{color:var(--muted) !important}
body.dark .work{
  background:linear-gradient(180deg, rgba(11,20,24,.30), rgba(16,24,29,.12)) !important;
}
body.dark .page-head,
body.dark .control-hero,
body.dark .hero{background:linear-gradient(90deg, rgba(19,35,43,.92), rgba(16,26,31,.82), rgba(21,34,43,.82)) !important;border-color:color-mix(in srgb,var(--primary) 16%, var(--line)) !important}
body.dark .panel,
body.dark .control-card,
body.dark .kpi,
body.dark .quick{border-color:color-mix(in srgb,var(--primary) 14%, var(--line)) !important;box-shadow:0 8px 24px rgba(0,0,0,.10)}
body.dark .settings-modal,
body.dark .profile-edit-overlay,
body.dark .overlay{background:rgba(4,10,13,.48) !important;backdrop-filter:blur(7px)}
body.dark .settings-shell,
body.dark .profile-edit-card,
body.dark .dialog,
body.dark .drawer,
body.dark .select-menu,
body.dark .search-menu,
body.dark .multi-menu,
body.dark .profile-pop-v21{
  border:1px solid color-mix(in srgb,var(--primary) 24%, var(--line2)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 22px 54px rgba(0,0,0,.42) !important;
}
body.dark .settings-sidebar{background:linear-gradient(180deg,#132128 0%, #0f1b21 100%) !important;border-right:1px solid color-mix(in srgb,var(--primary) 18%, var(--line)) !important}
body.dark .settings-nav button.active,
body.dark .settings-nav button:hover{background:color-mix(in srgb,var(--primarySoft) 52%, #17262d) !important}
body.dark .settings-group,
body.dark .settings-banner,
body.dark .profile-edit-card .account-sheet{border-color:color-mix(in srgb,var(--primary) 14%, var(--line)) !important}
body.dark .aj-box,
body.dark .settings-row,
body.dark .setting-segment,
body.dark .mini-opt,
body.dark .sheet-field,
body.dark .profile-edit-field{
  border-color:color-mix(in srgb,var(--primary) 14%, var(--line)) !important;
}
body.dark .setting-segment button,
body.dark .mini-opt,
body.dark .theme-chip,
body.dark .density-chip,
body.dark .chip,
body.dark .btn,
body.dark .sheet-btn,
body.dark .profile-edit-actions .btn{
  border-color:color-mix(in srgb,var(--primary) 16%, var(--line)) !important;
}
body.dark .setting-segment button.active,
body.dark .mini-opt.active,
body.dark .theme-chip.active,
body.dark .density-chip.active{
  background:color-mix(in srgb,var(--primary) 26%, #15252d) !important;
  color:#eef7f8 !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 40%, transparent);
}
body.dark .profile-edit-field input,
body.dark .sheet-field input,
body.dark .sheet-field textarea,
body.dark .settings-row select,
body.dark .settings-row input{
  background:transparent !important;
  color:var(--text) !important;
}
body.dark .profile-edit-card h3,
body.dark .settings-shell h2,
body.dark .settings-shell h3,
body.dark .dialog-head b,
body.dark .drawer-head b{color:var(--text) !important}
body.dark .dialog-head,
body.dark .dialog-foot,
body.dark .drawer-head{border-color:color-mix(in srgb,var(--primary) 18%, var(--line)) !important}
body.dark .settings-content .divider,
body.dark .settings-content hr,
body.dark .profile-edit-card hr{border-color:color-mix(in srgb,var(--primary) 14%, var(--line)) !important}


/* ==========================================================
   V29 PREMIUM SETTINGS + CONTROLS
   ========================================================== */
body[data-theme="emerald"]{--primary:#0f8f72;--primary2:#0a6c57;--primarySoft:#e5f5f0;--accent:#5b67d8;--accentSoft:#eef0ff}
body[data-theme="amber"]{--primary:#b8750b;--primary2:#8c5706;--primarySoft:#fff3dd;--accent:#2f7e91;--accentSoft:#e6f3f6}
body[data-theme="rose"]{--primary:#bd4b76;--primary2:#943657;--primarySoft:#fbe9f0;--accent:#5367d7;--accentSoft:#edf0ff}
body[data-theme="midnight"]{--primary:#23577e;--primary2:#173d59;--primarySoft:#e5eef5;--accent:#6d5fd1;--accentSoft:#efedff}
body.dark[data-theme="emerald"]{--primary:#36b895;--primary2:#279379;--primarySoft:#143b32;--accent:#868ef0;--accentSoft:#292d50}
body.dark[data-theme="amber"]{--primary:#e0a33c;--primary2:#b87c1c;--primarySoft:#3a2d18;--accent:#64b4c4;--accentSoft:#17363c}
body.dark[data-theme="rose"]{--primary:#dc759b;--primary2:#b9587c;--primarySoft:#3e2330;--accent:#8695ef;--accentSoft:#292e53}
body.dark[data-theme="midnight"]{--primary:#5e9dca;--primary2:#3e7ca9;--primarySoft:#173044;--accent:#9186ed;--accentSoft:#2c294e}

/* dark menu must remain clearly readable */
body.dark .nav-section{color:#8fa1ad !important}
body.dark .nav-link{color:#d2dde2 !important}
body.dark .nav-link .nav-icon{color:#9db0ba !important}
body.dark .nav-link:hover{color:#fff !important;background:color-mix(in srgb,var(--primarySoft) 58%,#17262d) !important}
body.dark .nav-link:hover .nav-icon{color:var(--primary) !important;background:color-mix(in srgb,var(--primarySoft) 72%,#17262d) !important}
body.dark .nav-link.active{color:#fff !important;background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 24%,#213139),color-mix(in srgb,var(--accent) 14%,#17262d)) !important;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line)) !important}
body.dark .nav-link.active .nav-icon{color:#e8ffff !important;background:color-mix(in srgb,var(--primary) 28%,#1a2c33) !important}
body.dark .sidebar-search input{color:#e6eef1 !important}
body.dark .sidebar-search input::placeholder{color:#8497a2 !important}
body.dark .user-copy b{color:#eef6f8 !important} body.dark .user-copy small{color:#9fb0b8 !important}

/* header/sidebar tones */
body[data-header-tone="tinted"] .topbar{background:linear-gradient(90deg,color-mix(in srgb,var(--primarySoft) 55%,var(--surface)),var(--surface),color-mix(in srgb,var(--accentSoft) 35%,var(--surface))) !important}
body[data-header-tone="primary"] .topbar{background:linear-gradient(100deg,var(--primary2),var(--primary),color-mix(in srgb,var(--primary) 68%,var(--accent))) !important;border-color:transparent !important;color:#fff !important}
body[data-header-tone="primary"] .topbar .product b,body[data-header-tone="primary"] .topbar .product small,body[data-header-tone="primary"] .topbar .context b,body[data-header-tone="primary"] .topbar .context small,body[data-header-tone="primary"] .topbar .top-profile b,body[data-header-tone="primary"] .topbar .top-profile small{color:#fff !important}
body[data-header-tone="primary"] .topbar .global-search,body[data-header-tone="primary"] .topbar .context,body[data-header-tone="primary"] .topbar .icon-btn,body[data-header-tone="primary"] .topbar .top-profile{background:rgba(255,255,255,.09) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important}
body[data-sidebar-tone="tinted"] .sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 46%,var(--surface)),var(--surface),color-mix(in srgb,var(--accentSoft) 20%,var(--surface))) !important}
body[data-sidebar-tone="primary"] .sidebar{background:linear-gradient(180deg,var(--primary2),color-mix(in srgb,var(--primary2) 78%,#101b20)) !important;border-color:color-mix(in srgb,var(--primary) 45%,transparent) !important}
body[data-sidebar-tone="primary"] .sidebar .brand-copy b,body[data-sidebar-tone="primary"] .sidebar .brand-copy small,body[data-sidebar-tone="primary"] .sidebar .nav-section,body[data-sidebar-tone="primary"] .sidebar .nav-link,body[data-sidebar-tone="primary"] .sidebar .user-copy b,body[data-sidebar-tone="primary"] .sidebar .user-copy small{color:#efffff !important}
body[data-sidebar-tone="primary"] .sidebar .nav-icon{color:#d7f1f4 !important}
body[data-sidebar-tone="primary"] .sidebar .nav-link.active{background:rgba(255,255,255,.16) !important;color:#fff !important}
body[data-sidebar-tone="primary"] .sidebar .sidebar-search,body[data-sidebar-tone="primary"] .sidebar .user-btn{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important}

/* elevation / motion */
body[data-shadow="subtle"]{--shadowSm:0 3px 10px rgba(24,58,64,.045);--shadow:0 10px 28px rgba(24,58,64,.10)}
body[data-shadow="medium"]{--shadowSm:0 5px 16px rgba(24,58,64,.07);--shadow:0 18px 46px rgba(24,58,64,.15)}
body[data-shadow="strong"]{--shadowSm:0 8px 24px rgba(24,58,64,.11);--shadow:0 24px 64px rgba(24,58,64,.22)}
body[data-animations="reduced"] *{transition-duration:.01ms !important;animation-duration:.01ms !important}

/* control style */
body[data-control-style="soft"] .aj-box{background:color-mix(in srgb,var(--primarySoft) 18%,var(--surface2)) !important;border-color:transparent !important;border-bottom:1px solid var(--line2) !important}
body[data-control-style="soft"] .aj-field:focus-within .aj-box,body[data-control-style="soft"] .aj-select.open .aj-box,body[data-control-style="soft"] .aj-search-select.open .aj-box,body[data-control-style="soft"] .aj-multi.open .aj-box{border-color:transparent !important;border-bottom:2px solid var(--primary) !important;box-shadow:none !important}
body[data-selected-mark="off"] .menu-option .checkmark{display:none !important}

/* menu label settings */
body[data-menu-labels="one"] .nav-label{white-space:nowrap !important;display:block !important;overflow:hidden !important;text-overflow:ellipsis !important}
body[data-menu-labels="two"] .nav-label{white-space:normal !important;display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden !important}

/* premium collapsed / expanded user footer */
.user-btn{position:relative;overflow:visible !important}
.user-avatar-wrap{position:relative;display:grid;place-items:center;flex:0 0 auto}
.user-avatar-wrap .user-avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--primary) 18%,var(--line))}
.online-dot{position:absolute;right:-1px;bottom:0;width:8px;height:8px;border-radius:50%;background:#27b675;border:2px solid var(--surface)}
.user-more{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;color:var(--muted);margin-left:auto;transition:.14s}
.user-more svg{width:14px;height:14px}
body.nav-open .user-btn:hover .user-more{background:var(--primarySoft);color:var(--primary)}
body:not(.nav-open) .sidebar-footer{display:flex;justify-content:center;padding:6px !important}
body:not(.nav-open) .user-btn{width:42px !important;height:42px !important;border-radius:9px !important;padding:0 !important;justify-content:center !important;background:var(--surface2) !important}
body:not(.nav-open) .user-avatar-wrap .user-avatar{width:30px !important;height:30px !important;font-size:10px !important}
body:not(.nav-open) .user-copy,body:not(.nav-open) .user-more{display:none !important}
body:not(.nav-open) .online-dot{width:8px;height:8px;right:-2px;bottom:-1px}
.user-avatar-wrap.large .user-avatar{width:44px;height:44px;font-size:13px}

/* settings modal premium */
.premium-settings-shell{grid-template-columns:245px minmax(0,1fr) !important;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line2)) !important;box-shadow:0 0 0 1px rgba(255,255,255,.02),0 28px 80px rgba(0,0,0,.28) !important}
.settings-close-row{display:flex;align-items:center;gap:10px;padding:14px !important;border-bottom:1px solid var(--line)}
.settings-brand{display:flex;align-items:center;gap:9px;min-width:0}.settings-brand .sb-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,var(--primary),var(--accent));color:#fff;display:grid;place-items:center;font-weight:850}.settings-brand b{display:block;font-size:12px}.settings-brand small{display:block;font-size:9.5px;color:var(--muted);margin-top:1px}
.settings-close{width:34px !important;height:34px !important;border-radius:8px !important;flex:0 0 34px}
.settings-nav{padding:9px !important;gap:3px !important}.settings-nav button{height:39px !important;border-radius:7px !important;padding:0 10px !important;font-size:12px !important;font-weight:600 !important}.settings-nav .si{width:25px;height:25px;border-radius:7px;background:var(--surface2);display:grid;place-items:center;color:var(--muted)}.settings-nav .si svg{width:15px;height:15px}.settings-nav button.active .si,.settings-nav button:hover .si{background:var(--primarySoft);color:var(--primary)}
.settings-side-foot{margin-top:auto;padding:10px;border-top:1px solid var(--line)}.settings-reset{width:100%;height:34px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font-size:10.5px}.settings-reset:hover{background:var(--dangerSoft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,var(--line))}
.settings-content{padding:18px 22px !important}.settings-pane-head{margin-bottom:12px !important}.settings-pane-head h2{font-size:18px !important}.settings-pane-head p{margin:4px 0 0;font-size:10.5px;color:var(--muted)}
.settings-row{min-height:61px !important}.settings-row>span:first-child{display:flex;flex-direction:column;gap:3px}.settings-row>span:first-child b{font-size:12px}.settings-row>span:first-child small{font-size:9.5px;color:var(--muted)}.settings-row-stack{display:block !important;padding:14px 2px !important}.settings-row-stack>span{margin-bottom:11px}
.theme-preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.theme-preset{height:42px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);display:flex;align-items:center;gap:8px;padding:0 9px;font-size:10.5px;font-weight:650}.theme-preset:hover,.theme-preset.active{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));background:var(--primarySoft);color:var(--primary)}.theme-preset i{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.color-editor{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}.color-editor label{height:52px;border:1px solid var(--line);border-radius:7px;padding:7px 9px;display:grid;grid-template-columns:1fr 28px;grid-template-rows:auto auto;align-items:center}.color-editor label span{font-size:9.5px;color:var(--muted)}.color-editor input[type=color]{grid-row:1/3;grid-column:2;width:28px;height:28px;border:0;background:transparent;padding:0}.color-editor output{font-size:11px;font-weight:650}.color-editor .btn{height:38px}
.settings-control-preview{margin-top:14px;padding:13px;border:1px dashed color-mix(in srgb,var(--primary) 25%,var(--line));border-radius:7px;display:grid;grid-template-columns:1fr 1fr;gap:9px;background:color-mix(in srgb,var(--primarySoft) 14%,var(--surface2))}
.account-settings-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--surface2)}.account-settings-card b{display:block;font-size:12px}.account-settings-card small{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}.status-good{font-size:10px;font-weight:700;color:var(--success);background:var(--successSoft);padding:4px 7px;border-radius:5px}

/* make existing control studio premium */
.control-card{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface2) 45%,var(--surface))) !important;border:1px solid color-mix(in srgb,var(--primary) 10%,var(--line)) !important;box-shadow:var(--shadowSm) !important;transition:.16s}.control-card:hover{border-color:color-mix(in srgb,var(--primary) 22%,var(--line)) !important;transform:translateY(-1px)}.control-card .panel-head{background:linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 9%,var(--surface)),var(--surface2)) !important}.control-body{padding:11px !important}.control-card .panel-head b{font-size:12.5px !important}
.tabs-demo{background:var(--surface2);padding:3px;border:1px solid var(--line);border-radius:7px}.tabs-demo button{border-radius:5px}.tabs-demo button.active{background:var(--surface);box-shadow:0 2px 7px rgba(20,34,38,.08)}
.accordion{border-radius:7px !important}.accordion-head{font-weight:650;color:var(--text)}.accordion.open .accordion-head{background:var(--primarySoft);color:var(--primary)}
.wiz-step{border-radius:6px !important;font-weight:650}.wiz-step.active{box-shadow:0 4px 10px color-mix(in srgb,var(--primary) 20%,transparent)}
.sort-item{border-radius:6px !important;background:var(--surface) !important;font-size:11px !important}.sort-item:before{content:'⠿';color:var(--muted);font-size:15px}.sort-item.dragging{border-color:var(--primary);background:var(--primarySoft) !important}
.upload-zone{border-radius:7px !important;font-size:10.5px !important;background:linear-gradient(180deg,var(--surface2),var(--surface)) !important}.upload-zone.drag{box-shadow:inset 0 0 0 2px var(--primary)}
.toolbar{border-radius:7px !important}.toolbar button{border-radius:5px !important;font-size:12px}.toolbar button:hover{transform:translateY(-1px)}
.dual-box{border-radius:7px !important;background:var(--surface2)}.dual-item{font-size:10.5px !important}.dual-item.selected{box-shadow:inset 3px 0 0 var(--primary)}
.query-row select,.query-row input{font-size:10.5px !important;background:var(--surface) !important}.color-input{border-radius:5px !important}
.context-menu{border-radius:7px !important;padding:5px !important}.context-menu button{font-size:10.5px !important}.context-menu button:hover{transform:translateX(2px)}
.kan-col{border-radius:7px !important}.kan-card{border-radius:6px !important;font-size:10px !important;box-shadow:0 3px 10px rgba(20,34,38,.05);cursor:pointer}.kan-card:hover{border-color:var(--primary);transform:translateY(-1px)}
.timeline-item{font-size:10px !important}.gantt{border-radius:7px !important}.gantt-bar{cursor:pointer;box-shadow:0 3px 8px color-mix(in srgb,var(--primary) 18%,transparent)}.scheduler{border-radius:7px !important}.day{font-size:9.5px !important}.event{font-size:9.5px;cursor:pointer}.event:hover{box-shadow:inset 0 0 0 1px var(--primary)}
.splash-preview{border-radius:7px !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* toast position */
body[data-toast-position="bottom-right"] .toast-stack{top:auto !important;bottom:12px !important}

@media(max-width:900px){.theme-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-editor{grid-template-columns:1fr 1fr}.color-editor .btn{grid-column:1/3}.settings-control-preview{grid-template-columns:1fr}}


/* V29.1 control icon polish */
.toolbar button svg{width:14px;height:14px;margin:auto}.sort-item span{font-size:10.8px;font-weight:600}.file-chip{min-height:34px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:10.5px;font-weight:600;cursor:pointer}.file-chip:hover,.file-chip.selected{background:var(--primarySoft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}.file-ico{width:24px;height:24px;border-radius:6px;background:var(--surface2);display:grid;place-items:center;color:var(--muted)}.file-ico svg{width:13px;height:13px}.file-chip:hover .file-ico,.file-chip.selected .file-ico{background:var(--surface);color:var(--primary)}


/* ==========================================================
   V30 CLEAN HEADER + COMPACT SIDEBAR TOOLS + CONTEXT PICKERS
   ========================================================== */
.topbar{gap:7px;padding:0 9px}
.header-launcher{display:grid;flex:0 0 34px}
.header-launcher svg{width:18px;height:18px}
.global-search{flex:0 1 600px;min-width:260px}
.contexts{gap:4px}
.context{
  min-width:0;height:36px;padding:0 7px 0 6px;gap:6px;
  border:1px solid transparent;border-radius:5px;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.context:hover,.context.active{
  background:var(--surface);border-color:color-mix(in srgb,var(--primary) 20%,var(--line));
  box-shadow:0 4px 13px rgba(20,42,48,.05)
}
.context .ico{width:24px;height:24px;border-radius:5px;flex:0 0 24px}
.context-copy{min-width:0;text-align:left}
.context-copy b{max-width:122px;overflow:hidden;text-overflow:ellipsis}
.context-chevron{width:18px;height:24px;display:grid;place-items:center;color:var(--muted);transition:transform .14s ease}
.context-chevron svg{width:12px;height:12px}
.context.active .context-chevron{transform:rotate(180deg);color:var(--primary)}
.fullscreen-btn.fullscreen-active{background:var(--primarySoft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 28%,var(--line))}

/* Collapsed sidebar: App Launcher + Search compact actions. */
.sidebar-compact-tools{display:none;gap:4px;padding:5px 4px 4px;justify-content:center;align-items:center}
body:not(.nav-open) .sidebar-compact-tools{display:flex}
body:not(.nav-open) .sidebar-search-wrap{display:none !important}
.compact-tool{
  width:27px;height:29px;border:1px solid var(--line);border-radius:5px;background:var(--surface2);color:var(--muted);
  display:grid;place-items:center;padding:0;transition:.14s ease
}
.compact-tool:hover{background:var(--primarySoft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,var(--line));transform:translateY(-1px)}
.compact-tool svg{width:14px;height:14px}
body.nav-open .sidebar-compact-tools{display:none}

/* Keep compact buttons clickable before hover expansion. */
#sidebarCompactTools{position:relative;z-index:6}

/* Premium context selection popover */
.context-pop-v30{overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line));box-shadow:0 18px 46px rgba(22,42,48,.16)}
.context-pop-head{min-height:48px;padding:9px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2))}
.context-pop-title{min-width:0;flex:1}.context-pop-title b{display:block;font-size:12.5px}.context-pop-title small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.context-pop-close{width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:19px;display:grid;place-items:center}
.context-pop-close:hover{background:var(--primarySoft);color:var(--primary)}
.context-pop-search{height:36px;margin:7px;border:1px solid var(--line);border-radius:5px;background:var(--surface2);display:flex;align-items:center;gap:7px;padding:0 9px}
.context-pop-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent)}
.context-pop-search svg{width:14px;height:14px;color:var(--muted)}
.context-pop-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:11.5px}
.context-results{max-height:245px;overflow:auto;padding:1px 6px 6px}
.context-option{min-height:43px;border:1px solid transparent;border-radius:5px;padding:5px 7px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.12s ease}
.context-option:hover{background:var(--surface2);border-color:var(--line)}
.context-option.selected{background:linear-gradient(90deg,var(--primarySoft),color-mix(in srgb,var(--accentSoft) 36%,var(--surface)));border-color:color-mix(in srgb,var(--primary) 18%,var(--line))}
.context-row-icon{width:29px;height:29px;border-radius:5px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center;flex:0 0 29px}
.context-row-icon svg{width:14px;height:14px}
.context-option-copy{min-width:0;flex:1}.context-option-copy b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-option-copy small{display:block;font-size:9.8px;color:var(--muted);margin-top:2px}
.context-selected{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:transparent;flex:0 0 25px}
.context-selected svg{width:15px;height:15px}
.context-option.selected .context-selected{color:#fff;background:var(--primary)}
.context-pop-foot{height:30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 10px;color:var(--muted);font-size:9.5px;background:var(--surface2)}
.context-current-dot{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.context-empty{padding:20px 10px;text-align:center;color:var(--muted);font-size:11px}

body.dark .context:hover,body.dark .context.active{background:#17262d}
body.dark .context-pop-v30{background:#132128;border-color:color-mix(in srgb,var(--primary) 27%,var(--line));box-shadow:0 20px 54px rgba(0,0,0,.38)}
body.dark .context-pop-head,body.dark .context-pop-foot{background:#101d23}
body.dark .context-pop-search{background:#17262d}
body.dark .context-option:hover{background:#18282f}
body.dark .context-option.selected{background:color-mix(in srgb,var(--primary) 20%,#15242b)}

@media(max-width:1050px){.contexts{display:none}.global-search{flex:1;min-width:0}}
@media(max-width:780px){
  .header-launcher{display:grid}
  .sidebar-compact-tools{display:none !important}
  .sidebar-search-wrap{display:block !important}
}
@media(max-width:620px){.header-launcher{display:none}.fullscreen-btn{display:none}}


/* V30 desktop/mobile launcher rule */
.mobile-menu{display:none !important}
@media(max-width:780px){.mobile-menu{display:grid !important}}


/* ==========================================================
   V31 RESPONSIVE NAVIGATION / MOBILE SETTINGS / LEVEL 3 MENU
   ========================================================== */

/* Mobile-specific launcher/search row lives inside the menu. */
.mobile-sidebar-tools{display:none}

/* Hierarchical navigation */
.nav-node{min-width:0}
.nav-children{display:none;min-width:0}
.nav-node.open > .nav-children{display:block}
.nav-parent .nav-arr svg{width:13px;height:13px;transition:transform .16s ease}
.nav-node.open > .nav-parent .nav-arr svg{transform:rotate(90deg)}
.nav-children.level-2{padding:2px 4px 4px 35px}
.nav-sub-link{
  width:100%;min-height:32px;border:0;background:transparent;color:var(--text);
  display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:5px;text-align:left;
  font-size:11.8px;font-weight:570;line-height:1.2;position:relative
}
.nav-sub-link:hover,.nav-sub-link.active{background:var(--primarySoft);color:var(--primary)}
.nav-sub-icon{
  width:21px;height:21px;flex:0 0 21px;border-radius:5px;background:var(--surface2);color:var(--muted);
  display:grid;place-items:center;font-size:9px;font-weight:800
}
.nav-sub-icon svg{width:12px;height:12px}
.nav-sub-link:hover .nav-sub-icon,.nav-sub-link.active .nav-sub-icon{background:var(--surface);color:var(--primary)}
.nav-sub-link > span:nth-child(2){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-sub-arr{margin-left:auto;color:var(--muted);font-size:14px;transition:transform .16s ease}
.nav-node-l2.open > .nav-sub-parent .nav-sub-arr{transform:rotate(90deg)}
.nav-children.level-3{padding:1px 3px 3px 24px}
.nav-l3-link{
  width:100%;min-height:28px;border:0;background:transparent;color:var(--muted);
  display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;text-align:left;
  font-size:10.9px;font-weight:540;line-height:1.2
}
.nav-l3-link > span{width:5px;height:5px;border-radius:50%;background:var(--line2);flex:0 0 5px}
.nav-l3-link:hover{background:color-mix(in srgb,var(--primarySoft) 72%,var(--surface));color:var(--primary)}
.nav-l3-link:hover > span{background:var(--primary)}
body:not(.nav-open) .nav-children{display:none !important}

/* Premium search + app launcher */
.search-pop-v31,.launcher-pop-v31{
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line)) !important;
  box-shadow:0 22px 58px rgba(19,39,46,.18) !important;
  overflow:hidden
}
.v31-pop-title{min-height:58px;padding:10px 11px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2))}
.v31-pop-title > span:nth-child(2){min-width:0;flex:1}
.v31-pop-title b{display:block;font-size:13px;line-height:1.1}
.v31-pop-title small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.v31-pop-icon{width:34px;height:34px;border-radius:8px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center;flex:0 0 34px}
.v31-pop-icon.apps{background:linear-gradient(145deg,var(--primarySoft),var(--accentSoft));color:var(--accent)}
.v31-pop-icon svg{width:17px;height:17px}
.v31-pop-close{width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.v31-pop-close:hover{background:var(--surface3);color:var(--text)}
.v31-search-field{height:40px;margin:9px 10px 5px;border:1px solid var(--line2);border-radius:5px;background:var(--surface);display:flex;align-items:center;gap:8px;padding:0 10px}
.v31-search-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 9%,transparent)}
.v31-search-field svg{width:16px;height:16px;color:var(--muted)}
.v31-search-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:12.5px}
.v31-search-field kbd{font-size:9px;color:var(--muted);border:1px solid var(--line);background:var(--surface2);padding:2px 5px;border-radius:4px}
.v31-search-caption{height:25px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;font-size:9.5px;color:var(--muted);font-weight:650;text-transform:uppercase;letter-spacing:.04em}
.v31-results{padding:4px 7px 8px}
.v31-results .result{min-height:42px}
.v31-results .result b{font-size:11.5px}.v31-results .result small{font-size:9.8px}
.launcher-grid-v31{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px}
.launcher-grid-v31 .app-card{min-height:70px;border-radius:5px;padding:9px;grid-template-columns:38px minmax(0,1fr);gap:9px}
.launcher-grid-v31 .ai{width:38px;height:38px;border-radius:8px}
.launcher-grid-v31 .ai svg{width:18px;height:18px}
.launcher-grid-v31 .app-card b{font-size:11.5px}.launcher-grid-v31 .app-card small{font-size:9.6px;line-height:1.25}

/* Uniform mobile header actions. */
@media(max-width:780px){
  .topbar{height:48px !important;padding:0 7px !important;gap:4px !important}
  .topbar .icon-btn,.topbar .header-launcher,.topbar .fullscreen-btn,.topbar .mobile-menu{
    width:34px !important;height:34px !important;flex:0 0 34px !important;border-radius:5px !important;
    border:1px solid var(--line) !important;background:var(--surface) !important;color:var(--muted) !important
  }
  .topbar .icon-btn:hover{background:var(--primarySoft) !important;color:var(--primary) !important}
  .topbar .icon-btn svg{width:16px !important;height:16px !important}
  .global-search{
    width:34px !important;height:34px !important;flex:0 0 34px !important;min-width:34px !important;padding:0 !important;
    display:grid !important;place-items:center !important;border-radius:5px !important
  }
  .global-search svg{width:16px !important;height:16px !important}
  .global-search span,.global-search kbd{display:none !important}
  .contexts{display:none !important}
  #customizeBtn,#notifyBtn{display:grid}

  /* Mobile sidebar */
  .sidebar{
    width:min(340px,92vw) !important;
  }
  .sidebar-head{
    height:58px !important;flex:0 0 58px !important;padding:0 10px !important;gap:9px !important
  }
  .brand{width:36px !important;height:36px !important;flex-basis:36px !important;border-radius:8px !important;font-size:13px !important}
  .brand-copy b{font-size:14px !important}.brand-copy small{font-size:10.5px !important}
  .nav-toggle{width:34px !important;height:34px !important;flex-basis:34px !important;border-radius:5px !important}
  .mobile-sidebar-tools{
    display:grid !important;grid-template-columns:70px minmax(0,1fr);gap:7px;padding:7px 9px;
    border-bottom:1px solid var(--line);background:var(--surface)
  }
  .mobile-launcher-btn,.mobile-search-btn{
    min-height:44px;border:1px solid var(--line);border-radius:5px;background:var(--surface2);color:var(--text);
    display:flex;align-items:center;gap:8px;padding:0 9px;text-align:left
  }
  .mobile-launcher-btn{justify-content:center;flex-direction:column;gap:2px;padding:4px}
  .mobile-tool-icon{width:24px;height:24px;border-radius:5px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center;flex:0 0 24px}
  .mobile-tool-icon svg{width:14px;height:14px}
  .mobile-tool-label{font-size:9px;font-weight:700;color:var(--muted)}
  .mobile-search-copy{min-width:0;flex:1}.mobile-search-copy b{display:block;font-size:11.5px}.mobile-search-copy small{display:block;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .mobile-search-shortcut{font-size:14px;color:var(--muted)}
  .sidebar-search-wrap{display:none !important}
  .sidebar-compact-tools{display:none !important}

  /* Menu tree is visible in mobile drawer and has compact indentation. */
  .nav-node.open > .nav-children{display:block !important}
  .nav-children.level-2{padding-left:34px !important}
  .nav-children.level-3{padding-left:20px !important}
  .nav-sub-link{font-size:12px !important;min-height:34px !important}
  .nav-l3-link{font-size:11.3px !important;min-height:30px !important}
  .nav-arr svg{opacity:1 !important}

  /* User area: avatar + name + role + chevron, never centered alone. */
  .sidebar-footer{padding:8px !important;background:var(--surface) !important}
  .sidebar .user-btn,
  body:not(.nav-open) .sidebar .user-btn,
  body.mobile-nav .sidebar .user-btn{
    width:100% !important;height:52px !important;border-radius:5px !important;padding:0 9px !important;
    justify-content:flex-start !important;background:var(--surface2) !important
  }
  .sidebar .user-avatar-wrap .user-avatar,
  body:not(.nav-open) .sidebar .user-avatar-wrap .user-avatar{
    width:34px !important;height:34px !important;font-size:11px !important
  }
  .sidebar .user-copy,
  body:not(.nav-open) .sidebar .user-copy,
  body.mobile-nav .sidebar .user-copy{
    display:block !important;opacity:1 !important;transform:none !important;min-width:0 !important;flex:1 !important
  }
  .sidebar .user-copy b{display:block !important;font-size:12.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar .user-copy small{display:block !important;font-size:10px !important}
  .sidebar .user-more,
  body:not(.nav-open) .sidebar .user-more,
  body.mobile-nav .sidebar .user-more{
    display:grid !important;opacity:1 !important;width:28px !important;height:28px !important;flex:0 0 28px !important
  }
  .sidebar .online-dot{display:block !important}

  /* Search and Launcher are mobile sheets/cards. */
  #searchPop,#launcherPop{
    left:8px !important;right:8px !important;top:56px !important;width:auto !important;max-height:calc(100dvh - 66px) !important;
    overflow:auto !important;border-radius:5px !important
  }
  .launcher-grid-v31{grid-template-columns:1fr 1fr !important}
}

/* Settings becomes a true responsive sheet. 900 catches small tablets too. */
@media(max-width:900px){
  .settings-modal{padding:0 !important;align-items:stretch !important;justify-content:stretch !important}
  .settings-shell.premium-settings-shell{
    width:100vw !important;max-width:none !important;height:100dvh !important;max-height:none !important;
    border-radius:0 !important;border:0 !important;
    display:flex !important;flex-direction:column !important;grid-template-columns:none !important;
    overflow:hidden !important
  }
  .settings-sidebar{
    flex:0 0 auto !important;border-right:0 !important;border-bottom:1px solid var(--line) !important;
    background:var(--surface) !important;display:block !important;min-width:0 !important
  }
  .settings-close-row{
    height:56px !important;padding:7px 10px !important;border-bottom:1px solid var(--line) !important;gap:8px !important
  }
  .settings-close{width:34px !important;height:34px !important;flex:0 0 34px !important;border-radius:5px !important}
  .settings-brand .sb-mark{width:32px !important;height:32px !important;border-radius:6px !important}
  .settings-brand b{font-size:12.5px !important}.settings-brand small{font-size:9.5px !important}
  .settings-nav{
    display:flex !important;flex-direction:row !important;gap:5px !important;padding:6px 8px !important;
    overflow-x:auto !important;overflow-y:hidden !important;white-space:nowrap !important;scrollbar-width:none
  }
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav button{
    flex:0 0 auto !important;width:auto !important;height:34px !important;padding:0 10px !important;border:1px solid var(--line) !important;
    border-radius:5px !important;background:var(--surface2) !important;font-size:10.5px !important;gap:6px !important
  }
  .settings-nav button.active{background:var(--primarySoft) !important;color:var(--primary) !important;border-color:color-mix(in srgb,var(--primary) 22%,var(--line)) !important}
  .settings-nav .si{width:18px !important}.settings-nav .si svg{width:14px !important;height:14px !important}
  .settings-side-foot{display:none !important}
  .settings-content{
    flex:1 1 auto !important;min-height:0 !important;width:100% !important;padding:14px 12px 26px !important;overflow-y:auto !important;overflow-x:hidden !important
  }
  .settings-pane{width:100% !important;max-width:760px !important;margin:0 auto !important}
  .settings-pane-head{margin-bottom:10px !important}.settings-pane-head h2{font-size:18px !important}.settings-pane-head p{font-size:10.5px !important;margin-top:3px}
  .settings-banner{
    grid-template-columns:34px minmax(0,1fr) !important;gap:9px !important;padding:11px !important;border-radius:5px !important;margin-bottom:8px !important
  }
  .settings-banner .btn{grid-column:1/-1;width:100%}
  .settings-row{
    min-height:0 !important;padding:11px 2px !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:8px !important
  }
  .settings-row > span:first-child{font-size:12.5px !important}
  .settings-row > span:first-child small{display:block;font-size:9.8px !important;margin-top:3px !important}
  .setting-inline{justify-content:flex-start !important;gap:5px !important}
  .mini-opt{height:32px !important;padding:0 10px !important;font-size:10.5px !important;border-radius:5px !important}
  .theme-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important}
  .theme-preset{min-height:43px !important;border-radius:5px !important}
  .color-editor{grid-template-columns:1fr 1fr !important;gap:6px !important}
  .color-editor .btn{grid-column:1/-1}
  .settings-control-preview{grid-template-columns:1fr !important}
  .account-settings-card{display:grid !important;grid-template-columns:44px minmax(0,1fr) !important;gap:9px !important}
  .account-settings-card .btn{grid-column:1/-1;width:100%}
}
@media(max-width:520px){
  .settings-content{padding-left:9px !important;padding-right:9px !important}
  .theme-preset-grid{grid-template-columns:1fr 1fr !important}
  .color-editor{grid-template-columns:1fr !important}
  .color-editor .btn{grid-column:auto}
  .launcher-grid-v31{grid-template-columns:1fr !important}
}

/* Dark mobile surfaces stay legible. */
body.dark .mobile-sidebar-tools{background:#121d22;border-color:var(--line)}
body.dark .mobile-launcher-btn,body.dark .mobile-search-btn{background:#17252c;border-color:#31444a}
body.dark .v31-pop-title{background:linear-gradient(180deg,#17252c,#132027)}


/* V31 mobile popovers must sit above the navigation backdrop. */
.search-pop-v31,.launcher-pop-v31{z-index:365 !important}
@media(max-width:780px){body.mobile-nav .pop{z-index:365 !important}}


/* ==========================================================
   V32 OUTLOOK BLUE DEFAULT THEME
   Reference blue sampled from the supplied Outlook image.
   ========================================================== */
body[data-theme="outlook"] .brand{
  background:linear-gradient(145deg,#3474d1,#4d6fdc);
}
body[data-theme="outlook"] .nav-link.active{
  background:linear-gradient(90deg,#edf4ff,#e6f0ff) !important;
  color:#245fb2 !important;
}
body[data-theme="outlook"] .nav-link.active:before{
  background:linear-gradient(180deg,#3474d1,#245fb2) !important;
}
body[data-theme="outlook"] .nav-link:hover,
body[data-theme="outlook"] .nav-sub-link:hover,
body[data-theme="outlook"] .nav-l3-link:hover{
  color:#245fb2;
}
body[data-theme="outlook"] .btn.primary,
body[data-theme="outlook"] .quick-create,
body[data-theme="outlook"] .profile-primary{
  background:linear-gradient(180deg,#3c7ddb,#2f6cc7) !important;
  border-color:#2f6cc7 !important;
}
body[data-theme="outlook"] .hero{
  background:linear-gradient(110deg,#3474d1 0%,#3e78d6 55%,#5a8ce0 100%) !important;
}
body[data-theme="outlook"] .mobile-tool-icon,
body[data-theme="outlook"] .v31-pop-icon,
body[data-theme="outlook"] .nav-sub-link:hover .nav-sub-icon{
  color:#3474d1;
}
body[data-theme="outlook"] .setting-segment button.active,
body[data-theme="outlook"] .mini-opt.active,
body[data-theme="outlook"] .theme-preset.active{
  color:#245fb2 !important;
}
body.dark[data-theme="outlook"] .nav-link.active{
  background:linear-gradient(90deg,#1d3553,#1b304b) !important;
  color:#8cb9f6 !important;
}
body.dark[data-theme="outlook"] .hero{
  background:linear-gradient(110deg,#17365f 0%,#1c477c 58%,#225a94 100%) !important;
}


/* V33 Fluent-inspired theme library */
body[data-theme="fluent-default"]{--primary:#3b6fc4;--primary2:#2f5eaa;--primarySoft:#eaf1fb;--accent:#5b82c9;--accentSoft:#edf3fc}
body[data-theme="access"]{--primary:#a4373a;--primary2:#8c2e31;--primarySoft:#f8e9ea;--accent:#c74f52;--accentSoft:#fbeff0}
body[data-theme="booking"]{--primary:#2fa69a;--primary2:#248c82;--primarySoft:#e5f6f4;--accent:#46b5aa;--accentSoft:#eaf8f7}
body[data-theme="exchange"]{--primary:#3976d3;--primary2:#2f63b4;--primarySoft:#eaf2fd;--accent:#4e8ce2;--accentSoft:#eef5fe}
body[data-theme="excel"]{--primary:#217346;--primary2:#185c37;--primarySoft:#e6f3eb;--accent:#33a06f;--accentSoft:#eaf7f0}
body[data-theme="groupme"]{--primary:#42a5df;--primary2:#318bc0;--primarySoft:#e8f5fc;--accent:#62b9e8;--accentSoft:#edf8fd}
body[data-theme="loop"]{--primary:#6c63d9;--primary2:#574fbd;--primarySoft:#efedff;--accent:#8d72e6;--accentSoft:#f3efff}
body[data-theme="onenote"]{--primary:#7719aa;--primary2:#61158a;--primarySoft:#f3e8f8;--accent:#9b43c4;--accentSoft:#f7eefb}
body[data-theme="powerpoint"]{--primary:#c43e1c;--primary2:#a93318;--primarySoft:#faece8;--accent:#e05b35;--accentSoft:#fdf0ec}
body[data-theme="sharepoint"]{--primary:#038387;--primary2:#026d70;--primarySoft:#e4f4f4;--accent:#16a4a8;--accentSoft:#e9f8f8}
body[data-theme="teams"]{--primary:#5b5fc7;--primary2:#4a4fad;--primarySoft:#efeffc;--accent:#7b83eb;--accentSoft:#f2f3fe}
body[data-theme="word"]{--primary:#2b579a;--primary2:#23487f;--primarySoft:#e8eef7;--accent:#3f75bd;--accentSoft:#edf3fb}
body[data-theme="planner"]{--primary:#31752f;--primary2:#275f25;--primarySoft:#eaf4e9;--accent:#4d994a;--accentSoft:#eef7ed}
body[data-theme="forms"]{--primary:#038387;--primary2:#026d70;--primarySoft:#e5f4f4;--accent:#6b69d6;--accentSoft:#efeffc}
body[data-theme="yammer"]{--primary:#106ebe;--primary2:#0d5da2;--primarySoft:#e8f2fb;--accent:#29a0e6;--accentSoft:#edf8fe}

body.dark[data-theme="fluent-default"]{--primary:#79a7ec;--primary2:#9abcf1;--primarySoft:#1b2e48;--accent:#8fb1ea;--accentSoft:#20324a}
body.dark[data-theme="access"]{--primary:#e17578;--primary2:#ef9799;--primarySoft:#422426;--accent:#ef8d90;--accentSoft:#482a2c}
body.dark[data-theme="booking"]{--primary:#62cfc4;--primary2:#87ddd5;--primarySoft:#173a38;--accent:#7bd8cf;--accentSoft:#193e3b}
body.dark[data-theme="exchange"]{--primary:#74a8ee;--primary2:#9cc1f4;--primarySoft:#192f4c;--accent:#89b7f2;--accentSoft:#1d3552}
body.dark[data-theme="excel"]{--primary:#5dbb84;--primary2:#83cda0;--primarySoft:#173729;--accent:#77c998;--accentSoft:#193d2d}
body.dark[data-theme="groupme"]{--primary:#77c3ec;--primary2:#9bd5f1;--primarySoft:#173345;--accent:#8bcff0;--accentSoft:#19394b}
body.dark[data-theme="loop"]{--primary:#9d96f2;--primary2:#b8b2f7;--primarySoft:#252348;--accent:#b09af5;--accentSoft:#29244e}
body.dark[data-theme="onenote"]{--primary:#c87be5;--primary2:#dba4ee;--primarySoft:#3b2346;--accent:#d596ea;--accentSoft:#42264d}
body.dark[data-theme="powerpoint"]{--primary:#f08b6e;--primary2:#f6aa95;--primarySoft:#45271f;--accent:#f2997f;--accentSoft:#4b2a22}
body.dark[data-theme="sharepoint"]{--primary:#55c5c8;--primary2:#7ed5d8;--primarySoft:#14383a;--accent:#70d0d2;--accentSoft:#173e40}
body.dark[data-theme="teams"]{--primary:#9296ec;--primary2:#afb2f2;--primarySoft:#252747;--accent:#a9aff8;--accentSoft:#292c4d}
body.dark[data-theme="word"]{--primary:#72a3df;--primary2:#96bcea;--primarySoft:#192d48;--accent:#89b0e4;--accentSoft:#1c334f}
body.dark[data-theme="planner"]{--primary:#7ac878;--primary2:#9ad998;--primarySoft:#1d371d;--accent:#8ed38b;--accentSoft:#213d20}
body.dark[data-theme="forms"]{--primary:#61c7c9;--primary2:#87d9db;--primarySoft:#15383a;--accent:#9d9bea;--accentSoft:#282747}
body.dark[data-theme="yammer"]{--primary:#70a9df;--primary2:#96c0e9;--primarySoft:#192e46;--accent:#70c0ee;--accentSoft:#18364a}


/* Fluent compose/body surface finishing */
body[data-surface="fluent"]{--office-bg:#f3f3f3;--office-canvas:#fff;--office-border:#d7d7d7;--office-divider:#e8e8e8;--office-shadow:0 2px 8px rgba(0,0,0,.08)}
body[data-surface="fluent"] .work{background:linear-gradient(180deg,#f8f8f8 0,#f3f3f3 110px,#f3f3f3 100%) !important}
body[data-surface="fluent"] .panel,
body[data-surface="fluent"] .control-card,
body[data-surface="fluent"] .kpi,
body[data-surface="fluent"] .quick,
body[data-surface="fluent"] .transaction-card{background:#fff !important;border:1px solid var(--office-border) !important;box-shadow:var(--office-shadow) !important;border-radius:5px !important}
body[data-surface="fluent"] .panel-head,
body[data-surface="fluent"] .control-card>.panel-head{background:#fff !important;border-bottom:1px solid var(--office-divider) !important}
body[data-surface="fluent"] .page-head{background:transparent !important;border:0 !important;box-shadow:none !important}
body[data-surface="fluent"] .aj-box{background:#fff !important;border-color:#cfcfcf !important}
body[data-surface="fluent"] .btn{background:#fff;border:1px solid #d2d2d2 !important;box-shadow:0 1px 2px rgba(0,0,0,.04)}
body[data-surface="fluent"] .btn.primary{color:#fff !important;border-color:var(--primary) !important;background:linear-gradient(180deg,var(--primary),var(--primary2)) !important}
body[data-surface="fluent"] .select-menu,
body[data-surface="fluent"] .search-menu,
body[data-surface="fluent"] .multi-menu,
body[data-surface="fluent"] .pop,
body[data-surface="fluent"] .dialog,
body[data-surface="fluent"] .drawer,
body[data-surface="fluent"] .settings-shell,
body[data-surface="fluent"] .profile-edit-card{background:#fff !important;border:1px solid #cfcfcf !important;box-shadow:0 14px 32px rgba(0,0,0,.16) !important;border-radius:5px !important}
body[data-surface="fluent"] .menu-option:hover,
body[data-surface="fluent"] .multi-option:hover{background:#f3f3f3 !important}
body[data-surface="fluent"] .menu-option.selected,
body[data-surface="fluent"] .multi-option.selected{background:#ededed !important;box-shadow:inset 3px 0 0 var(--primary)}

body.dark[data-surface="fluent"]{--office-bg:#11171a;--office-canvas:#172126;--office-border:#35434a;--office-divider:#2b383e;--office-shadow:0 3px 12px rgba(0,0,0,.22)}
body.dark[data-surface="fluent"] .work{background:linear-gradient(180deg,#10171b 0,#11191d 110px,#11191d 100%) !important}
body.dark[data-surface="fluent"] .panel,
body.dark[data-surface="fluent"] .control-card,
body.dark[data-surface="fluent"] .kpi,
body.dark[data-surface="fluent"] .quick,
body.dark[data-surface="fluent"] .transaction-card{background:#172126 !important;border-color:#35434a !important}
body.dark[data-surface="fluent"] .panel-head,
body.dark[data-surface="fluent"] .control-card>.panel-head{background:#172126 !important;border-color:#2b383e !important}
body.dark[data-surface="fluent"] .aj-box,
body.dark[data-surface="fluent"] .btn,
body.dark[data-surface="fluent"] .select-menu,
body.dark[data-surface="fluent"] .search-menu,
body.dark[data-surface="fluent"] .multi-menu,
body.dark[data-surface="fluent"] .pop,
body.dark[data-surface="fluent"] .dialog,
body.dark[data-surface="fluent"] .drawer,
body.dark[data-surface="fluent"] .settings-shell,
body.dark[data-surface="fluent"] .profile-edit-card{background:#182329 !important;border-color:#3a4950 !important}
body.dark[data-surface="fluent"] .menu-option:hover,
body.dark[data-surface="fluent"] .multi-option:hover{background:#202c32 !important}
body.dark[data-surface="fluent"] .menu-option.selected,
body.dark[data-surface="fluent"] .multi-option.selected{background:#24323a !important}


/* ==========================================================
   V34 Microsoft app theme extensions
   ========================================================== */
body[data-theme="office"]{--primary:#d24726;--primary2:#b63b1d;--primarySoft:#fbece8;--accent:#e27a5e;--accentSoft:#fdf3f1}
body[data-theme="onedrive"]{--primary:#2364cf;--primary2:#1c53ab;--primarySoft:#e8f0fd;--accent:#4b87eb;--accentSoft:#eff5fe}
body[data-theme="powerapps"]{--primary:#742774;--primary2:#5f1f5f;--primarySoft:#f3e8f3;--accent:#9a4f9a;--accentSoft:#f8eef8}
body[data-theme="powerbi"]{--primary:#e0b300;--primary2:#c69d00;--primarySoft:#fff7d8;--accent:#f0c833;--accentSoft:#fff8e5}
body[data-theme="project"]{--primary:#31752f;--primary2:#285f26;--primarySoft:#eaf4e9;--accent:#4d994a;--accentSoft:#eff7ee}
body[data-theme="publisher"]{--primary:#2d7d72;--primary2:#25655d;--primarySoft:#e6f4f2;--accent:#47998f;--accentSoft:#eef8f7}
body[data-theme="skype"]{--primary:#3976d3;--primary2:#2e61ae;--primarySoft:#eaf2fd;--accent:#5d97ea;--accentSoft:#eff6fe}
body[data-theme="stream"]{--primary:#b92d57;--primary2:#9b2448;--primarySoft:#fae8ee;--accent:#d65b81;--accentSoft:#fdf0f5}
body[data-theme="sway"]{--primary:#3f8f7b;--primary2:#347564;--primarySoft:#e8f5f1;--accent:#58a894;--accentSoft:#eef8f5}
body[data-theme="visio"]{--primary:#4558b0;--primary2:#39488f;--primarySoft:#ebedf9;--accent:#6476cb;--accentSoft:#f0f2fb}
body[data-theme="windows"]{--primary:#3778d6;--primary2:#2b63b4;--primarySoft:#eaf2fd;--accent:#5c98ea;--accentSoft:#eff6fe}

body.dark[data-theme="office"]{--primary:#f2977e;--primary2:#f7b29f;--primarySoft:#47251b;--accent:#f0a68f;--accentSoft:#4d2a20}
body.dark[data-theme="onedrive"]{--primary:#7ea9ef;--primary2:#9cc1f6;--primarySoft:#192d49;--accent:#8fbcf4;--accentSoft:#1d3450}
body.dark[data-theme="powerapps"]{--primary:#c985c9;--primary2:#dba7db;--primarySoft:#3d213d;--accent:#d69dd6;--accentSoft:#432543}
body.dark[data-theme="powerbi"]{--primary:#f2d04e;--primary2:#f6de7a;--primarySoft:#4b3e12;--accent:#f3d862;--accentSoft:#544514}
body.dark[data-theme="project"]{--primary:#8bd089;--primary2:#a5df9f;--primarySoft:#1d381d;--accent:#9ad797;--accentSoft:#223f22}
body.dark[data-theme="publisher"]{--primary:#7ec8bd;--primary2:#9ad8d0;--primarySoft:#173834;--accent:#8fd0c6;--accentSoft:#1a3e39}
body.dark[data-theme="skype"]{--primary:#88b1f0;--primary2:#a6c6f5;--primarySoft:#1a2f4b;--accent:#9cc0f3;--accentSoft:#1d3551}
body.dark[data-theme="stream"]{--primary:#ea7398;--primary2:#f196b1;--primarySoft:#472334;--accent:#ef8baa;--accentSoft:#4d2638}
body.dark[data-theme="sway"]{--primary:#8dd0c1;--primary2:#a8ddd1;--primarySoft:#193733;--accent:#9bd7c8;--accentSoft:#1c3d38}
body.dark[data-theme="visio"]{--primary:#97a6ea;--primary2:#b1bcf2;--primarySoft:#222947;--accent:#a8b3ef;--accentSoft:#272e4d}
body.dark[data-theme="windows"]{--primary:#8ab4f0;--primary2:#a8c9f5;--primarySoft:#182f4b;--accent:#9cc0f3;--accentSoft:#1d3551}

/* V34 Modern component styles */
.theme-preset-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.theme-preset{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.theme-preset:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.08)}
body.dark .theme-preset:hover{box-shadow:0 10px 20px rgba(0,0,0,.22)}
.v34-surface-card{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.v34-helper{font-size:11px;color:var(--muted);line-height:1.55}
.v34-infoblock{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface2),var(--surface));border-radius:var(--control-radius,var(--r))}
.v34-infoblock .dot{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:var(--primarySoft);color:var(--primary);font-weight:800;flex:0 0 auto}
.v34-menu-wrap,.v34-split-wrap,.v34-overflow-wrap,.v34-combo{position:relative}
.v34-flyout{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--control-radius,var(--r));box-shadow:var(--shadow-strong,0 14px 28px rgba(0,0,0,.16));display:none;z-index:80}
.v34-flyout.show{display:block;animation:v34fade .16s ease}
@keyframes v34fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.v34-flyout button,.v34-list-option,.v34-combo-option{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:calc(var(--control-radius,var(--r)) - 1px);text-align:left;color:var(--text);cursor:pointer;font-size:12px}
.v34-flyout button:hover,.v34-list-option:hover,.v34-combo-option:hover{background:var(--primarySoft)}
.v34-flyout button small,.v34-list-option small,.v34-combo-option small{display:block;color:var(--muted);font-size:10px}
.v34-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:var(--primarySoft);color:var(--primary);font-size:11px;font-weight:700}
.v34-split{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--control-radius,var(--r));overflow:hidden;background:var(--surface)}
.v34-split>.btn{border:0 !important;border-radius:0 !important;box-shadow:none !important}
.v34-split>.btn + .btn{border-left:1px solid var(--line) !important;min-width:38px;padding-inline:0}
.v34-listbox{display:grid;gap:6px}
.v34-list-option{border:1px solid var(--line);background:var(--surface2)}
.v34-list-option.active{background:var(--primarySoft);border-color:color-mix(in srgb, var(--primary) 45%, var(--line));box-shadow:inset 3px 0 0 var(--primary)}
.v34-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.v34-select-native{width:100%;height:36px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--control-radius,var(--r));font-size:12px;color:var(--text)}
.v34-msg{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:var(--control-radius,var(--r));border:1px solid var(--line);background:var(--surface)}
.v34-msg b{display:block;margin-bottom:2px}
.v34-msg.info{border-color:#9bb5ea;background:#f5f8ff}
.v34-msg.warn{border-color:#f0b28a;background:#fff7f1}
.v34-msg.success{border-color:#9ac89b;background:#f2fbf2}
.v34-msg.error{border-color:#ef9b9b;background:#fff3f3}
body.dark .v34-msg.info{background:#1b2639;border-color:#3c5484}
body.dark .v34-msg.warn{background:#38291d;border-color:#7c5a3f}
body.dark .v34-msg.success{background:#1d3020;border-color:#456d4a}
body.dark .v34-msg.error{background:#382021;border-color:#7a4848}
.v34-progress{height:10px;border-radius:999px;background:color-mix(in srgb, var(--line) 60%, transparent);overflow:hidden}
.v34-progress>i{display:block;height:100%;width:42%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;transition:width .25s ease}
.v34-progress-card{display:grid;gap:10px}
.v34-spinner{width:22px;height:22px;border:3px solid color-mix(in srgb, var(--primary) 24%, transparent);border-top-color:var(--primary);border-radius:50%;animation:v34spin .8s linear infinite}
@keyframes v34spin{to{transform:rotate(360deg)}}
.v34-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.v34-overlay-note{padding:8px 10px;border:1px dashed var(--line);border-radius:var(--control-radius,var(--r));font-size:11px;color:var(--muted)}
.v34-color-field{display:grid;gap:6px}
.v34-color-field input[type=color]{width:46px;height:32px;border:1px solid var(--line);border-radius:8px;background:none;padding:0}
.v34-control-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.v34-overflow-bar{display:flex;gap:8px;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:7px 9px;background:var(--surface2);border-radius:var(--control-radius,var(--r))}
.v34-pulse{animation:v34pulse 1.4s ease-in-out infinite}
@keyframes v34pulse{0%,100%{opacity:1}50%{opacity:.55}}


/* ==========================================================
   V36 VERIFIED CONTROL STUDIO + CLEAN HEADER
   ========================================================== */
.mobile-sidebar-tools,.sidebar-search-wrap,.sidebar-compact-tools{display:none !important}
.topbar{gap:8px !important}.header-launcher,.header-search{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:10px!important}.header-launcher svg,.header-search svg{width:18px!important;height:18px!important}.header-search:hover,.header-launcher:hover{background:var(--primarySoft)!important;color:var(--primary)!important}
.v36-pop-title{min-height:58px;padding:10px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2))}.v36-pop-title>span:nth-child(2){min-width:0;flex:1}.v36-pop-title b{display:block;font-size:14px}.v36-pop-title small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.v36-pop-icon{width:36px;height:36px;border-radius:9px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.v36-pop-icon svg{width:18px;height:18px}
.v36-launcher-search{height:40px;margin:9px 10px 6px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);display:flex;align-items:center;gap:8px;padding:0 10px}.v36-launcher-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}.v36-launcher-search svg{width:16px;height:16px;color:var(--muted)}.v36-launcher-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.v36-launcher-search kbd{font-size:9px;border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:2px 5px;color:var(--muted)}
.v36-launcher-filters{display:flex;gap:6px;padding:0 10px 9px;overflow:auto;scrollbar-width:none}.v36-launcher-filters::-webkit-scrollbar{display:none}.v36-launcher-filters button{white-space:nowrap;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:750}.v36-launcher-filters button.active,.v36-launcher-filters button:hover{background:var(--primarySoft);border-color:color-mix(in srgb,var(--primary) 25%,var(--line));color:var(--primary)}
.launcher-grid-v31{padding:0 10px 10px!important}.launcher-grid-v31 .app-card{min-height:72px!important;border-radius:10px!important;padding:11px!important}.launcher-grid-v31 .app-card b{font-size:12.5px!important}.launcher-grid-v31 .app-card small{font-size:10.5px!important;line-height:1.4!important}
#page-controls .page-head h1{font-size:21px!important}#page-controls .page-head p{font-size:13px!important}#page-controls .control-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}#page-controls .control-toolbar .btn{height:38px;padding:0 14px;font-size:12.5px;font-weight:800;border-radius:9px!important}#page-controls .control-toolbar .btn.active{background:var(--primary);color:#fff;border-color:var(--primary)!important;box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 20%,transparent)}
#page-controls .control-grid{gap:10px!important}#page-controls .control-card{border-radius:10px!important;overflow:visible!important;box-shadow:0 4px 14px rgba(18,37,44,.05)!important}#page-controls .panel-head{min-height:48px!important;padding:0 13px!important;border-radius:10px 10px 0 0}#page-controls .panel-head b{font-size:14px!important}#page-controls .panel-head small{font-size:10.5px!important;color:var(--muted);margin-left:6px}#page-controls .control-body{padding:13px!important;font-size:12.5px!important;line-height:1.45}
.v36-muted{font-size:11px;color:var(--muted)}.v36-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.v36-icon-btn{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);display:grid;place-items:center;font-size:15px;cursor:pointer}.v36-icon-btn:hover{background:var(--primarySoft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 25%,var(--line))}
.v36-appbar{min-height:44px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(180deg,var(--surface),var(--surface2));display:flex;align-items:center;gap:9px;padding:5px 7px}.v36-appbar>b{font-size:13px}.v36-breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.v36-breadcrumb button{border:0;background:transparent;color:var(--primary);font-size:12px;padding:0}.v36-breadcrumb span{color:var(--muted)}
.v36-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}.v36-tabs button{min-height:34px;padding:0 11px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:750;position:relative}.v36-tabs button.active{color:var(--primary)}.v36-tabs button.active:after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;background:var(--primary);border-radius:3px}.v36-tab-panel{min-height:58px;padding:11px;border:1px solid var(--line);border-top:0;border-radius:0 0 9px 9px;background:var(--surface2);display:grid;gap:3px}.v36-tab-panel b{font-size:12.5px}.v36-tab-panel span{font-size:11px;color:var(--muted)}
.v36-accordion{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:7px}.v36-accordion-head{width:100%;min-height:38px;border:0;background:var(--surface2);padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:var(--text);font-size:12px;font-weight:800}.v36-accordion-body{display:none;padding:10px;font-size:11.5px;color:var(--muted);background:var(--surface)}.v36-accordion.open .v36-accordion-body{display:block}.v36-tree{border:1px solid var(--line);border-radius:9px;padding:6px;background:var(--surface2)}.v36-tree-row{width:100%;min-height:31px;border:0;background:transparent;text-align:left;padding:0 7px;border-radius:7px;color:var(--text);font-size:11.8px}.v36-tree-row:hover{background:var(--primarySoft);color:var(--primary)}.v36-tree-row.nested{padding-left:28px;color:var(--muted)}
.v36-stepper{display:flex;align-items:center;margin-bottom:12px}.v36-stepper button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:11px;font-weight:800;position:relative}.v36-stepper button span{position:absolute;top:38px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;font-weight:650}.v36-stepper button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 5px 12px color-mix(in srgb,var(--primary) 25%,transparent)}.v36-stepper i{height:2px;flex:1;background:var(--line)}.v36-pagination{display:flex;gap:5px;margin-bottom:8px}.v36-pagination button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text)}.v36-pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.v36-splitter{display:grid;grid-template-columns:1fr 7px 1fr;height:104px;border:1px solid var(--line);border-radius:9px;overflow:hidden}.v36-multisplit{display:grid;grid-template-columns:1fr 7px 1fr 7px 1fr;height:104px;border:1px solid var(--line);border-radius:9px;overflow:hidden}.v36-splitter .pane,.v36-multisplit .pane{padding:10px;background:var(--surface2);font-size:11.5px}.splitter-bar{background:color-mix(in srgb,var(--primary) 20%,var(--line));cursor:col-resize;position:relative}.splitter-bar:hover{background:var(--primary)}
.v36-flyout-host{position:relative;display:inline-block}.v36-flyout{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:120;width:240px;padding:6px;border:1px solid var(--line);background:var(--surface);border-radius:9px;box-shadow:0 16px 34px rgba(0,0,0,.15)}.v36-flyout.show{display:block;animation:pop .12s ease}.v36-flyout.right{left:auto;right:0}.v36-flyout.combo{left:0;right:0;width:auto}.v36-flyout button{width:100%;border:0;background:transparent;border-radius:7px;text-align:left;padding:8px 9px;color:var(--text);display:grid;gap:2px}.v36-flyout button:hover{background:var(--primarySoft)}.v36-flyout button b{font-size:11.8px}.v36-flyout button small{font-size:10px;color:var(--muted)}.v36-split-btn{display:flex}.v36-split-btn .btn:first-child{border-radius:8px 0 0 8px!important}.v36-split-btn .btn:last-child{border-radius:0 8px 8px 0!important;border-left-color:rgba(255,255,255,.25)!important;min-width:38px}.v36-overflow-bar{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);padding:6px}.v36-chip{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--primarySoft);color:var(--primary);font-size:10.5px;font-weight:750}
.v36-message-stack{display:grid;gap:7px}.v36-msg{display:grid;grid-template-columns:24px 1fr 28px;align-items:start;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface2)}.v36-msg>span{font-size:16px}.v36-msg div{display:grid;gap:2px}.v36-msg b{font-size:11.8px}.v36-msg small{font-size:10.5px;color:var(--muted)}.v36-msg button{border:0;background:transparent;color:var(--muted);font-size:17px}.v36-msg.info{border-color:#a7bee8}.v36-msg.warn{border-color:#e9b080}.v36-msg.success{border-color:#91c99a}.v36-msg.error{border-color:#e69d9d}.v36-progress-line{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:11.5px}.v36-spinner{width:22px;height:22px;border:3px solid color-mix(in srgb,var(--primary) 20%,var(--line));border-top-color:var(--primary);border-radius:50%;animation:v36spin .8s linear infinite}@keyframes v36spin{to{transform:rotate(360deg)}}.v36-progress{height:9px;border-radius:999px;background:var(--surface3);overflow:hidden;margin-bottom:8px}.v36-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;transition:width .2s ease}.v36-skeleton{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface2),var(--surface3),var(--surface2));background-size:200% 100%;animation:v36sh 1.25s infinite;margin:7px 0}.v36-skeleton.avatar{width:38px;height:38px;border-radius:50%}.v36-skeleton.w60{width:60%}.v36-skeleton.w80{width:80%}@keyframes v36sh{to{background-position:-200% 0}}.v36-context-zone{height:90px;border:1px dashed var(--line2);border-radius:9px;background:var(--surface2);display:grid;place-items:center;font-size:11.5px;color:var(--muted);position:relative}.v36-splash-mini{margin-top:10px;border:1px solid var(--line);border-radius:9px;padding:10px;display:flex;gap:9px;align-items:center;background:linear-gradient(135deg,var(--primarySoft),var(--surface))}.v36-splash-mini>span{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--accent));color:white;display:grid;place-items:center;font-weight:900}.v36-splash-mini div{display:grid}.v36-splash-mini b{font-size:12px}.v36-splash-mini small{font-size:10px;color:var(--muted)}.v36-pull{height:90px;border:1px dashed var(--line2);border-radius:9px;background:var(--surface2);display:grid;place-items:center;align-content:center;gap:3px;touch-action:none}.v36-pull>span{font-size:18px;color:var(--primary)}.v36-pull b{font-size:11.8px}.v36-pull small{font-size:10px;color:var(--muted)}
.v36-sort-list{display:grid;gap:6px}.v36-sort-list .sort-item{min-height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);display:flex;align-items:center;gap:8px;padding:0 9px;font-size:11.5px}.v36-sort-list .sort-item .handle{color:var(--muted);cursor:grab}.v36-upload{min-height:110px;border:1px dashed color-mix(in srgb,var(--primary) 40%,var(--line2));border-radius:9px;background:linear-gradient(180deg,var(--surface2),var(--surface));display:grid;place-items:center;align-content:center;gap:3px;cursor:pointer}.v36-upload>span{font-size:22px;color:var(--primary)}.v36-upload b{font-size:12px}.v36-upload small,.v36-file-status{font-size:10px;color:var(--muted)}.v36-file-status{margin-top:7px}.v36-toolbar{min-height:43px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);display:flex;align-items:center;gap:5px;padding:5px}.v36-toolbar button{width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:var(--text)}.v36-toolbar button:hover{background:var(--primarySoft);color:var(--primary)}.v36-toolbar .separator{width:1px;height:23px;background:var(--line);margin:0 2px}.v36-dual{display:grid;grid-template-columns:1fr 38px 1fr;gap:7px}.v36-dual .dual-box{min-height:120px;border:1px solid var(--line);border-radius:9px;padding:5px;display:grid;align-content:start;gap:4px;background:var(--surface2)}.v36-dual .dual-item{width:100%;min-height:32px;border:0;border-radius:7px;text-align:left;background:var(--surface);color:var(--text);font-size:11px;padding:0 8px}.v36-dual .dual-item.selected{background:var(--primarySoft);color:var(--primary);box-shadow:inset 3px 0 0 var(--primary)}.v36-dual .dual-actions{display:grid;place-content:center;gap:5px}.v36-dual .dual-actions button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:18px;color:var(--muted)}.v36-query-row{display:grid;grid-template-columns:1fr 1fr 1.2fr 32px;gap:5px;margin-bottom:6px}.v36-query-row select,.v36-query-row input{min-width:0;height:35px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:0 8px;font-size:10.8px}.v36-color-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:9px}.v36-color-row input{width:46px;height:38px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--surface)}.v36-color-row div{display:grid;gap:2px}.v36-color-row b{font-size:12px}.v36-color-row small{font-size:10px;color:var(--muted)}.v36-signature{width:100%;height:120px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);display:block;margin-bottom:8px}.v36-code-row{display:flex;align-items:center;gap:12px}.v36-code-row b{font-size:13px}.v36-code-row small{font-size:10px;color:var(--muted)}.v36-barcode{font-family:monospace;font-size:13px;letter-spacing:2px;margin:5px 0}.v36-file-list{display:grid;gap:6px}.v36-file-list .file-chip{width:100%;min-height:42px}.v36-file-list .file-chip>span:last-child{display:grid;text-align:left}.v36-file-list .file-chip b{font-size:11.5px}.v36-file-list .file-chip small{font-size:9.5px;color:var(--muted)}.v36-info{display:flex;gap:9px;padding:10px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(180deg,var(--primarySoft),var(--surface))}.v36-info>span{width:24px;height:24px;border-radius:50%;background:var(--primary);color:white;display:grid;place-items:center;font-weight:900}.v36-info div{display:grid;gap:3px}.v36-info b{font-size:11.8px}.v36-info small{font-size:10.5px;color:var(--muted);line-height:1.45}.v36-combo{position:relative}.v36-combo>label,.v36-field-label{display:block;font-size:10px;font-weight:800;color:var(--muted);margin:0 0 5px 2px}.v36-combo-box{height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:grid;grid-template-columns:28px 1fr 32px;align-items:center}.v36-combo-box>span{display:grid;place-items:center;color:var(--muted)}.v36-combo-box input{border:0;outline:0;background:transparent;color:var(--text);min-width:0;font-size:11.5px}.v36-combo-box button{height:100%;border:0;background:transparent;color:var(--muted)}.v36-list-head{font-size:10.5px;color:var(--muted);margin-bottom:7px}.v36-listbox{display:grid;gap:5px}.v36-listbox button{border:1px solid var(--line);background:var(--surface2);border-radius:8px;text-align:left;padding:8px;color:var(--text);display:grid;gap:2px}.v36-listbox button.active{background:var(--primarySoft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,var(--line));box-shadow:inset 3px 0 0 var(--primary)}.v36-listbox b{font-size:11.5px}.v36-listbox small{font-size:9.8px;color:var(--muted)}.v36-select{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:11.5px;padding:0 9px}.v36-selected-output{font-size:10px;color:var(--muted);margin-top:6px}
.v36-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.v36-kanban .kan-col{min-height:130px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);padding:6px}.v36-kanban .kan-col>b{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-bottom:6px}.v36-kanban .kan-card{min-height:42px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:9px;font-size:11.5px;font-weight:750;cursor:grab}.v36-kanban .kan-col.drag-over{outline:2px solid var(--primary);outline-offset:-2px}.v36-timeline{display:grid}.v36-timeline button{display:grid;grid-template-columns:20px 1fr;grid-template-rows:auto auto;column-gap:8px;border:0;background:transparent;color:var(--text);text-align:left;padding:7px 3px;position:relative}.v36-timeline button>span{grid-row:1/3;width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);margin-top:3px;position:relative}.v36-timeline button:not(:last-child)>span:after{content:"";position:absolute;top:10px;left:3px;width:2px;height:34px;background:var(--line)}.v36-timeline button.active>span{border-color:var(--primary);background:var(--primary)}.v36-timeline b{font-size:11.5px}.v36-timeline small{font-size:9.8px;color:var(--muted)}.v36-gantt{display:grid;gap:8px;margin-bottom:10px}.v36-gantt>div{display:grid;grid-template-columns:60px 1fr;align-items:center;font-size:10.5px}.v36-gantt i{height:14px;border-radius:5px;background:linear-gradient(90deg,var(--primary),var(--accent))}.v36-scheduler{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.v36-scheduler button{min-height:76px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--muted);font-size:10px;padding:7px;display:grid;align-content:start;gap:7px}.v36-scheduler button span{padding:5px;border-radius:6px;background:var(--primarySoft);color:var(--primary);font-size:9.5px;font-weight:750}.v36-pivot{border:1px solid var(--line);border-radius:9px;overflow:hidden}.v36-pivot button,.v36-pivot>div>div{width:100%;min-height:35px;border:0;border-bottom:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 9px;display:flex;align-items:center;gap:5px;text-align:left;font-size:11px}.v36-pivot button span,.v36-pivot>div>div span{margin-left:auto;color:var(--muted)}.v36-pivot>div>div{padding-left:26px;background:var(--surface2)}.v36-process{display:flex;align-items:center;margin-bottom:10px}.v36-process button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);position:relative;font-size:10px;font-weight:800}.v36-process button span{position:absolute;top:38px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap}.v36-process button.done{background:#e9f7ee;color:#268347;border-color:#91c8a1}.v36-process button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.v36-process i{height:2px;flex:1;background:var(--line)}.v36-gauge{width:130px;height:65px;margin:0 auto 8px;border-radius:130px 130px 0 0;background:conic-gradient(from 270deg at 50% 100%,var(--primary) 0 78%,var(--surface3) 78% 100%);position:relative;overflow:hidden}.v36-gauge:after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:48px;border-radius:100px 100px 0 0;background:var(--surface)}.v36-gauge>div{position:absolute;z-index:2;left:0;right:0;bottom:4px;text-align:center;display:grid}.v36-gauge b{font-size:17px}.v36-gauge small{font-size:9px;color:var(--muted)}.v36-dock{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}.v36-dock.pinned{box-shadow:0 0 0 2px var(--primary)}.v36-dock-head{height:38px;padding:0 8px;background:var(--surface2);display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--line)}.v36-dock-head b{font-size:11.5px}.v36-dock-head button{width:27px;height:27px;border:0;background:transparent;border-radius:6px;color:var(--muted)}.v36-dock-head button:hover{background:var(--primarySoft);color:var(--primary)}.v36-dock-body{padding:10px;font-size:10.5px;color:var(--muted);line-height:1.5}.v36-dock.collapsed .v36-dock-body{display:none}.v36-responsive-table{border:1px solid var(--line);border-radius:9px;overflow:hidden}.v36-responsive-table>div{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:7px;align-items:center;min-height:36px;padding:0 8px;border-bottom:1px solid var(--line);font-size:10.5px}.v36-responsive-table>div:last-child{border-bottom:0}.v36-responsive-table .head{background:var(--surface2);font-weight:800;color:var(--muted)}
body.dark #page-controls .control-card{box-shadow:0 7px 22px rgba(0,0,0,.20)!important}
@media(max-width:780px){.header-launcher,.header-search{width:36px!important;height:36px!important;flex-basis:36px!important}.launcher-pop-v36{left:8px!important;right:8px!important;top:56px!important;width:auto!important}.v36-kanban{grid-template-columns:1fr}.v36-scheduler{grid-template-columns:repeat(2,1fr)}.v36-query-row{grid-template-columns:1fr 1fr}.v36-query-row input{grid-column:1/3}.v36-color-row{grid-template-columns:48px 1fr}.v36-color-row .btn{grid-column:1/3}.v36-dual{grid-template-columns:1fr 34px 1fr}}


/* ==========================================================
   V37 SETTINGS / NAVIGATION / RESPONSIVE POLISH
   ========================================================== */

/* settings option icon alignment */
.opt-icon{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:88px;
  justify-content:center;
}
.opt-icon svg,.toast-pos-opt svg{width:15px;height:15px;flex:0 0 15px}
.setting-segment-icons button{display:inline-flex;align-items:center;gap:6px}
.setting-segment-icons button>span{font-size:13px}
.toast-position-grid{display:grid;grid-template-columns:repeat(2,minmax(118px,1fr));gap:6px;min-width:min(310px,100%)}
.toast-pos-opt{display:flex !important;align-items:center !important;gap:7px !important;justify-content:flex-start !important;height:36px !important}

/* Four toast corners */
body[data-toast-position="top-right"] .toast-stack{top:58px !important;right:12px !important;bottom:auto !important;left:auto !important}
body[data-toast-position="top-left"] .toast-stack{top:58px !important;left:calc(var(--nav-w) + 12px) !important;right:auto !important;bottom:auto !important}
body[data-toast-position="bottom-right"] .toast-stack{top:auto !important;right:12px !important;bottom:12px !important;left:auto !important}
body[data-toast-position="bottom-left"] .toast-stack{top:auto !important;left:calc(var(--nav-w) + 12px) !important;right:auto !important;bottom:12px !important}

/* Sidebar geometry and text alignment */
.sidebar-scroll{padding:5px 6px 8px !important}
.nav-section{
  margin:10px 8px 5px !important;
  padding:0 6px !important;
  min-height:18px;
  display:flex;
  align-items:center;
  font-size:10px !important;
  line-height:1 !important;
}
.nav-link{
  width:calc(100% - 4px) !important;
  margin:2px 2px !important;
  min-height:38px !important;
  height:auto !important;
  padding:5px 8px !important;
  gap:9px !important;
  align-items:center !important;
  border-radius:5px !important;
}
.nav-icon{
  width:25px !important;height:25px !important;flex:0 0 25px !important;
  border-radius:5px !important;display:grid !important;place-items:center !important;
}
.nav-icon svg{width:15px !important;height:15px !important}
.nav-label{
  min-width:0 !important;
  flex:1 !important;
  font-size:12.5px !important;
  line-height:1.18 !important;
  font-weight:620 !important;
  letter-spacing:0 !important;
}
.nav-arr{width:18px;flex:0 0 18px;display:grid;place-items:center;margin-left:auto}
.nav-arr svg{width:12px !important;height:12px !important}
.nav-children.level-2{padding:2px 2px 4px 33px !important}
.nav-sub-link{
  min-height:34px !important;
  padding:5px 6px !important;
  gap:7px !important;
  font-size:11.8px !important;
  line-height:1.18 !important;
  border-radius:5px !important;
}
.nav-sub-icon{width:23px !important;height:23px !important;flex:0 0 23px !important;border-radius:5px !important}
.nav-sub-link>span:nth-child(2){min-width:0;flex:1}
.nav-children.level-3{padding:1px 2px 4px 24px !important}
.nav-l3-link{
  min-height:30px !important;
  padding:5px 6px !important;
  font-size:11.2px !important;
  line-height:1.2 !important;
  border-radius:5px !important;
}
.nav-l3-link>span{width:5px;height:5px;flex:0 0 5px}

/* Sidebar surface - all levels remain readable */
body[data-sidebar-tone="surface"] .sidebar .nav-link,
body[data-sidebar-tone="surface"] .sidebar .nav-sub-link,
body[data-sidebar-tone="surface"] .sidebar .nav-l3-link{color:var(--text) !important}
body[data-sidebar-tone="surface"] .sidebar .nav-icon,
body[data-sidebar-tone="surface"] .sidebar .nav-sub-icon{color:var(--muted) !important}

body[data-sidebar-tone="tinted"] .sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 62%,var(--surface)),color-mix(in srgb,var(--surface) 92%,var(--primarySoft))) !important;
}
body[data-sidebar-tone="tinted"] .sidebar .nav-link,
body[data-sidebar-tone="tinted"] .sidebar .nav-sub-link,
body[data-sidebar-tone="tinted"] .sidebar .nav-l3-link{color:color-mix(in srgb,var(--text) 92%,var(--primary)) !important}
body[data-sidebar-tone="tinted"] .sidebar .nav-icon,
body[data-sidebar-tone="tinted"] .sidebar .nav-sub-icon{color:color-mix(in srgb,var(--muted) 72%,var(--primary)) !important}
body[data-sidebar-tone="tinted"] .sidebar .nav-link:hover,
body[data-sidebar-tone="tinted"] .sidebar .nav-sub-link:hover,
body[data-sidebar-tone="tinted"] .sidebar .nav-l3-link:hover{background:color-mix(in srgb,var(--primarySoft) 82%,var(--surface)) !important;color:var(--primary2) !important}

body[data-sidebar-tone="primary"] .sidebar{
  background:linear-gradient(180deg,var(--primary2) 0%,color-mix(in srgb,var(--primary2) 82%,#162a38) 100%) !important;
}
body[data-sidebar-tone="primary"] .sidebar .brand-copy b,
body[data-sidebar-tone="primary"] .sidebar .brand-copy small,
body[data-sidebar-tone="primary"] .sidebar .nav-section,
body[data-sidebar-tone="primary"] .sidebar .nav-link,
body[data-sidebar-tone="primary"] .sidebar .nav-sub-link,
body[data-sidebar-tone="primary"] .sidebar .nav-l3-link,
body[data-sidebar-tone="primary"] .sidebar .user-copy b,
body[data-sidebar-tone="primary"] .sidebar .user-copy small{color:#eef5ff !important}
body[data-sidebar-tone="primary"] .sidebar .nav-section{opacity:.82}
body[data-sidebar-tone="primary"] .sidebar .nav-icon,
body[data-sidebar-tone="primary"] .sidebar .nav-sub-icon,
body[data-sidebar-tone="primary"] .sidebar .nav-arr,
body[data-sidebar-tone="primary"] .sidebar .nav-sub-arr{color:#d9e8ff !important}
body[data-sidebar-tone="primary"] .sidebar .nav-sub-icon{background:rgba(255,255,255,.10) !important}
body[data-sidebar-tone="primary"] .sidebar .nav-l3-link>span{background:rgba(255,255,255,.58) !important}
body[data-sidebar-tone="primary"] .sidebar .nav-link:hover,
body[data-sidebar-tone="primary"] .sidebar .nav-sub-link:hover,
body[data-sidebar-tone="primary"] .sidebar .nav-l3-link:hover{background:rgba(255,255,255,.10) !important;color:#fff !important}
body[data-sidebar-tone="primary"] .sidebar .nav-link.active,
body[data-sidebar-tone="primary"] .sidebar .nav-sub-link.active{background:rgba(255,255,255,.17) !important;color:#fff !important;border:1px solid rgba(255,255,255,.12) !important}
body[data-sidebar-tone="primary"] .sidebar .user-btn{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.17) !important}
body[data-sidebar-tone="primary"] .sidebar .user-more{color:#eaf3ff !important}

/* Dark mode with surface/tinted sidebars */
body.dark[data-sidebar-tone="surface"] .sidebar,
body.dark[data-sidebar-tone="tinted"] .sidebar{border-color:var(--line) !important}
body.dark[data-sidebar-tone="surface"] .sidebar .nav-link,
body.dark[data-sidebar-tone="surface"] .sidebar .nav-sub-link,
body.dark[data-sidebar-tone="surface"] .sidebar .nav-l3-link,
body.dark[data-sidebar-tone="tinted"] .sidebar .nav-link,
body.dark[data-sidebar-tone="tinted"] .sidebar .nav-sub-link,
body.dark[data-sidebar-tone="tinted"] .sidebar .nav-l3-link{color:#e8f0f3 !important}
body.dark[data-sidebar-tone="surface"] .sidebar .nav-icon,
body.dark[data-sidebar-tone="tinted"] .sidebar .nav-icon,
body.dark[data-sidebar-tone="surface"] .sidebar .nav-sub-icon,
body.dark[data-sidebar-tone="tinted"] .sidebar .nav-sub-icon{color:#a8bac2 !important}

/* Header surfaces including icons / contexts */
body[data-header-tone="surface"] .topbar{background:color-mix(in srgb,var(--surface) 98%,var(--primarySoft)) !important}
body[data-header-tone="tinted"] .topbar{
  background:linear-gradient(90deg,color-mix(in srgb,var(--primarySoft) 62%,var(--surface)),var(--surface),color-mix(in srgb,var(--accentSoft) 42%,var(--surface))) !important;
}
body[data-header-tone="surface"] .topbar .icon-btn,
body[data-header-tone="tinted"] .topbar .icon-btn{color:var(--muted) !important}
body[data-header-tone="primary"] .topbar{
  background:linear-gradient(100deg,var(--primary2),var(--primary),color-mix(in srgb,var(--primary) 72%,var(--accent))) !important;
  color:#fff !important;border-color:transparent !important
}
body[data-header-tone="primary"] .topbar .icon-btn,
body[data-header-tone="primary"] .topbar .context,
body[data-header-tone="primary"] .topbar .global-search{color:#fff !important;background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.18) !important}
body[data-header-tone="primary"] .topbar .context b,
body[data-header-tone="primary"] .topbar .context small{color:#fff !important}
body[data-header-tone="primary"] .topbar .context small{opacity:.76}

/* Soft Filled must work on BOTH Fluent and Material surfaces */
body[data-control-style="soft"] .aj-box{
  background:color-mix(in srgb,var(--primarySoft) 34%,var(--surface2)) !important;
  border:1px solid transparent !important;
  border-bottom:1px solid color-mix(in srgb,var(--primary) 24%,var(--line2)) !important;
  box-shadow:none !important;
}
body[data-surface="fluent"][data-control-style="soft"] .aj-box{
  background:color-mix(in srgb,var(--primarySoft) 48%,#f7f8fa) !important;
  border:1px solid transparent !important;
  border-bottom:1px solid color-mix(in srgb,var(--primary) 25%,#bfc8cf) !important;
}
body.dark[data-surface="fluent"][data-control-style="soft"] .aj-box{
  background:color-mix(in srgb,var(--primarySoft) 28%,#1b252b) !important;
  border-bottom-color:color-mix(in srgb,var(--primary) 42%,#41545b) !important;
}
body[data-control-style="soft"] .aj-field:focus-within .aj-box,
body[data-control-style="soft"] .aj-select.open .aj-box,
body[data-control-style="soft"] .aj-search-select.open .aj-box,
body[data-control-style="soft"] .aj-multi.open .aj-box{
  border-color:transparent !important;
  border-bottom:2px solid var(--primary) !important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 8%,transparent) !important;
}
body[data-control-style="soft"] .aj-label{background:transparent !important}
body[data-control-style="soft"] .aj-field.floating .aj-label,
body[data-control-style="soft"] .aj-field:focus-within .aj-label,
body[data-control-style="soft"] .aj-select.floating .aj-label,
body[data-control-style="soft"] .aj-select.open .aj-label,
body[data-control-style="soft"] .aj-search-select.floating .aj-label,
body[data-control-style="soft"] .aj-search-select.open .aj-label,
body[data-control-style="soft"] .aj-multi.floating .aj-label,
body[data-control-style="soft"] .aj-multi.open .aj-label{
  background:transparent !important;
  padding-left:0 !important;padding-right:0 !important;
}

/* Settings theme grid responsive */
.theme-preset-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:7px !important}
.theme-preset{min-height:48px !important;padding:7px 9px !important;font-size:11.5px !important}
.theme-preset i{width:27px !important;height:27px !important;border-radius:7px !important}

/* Mobile / tablet */
@media(max-width:900px){
  .theme-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .toast-position-grid{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;width:100%}
  body[data-toast-position="top-left"] .toast-stack,
  body[data-toast-position="bottom-left"] .toast-stack{left:10px !important}
}
@media(max-width:620px){
  .theme-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .theme-preset{min-height:46px !important}
  .setting-inline.appearance-options{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;width:100%}
  .appearance-options .mini-opt{min-width:0 !important;padding:0 7px !important}
  .toast-position-grid{grid-template-columns:1fr 1fr}
  .toast-pos-opt{padding:0 8px !important;font-size:10.5px !important}
  .settings-row{align-items:stretch !important}
  .nav-link{min-height:40px !important}
  .nav-children.level-2{padding-left:31px !important}
  .nav-children.level-3{padding-left:19px !important}
  .sidebar .nav-label{font-size:12.6px !important}
  .sidebar .nav-sub-link{font-size:12px !important}
  .sidebar .nav-l3-link{font-size:11.4px !important}
  .toast-stack{max-width:calc(100vw - 20px)}
  .toast{width:min(310px,calc(100vw - 20px)) !important}
}
@media(max-width:390px){
  .theme-preset-grid{grid-template-columns:1fr 1fr !important}
  .theme-preset{font-size:10.8px !important;padding:6px !important}
  .theme-preset i{width:24px !important;height:24px !important}
  .appearance-options .mini-opt span{font-size:10px}
  .appearance-options .mini-opt svg{width:13px;height:13px}
}


/* ==========================================================
   V38 THEMED USER / ACCOUNT / EDIT PROFILE
   ========================================================== */

/* Normalize weights in user-facing shell */
.sidebar .user-copy b,
.account-copy b,
.account-item,
.profile-edit-head h2,
.profile-field-label,
.profile-secondary,
.profile-primary{
  font-weight:600 !important;
}
.account-item{font-weight:500 !important}

/* Sidebar pin / clip button follows theme */
.nav-toggle{
  color:var(--primary) !important;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--primarySoft) 76%,var(--surface)),
    color-mix(in srgb,var(--primarySoft) 46%,var(--surface2))) !important;
  border-color:color-mix(in srgb,var(--primary) 24%,var(--line)) !important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 9%,transparent) !important;
}
.nav-toggle:hover{
  color:#fff !important;
  background:linear-gradient(145deg,var(--primary),var(--primary2)) !important;
  border-color:var(--primary) !important;
}
.nav-toggle svg{stroke-width:1.8}

/* User trigger follows current theme */
.sidebar-footer{
  background:color-mix(in srgb,var(--surface) 94%,var(--primarySoft)) !important;
  border-color:color-mix(in srgb,var(--primary) 13%,var(--line)) !important;
}
.user-btn{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--primarySoft) 36%,var(--surface)),
    color-mix(in srgb,var(--primarySoft) 18%,var(--surface2))) !important;
  border-color:color-mix(in srgb,var(--primary) 18%,var(--line)) !important;
  color:var(--text) !important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.user-btn:hover{
  background:color-mix(in srgb,var(--primarySoft) 76%,var(--surface)) !important;
  border-color:color-mix(in srgb,var(--primary) 32%,var(--line)) !important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 8%,transparent);
}
.user-avatar{
  color:#fff !important;
  background:linear-gradient(145deg,var(--primary),var(--accent)) !important;
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--primary) 28%,transparent);
  font-size:11px !important;
  font-weight:700 !important;
}
.user-copy b{
  color:var(--text) !important;
  font-size:12.5px !important;
  line-height:1.1 !important;
}
.user-copy small{
  color:var(--muted) !important;
  font-size:10.5px !important;
  line-height:1.1 !important;
  margin-top:3px;
}
.user-more{
  color:var(--primary) !important;
  background:color-mix(in srgb,var(--primarySoft) 54%,transparent);
  border-radius:5px;
}
.user-more svg{width:14px;height:14px}

/* Primary sidebar: footer blends with primary nav and remains readable */
body[data-sidebar-tone="primary"] .sidebar-footer{
  background:transparent !important;
  border-color:rgba(255,255,255,.16) !important;
}
body[data-sidebar-tone="primary"] .user-btn{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.18) !important;
}
body[data-sidebar-tone="primary"] .user-btn:hover{background:rgba(255,255,255,.15) !important}
body[data-sidebar-tone="primary"] .user-avatar{
  background:linear-gradient(145deg,#fff,color-mix(in srgb,#fff 76%,var(--accent))) !important;
  color:var(--primary2) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.18) !important;
}
body[data-sidebar-tone="primary"] .user-copy b{color:#fff !important}
body[data-sidebar-tone="primary"] .user-copy small{color:rgba(255,255,255,.74) !important}
body[data-sidebar-tone="primary"] .user-more{
  color:#fff !important;background:rgba(255,255,255,.10) !important
}
body[data-sidebar-tone="primary"] .nav-toggle{
  color:#fff !important;
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:none !important;
}
body[data-sidebar-tone="primary"] .nav-toggle:hover{background:#fff !important;color:var(--primary2) !important}

/* Collapsed user trigger: clear branded avatar, no awkward pale square */
body:not(.nav-open) .sidebar-footer{padding:7px 6px !important}
body:not(.nav-open) .user-btn{
  width:42px !important;height:42px !important;margin:auto !important;padding:0 !important;
  border-radius:5px !important;display:grid !important;place-items:center !important;
}
body:not(.nav-open) .user-avatar{width:31px !important;height:31px !important;flex:0 0 31px !important}
body:not(.nav-open) .online-dot{right:-1px !important;bottom:-1px !important}

/* Account popup modern Fluent/Material theme */
.pop.profile-pop-v21{width:292px !important}
.account-sheet{
  border-radius:5px !important;
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)) !important;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 22%,var(--surface)) 0 66px,var(--surface) 66px) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--primary) 5%,transparent),
    0 18px 44px rgba(14,30,38,.18) !important;
}
.account-top{padding:13px 12px 12px !important}
.account-avatar{
  width:38px !important;height:38px !important;
  color:#fff !important;
  background:linear-gradient(145deg,var(--primary),var(--accent)) !important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 18%,transparent);
  font-size:12px !important;font-weight:700 !important;
}
.account-copy b{font-size:13px !important;color:var(--text) !important}
.account-copy small{font-size:10.5px !important;color:var(--muted) !important}
.account-go{
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line)) !important;
  color:var(--primary) !important;
  background:color-mix(in srgb,var(--primarySoft) 56%,var(--surface)) !important;
  border-radius:5px !important;
}
.account-go:hover{background:var(--primary) !important;color:#fff !important;border-color:var(--primary) !important}
.account-divider{background:color-mix(in srgb,var(--primary) 11%,var(--line)) !important;margin:0 11px !important}
.account-group{padding:7px !important}
.account-item{
  min-height:40px !important;height:40px !important;
  padding:0 9px !important;gap:9px !important;
  border-radius:5px !important;font-size:12px !important;
  color:var(--text) !important;
  transition:background .14s ease,color .14s ease,transform .14s ease;
}
.account-item:hover{
  background:color-mix(in srgb,var(--primarySoft) 62%,var(--surface)) !important;
  color:var(--primary2) !important;
}
.account-item .ai{
  width:27px !important;height:27px !important;border-radius:5px !important;
  background:color-mix(in srgb,var(--primarySoft) 70%,var(--surface)) !important;
  color:var(--primary) !important;
}
.account-item .ai svg{width:16px !important;height:16px !important}
.account-item:hover .ai{background:var(--primary) !important;color:#fff !important}
.account-item .tail-arrow{color:var(--muted) !important}

/* Logout only goes red on hover/focus */
.account-logout:hover,.account-logout:focus-visible{
  color:#b42318 !important;
  background:#fff0ee !important;
}
.account-logout:hover .ai,.account-logout:focus-visible .ai{
  color:#fff !important;background:#d92d20 !important;
}
body.dark .account-logout:hover,body.dark .account-logout:focus-visible{
  color:#ff9c94 !important;background:#3d2020 !important;
}
body.dark .account-logout:hover .ai,body.dark .account-logout:focus-visible .ai{
  background:#d92d20 !important;color:#fff !important;
}

/* Dark profile sheet */
body.dark .account-sheet{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 34%,#172126) 0 66px,#172126 66px) !important;
  border-color:color-mix(in srgb,var(--primary) 30%,#40525a) !important;
}
body.dark .account-item:hover{background:color-mix(in srgb,var(--primarySoft) 48%,#1a282e) !important}

/* Edit Profile: fixed LARGE Material control size, independent of global control size */
.profile-edit-modal{
  background:rgba(14,26,32,.32) !important;
  backdrop-filter:blur(7px) saturate(.9) !important;
}
.profile-edit-card{
  width:min(560px,calc(100vw - 24px)) !important;
  padding:0 !important;
  border-radius:5px !important;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line)) !important;
  background:var(--surface) !important;
  box-shadow:0 24px 70px rgba(10,26,34,.26) !important;
  overflow:auto !important;
}
.profile-edit-head{
  min-height:58px !important;
  padding:0 18px !important;
  border-bottom:1px solid var(--line) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 22%,var(--surface)),var(--surface)) !important;
}
.profile-edit-head h2{
  font-size:18px !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
}
.profile-edit-x{
  width:34px !important;height:34px !important;border-radius:5px !important;
  color:var(--muted) !important;
}
.profile-edit-x:hover{background:var(--primarySoft) !important;color:var(--primary) !important}

.profile-avatar-area{
  width:132px !important;height:132px !important;
  margin:24px auto 26px !important;
}
.profile-avatar-large{
  width:124px !important;height:124px !important;
  background:linear-gradient(145deg,var(--primary),var(--accent)) !important;
  color:#fff !important;
  font-size:38px !important;font-weight:400 !important;letter-spacing:-1px !important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--primary) 18%,transparent);
}
.profile-camera{
  right:0 !important;bottom:5px !important;
  width:36px !important;height:36px !important;border-radius:50% !important;
  color:var(--primary) !important;
  border-color:color-mix(in srgb,var(--primary) 22%,var(--line)) !important;
}
.profile-camera:hover{background:var(--primary) !important;color:#fff !important}

.profile-edit-fields.profile-fixed-large{
  display:grid !important;
  gap:14px !important;
  padding:0 18px !important;
}
.profile-material-field{
  position:relative !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 !important;
  border:1px solid var(--line2) !important;
  border-radius:4px !important;
  background:var(--surface) !important;
  display:block !important;
}
.profile-material-field:focus-within{
  border-color:var(--primary) !important;
  box-shadow:inset 0 0 0 1px var(--primary),0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent) !important;
}
.profile-field-label{
  position:absolute !important;
  z-index:2;
  top:-7px !important;left:12px !important;
  padding:0 5px !important;
  background:var(--surface) !important;
  color:var(--muted) !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:14px !important;
}
.profile-material-field:focus-within .profile-field-label{color:var(--primary) !important}
.profile-field-inner{
  height:100%;
  display:flex;align-items:center;gap:10px;
  padding:0 13px;
}
.profile-field-icon{
  width:23px;height:23px;flex:0 0 23px;
  display:grid;place-items:center;
  color:var(--muted);
}
.profile-field-icon svg{width:18px;height:18px}
.profile-material-field:focus-within .profile-field-icon{color:var(--primary)}
.profile-material-field input{
  width:100% !important;height:100% !important;
  border:0 !important;outline:0 !important;background:transparent !important;
  color:var(--text) !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:450 !important;
}
.profile-edit-help{
  margin:14px 18px 0 !important;
  color:var(--muted) !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
}
.profile-edit-actions{
  margin-top:18px !important;
  padding:14px 18px 16px !important;
  border-top:1px solid var(--line) !important;
  gap:8px !important;
}
.profile-secondary,.profile-primary{
  height:40px !important;
  padding:0 16px !important;
  border-radius:5px !important;
  font-size:12.5px !important;
  font-weight:650 !important;
}
.profile-secondary{
  border:1px solid var(--line2) !important;
  background:var(--surface) !important;
  color:var(--text) !important;
}
.profile-secondary:hover{background:var(--surface2) !important}
.profile-primary{
  border:1px solid var(--primary) !important;
  background:linear-gradient(180deg,var(--primary),var(--primary2)) !important;
  color:#fff !important;
}
.profile-primary:hover{filter:brightness(.96)}

/* Dark edit-profile */
body.dark .profile-edit-card{border-color:color-mix(in srgb,var(--primary) 26%,var(--line2)) !important}
body.dark .profile-material-field{background:#172126 !important;border-color:#405159 !important}
body.dark .profile-field-label{background:#172126 !important}
body.dark .profile-edit-head{background:linear-gradient(180deg,color-mix(in srgb,var(--primarySoft) 30%,#172126),#172126) !important}

/* Mobile account panel and profile modal */
@media(max-width:780px){
  .profile-pop-v21{
    width:min(330px,calc(100vw - 16px)) !important;
  }
  .account-item{min-height:42px !important;height:42px !important;font-size:12.5px !important}
}
@media(max-width:620px){
  .profile-edit-modal{padding:8px !important;align-items:flex-end !important}
  .profile-edit-card{
    width:100% !important;
    max-height:calc(100dvh - 16px) !important;
    border-radius:5px !important;
  }
  .profile-edit-head{min-height:54px !important;padding:0 14px !important}
  .profile-avatar-area{margin:20px auto 22px !important}
  .profile-edit-fields.profile-fixed-large{padding:0 14px !important}
  .profile-edit-help{margin-left:14px !important;margin-right:14px !important}
  .profile-edit-actions{padding:12px 14px 14px !important}
  .profile-secondary,.profile-primary{flex:1 !important}
}


.transaction-actionbar{min-height:54px;display:flex;align-items:stretch;gap:8px;padding:5px 7px;margin-bottom:8px;background:var(--surface);border:1px solid var(--line);border-radius:5px;box-shadow:0 2px 8px rgba(18,35,43,.045);overflow-x:auto;scrollbar-width:none}.transaction-actionbar::-webkit-scrollbar{display:none}.ta-group{display:flex;gap:2px;align-items:stretch;flex:0 0 auto}.ta-action{min-width:72px;min-height:42px;border:0;background:transparent;color:var(--text);border-radius:4px;padding:4px 8px;display:flex;align-items:center;gap:7px;text-align:left}.ta-action:hover{background:var(--primarySoft);color:var(--primary2)}.ta-action .ta-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:5px;background:color-mix(in srgb,var(--primarySoft) 66%,var(--surface));color:var(--primary);flex:0 0 28px}.ta-action .ta-icon svg{width:16px;height:16px}.ta-action b{display:block;font-size:11.5px;font-weight:650;white-space:nowrap}.ta-action small{display:block;font-size:9px;color:var(--muted);margin-top:1px;white-space:nowrap}.ta-action.primary-action .ta-icon{background:var(--primary);color:#fff}.ta-action.danger-action:hover{background:#fff1f0;color:#b42318}.ta-action.danger-action:hover .ta-icon{background:#d92d20;color:#fff}.ta-divider{width:1px;background:var(--line);flex:0 0 1px;margin:7px 0}.ta-spacer{flex:1}.ta-status{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10.5px;padding:0 8px}.ta-dot{width:7px;height:7px;border-radius:50%;background:#32b768;box-shadow:0 0 0 3px rgba(50,183,104,.10)}.form-focus-btn{display:flex!important;align-items:center!important;gap:7px!important}.form-focus-btn svg{width:15px;height:15px}
body.transaction-focus .sidebar,body.transaction-focus .topbar{display:none!important}body.transaction-focus .work{grid-column:1/-1!important;grid-row:1/-1!important;padding:8px!important;height:100dvh!important;overflow:auto!important}body.transaction-focus .app{grid-template-columns:1fr!important;grid-template-rows:1fr!important}body.transaction-focus #page-transaction{max-width:none!important;width:100%!important;margin:0!important}body.transaction-focus #page-transaction .transaction-page-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);padding:7px 0 8px;margin-bottom:0}body.transaction-focus #page-transaction .transaction-actionbar{position:sticky;top:72px;z-index:58}
.v39-option-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}.v39-option-row button{min-height:31px;padding:0 10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:5px;font-size:10.5px;font-weight:650}.v39-option-row button:hover,.v39-option-row button.active{background:var(--primarySoft);border-color:color-mix(in srgb,var(--primary) 26%,var(--line));color:var(--primary)}
.v39-tabs-shell{border:1px solid var(--line);border-radius:5px;background:var(--surface);overflow:hidden;display:grid}.v39-tabs{display:flex;background:var(--surface2)}.v39-tabs button{min-height:38px;border:0;background:transparent;color:var(--muted);padding:0 12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;font-weight:600;position:relative}.v39-tabs button svg{width:15px;height:15px}.v39-tabs button:hover{background:color-mix(in srgb,var(--primarySoft) 52%,var(--surface));color:var(--primary)}.v39-tabs button.active{background:var(--surface);color:var(--primary);font-weight:700}.v39-tab-panel{padding:12px;min-height:74px;display:grid;align-content:center;gap:4px;background:var(--surface)}.v39-tab-panel b{font-size:12.5px;font-weight:650}.v39-tab-panel span{font-size:10.8px;color:var(--muted)}.v39-tabs-shell.top{grid-template-rows:auto 1fr}.v39-tabs-shell.bottom{grid-template-rows:1fr auto}.v39-tabs-shell.bottom .v39-tabs{grid-row:2}.v39-tabs-shell.bottom .v39-tab-panel{grid-row:1}.v39-tabs-shell.left,.v39-tabs-shell.right{grid-template-columns:126px 1fr;min-height:158px}.v39-tabs-shell.left .v39-tabs,.v39-tabs-shell.right .v39-tabs{flex-direction:column;align-items:stretch}.v39-tabs-shell.left .v39-tabs button,.v39-tabs-shell.right .v39-tabs button{justify-content:flex-start}.v39-tabs-shell.right{grid-template-columns:1fr 126px}.v39-tabs-shell.right .v39-tabs{grid-column:2}.v39-tabs-shell.right .v39-tab-panel{grid-column:1;grid-row:1}
.v39-tree{border:1px solid var(--line);border-radius:5px;background:var(--surface);padding:5px}.v39-tree-row{width:100%;min-height:34px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:7px;padding:0 7px;border-radius:4px;text-align:left;font-size:11.5px}.v39-tree-row:hover{background:var(--primarySoft);color:var(--primary)}.v39-tree-row.root{background:var(--surface2)}.tree-toggle{width:19px;height:19px;display:grid;place-items:center;color:var(--muted);flex:0 0 19px}.tree-toggle svg{width:13px;height:13px}.tree-node-icon{width:23px;height:23px;border-radius:5px;display:grid;place-items:center;background:var(--primarySoft);color:var(--primary);flex:0 0 23px}.tree-node-icon svg{width:13px;height:13px}.tree-indent{width:19px;flex:0 0 19px}.tree-indent.second{width:38px;flex-basis:38px}.tree-check{display:none;width:18px;flex:0 0 18px}.v39-tree.check .tree-check{display:grid;place-items:center}.tree-check input{width:14px;height:14px;accent-color:var(--primary)}
.v39-splitter{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface);min-height:150px}.v39-splitter.horizontal{display:grid;grid-template-columns:1fr 8px 1fr}.v39-splitter.vertical{display:grid;grid-template-rows:1fr 8px 1fr}.v39-splitter .pane{padding:11px;background:var(--surface);display:grid;align-content:center;gap:4px;font-size:11.5px}.v39-splitter .pane b{font-size:12px}.v39-splitter .pane span{font-size:10px;color:var(--muted)}.v39-splitter .splitter-bar{background:color-mix(in srgb,var(--primary) 14%,var(--line));display:grid;place-items:center}.v39-splitter.horizontal .splitter-bar{cursor:col-resize}.v39-splitter.vertical .splitter-bar{cursor:row-resize}.v39-splitter .splitter-bar i{width:3px;height:28px;border-radius:3px;background:color-mix(in srgb,var(--primary) 38%,var(--muted))}.v39-splitter.vertical .splitter-bar i{width:28px;height:3px}
.v39-menu-button,.v39-split-button{height:38px;border-radius:5px;background:linear-gradient(180deg,var(--primary),var(--primary2));border:1px solid var(--primary);color:#fff}.v39-menu-button{min-width:138px;padding:0 8px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650}.menu-main-icon{width:23px;height:23px;display:grid;place-items:center;border-radius:4px;background:rgba(255,255,255,.14)}.menu-main-icon svg{width:14px;height:14px}.menu-chevron{margin-left:auto;width:27px;height:28px;display:grid;place-items:center;border-left:1px solid rgba(255,255,255,.2)}.menu-chevron svg{width:14px;height:14px}.v39-split-button{display:flex;overflow:hidden}.v39-split-button button{border:0;color:#fff;background:transparent}.v39-split-button .split-main{height:36px;padding:0 12px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650}.v39-split-button .split-main svg{width:15px;height:15px}.v39-split-button .split-toggle{width:38px;border-left:1px solid rgba(255,255,255,.25);display:grid;place-items:center}.v39-split-button .split-toggle svg{width:14px;height:14px}.v39-action-menu{width:270px!important;padding:5px!important;border-radius:5px!important}.v39-action-menu button{min-height:48px!important;padding:7px 8px!important;display:flex!important;align-items:center!important;gap:9px!important;border-radius:4px!important}.fly-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:5px;background:var(--surface2);color:var(--primary);font-size:10px;font-weight:700}.v39-action-menu button:hover .fly-icon{background:var(--primary);color:#fff}
.v39-tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.v39-tip{min-height:38px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:5px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:600}.v39-tip>span{color:var(--primary)}.tooltip-target:after{content:attr(data-tip);position:absolute;background:#182229;color:#fff;border-radius:5px;padding:7px 9px;font-size:10.5px;line-height:1.35;white-space:normal;width:max-content;max-width:220px;opacity:0;visibility:hidden;pointer-events:none;z-index:500;box-shadow:0 8px 22px rgba(0,0,0,.2)}.tooltip-target:before{content:"";position:absolute;width:8px;height:8px;background:#182229;opacity:0;visibility:hidden;z-index:499;transform:rotate(45deg)}.tooltip-target:hover:after,.tooltip-target:hover:before{opacity:1;visibility:visible}.tooltip-target[data-tip-pos="top"]:after{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%)}.tooltip-target[data-tip-pos="top"]:before{left:calc(50% - 4px);bottom:calc(100% + 6px)}.tooltip-target[data-tip-pos="bottom"]:after{left:50%;top:calc(100% + 10px);transform:translateX(-50%)}.tooltip-target[data-tip-pos="bottom"]:before{left:calc(50% - 4px);top:calc(100% + 6px)}.tooltip-target[data-tip-pos="left"]:after{right:calc(100% + 10px);top:50%;transform:translateY(-50%)}.tooltip-target[data-tip-pos="left"]:before{right:calc(100% + 6px);top:calc(50% - 4px)}.tooltip-target[data-tip-pos="right"]:after{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}.tooltip-target[data-tip-pos="right"]:before{left:calc(100% + 6px);top:calc(50% - 4px)}
.v39-popover{overflow:visible!important;border-radius:5px!important}.v39-popover-arrow{position:absolute;width:10px;height:10px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}.v39-popover.bottom .v39-popover-arrow{top:-6px;left:30px}.v39-popover.top .v39-popover-arrow{bottom:-6px;left:30px;transform:rotate(225deg)}.v39-popover.left .v39-popover-arrow{right:-6px;top:26px;transform:rotate(135deg)}.v39-popover.right .v39-popover-arrow{left:-6px;top:26px;transform:rotate(-45deg)}.v39-popover-head{min-height:52px;display:flex;align-items:center;gap:8px;padding:8px 9px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2))}.v39-popover-icon{width:30px;height:30px;border-radius:5px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center;font-weight:700}.v39-popover-head>span:nth-child(2){min-width:0;flex:1}.v39-popover-head b{display:block;font-size:11.5px}.v39-popover-head small{display:block;font-size:9.5px;color:var(--muted)}.v39-popover-close{width:28px;height:28px;border:0;background:transparent;color:var(--muted);font-size:18px}.v39-popover-body{padding:9px;display:grid;gap:7px}.v39-popover-line{display:flex;justify-content:space-between;gap:12px;font-size:10.5px}.v39-popover-line>span:first-child{color:var(--muted)}.v39-status-pill{padding:3px 7px;border-radius:999px;background:#fff4df;color:#a15c00;font-size:9.5px}.v39-popover-foot{padding:7px 9px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:6px}
.toast-stack{gap:8px!important;pointer-events:none}.toast{width:310px!important;min-height:62px;padding:9px 10px!important;align-items:center!important;gap:9px!important;border:1px solid var(--line)!important;border-left:4px solid var(--toast-color,var(--primary))!important;border-radius:5px!important;box-shadow:0 14px 34px rgba(18,36,44,.16)!important;position:relative;overflow:hidden;pointer-events:auto}.toast .ti{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:5px!important;background:color-mix(in srgb,var(--toast-color,var(--primary)) 12%,var(--surface))!important;color:var(--toast-color,var(--primary))!important}.toast .toast-copy{min-width:0;flex:1}.toast b{font-size:11.5px!important;font-weight:650!important}.toast small{font-size:9.8px!important;line-height:1.4!important}.toast .toast-close{width:26px;height:26px;border:0;background:transparent;color:var(--muted);font-size:16px}.toast .toast-life{position:absolute;left:0;bottom:0;height:2px;background:var(--toast-color,var(--primary));animation:v39ToastLife 3.2s linear forwards}@keyframes v39ToastLife{from{width:100%}to{width:0}}.toast.info{--toast-color:#3474d1}.toast.success{--toast-color:#2e9d59}.toast.warning{--toast-color:#d98a16}.toast.error{--toast-color:#d13d3d}.v39-toast-demo{display:flex;gap:7px;flex-wrap:wrap}.danger-lite{color:#b42318!important;border-color:#f2b8b5!important;background:#fff7f6!important}
.overlay{background:rgba(19,31,37,.35)!important;backdrop-filter:blur(5px)!important}.v39-dialog{width:min(520px,calc(100vw - 24px))!important;border-radius:5px!important;box-shadow:0 24px 70px rgba(10,25,32,.25)!important}.dialog-head{min-height:56px!important;height:auto!important;padding:8px 11px!important;gap:9px}.dialog-title-icon,.drawer-title-icon{width:32px;height:32px;flex:0 0 32px;border-radius:5px;background:var(--primarySoft);color:var(--primary);display:grid;place-items:center}.dialog-title-copy,.drawer-title-copy{min-width:0;flex:1}.dialog-title-copy b,.drawer-title-copy b{font-size:12.5px!important}.dialog-title-copy small,.drawer-title-copy small{display:block;font-size:9.5px;color:var(--muted)}.dialog-x,.drawer-x{width:30px;height:30px;border:0;background:transparent;color:var(--muted);font-size:19px}.dialog-body{padding:12px!important}.v39-drawer{width:min(390px,94vw)!important;box-shadow:-18px 0 50px rgba(10,25,32,.18)!important}.drawer-head{min-height:58px!important;height:auto!important;padding:8px 10px!important;gap:9px}.drawer-body{padding:10px!important}.v39-notify-summary{padding:10px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));background:var(--primarySoft);border-radius:5px;margin-bottom:9px}.v39-notify-summary b{font-size:11.5px;color:var(--primary2)}.v39-notify-summary small{display:block;font-size:9.5px;color:var(--muted);margin-top:3px}.v39-notify-list{display:grid;gap:6px}.v39-notify-item{min-height:58px;padding:8px;border:1px solid var(--line);background:var(--surface);border-radius:5px;display:grid;grid-template-columns:32px 1fr auto;gap:8px}.v39-notify-ico{width:32px;height:32px;border-radius:5px;background:var(--surface2);color:var(--primary);display:grid;place-items:center;font-size:10px;font-weight:700}.v39-notify-item b{font-size:10.8px}.v39-notify-item small{display:block;font-size:9.3px;color:var(--muted);margin-top:2px}.v39-notify-time{font-size:8.8px;color:var(--muted)}
@media(max-width:780px){.transaction-page-head .commands{width:100%;overflow-x:auto;flex-wrap:nowrap}.ta-action{min-width:64px;padding:4px 6px}.ta-action small{display:none}.form-focus-btn span{display:none}.v39-tabs-shell.left,.v39-tabs-shell.right{grid-template-columns:104px 1fr}.v39-popover{width:min(300px,calc(100vw - 16px))!important}.toast{width:min(310px,calc(100vw - 20px))!important}}@media(max-width:520px){.v39-option-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.v39-tooltip-grid{grid-template-columns:1fr 1fr}.v39-tabs-shell.left,.v39-tabs-shell.right{grid-template-columns:88px 1fr}.v39-drawer{width:100vw!important}}


/* ==========================================================
   V41 DESKTOP-ONLY CLIPPED SIDEBAR CENTER FIX
   Mobile <= 780px intentionally uses the original drawer layout.
   ========================================================== */
@media(min-width:781px){
body:not(.nav-open) .sidebar-scroll{
  padding:5px 0 8px !important;
  overflow-x:hidden !important;
  scrollbar-gutter:auto !important;
}
body:not(.nav-open) .sidebar-scroll > .nav-section{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
body:not(.nav-open) .sidebar-scroll > .nav-node{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body:not(.nav-open) .nav-link{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:38px !important;
  min-height:38px !important;
  margin:2px auto !important;
  padding:0 !important;
  gap:0 !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  border-radius:5px !important;
  overflow:visible !important;
}
body:not(.nav-open) .nav-link .nav-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  flex:0 0 30px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:5px !important;
}
body:not(.nav-open) .nav-link .nav-icon svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
  margin:auto !important;
}
body:not(.nav-open) .nav-label,
body:not(.nav-open) .nav-arr,
body:not(.nav-open) .nav-sub-arr{
  display:none !important;
}
body:not(.nav-open) .nav-link.active:before{
  left:auto !important;
  right:-8px !important;
  top:8px !important;
  bottom:8px !important;
  width:3px !important;
}
body:not(.nav-open) .nav-divider{
  width:30px !important;
  height:1px !important;
  margin:6px auto !important;
}
body:not(.nav-open) .nav-children{
  display:none !important;
}
/* user avatar/footer uses the same collapsed center line */
body:not(.nav-open) .sidebar-footer{
  padding:7px 0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
body:not(.nav-open) .sidebar-footer .user-btn{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
}
body:not(.nav-open) .sidebar-footer .user-avatar-wrap{
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
}

}

/* V41 mobile restore guard: desktop clip geometry must never leak into mobile drawer */
@media(max-width:780px){
  body:not(.nav-open) .sidebar-scroll{
    padding:5px 6px 8px !important;
    overflow-x:hidden !important;
  }
  body:not(.nav-open) .sidebar-scroll > .nav-section{
    display:flex !important;
    height:auto !important;
    min-height:18px !important;
    margin:10px 8px 5px !important;
    padding:0 6px !important;
    overflow:visible !important;
  }
  body:not(.nav-open) .sidebar-scroll > .nav-node{
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  body:not(.nav-open) .nav-link{
    width:calc(100% - 4px) !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:40px !important;
    margin:2px 2px !important;
    padding:5px 8px !important;
    gap:9px !important;
    justify-content:flex-start !important;
    align-items:center !important;
    text-align:left !important;
    overflow:hidden !important;
  }
  body:not(.nav-open) .nav-link .nav-icon{
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    flex:0 0 25px !important;
    margin:0 !important;
  }
  body:not(.nav-open) .nav-link .nav-icon svg{
    width:15px !important;
    height:15px !important;
  }
  body:not(.nav-open) .nav-label,
  body:not(.nav-open) .nav-arr,
  body:not(.nav-open) .nav-sub-arr{
    display:flex !important;
  }
  body:not(.nav-open) .nav-link.active:before{
    left:0 !important;
    right:auto !important;
    top:7px !important;
    bottom:7px !important;
    width:3px !important;
  }
  body:not(.nav-open) .nav-divider{
    width:auto !important;
    height:1px !important;
    margin:8px 12px !important;
  }
  body:not(.nav-open) .nav-node.open > .nav-children{
    display:block !important;
  }
  body:not(.nav-open) .sidebar-footer{
    padding:7px 8px !important;
    display:block !important;
  }
  body:not(.nav-open) .sidebar-footer .user-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:48px !important;
    margin:0 !important;
    padding:0 7px !important;
    display:flex !important;
    place-items:initial !important;
    justify-content:flex-start !important;
    gap:9px !important;
  }
  body:not(.nav-open) .sidebar-footer .user-avatar-wrap{
    margin:0 !important;
    display:block !important;
  }
  body:not(.nav-open) .sidebar-footer .user-copy,
  body:not(.nav-open) .sidebar-footer .user-more{
    display:block !important;
  }
}


/* ==========================================================
   V42 MOBILE USER / BRAND / ACCOUNT POPUP FIX
   Desktop clip geometry is intentionally untouched.
   ========================================================== */
@media(max-width:780px){

  /* Mobile brand must look like the normal expanded browser sidebar. */
  body.mobile-nav .sidebar-head,
  .sidebar-head{
    height:58px !important;
    min-height:58px !important;
    flex:0 0 58px !important;
    padding:0 12px !important;
    gap:9px !important;
    align-items:center !important;
  }
  body.mobile-nav .sidebar .brand,
  .sidebar .brand{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    flex:0 0 32px !important;
    border-radius:5px !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    font-size:12px !important;
    font-weight:800 !important;
    background:linear-gradient(145deg,var(--primary),var(--accent)) !important;
    color:#fff !important;
    box-shadow:0 5px 13px color-mix(in srgb,var(--primary) 18%,transparent) !important;
    overflow:hidden !important;
  }
  body.mobile-nav .sidebar .brand-copy,
  .sidebar .brand-copy{
    min-width:0 !important;
    flex:1 1 auto !important;
    display:block !important;
    opacity:1 !important;
    transform:none !important;
  }
  body.mobile-nav .sidebar .brand-copy b,
  .sidebar .brand-copy b{
    display:block !important;
    font-size:14px !important;
    line-height:1.05 !important;
    font-weight:750 !important;
    color:var(--text) !important;
    white-space:nowrap !important;
  }
  body.mobile-nav .sidebar .brand-copy small,
  .sidebar .brand-copy small{
    display:block !important;
    margin-top:3px !important;
    font-size:10.5px !important;
    line-height:1.05 !important;
    color:var(--muted) !important;
    white-space:nowrap !important;
  }
  body.mobile-nav .sidebar .nav-toggle,
  .sidebar .nav-toggle{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    flex:0 0 36px !important;
    margin-left:auto !important;
    border-radius:5px !important;
  }

  /* Mobile footer = browser-style horizontal account row. */
  body.mobile-nav .sidebar-footer,
  .sidebar-footer{
    height:68px !important;
    min-height:68px !important;
    flex:0 0 68px !important;
    padding:7px 10px !important;
    display:flex !important;
    align-items:center !important;
    background:var(--surface) !important;
    border-top:1px solid var(--line) !important;
    overflow:visible !important;
  }
  body.mobile-nav .sidebar .user-btn,
  body:not(.nav-open) .sidebar .user-btn,
  .sidebar .user-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    border-radius:5px !important;
    background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--primarySoft) 18%,var(--surface2))) !important;
    border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line)) !important;
    box-shadow:none !important;
    text-align:left !important;
    overflow:visible !important;
  }
  body.mobile-nav .sidebar .user-avatar-wrap,
  body:not(.nav-open) .sidebar .user-avatar-wrap,
  .sidebar .user-avatar-wrap{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    flex:0 0 38px !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    position:relative !important;
  }
  body.mobile-nav .sidebar .user-avatar,
  body:not(.nav-open) .sidebar .user-avatar,
  .sidebar .user-avatar{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    flex:0 0 34px !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    font-size:11.5px !important;
    font-weight:750 !important;
  }
  body.mobile-nav .sidebar .online-dot,
  .sidebar .online-dot{
    width:8px !important;
    height:8px !important;
    right:0 !important;
    bottom:0 !important;
    border-width:2px !important;
  }
  body.mobile-nav .sidebar .user-copy,
  body:not(.nav-open) .sidebar .user-copy,
  .sidebar .user-copy{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    opacity:1 !important;
    transform:none !important;
    line-height:1 !important;
  }
  body.mobile-nav .sidebar .user-copy b,
  .sidebar .user-copy b{
    display:block !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
    color:var(--text) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.mobile-nav .sidebar .user-copy small,
  .sidebar .user-copy small{
    display:block !important;
    margin:4px 0 0 !important;
    font-size:10.5px !important;
    line-height:1.05 !important;
    color:var(--muted) !important;
    white-space:nowrap !important;
  }
  body.mobile-nav .sidebar .user-more,
  body:not(.nav-open) .sidebar .user-more,
  .sidebar .user-more{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    flex:0 0 30px !important;
    margin-left:auto !important;
    display:grid !important;
    place-items:center !important;
    opacity:1 !important;
    color:var(--primary) !important;
    background:transparent !important;
    border:1px solid transparent !important;
    border-radius:5px !important;
  }
  body.mobile-nav .sidebar .user-btn:hover .user-more,
  .sidebar .user-btn:hover .user-more{
    background:var(--primarySoft) !important;
    border-color:color-mix(in srgb,var(--primary) 16%,var(--line)) !important;
  }
  body.mobile-nav .sidebar .user-more svg,
  .sidebar .user-more svg{
    width:14px !important;
    height:14px !important;
  }

  /* Account popup behaves like desktop: anchored immediately ABOVE user footer. */
  .pop.profile-pop-v21{
    left:8px !important;
    right:auto !important;
    top:auto !important;
    bottom:76px !important;
    width:calc(min(340px,92vw) - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 92px) !important;
    overflow:visible !important;
    z-index:370 !important;
  }
  .profile-pop-v21 .account-sheet{
    width:100% !important;
    max-height:calc(100dvh - 92px) !important;
    overflow:auto !important;
    border-radius:5px !important;
  }
  .profile-pop-v21 .account-top{
    min-height:62px !important;
    padding:10px 11px !important;
  }
  .profile-pop-v21 .account-avatar{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    font-size:12px !important;
  }
  .profile-pop-v21 .account-copy b{
    font-size:12.5px !important;
    line-height:1.1 !important;
  }
  .profile-pop-v21 .account-copy small{
    font-size:10px !important;
    line-height:1.1 !important;
  }
  .profile-pop-v21 .account-go{
    width:30px !important;
    height:30px !important;
    border-radius:5px !important;
  }
  .profile-pop-v21 .account-group{
    padding:6px !important;
  }
  .profile-pop-v21 .account-item{
    min-height:40px !important;
    height:40px !important;
    padding:0 8px !important;
    gap:9px !important;
    border-radius:5px !important;
    font-size:12px !important;
  }
  .profile-pop-v21 .account-item .ai{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    flex:0 0 28px !important;
    border-radius:5px !important;
  }
}

/* Extra narrow phones */
@media(max-width:390px){
  .pop.profile-pop-v21{
    width:calc(min(340px,92vw) - 16px) !important;
  }
  body.mobile-nav .sidebar-head,
  .sidebar-head{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}


/* ==========================================================
   V43 - Popover arrows + transaction header / command polish
   ========================================================== */

/* Reusable anchored popovers with top arrow like the approval popover */
.anchored-pop{
  overflow:visible !important;
  --anchor-x:42px;
}
.anchored-pop::before,
.anchored-pop::after{
  content:"";
  position:absolute;
  left:var(--anchor-x);
  transform:translateX(-50%) rotate(45deg);
  width:12px;
  height:12px;
  pointer-events:none;
}
.anchored-pop::before{
  top:-7px;
  background:var(--surface);
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  z-index:2;
}
.anchored-pop::after{
  top:-9px;
  width:16px;
  height:16px;
  background:transparent;
  z-index:1;
}
#searchPop.anchored-pop,
#launcherPop.anchored-pop,
#contextPop.anchored-pop,
#profilePop.anchored-pop{
  box-shadow:0 18px 44px rgba(16,32,38,.14) !important;
}

/* Transaction page heading: commands on left, form identity card on right */
.transaction-page-head{
  display:flex !important;
  align-items:stretch !important;
  gap:12px !important;
  margin-bottom:10px !important;
}
.transaction-page-head > .commands{
  order:1;
  margin-left:0 !important;
  flex:0 1 auto;
  align-self:flex-start;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.transaction-page-head > .tx-head-card{
  order:2;
  margin-left:auto;
}
.transaction-page-head .commands .btn{
  height:36px !important;
  padding:0 14px !important;
  font-size:12px !important;
  font-weight:800 !important;
  border-radius:6px !important;
  gap:6px !important;
}
.transaction-page-head .commands .form-focus-btn{
  width:38px !important;
  min-width:38px !important;
  padding:0 !important;
  flex:0 0 38px !important;
}
.transaction-page-head .commands .form-focus-btn span{
  display:none !important;
}
.transaction-page-head .commands .form-focus-btn svg{
  width:17px !important;
  height:17px !important;
  margin:0 !important;
}
.tx-head-card{
  min-width:360px;
  flex:1 1 520px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  box-shadow:0 8px 26px rgba(16,31,36,.05);
}
.tx-head-icon{
  width:42px;
  height:42px;
  min-width:42px;
  flex:0 0 42px;
  border-radius:8px;
  background:var(--primarySoft);
  color:var(--primary);
  display:grid;
  place-items:center;
}
.tx-head-icon svg{
  width:22px;
  height:22px;
}
.tx-head-copy{
  min-width:0;
  flex:1 1 auto;
}
.tx-head-copy .crumb{
  margin:0 0 4px !important;
  font-size:10.5px !important;
  color:var(--muted) !important;
}
.tx-head-copy h1{
  margin:0 !important;
  font-size:24px !important;
  line-height:1.05 !important;
  letter-spacing:-.45px !important;
}
.tx-head-copy p{
  margin:5px 0 0 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  color:var(--muted) !important;
}

/* Hide ready badge on action bar as requested */
.transaction-actionbar .ta-spacer,
.transaction-actionbar .ta-status{
  display:none !important;
}

/* Mobile keeps the information card readable */
@media(max-width:900px){
  .tx-head-card{min-width:0;flex:1 1 auto}
}
@media(max-width:780px){
  .anchored-pop::before,
  .anchored-pop::after{display:none !important}
  .transaction-page-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .transaction-page-head > .tx-head-card{
    order:1;
    margin-left:0;
  }
  .transaction-page-head > .commands{
    order:2;
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
  }
  .transaction-page-head .commands .btn{
    white-space:nowrap;
  }
  .tx-head-copy h1{font-size:21px !important}
  .tx-head-copy p{font-size:11.3px !important}
}


/* =========================================================
   V44 USER PANEL + TRANSACTION COMMAND BAR
   ========================================================= */

/* footer account trigger has no dropdown chevron */
#sideUser{
  padding-right:10px !important;
}
#sideUser .user-copy{
  padding-right:4px !important;
}

/* desktop account panel opens OUTSIDE sidebar with side arrow */
#profilePop.profile-side-pop{
  overflow:visible !important;
  --profile-arrow-y:calc(100% - 34px);
}
#profilePop.profile-side-pop::before{
  content:"";
  position:absolute;
  left:-7px;
  top:var(--profile-arrow-y);
  width:12px;
  height:12px;
  transform:translateY(-50%) rotate(-45deg);
  background:var(--surface);
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  z-index:3;
}
#profilePop.profile-side-pop::after{
  content:"";
  position:absolute;
  left:-12px;
  top:var(--profile-arrow-y);
  width:16px;
  height:24px;
  transform:translateY(-50%);
  background:transparent;
  pointer-events:none;
}
.account-top-v44{
  justify-content:flex-start !important;
  gap:9px !important;
}
.account-panel-nav{
  width:32px;
  height:32px;
  min-width:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
  border-radius:5px;
  background:var(--primarySoft);
  color:var(--primary);
  cursor:pointer;
  transition:.14s ease;
}
.account-panel-nav:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.account-panel-nav svg{width:16px;height:16px}
.account-top-v44 .account-user{
  flex:1 1 auto;
  min-width:0;
}

/* single Purchase Order command strip */
.transaction-actionbar-v44{
  min-height:70px !important;
  height:auto !important;
  padding:8px 10px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  overflow:visible !important;
}
.transaction-actionbar-v44 .ta-command-group{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
}
.transaction-actionbar-v44 .ta-form-view{
  width:44px !important;
  min-width:44px !important;
  height:48px !important;
  padding:0 !important;
  justify-content:center !important;
  border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line)) !important;
  background:var(--surface2) !important;
}
.transaction-actionbar-v44 .ta-form-view .ta-icon{
  width:32px !important;
  height:32px !important;
  margin:0 !important;
  background:var(--primarySoft) !important;
  color:var(--primary) !important;
}
.transaction-actionbar-v44 .ta-form-view:hover{
  background:var(--primarySoft) !important;
  border-color:color-mix(in srgb,var(--primary) 38%,var(--line)) !important;
}
.transaction-actionbar-v44 .ta-action{
  min-height:48px !important;
}
.transaction-actionbar-v44 .ta-divider{
  height:32px !important;
  margin:0 2px !important;
}

/* form identity takes remaining width */
.ta-form-identity{
  min-width:260px;
  flex:1 1 auto;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 8px 5px 10px;
  margin-left:4px;
  border-left:1px solid var(--line);
}
.ta-form-icon{
  width:38px;
  height:38px;
  min-width:38px;
  flex:0 0 38px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:var(--primarySoft);
  color:var(--primary);
}
.ta-form-icon svg{width:20px;height:20px}
.ta-form-copy{
  min-width:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "crumb crumb"
    "title desc";
  align-items:center;
  column-gap:10px;
  row-gap:2px;
}
.ta-breadcrumb{
  grid-area:crumb;
  display:block;
  color:var(--muted);
  font-size:9.5px;
  line-height:1.1;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ta-form-title{
  grid-area:title;
  color:var(--text);
  font-size:16px;
  line-height:1.08;
  font-weight:780;
  letter-spacing:-.18px;
  white-space:nowrap;
}
.ta-form-desc{
  grid-area:desc;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.25;
  font-weight:450;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Transaction no longer needs the separate V43 page-head card */
#page-transaction > .transaction-page-head{
  display:none !important;
}

body.dark #profilePop.profile-side-pop::before{
  background:var(--surface);
}
body[data-sidebar-tone="primary"] #profilePop.profile-side-pop{
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line));
}

/* Responsive command bar */
@media(max-width:1180px){
  .transaction-actionbar-v44{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
  }
  .transaction-actionbar-v44 .ta-command-group{
    width:100%;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .ta-form-identity{
    width:100%;
    border-left:0;
    border-top:1px solid var(--line);
    margin-left:0;
    padding:8px 2px 2px;
  }
}
@media(max-width:780px){
  #profilePop.profile-side-pop::before,
  #profilePop.profile-side-pop::after{display:none !important}
  .transaction-actionbar-v44{
    padding:7px !important;
    gap:7px !important;
  }
  .transaction-actionbar-v44 .ta-command-group{
    gap:3px;
  }
  .transaction-actionbar-v44 .ta-action{
    min-width:54px !important;
  }
  .transaction-actionbar-v44 .ta-form-view{
    min-width:42px !important;
    width:42px !important;
  }
  .ta-form-identity{
    min-width:0;
  }
  .ta-form-copy{
    grid-template-columns:1fr;
    grid-template-areas:"crumb" "title" "desc";
  }
  .ta-form-title{font-size:15px}
  .ta-form-desc{
    font-size:10px;
    white-space:normal;
  }
}


/* ==========================================================
   V45 - EXACT PURCHASE ORDER COMMAND BAR LAYOUT
   Left = Form View + CRUD commands
   Right = form identity / description
   ========================================================== */

.transaction-actionbar-v44{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  min-height:66px !important;
  padding:7px 10px !important;
  gap:0 !important;
  overflow:visible !important;
}

.transaction-actionbar-v44 .ta-command-group{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  min-width:max-content !important;
}

/* Form View must be the first control, icon-only. */
.transaction-actionbar-v44 .ta-form-view{
  order:-10 !important;
  width:42px !important;
  min-width:42px !important;
  height:46px !important;
  min-height:46px !important;
  margin-right:3px !important;
  padding:0 !important;
}
.transaction-actionbar-v44 .ta-form-view .ta-icon{
  width:30px !important;
  height:30px !important;
}

/* Left commands stay compact and do not stretch. */
.transaction-actionbar-v44 .ta-command-group > .ta-action:not(.ta-form-view){
  flex:0 0 auto !important;
  min-width:76px !important;
  height:46px !important;
  min-height:46px !important;
  padding:4px 8px !important;
}
.transaction-actionbar-v44 .ta-command-group .ta-divider{
  flex:0 0 1px !important;
  width:1px !important;
  height:30px !important;
  margin:0 3px !important;
}

/* This spacer is what keeps form identity on the RIGHT side. */
.ta-zone-spacer{
  flex:1 1 auto !important;
  min-width:18px !important;
}

/* Right form identity has its own clean zone, not mixed into commands. */
.ta-form-identity{
  flex:0 1 650px !important;
  width:min(650px,48vw) !important;
  min-width:430px !important;
  max-width:650px !important;
  min-height:50px !important;
  margin:0 !important;
  padding:5px 4px 5px 14px !important;
  border-left:1px solid var(--line) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  overflow:hidden !important;
}

.ta-form-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  flex:0 0 38px !important;
  border-radius:5px !important;
}

.ta-form-copy{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:
    "crumb crumb"
    "title desc" !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:2px !important;
}

.ta-breadcrumb{
  grid-area:crumb !important;
  font-size:9.7px !important;
  line-height:1.05 !important;
  font-weight:520 !important;
  color:var(--muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.ta-form-title{
  grid-area:title !important;
  font-size:16px !important;
  line-height:1.05 !important;
  font-weight:780 !important;
  color:var(--text) !important;
  white-space:nowrap !important;
}

.ta-form-desc{
  grid-area:desc !important;
  min-width:0 !important;
  font-size:10.8px !important;
  line-height:1.2 !important;
  font-weight:480 !important;
  color:color-mix(in srgb,var(--text) 58%,var(--muted)) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Medium desktop: preserve ordering, then place identity on next line only if required. */
@media(max-width:1250px){
  .transaction-actionbar-v44{
    flex-wrap:wrap !important;
    row-gap:5px !important;
  }
  .transaction-actionbar-v44 .ta-command-group{
    max-width:100% !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  .transaction-actionbar-v44 .ta-command-group::-webkit-scrollbar{display:none !important}
  .ta-zone-spacer{display:none !important}
  .ta-form-identity{
    order:2 !important;
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    border-left:0 !important;
    border-top:1px solid var(--line) !important;
    padding:7px 2px 1px !important;
  }
}

/* Mobile keeps exact command order and readable identity. */
@media(max-width:780px){
  .transaction-actionbar-v44{
    padding:6px !important;
  }
  .transaction-actionbar-v44 .ta-command-group{
    width:100% !important;
  }
  .transaction-actionbar-v44 .ta-command-group > .ta-action:not(.ta-form-view){
    min-width:62px !important;
    padding:3px 6px !important;
  }
  .transaction-actionbar-v44 .ta-command-group > .ta-action:not(.ta-form-view) small{
    display:none !important;
  }
  .ta-form-identity{
    min-height:58px !important;
  }
  .ta-form-copy{
    grid-template-columns:1fr !important;
    grid-template-areas:"crumb" "title" "desc" !important;
    row-gap:2px !important;
  }
  .ta-form-title{font-size:15px !important}
  .ta-form-desc{
    font-size:10.2px !important;
    white-space:normal !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }
}


/* ==========================================================
   V46 - SWAPPED COMMAND BAR LAYOUT
   LEFT  = form icon + breadcrumb + title + description
   RIGHT = Full Form View + Add/Edit/Delete/View/Refresh
   ========================================================== */

.transaction-actionbar-v44{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  min-height:66px !important;
  padding:7px 10px !important;
  gap:0 !important;
  overflow:visible !important;
}

.ta-form-identity{
  order:1 !important;
  flex:0 1 690px !important;
  width:min(690px,52vw) !important;
  min-width:460px !important;
  max-width:690px !important;
  min-height:50px !important;
  margin:0 !important;
  padding:5px 14px 5px 4px !important;
  border-left:0 !important;
  border-right:1px solid var(--line) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  overflow:hidden !important;
}

.ta-form-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  flex:0 0 38px !important;
  border-radius:5px !important;
}
.ta-form-copy{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:
    "crumb crumb"
    "title desc" !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:2px !important;
}
.ta-breadcrumb{
  grid-area:crumb !important;
  font-size:9.7px !important;
  line-height:1.05 !important;
  font-weight:520 !important;
  color:var(--muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.ta-form-title{
  grid-area:title !important;
  font-size:16px !important;
  line-height:1.05 !important;
  font-weight:780 !important;
  color:var(--text) !important;
  white-space:nowrap !important;
}
.ta-form-desc{
  grid-area:desc !important;
  min-width:0 !important;
  font-size:10.8px !important;
  line-height:1.2 !important;
  font-weight:480 !important;
  color:color-mix(in srgb,var(--text) 58%,var(--muted)) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.ta-zone-spacer{
  order:2 !important;
  flex:1 1 auto !important;
  min-width:16px !important;
}

.transaction-actionbar-v44 .ta-command-group{
  order:3 !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  min-width:max-content !important;
}
.transaction-actionbar-v44 .ta-form-view{
  order:-10 !important;
  width:42px !important;
  min-width:42px !important;
  height:46px !important;
  min-height:46px !important;
  margin-right:3px !important;
  padding:0 !important;
}
.transaction-actionbar-v44 .ta-form-view .ta-icon{
  width:30px !important;
  height:30px !important;
}
.transaction-actionbar-v44 .ta-command-group > .ta-action:not(.ta-form-view){
  flex:0 0 auto !important;
  min-width:76px !important;
  height:46px !important;
  min-height:46px !important;
  padding:4px 8px !important;
}
.transaction-actionbar-v44 .ta-command-group .ta-divider{
  flex:0 0 1px !important;
  width:1px !important;
  height:30px !important;
  margin:0 3px !important;
}

@media(max-width:1250px){
  .transaction-actionbar-v44{
    flex-wrap:wrap !important;
    row-gap:5px !important;
  }
  .ta-form-identity{
    order:1 !important;
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
    padding:4px 2px 8px !important;
  }
  .ta-zone-spacer{display:none !important}
  .transaction-actionbar-v44 .ta-command-group{
    order:2 !important;
    width:100% !important;
    justify-content:flex-end !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  .transaction-actionbar-v44 .ta-command-group::-webkit-scrollbar{display:none !important}
}
@media(max-width:780px){
  .transaction-actionbar-v44{
    padding:6px !important;
  }
  .ta-form-identity{
    min-height:58px !important;
  }
  .ta-form-copy{
    grid-template-columns:1fr !important;
    grid-template-areas:"crumb" "title" "desc" !important;
    row-gap:2px !important;
  }
  .ta-form-title{font-size:15px !important}
  .ta-form-desc{
    font-size:10.2px !important;
    white-space:normal !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }
  .transaction-actionbar-v44 .ta-command-group{
    justify-content:flex-start !important;
  }
  .transaction-actionbar-v44 .ta-command-group > .ta-action:not(.ta-form-view){
    min-width:62px !important;
    padding:3px 6px !important;
  }
  .transaction-actionbar-v44 .ta-command-group > .ta-action:not(.ta-form-view) small{
    display:none !important;
  }
}


/* ==========================================================
   V47 - PURCHASE ORDER WORKSPACE LAYOUT
   ========================================================== */

/* Transaction page uses the available work-area height. */
body.transaction-page-active .work{
  overflow:hidden !important;
}
#page-transaction:not(.hidden){
  height:100% !important;
  min-height:0 !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  overflow:hidden !important;
}

/* Top command bar keeps a stable one-row desktop layout. */
#page-transaction .transaction-actionbar-v44{
  flex:0 0 auto !important;
  margin:0 !important;
  min-height:66px !important;
  border-radius:5px !important;
  overflow:visible !important;
}

/* LEFT: form identity. Description is under Purchase Order. */
#page-transaction .ta-form-identity{
  order:1 !important;
  flex:0 1 650px !important;
  width:min(650px,48vw) !important;
  min-width:430px !important;
  max-width:650px !important;
  min-height:50px !important;
  padding:4px 14px 4px 4px !important;
  border-left:0 !important;
  border-right:1px solid var(--line) !important;
  overflow:hidden !important;
}
#page-transaction .ta-form-copy{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-areas:
    "crumb"
    "title"
    "desc" !important;
  align-content:center !important;
  align-items:start !important;
  row-gap:1px !important;
}
#page-transaction .ta-breadcrumb{
  grid-area:crumb !important;
  font-size:9px !important;
  line-height:1.05 !important;
  font-weight:520 !important;
}
#page-transaction .ta-form-title{
  grid-area:title !important;
  font-size:16px !important;
  line-height:1.05 !important;
  font-weight:780 !important;
}
#page-transaction .ta-form-desc{
  grid-area:desc !important;
  display:block !important;
  margin-top:2px !important;
  font-size:10.2px !important;
  line-height:1.18 !important;
  font-weight:450 !important;
  color:var(--muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* RIGHT: Add/Edit/Delete/View/Refresh/Form View. */
#page-transaction .ta-zone-spacer{
  order:2 !important;
  display:block !important;
  flex:1 1 auto !important;
  min-width:12px !important;
}
#page-transaction .ta-command-group{
  order:3 !important;
  flex:0 0 auto !important;
  justify-content:flex-end !important;
}
#page-transaction .ta-command-group #formFullscreenBtn{
  order:99 !important;
  margin-left:4px !important;
  margin-right:0 !important;
}

/* Lower panel uses the remaining browser/workspace height. */
#page-transaction > .po-workspace-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:0 !important;
  border-radius:5px !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:visible !important;
  box-shadow:0 2px 8px rgba(18,35,43,.045) !important;
}
#page-transaction > .po-workspace-panel > .panel-head{
  flex:0 0 37px !important;
  height:37px !important;
  border-radius:5px 5px 0 0 !important;
}
#page-transaction .po-form-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:10px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  scrollbar-width:thin !important;
  scrollbar-color:color-mix(in srgb,var(--primary) 55%,var(--line2)) transparent !important;
}
#page-transaction .po-form-scroll::-webkit-scrollbar{
  width:7px !important;
}
#page-transaction .po-form-scroll::-webkit-scrollbar-track{
  background:transparent !important;
}
#page-transaction .po-form-scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--primary) 48%,var(--line2)) !important;
  border:2px solid var(--surface) !important;
  border-radius:8px !important;
}
#page-transaction .po-form-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--primary) !important;
}

/* Keep dropdowns above the internal form workspace. */
#page-transaction .po-workspace-panel:has(.open){
  z-index:40 !important;
}

/* Full Form View must keep the EXACT same top-bar design. */
body.transaction-focus .work{
  grid-column:1/-1 !important;
  grid-row:1/-1 !important;
  height:100dvh !important;
  padding:8px !important;
  overflow:hidden !important;
}
body.transaction-focus #page-transaction{
  height:100% !important;
  min-height:0 !important;
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  overflow:hidden !important;
}
body.transaction-focus #page-transaction .transaction-actionbar{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:58 !important;
  margin:0 !important;
}
/* Never reformat the command identity when fullscreen is active. */
body.transaction-focus #page-transaction .ta-form-identity,
body.transaction-focus #page-transaction .ta-command-group,
body.transaction-focus #page-transaction .ta-form-copy{
  transform:none !important;
}

/* 1250+: always same one-row desktop layout. */
@media(min-width:1251px){
  #page-transaction .transaction-actionbar-v44{
    flex-wrap:nowrap !important;
  }
}

/* Medium desktop: form identity first line, commands second only when room is tight. */
@media(max-width:1250px) and (min-width:781px){
  #page-transaction .transaction-actionbar-v44{
    flex-wrap:wrap !important;
    row-gap:5px !important;
  }
  #page-transaction .ta-form-identity{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
    padding:4px 2px 7px !important;
  }
  #page-transaction .ta-zone-spacer{
    display:none !important;
  }
  #page-transaction .ta-command-group{
    width:100% !important;
    justify-content:flex-end !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  #page-transaction .ta-command-group::-webkit-scrollbar{
    display:none !important;
  }
}

/* Mobile retains readable stacked identity + scrollable command row. */
@media(max-width:780px){
  #page-transaction:not(.hidden){
    height:100% !important;
    gap:7px !important;
  }
  #page-transaction .transaction-actionbar-v44{
    flex-wrap:wrap !important;
  }
  #page-transaction .ta-form-identity{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
    padding:3px 2px 7px !important;
  }
  #page-transaction .ta-zone-spacer{
    display:none !important;
  }
  #page-transaction .ta-command-group{
    width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  #page-transaction .ta-command-group::-webkit-scrollbar{
    display:none !important;
  }
  #page-transaction .ta-form-desc{
    white-space:normal !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }
  #page-transaction .po-form-scroll{
    padding:8px !important;
  }
}


/* ==========================================================
   V48 - MOBILE PURCHASE ORDER HEADER + COMMANDS
   Desktop/tablet behavior from V47 remains unchanged.
   ========================================================== */
@media(max-width:780px){

  /* Mobile header: ONLY icon + Purchase Order.
     Hide breadcrumb and descriptive text. */
  #page-transaction .transaction-actionbar-v44{
    padding:7px !important;
    gap:0 !important;
    row-gap:7px !important;
    border-radius:5px !important;
  }

  #page-transaction .ta-form-identity{
    flex:0 0 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:48px !important;
    height:48px !important;
    padding:4px 6px !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
    gap:9px !important;
    overflow:hidden !important;
  }

  #page-transaction .ta-form-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    flex:0 0 34px !important;
    border-radius:5px !important;
  }
  #page-transaction .ta-form-icon svg{
    width:18px !important;
    height:18px !important;
  }

  #page-transaction .ta-form-copy{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    height:100% !important;
  }

  #page-transaction .ta-breadcrumb,
  #page-transaction .ta-form-desc{
    display:none !important;
  }

  #page-transaction .ta-form-title{
    display:block !important;
    margin:0 !important;
    font-size:clamp(15px,4.5vw,18px) !important;
    line-height:1 !important;
    font-weight:780 !important;
    letter-spacing:-.2px !important;
    color:var(--text) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #page-transaction .ta-zone-spacer{
    display:none !important;
  }

  /* Commands retain desktop visual language: icon box + title + subtitle.
     On phones they become a responsive 3-column grid instead of being cut off. */
  #page-transaction .ta-command-group{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  #page-transaction .ta-command-group .ta-divider{
    display:none !important;
  }

  #page-transaction .ta-command-group > .ta-action{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:4px 6px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    border-radius:5px !important;
    overflow:hidden !important;
  }

  #page-transaction .ta-command-group > .ta-action .ta-icon{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    flex:0 0 30px !important;
    margin:0 !important;
    border-radius:5px !important;
  }

  #page-transaction .ta-command-group > .ta-action .ta-icon svg{
    width:16px !important;
    height:16px !important;
  }

  #page-transaction .ta-command-group > .ta-action > span:last-child:not(.ta-icon){
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    line-height:1 !important;
  }

  #page-transaction .ta-command-group > .ta-action b{
    display:block !important;
    width:100% !important;
    font-size:clamp(10px,2.9vw,12px) !important;
    line-height:1.05 !important;
    font-weight:760 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Restore the browser-view subtitle on mobile. */
  #page-transaction .ta-command-group > .ta-action small{
    display:block !important;
    width:100% !important;
    margin-top:3px !important;
    font-size:clamp(7.5px,2.15vw,9px) !important;
    line-height:1 !important;
    font-weight:450 !important;
    color:var(--muted) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Full Form View remains icon-only like desktop, but fits the mobile grid. */
  #page-transaction .ta-command-group #formFullscreenBtn{
    order:99 !important;
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    margin:0 !important;
    padding:4px !important;
    justify-content:center !important;
  }
  #page-transaction .ta-command-group #formFullscreenBtn .ta-icon{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  /* The form area keeps the V47 internal-scroll behavior. */
  #page-transaction .po-form-scroll{
    padding:8px !important;
  }
}

/* Extra-small devices: use 2 columns so text never gets crushed. */
@media(max-width:340px){
  #page-transaction .ta-command-group{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #page-transaction .ta-form-title{
    font-size:15px !important;
  }
}


/* V48 mobile overflow correction */
@media(max-width:780px){
  #page-transaction .ta-command-group{
    flex:1 1 100% !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    justify-self:stretch !important;
  }
  #page-transaction .ta-command-group > .ta-action{
    box-sizing:border-box !important;
  }
}


/* ==========================================================
   V49 - PRINT COMMAND + MOBILE ICON-ONLY COMMANDS
   ========================================================== */

/* Desktop keeps text + subtitle command style. */
#page-transaction .ta-command-group #poPrintBtn{
  flex:0 0 auto !important;
}

/* Mobile: all command buttons become icon-only premium boxes.
   Form header continues to show icon + Purchase Order only. */
@media(max-width:780px){
  #page-transaction .ta-command-group{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    padding:0 !important;
  }

  #page-transaction .ta-command-group > .ta-action{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:5px !important;
    overflow:hidden !important;
  }

  #page-transaction .ta-command-group > .ta-action .ta-icon{
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    flex:0 0 31px !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:5px !important;
  }

  #page-transaction .ta-command-group > .ta-action .ta-icon svg{
    width:17px !important;
    height:17px !important;
  }

  /* Hide title/subtitle on every mobile command button. */
  #page-transaction .ta-command-group > .ta-action > span:last-child:not(.ta-icon){
    display:none !important;
  }

  /* Full Form View remains the final icon button and matches all others. */
  #page-transaction .ta-command-group #formFullscreenBtn{
    order:99 !important;
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
  }

  #page-transaction .ta-command-group #formFullscreenBtn .ta-icon{
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
  }
}

/* Narrow phones: 3 icons per row for comfortable touch size. */
@media(max-width:360px){
  #page-transaction .ta-command-group{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Very narrow phones: still 3 per row, slightly tighter. */
@media(max-width:320px){
  #page-transaction .ta-command-group{
    gap:4px !important;
  }
}


/* ==========================================================
   V50 - MOBILE SINGLE-ROW FORM BAR
   LEFT: compact readable Purchase Order identity
   RIGHT: six icon-only action buttons
   ========================================================== */
@media(max-width:780px){

  #page-transaction .transaction-actionbar-v44{
    display:grid !important;
    grid-template-columns:minmax(104px,1fr) auto !important;
    align-items:center !important;
    column-gap:5px !important;
    row-gap:0 !important;
    min-height:48px !important;
    height:48px !important;
    padding:5px 6px !important;
    overflow:hidden !important;
  }

  /* LEFT: icon + Purchase Order in one compact readable group */
  #page-transaction .ta-form-identity{
    grid-column:1 !important;
    grid-row:1 !important;
    order:1 !important;
    flex:none !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:38px !important;
    min-height:38px !important;
    padding:2px 4px !important;
    margin:0 !important;
    border:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    overflow:hidden !important;
  }

  #page-transaction .ta-form-icon{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    flex:0 0 28px !important;
    border-radius:4px !important;
  }

  #page-transaction .ta-form-icon svg{
    width:15px !important;
    height:15px !important;
  }

  #page-transaction .ta-form-copy{
    min-width:0 !important;
    flex:1 1 auto !important;
    height:auto !important;
    display:flex !important;
    align-items:center !important;
  }

  #page-transaction .ta-breadcrumb,
  #page-transaction .ta-form-desc{
    display:none !important;
  }

  #page-transaction .ta-form-title{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(11.5px,3.15vw,13.5px) !important;
    line-height:1 !important;
    font-weight:780 !important;
    letter-spacing:-.15px !important;
    color:var(--text) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #page-transaction .ta-zone-spacer{
    display:none !important;
  }

  /* RIGHT: icon-only buttons, same visual language as desktop */
  #page-transaction .ta-command-group{
    grid-column:2 !important;
    grid-row:1 !important;
    order:2 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:3px !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
  }

  #page-transaction .ta-command-group .ta-divider{
    display:none !important;
  }

  #page-transaction .ta-command-group > .ta-action{
    --v50-btn:clamp(28px,8vw,34px);
    width:var(--v50-btn) !important;
    min-width:var(--v50-btn) !important;
    max-width:var(--v50-btn) !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:5px !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
  }

  #page-transaction .ta-command-group > .ta-action .ta-icon{
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    flex:0 0 25px !important;
    margin:0 !important;
    border-radius:4px !important;
    display:grid !important;
    place-items:center !important;
  }

  #page-transaction .ta-command-group > .ta-action .ta-icon svg{
    width:14px !important;
    height:14px !important;
  }

  /* Mobile action labels stay hidden. */
  #page-transaction .ta-command-group > .ta-action > span:last-child:not(.ta-icon){
    display:none !important;
  }

  #page-transaction .ta-command-group #formFullscreenBtn{
    order:99 !important;
    width:var(--v50-btn) !important;
    min-width:var(--v50-btn) !important;
    max-width:var(--v50-btn) !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
  }

  /* Remove earlier mobile grid behavior completely. */
  #page-transaction .ta-command-group{
    grid-template-columns:none !important;
  }
}

/* Slightly tighter below 360px while keeping title readable. */
@media(max-width:360px){
  #page-transaction .transaction-actionbar-v44{
    grid-template-columns:minmax(96px,1fr) auto !important;
    column-gap:3px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }
  #page-transaction .ta-form-identity{
    gap:5px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }
  #page-transaction .ta-form-icon{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    flex-basis:26px !important;
  }
  #page-transaction .ta-form-title{
    font-size:11.5px !important;
  }
  #page-transaction .ta-command-group{
    gap:2px !important;
  }
  #page-transaction .ta-command-group > .ta-action{
    --v50-btn:28px;
    height:32px !important;
    min-height:32px !important;
  }
  #page-transaction .ta-command-group #formFullscreenBtn{
    height:32px !important;
    min-height:32px !important;
  }
  #page-transaction .ta-command-group > .ta-action .ta-icon{
    width:23px !important;
    height:23px !important;
    min-width:23px !important;
  }
}

/* 320px: retain single row, trim only the form title area if needed. */
@media(max-width:320px){
  #page-transaction .transaction-actionbar-v44{
    grid-template-columns:minmax(88px,1fr) auto !important;
  }
  #page-transaction .ta-form-title{
    font-size:11px !important;
  }
  #page-transaction .ta-command-group > .ta-action{
    --v50-btn:27px;
  }
}


/* ==========================================================
   V51 - PURCHASE ORDER FUNCTIONAL WORKFLOW
   ========================================================== */

/* Purchase Order title uses a clean stand-alone document icon. */
#page-transaction .po-title-icon{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  flex:0 0 28px !important;
  background:transparent !important;
  color:var(--primary) !important;
  border:0 !important;
  border-radius:0 !important;
}
#page-transaction .po-title-icon svg{width:22px !important;height:22px !important}

/* Full Form View is icon only, visually simpler than a text command. */
#page-transaction #formFullscreenBtn{
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  padding:0 !important;
  justify-content:center !important;
  background:var(--surface2) !important;
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)) !important;
}
#page-transaction #formFullscreenBtn .ta-icon{
  width:100% !important;height:100% !important;min-width:0 !important;
  background:transparent !important;border-radius:4px !important;
}
#page-transaction #formFullscreenBtn:hover:not(:disabled){background:var(--primarySoft) !important}

/* Disabled commands remain clearly visible but unmistakably disabled. */
#page-transaction .ta-action:disabled{
  opacity:.42 !important;
  cursor:not-allowed !important;
  filter:saturate(.25) !important;
  background:transparent !important;
}
#page-transaction .ta-action:disabled .ta-icon{box-shadow:none !important}
#page-transaction .ta-action.po-cancel-action:not(:disabled){color:var(--text) !important}
#page-transaction .ta-action.po-cancel-action:not(:disabled) .ta-icon{
  background:color-mix(in srgb,#f04438 11%,var(--surface2)) !important;color:#d92d20 !important;
}
#page-transaction .ta-action.po-cancel-action:hover:not(:disabled){background:color-mix(in srgb,#f04438 7%,var(--surface)) !important;color:#b42318 !important}

/* Save / Update spinner */
.po-btn-spinner{
  width:15px;height:15px;border-radius:50%;display:block;
  border:2px solid rgba(255,255,255,.42);border-top-color:#fff;
  animation:poSpin .7s linear infinite;
}
@keyframes poSpin{to{transform:rotate(360deg)}}

/* Thin request progress line directly under the command area. */
#transactionActionbar{position:relative !important}
.po-action-progress{
  position:absolute;right:10px;bottom:1px;width:min(520px,48%);height:2px;
  border-radius:3px;overflow:hidden;background:transparent;pointer-events:none;
}
.po-action-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:3px}
.po-action-progress.running{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.po-action-progress.running i{animation:poRequest 1.4s cubic-bezier(.2,.75,.22,1) forwards}
@keyframes poRequest{0%{width:4%}35%{width:42%}72%{width:78%}100%{width:96%}}

/* Dedicated Purchase Order modal system */
.po-flow-overlay{
  display:none;position:fixed;inset:0;background:rgba(24,32,42,.34);
  backdrop-filter:blur(3px);z-index:370;
}
.po-flow-overlay.show{display:block;animation:poFade .14s ease}
.po-flow-modal{
  display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.985);
  width:min(520px,calc(100vw - 26px));max-height:min(720px,calc(100dvh - 28px));
  background:var(--surface);color:var(--text);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
  border-radius:5px;box-shadow:0 24px 70px rgba(28,42,55,.24);z-index:380;overflow:hidden;
}
.po-flow-modal.show{display:flex;flex-direction:column;animation:poModalIn .16s ease forwards}
.po-flow-modal.wide{width:min(980px,calc(100vw - 30px))}
.po-flow-head{
  min-height:58px;display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2));
}
.po-flow-head-icon{width:34px;height:34px;min-width:34px;display:grid;place-items:center;border-radius:5px;background:var(--primarySoft);color:var(--primary)}
.po-flow-head-icon svg{width:18px;height:18px}
.po-flow-modal.danger .po-flow-head-icon{background:#fff0ee;color:#d92d20}
.po-flow-head-copy{min-width:0;flex:1}.po-flow-head-copy b{display:block;font-size:15px;font-weight:760;line-height:1.1}.po-flow-head-copy small{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.po-flow-close{width:32px;height:32px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}.po-flow-close:hover{background:var(--surface3);color:var(--text)}
.po-flow-body{padding:14px;overflow:auto;min-height:0}
.po-flow-foot{min-height:52px;padding:8px 12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:7px;background:var(--surface2)}
.po-flow-foot:empty{display:none}
.po-flow-foot .btn{min-height:34px;font-size:11px;font-weight:680;border-radius:5px}
.po-danger-btn{background:#d92d20 !important;border-color:#d92d20 !important;color:#fff !important}.po-danger-btn:hover{background:#b42318 !important}
.po-delete-alert{display:flex;gap:11px;padding:12px;border:1px solid #f4aaa4;background:#fff7f6;border-radius:5px;color:#7a271a}.po-delete-alert-icon{width:30px;height:30px;min-width:30px;border-radius:50%;display:grid;place-items:center;background:#d92d20;color:#fff;font-weight:800}.po-delete-alert b{font-size:13px}.po-delete-alert p{margin:4px 0 0;font-size:11px;line-height:1.45;color:#914b42}
.po-confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.po-confirm-grid>span{padding:9px 10px;border:1px solid var(--line);border-radius:5px;background:var(--surface2)}.po-confirm-grid small{display:block;font-size:9.5px;color:var(--muted);margin-bottom:3px}.po-confirm-grid b{display:block;font-size:11.5px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-delete-note{margin-top:11px;padding:10px;border-left:3px solid #f79009;background:color-mix(in srgb,#f79009 7%,var(--surface));border-radius:0 5px 5px 0}.po-delete-note b{display:block;font-size:11px}.po-delete-note span{display:block;margin-top:3px;font-size:10.5px;line-height:1.4;color:var(--muted)}

/* View Record: search + enterprise grid */
.po-record-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:10px}.po-record-search{height:38px;flex:1;min-width:0;border:1px solid var(--line);border-radius:5px;background:var(--surface2);display:flex;align-items:center;gap:7px;padding:0 10px}.po-record-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 11%,transparent)}.po-record-search svg{width:16px;height:16px;color:var(--muted)}.po-record-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:11.5px}.po-record-toolbar>span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.po-record-table-wrap{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:5px;background:var(--surface)}
.po-record-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}.po-record-table th{position:sticky;top:0;z-index:2;height:36px;padding:0 10px;text-align:left;background:var(--surface2);color:var(--muted);font-size:9.5px;font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}.po-record-table td{height:42px;padding:0 10px;border-bottom:1px solid var(--line);white-space:nowrap}.po-record-table tbody tr:hover{background:var(--primarySoft)}.po-row-open{height:28px;padding:0 10px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--primary);font-size:10px;font-weight:700;cursor:pointer}.po-row-open:hover{background:var(--primarySoft);border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}.po-status{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:10px;font-size:9px;font-weight:700;background:var(--surface3);color:var(--muted)}.po-status.approved,.po-status.closed{background:#ecf8f1;color:#16834a}.po-status.pending,.po-status.draft{background:#fff5df;color:#a15c00}.po-empty-row{text-align:center !important;height:80px !important;color:var(--muted)}
body.po-modal-open{overflow:hidden !important}
@keyframes poFade{from{opacity:0}to{opacity:1}}@keyframes poModalIn{from{opacity:0;transform:translate(-50%,-48%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Mobile workflow keeps the V50 one-row header, with even smaller pure PO icon. */
@media(max-width:780px){
  #page-transaction .po-title-icon{width:24px !important;height:24px !important;min-width:24px !important;flex-basis:24px !important}
  #page-transaction .po-title-icon svg{width:18px !important;height:18px !important}
  .po-action-progress{left:6px;right:6px;bottom:1px;width:auto}
  .po-flow-modal,.po-flow-modal.wide{width:calc(100vw - 18px);max-height:calc(100dvh - 18px)}
  .po-flow-head{min-height:52px;padding:7px 9px}.po-flow-head-copy b{font-size:14px}.po-flow-body{padding:10px}.po-confirm-grid{grid-template-columns:1fr}.po-record-toolbar{align-items:stretch;flex-direction:column}.po-record-toolbar>span{padding-left:2px}.po-record-table-wrap{max-height:56dvh}.po-record-table{min-width:760px}
}


/* =========================================================
   V52 - HEADINGLESS PURCHASE ORDER FORM SURFACE
   ========================================================= */

/* Purchase Order controls live in a clean form surface without a section header. */
#page-transaction > .po-workspace-panel{
  border-radius:5px !important;
  overflow:visible !important;
}

#page-transaction > .po-workspace-panel > .po-form-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:10px !important;
  border-radius:5px !important;
}

#page-transaction > .po-workspace-panel > .po-form-scroll > .form-grid{
  margin-top:0 !important;
}

/* Full Form View visually stays active even while Save / Update are busy. */
#page-transaction #formFullscreenBtn{
  opacity:1 !important;
  filter:none !important;
}
#page-transaction #formFullscreenBtn:not(:disabled){
  cursor:pointer !important;
}

/* Reusable headed panel design remains available in Control Studio and other forms. */
#page-controls .control-card > .panel-head,
.panel:not(.po-workspace-panel) > .panel-head{
  display:flex;
}