:root{
  --accent:#0877f9;
  --accent2:#18b7e9;
  --accent-soft:rgba(8,119,249,.12);
  --good:#2ccf78;
  --good-soft:rgba(44,207,120,.12);
  --warn:#e8ad45;
  --warn-soft:rgba(232,173,69,.12);
  --bad:#ff5e69;
  --bad-soft:rgba(255,94,105,.12);
  --bg:#0b1016;
  --bg2:#0e141c;
  --panel:#141b24;
  --panel2:#1a232e;
  --panel3:#202b38;
  --line:#2a3544;
  --line2:#3a485a;
  --text:#f2f6fb;
  --muted:#a8b3c1;
  --muted2:#7e8a99;
  --os-badge:#222c37;
  --os-border:#3c4a59;
  --os-logo:#eef5fb;
  --windows:#eef7ff;
  --android:#2aa469;
  --android-eye:#123526;
  --apple:#9aa3ad;
  --other-icon:#607184;
  --other-glyph:#eef3f8;
  --surface-hover:#1c2733;
  --shadow:0 18px 50px rgba(0,0,0,.30);
  --shadow-soft:0 8px 24px rgba(0,0,0,.16);
  --sidebar:clamp(174px,8.1vw,202px);
  --topbar:clamp(64px,5vh,78px);
  --content-pad:clamp(12px,.75vw,18px);
  --drawer:clamp(410px,28vw,560px);
  --radius:.875rem;
  --radius-sm:.625rem;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:.90rem;
  --small:.74rem;
  --tiny:.66rem;
  --title:1.2rem;
  --row:3.45rem;
}
html[data-theme="light"]{
  --bg:#bfc7d0;
  --bg2:#b6c0ca;
  --panel:#dde3e9;
  --panel2:#d2dae2;
  --panel3:#c7d1db;
  --line:#a7b4c1;
  --line2:#8f9ead;
  --text:#182534;
  --muted:#536476;
  --muted2:#6f7e8e;
  --accent-soft:rgba(8,119,249,.10);
  --good:#168c51;
  --good-soft:rgba(22,140,81,.11);
  --warn:#9e6b10;
  --warn-soft:rgba(158,107,16,.11);
  --bad:#cf3f4a;
  --bad-soft:rgba(207,63,74,.10);
  --os-badge:#eef3f7;
  --os-border:#bdc8d2;
  --os-logo:#263645;
  --windows:#1677e8;
  --android:#187b4e;
  --android-eye:#dcefe5;
  --apple:#6f7882;
  --other-icon:#6b7a89;
  --other-glyph:#eef3f7;
  --surface-hover:#cbd4dd;
  --shadow:0 18px 50px rgba(47,61,80,.13);
  --shadow-soft:0 8px 24px rgba(47,61,80,.09);
}
*{
box-sizing:border-box}
html{font-size:clamp(16px,calc(11px + .52vw),24px);color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html,body{
margin:0;
width:100%;
height:100%;
overflow:hidden;
background:var(--bg)}
body{
font-family:var(--font);
font-size:var(--body);
font-weight:450;
color:var(--text);
background:radial-gradient(circle at 12% -12%,rgba(8,119,249,.12),transparent 30%),linear-gradient(180deg,var(--bg),var(--bg2))}
button,input,textarea,select{
font:inherit;
color:inherit}
button{
cursor:pointer}
button,input,textarea,select{
outline:none}
.hidden{
display:none!important}
svg.icon{
width:1.125rem;
height:1.125rem;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round}
.muted{
color:var(--muted)}
.app{
height:100dvh;
display:grid;
grid-template-columns:var(--sidebar) minmax(0,1fr);
overflow:hidden}
.sidebar{
height:100dvh;display:flex;flex-direction:column;gap:.55rem;padding:10px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(18px);z-index:40;overflow:hidden
}
.brand{
min-height:calc(var(--topbar) - 20px);display:flex;align-items:center;gap:.36rem;padding:4px 3px 8px;min-width:0
}
.brand .rd-logo{
width:1.46rem;height:1.46rem;display:block;flex:none
}
.brand-title{
font-size:.68rem;font-weight:850;letter-spacing:-.012em;white-space:nowrap
}
.brand-sub{display:none}
.nav{
display:flex;
flex-direction:column;
gap:0.1875rem}
.nav-btn{
min-height:2.4rem;border:0;border-radius:.625rem;background:transparent;color:var(--muted);display:flex;align-items:center;gap:.54rem;padding:0 .6rem;font-size:.70rem;font-weight:720;text-align:left;transition:.15s
}
.nav-btn:hover{
background:var(--panel2);
color:var(--text)}
.nav-btn.active{
color:#2a8bff;
background:var(--accent-soft);
box-shadow:inset 0 0 0 0.0625rem rgba(8,119,249,.24)}
.nav-btn .icon{
width:1.0625rem;
height:1.0625rem;
flex:none}
.sidebar-foot{
margin-top:auto;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
padding:0.5625rem 0.625rem}
.side-version{
font-size:.62rem;
font-weight:780;
color:var(--text);
white-space:nowrap}
.side-status{
margin-top:0.375rem;
display:flex;
align-items:center;
gap:0.4375rem;
font-size:0.6875rem;
color:var(--muted)}
.dot{
width:0.4375rem;
height:0.4375rem;
border-radius:62.4375rem;
background:var(--muted2);
display:inline-block;
flex:none}
.dot.good{
background:var(--good);
box-shadow:0 0 0 0.1875rem var(--good-soft)}
.dot.warn{
background:var(--warn)}
.dot.bad{
background:var(--bad)}
.dot.off{
background:#768596}
.main{
height:100dvh;
min-width:0;
display:flex;
flex-direction:column;
overflow:hidden}
.topbar{
height:var(--topbar);flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 clamp(18px,1vw,28px);background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(18px);z-index:35
}
.desktop-crumb{
  position:relative;
  padding-left:.85rem;
}
.desktop-crumb::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:1.65rem;
  transform:translateY(-50%);
  background:var(--line);
}
.mobile-brand{
display:none}
.crumb{min-width:0;max-width:min(60vw,920px)}
.crumb strong{font-size:.94rem;font-weight:850;letter-spacing:-.012em;white-space:nowrap}
.crumb span{display:block;color:var(--muted);font-size:.62rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{
display:flex;
align-items:center;
gap:0.4375rem}
.status-wrap{
position:relative}
.status-btn,.icon-btn,.lang-btn{
height:2.375rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.4375rem;
box-shadow:var(--shadow-soft)}
.status-btn{
padding:0 0.75rem;
font-size:0.75rem;
font-weight:800}
.status-btn .status-short{
white-space:nowrap}
.status-pop{
position:absolute;
right:0;
top:2.75rem;
width:16.25rem;
border:0.0625rem solid var(--line);
background:var(--panel);
box-shadow:var(--shadow);
border-radius:0.75rem;
padding:0.4375rem;
display:none;
z-index:80}
.status-wrap:hover .status-pop,.status-wrap:focus-within .status-pop{
display:block}
.status-line{
display:flex;
align-items:center;
justify-content:space-between;
gap:0.75rem;
padding:0.5rem 0.3125rem;
font-size:0.6875rem;
color:var(--muted);
border-bottom:0.0625rem solid var(--line)}
.status-line:last-child{
border:0}
.status-line strong{
color:var(--text);
font-weight:760}
.icon-btn{
width:2.375rem;
padding:0}
.icon-btn:hover,.lang-btn:hover,.status-btn:hover{
border-color:var(--line2);
background:var(--panel3)}
.lang-btn{
min-width:2.625rem;
padding:0 0.625rem;
font-size:0.6875rem;
font-weight:850}
.content{
height:calc(100dvh - var(--topbar));
min-height:0;
padding:var(--content-pad);
overflow:hidden}
.page{
display:none;
height:100%;
min-height:0;
min-width:0}
.page.active{
display:flex;
flex-direction:column}
.card{
background:var(--panel);
border:0.0625rem solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow-soft);
min-width:0}
.fill-card{
height:100%;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden}
.toolbar{padding:.62rem;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(18rem,1fr) auto;gap:.65rem;align-items:center;flex:none}
.toolbar-stack{
display:flex;
align-items:center;
gap:0.5rem;
min-width:0}
.search{
position:relative;
display:block;
min-width:0;
flex:1}
.search .icon{
position:absolute;
left:0.75rem;
top:50%;
transform:translateY(-50%);
color:var(--muted);
pointer-events:none}
.search input{
width:100%;
height:2.5rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
padding:0 0.75rem 0 2.375rem;
font-size:0.8125rem}
.search input:focus{
border-color:rgba(8,119,249,.65);
box-shadow:0 0 0 0.1875rem rgba(8,119,249,.10)}
.search input::placeholder{color:var(--muted2)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 72%,transparent);
  outline-offset:2px
}
.seg{
display:flex;
padding:0.1875rem;
background:var(--panel2);
border:0.0625rem solid var(--line);
border-radius:0.625rem;
gap:0.125rem;
white-space:nowrap}
.seg button{
height:2rem;
border:0;
background:transparent;
color:var(--muted);
padding:0 0.625rem;
border-radius:0.5rem;
font-size:0.6875rem;
font-weight:780;
white-space:nowrap;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.35rem;
line-height:1}
.seg button:hover{
color:var(--text);
background:var(--panel3)}
.seg button.active{
background:var(--panel);
color:#2a8bff;
box-shadow:0 0.125rem 0.5625rem rgba(0,0,0,.12)}
.btn{
min-height:2.375rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
padding:0 0.75rem;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.4375rem;
font-size:0.75rem;
font-weight:780;
white-space:nowrap}
.btn:hover{
border-color:var(--line2);
background:var(--panel3)}
.btn.primary{
background:linear-gradient(180deg,#1687ff,#0870e8);
border-color:#2a90ff;
color:#fff}
.btn.danger{
color:var(--bad);
border-color:rgba(255,94,105,.35);
background:var(--bad-soft)}
.btn.good{
color:var(--good);
border-color:rgba(44,207,120,.3);
background:var(--good-soft)}
.kpis{
display:flex;
align-items:center;
gap:0.4375rem;
flex-wrap:wrap}
.kpi{
height:2.5rem;
min-width:5.875rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
padding:0 0.625rem;
display:flex;
align-items:center;
gap:0.4375rem;
white-space:nowrap}
.kpi span{
font-size:0.625rem;
color:var(--muted)}
.kpi strong{
font-size:0.875rem;
margin-left:auto}
.kpi .dot{
width:0.375rem;
height:0.375rem}
.kpi-filter{
  appearance:none;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:border-color .14s,background .14s,box-shadow .14s,transform .14s;
}
.kpi-filter:hover{
  border-color:var(--line2);
  background:var(--surface-hover);
}
.kpi-filter.active{
  border-color:rgba(8,119,249,.48);
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px rgba(8,119,249,.08);
}
.kpi-filter.active span:not(.dot),.kpi-filter.active strong{color:var(--text)}
.table-wrap{
flex:1;
min-height:0;
overflow:auto;
scrollbar-width:thin;
scrollbar-color:var(--line2) transparent}
table{
width:100%;
border-collapse:collapse;
min-width:57.5rem}
th{
height:2.375rem;
text-align:left;
color:var(--muted);
font-size:0.625rem;
text-transform:uppercase;
letter-spacing:.7px;
font-weight:820;
padding:0 0.8125rem;
background:var(--panel2);
position:sticky;
top:0;
z-index:3}
td{
height:var(--row);
padding:0.4375rem 0.8125rem;
border-top:0.0625rem solid var(--line);
font-size:0.8125rem;
color:var(--muted);
vertical-align:middle}
tbody tr{
transition:.12s;
cursor:pointer}
tbody tr:hover{background:var(--surface-hover)}
tbody tr.selected{
background:var(--accent-soft);
box-shadow:inset 0.1875rem 0 0 var(--accent)}
.device-cell{
display:flex;
align-items:center;
gap:0.75rem;
min-width:13.125rem}
.device-name{
color:var(--text);
font-weight:780;
white-space:nowrap}
.device-sub{
font-size:0.625rem;
color:var(--muted);
margin-top:0.125rem}
.device-icon{width:2.65rem;height:2.65rem;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel3),var(--panel2));border-radius:.70rem;position:relative;display:inline-block;flex:none;transition:border-color .15s,box-shadow .15s,transform .15s;overflow:visible}
.device-icon.clickable{cursor:pointer}
.device-icon.clickable:hover{border-color:rgba(8,119,249,.62);box-shadow:0 0 0 3px rgba(8,119,249,.08)}
.device-icon .device-type-svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1.48rem;height:1.48rem;color:#278dff;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.os-badge{position:absolute;right:-.28rem;bottom:-.28rem;width:1.48rem;height:1.48rem;border-radius:.46rem;background:var(--os-badge);border:1px solid var(--os-border);display:grid;place-items:center;box-shadow:0 2px 7px rgba(0,0,0,.16);overflow:hidden;color:var(--os-logo)}
.os-badge svg{width:72%;height:72%;display:block}
.os-badge.other svg{width:76%;height:76%}

.os-badge img{width:72%;height:72%;display:block;object-fit:contain}
.os-svg{display:block;width:100%;height:100%}
.os-windows{fill:var(--windows)}
.os-macos{fill:var(--apple)}
.os-android{fill:var(--android)}
.os-android .android-ant{fill:none;stroke:var(--android);stroke-width:1.2;stroke-linecap:round}
.os-android .android-eye{fill:var(--android-eye)}
.os-other circle:first-child{fill:var(--other-icon)}
.os-other path{fill:none;stroke:var(--other-glyph);stroke-width:2;stroke-linecap:round}
.os-other .other-dot{fill:var(--other-glyph)}
.os-linux-img{filter:grayscale(1) contrast(1.12)}
html[data-theme="light"] .os-linux-img{filter:grayscale(1) contrast(1.08) brightness(1.02)}
.id{
font-variant-numeric:tabular-nums;
color:var(--text);
font-weight:650}
.copy-id{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  margin:0;
  font:inherit;
  font-variant-numeric:tabular-nums;
  cursor:copy;
  border-radius:.3rem;
  white-space:nowrap;
  transition:color .12s,background .12s;
}
.copy-id:hover{color:#4c9dff;background:var(--accent-soft)}
.copy-id.compact{font-size:inherit}
.copy-id.session-id{font-size:inherit;color:var(--muted)}

.status-chip{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.4375rem;
border-radius:62.4375rem;
font-weight:760;
font-size:0.6875rem;
line-height:1;
white-space:nowrap}
.status-chip.online{
color:var(--good)}
.status-chip.offline{
color:var(--muted)}
.status-chip.blocked{
color:var(--bad)}
.row-actions{
display:flex;
justify-content:flex-end;
gap:0.3125rem}
.mini-btn{
width:2.125rem;
height:2.125rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.5625rem;
display:grid;
place-items:center;
color:var(--muted)}
.mini-btn:hover{
color:#278dff;
border-color:rgba(8,119,249,.42);
background:var(--accent-soft)}
.table-foot{
min-height:2.375rem;
display:flex;
justify-content:space-between;
align-items:center;
padding:0.375rem 0.75rem;
border-top:0.0625rem solid var(--line);
color:var(--muted);
font-size:0.6875rem;
flex:none}
.mobile-device-list{
display:none}
.context-menu,.icon-picker{
position:fixed;
z-index:160;
border:1px solid var(--line);
background:var(--panel);
box-shadow:var(--shadow);
border-radius:.6875rem;
padding:.375rem;
display:none
}
.context-menu.open,.icon-picker.open{display:block}
.context-menu{width:11.875rem}
.menu-item{
width:100%;
height:2.375rem;
border:0;
background:transparent;
color:var(--text);
border-radius:0.5rem;
padding:0 0.625rem;
display:flex;
align-items:center;
gap:0.5625rem;
text-align:left;
font-size:0.75rem}
.menu-item:hover{
background:var(--panel2)}
.menu-item.danger{
color:var(--bad)}
.icon-picker{width:18rem}
.picker-title{
font-size:0.6875rem;
color:var(--muted);
padding:0.3125rem 0.375rem}
.picker-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0.3125rem}
.picker-btn{min-height:4rem;border:1px solid var(--line);background:var(--panel2);border-radius:.58rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.32rem;font-size:.62rem;color:var(--muted)}
.picker-btn:hover{
border-color:rgba(8,119,249,.45);
color:var(--text)}
.picker-btn .device-type-svg{width:1.65rem;height:1.65rem;color:#278dff;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.picker-os-badge{position:relative!important;right:auto!important;bottom:auto!important;width:1.75rem!important;height:1.75rem!important}
.drawer{
position:fixed;
right:0;
top:var(--topbar);
bottom:0;
width:var(--drawer);
background:var(--panel);
border-left:0.0625rem solid var(--line);
box-shadow:-18px 0 2.8125rem rgba(0,0,0,.24);
z-index:120;
transform:translateX(102%);
transition:transform .2s ease;
display:flex;
flex-direction:column}
.drawer.open{
transform:translateX(0)}
.drawer-head{
height:3.25rem;
flex:none;
border-bottom:0.0625rem solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 0.8125rem}
.drawer-head strong{
font-size:0.875rem}
.drawer-body{
flex:1;
min-height:0;
overflow:auto;
padding:0.875rem}
.device-hero{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:0.75rem;
align-items:center;
margin-bottom:0.8125rem}
.device-hero .device-icon{
width:3.25rem;
height:3.25rem}
.device-hero .device-type-svg{
width:1.875rem;
height:1.875rem}
.editable-name input{
width:100%;
border:0;
background:transparent;
font-size:1.125rem;
font-weight:850;
padding:0}
.drawer-tabs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0.25rem;
padding:0.25rem;
background:var(--panel2);
border:0.0625rem solid var(--line);
border-radius:0.625rem;
margin-bottom:0.75rem}
.drawer-tabs button{
height:2.125rem;
border:0;
border-radius:0.5rem;
background:transparent;
color:var(--muted);
font-size:0.6875rem;
font-weight:760}
.drawer-tabs button.active{
background:var(--panel);
color:#278dff}
.detail-grid{
display:grid;
grid-template-columns:8.125rem minmax(0,1fr);
gap:0;
border:0.0625rem solid var(--line);
border-radius:0.6875rem;
overflow:hidden}
.detail-row{
display:contents}
.detail-grid label,.detail-grid .value{
padding:0.625rem 0.6875rem;
border-bottom:0.0625rem solid var(--line);
font-size:0.6875rem}
.detail-grid label{
background:var(--panel2);
color:var(--muted)}
.detail-grid .value{
color:var(--text);
min-width:0}
.detail-grid .detail-row:last-child>*{
border-bottom:0}
.field{
display:flex;
flex-direction:column;
gap:0.375rem}
.field label{
font-size:0.625rem;
color:var(--muted);
font-weight:720}
.field input,.field textarea,.field select{
width:100%;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.5625rem;
padding:0.5625rem 0.625rem;
font-size:0.75rem}
.field textarea{
min-height:8rem;
resize:vertical;
line-height:1.45}
.drawer-actions{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:0.4375rem;
margin-top:0.75rem}
.drawer-actions .btn{width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
.device-hero>.status-chip{min-width:6.7rem;justify-content:center}
.drawer-actions .wide{
grid-column:1/-1}
.drawer-session-list{
display:flex;
flex-direction:column;
gap:0.4375rem}
.session-mini{
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
padding:0.625rem;
cursor:pointer}
.session-mini:hover{
border-color:var(--line2);
background:var(--panel3)}
.session-mini-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:0.5rem}
.session-mini strong{
font-size:0.75rem}
.session-mini span{
font-size:0.625rem;
color:var(--muted)}
.session-mini-note{
margin-top:0.375rem;
font-size:0.6875rem;
color:var(--text);
line-height:1.4}
.sessions-shell{height:100%;display:flex;flex-direction:column;min-height:0}
.session-stream{flex:1;min-height:0;overflow:auto;padding:.45rem .65rem .8rem;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.day-group{margin-bottom:.55rem}
.day-head{height:2rem;position:sticky;top:-1px;z-index:2;display:flex;align-items:center;gap:.5rem;padding:0 .4rem;background:linear-gradient(180deg,var(--panel) 82%,color-mix(in srgb,var(--panel) 88%,transparent));color:var(--muted);backdrop-filter:blur(8px)}
.day-head strong{font-size:.69rem;color:var(--text)}
.day-head span{font-size:.56rem;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:.12rem .38rem}
.session-row{display:grid;grid-template-columns:2.1rem minmax(10.5rem,1.05fr) 1.2rem minmax(10.5rem,1.05fr) 4.6rem 5.2rem 4.6rem minmax(11rem,1.35fr) 2.2rem;gap:.55rem;align-items:center;min-height:3.55rem;padding:.42rem .52rem;border-top:1px solid var(--line);border-radius:.45rem;transition:background .12s,border-color .12s}
.session-row:hover{background:var(--surface-hover)}
.session-dir,.session-connector,.session-time,.session-duration,.session-mode{display:flex;align-items:center;justify-content:center;min-width:0}
.session-arrow{width:1.72rem;height:1.72rem;border-radius:.52rem;display:grid;place-items:center;flex:none}
.session-arrow .icon{width:.94rem;height:.94rem}
.session-arrow.out{color:var(--good);background:var(--good-soft)}
.session-arrow.in{color:var(--bad);background:var(--bad-soft)}
.session-party{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.55rem;min-width:0}
.session-party .device-icon{width:2rem;height:2rem;border-radius:.52rem}
.session-party .device-type-svg{width:1.12rem;height:1.12rem}
.session-party .os-badge{display:none}
.session-party strong{display:block;font-size:.70rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-party span{display:block;font-size:.57rem;color:var(--muted);margin-top:.04rem;font-variant-numeric:tabular-nums}
.session-connector{color:var(--muted2);font-size:.82rem}
.session-meta{font-size:.62rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.session-note{font-size:.62rem;color:var(--text);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mode-badge{display:inline-flex;align-items:center;justify-content:center;height:1.5rem;padding:0 .45rem;border-radius:999px;border:1px solid var(--line);background:var(--panel2);font-size:.57rem;font-weight:760;color:var(--muted);text-transform:lowercase}
.mode-badge.relay{color:#62a8ff;border-color:rgba(8,119,249,.28);background:var(--accent-soft)}
.log-stream{
flex:1;
min-height:0;
overflow:auto;
padding:0.5rem 0.625rem 0.75rem}
.log-row{
display:grid;
grid-template-columns:4.5rem 5.125rem 4.875rem minmax(0,1fr);
gap:0.625rem;
align-items:center;
min-height:3.25rem;
padding:0.4375rem 0.5625rem;
border-top:0.0625rem solid var(--line);
border-radius:0.5rem;
transition:.12s}
.log-row:hover{background:var(--surface-hover);box-shadow:inset 3px 0 0 rgba(8,119,249,.55)}
.log-time{
font-size:0.6875rem;
color:var(--muted);
font-variant-numeric:tabular-nums;
display:flex;
align-items:center;
height:100%}
.level{
height:1.5625rem;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.3125rem;
padding:0 0.5rem;
border-radius:62.4375rem;
font-size:0.5625rem;
font-weight:850;
text-transform:uppercase;
letter-spacing:.45px}
.level:before{
content:"";
width:0.375rem;
height:0.375rem;
border-radius:62.4375rem}
.level.error{
color:var(--bad);
background:var(--bad-soft)}
.level.error:before{
background:var(--bad)}
.level.warn{
color:var(--warn);
background:var(--warn-soft)}
.level.warn:before{
background:var(--warn)}
.level.info{
color:#4d9cff;
background:var(--accent-soft)}
.level.info:before{
background:#4d9cff}
.level.success{
color:var(--good);
background:var(--good-soft)}
.level.success:before{
background:var(--good)}
.log-source{
font-size:0.625rem;
font-weight:800;
color:var(--muted);
text-transform:uppercase}
.log-message{
min-width:0}
.log-message strong{
font-size:0.6875rem;
color:var(--text);
display:block}
.log-message span{
display:block;
font-size:0.625rem;
color:var(--muted);
margin-top:0.125rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.device-link{
margin-top:0.3125rem;
border:0;
background:transparent;
color:#4c9dff;
padding:0;
font-size:0.625rem;
text-align:left}
.log-filter-btn{
display:inline-flex!important;
align-items:center;
gap:0.375rem}
.log-filter-btn .filter-dot{
width:0.375rem;
height:0.375rem;
border-radius:62.4375rem;
background:var(--muted)}
.log-filter-btn[data-filter="error"] .filter-dot{
background:var(--bad)}
.log-filter-btn[data-filter="warn"] .filter-dot{
background:var(--warn)}
.log-filter-btn[data-filter="info"] .filter-dot{
background:#4d9cff}
.log-filter-btn[data-filter="success"] .filter-dot{
background:var(--good)}
.clients-shell{
height:100%;
min-height:0;
display:flex;
flex-direction:column}
.clients-toolbar{
padding:0.625rem;
border-bottom:0.0625rem solid var(--line);
display:grid;
grid-template-columns:minmax(18rem,1fr) auto;
grid-template-areas:"search controls" "summary summary";
align-items:center;
gap:0.5rem 0.625rem}
.client-search{grid-area:search;max-width:48rem}
.clients-controls{grid-area:controls;display:flex;align-items:center;gap:.4375rem;min-width:0}
.clients-summary{grid-area:summary;display:flex;gap:0.4375rem;align-items:center;flex-wrap:wrap}
.compact-select{height:2.375rem;border:1px solid var(--line);background:var(--panel2);border-radius:.625rem;padding:0 2rem 0 .7rem;font-size:.68rem;font-weight:720;color:var(--text)}
.view-switch{flex:none;position:relative}
.view-switch button{
position:relative;
width:2.25rem;
min-width:2.25rem;
padding:0;
gap:0;
justify-content:center;
overflow:visible
}
.view-switch .icon{width:.95rem;height:.95rem;flex:none}
.view-switch button>span{
position:absolute;
left:50%;
top:calc(100% + .5rem);
transform:translate(-50%,-.15rem);
padding:.32rem .5rem;
border:1px solid var(--line2);
border-radius:.45rem;
background:var(--panel);
color:var(--text);
box-shadow:0 .4rem 1.2rem rgba(0,0,0,.18);
font-size:.62rem;
font-weight:760;
line-height:1;
opacity:0;
visibility:hidden;
pointer-events:none;
z-index:50;
transition:opacity .12s ease,transform .12s ease,visibility .12s
}
.view-switch button:hover>span,
.view-switch button:focus-visible>span{
opacity:1;
visibility:visible;
transform:translate(-50%,0)
}
.clients-grid{
flex:1;
min-height:0;
overflow:auto;
padding:0.625rem;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(21.25rem,1fr));
grid-auto-rows:max-content;
gap:0.625rem}
.company-card{
padding:0.75rem;
transition:border-color .15s,box-shadow .15s,transform .15s
}
.company-card:hover{
  border-color:var(--line2);
  box-shadow:0 10px 26px rgba(0,0,0,.10)
}
.company-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:0.625rem}
.company-ident{
display:flex;
align-items:center;
gap:0.625rem;
min-width:0}
.company-avatar{
width:2.625rem;
height:2.625rem;
border-radius:0.6875rem;
background:linear-gradient(145deg,var(--accent-soft),rgba(24,183,233,.14));
border:0.0625rem solid rgba(8,119,249,.26);
display:grid;
place-items:center;
color:#2b8cff;
font-weight:900;
font-size:0.875rem}
.company-name{
font-size:0.875rem;
font-weight:850;
color:var(--text)}
.company-meta{
font-size:0.625rem;
color:var(--muted);
margin-top:0.125rem}
.company-kpis{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0.375rem;
margin:0.6875rem 0}
.company-kpi{
padding:0.5rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.5625rem}
.company-kpi span{
display:block;
font-size:0.5625rem;
color:var(--muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.company-kpi strong{
display:block;
font-size:0.875rem;
margin-top:0.125rem}
.client-list{
display:flex;
flex-direction:column;
gap:0.3125rem}
.client-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
gap:0.5rem;
align-items:center;
padding:0.4375rem 0.5rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.5625rem;
transition:background .12s,border-color .12s
}
.client-row:hover{background:var(--surface-hover);border-color:var(--line2)}
.client-person strong{
display:block;
font-size:0.6875rem}
.client-person span{
display:block;
font-size:0.5625rem;
color:var(--muted);
margin-top:0.0625rem}
.role-badge{
font-size:0.5625rem;
color:var(--muted);
border:0.0625rem solid var(--line);
border-radius:62.4375rem;
padding:0.25rem 0.4375rem}
.client-row-actions{
display:flex;
gap:0.25rem}
.copy-link{
width:1.875rem;
height:1.875rem}
.company-actions{
display:flex;
gap:0.375rem;
margin-top:0.5625rem}
.company-actions .btn{
flex:1}
.clients-grid.compact{grid-template-columns:1fr;gap:.42rem}
.clients-grid.compact .company-card{display:grid;grid-template-columns:minmax(14rem,1.2fr) minmax(24rem,1.6fr) auto;align-items:center;gap:.65rem;padding:.58rem .68rem}
.clients-grid.compact .company-head{min-width:0;align-items:center}
.clients-grid.compact .company-head>.company-status{
width:1.7rem;
height:1.7rem;
min-width:1.7rem;
padding:0;
justify-content:center;
gap:0;
line-height:1
}
.clients-grid.compact .company-head>.company-status .status-text{display:none}
.clients-grid.compact .company-head>.company-status .dot{margin:0}
.clients-grid.compact .company-avatar{width:2.25rem;height:2.25rem;font-size:.76rem}
.clients-grid.compact .company-kpis{margin:0;grid-template-columns:repeat(4,minmax(5.5rem,1fr));min-width:0}
.clients-grid.compact .company-kpi{padding:.4rem .5rem}
.clients-grid.compact .client-list{display:none}
.clients-grid.compact .company-actions{margin:0;min-width:11rem}
.clients-grid.compact .company-actions .btn{min-height:2.1rem;padding:0 .58rem;font-size:.66rem}

.client-portal{
position:fixed;
inset:0;
background:var(--bg);
z-index:260;
display:none;
flex-direction:column}
.client-portal.open{
display:flex}
.portal-top{
height:4rem;
flex:none;
border-bottom:0.0625rem solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 1.125rem;
background:var(--panel)}
.portal-provider{
display:flex;
align-items:center;
gap:0.625rem}
.portal-provider .rd-logo{
width:2.25rem;
height:2.25rem;
flex:none}
.portal-provider strong{
display:block;
font-size:0.875rem}
.portal-provider span{
display:block;
font-size:0.625rem;
color:var(--muted);
margin-top:0.0625rem}
.portal-body{
flex:1;
min-height:0;
overflow:auto;
padding:1.125rem;
max-width:86.25rem;
width:100%;
margin:0 auto}
.portal-hero{
display:grid;
grid-template-columns:minmax(22rem,1.55fr) repeat(4,minmax(7.25rem,.62fr));
gap:.625rem;
margin-bottom:.625rem}
.portal-welcome{
padding:1.125rem;
background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--panel) 75%,var(--accent) 25%))}
.portal-eyebrow{
font-size:0.625rem;
color:#69aaff;
font-weight:850;
text-transform:uppercase;
letter-spacing:.8px}
.portal-welcome h2{
font-size:1.5rem;
margin:0.375rem 0 0.3125rem;
letter-spacing:-.6px}
.portal-welcome p{
font-size:0.6875rem;
color:var(--muted);
margin:0;
line-height:1.5}
.portal-metric{
padding:0.875rem;
display:flex;
flex-direction:column;
justify-content:center}
.portal-metric span{
font-size:0.625rem;
color:var(--muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.portal-metric strong{
font-size:1.625rem;
margin-top:0.25rem;
letter-spacing:-.7px}
.portal-metric small{
font-size:0.5625rem;
color:var(--muted);
margin-top:0.1875rem}
.portal-grid{
display:grid;
grid-template-columns:1.35fr .85fr;
gap:0.625rem}
.portal-section{
padding:0.875rem;
min-height:0}
.portal-section h3{
font-size:0.8125rem;
margin:0 0 0.625rem}
.portal-chart{height:12.25rem;padding:.35rem .4rem .15rem;border:1px solid var(--line);border-radius:.65rem;background:var(--panel2);overflow:hidden}
.portal-session{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:0.625rem;
padding:0.5625rem 0;
border-top:0.0625rem solid var(--line)}
.portal-session:first-of-type{
border-top:0}
.portal-session strong{
font-size:0.6875rem}
.portal-session span{
display:block;
font-size:0.5625rem;
color:var(--muted);
margin-top:0.125rem}
.portal-device{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.7rem;padding:.55rem .15rem;border-top:1px solid var(--line)}
.portal-device:first-of-type{border-top:0}
.portal-device .device-icon{width:2.55rem;height:2.55rem}
.portal-device .mobile-device-main strong{font-size:.75rem}
.portal-device .mobile-device-meta{display:flex;align-items:center;gap:.55rem;margin-top:.2rem;flex-wrap:wrap;font-size:.58rem;color:var(--muted)}
.support-card{
margin-top:0.625rem;
padding:0.75rem;
border-radius:0.625rem;
border:0.0625rem solid rgba(8,119,249,.25);
background:var(--accent-soft)}
.support-card strong{
display:block;
font-size:0.75rem}
.support-card span{
display:block;
font-size:0.625rem;
color:var(--muted);
margin-top:0.1875rem;
line-height:1.45}
.traffic-grid{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(18rem,.55fr);gap:.7rem}
.traffic-main,.traffic-side{min-height:0;display:flex;flex-direction:column;gap:.7rem}
.traffic-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.traffic-kpi{padding:.85rem 1rem}
.traffic-kpi span{display:block;font-size:.64rem;color:var(--muted)}
.traffic-kpi strong{display:block;font-size:1.32rem;margin-top:.22rem;letter-spacing:-.02em}
.traffic-chart-card{flex:1;min-height:0;padding:.9rem 1rem 1rem;display:flex;flex-direction:column;overflow:hidden}
.traffic-chart-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.65rem;flex:none}
.traffic-chart-head h3{font-size:.79rem;margin:0}
.traffic-chart-head span{display:block;font-size:.61rem;color:var(--muted);margin-top:.16rem}
.traffic-range{flex:none}
.traffic-range button{height:1.85rem;font-size:.61rem}
.traffic-chart{flex:1;min-height:12rem;border:1px solid var(--line);border-radius:.65rem;background:linear-gradient(180deg,var(--panel2),color-mix(in srgb,var(--panel2) 78%,var(--panel) 22%));overflow:hidden;padding:.45rem .55rem .2rem}
.area-chart-svg,.bandwidth-svg{display:block;width:100%;height:100%;overflow:visible}
.chart-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.85}
.chart-line{fill:none;stroke:var(--accent);stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.chart-dot{fill:var(--panel);stroke:var(--accent);stroke-width:2.4;vector-effect:non-scaling-stroke}
.chart-label{fill:var(--muted);font-size:11px;font-family:var(--font);font-weight:680}.chart-axis-label{fill:var(--muted2);font-size:10.5px;font-family:var(--font);font-weight:650}.traffic-bar{fill:url(#traffic-bars);opacity:.88;transition:opacity .12s}.traffic-bar-group:hover .traffic-bar{opacity:1}
.area-chart-svg.compact .chart-line{stroke-width:3}
.area-chart-svg.compact .chart-label{font-size:9.5px}
.traffic-side .card{padding:.8rem}
.traffic-side h3{font-size:.77rem;margin:0 0 .55rem}
.meter{height:.5rem;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px}
.traffic-note{font-size:.63rem;color:var(--muted);line-height:1.5}
.archive-shell{
height:100%;
min-height:0;
overflow:auto}
.archive-hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:0.625rem;
align-items:start}
.archive-card{
padding:0.9375rem}
.archive-card h2{
font-size:0.9375rem;
margin:0 0 0.3125rem}
.archive-card p{
font-size:0.6875rem;
color:var(--muted);
margin:0 0 0.75rem;
line-height:1.5}
.archive-meta{
border:0.0625rem solid var(--line);
border-radius:0.625rem;
padding:0.25rem 0.5625rem;
background:var(--panel2)}
.archive-actions{
display:flex;
gap:0.4375rem;
margin-top:0.625rem}
.switch{
width:2.5rem;
height:1.375rem;
border:0;
border-radius:62.4375rem;
background:var(--panel3);
position:relative}
.switch:after{
content:"";
position:absolute;
width:1rem;
height:1rem;
left:0.1875rem;
top:0.1875rem;
border-radius:62.4375rem;
background:#9aa7b5;
transition:.15s}
.switch.on{
background:rgba(8,119,249,.36)}
.switch.on:after{
left:1.3125rem;
background:#2a8cff}
.settings-scroll{
height:100%;
overflow:auto}
.settings-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:0.625rem}
.settings-card{
padding:0.875rem}
.settings-card h2{
font-size:0.875rem;
margin:0 0 0.25rem}
.settings-card p{
font-size:0.625rem;
color:var(--muted);
margin:0 0 0.75rem;
line-height:1.5}
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:0.5625rem}
.form-grid .full{
grid-column:1/-1}
.settings-preview{
padding:0.8125rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem}
.settings-preview strong{
font-size:0.8125rem}
.settings-preview span{
font-size:0.625rem;
color:var(--muted);
display:block;
margin-top:0.1875rem}
.modal-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.48);
backdrop-filter:blur(0.25rem);
z-index:230;
display:none;
align-items:center;
justify-content:center;
padding:0.9375rem}
.modal-backdrop.open{
display:flex}
.modal{
width:min(35rem,100%);
max-height:min(42.5rem,92dvh);
display:flex;
flex-direction:column;
background:var(--panel);
border:0.0625rem solid var(--line);
border-radius:0.875rem;
box-shadow:var(--shadow)}
.modal-head{
height:3.25rem;
flex:none;
border-bottom:0.0625rem solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 0.8125rem}
.modal-head strong{
font-size:0.875rem}
.modal-body{
padding:0.875rem;
overflow:auto}
.modal-actions{
display:flex;
justify-content:flex-end;
gap:0.4375rem;
margin-top:0.75rem}
.note-session-summary{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:0.625rem;
align-items:center;
padding:0.625rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
margin-bottom:0.625rem}
.note-session-summary strong{
font-size:0.75rem}
.note-session-summary>.note-session-arrow{
margin:0;
display:grid;
align-self:center;
justify-self:center}
.note-session-copy{min-width:0}
.note-session-copy>span{
font-size:0.625rem;
color:var(--muted);
display:block;
margin-top:0.125rem}
.toast{
position:fixed;
left:50%;
bottom:1.25rem;
transform:translate(-50%,1.25rem);
z-index:300;
background:#101720;
color:#fff;
border:0.0625rem solid #334254;
border-radius:0.625rem;
padding:0.5625rem 0.8125rem;
font-size:0.6875rem;
opacity:0;
pointer-events:none;
transition:.18s}
.toast.show{
opacity:1;
transform:translate(-50%,0)}
.empty{
padding:1.75rem;
text-align:center;
color:var(--muted);
font-size:0.6875rem}
.bottom-nav,.more-sheet{
display:none}
@media (max-width:71.875rem){
:root{--drawer:clamp(380px,34vw,480px)}
.nav-btn{
font-size:0.75rem}
.company-kpis{
grid-template-columns:1fr 1fr}
.traffic-kpis{
grid-template-columns:1fr 1fr}
.session-row{grid-template-columns:2rem minmax(8rem,1fr) 1rem minmax(8rem,1fr) 4.2rem 4.6rem minmax(9rem,1.1fr) 2.1rem}
.session-mode{display:none}
}
@media (max-width:56.25rem){
:root{
--topbar:3.625rem;
--content-pad:0.5625rem;
--drawer:100%;
--row:3.5rem}
.app{
display:block}
.sidebar{
display:none}
.main{
height:100dvh}
.topbar{
height:3.625rem;
padding:0 0.625rem}
.mobile-brand{
display:flex;
align-items:center;
gap:0.5rem;
min-width:0}
.mobile-brand .rd-logo{
width:1.72rem;
height:1.72rem;
flex:none}
.mobile-brand .crumb{
display:block}
.desktop-crumb{
display:none}
.top-actions{
gap:0.3125rem}
.status-btn{
width:2.375rem;
padding:0}
.status-btn .status-short,.status-btn .chev{
display:none}
.lang-btn{
min-width:2.375rem;
width:2.375rem;
padding:0}
.content{
height:calc(100dvh - 3.625rem - 3.75rem);
padding:0.5625rem 0.5625rem 0.4375rem}
.bottom-nav{
position:fixed;
left:0;
right:0;
bottom:0;
height:3.75rem;
display:grid;
grid-template-columns:repeat(5,1fr);
z-index:180;
border-top:0.0625rem solid var(--line);
background:var(--panel);
padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav button{
border:0;
background:transparent;
color:var(--muted);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.1875rem;
font-size:0.5625rem;
font-weight:720}
.bottom-nav button.active{
color:#278dff}
.bottom-nav .icon{
width:1.125rem;
height:1.125rem}
.more-sheet{
position:fixed;
left:0.5rem;
right:0.5rem;
bottom:4.125rem;
z-index:210;
border:0.0625rem solid var(--line);
background:var(--panel);
box-shadow:var(--shadow);
border-radius:0.875rem;
padding:0.4375rem;
grid-template-columns:repeat(3,1fr);
gap:0.375rem}
.more-sheet.open{
display:grid}
.more-sheet button{
height:4rem;
border:0.0625rem solid var(--line);
background:var(--panel2);
border-radius:0.625rem;
color:var(--muted);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.3125rem;
font-size:0.625rem}
.more-sheet button.active{
color:#278dff;
border-color:rgba(8,119,249,.38)}
.toolbar{
padding:0.5rem;
display:flex;
flex-direction:column;
align-items:stretch;
gap:0.4375rem}
.toolbar-stack{
width:100%;
flex-wrap:wrap}
.toolbar .kpis{flex:1 1 100%;width:100%}
.toolbar .seg{flex:1 1 100%}
.toolbar .search{
width:100%}
.toolbar .seg{
width:100%;
overflow:auto;
scrollbar-width:none}
.toolbar .seg button{
flex:0 0 auto}
.kpis{
width:100%;
display:grid;
grid-template-columns:repeat(3,1fr)}
.kpi{
min-width:0;
height:2.3125rem;
padding:0 0.5rem}
.kpi span{
font-size:0.5625rem}
.kpi strong{
font-size:0.8125rem}
.table-wrap{
display:none}
.mobile-device-list{
display:block;
flex:1;
min-height:0;
overflow:auto;
padding:0.4375rem}
.mobile-device{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:0.625rem;
align-items:center;
padding:0.5625rem 0.4375rem;
border-bottom:0.0625rem solid var(--line);
cursor:pointer}
.mobile-device:last-child{
border-bottom:0}
.mobile-device:hover{
background:var(--panel2)}
.mobile-device-main{
min-width:0}
.mobile-device-main strong{
font-size:0.75rem;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.mobile-device-meta{
display:flex;
align-items:center;
gap:0.5rem;
margin-top:0.1875rem;
font-size:0.5625rem;
color:var(--muted);
flex-wrap:wrap}
.mobile-device .device-icon{
width:2.5rem;
height:2.5rem}
.drawer{
top:3.625rem;
bottom:3.75rem;
width:100%;
border-left:0;
box-shadow:0 -18px 2.8125rem rgba(0,0,0,.28);
border-top:0.0625rem solid var(--line)}
.drawer.open{
transform:translateX(0)}
.drawer-body{
padding:0.75rem}
.clients-toolbar{
padding:0.5rem;
display:grid;
grid-template-columns:1fr;
grid-template-areas:"search" "controls" "summary";
align-items:stretch}
.clients-controls{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto}
.clients-controls .compact-select{width:100%}
.clients-controls .btn{padding:0 .6rem}
.clients-summary{
display:grid;
grid-template-columns:repeat(3,1fr)}
.clients-grid{
padding:0.4375rem;
grid-template-columns:1fr}
.clients-grid.compact .company-card{display:block;padding:.625rem}
.clients-grid.compact .company-kpis{margin:.55rem 0;grid-template-columns:repeat(2,1fr)}
.clients-grid.compact .client-list{display:none}
.clients-grid.compact .company-actions{margin-top:.5rem}
.company-kpis{
grid-template-columns:repeat(2,1fr)}
.client-row{
grid-template-columns:minmax(0,1fr) auto}
.client-row .role-badge{
display:none}
.session-stream,.log-stream{
padding:0.3125rem}
.session-row{grid-template-columns:1.9rem minmax(0,1fr) .8rem minmax(0,1fr) 3.3rem 2rem;gap:.34rem;min-height:3.55rem;padding:.4rem .25rem}
.session-duration,.session-mode,.session-note{display:none}
.session-party{
gap:0.3125rem}
.session-party .device-icon{
display:none}
.session-party strong{
font-size:0.625rem}
.session-party span{
font-size:0.5rem}
.log-row{
grid-template-columns:3.625rem 4.5rem 3.625rem minmax(0,1fr);
gap:0.375rem;
min-height:3.5rem;
padding:0.375rem 0.25rem}
.log-time{
font-size:0.625rem}
.level{
height:1.4375rem;
padding:0 0.375rem;
font-size:0.5rem}
.log-source{
font-size:0.5625rem}
.log-message strong{
font-size:0.625rem}
.log-message span{
font-size:0.5625rem}
.traffic-grid{
grid-template-columns:1fr;
overflow:auto}
.traffic-main,.traffic-side{
min-height:auto}
.traffic-kpis{
grid-template-columns:1fr 1fr}
.traffic-chart-head{align-items:flex-start;flex-direction:column}
.traffic-range{width:100%;overflow:auto}
.traffic-range button{flex:1}
.traffic-chart{min-height:15rem}
.archive-hero,.settings-grid{
grid-template-columns:1fr}
.archive-actions{
flex-wrap:wrap}
.portal-top{
height:3.625rem;
padding:0 0.625rem}
.portal-provider img{
width:1.9375rem;
height:1.9375rem}
.portal-body{
padding:0.5625rem}
.portal-hero{
grid-template-columns:1fr 1fr}
.portal-welcome{
grid-column:1/-1}
.portal-metric{
padding:0.625rem}
.portal-metric strong{
font-size:1.25rem}
.portal-grid{
grid-template-columns:1fr}
.portal-chart{
height:9.375rem}
.form-grid{
grid-template-columns:1fr}
.form-grid .full{
grid-column:1}
.modal-backdrop{
padding:0.5625rem}
.modal{
max-height:calc(100dvh - 1.125rem)}
}
@media (max-width:32.5rem){
.crumb span{
max-width:10rem}
.top-actions .lang-btn{
display:none}
.status-pop{
right:-92px;
width:15.25rem}
.content{
padding:0.375rem}
.toolbar{
padding:0.375rem}
.search input{
height:2.375rem}
.kpis{
gap:0.3125rem}
.kpi{
padding:0 0.375rem}
.kpi span{
font-size:0.5rem}
.kpi strong{
font-size:0.75rem}
.device-icon{
width:2.375rem;
height:2.375rem}
.device-icon .device-type-svg{
width:1.375rem;
height:1.375rem}
.os-badge{
width:1.3125rem;
height:1.3125rem}
.mobile-device{
padding:0.5rem 0.25rem}
.drawer{
top:3.625rem}
.drawer-head{
height:3rem}
.device-hero{
grid-template-columns:auto minmax(0,1fr);
align-items:start}
.device-hero>.status-chip{
grid-column:2}
.detail-grid{
grid-template-columns:7rem minmax(0,1fr)}
.drawer-actions{
grid-template-columns:1fr}
.drawer-actions .wide{
grid-column:1}
.clients-summary{
grid-template-columns:1fr 1fr 1fr}
.company-card{
padding:0.625rem}
.company-head{
align-items:center}
.company-kpis{
gap:0.3125rem}
.company-kpi{
padding:0.4375rem}
.client-row{
padding:0.375rem}
.session-row{grid-template-columns:1.7rem minmax(0,1fr) .7rem minmax(0,1fr);min-height:3.7rem}
.session-time,.session-duration,.session-mode,.session-note,.note-edit{display:none}
.log-row{
grid-template-columns:3.125rem 4.25rem minmax(0,1fr);
grid-template-areas:"time level message" "source source message"}
.log-time{
grid-area:time}
.log-row>div:nth-child(2){
grid-area:level}
.log-source{
grid-area:source}
.log-message{
grid-area:message}
.traffic-kpis{
gap:0.375rem}
.traffic-kpi{
padding:0.625rem}
.traffic-kpi strong{
font-size:1.125rem}
.portal-hero{
grid-template-columns:1fr 1fr}
.portal-welcome h2{
font-size:1.25rem}
.portal-metric strong{
font-size:1.125rem}
.portal-grid{
display:block}
.portal-section{
margin-bottom:0.5rem}
.portal-chart{
height:8.4375rem}
.bottom-nav button{
font-size:0.5rem}
}

/* UI polish */
html[data-theme="light"] .device-icon{
  background:linear-gradient(145deg,#dbe3ea,#d2dce5);
  border-color:#aebbc7;
}
html[data-theme="light"] .os-badge{
  background:#edf2f6;
  border-color:#bcc7d1;
  box-shadow:0 2px 6px rgba(47,61,80,.10);
}
html[data-theme="light"] .os-windows{fill:#1677e8}
html[data-theme="light"] .os-android{fill:#18734a}
html[data-theme="light"] .os-android .android-ant{stroke:#18734a}
html[data-theme="light"] .os-macos{fill:#6f7882}
html[data-theme="light"] .picker-os-badge{background:#edf2f6!important;border-color:#bcc7d1!important}

.ossc-login{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--bg)}
.ossc-login-card{width:min(380px,calc(100vw - 32px));display:grid;gap:12px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.ossc-login-card h2{margin:0 0 8px}.ossc-login-card input{width:100%;box-sizing:border-box}.ossc-login-card button{justify-content:center}#osscLoginError{min-height:20px;color:var(--danger);font-size:13px}


/* ownership/team/runtime polish */
.view-switch button .icon{width:.95rem;height:.95rem;flex:none;margin:0}
.view-switch button>span{line-height:1}
.inline-select{width:100%;border:0;background:transparent;color:inherit;min-height:1.9rem}
.good-text{color:var(--good)!important}.bad-text{color:var(--bad)!important}
.company-section-title{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.65rem .1rem .35rem;color:var(--muted);font-size:.58rem;font-weight:820;text-transform:uppercase;letter-spacing:.05em}
.company-section-title strong{font-size:.58rem;color:var(--muted2)}
.company-device-list{display:flex;flex-direction:column;gap:.3rem}
.company-device-row{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem;padding:.42rem .5rem;border:1px solid var(--line);background:var(--panel2);border-radius:.55rem;color:inherit;text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
.company-device-row:hover,.company-device-row:focus-visible{background:var(--surface-hover);border-color:var(--line2);outline:none}
.company-device-row .device-icon{width:2rem;height:2rem}
.company-device-copy{min-width:0}.company-device-copy strong{display:block;font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.company-device-copy small{display:flex;align-items:center;gap:.2rem;margin-top:.08rem;font-size:.55rem;color:var(--muted);min-width:0}
.company-device-row .status-chip{font-size:.52rem;padding:.2rem .35rem}
.company-more{text-align:center;color:var(--muted);font-size:.58rem;padding:.25rem}
.compact-empty{padding:.55rem;min-height:0}
.settings-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.settings-card-head>div{min-width:0}.settings-card-head .btn{flex:none;min-height:2rem;font-size:.64rem}
.support-agent-list{display:flex;flex-direction:column;gap:.38rem}
.support-agent-row{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem;padding:.5rem;border:1px solid var(--line);background:var(--panel2);border-radius:.6rem;color:inherit;text-align:left;cursor:pointer}
.support-agent-row:hover{background:var(--surface-hover);border-color:var(--line2)}
.support-agent-avatar{width:2rem;height:2rem;border-radius:.55rem;display:grid;place-items:center;background:var(--accent-soft);color:#2a8bff;font-size:.64rem;font-weight:900}
.support-agent-copy{min-width:0}.support-agent-copy strong{display:block;font-size:.68rem}.support-agent-copy small{display:block;font-size:.56rem;color:var(--muted);margin-top:.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-help{display:block;color:var(--muted);font-size:.56rem;line-height:1.4;margin-top:.3rem}
.clients-grid.compact .company-section-title,.clients-grid.compact .company-device-list{display:none}
@media (max-width:56.25rem){.company-device-row{grid-template-columns:auto minmax(0,1fr)}.company-device-row>.status-chip{grid-column:2;justify-self:start}.settings-card-head{align-items:center}}

/* v1.0.3 UX */
.side-version{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.side-version:hover{color:#2a8bff}
.owner-picker{position:relative;width:100%}.owner-search{width:100%;min-height:2rem;border:0;background:transparent;padding:.3rem .1rem;color:var(--text)}.owner-menu{display:none;position:absolute;z-index:140;left:-.4rem;right:-.4rem;top:calc(100% + .25rem);max-height:16rem;overflow:auto;padding:.3rem;border:1px solid var(--line);border-radius:.65rem;background:var(--panel);box-shadow:var(--shadow)}.owner-menu.open{display:block}.owner-menu button{width:100%;border:0;background:transparent;color:var(--text);padding:.5rem .55rem;border-radius:.45rem;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:.6rem}.owner-menu button:hover{background:var(--surface-hover)}.owner-menu strong{font-size:.68rem}.owner-menu small{font-size:.55rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-row{grid-template-columns:2.25rem minmax(0,1fr) auto auto}.client-avatar-upload{width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--line);border-radius:.62rem;background:var(--accent-soft);color:#2a8bff;display:grid;place-items:center;overflow:hidden;font-size:.65rem;font-weight:900}.client-avatar-upload:hover{border-color:#2a8bff}.client-avatar-upload img{width:100%;height:100%;display:block;object-fit:cover}.client-avatar-upload span{line-height:1}.setup-actions{display:flex;gap:.45rem;margin-top:.8rem;flex-wrap:wrap}.setup-actions .btn{flex:1;min-width:9rem}
@media(max-width:56.25rem){.client-row{grid-template-columns:2.15rem minmax(0,1fr) auto}.client-row .role-badge{display:none}.client-row-actions{grid-column:3;grid-row:1}.client-avatar-upload{width:2.15rem;height:2.15rem}}

/* v1.0.4 final polish */
html{font-size:clamp(16px,calc(11px + .52vw),21px)}
.view-switch button{display:grid;place-items:center;line-height:0}.view-switch button .icon{margin:0}
.company-avatar{padding:0;overflow:hidden;cursor:pointer;flex:none}.company-avatar img,.support-company-avatar img,.support-agent-avatar img,.portal-provider-avatar img{width:100%;height:100%;display:block;object-fit:cover}.company-avatar span,.support-company-avatar span,.support-agent-avatar span,.portal-provider-avatar span{line-height:1}
.avatar-upload{transition:border-color .12s,transform .12s}.avatar-upload:hover{border-color:#2a8bff;transform:translateY(-1px)}
.hierarchy-list{gap:.48rem}.person-group{padding:.34rem;border:1px solid var(--line);border-radius:.68rem;background:color-mix(in srgb,var(--panel2) 72%,transparent)}.person-group.admin{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));background:color-mix(in srgb,var(--accent-soft) 34%,var(--panel2))}.person-group .client-row{border:0;background:transparent;padding:.32rem .35rem}.person-group .client-row:hover{background:var(--surface-hover)}.person-device-list{display:flex;flex-direction:column;gap:.28rem;padding:.15rem .34rem .32rem}.person-device-list .company-device-row{background:color-mix(in srgb,var(--panel3) 70%,transparent)}.person-no-devices{padding:.18rem .42rem .34rem;color:var(--muted2);font-size:.54rem}.company-actions{flex-wrap:wrap}.delete-company{flex:0 1 auto!important}
.support-company-head{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.75rem}.support-company-head>div{min-width:0}.support-company-head h2{margin-top:.05rem}.support-company-avatar{width:3rem;height:3rem;flex:none;padding:0;border:1px solid var(--line);border-radius:.78rem;background:var(--accent-soft);color:#2a8bff;display:grid;place-items:center;overflow:hidden;font-size:.78rem;font-weight:900}
.support-agent-row{cursor:default;padding:.38rem}.support-agent-avatar{padding:0;border:1px solid var(--line);cursor:pointer;overflow:hidden}.support-agent-open{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.55rem;width:100%;padding:.12rem 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.support-agent-open:hover .support-agent-copy strong{color:#69aaff}
.portal-provider-avatar{width:2.25rem;height:2.25rem;flex:none;padding:0;border:1px solid var(--line);border-radius:.65rem;background:var(--accent-soft);color:#2a8bff;display:grid;place-items:center;overflow:hidden;font-size:.62rem;font-weight:900;pointer-events:none}
@media(min-width:140rem){.clients-grid{grid-template-columns:repeat(auto-fill,minmax(25rem,1fr));gap:.75rem}.content{padding:clamp(14px,.7vw,22px)}}
@media(max-width:56.25rem){.person-device-list{padding-left:.22rem;padding-right:.22rem}.company-actions .btn{min-width:8rem}.support-company-avatar{width:2.7rem;height:2.7rem}}

/* v1.0.5 usability polish */
.client-row{grid-template-columns:2.25rem minmax(0,1fr) auto;align-items:center}
.client-person{min-width:0}.client-person-head{display:flex;align-items:center;gap:.4rem;min-width:0}.client-person-head>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-person-head .role-badge{flex:none;padding:.18rem .36rem;font-size:.5rem}.client-person>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-row-actions{align-self:center;flex:none}
.company-picker .owner-menu button{justify-content:flex-start}
.portal-live{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;margin-bottom:.75rem;padding:.8rem 1rem;border:1px solid color-mix(in srgb,var(--good) 40%,var(--line));border-radius:var(--radius);background:color-mix(in srgb,var(--good-soft) 48%,var(--panel));box-shadow:var(--shadow-soft)}
.portal-live-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--good);box-shadow:0 0 0 .25rem var(--good-soft)}
.portal-live-copy{min-width:0}.portal-live-copy small{display:block;color:var(--muted);font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.portal-live-copy strong{display:block;margin-top:.08rem;font-size:1.15rem;font-variant-numeric:tabular-nums}.portal-live-device{min-width:0;max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.68rem}
.portal-session.active{border-color:color-mix(in srgb,var(--good) 30%,var(--line));background:color-mix(in srgb,var(--good-soft) 35%,transparent)}.portal-session-live{color:var(--good);font-size:.52rem;letter-spacing:.05em}
@media(min-width:75rem){.clients-grid:not(.compact){grid-template-columns:repeat(auto-fit,minmax(min(31rem,100%),1fr));gap:.75rem}.company-card{padding:.9rem}.portal-body{max-width:100rem}.content{padding:clamp(.75rem,1vw,1.25rem)}}
@media(min-width:120rem){.clients-grid:not(.compact){grid-template-columns:repeat(auto-fit,minmax(32rem,1fr));gap:.9rem}.content{padding:1.25rem 1.5rem}.portal-body{max-width:112rem}}
@media(max-width:56.25rem){.client-row{grid-template-columns:2.15rem minmax(0,1fr) auto}.client-person-head .role-badge{display:none}.portal-live{grid-template-columns:auto minmax(0,1fr)}.portal-live-device{grid-column:2;max-width:none}}
.portal-push{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .75rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.portal-push>div{min-width:0}.portal-push strong{display:block;font-size:.72rem}.portal-push span{display:block;margin-top:.12rem;color:var(--muted);font-size:.62rem}.portal-push.enabled{border-color:color-mix(in srgb,var(--good) 30%,var(--line));background:color-mix(in srgb,var(--good-soft) 24%,var(--panel))}.portal-push .btn{white-space:nowrap;flex:none}
.portal-session.focused{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px;background:var(--accent-soft)}
@media(max-width:40rem){.portal-push{align-items:flex-start;flex-direction:column}.portal-push .btn{width:100%}}

/* v1.0.7 final logic polish */
.id-tag-editor{min-height:2.55rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;padding:.35rem .45rem;border:1px solid var(--line);border-radius:.58rem;background:var(--panel2)}
.id-tag-list{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.id-tag{display:inline-flex;align-items:center;gap:.3rem;min-height:1.65rem;padding:.15rem .22rem .15rem .48rem;border:1px solid var(--line2);border-radius:999px;background:var(--panel3);font-size:.59rem;font-variant-numeric:tabular-nums}
.id-tag button{width:1.25rem;height:1.25rem;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:.8rem;line-height:1;cursor:pointer}.id-tag button:hover{background:var(--surface-hover);color:var(--danger)}
.id-tag-editor>input{flex:1 1 11rem;min-width:8rem;min-height:1.8rem;border:0;background:transparent;padding:.15rem;color:var(--text);outline:none}
.support-device-owner{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2rem}.support-device-owner strong{font-size:.68rem}.support-device-owner small{font-size:.55rem;color:var(--muted)}
@media(min-width:90rem){.company-card{min-width:0}.client-person-head>strong{max-width:none}.client-row{gap:.55rem}.person-group{padding:.42rem}.person-device-list{padding:.18rem .42rem .38rem}}

/* v1.0.8 production polish */
.ossc-login{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem);background:radial-gradient(circle at 50% -20%,rgba(39,141,255,.18),transparent 42%),linear-gradient(180deg,var(--bg),var(--bg2))}
.ossc-login-shell{position:relative;width:min(100%,30rem)}
.ossc-login-lang{position:absolute;right:.25rem;top:-3.25rem}
.ossc-login-card{width:100%;display:grid;gap:1rem;padding:clamp(1.4rem,4vw,2.2rem);border:1px solid var(--line);border-radius:1.4rem;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 1.5rem 5rem rgba(0,0,0,.22);backdrop-filter:blur(18px)}
.ossc-login-mark{width:3rem;height:3rem;display:grid;place-items:center;border-radius:1rem;background:var(--accent);color:#fff;font-weight:900;font-size:1.15rem;box-shadow:0 .6rem 1.8rem rgba(8,119,249,.24)}
.ossc-login-head h2{margin:0;font-size:clamp(1.55rem,5vw,2rem);letter-spacing:-.035em;overflow-wrap:anywhere}.ossc-login-head p{margin:.35rem 0 0;color:var(--muted);font-size:.8rem}
.ossc-login-field{display:grid;gap:.42rem}.ossc-login-field span{font-size:.68rem;color:var(--muted);font-weight:760}.ossc-login-field input{width:100%;min-height:3.15rem;box-sizing:border-box;border:1px solid var(--line);border-radius:.8rem;background:var(--panel2);padding:0 .9rem;font-size:.88rem;outline:0}.ossc-login-field input:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem var(--accent-soft)}
.ossc-login-submit{min-height:3.15rem;justify-content:center;font-size:.84rem}.ossc-login-card #osscLoginError{min-height:1.1rem;color:var(--danger);font-size:.72rem}
.portal-push-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.portal-push.unavailable{opacity:.9}.portal-profile-actions{flex-wrap:wrap}.role-badge.muted{opacity:.65}.portal-disabled{opacity:.82}.company-disabled>.company-head,.company-disabled>.company-kpis{opacity:.72}.company-actions{flex-wrap:wrap}.company-actions .btn{min-width:0}
#publicUrlHelp,#pushHttpsHelp{line-height:1.4}.settings-card .setup-actions small{align-self:center}
@media(max-width:36rem){.ossc-login{padding:.75rem}.ossc-login-lang{top:-2.9rem}.ossc-login-card{border-radius:1rem;padding:1.2rem}.portal-profile-actions .btn{flex:1 1 calc(50% - .35rem)}}

/* hotfix6 device appearance picker */
.device-appearance-open{border:0;background:transparent;padding:0;cursor:pointer;border-radius:14px}.device-appearance-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.device-appearance{display:none;margin:0 0 14px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card-2,rgba(255,255,255,.025));gap:12px}.device-appearance.open{display:grid}.device-appearance>div>small{display:block;margin-bottom:8px;color:var(--muted)}.appearance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.appearance-grid.os-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.appearance-grid button{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border:1px solid var(--border);border-radius:10px;background:transparent;color:inherit;cursor:pointer}.appearance-grid button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.appearance-grid .device-type-svg,.appearance-grid .os-svg{width:22px;height:22px}.appearance-grid .os-linux-img{object-fit:contain}@media(max-width:620px){.appearance-grid,.appearance-grid.os-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}