:root{
  --brand:#3B82F6; --brand-ink:#1D4ED8; --brand-deep:#13316B;
  --brand-tint:#EAF2FE; --brand-tint2:#CFE0FD;
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#FAFBFD;
  --ink:#0B1324; --ink-2:#28324A; --ink-3:#5F6B85; --ink-4:#929DB4;
  --line:#ECEFF5; --line-2:#DCE2EC;
  --ok:#0F9D58; --ok-ink:#0A6E3D; --ok-bg:#E8F5EE;
  --warn:#E0910B; --warn-ink:#8A4B09; --warn-bg:#FDF3E3;
  --danger:#E5484D; --danger-ink:#A91B14; --danger-bg:#FDECEA;
  --idle:#929DB4; --idle-ink:#4B5563; --idle-bg:#F1F3F7;
  --pur:#7C3AED; --pur-ink:#5B21B6; --pur-bg:#F3EBFE;
  --sh-1:0 1px 2px rgba(11,19,36,.04), 0 6px 18px -8px rgba(11,19,36,.12);
  --sh-2:0 2px 4px rgba(11,19,36,.05), 0 16px 32px -12px rgba(11,19,36,.16);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink-2);
  font-family:"DM Sans","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink)}

/* ---- scrollbar ---- */
html{scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px; border:3px solid var(--ground); background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4); border:3px solid var(--ground); background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
svg{display:block}
a{color:inherit; text-decoration:none}
code{font-family:"IBM Plex Mono",monospace; font-size:.87em; background:var(--idle-bg); padding:1.5px 5px; border-radius:5px}

/* ---- app shell + sidebar ---- */
.app{display:flex; align-items:flex-start; min-height:100vh}
.sidebar{position:sticky; top:0; height:100vh; width:236px; flex:none; background:var(--surface);
  border-right:1px solid var(--line-2); display:flex; flex-direction:column; padding:0 12px 16px; gap:4px; z-index:20;
  transition:transform .24s cubic-bezier(.22,1,.36,1), opacity .22s ease, box-shadow .22s ease}
.sb-head{height:60px; display:flex; align-items:center; gap:9px; padding:0 4px; margin-bottom:6px}
.sidebar .lg{display:flex; align-items:center; gap:9px; min-width:0}
.sidebar .lg .lg-img{display:none}
.sidebar-toggle{order:-1; width:32px; height:32px; border-radius:8px; border:0; background:transparent;
  color:var(--ink-4); display:grid; place-items:center; cursor:pointer; flex:none; transition:background .15s ease, color .15s ease}
.sidebar-toggle svg{width:17px; height:17px}
.sidebar-toggle:hover{background:var(--surface-2); color:var(--ink-2)}
.sidebar .lg .n{font-family:"Outfit",sans-serif; font-weight:700; font-size:16px; letter-spacing:-.018em}
.sidebar .lg .n small{font-weight:500; color:var(--ink-4); font-size:13px; margin-left:3px}
.snav{display:flex; flex-direction:column; gap:2px}
.snav a{position:relative; display:flex; align-items:center; gap:11px; height:42px; padding:0 12px; border-radius:10px;
  color:var(--ink-3); font-family:"DM Sans",sans-serif; font-size:13.5px; font-weight:500; white-space:nowrap;
  transition:background .2s ease, color .2s ease}
.snav a svg{width:18px; height:18px; color:var(--ink-4); flex:none;
  transition:color .2s ease, transform .2s cubic-bezier(.22,1,.36,1)}
/* left accent bar that slides in */
.snav a::before{content:""; position:absolute; left:0; top:50%; width:3px; height:20px; border-radius:0 3px 3px 0;
  background:var(--brand); transform:translateY(-50%) scaleY(0); transform-origin:center;
  transition:transform .24s cubic-bezier(.22,1,.36,1)}
.snav a:hover{background:var(--surface-2); color:var(--ink-2)}
.snav a:hover svg{color:var(--brand); transform:translateX(2px) scale(1.08)}
.snav a:hover::before{transform:translateY(-50%) scaleY(.55)}
.snav a.on{background:var(--brand-tint); color:var(--brand-ink); font-weight:600}
.snav a.on svg{color:var(--brand)}
.snav a.on::before{transform:translateY(-50%) scaleY(1)}
.sidebar-foot{display:none}
.sb-bottom{position:relative; margin-top:auto; padding-top:8px; border-top:1px solid var(--line)}
.sb-profile{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:10px;
  background:transparent; cursor:pointer; text-align:left; transition:background .15s ease}
.sb-profile:hover{background:var(--surface-2)}
.sb-bottom.open .sb-profile{background:var(--surface-2)}
.sb-av{width:32px; height:32px; border-radius:50%; background:var(--brand-tint2); color:var(--brand-ink); display:grid; place-items:center; font-weight:700; font-size:13px; flex:none}
.sb-pmeta{display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1}
.sb-pmeta b{font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-pmeta span{font-size:11px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-caret{width:16px; height:16px; color:var(--ink-4); flex:none; transition:transform .18s ease}
.sb-bottom.open .sb-caret{transform:rotate(180deg)}

/* dropdown menu above the chip */
.sb-menu{position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:30;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:5px;
  box-shadow:var(--sh-2); display:flex; flex-direction:column; gap:2px;
  transform-origin:bottom center;
  transform:translateY(8px) scale(.97); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s linear .22s}
.sb-bottom.open .sb-menu{transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .18s ease, transform .24s cubic-bezier(.22,1,.36,1), visibility 0s}
.sb-menu .sb-mi{opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease, background .14s ease, color .14s ease}
.sb-bottom.open .sb-menu .sb-mi{opacity:1; transform:translateY(0)}
.sb-bottom.open .sb-menu .sb-mi:nth-child(1){transition-delay:.04s}
.sb-bottom.open .sb-menu .sb-mi:nth-child(2){transition-delay:.08s}
.sb-bottom.open .sb-menu .sb-mi:nth-child(4){transition-delay:.12s}
.sb-mi{display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border:0; border-radius:8px;
  background:transparent; color:var(--ink-2); font-family:"DM Sans",sans-serif; font-size:13.5px; font-weight:500;
  cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .14s ease, color .14s ease}
.sb-mi svg{width:17px; height:17px; color:var(--ink-4); flex:none; transition:color .14s ease}
.sb-mi:hover{background:var(--surface-2); color:var(--ink)}
.sb-mi:hover svg{color:var(--ink-2)}
.sb-msep{height:1px; margin:4px 6px; background:var(--line)}
.sb-logout{color:var(--ink-3)}
.sb-logout:hover{background:var(--danger-bg); color:var(--danger-ink)}
.sb-logout:hover svg{color:var(--danger)}

/* ---- login page ---- */
.login-body{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ground); padding:20px}
.login-card{width:360px; max-width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:18px; box-shadow:var(--sh-2); padding:34px 30px; text-align:center}
.login-logo{width:52px; height:52px; border-radius:14px; object-fit:cover; margin:0 auto 14px; display:block}
.login-title{font-family:"Outfit",sans-serif; font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0; color:var(--ink)}
.login-title small{font-weight:500; color:var(--ink-4); font-size:15px; margin-left:3px}
.login-sub{color:var(--ink-4); font-size:13px; margin:4px 0 22px}
#login-form{text-align:left}
#login-form label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:0 0 6px}
.login-field{display:flex; align-items:center; gap:10px; height:44px; padding:0 13px; border:1px solid var(--line-2);
  border-radius:11px; background:transparent; margin-bottom:14px; transition:border-color .15s ease, box-shadow .15s ease}
.login-field:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.login-field svg{width:18px; height:18px; color:var(--ink-4); flex:none}
.login-field input{flex:1; min-width:0; height:100%; border:0; background:transparent; outline:0;
  font-family:"DM Sans",sans-serif; font-size:14px; color:var(--ink)}
#login-form .btn{width:100%; justify-content:center; height:44px; margin-top:2px}
.login-err{color:var(--danger-ink); font-size:12.5px; margin-top:11px; min-height:16px; text-align:center}

/* ---- profile ---- */
.pf-head{display:flex; align-items:center; gap:16px; padding:18px 16px; margin-bottom:14px}
.pf-av{width:58px; height:58px; border-radius:50%; background:var(--brand-tint2); color:var(--brand-ink);
  display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:700; font-size:22px; flex:none}
.pf-meta h3{font-family:"Outfit",sans-serif; font-size:18px; font-weight:600; margin:0 0 3px}
.pf-meta .muted{font-size:13px}
.pf-since{font-size:12px; color:var(--ink-4); margin-top:5px}
.sidebar-foot .btn{width:100%; justify-content:center}
.content{flex:1; min-width:0}

/* ---- top bar ---- */
.topbar{position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:14px;
  height:60px; padding:0 20px; background:var(--surface); border-bottom:1px solid var(--line-2)}
.crumb{display:flex; align-items:center; gap:8px; font-size:14px; white-space:nowrap}
.crumb .muted{color:var(--ink-4)}
.crumb-sep{color:var(--ink-4)}
.crumb b{font-weight:600; color:var(--ink)}
.tb-search{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(420px,42vw); height:38px;
  display:flex; align-items:center; gap:9px; padding:0 12px;
  border:1px solid var(--line-2); border-radius:10px; background:#FFFFFF; color:var(--ink-4); transition:.15s ease}
/* theme icon removed; shortcut badge removed */
.tb-actions .tb-ico:not(.tb-bell){display:none}
.tb-search kbd{display:none}
.tb-search:focus-within{border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px var(--brand-tint)}
.tb-search svg{width:16px; height:16px; flex:none}
.tb-search input{flex:1; min-width:0; border:0; background:transparent; outline:0;
  font-family:"DM Sans",sans-serif; font-size:13.5px; color:var(--ink)}
.tb-search input::placeholder{color:var(--ink-4)}
.tb-search kbd{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-4); line-height:1;
  border:1px solid var(--line-2); border-radius:6px; padding:3px 6px; background:#fff}
.tb-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.tb-ico{position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2);
  background:#fff; color:var(--ink-3); display:grid; place-items:center; cursor:pointer; transition:.15s ease}
.tb-ico svg{width:18px; height:18px}
.tb-ico:hover{background:var(--surface-2); color:var(--ink); border-color:var(--brand-tint2)}
.tb-bell .dot{display:none}
@media (max-width:760px){
  .tb-search{display:none}
  .crumb .muted, .crumb-sep{display:none}
  .tb-actions .btn .btn-tt{display:none}
}

/* floating button to reopen the sidebar when hidden */
.sb-open{position:fixed; top:14px; left:16px; z-index:39; width:32px; height:32px; border-radius:8px;
  border:0; background:transparent; color:var(--ink-4); display:none; place-items:center;
  cursor:pointer; transition:background .15s ease, color .15s ease}
.sb-open svg{width:17px; height:17px}
.sb-open:hover{background:var(--surface-2); color:var(--ink-2)}

/* collapsed = fully hidden; slides in on left-edge hover or via the floating button (desktop only) — Claude-style */
@media (min-width:821px){
  html.sb-collapsed .sidebar{position:fixed; top:0; left:0; height:100vh; width:236px; z-index:40;
    opacity:0; pointer-events:none; box-shadow:none}
  html.sb-collapsed .content{padding-left:0}
  html.sb-collapsed .topbar{padding-left:56px}
  html.sb-collapsed.sb-peek .sidebar,
  html.sb-collapsed .sidebar:hover{opacity:1; pointer-events:auto; box-shadow:0 24px 48px -16px rgba(11,19,36,.28)}
  html.sb-collapsed .sb-open{display:grid}
}

@media (max-width:820px){
  .app{flex-direction:column}
  .sidebar{width:100%; height:auto; flex-direction:row; align-items:center; gap:8px;
    border-right:0; border-bottom:1px solid var(--line-2); padding:8px 12px; overflow-x:auto}
  .sb-head{padding:4px 6px}
  .snav{flex-direction:row; gap:2px}
  .sidebar-foot, .sidebar-toggle{display:none}
}

/* ---- buttons ---- */
.btn{height:38px; border-radius:10px; font-family:"DM Sans",sans-serif; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:1px solid transparent; padding:0 15px; white-space:nowrap; transition:.17s ease}
.btn svg{width:16px; height:16px}
.btn.sm{height:32px; font-size:12.5px; padding:0 12px; border-radius:8px}
.btn.sm svg{width:14px; height:14px}
.b-pri{background:var(--brand); color:#FFFFFF}
.b-pri svg,.b-pri svg path,.b-pri svg line,.b-pri svg polyline,.b-pri svg circle{color:#FFFFFF; stroke:#FFFFFF}
.b-pri:hover{background:var(--brand-ink); transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(59,130,246,.7)}
.b-sec{background:#fff; color:var(--ink-2); border-color:var(--line-2)}
.b-sec:hover{border-color:var(--brand-tint2); color:var(--brand-ink); background:var(--brand-tint)}
.b-sec.copied{background:var(--ok); color:#fff; border-color:var(--ok)}
.b-pri.copied{background:var(--ok)}

/* ---- layout ---- */
.page{max-width:1040px; margin:0 auto; padding:24px 20px 60px}
h1{font-family:"Outfit",sans-serif; font-size:24px; line-height:1.1; letter-spacing:-.025em; font-weight:700; margin:0}
.muted{color:var(--ink-4)}
.ph{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.ph .sub{font-size:12.5px; color:var(--ink-4); margin-top:5px}
.ph .sp{flex:1}
.mono{font-family:"IBM Plex Mono",monospace}
.r{text-align:right}

/* ---- pills ---- */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.04em;
  border-radius:6px; padding:3px 7px; white-space:nowrap; text-transform:uppercase}
.p-live{color:var(--ok-ink); background:var(--ok-bg)}
.p-draft{color:var(--idle-ink); background:var(--idle-bg)}
.p-old{color:var(--ink-4); background:var(--idle-bg)}

/* ---- card ---- */
.card{background:var(--surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--sh-1); overflow:hidden}
.card>h4{font-family:"Outfit",sans-serif; margin:0; font-size:13.5px; font-weight:600; padding:13px 16px 12px;
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.card>h4 svg{width:15px; height:15px; color:var(--ink-3)}
.card>h4 .ct{margin-left:auto; font-size:11px; font-weight:500; color:var(--ink-4)}

/* ---- stats strip ---- */
.strip{display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface);
  border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--sh-1); overflow:hidden; margin-bottom:14px}
@media (max-width:1000px){ .strip{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .strip{grid-template-columns:repeat(2,1fr)} }
.cell{padding:14px 16px; display:flex; flex-direction:column}
.cell + .cell{box-shadow:inset 1px 0 0 var(--line)}
.cell .cbot{margin-top:auto}
.cell .l{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4)}
.cell .v{font-family:"Outfit",sans-serif; font-size:24px; font-weight:700; letter-spacing:-.025em; margin-top:8px; font-variant-numeric:tabular-nums; line-height:1; color:var(--ink)}
.cell .v.sm{font-size:18px}
.cell .cap{font-size:10.5px; color:var(--ink-4); margin-top:7px}
.cell .bar{height:5px; border-radius:99px; background:var(--line); margin-top:9px; overflow:hidden; display:flex}
.cell .bar i{display:block; height:100%}

/* ---- dashboard grid ---- */
.dash-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:14px; margin-bottom:14px; align-items:start}
@media (max-width:860px){ .dash-grid{grid-template-columns:1fr} }
.side{display:grid; gap:14px; align-content:start}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
@media (max-width:860px){ .grid-2{grid-template-columns:1fr} }

/* ---- doughnut center label ---- */
.donut-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none}
.donut-center b{display:block; font-family:"Outfit",sans-serif; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.05}
.donut-center span{font-size:11px; color:var(--ink-4)}

/* ---- version legend (doughnut) ---- */
.verlegend{display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:16px; font-size:12.5px}
.vl{display:inline-flex; align-items:center; gap:6px; color:var(--ink-3)}
.vl .dot{width:9px; height:9px; border-radius:50%}
.vl b{font-weight:600; color:var(--ink)}

/* ---- chart (Chart.js) ---- */
.chart{position:relative; width:100%; height:260px}
.chart canvas{display:block}

/* fixed-size tooltip (same for every point) */
.chart-tip{position:absolute; width:58px; box-sizing:border-box; pointer-events:none; text-align:center;
  background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:8px 8px;
  box-shadow:0 8px 20px -8px rgba(11,19,36,.18); opacity:0; z-index:5;
  transition:opacity .18s ease, left .3s ease, top .3s ease}
.chart-tip .ctt{font-family:"DM Sans",sans-serif; font-size:11px; color:#6B7488; margin-bottom:2px; white-space:nowrap}
.chart-tip .ctv{font-family:"DM Sans",sans-serif; font-size:15px; font-weight:700; color:var(--ink); line-height:1.1}
.chart-tip::after{content:""; position:absolute; left:var(--cx,50%); width:9px; height:9px; background:#fff;
  border:1px solid var(--line-2); transform:translateX(-50%) rotate(45deg);
  transition:left .3s ease}
.chart-tip:not(.below)::after{bottom:-6px; border-top:0; border-left:0}
.chart-tip.below::after{top:-6px; border-bottom:0; border-right:0}
.areachart circle{transition:r .15s ease}
.areachart circle:hover{r:5}

/* ---- platform rows ---- */
.prow{display:flex; align-items:center; gap:12px}
.prow + .prow{margin-top:14px}
.prow .osmini i{width:24px; height:24px}
.prow .mid{flex:1; min-width:0}
.prow .mid .top{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px}
.prow .mid .top b{font-weight:600}
.prow .track{height:7px; border-radius:99px; background:var(--line); overflow:hidden}
.prow .track i{display:block; height:100%; border-radius:99px}

/* ---- highlights list ---- */
.hlrow{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); padding:9px 0; border-top:1px solid var(--line)}
.hlrow:first-child{border-top:0; padding-top:0}
.hlrow svg{width:16px; height:16px; color:var(--brand); flex:none; margin-top:1px}

/* ---- latest release rows ---- */
.lrow{display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:9px 0; border-top:1px solid var(--line)}
.lrow:first-child{border-top:0; padding-top:0}
.lrow>span:first-child{color:var(--ink-4)}
.lrow b{font-weight:600}
.lrow .osmini i{width:22px; height:22px}

/* ---- osmini ---- */
.osmini{display:inline-flex; gap:5px; align-items:center}
.osmini i{width:20px; height:20px; border-radius:6px; display:grid; place-items:center}
.osmini i svg{width:12px; height:12px}
.osmini i.w{background:#E7F0FE; color:#1D4ED8} .osmini i.a{background:#E9F7EE; color:#0A6E3D}
.osmini i.off{background:var(--idle-bg); color:var(--ink-4)}

/* ---- table ---- */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-4); text-align:left; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap}
.tbl th.r{text-align:right}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .chev{color:var(--ink-4)}
.tbl .chev svg{width:15px; height:15px}

/* ---- copy row ---- */
.copyrow{display:flex; gap:8px}
.copyrow .inp{flex:1; height:38px; border:1px solid var(--line-2); border-radius:9px; background:var(--surface-2);
  padding:0 11px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); display:flex; align-items:center;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis}

/* ---- empty ---- */
.empty{text-align:center; padding:50px 20px; color:var(--ink-4)}
.empty svg{width:40px; height:40px; color:var(--line-2); margin:0 auto 12px}
.empty h3{font-family:"Outfit",sans-serif; color:var(--ink-2); font-size:16px; font-weight:600; margin:0 0 5px}
.empty p{font-size:13px; margin:0}

/* ---- feedback / ratings ---- */
.stars{display:inline-flex; gap:2px}
.stars svg{width:14px; height:14px}
.stars .on{color:var(--warn)}
.stars .off{color:var(--line-2)}
.bigrate{display:flex; align-items:baseline; gap:8px}
.bigrate b{font-family:"Outfit",sans-serif; font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1}
.rdist{display:grid; gap:9px}
.rdist-row{display:flex; align-items:center; gap:10px; font-size:12.5px}
.rdist-row .lab{width:40px; color:var(--ink-4); display:inline-flex; align-items:center; gap:3px}
.rdist-row .lab svg{width:12px; height:12px; color:var(--warn)}
.rdist-row .track{flex:1; height:7px; border-radius:99px; background:var(--line); overflow:hidden}
.rdist-row .track i{display:block; height:100%; border-radius:99px}
.rdist-row .num{width:38px; text-align:right; color:var(--ink-4); font-family:"IBM Plex Mono",monospace; font-size:11px}
.review{padding:14px 16px; border-top:1px solid var(--line)}
.review:first-child{border-top:0}
.review-top{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.review-top .nm{font-weight:600; font-size:13.5px}
.review-top .rmeta{margin-left:auto; font-size:11.5px; color:var(--ink-4); display:inline-flex; align-items:center; gap:9px}
.review p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.5}
.review-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.review-actions{display:inline-flex; align-items:center; gap:8px}
.review.is-hidden p, .review.is-hidden .review-top{opacity:.55}

/* ---- messages (support chat) ---- */
.msg-page{max-width:none; width:100%; padding:0}
.msg-page .card{border:0; border-radius:0; box-shadow:none; margin:0}
.chatwrap{display:grid; grid-template-columns:270px 1fr; grid-template-rows:minmax(0,1fr); height:calc(100vh - 60px); min-height:440px}
.thlist{display:flex; flex-direction:column; border-right:1px solid var(--line); overflow:hidden}
.thlist-head{flex:none; padding:14px 14px 12px; border-bottom:1px solid var(--line)}
.thlist-head h3{font-family:"Outfit",sans-serif; font-size:16px; font-weight:700; letter-spacing:-.02em; margin:0 0 10px; color:var(--brand-ink)}
.th-search{display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; border:1px solid var(--line-2); border-radius:9px; background:transparent; transition:.15s ease}
.th-search:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.th-search svg{width:15px; height:15px; color:var(--ink-4); flex:none}
.th-search input{flex:1; min-width:0; border:0; background:transparent; outline:0; font-family:"DM Sans",sans-serif; font-size:13px; color:var(--ink)}
.thlist-items{flex:1; overflow:auto}
.thlist-items .empty{height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px}
@keyframes threadIn{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
.thread{position:relative; display:flex; gap:11px; align-items:center; padding:12px 14px; cursor:pointer; border-bottom:1px solid var(--line);
  transition:background .18s ease; animation:threadIn .3s cubic-bezier(.22,1,.36,1) both}
.thread::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
  background:var(--brand); transform:scaleY(0); transition:transform .2s cubic-bezier(.22,1,.36,1)}
.thread:nth-child(1){animation-delay:.03s}
.thread:nth-child(2){animation-delay:.08s}
.thread:nth-child(3){animation-delay:.13s}
.thread:nth-child(4){animation-delay:.18s}
.thread:nth-child(5){animation-delay:.23s}
.thread:nth-child(6){animation-delay:.28s}
.thread:hover{background:var(--surface-2)}
.thread:hover::before{transform:scaleY(.55)}
.thread.on{background:var(--brand-tint)}
.thread.on::before{transform:scaleY(1)}
.thread .av{width:34px; height:34px; border-radius:50%; background:var(--brand-tint2); color:var(--brand-ink);
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:none}
.thread .tmid{flex:1; min-width:0}
.thread .tn{font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px}
.thread .tn .osmini i{width:16px; height:16px}
.thread .tl{font-size:12px; color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thread .tright{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none}
.thread .tt{font-size:11px; color:var(--ink-4)}
.thread .undot{width:8px; height:8px; border-radius:50%; background:var(--brand)}
.conv{display:flex; flex-direction:column; min-width:0; min-height:0}
.conv-head{padding:13px 16px; border-bottom:1px solid var(--line); font-family:"Outfit",sans-serif; font-weight:600; font-size:14px; display:flex; align-items:center; gap:9px}
.conv-body{flex:1; padding:16px; display:flex; flex-direction:column; gap:6px; overflow:auto; min-height:0; background:#FFFFFF; scrollbar-width:thin}
.conv-body::-webkit-scrollbar{width:6px}
.conv-body::-webkit-scrollbar-track{background:transparent}
.conv-body::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px; border:0}
.conv-body::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}
.bub{position:relative; display:block; width:fit-content; max-width:min(72%,460px); padding:5px 11px; border-radius:11px;
  font-size:13px; line-height:1.3; white-space:pre-wrap; overflow-wrap:anywhere}
.bub .bt-sp{display:inline-block; width:42px}
.bub .bt{position:absolute; right:11px; bottom:4px; font-size:9px; opacity:.5; white-space:nowrap}
.bub .readmore{display:inline; border:0; background:transparent; padding:0; margin-left:3px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--brand-ink)}
.bub .readmore:hover{text-decoration:underline}
.bub.user{align-self:flex-start; background:#FFFFFF; border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px}
.bub.admin{align-self:flex-end; background:#EEF1F6; border:1px solid var(--line); color:var(--ink); border-bottom-right-radius:4px}
.conv-foot{padding:14px 16px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center}
.msg-input{flex:1; position:relative; display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 6px 6px 14px;
  border:1px solid var(--line-2); border-radius:20px; background:transparent; transition:border-color .15s ease, box-shadow .15s ease}
.msg-input:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.attach{position:relative; display:flex; flex:none}
.attach-btn{border:0; background:transparent; color:var(--ink-4); cursor:pointer; display:grid; place-items:center; padding:0; width:20px; height:20px; transition:transform .2s cubic-bezier(.22,1,.36,1), color .15s ease}
.attach-btn svg{width:18px; height:18px}
.attach-btn:hover{color:var(--brand)}
.attach-btn.open{transform:rotate(45deg); color:var(--brand)}
.attach-menu{position:absolute; bottom:calc(100% + 14px); left:-10px; min-width:150px; z-index:30;
  background:#fff; border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--sh-2); padding:6px;
  display:grid; gap:2px; transform-origin:bottom left;
  opacity:0; transform:scale(.92) translateY(6px); pointer-events:none;
  transition:opacity .16s ease, transform .18s cubic-bezier(.22,1,.36,1)}
.attach-menu.open{opacity:1; transform:none; pointer-events:auto}
.attach-menu button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:0;
  background:transparent; border-radius:8px; cursor:pointer; font-family:"DM Sans",sans-serif; font-size:13px; color:var(--ink-2); text-align:left}
.attach-menu button:hover{background:var(--surface-2)}
.attach-menu button svg{width:17px; height:17px; color:var(--ink-4); flex:none}
.msg-input textarea{flex:1; min-width:0; border:0; background:transparent; outline:0; resize:none;
  font-family:"DM Sans",sans-serif; font-size:14px; color:var(--ink-2); line-height:1.4; max-height:42px; overflow-y:auto; padding:0 36px 0 0; scrollbar-width:none}
.msg-input textarea::-webkit-scrollbar{display:none}
.send-btn{position:absolute; right:5px; bottom:4px; width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; border:0;
  display:grid; place-items:center; cursor:pointer; flex:none; transition:background .15s ease, transform .12s ease}
.send-btn svg{width:17px; height:17px}
.send-btn:hover{background:var(--brand-ink)}
.send-btn:active{transform:scale(.94)}

/* ---- messages: login gate ---- */
.msg-gate{position:absolute; inset:0; z-index:10; background:#fff; display:flex; align-items:center; justify-content:center; padding:20px}
.msg-gate[hidden]{display:none}
.msg-gate-box{width:320px; max-width:100%; text-align:center}
.msg-gate-box h3{font-family:"Outfit",sans-serif; font-size:20px; letter-spacing:-.02em; margin:0 0 4px}
.msg-gate-box p{color:var(--ink-4); font-size:13px; margin:0 0 16px}
.msg-gate-box input{width:100%; height:42px; border:1px solid var(--line-2); border-radius:10px; padding:0 13px; font-family:"DM Sans",sans-serif; font-size:14px; background:var(--surface-2); outline:0; margin-bottom:10px}
.msg-gate-box input:focus{border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px var(--brand-tint)}
.msg-gate-box .btn{width:100%; justify-content:center}
.msg-gate-err{color:var(--danger-ink); font-size:12.5px; margin-top:9px; min-height:16px}

/* ---- messages: conversation empty + header ---- */
.conv-empty{margin:auto; text-align:center; color:var(--ink-4); padding:40px}
.conv-empty svg{width:46px; height:46px; color:var(--line-2); margin:0 auto 12px}
.conv-empty p{font-size:14px; margin:0}
.conv-head .av{width:32px; height:32px; border-radius:50%; background:var(--brand-tint2); color:var(--brand-ink); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none}
.ch-meta{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.ch-name{font-family:"Outfit",sans-serif; font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px}
.ch-name .osmini i{width:16px; height:16px}
.ch-sub{font-size:11.5px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- messages: unread badge ---- */
.thread .unbadge{min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--brand); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center}

/* ---- messages: staged attachment preview ---- */
.msg-preview{display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px 0}
.msg-preview[hidden]{display:none}
.cp-item{position:relative; width:52px; height:52px}
.cp-item img,.cp-item video{width:52px; height:52px; object-fit:cover; border-radius:9px; border:1px solid var(--line-2); display:block}
.cp-play{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none}
.cp-x{position:absolute; top:-6px; right:-6px; width:19px; height:19px; border:0; border-radius:50%; background:var(--ink); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:10px; line-height:1}
.cp-x:hover{background:var(--danger)}

/* ---- messages: attachments in bubbles ---- */
.bub.has-media{padding:4px}
.bub .b-media{display:block; max-width:240px; max-height:260px; border-radius:9px; background:var(--surface-2); cursor:pointer; margin-bottom:3px}
.bub.has-media video.b-media{cursor:default}
.bub.has-media .tx{display:block; padding:3px 6px 0}
.bub.has-media .bt-sp{display:none}
.bub .more{cursor:pointer; font-weight:600; color:var(--brand-ink); margin-left:2px}
.bub .more:hover{text-decoration:underline}
@media (max-width:760px){
  .chatwrap{grid-template-columns:1fr}
  .thlist{max-height:240px; border-right:0; border-bottom:1px solid var(--line)}
}

/* ---- foot ---- */
.foot{border-top:1px solid var(--line-2); margin-top:26px; padding-top:18px; font-size:12px; color:var(--ink-4);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.foot .sp{flex:1}

/* ---- filter chips (segmented control) ---- */
.chips{display:flex; width:fit-content; margin:0; gap:2px; padding:4px; position:relative; top:2px;
  background:transparent; border:1px solid var(--line-2); border-radius:12px}
.chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border-radius:9px;
  border:0; background:transparent; color:var(--ink-3);
  font-family:"DM Sans",sans-serif; font-size:13px; font-weight:500; cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .12s ease}
.chip:hover{background:rgba(11,19,36,.05); color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--brand-tint); color:var(--brand-ink); font-weight:600}
.chip-n{font-family:"DM Sans",sans-serif; font-size:12px; font-weight:600; color:var(--ink-4);
  transition:color .18s ease}
.chip.on .chip-n{color:var(--brand-ink)}

/* ---- release cards ---- */
@keyframes cardIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.relcard{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--sh-1);
  padding:16px 18px; margin-bottom:14px; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  animation:cardIn .3s cubic-bezier(.22,1,.36,1) both}
.relcard:nth-child(2){animation-delay:.05s}
.relcard:nth-child(3){animation-delay:.1s}
.relcard:nth-child(4){animation-delay:.15s}
.relcard:nth-child(5){animation-delay:.2s}
.relcard:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
/* live release gets a brand accent bar + tint */
.relcard.is-live{border-color:var(--brand-tint2)}
.relcard.is-live::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand)}

.relcard-head{display:flex; align-items:center; gap:10px}
.relcard-id{display:flex; align-items:center; gap:9px}
.relcard-id .ver{font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.rc-plats{display:flex; gap:7px}
.rc-plat{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink-2)}
.rc-plat svg{width:13px; height:13px}
.rc-plat.off{opacity:.45; filter:grayscale(1)}

.rc-stats{display:flex; flex-wrap:wrap; align-items:center; gap:9px 20px; margin-top:14px;
  padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.rc-stat{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; line-height:1; color:var(--ink-4)}
.rc-stat svg{width:15px; height:15px; color:var(--ink-4); flex:none; transform:translateY(-1px)}
.rc-stat b{color:var(--ink-2); font-weight:600}

.relnotes{margin:14px 0 2px; padding:0; list-style:none; display:grid; gap:7px}
.relnotes li{position:relative; padding-left:18px; font-size:13px; color:var(--ink-2); line-height:1.5}
.relnotes li::before{content:""; position:absolute; left:3px; top:7px; width:6px; height:6px; border-radius:50%; background:var(--brand)}
.rc-empty{margin:13px 0 2px; font-size:13px}

.relcard-foot{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:15px}

.iconbtn{width:32px; height:32px; border-radius:8px; border:1px solid var(--line-2); background:#fff; color:var(--ink-4);
  display:inline-grid; place-items:center; cursor:pointer; transition:.16s ease}
.iconbtn svg{width:15px; height:15px}
.iconbtn:hover{border-color:var(--danger); color:var(--danger); background:var(--danger-bg)}

/* ---- apps grid ---- */
.apps-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:760px){ .apps-grid{grid-template-columns:1fr} }
.appcard{padding:0}
.appcard-head{display:flex; align-items:center; gap:13px; padding:16px; border-bottom:1px solid var(--line)}
.appico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none}
.appico svg{width:24px; height:24px}
.appico.w{background:#E7F0FE; color:#1D4ED8} .appico.a{background:#E9F7EE; color:#0A6E3D}
.appcard-name{flex:1; min-width:0}
.appcard-name h3{font-family:"Outfit",sans-serif; font-size:15.5px; font-weight:600; margin:0 0 2px}
.appcard-name .muted{font-size:12.5px}
.appcard-body{padding:6px 16px}
.appcard-body .lrow{gap:12px}
.appcard-body .lrow .fname{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.appcard-foot{padding:14px 16px; border-top:1px solid var(--line); display:grid; gap:11px}
.appcard-url{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-4);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.appcard-btns{display:flex; gap:9px}
.appcard-btns .b-pri{flex:1; justify-content:center}
.appcard-btns .b-sec{flex:none}

/* ---- settings ---- */
.setcard{margin-bottom:14px; overflow:visible}
.setcard.danger{border-color:var(--danger-bg)}
.setcard.danger>h4{color:var(--danger-ink)}
.setcard.danger>h4 svg{color:var(--danger)}
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field>label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:7px}
.field-hint{font-size:12px; color:var(--ink-4); margin-top:7px}
.inp2{width:100%; min-height:40px; box-sizing:border-box; border:1px solid var(--line-2); border-radius:10px; background:transparent;
  padding:9px 12px; font-family:"DM Sans",sans-serif; font-size:13.5px; line-height:1.4; color:var(--ink); transition:.16s ease}
textarea.inp2{min-height:84px; resize:none; scrollbar-width:none; -ms-overflow-style:none}
textarea.inp2::-webkit-scrollbar{width:0; height:0; display:none}
.inp2::placeholder{color:var(--ink-4)}
.inp2:focus{outline:0; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px var(--brand-tint)}
.setrow{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line)}
.setrow:first-child{border-top:0; padding-top:4px}
.setrow-txt{display:flex; flex-direction:column; gap:3px; flex:1}
.setrow-txt b{font-size:13.5px; font-weight:600}
.setrow-txt .muted{font-size:12.5px}

/* toggle switch */
.switch{flex:none; width:42px; height:24px; border-radius:99px; border:0; background:var(--line-2); position:relative;
  cursor:pointer; transition:background .18s ease}
.switch .knob{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(11,19,36,.25); transition:left .18s cubic-bezier(.22,1,.36,1)}
.switch.on{background:var(--brand)}
.switch.on .knob{left:21px}
#settings-body .switch{isolation:isolate;width:40px;height:24px;padding:0;border:1px solid #cdd6e5;border-radius:8px;background:#edf1f7;box-shadow:inset 0 1px 3px rgba(11,19,36,.07);transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease;overflow:hidden}
#settings-body .switch::before{content:"";position:absolute;top:9px;left:7px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0;transform:scale(.5);transition:opacity .25s,transform .3s}
#settings-body .switch::after{content:"";position:absolute;top:9px;right:7px;width:4px;height:4px;border:1px solid #9ba9bd;border-radius:50%;box-sizing:border-box;transition:opacity .2s}
#settings-body .switch .knob{z-index:1;top:3px;left:3px;width:16px;height:16px;border:1px solid rgba(255,255,255,.9);box-sizing:border-box;border-radius:5px;background:linear-gradient(145deg,#fff,#f1f5fc);box-shadow:0 2px 4px rgba(20,42,76,.16);transform:translateX(0);transition:transform .42s cubic-bezier(.65,0,.35,1),box-shadow .4s ease}
#settings-body .switch.on{border-color:#3775df;background:#3b82ed;box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 2px 7px rgba(59,130,246,.16)}
#settings-body .switch.on .knob{left:3px;transform:translateX(16px);box-shadow:0 2px 5px rgba(16,53,112,.24)}
#settings-body .switch.on::before{opacity:1;transform:scale(1)}
#settings-body .switch.on::after{opacity:0}
#settings-body .switch:hover{border-color:#8baae0;box-shadow:0 0 0 3px rgba(59,130,246,.07)}
#settings-body .switch:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
#settings-body .switch:disabled{opacity:.5;cursor:wait}

/* danger button */
.b-danger{background:#fff; color:var(--danger-ink); border-color:var(--danger-bg)}
.b-danger:hover{background:var(--danger); color:#fff; border-color:var(--danger)}

/* ---- release edit modal ---- */
.rl-ov{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(11,19,36,.42); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s linear .2s}
.rl-ov.open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s ease, visibility 0s}
.rl-dlg{width:100%; max-width:480px; max-height:calc(100vh - 40px); overflow:auto; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--sh-2);
  transform:translateY(12px) scale(.98); opacity:.6; transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease}
.rl-ov.open .rl-dlg{transform:translateY(0) scale(1); opacity:1}
.rl-dlg-head{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.rl-dlg-head h3{margin:0; font-family:"Outfit",sans-serif; font-size:16px; font-weight:600; color:var(--ink); flex:1}
.rl-x{width:32px; height:32px; flex:none; display:grid; place-items:center; border:0; border-radius:8px;
  background:transparent; color:var(--ink-4); cursor:pointer; transition:background .14s ease, color .14s ease}
.rl-x svg{width:18px; height:18px}
.rl-x:hover{background:var(--surface-2); color:var(--ink-2)}
.rl-dlg-body{padding:18px; display:flex; flex-direction:column; gap:14px}
.rl-dlg-body .field{margin-bottom:0}
.rl-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.rl-checks{display:flex; gap:18px; padding-top:2px}
.rl-chk{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.rl-chk input{width:16px; height:16px; accent-color:var(--brand); cursor:pointer}
.rl-dlg-body textarea.inp2{resize:none; min-height:84px; font-family:inherit; line-height:1.5}
.rl-dlg-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 18px; border-top:1px solid var(--line)}
@media (max-width:520px){ .rl-row{grid-template-columns:1fr} }

/* ---- new release page ---- */
.nr-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.nr-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}

/* installer rows */
.inst-list{display:flex; flex-direction:column; gap:12px}
.inst-row{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface-2); cursor:pointer; transition:border-color .16s ease, background .16s ease, box-shadow .16s ease}
.inst-row:hover{border-color:var(--brand-tint2); background:#fff; box-shadow:var(--sh-1)}
.inst-row.drag{border-color:var(--brand); background:var(--brand-tint); box-shadow:0 0 0 3px var(--brand-tint)}
.inst-row.has{background:#fff; border-color:var(--brand-tint2)}

.inst-ico{width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:11px}
.inst-ico svg{width:20px; height:20px}
.inst-ico.win{background:#E7F0FE; color:#1D4ED8}
.inst-ico.apk{background:#E9F7EE; color:#17A34A}

.inst-main{flex:1; min-width:0}
.inst-title{font-size:14px; font-weight:600; color:var(--ink)}
.inst-sub{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-4); margin-top:2px}
.inst-sub[hidden]{display:none}
.inst-browse{border:0; background:transparent; padding:0; font:inherit; font-size:12.5px; color:var(--brand-ink);
  font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.inst-types{display:inline-flex; gap:6px; margin-left:3px}
.inst-types span{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-4);
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:2px 7px}
.inst-file .inst-fn{color:var(--ink-2); font-weight:600; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inst-file .inst-dot, .inst-file .inst-fs{color:var(--ink-4)}

.inst-right{display:flex; align-items:center; gap:8px; flex:none}
.inst-status{font-size:12px; font-weight:500; color:var(--ink-4); display:inline-flex; align-items:center; gap:4px}
.inst-status.ok{color:#0A8A4E; font-weight:600}
.inst-status svg{width:14px; height:14px}
.inst-x{width:28px; height:28px; flex:none; display:grid; place-items:center; border:0; border-radius:8px;
  background:transparent; color:var(--ink-4); cursor:pointer; transition:background .14s ease, color .14s ease}
.inst-x[hidden]{display:none}
.inst-x svg{width:15px; height:15px}
.inst-x:hover{background:var(--danger-bg); color:var(--danger)}

@media (max-width:640px){ .nr-grid{grid-template-columns:1fr} }

/* ---- custom animated dropdown ---- */
.csel{position:relative}
.csel > select{display:none !important}
.csel-btn{display:flex; align-items:center; gap:8px; width:100%; min-height:40px; box-sizing:border-box;
  padding:9px 12px; border:1px solid var(--line-2); border-radius:10px; background:transparent;
  font-family:"DM Sans",sans-serif; font-size:13.5px; color:var(--ink); cursor:pointer; text-align:left;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease}
.csel-btn:hover{border-color:var(--line-2); background:var(--surface-2)}
.csel.open .csel-btn{border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px var(--brand-tint)}
.csel-val{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.csel-car{width:16px; height:16px; color:var(--ink-4); flex:none; transition:transform .2s ease}
.csel.open .csel-car{transform:rotate(180deg)}

.csel-menu{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:5px; box-shadow:var(--sh-2);
  display:flex; flex-direction:column; gap:2px; transform-origin:top center;
  transform:translateY(-6px) scale(.98); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .18s cubic-bezier(.22,1,.36,1), visibility 0s linear .18s}
.csel.open .csel-menu{transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility 0s}
.csel-opt{display:flex; align-items:center; width:100%; height:38px; padding:0 11px; border:0; border-radius:8px;
  background:transparent; color:var(--ink-2); font-family:"DM Sans",sans-serif; font-size:13.5px; text-align:left;
  cursor:pointer; white-space:nowrap; transition:background .14s ease, color .14s ease}
.csel-opt:hover{background:var(--surface-2); color:var(--ink)}
.csel-opt.on{background:var(--brand-tint); color:var(--brand-ink); font-weight:600}
.csel-menu .csel-opt{opacity:0; transform:translateY(-4px); transition:opacity .16s ease, transform .16s ease, background .14s ease, color .14s ease}
.csel.open .csel-menu .csel-opt{opacity:1; transform:translateY(0)}
.csel.open .csel-menu .csel-opt:nth-child(1){transition-delay:.03s}
.csel.open .csel-menu .csel-opt:nth-child(2){transition-delay:.06s}
.csel.open .csel-menu .csel-opt:nth-child(3){transition-delay:.09s}

/* ---- custom date field ---- */
.cdate{position:relative}
.cdate > input[type="date"]{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; border:0; padding:0; margin:0}
.cdate-box{display:flex; align-items:center; gap:8px; width:100%; min-height:40px; box-sizing:border-box; padding:9px 12px;
  border:1px solid var(--line-2); border-radius:10px; background:transparent; cursor:pointer; text-align:left;
  font-family:"DM Sans",sans-serif; font-size:13.5px; color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease}
.cdate-box:hover{background:var(--surface-2)}
.cdate-box:focus{outline:0; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px var(--brand-tint)}
.cdate-val{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cdate-val.ph{color:var(--ink-4)}
.cdate-box svg{width:16px; height:16px; color:var(--ink-4); flex:none}
.cdate-box:hover svg{color:var(--ink-2)}

/* ---- custom calendar popup ---- */
.cal{position:absolute; left:0; top:calc(100% + 6px); z-index:60; width:264px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:12px; box-shadow:var(--sh-2);
  transform-origin:top left; transform:translateY(-6px) scale(.98); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .18s cubic-bezier(.22,1,.36,1), visibility 0s linear .18s}
.cdate.open .cal{transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility 0s}
.cal-head{display:flex; align-items:center; gap:6px; margin-bottom:10px}
.cal-title{flex:1; text-align:center; font-family:"Outfit",sans-serif; font-size:14px; font-weight:600; color:var(--ink)}
.cal-nav{width:30px; height:30px; flex:none; display:grid; place-items:center; border:0; border-radius:8px;
  background:transparent; color:var(--ink-3); cursor:pointer; transition:background .14s ease, color .14s ease}
.cal-nav svg{width:16px; height:16px}
.cal-nav:hover{background:var(--surface-2); color:var(--ink)}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px}
.cal-dow span{text-align:center; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-4); padding:4px 0}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
@keyframes calInR{from{opacity:0; transform:translateX(12px)} to{opacity:1; transform:none}}
@keyframes calInL{from{opacity:0; transform:translateX(-12px)} to{opacity:1; transform:none}}
.cal-days.slide-r{animation:calInR .24s cubic-bezier(.22,1,.36,1)}
.cal-days.slide-l{animation:calInL .24s cubic-bezier(.22,1,.36,1)}
.cal-blank{height:32px}
.cal-day{position:relative; height:32px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent;
  font-family:"DM Sans",sans-serif; font-size:12.5px; color:var(--ink-2); cursor:pointer;
  transition:background .13s ease, color .13s ease, transform .1s ease}
.cal-day:hover{background:var(--surface-2); color:var(--ink)}
.cal-day:active{transform:scale(.92)}
.cal-day.today{color:var(--brand-ink); font-weight:700}
.cal-day.today::after{content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--brand)}
.cal-day.sel{background:var(--brand); color:#fff; font-weight:600}
.cal-day.sel:hover{background:var(--brand-ink); color:#fff}
.cal-day.sel.today{color:#fff}
.cal-day.sel.today::after{background:#fff}
.cal-foot{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.cal-today{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:38px;
  border:0; border-radius:10px; background:var(--brand-tint); color:var(--brand-ink);
  font-family:"DM Sans",sans-serif; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease}
.cal-today svg{width:16px; height:16px}
.cal-today:hover{background:var(--brand); color:#fff}
.cal-today:active{transform:scale(.98)}

/* required asterisk + disabled primary button */
.req{color:var(--danger); font-weight:700; font-size:11px; vertical-align:top; line-height:1; margin-left:1px}
.btn:disabled, .btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none; filter:grayscale(.15)}
.btn:disabled:hover, .btn[disabled]:hover{transform:none}

/* ---- topbar search results + notifications ---- */
.tb-actions{position:relative}
@keyframes tbIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

.tb-results{position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--sh-2);
  padding:6px; max-height:min(460px, 80vh); overflow:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
  transform-origin:top center; transform:translateY(-8px) scale(.98); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility 0s linear .2s}
.tb-results::-webkit-scrollbar{width:0; height:0; display:none}
.tb-search.open .tb-results{transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .16s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s}
.tb-res{display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:8px;
  color:var(--ink-2); text-decoration:none; font-size:13.5px; transition:background .13s ease, color .13s ease}
.tb-res-ic{display:grid; place-items:center; width:22px; height:22px; flex:none; color:var(--ink-4); transition:color .13s ease}
.tb-res-ic svg{width:16px; height:16px}
.tb-res-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tb-res-go{display:grid; place-items:center; flex:none; color:var(--ink-4)}
.tb-res-go svg{width:15px; height:15px; opacity:0; transform:translateX(-4px); transition:opacity .13s ease, transform .13s ease, color .13s ease}
.tb-res:hover, .tb-res.on{background:var(--surface-2); color:var(--ink)}
.tb-res:hover .tb-res-ic, .tb-res.on .tb-res-ic{color:var(--brand-ink)}
.tb-res:hover .tb-res-go svg, .tb-res.on .tb-res-go svg{opacity:1; transform:none; color:var(--brand-ink)}
.tb-empty{padding:18px; text-align:center; font-size:13px; color:var(--ink-4)}

.tb-bell-wrap{position:relative; display:inline-flex; align-items:center}
.tb-notes{position:absolute; top:calc(100% + 10px); right:0; z-index:40; width:324px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--sh-2); overflow:hidden;
  transform-origin:top right; transform:translateY(-8px) scale(.97); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .17s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility 0s linear .2s}
.tb-actions.notes-open .tb-notes{transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .17s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s}
.tb-notes-head{display:flex; align-items:center; gap:8px; padding:13px 14px; border-bottom:1px solid var(--line)}
.tb-notes-head b{font-family:"Outfit",sans-serif; font-size:14px; font-weight:600; color:var(--ink)}
.tb-notes-badge{margin-left:auto; font-size:11px; font-weight:600; color:var(--brand-ink); background:var(--brand-tint); border-radius:999px; padding:2px 8px}
.tb-notes-list{max-height:330px; overflow:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none}
.tb-notes-list::-webkit-scrollbar{width:0; height:0; display:none}
.tb-note{position:relative; display:flex; gap:11px; padding:11px 28px 11px 14px; border-bottom:1px solid var(--line)}
.tb-note:last-child{border-bottom:0}
.tb-note.unread{background:#F6F9FF}
.tb-note.unread::after{content:""; position:absolute; right:14px; top:16px; width:7px; height:7px; border-radius:50%; background:var(--brand)}
.tb-note-ic{width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); color:var(--ink-3)}
.tb-note-ic svg{width:16px; height:16px}
.tb-note-ic.download{background:#E7F0FE; color:#1D4ED8}
.tb-note-ic.message{background:var(--brand-tint); color:var(--brand-ink)}
.tb-note-ic.release{background:#FEF3E7; color:#B4690E}
.tb-note-ic.alert{background:var(--danger-bg); color:var(--danger)}
.tb-note-tx{min-width:0; flex:1}
.tb-note-tx p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.4}
.tb-note-tx span{font-size:11.5px; color:var(--ink-4)}
.tb-notes-foot{display:block; width:100%; text-align:center; padding:11px; border:0; border-top:1px solid var(--line);
  background:transparent; color:var(--brand-ink); font-family:"DM Sans",sans-serif; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background .14s ease}
.tb-notes-foot:hover{background:var(--surface-2)}
.login-field:has(.password-toggle){position:relative}
.login-field:has(.password-toggle) input{padding-right:32px}
.login-field .password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:7px;border:0;border-radius:7px;background:transparent;color:var(--ink-4);cursor:pointer;transition:background .15s ease,color .15s ease}
.login-field .password-toggle:hover{background:var(--brand-tint);color:var(--brand-ink)}
.login-field .password-toggle:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.login-field .password-toggle svg{position:static;width:18px;height:18px;stroke-width:1.75;color:inherit;transform:none;pointer-events:none}
.login-field .password-toggle svg[hidden]{display:none}
.login-field input::-ms-reveal,
.login-field input::-ms-clear{display:none}
.auth-toast{position:fixed;left:50%;top:24px;z-index:10000;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:9px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 8px 32px rgba(11,19,36,.12);font-family:"DM Sans",sans-serif;font-size:13px;line-height:1.4;opacity:0;transform:translate(-50%, calc(-100% - 32px));pointer-events:none}
.auth-toast.is-visible{opacity:1;pointer-events:auto}
.auth-toast.is-hiding{opacity:1;pointer-events:none}
.auth-toast-icon{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.auth-toast-icon svg{width:16px;height:16px}
.auth-toast-error .auth-toast-icon{background:#FDEBEC;color:#D63638}
@media(max-width:520px){.auth-toast{top:16px;width:max-content;max-width:calc(100vw - 32px)}}
@media(prefers-reduced-motion:reduce){.auth-toast{transition:none}.auth-toast.is-visible,.auth-toast.is-hiding{animation:none}}
#settings-body .csel-btn{min-height:44px;background:#fff;border-radius:11px;padding:11px 14px;transition:border-color .2s,box-shadow .2s,background .2s}
#settings-body .csel-btn:hover{border-color:#b5c7e1;background:#fafcff}
#settings-body .csel-menu{padding:6px;border-radius:13px;border-color:#dce5f2;box-shadow:0 12px 28px rgba(20,42,76,.12);transform:translateY(-6px)}
#settings-body .csel.open .csel-menu{transform:translateY(0)}
#settings-body .csel .csel-menu .csel-opt{transition-delay:0s}
#settings-body .csel-opt{height:56px;padding:9px 12px;gap:12px;border-radius:9px}
.settings-option-text{display:flex;flex:1;flex-direction:column;gap:4px}
.settings-option-text b{font-size:13px;font-weight:500}
.settings-option-text small{font-size:11px;color:var(--ink-4)}
.settings-option-check{opacity:0;flex:none;transition:opacity .2s}
.settings-option-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:var(--surface-2);color:var(--ink-3);transition:background .2s,color .2s}
.settings-option-icon svg{width:17px;height:17px}
#settings-body .csel-opt.on .settings-option-icon{background:#dceafe;color:var(--brand-ink)}
#settings-body .csel-opt.on .settings-option-check{opacity:1}
#settings-body .csel-opt.on small{color:var(--brand-ink);opacity:.75}
#settings-body .csel-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
#settings-body .csel-btn:disabled{opacity:.6;cursor:wait}

/* Center empty Insights card messages. */
.ins-empty { display: flex; align-items: center; justify-content: center; min-height: 80px; margin: 0; text-align: center; }

/* Keep Insights overview cards balanced and compact. */
.ins-overview { align-items: stretch; }
.ins-overview .hlrow { padding: 7px 0; }
.ins-overview .hlrow:first-child { padding-top: 0; }
.ins-overview .ins-empty { height: 100%; min-height: 80px; }

/* Match Downloads breakdown card heights and center its empty state. */
.dl-breakdown { align-items: stretch; }
#dl-byversion { display: flex; flex-direction: column; }
.dl-version-body { flex: 1; display: flex; flex-direction: column; }
.dl-empty { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 84px; margin: 0; text-align: center; }

/* Apps page empty state. */
.apps-empty { grid-column: 1 / -1; min-height: 280px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.apps-empty-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--brand); background: var(--brand-tint); margin-bottom: 16px; }
.apps-empty-icon svg { width: 25px; height: 25px; }
.apps-empty h3 { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 600; margin: 0 0 7px; color: var(--ink); }
.apps-empty p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.apps-empty-platforms { display: flex; gap: 18px; margin: 18px 0 22px; color: var(--ink-3); font-size: 12px; }
.apps-empty-platforms span { display: inline-flex; align-items: center; gap: 6px; }
.apps-empty-platforms svg { width: 15px; height: 15px; }

.iss-empty { min-height: 190px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-3); }
.iss-empty svg { width: 30px; height: 30px; color: var(--brand); margin-bottom: 12px; }
.iss-empty h3 { font-size: 17px; color: var(--ink-2); margin: 0 0 7px; }
.iss-empty p { font-size: 13px; margin: 0; }
.iss-detail-body { padding: 12px 4px; max-width: 100%; }
.iss-detail-body p { white-space: pre-wrap; overflow-wrap: anywhere; }
.iss-detail-body pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 8px; padding: 14px; max-height: 280px; overflow: auto; font-size: 12px; }

.fb-grid { align-items: stretch; }
#fb-reviews { display: flex; flex-direction: column; }
#fb-review-list { flex: 1; display: flex; flex-direction: column; }
.fb-empty { flex: 1; min-height: 240px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-3); }
.fb-empty svg { width: 30px; height: 30px; color: var(--brand); margin-bottom: 12px; }
.fb-empty h3 { font-size: 17px; color: var(--ink-2); margin: 0 0 7px; }
.fb-empty p { font-size: 13px; margin: 0; line-height: 1.6; }
.fb-more { padding: 16px; text-align: center; }
.review p { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Equal heights for the Dashboard chart cards. */
.dashboard-charts { align-items: stretch; }

.version-chart-card { display: flex; flex-direction: column; }
#version-chart-body.is-empty { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; text-align: center; }
#version-chart-body.is-empty p { margin: 0; font-size: 14px; }

#strip .cell { min-width: 0; }
#strip .active-install-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Compact release details keep Dashboard cards balanced. */
.dashboard-details #platform-card { align-self: stretch; }

.latest-release-empty { min-height: 104px; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; font-size: 14px; }

.latest-release-content { padding: 16px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px 16px; min-height: 104px; box-sizing: border-box; }
.latest-release-content > div:first-child { grid-column: 1 / -1; margin-bottom: 0 !important; min-width: 0; }
.latest-release-content .lrow { display: grid; grid-template-columns: 60px minmax(0,1fr); align-items: center; padding: 0; border: 0; font-size: 12px; min-width: 0; gap: 8px; }
.latest-release-content .lrow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latest-release-content .osmini i { width: 18px; height: 18px; }
.latest-release-content .osmini svg { width: 12px; height: 12px; }

.latest-release-content .lrow > b { text-align: left; justify-self: start; }
.latest-release-content .lrow > .osmini { justify-self: start; }
.latest-release-content .lrow:nth-child(3), .latest-release-content .lrow:nth-child(5) { border-left: 1px solid var(--line); padding-left: 14px; }
.latest-release-content > div:first-child > .mono { font-size: 20px !important; }

/* Live statistics updates keep cards in place instead of replaying entrance effects. */
.ownmic-live-view main.page .relcard{animation:none!important}

.visitor-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:16px;gap:16px}.visitor-metrics span{display:block;color:var(--ink-4);font-size:12px;margin-bottom:6px}.visitor-metrics b{font-family:"Outfit",sans-serif;font-size:24px;color:var(--ink)}@media(max-width:650px){.visitor-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Mobile shell: drawer navigation and a single conversation pane. */
.mobile-menu-shade,.chat-back{display:none}
.dash-grid>*,.grid-2>*,.apps-grid>*,.nr-grid>*,.field,.setrow-txt{min-width:0}
@media(max-width:820px){
 .app{display:block;min-height:100dvh}.content{width:100%}
 .sidebar{position:fixed;inset:0 auto 0 0;width:min(280px,85vw);height:100dvh;flex-direction:column;align-items:stretch;padding:0 12px 16px;gap:4px;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--line-2);border-bottom:0;z-index:60;transform:translateX(-100%);visibility:hidden;transition:transform .24s ease,visibility .24s}
 .sb-head{height:60px;flex:none;padding:0 4px}.snav{flex-direction:column}.sidebar-toggle{display:grid}.sb-bottom{margin-top:auto;flex:none}
 .sb-open{display:grid;top:14px;left:12px;z-index:16}.topbar{padding:0 12px 0 54px;gap:8px}.crumb{min-width:0}.crumb b{overflow:hidden;text-overflow:ellipsis}.tb-actions{gap:6px;flex:none}
 .tb-search{display:none}.crumb .muted,.crumb-sep{display:none}.tb-actions .btn .btn-tt{display:none}
 .mobile-menu-shade{display:block;position:fixed;inset:0;border:0;background:rgba(11,19,36,.3);z-index:59;opacity:0;visibility:hidden;transition:opacity .24s,visibility .24s}
 html.mobile-menu-open{overflow:hidden}html.mobile-menu-open .sidebar{transform:none;visibility:visible}html.mobile-menu-open .mobile-menu-shade{opacity:1;visibility:visible}
 .page{width:100%;padding:20px 12px 32px}.dash-grid,.grid-2{grid-template-columns:minmax(0,1fr)}
 .card:has(>.tbl){overflow-x:auto}.tbl{min-width:520px}.tbl th,.tbl td{padding:10px 12px}
 .tb-notes{position:fixed;top:66px;right:12px;width:calc(100vw - 24px);max-width:360px}
 .msg-page{padding:0}.chatwrap{height:calc(100dvh - 60px);min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .chatwrap .thlist{max-height:none;height:100%;border:0}.chatwrap .conv{display:none}.chatwrap.mobile-conversation .thlist{display:none}.chatwrap.mobile-conversation .conv{display:flex;height:100%}
 .chat-back{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:8px;border:0;border-radius:9px;background:var(--surface-2);color:var(--ink-3);cursor:pointer}.chat-back svg{width:18px;height:18px}
 .conv-head{padding:10px 12px}.ch-name{overflow-wrap:anywhere}.conv-body{padding:12px}.conv-foot{padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.bub{max-width:88%;overflow-wrap:anywhere}.bub .b-media{max-width:100%}
 .relcard-head,.relcard-foot,.review-top{flex-wrap:wrap}.relcard-id{min-width:0}.relcard-id .ver{overflow-wrap:anywhere}.ph .sp{display:none}.ph{align-items:center}
 .setrow{gap:12px}.setrow-txt{flex:1}.setrow-txt span,.field-hint,.pf-meta{overflow-wrap:anywhere}.switch{flex:none}
 .rl-dlg{max-height:calc(100dvh - 24px)}
}
@media(max-width:480px){
 .strip{grid-template-columns:repeat(2,minmax(0,1fr))}.cell{padding:12px}.cell .l{font-size:9px;letter-spacing:.06em}.cell .cap{overflow-wrap:anywhere}
 #strip .active-install-caption{white-space:normal}.latest-release-content{grid-template-columns:minmax(0,1fr)}
 .apps-grid,.nr-grid,.rl-row{grid-template-columns:minmax(0,1fr)}.pf-head{gap:12px}.pf-av{width:46px;height:46px}.pf-meta{min-width:0}
 input,textarea,select,.inp2,.tb-search input,.th-search input,.msg-input textarea{font-size:16px}
 .copyrow{flex-wrap:wrap}.copyrow .inp{min-width:0;flex-basis:100%}.visitor-metrics{gap:12px;padding:14px}.card>h4{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.sidebar,.mobile-menu-shade{transition:none}}
@media(max-width:480px){.strip>.cell:last-child:nth-child(odd){grid-column:1 / -1}.latest-release-content .lrow:nth-child(3),.latest-release-content .lrow:nth-child(5){border-left:0;padding-left:0}.inst-row{flex-wrap:wrap;gap:10px}.inst-sub{flex-wrap:wrap}.inst-file .inst-fn{max-width:100%;overflow-wrap:anywhere}.inst-right{margin-left:auto}.rl-ov{padding:12px}.setrow>.mono{flex:none;font-size:11px!important}}

#rel-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:640px){
 #rel-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 #rel-summary .cell{min-width:0;padding:16px 14px;box-shadow:none}
 #rel-summary .cell:nth-child(even){border-left:1px solid var(--line)}
 #rel-summary .cell:nth-child(n+3){border-top:1px solid var(--line)}
 #rel-summary .l{font-family:"DM Sans","Segoe UI",sans-serif;font-size:11px;font-weight:600;letter-spacing:.025em;color:var(--ink-3);white-space:nowrap}
 #rel-summary .cap{font-size:12px;line-height:1.4;color:var(--ink-3);white-space:nowrap;overflow-wrap:normal}
 #rel-summary .v{font-size:25px}#rel-summary .v.sm{font-size:21px}
}

.recent-release-mobile{display:none}
@media(max-width:640px){
 #recent .card{overflow:hidden}#recent .tbl{display:none}.recent-release-mobile{display:block}
 .recent-release-item{display:block;padding:14px;border-bottom:1px solid var(--line)}.recent-release-item:last-child{border-bottom:0}.recent-release-item:hover{background:var(--surface-2)}
 .recent-release-top{display:flex;align-items:center;gap:10px}.recent-release-top>b{font-size:14px;color:var(--ink);min-width:0;overflow-wrap:anywhere}.recent-release-top .osmini{margin-left:auto;flex:none}.recent-release-top .pill{flex:none}.recent-release-top .chev{flex:none;color:var(--ink-4)}.recent-release-top .chev svg{width:14px;height:14px}
 .recent-release-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px;color:var(--ink-3)}.recent-release-bottom b{font-weight:600;color:var(--ink-2)}
}

.tb-notes{display:flex;flex-direction:column;max-height:calc(100dvh - 84px)}
.tb-notes-head,.tb-notes-foot{flex:none}.tb-notes-list{min-height:0;flex:1}.tb-notes-foot[hidden]{display:none}.tb-notes-foot:disabled{color:var(--ink-4);cursor:default}
.tb-notes-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 16px 28px;text-align:center}
.tb-notes-empty-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand-tint);color:var(--brand);margin-bottom:3px}.tb-notes-empty-icon svg{width:23px;height:23px}
.tb-notes-empty b{color:var(--ink-2);font-size:13px;font-weight:600}.tb-notes-empty>span:last-child{font-size:12px;color:var(--ink-3);line-height:1.5}
@media(max-width:820px){.tb-notes{top:68px;left:12px;right:12px;width:auto;max-width:none;border-radius:14px;box-shadow:var(--sh-2)}.tb-notes-head{padding:15px 16px}.tb-notes-head b{font-size:15px}.tb-note{padding:13px 28px 13px 14px}.tb-note-tx p{overflow-wrap:anywhere;font-size:13px}.tb-notes-empty{padding:24px 16px}.tb-notes-foot{font-size:13px;padding:13px}}

@media(max-width:820px){
 .sidebar .sb-head{padding:0;height:60px;margin-bottom:6px}
 .sidebar-toggle,.sb-open{width:32px;height:32px;padding:0;align-items:center;justify-items:center}
 .sidebar{transition:transform .36s cubic-bezier(.22,1,.36,1),visibility 0s linear .36s;will-change:transform}
 html.mobile-menu-open .sidebar{transform:translateX(0);transition:transform .36s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}
 .mobile-menu-shade{transition:opacity .3s ease,visibility 0s linear .3s}
 html.mobile-menu-open .mobile-menu-shade{transition:opacity .3s ease,visibility 0s linear 0s}
}
@media(prefers-reduced-motion:reduce){.sidebar,html.mobile-menu-open .sidebar,.mobile-menu-shade,html.mobile-menu-open .mobile-menu-shade{transition:none}}

/* Sidebar buttons keep touch feedback rounded without a sticky hover. */
.sidebar-toggle,.sb-open{-webkit-tap-highlight-color:transparent;border-radius:50%;outline:none;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.sidebar-toggle:focus-visible,.sb-open:focus-visible{box-shadow:0 0 0 3px var(--brand-tint2);color:var(--brand-ink)}
@media(hover:none){.sidebar-toggle:hover,.sb-open:hover{background:transparent;color:var(--ink-4)}.sidebar-toggle:active,.sb-open:active{background:var(--brand-tint);color:var(--brand-ink)}}
@media(max-width:820px){
 .sidebar{transform:translate3d(-100%,0,0);transition:transform .42s cubic-bezier(.25,.8,.25,1),visibility 0s linear .42s}
 html.mobile-menu-open .sidebar{transform:translate3d(0,0,0);transition:transform .42s cubic-bezier(.25,.8,.25,1),visibility 0s linear 0s}
}
@media(prefers-reduced-motion:reduce){.sidebar,html.mobile-menu-open .sidebar{transition:none}}

/* Explicit sidebar motion remains enabled for the requested slide interaction. */
@media(max-width:820px){
 html .sidebar{transform:translate3d(-100%,0,0);opacity:1;pointer-events:none;visibility:hidden;transition:transform .48s cubic-bezier(.4,0,.2,1),visibility 0s linear .48s}
 html.mobile-menu-open .sidebar{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto;transition:transform .48s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
 html .mobile-menu-shade{transition:opacity .35s ease,visibility 0s linear .35s}
 html.mobile-menu-open .mobile-menu-shade{transition:opacity .35s ease,visibility 0s linear 0s}
}

.search-connection{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:"DM Sans",sans-serif;font-size:11px;font-weight:500;color:var(--ink-3);padding:4px 8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line)}
.search-connection::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-4)}
.search-performance-note{margin:0;padding:12px 16px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--ink-3)}

.visitor-totals{grid-template-columns:repeat(3,minmax(0,1fr))}.visitor-periods{display:flex;gap:20px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}.visitor-periods b{margin-left:6px;color:var(--ink-2);font-weight:600}
@media(max-width:480px){.visitor-totals{grid-template-columns:repeat(2,minmax(0,1fr))}.visitor-totals>div:last-child{grid-column:1 / -1}}

.visitor-metrics .visitor-metric-label{display:flex;align-items:center;gap:7px}.visitor-metric-label svg{width:16px;height:16px;flex:none;color:var(--brand)}
.search-providers{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 0}.search-providers>span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;font-size:12px;color:var(--ink-2)}.search-providers svg{width:16px;height:16px;flex:none}.provider-status{font-size:11px;color:var(--ink-3);padding-left:5px;border-left:1px solid var(--line)}

.visitor-metrics .visitor-metric-label{gap:9px;color:var(--ink-3)}.visitor-metric-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--brand-tint);font-style:normal}.visitor-metric-icon svg{width:17px;height:17px;color:var(--brand-ink);stroke-width:1.7}.visitor-totals b{margin-top:9px}.visitor-totals>div{padding:0 4px}

.visitor-totals>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px;min-width:0}.visitor-totals .visitor-metric-label{margin:0;min-width:0}.visitor-totals>div>b{margin:0;font-size:26px;flex:none;line-height:1.1;font-variant-numeric:tabular-nums}
@media(max-width:650px){.visitor-totals{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 16px}.visitor-totals>div{padding:14px 0}.visitor-totals>div+div{border-top:1px solid var(--line)}.visitor-totals>div:last-child{grid-column:auto}}

.search-performance-grid{align-items:stretch}.search-metrics{padding:4px 16px}.search-metrics>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;min-width:0}.search-metrics>div+div{border-top:1px solid var(--line)}.search-metrics .visitor-metric-label{display:flex;align-items:center;gap:9px;color:var(--ink-3);font-size:12px;min-width:0}.search-metrics>div>b{font-family:"Outfit",sans-serif;font-size:23px;line-height:1;color:var(--ink);flex:none;font-variant-numeric:tabular-nums}.search-performance-card>h4>svg{flex:none;width:17px;height:17px}

#recent .tbl .recent-arrow-heading,#recent .tbl .recent-arrow{width:34px;padding-left:0;padding-right:12px}#recent .recent-arrow a{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:24px}#recent .tbl .recent-downloads-heading,#recent .tbl .recent-downloads-count{text-align:right;padding-right:14px}#recent .tbl .recent-downloads-heading{font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-3)}

#ins-cities{display:flex;flex-direction:column}#ins-cities>h4{flex:none}#ins-cities>div{flex:1;display:flex;flex-direction:column}#ins-cities .ins-empty{flex:1;min-height:100px;display:flex;align-items:center;justify-content:center;margin:0;text-align:center}

/* Country/city content grows while attribution stays at the bottom. */
#ins-cities,#ins-geo{display:flex;flex-direction:column}
#ins-cities>h4,#ins-geo>h4{flex:none}
#ins-cities>.ins-location-body,#ins-geo>.ins-location-body{flex:1;display:flex;flex-direction:column;min-height:132px}
#ins-cities>.ins-location-credit,#ins-geo>.ins-location-credit{flex:0 0 auto;display:block;margin-top:auto;text-align:left}
#ins-cities .ins-empty,#ins-geo .ins-empty{flex:1;display:flex;align-items:center;justify-content:center;margin:0;text-align:center}

/* Preserve list cards during background updates without replaying entrance effects. */
[data-ownmic-stable] .relcard,[data-ownmic-stable] .thread{animation:none!important}

/* Messages: delete-chat button in the open chat header (2026-10-15) */
.ch-del{margin-left:auto; flex:none; display:grid; place-items:center; width:34px; height:34px; padding:8px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink-3); cursor:pointer; transition:background-color .2s ease, border-color .2s ease, color .2s ease}
.ch-del svg{width:17px; height:17px}
.ch-del:hover, .ch-del:focus-visible{background:var(--danger-bg); border-color:var(--danger); color:var(--danger-ink); outline:0}
.ch-del:disabled{opacity:.5; cursor:progress}

/* Login: fields locked while signing in */
.login-field:has(input:disabled){opacity:.6; cursor:progress}
.login-field input:disabled{cursor:progress; -webkit-text-fill-color:currentColor}
.login-field .password-toggle:disabled{cursor:progress; pointer-events:none}

/* Releases: installer fingerprints (SHA-256 saved at upload, re-checked before every download) */
.fp-box{display:flex;flex-direction:column;gap:6px;margin:10px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#FAFBFD}
.fp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
.fp-plat{min-width:62px;font-weight:600;color:var(--ink-2)}
.fp-hash{color:var(--ink-3);font-size:12px}
.fp-state{margin-left:auto;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600}
.fp-ok{background:var(--ok-bg);color:var(--ok-ink)}
.fp-warn{background:var(--warn-bg);color:var(--warn-ink)}
.fp-bad{background:var(--danger-bg);color:var(--danger-ink)}