/* ──────────────────────────────────────────────────────────────────
   Refined brand tokens — same DNA, tighter system, less gradient.
   Used across all four shell variations so direct comparison is honest.
   ────────────────────────────────────────────────────────────────── */

:root {
    /* surfaces */
    --bg-app:        #F4F6F8;        /* page background */
    --bg-canvas:     #FFFFFF;        /* card surface */
    --bg-elevated:   #FFFFFF;
    --bg-rail:       #0E1620;        /* dark navigation rail */
    --bg-rail-soft:  #14202E;
    --bg-sunken:     #ECEFF2;
    --hairline:      rgba(15, 20, 25, 0.08);
    --hairline-2:    rgba(15, 20, 25, 0.04);

    /* text */
    --ink-1: #0F1722;                /* primary text */
    --ink-2: #4E5862;                /* secondary text */
    --ink-3: #8892A0;                /* tertiary / metadata */
    --ink-on-rail-1: #E6ECF2;
    --ink-on-rail-2: #8A99AB;
    --ink-on-rail-3: #5C6B7C;

    /* brand (cyan kept — used as accent, not wallpaper) */
    --brand:          #00B2E3;
    --brand-deep:     #006998;
    --brand-soft:     rgba(0, 178, 227, 0.10);
    --brand-line:     rgba(0, 178, 227, 0.30);

    /* status (kept consistent across all 3 tools) */
    --ok:    #1AAE8E;
    --warn:  #E89019;
    --bad:   #E5484D;
    --info:  #00B2E3;

    /* tonal accents per tool — used SPARINGLY for identification */
    --tool-sales:  #00B2E3;
    --tool-cx:     #7C5BD9;
    --tool-demo:   #E89019;

    /* spacing scale */
    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;
    --gap-5: 24px;
    --gap-6: 32px;
    --gap-7: 48px;

    /* radii */
    --r-1: 6px;
    --r-2: 10px;
    --r-3: 14px;
    --r-4: 18px;

    /* shadows */
    --shadow-card: 0 1px 2px rgba(15,20,25,0.04), 0 1px 0 rgba(15,20,25,0.02);
    --shadow-lift: 0 8px 24px rgba(15,20,25,0.06), 0 2px 4px rgba(15,20,25,0.04);

    /* type scale */
    --t-display:   28px;
    --t-h1:        20px;
    --t-h2:        16px;
    --t-body:      14px;
    --t-small:     12px;
    --t-micro:     11px;
}

/* ── Reset within artboards ── */
.shell, .shell * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.shell {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink-1);
    background: var(--bg-app);
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: var(--t-body);
    line-height: 1.45;
}

/* ──────────────────────────────────────────────────────────────────
   CONTENT — shared "Sales Analytics > Summary" scenario.
   ────────────────────────────────────────────────────────────────── */

.content-wrap {
    padding: var(--gap-5) var(--gap-6) var(--gap-6);
    overflow: auto;
    height: 100%;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-5);
    margin-bottom: var(--gap-4);
}
.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.page-eyebrow .swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--brand);
}
.page-title {
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-1);
}
.page-sub {
    font-size: var(--t-small);
    color: var(--ink-2);
    margin-top: 4px;
    max-width: 56ch;
}
.page-actions {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
}

.btn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    background: var(--bg-canvas);
    color: var(--ink-1);
    font: inherit;
    font-size: var(--t-small);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: var(--bg-sunken); }
.btn.primary {
    background: var(--ink-1);
    color: #fff;
    border-color: var(--ink-1);
}
.btn .ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ── Sub-tabs (sub-navigation within a tool) ── */
.subtabs {
    display: flex;
    gap: var(--gap-1);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--gap-5);
}
.subtab {
    padding: 10px 14px;
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--ink-2);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    transition: color .15s;
}
.subtab:hover { color: var(--ink-1); }
.subtab.active {
    color: var(--ink-1);
    border-bottom-color: var(--brand);
}
.subtab .ic {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 2; fill: none;
}

/* ── KPI strip ── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-3);
    margin-bottom: var(--gap-5);
}
.kpi {
    background: var(--bg-canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--gap-4);
    box-shadow: var(--shadow-card);
    position: relative;
}
.kpi-label {
    font-size: var(--t-micro);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 6px;
}
.kpi-value {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink-1);
}
.kpi-delta {
    margin-top: 6px;
    font-size: var(--t-micro);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.kpi-delta.up   { color: var(--ok); }
.kpi-delta.down { color: var(--bad); }
.kpi-delta.flat { color: var(--ink-3); }

/* ── Section cards (charts) ── */
.card {
    background: var(--bg-canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-card);
    padding: var(--gap-4);
    margin-bottom: var(--gap-3);
}
.card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--gap-3);
    margin-bottom: var(--gap-3);
}
.card-title { font-size: var(--t-h2); font-weight: 600; }
.card-sub { font-size: var(--t-small); color: var(--ink-3); margin-top: 2px; }
.card-actions { display: flex; gap: 4px; }

.chart-placeholder {
    height: 220px;
    border-radius: var(--r-2);
    background:
        linear-gradient(180deg, rgba(0,178,227,0.08), rgba(0,178,227,0) 70%),
        repeating-linear-gradient(
            45deg,
            rgba(15,20,25,0.025) 0 6px,
            transparent 6px 12px
        );
    position: relative;
    overflow: hidden;
}
.chart-placeholder::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(0,178,227,0.22), transparent 60%),
        radial-gradient(ellipse at 60% 100%, rgba(124,91,217,0.18), transparent 60%),
        radial-gradient(ellipse at 90% 100%, rgba(232,144,25,0.18), transparent 60%);
}
.chart-placeholder svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-3);
}

/* ── Generic icon button ── */
.icon-btn {
    width: 32px; height: 32px;
    border-radius: var(--r-2);
    border: 1px solid var(--hairline);
    background: var(--bg-canvas);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink-2);
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--ink-1); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ── Badge / chip ── */
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 8px;
    border-radius: 999px;
    font-size: var(--t-micro);
    font-weight: 600;
    color: var(--ink-2);
    background: var(--bg-sunken);
    border: 1px solid var(--hairline);
}
.chip.brand { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand-line); }
.chip.dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px;
    background: currentColor; display: inline-block;
}

/* ──────────────────────────────────────────────────────────────────
   VARIATION-SPECIFIC CHROME
   ────────────────────────────────────────────────────────────────── */

/* V1 — Left icon rail + clean header */
.v1 { display: grid; grid-template-columns: 64px 1fr; height: 100%; }
.v1 .rail {
    background: var(--bg-rail);
    color: var(--ink-on-rail-1);
    display: flex; flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 4px;
}
.v1 .rail .brand-mark {
    width: 36px; height: 36px;
    border-radius: var(--r-2);
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff; font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}
.v1 .rail-divider {
    width: 28px; height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 8px 0;
}
.v1 .rail-item {
    width: 44px; height: 44px;
    border-radius: var(--r-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-on-rail-2);
    position: relative;
    cursor: pointer;
}
.v1 .rail-item:hover { background: rgba(255,255,255,0.04); color: var(--ink-on-rail-1); }
.v1 .rail-item.active {
    background: rgba(0,178,227,0.14);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--brand);
}
.v1 .rail-item svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.v1 .rail-item .tt {
    position: absolute; left: 100%; margin-left: 10px;
    background: var(--ink-1); color: #fff;
    font-size: var(--t-micro); padding: 4px 8px; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transform: translateX(-4px); transition: opacity .15s, transform .15s;
}
.v1 .rail-item:hover .tt { opacity: 1; transform: translateX(0); }
.v1 .rail-spacer { flex: 1; }
.v1 .topbar {
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--gap-6);
    background: var(--bg-canvas);
    border-bottom: 1px solid var(--hairline);
}
.v1 .crumb {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--t-small); color: var(--ink-2);
}
.v1 .crumb .here { color: var(--ink-1); font-weight: 600; }
.v1 .topbar-actions { display: flex; align-items: center; gap: var(--gap-2); }

/* V2 — Top global nav with secondary tabs */
.v2 { display: flex; flex-direction: column; height: 100%; }
.v2 .topbar {
    background: var(--bg-canvas);
    border-bottom: 1px solid var(--hairline);
    padding: 0 var(--gap-6);
    display: flex; align-items: center; gap: var(--gap-5);
    height: 56px;
    flex-shrink: 0;
}
.v2 .brandlock {
    display: flex; align-items: center; gap: 10px;
    padding-right: var(--gap-5);
    border-right: 1px solid var(--hairline);
    height: 100%;
}
.v2 .brand-mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
}
.v2 .brand-name {
    font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.01em;
}
.v2 .tool-nav { display: flex; gap: 2px; flex: 1; }
.v2 .tool-link {
    padding: 8px 14px;
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--ink-2);
    border-radius: var(--r-2);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    position: relative;
}
.v2 .tool-link:hover { color: var(--ink-1); background: var(--bg-sunken); }
.v2 .tool-link.active {
    color: var(--ink-1);
    background: var(--bg-sunken);
}
.v2 .tool-link.active::after {
    content: ""; position: absolute; bottom: -17px;
    left: 14px; right: 14px; height: 2px;
    background: var(--brand);
    border-radius: 1px;
}
.v2 .tool-link .dot {
    width: 8px; height: 8px; border-radius: 2px;
}
.v2 .util-row { display: flex; align-items: center; gap: var(--gap-2); }
.v2 .search-pill {
    height: 32px;
    width: 220px;
    border-radius: var(--r-2);
    border: 1px solid var(--hairline);
    background: var(--bg-sunken);
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    font-size: var(--t-small);
    color: var(--ink-3);
}
.v2 .search-pill .kbd {
    margin-left: auto;
    font-size: 10px;
    background: var(--bg-canvas);
    border: 1px solid var(--hairline);
    padding: 1px 5px; border-radius: 4px;
    color: var(--ink-2);
}
.v2 .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #7C5BD9, #5638A8);
    color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.v2 .subtab-row {
    background: var(--bg-canvas);
    padding: 0 var(--gap-6);
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: center;
    height: 44px;
    flex-shrink: 0;
}
.v2 .subtab-row .subtabs { border: 0; margin: 0; }
.v2 .subtab-row .subtab { padding-top: 12px; padding-bottom: 12px; margin-bottom: 0; }
.v2 .body { flex: 1; overflow: auto; background: var(--bg-app); }

/* V3 — Hybrid: top tool switcher + left sub-nav */
.v3 { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr; height: 100%; }
.v3 .topbar {
    grid-column: 1 / -1;
    background: var(--bg-canvas);
    border-bottom: 1px solid var(--hairline);
    padding: 0 var(--gap-5) 0 var(--gap-4);
    display: flex; align-items: center; gap: var(--gap-5);
}
.v3 .tool-switcher {
    height: 40px;
    border-radius: var(--r-2);
    background: var(--bg-sunken);
    border: 1px solid var(--hairline);
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px 0 8px;
    cursor: pointer;
    min-width: 240px;
}
.v3 .tool-switcher .tool-icon {
    width: 26px; height: 26px; border-radius: 6px;
    background: var(--brand-soft); color: var(--brand-deep);
    display: flex; align-items: center; justify-content: center;
}
.v3 .tool-switcher .tool-icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.v3 .tool-switcher .ts-name {
    font-size: var(--t-small); font-weight: 600;
}
.v3 .tool-switcher .ts-prefix {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-3); font-weight: 600;
    line-height: 1;
}
.v3 .tool-switcher .chev { margin-left: auto; color: var(--ink-2); }
.v3 .global-search {
    height: 36px;
    flex: 1;
    max-width: 360px;
    border-radius: var(--r-2);
    border: 1px solid var(--hairline);
    background: var(--bg-sunken);
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    font-size: var(--t-small);
    color: var(--ink-3);
}
.v3 .global-search .kbd {
    margin-left: auto;
    font-size: 10px;
    background: var(--bg-canvas);
    border: 1px solid var(--hairline);
    padding: 1px 5px; border-radius: 4px;
}
.v3 .util-row { display: flex; align-items: center; gap: var(--gap-2); margin-left: auto; }
.v3 .sidenav {
    background: var(--bg-canvas);
    border-right: 1px solid var(--hairline);
    padding: var(--gap-4) var(--gap-3);
    overflow: auto;
}
.v3 .sidenav-group { margin-bottom: var(--gap-5); }
.v3 .sidenav-group-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-3);
    font-weight: 700;
    padding: 4px 10px;
    margin-bottom: 4px;
}
.v3 .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    font-size: var(--t-small);
    color: var(--ink-2);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}
.v3 .nav-item:hover { background: var(--bg-sunken); color: var(--ink-1); }
.v3 .nav-item.active {
    background: var(--brand-soft);
    color: var(--brand-deep);
}
.v3 .nav-item svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.v3 .nav-item .badge {
    margin-left: auto;
    font-size: 10px;
    background: var(--ink-1);
    color: #fff;
    padding: 1px 6px; border-radius: 999px;
}
.v3 .body { overflow: auto; background: var(--bg-app); }
.v3 .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #7C5BD9, #5638A8); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* V3 tools menu (visible in artboard to show the switcher concept) */
.v3 .tools-flyout {
    position: absolute; top: 56px; left: var(--gap-4);
    width: 320px;
    background: var(--bg-canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-lift);
    padding: var(--gap-2);
    z-index: 50;
}
.v3 .tools-flyout .fly-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-3); font-weight: 700;
    padding: 8px 10px 4px;
}
.v3 .tools-flyout .fly-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}
.v3 .tools-flyout .fly-item:hover { background: var(--bg-sunken); }
.v3 .tools-flyout .fly-item.active { background: var(--brand-soft); }
.v3 .tools-flyout .fly-ic {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.v3 .tools-flyout .fly-ic svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.v3 .tools-flyout .fly-meta { display: flex; flex-direction: column; }
.v3 .tools-flyout .fly-name { font-size: var(--t-small); font-weight: 600; color: var(--ink-1); }
.v3 .tools-flyout .fly-sub { font-size: var(--t-micro); color: var(--ink-3); }
.v3 .tools-flyout .add-tool {
    border-top: 1px solid var(--hairline);
    margin-top: 4px; padding-top: 4px;
}
.v3 .tools-flyout .add-tool .fly-ic {
    background: var(--bg-sunken); color: var(--ink-2);
    border: 1px dashed var(--hairline);
}

/* V4 — Minimal shell with ⌘K launcher */
.v4 { display: flex; flex-direction: column; height: 100%; background: var(--bg-app); }
.v4 .topbar {
    height: 48px;
    padding: 0 var(--gap-6);
    display: flex; align-items: center; gap: var(--gap-3);
    background: transparent;
    flex-shrink: 0;
}
.v4 .brand-dot {
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px;
}
.v4 .crumbs {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--t-small); color: var(--ink-2);
}
.v4 .crumbs .slash { color: var(--ink-3); }
.v4 .crumbs .here { color: var(--ink-1); font-weight: 600; }
.v4 .crumbs .switch {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
    padding: 4px 8px; margin: -4px -8px;
    border-radius: 6px;
}
.v4 .crumbs .switch:hover { background: var(--bg-sunken); }
.v4 .crumbs .switch svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.v4 .v4-util { margin-left: auto; display: flex; align-items: center; gap: var(--gap-2); }
.v4 .cmdk {
    height: 30px;
    border-radius: var(--r-2);
    background: var(--bg-canvas);
    border: 1px solid var(--hairline);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 10px;
    font-size: var(--t-small); color: var(--ink-3);
    cursor: pointer;
}
.v4 .cmdk .kbd {
    font-size: 10px;
    background: var(--bg-sunken);
    border: 1px solid var(--hairline);
    padding: 1px 5px; border-radius: 4px;
    color: var(--ink-2);
    margin-left: var(--gap-4);
}
.v4 .v4-subtabs {
    padding: 0 var(--gap-6);
    display: flex; align-items: center;
    height: 38px;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
    flex-shrink: 0;
}
.v4 .v4-subtabs .subtabs {
    border: 0; margin: 0; height: 100%;
}
.v4 .v4-subtabs .subtab {
    padding-top: 10px; padding-bottom: 10px; margin-bottom: 0;
    font-size: var(--t-small);
}
.v4 .body { flex: 1; overflow: auto; }
.v4 .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #7C5BD9, #5638A8); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* V4 launcher overlay (drawn open to communicate the pattern) */
.v4 .launcher {
    position: absolute; top: 60px; left: 50%;
    transform: translateX(-50%);
    width: 520px;
    background: var(--bg-canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-lift), 0 24px 64px rgba(15,20,25,0.18);
    overflow: hidden;
    z-index: 50;
}
.v4 .launcher .l-search {
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: center; gap: 10px;
    font-size: var(--t-body);
    color: var(--ink-3);
}
.v4 .launcher .l-group-label {
    padding: 10px 16px 4px;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--ink-3); font-weight: 700;
}
.v4 .launcher .l-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
}
.v4 .launcher .l-item:hover, .v4 .launcher .l-item.focused { background: var(--bg-sunken); }
.v4 .launcher .l-ic {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.v4 .launcher .l-ic svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.v4 .launcher .l-meta { display: flex; flex-direction: column; }
.v4 .launcher .l-name { font-size: var(--t-small); font-weight: 600; color: var(--ink-1); }
.v4 .launcher .l-sub { font-size: var(--t-micro); color: var(--ink-3); }
.v4 .launcher .l-key {
    margin-left: auto;
    font-size: 10px;
    background: var(--bg-sunken);
    border: 1px solid var(--hairline);
    padding: 1px 6px; border-radius: 4px;
    color: var(--ink-2);
}