.gs-dd{
  --a:#1FA463; --a2:#178A52; --a-soft:#E7F5EC; --ink:#1A1D24; --ink2:#3C4350;
  --muted:#8C95A1; --muted2:#AAB2BD; --line:#E9EDF3; --line2:#DFE4EB;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05); color:var(--ink);
}
.gs-dd .num{font-variant-numeric:tabular-nums}
.gs-dd .head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.gs-dd .crumb{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;margin-bottom:3px}
.gs-dd h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.gs-dd .head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gs-dd .btn.text{background:none;border:1px solid transparent;color:var(--ink2);height:32px;border-radius:6px;padding:0 12px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.gs-dd .btn.text:hover{color:var(--a)}
.gs-dd .mb-pill{position:relative;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line2);border-radius:6px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap}
.gs-dd .mb-pill .car{font-size:11px;color:var(--muted2)}
.gs-dd .mb-3{margin-bottom:14px}

.gs-dd .dd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.gs-dd .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:14px 16px}
.gs-dd .kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.gs-dd .kpi .v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
@media(max-width:820px){.gs-dd .dd-kpis{grid-template-columns:repeat(2,1fr)}}

.gs-dd .chartcard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.gs-dd .cc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.gs-dd .cc-head h5{margin:0;font-size:13px}
.gs-dd .empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:13px}

.gs-dd .dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:860px){.gs-dd .dd-grid{grid-template-columns:1fr}}

/* device bars */
.gs-dd .dev-bars{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.gs-dd .dev-row{display:grid;grid-template-columns:26px 90px 1fr auto;align-items:center;gap:10px}
.gs-dd .dev-row .ic{width:26px;height:26px;border-radius:7px;background:var(--a-soft);color:var(--a2);display:flex;align-items:center;justify-content:center;font-size:14px}
.gs-dd .dev-row .nm{font-size:13px;font-weight:600;text-transform:capitalize}
.gs-dd .dev-row .track{height:8px;background:#F1F4F8;border-radius:5px;overflow:hidden}
.gs-dd .dev-row .track i{display:block;height:100%;background:var(--a);border-radius:5px}
.gs-dd .dev-row .val{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-dd .dev-row .val b{color:var(--ink);font-weight:700}

/* expandable browser/os list */
.gs-dd .explist{padding:6px 8px}
.gs-dd .exp{border-radius:10px;overflow:hidden}
.gs-dd .exp+.exp{margin-top:2px}
.gs-dd .exp-hd{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 10px;cursor:pointer;border-radius:10px}
.gs-dd .exp-hd:hover{background:#F7F9FB}
.gs-dd .exp-hd .nm{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-width:0}
.gs-dd .exp-hd .chip{font-size:10.5px;font-weight:700;color:var(--a2);background:var(--a-soft);border-radius:20px;padding:1px 7px;white-space:nowrap}
.gs-dd .exp-hd .bar{width:120px;max-width:34vw;height:7px;background:#F1F4F8;border-radius:5px;overflow:hidden}
.gs-dd .exp-hd .bar i{display:block;height:100%;background:var(--a);border-radius:5px}
.gs-dd .exp-hd .meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-dd .exp-hd .cv{color:var(--muted2);font-size:12px;transition:transform .15s}
.gs-dd .exp.open .exp-hd .cv{transform:rotate(90deg)}
.gs-dd .exp-bd{display:none;padding:2px 12px 12px 12px}
.gs-dd .exp.open .exp-bd{display:block}
.gs-dd .vrow{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:10px;padding:3px 0}
.gs-dd .vrow .vv{font-size:12px;color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums}
.gs-dd .vrow .vt{height:6px;background:#F1F4F8;border-radius:4px;overflow:hidden}
.gs-dd .vrow .vt i{display:block;height:100%;background:#8FD4AE;border-radius:4px}
.gs-dd .vrow .vn{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.gs-dd .dd-note{margin-top:12px;color:var(--muted);font-size:11.5px;background:#F5F8FB;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.gs-dd .dd-note b{color:var(--ink2)}

/* range picker */
.gs-dd .rangepick{background:#fff;border:1px solid #E9EDF3;border-radius:10px;box-shadow:0 12px 30px rgba(16,24,40,.16);min-width:236px;padding:6px}
.gs-dd .rp-presets{display:flex;flex-direction:column}
.gs-dd .rangepick .rm{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;font-weight:600;font-size:13px;color:#3C4350;border:0;background:none;cursor:pointer}
.gs-dd .rangepick .rm:hover{background:#F5F7FA}
.gs-dd .rangepick .rm.on{background:var(--a-soft);color:var(--a2)}
.gs-dd .rp-custom{border-top:1px solid #EEF1F6;margin-top:6px;padding:10px 10px 8px}
.gs-dd .rp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#8C95A1;margin-bottom:8px}
.gs-dd .rp-dates{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.gs-dd .rp-dates input[type=date]{flex:1;min-width:0;height:32px;border:1px solid #D0D4DA;border-radius:6px;padding:0 8px;font-size:12.5px;color:#3C4350;background:#fff}
.gs-dd .rp-dates input[type=date]:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(31,164,99,.14)}
.gs-dd .rp-arrow{color:#AAB2BD;font-weight:700}
.gs-dd .rp-apply{width:100%;height:34px;border:0;border-radius:6px;background:var(--a);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.gs-dd .rp-apply:hover{background:var(--a2)}

.gsi{margin-right:2px}

/* ---- screen sizes / capabilities bar lists ---- */
.gs-dd .bar-list{display:flex;flex-direction:column;gap:9px;padding:14px 16px}
.gs-dd .brow2{display:grid;grid-template-columns:minmax(96px,1.1fr) 2fr minmax(96px,auto);align-items:center;gap:12px}
.gs-dd .brow2 .bl{font-size:13px;font-weight:600;color:#243247;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-dd .brow2 .bt{height:9px;border-radius:6px;background:#EEF2F7;overflow:hidden}
.gs-dd .brow2 .bt>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2FB874,#178A52)}
.gs-dd .brow2 .bv{font-size:12px;color:#5b6472;text-align:right;white-space:nowrap}
.gs-dd .brow2 .bv b{color:#111}
.gs-dd .dd-sub{padding:0 16px 14px}
.gs-dd .dd-sub-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#8C95A1;margin-bottom:6px}
.gs-dd .chip2{display:inline-block;font-size:12px;color:#334;background:#F1F5F9;border:1px solid #E5EAF1;border-radius:20px;padding:3px 10px;margin:0 6px 6px 0}
.gs-dd .chip2 b{color:#178A52}

/* ---- cross-reference (browsers per OS / device) ---- */
.gs-dd .crosslist{display:flex;flex-direction:column;gap:16px;padding:14px 16px}
.gs-dd .crow{border:1px solid #EEF1F5;border-radius:12px;padding:12px 14px;background:#fff}
.gs-dd .crow .ch{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.gs-dd .crow .cn{font-size:14px;font-weight:800;color:#1b2434;display:flex;align-items:center;gap:7px}
.gs-dd .crow .cs{font-size:12px;color:#8C95A1}
.gs-dd .cbar{display:flex;height:12px;border-radius:7px;overflow:hidden;background:#EEF2F7}
.gs-dd .cbar .seg{display:block;height:100%}
.gs-dd .cbrk{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:9px}
.gs-dd .cbrk .cb{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#3a4658}
.gs-dd .cbrk .cb b{color:#111}
.gs-dd .cbrk .cb .lg{width:9px;height:9px;border-radius:3px;flex:none}
.gs-dd .seg.s0,.gs-dd .lg.s0{background:#1FA463}
.gs-dd .seg.s1,.gs-dd .lg.s1{background:#3B82F6}
.gs-dd .seg.s2,.gs-dd .lg.s2{background:#F59E0B}
.gs-dd .seg.s3,.gs-dd .lg.s3{background:#8B5CF6}
.gs-dd .seg.s4,.gs-dd .lg.s4{background:#EC4899}
.gs-dd .seg.s5,.gs-dd .lg.s5{background:#64748B}
@media(max-width:560px){.gs-dd .brow2{grid-template-columns:minmax(80px,1fr) 1.4fr auto;gap:8px}}
.gs-dd .gsi{margin-right:2px;vertical-align:-.15em}

/* ── Device Intelligence ────────────────────────────────────────────────────
   All classes prefixed di- and checked against this plugin's existing 70 class
   names before use: a duplicate class silently restyles someone else's panel. */
.di{margin-top:34px;padding-top:26px;border-top:1px solid var(--gs-line,#E6E9EF)}
.di-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.di-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#1FA463}
.di-h{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:2px 0 0}
.di-h3{font-size:15px;font-weight:800;margin:0 0 4px}
.di-tot{font-size:12.5px;color:#8C95A1;font-variant-numeric:tabular-nums}
.di-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:13px}
.di-card{border:1px solid var(--gs-line,#E6E9EF);border-radius:11px;padding:14px;min-width:0;
  transition:border-color .18s,transform .18s}
.di-card:hover{border-color:rgba(31,164,99,.45);transform:translateY(-2px)}
.di-card-h{display:flex;align-items:center;gap:8px;font-size:14.5px;text-transform:capitalize}
.di-card-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-card-h span{font-weight:700;color:#1FA463;font-variant-numeric:tabular-nums}
.di-stats{display:flex;flex-wrap:wrap;gap:10px;margin:9px 0 11px;font-size:12px;color:#8C95A1}
.di-tri{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;color:#5C6E88}
.di-tri span{width:60px;flex:none}
.di-tri i{flex:1;height:6px;border-radius:4px;background:#EEF1F6;overflow:hidden;min-width:0}
.di-tri i b{display:block;height:100%;border-radius:4px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.di-tri em{font-style:normal;font-weight:700;color:#1A1D24;width:26px;text-align:right;font-variant-numeric:tabular-nums}
.di-persona{margin-top:9px;font-size:12.5px;color:#5C6E88}
.di-lands{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--gs-line,#E6E9EF)}
.di-land{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#5C6E88;text-decoration:none;min-width:0}
.di-land span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-land:hover{color:#1FA463}
.di-land b{font-variant-numeric:tabular-nums;color:#8C95A1;flex:none}
.di-links{display:flex;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--gs-line,#E6E9EF)}
.di-links a{font-size:11.5px;font-weight:700;color:#2A6FE8;text-decoration:none;background:rgba(42,111,232,.08);
  border:1px solid rgba(42,111,232,.2);border-radius:20px;padding:3px 10px}
.di-links a:hover{background:rgba(42,111,232,.16)}
.di-jrow{margin-bottom:13px}
.di-jh{display:flex;align-items:center;gap:7px;font-size:13px;margin-bottom:5px;text-transform:capitalize}
.di-jh b{flex:1;min-width:0}
.di-jbar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:#EEF1F6}
.di-jbar i{display:block;height:100%}
.di-jkey{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11.5px;color:#8C95A1;text-transform:capitalize}
.di-jkey i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.di-rrow{display:flex;align-items:center;gap:9px;font-size:12.5px;margin-bottom:7px}
.di-rk{width:86px;flex:none;color:#5C6E88}
.di-rbar{flex:1;height:7px;border-radius:4px;background:#EEF1F6;overflow:hidden;min-width:0}
.di-rbar b{display:block;height:100%;background:#2A6FE8;border-radius:4px}
.di-rrow em{font-style:normal;font-weight:700;width:38px;text-align:right;font-variant-numeric:tabular-nums}
.di-rb{width:64px;text-align:right;font-size:11.5px;color:#5C6E88;font-variant-numeric:tabular-nums;cursor:help}
.di-rkey{margin-top:8px;font-size:11px}
@media(prefers-reduced-motion:reduce){.di-card,.di-tri i b{transition:none}}

/* ── Devices by model ───────────────────────────────────────────────────────
   Reuses the .explist / .exp / .vrow component from the browser breakdown, so this
   panel needs only the two extras below rather than a parallel set of card styles. */
.di-t{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;border-radius:20px;padding:0 6px;vertical-align:1px}
.di-t-approx{color:#D97706;background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.25)}
.di-t-amb{color:#2A6FE8;background:rgba(42,111,232,.09);border:1px solid rgba(42,111,232,.22)}
.di-life{flex:none;margin-left:10px;font-size:11px;color:#A8B0BC;font-variant-numeric:tabular-nums}
.explist .vrow{align-items:center}
/* Class separators: a phone and a monitor are not comparable, so they get their own headings. */
.di-class + .di-class{margin-top:22px}
.di-class-h{display:flex;align-items:center;gap:8px;padding:0 0 8px;margin-bottom:6px;
  border-bottom:1px solid var(--gs-line,#E6E9EF)}
.di-class-h b{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#5C6E88}
.di-class-h span{margin-left:auto;font-size:11.5px;color:#A8B0BC;font-variant-numeric:tabular-nums}
.di-class-h svg{width:15px;height:15px;opacity:.7}