/* ═══════════════════════════════════════════════════════════════════════════
   wit-windows.css — Windows-style taskbar + shell panel kebabs
   ---------------------------------------------------------------------------
   Faithful Windows 11 taskbar layout: Start (four-pane mark) on the left, app
   search beside it, app icons centred, system tray + clock on the right.
   Theme-agnostic: it reads the canonical tokens, so it adapts to light/dark.
   Loaded last so it owns the taskbar.
   ═══════════════════════════════════════════════════════════════════════════ */

.task-bar.windows {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex !important;
    align-items: center;
    gap: 6px;
    height: 48px !important;
    min-height: 48px;
    padding: 0 8px !important;
    justify-content: flex-start !important;
    background: color-mix(in srgb, var(--holo-surface) 90%, transparent) !important;
    border-top: 1px solid var(--holo-border-subtle) !important;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.06) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
}

/* ── Start (Windows four-pane mark) ── */
.tb-start {
    width: 40px; height: 40px; flex: none;
    border: none; background: transparent; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.tb-start:hover { background: rgba(127, 127, 127, 0.14); }

/* Witline mark: three leaves (triskelion) in our own style — the Start glyph.
   Not a copy of any third-party logo. */
.wit-mark { position: relative; width: 22px; height: 22px; display: inline-block; }
.wit-mark i {
    position: absolute; width: 9px; height: 9px;
    background: linear-gradient(140deg, var(--wa-accent, #1f6feb), #4f8ff7);
    transform: rotate(45deg); border-radius: 2px; display: block;
}
.wit-mark i:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%) rotate(45deg); }
.wit-mark i:nth-child(2) { bottom: 0; left: 0; }
.wit-mark i:nth-child(3) { bottom: 0; right: 0; }
.tb-start:hover .wit-mark i { filter: brightness(1.12); }

/* Witline mark asset (used on the Start button and as the favicon). */
.wit-mark-img { width: 22px; height: 22px; display: block; }
.tb-start:hover .wit-mark-img { filter: brightness(1.12); }

/* Home logotype: the Witline mark above "WIT" with "Blockchain" wrapped beneath. */
.ds-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ds-logo-mark { width: 56px; height: 56px; display: block; }
.ds-logo-text {
    display: flex; flex-direction: column; align-items: center;
    font-weight: 700; letter-spacing: 0.14em; line-height: 1; text-align: center;
    color: var(--text-primary);
}
.ds-logo-sub {
    display: block; margin-top: 8px;
    font-size: 0.30em; font-weight: 600; letter-spacing: 0.42em;
    text-transform: uppercase; color: var(--text-secondary);
    padding-left: 0.42em; /* balance the trailing letter-spacing */
}

/* Home composer: ChatGPT-style attach control (home plan H1). */
.ds-attach-btn {
    flex: none; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
    border-radius: 999px; color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-attach-btn:hover { background: rgba(127, 127, 127, 0.14); color: var(--text-primary); }

/* Composer input grows with content (ChatGPT behaviour) and wraps on Shift+Enter. */
.ds-search-input {
    field-sizing: content;
    min-height: 24px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
    font: inherit;
    line-height: 1.4;
}

/* ── Home results view (home plan H4): answer first, then Source rows, in the
   home language. Theme-agnostic via tokens; the dropdown borrows the popup layer. ── */
.ds-results-body { color: var(--text-primary); }
.ds-entity-inline,
.ds-entity-header-inline {
    background: var(--holo-surface);
    border: 1px solid var(--holo-border-subtle);
    border-radius: 12px;
}
.ds-entity-title-inline { color: var(--text-primary); font-weight: 600; }
.ds-back-btn {
    background: transparent; border: none; cursor: pointer;
    color: var(--neon-primary); font-weight: 600;
}
.ds-section-header {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary) !important; padding: 8px 10px 4px;
}
.ds-result-item {
    display: flex; align-items: center; gap: 10px; min-height: 40px;
    padding: 8px 10px; border-radius: 6px; color: var(--text-primary); cursor: pointer;
}
.ds-result-item:hover,
.ds-result-item.selected { background: rgba(127, 127, 127, 0.12) !important; }
.ds-result-icon { color: var(--text-secondary); flex: none; }
.ds-result-title { color: var(--text-primary); font-weight: 600; }
.ds-result-line2 { color: var(--text-secondary) !important; font-size: 12.5px; }

/* ── Windows 11 popup layer ───────────────────────────────────────────────
   Flyouts, menus and dropdowns: acrylic surface, 8px radius, 1px hairline,
   soft shadow, Windows row metrics, subtle pop-in. Dismissal (outside click,
   Esc) stays with each popup's existing logic. */
.topbar-menu, .dropdown-menu, .hat-dropdown-menu,
.top-bar .dropdown-menu, .panel-menu, .context-menu, .win-start {
    background: color-mix(in srgb, var(--holo-surface) 92%, transparent) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    backdrop-filter: blur(30px) !important;
    border: 1px solid var(--holo-border-subtle) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
    padding: 6px !important;
    color: var(--text-primary) !important;
    transform-origin: top center;
    animation: winPopupIn 140ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.dropdown-item, .hat-dropdown-item, .topbar-menu-item {
    border-radius: 4px !important;
    min-height: 34px;
    padding: 7px 10px !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}
.dropdown-item:hover, .hat-dropdown-item:hover, .topbar-menu-item:hover {
    background: rgba(127, 127, 127, 0.14) !important;
}
.dropdown-item.active, .hat-dropdown-item.active { background: rgba(127, 127, 127, 0.10) !important; }

@keyframes winPopupIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-menu, .dropdown-menu, .hat-dropdown-menu, .panel-menu, .context-menu, .win-start { animation: none !important; }
}
.win-logo { display: grid; grid-template-columns: 9px 9px; grid-template-rows: 9px 9px; gap: 2px; }
.win-logo i { display: block; background: #0078d4; border-radius: 1px; }
.tb-start:hover .win-logo i { background: #106ebe; }

/* ── App search beside Start ── */
.tb-search {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    width: 240px; height: 32px; padding: 0 12px; border-radius: 999px;
    background: rgba(127, 127, 127, 0.14);
}
.tb-search i { color: var(--text-secondary); font-size: 13px; }
.tb-search input {
    flex: 1; min-height: 0 !important; height: auto;
    border: none !important; background: transparent !important; box-shadow: none !important;
    color: var(--text-primary) !important; font-size: 13px; outline: none;
}
.tb-search input::placeholder { color: var(--text-dim); }

/* ── Centred app icons ── */
.tb-center { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto; }

.task-bar.windows .task-bar-btn {
    position: relative;
    flex-direction: column; align-items: center; justify-content: center;
    min-width: 44px; min-height: 40px; padding: 4px 6px; border-radius: 6px;
    background: transparent !important; box-shadow: none !important;
    color: var(--text-primary) !important;
}
.task-bar.windows .task-bar-btn:hover { background: rgba(127, 127, 127, 0.14) !important; }
.task-bar.windows .task-bar-btn .task-btn-icon { font-size: 18px; line-height: 1; }
.task-bar.windows .task-bar-btn .task-btn-icon i,
.task-bar.windows .task-bar-btn .task-btn-icon .fa-solid { color: var(--text-primary) !important; }
.task-bar.windows .task-bar-btn .task-btn-label { display: none; }
.task-bar.windows .task-bar-btn.primary { background: transparent !important; box-shadow: none !important; }

/* Windows running/active indicator: a short underline under the icon. */
.task-bar.windows .task-bar-btn.primary::after,
.task-bar.windows .task-bar-btn.active::after {
    content: "";
    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 3px; border-radius: 2px;
    background: var(--text-secondary); opacity: 0.8;
}

/* ── System tray + clock ── */
.tb-tray {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    color: var(--text-secondary); font-size: 12px;
}
.tb-tray > i { font-size: 12px; }
.tb-clock {
    display: inline-flex; flex-direction: column; align-items: flex-end;
    line-height: 1.2; color: var(--text-primary); font-size: 11.5px;
}

/* ── Panel kebabs ("three dots") in the top corner of each drawer ── */
.panel-kebab {
    margin-left: auto; border: none; background: transparent; cursor: pointer;
    color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; line-height: 1;
    font-size: 15px; flex: none;
}
.panel-kebab:hover { background: rgba(127, 127, 127, 0.14); color: var(--text-primary); }

/* ── Home favourites (Android-style): layout is theme-agnostic so dark looks right ── */
.ds-favourites {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 20px 0 8px;
}
.ds-fav {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: transparent; border: none; cursor: pointer; padding: 0;
}
.ds-fav-icon {
    width: 54px; height: 54px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; transition: transform 0.15s ease;
}
.ds-fav-label { font-size: 11px; color: var(--text-secondary); }
.ds-fav:hover .ds-fav-icon { transform: translateY(-2px); }

/* Dark theme: the pastel tiles read as garish on dark. Use a subtle surface. */
[data-theme="dark"] .ds-fav-icon {
    background: var(--holo-border-subtle) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .ds-fav-icon i { color: var(--neon-primary) !important; }
[data-theme="dark"] .ds-fav-label { color: var(--text-secondary); }

/* ══ Unified launcher (Smart Sidebar): apps, partitions and services ══
   Built on the --wit-* token layer (wit-design-tokens.css). Futuristic:
   holographic translucent panel, neon focus, spring reveal. */
.win-start-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: radial-gradient(120% 80% at 8% 100%, color-mix(in srgb, var(--neon-primary) 14%, transparent), transparent 60%);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.win-start {
    position: fixed; left: var(--wit-space-2); bottom: 56px; z-index: 71;
    width: 560px; max-height: 78vh; display: flex; flex-direction: column;
    color: var(--wit-color-on-surface);
    background: var(--wit-gradient-holo), color-mix(in srgb, var(--holo-surface) 78%, transparent);
    -webkit-backdrop-filter: blur(var(--wit-blur-sidebar)); backdrop-filter: blur(var(--wit-blur-sidebar));
    border: 1px solid color-mix(in srgb, var(--neon-primary) 28%, var(--wit-color-outline-variant));
    border-radius: var(--wit-radius-xl);
    box-shadow: var(--wit-elev-4), var(--wit-glow-md);
    overflow: hidden;
    transform-origin: 12% 100%;
    animation: wit-launcher-in var(--wit-motion-emphasized) var(--wit-spring-default) both;
}
@keyframes wit-launcher-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.win-start-search { display: flex; align-items: center; gap: var(--wit-space-3); padding: var(--wit-space-4) var(--wit-space-5) var(--wit-space-3); }
.win-start-search i { color: var(--neon-primary); }
.win-start-search input {
    flex: 1; min-height: var(--wit-target-min); border: none !important; background: transparent !important;
    outline: none; color: var(--wit-color-on-surface) !important; font-size: var(--wit-type-body-lg-size); box-shadow: none !important;
}
.win-start-search input::placeholder { color: var(--text-dim); }
.win-start-close {
    width: var(--wit-target-min); height: var(--wit-target-min); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--wit-radius-sm); background: transparent; cursor: pointer;
    color: var(--wit-color-on-surface-variant);
    transition: background var(--wit-motion-fast) ease, color var(--wit-motion-fast) ease;
}
.win-start-close:hover { background: color-mix(in srgb, var(--neon-primary) 16%, transparent); color: var(--wit-color-on-surface); }

/* Scrollable middle so the account footer stays pinned. */
.win-start-body { flex: 1; overflow-y: auto; padding-bottom: var(--wit-space-1); }

/* ── Section headers ── */
.win-start-head { display: flex; align-items: center; justify-content: space-between; padding: var(--wit-space-2) var(--wit-space-5); }
.win-start-section-title { font-size: var(--wit-type-label-size); font-weight: var(--wit-type-label-weight); letter-spacing: .04em; text-transform: uppercase; color: var(--wit-color-on-surface-variant); }
.win-start-showall {
    display: inline-flex; align-items: center; gap: var(--wit-space-1); padding: 4px 12px; border: 1px solid var(--wit-color-outline-variant); cursor: pointer;
    background: color-mix(in srgb, var(--neon-primary) 10%, transparent); border-radius: var(--wit-radius-pill);
    color: var(--wit-color-on-surface-variant); font-size: var(--wit-type-micro-size); font-weight: 600;
    transition: background var(--wit-motion-fast) ease, color var(--wit-motion-fast) ease, box-shadow var(--wit-motion-fast) ease;
}
.win-start-showall:hover { background: color-mix(in srgb, var(--neon-primary) 22%, transparent); color: var(--wit-color-on-surface); box-shadow: var(--wit-glow-sm); }
.win-start-showall i { font-size: 10px; }

/* ── Your hats ── */
.win-start-hats { display: flex; gap: var(--wit-space-2); padding: 0 var(--wit-space-5) var(--wit-space-3); overflow-x: auto; }
.win-start-hat {
    display: inline-flex; align-items: center; gap: var(--wit-space-2); min-height: 40px; padding: 6px 16px;
    border: 1px solid var(--wit-color-outline-variant); border-radius: var(--wit-radius-pill); cursor: pointer;
    background: color-mix(in srgb, var(--holo-surface) 60%, transparent); color: var(--wit-color-on-surface);
    font-size: var(--wit-type-label-size); font-weight: 600; white-space: nowrap;
    transition: transform var(--wit-motion-fast) var(--wit-spring-snap), box-shadow var(--wit-motion-fast) ease, border-color var(--wit-motion-fast) ease;
}
.win-start-hat:hover { border-color: color-mix(in srgb, var(--neon-primary) 55%, transparent); box-shadow: var(--wit-glow-sm); transform: translateY(-1px); }
.win-start-hat.active {
    background: linear-gradient(135deg, var(--neon-primary), color-mix(in srgb, var(--neon-cyan, var(--neon-secondary)) 70%, var(--neon-primary)));
    border-color: transparent; color: var(--wit-color-on-primary); box-shadow: var(--wit-glow-md);
}

/* ── Pinned apps: pastel squircle grid (tint/accent come from each favourite) ── */
.win-start-apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wit-space-1); padding: 0 var(--wit-space-4) var(--wit-space-3); }
.win-start-app {
    display: flex; flex-direction: column; align-items: center; gap: var(--wit-space-2); min-height: var(--wit-target-min);
    padding: var(--wit-space-2) var(--wit-space-1); border: none; background: transparent; cursor: pointer;
    border-radius: var(--wit-radius-md); color: var(--wit-color-on-surface); font-size: var(--wit-type-micro-size); text-align: center;
    transition: background var(--wit-motion-fast) ease, transform var(--wit-motion-fast) var(--wit-spring-snap);
}
.win-start-app:hover { background: color-mix(in srgb, var(--neon-primary) 12%, transparent); transform: translateY(-2px); }
.win-start-app-icon { width: 48px; height: 48px; border-radius: var(--wit-radius-lg); display: grid; place-items: center; font-size: 20px; box-shadow: var(--wit-elev-1); }
.win-start-app-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Recent rows ── */
.win-start-rec { display: flex; flex-direction: column; padding: 0 var(--wit-space-3) var(--wit-space-2); }
.win-start-rec-row {
    display: flex; align-items: center; gap: var(--wit-space-3); min-height: var(--wit-target-min); padding: var(--wit-space-2) var(--wit-space-3);
    border: none; cursor: pointer; background: transparent; border-radius: var(--wit-radius-md);
    color: var(--wit-color-on-surface); text-align: left; transition: background var(--wit-motion-fast) ease;
}
.win-start-rec-row:hover { background: color-mix(in srgb, var(--neon-primary) 8%, transparent); }
.win-start-rec-glyph { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--neon-primary); }
.win-start-rec-text { display: flex; flex-direction: column; min-width: 0; }
.win-start-rec-title { font-size: var(--wit-type-label-size); font-weight: 600; }
.win-start-rec-sub { font-size: var(--wit-type-micro-size); color: var(--wit-color-on-surface-variant); }
.win-start-empty { grid-column: 1 / -1; padding: var(--wit-space-3) var(--wit-space-5); color: var(--wit-color-on-surface-variant); font-size: var(--wit-type-caption-size); }
.win-start-empty-action {
    display: inline-flex; align-items: center; margin-left: var(--wit-space-2); min-height: 32px;
    padding: 0 var(--wit-space-3); border-radius: var(--wit-radius-pill);
    background: color-mix(in srgb, var(--neon-primary) 16%, transparent); color: var(--wit-color-on-surface);
    font-weight: 600; text-decoration: none;
}
.win-start-empty-action:hover { background: color-mix(in srgb, var(--neon-primary) 26%, transparent); }

/* ── Ranked command results ── */
.wit-results { display: flex; flex-direction: column; gap: 2px; padding: var(--wit-space-1) var(--wit-space-3) var(--wit-space-2); }
.wit-result {
    display: flex; align-items: center; gap: var(--wit-space-3); min-height: var(--wit-target-min);
    padding: var(--wit-space-2) var(--wit-space-3); border: 1px solid transparent; cursor: pointer; background: transparent;
    border-radius: var(--wit-radius-md); color: var(--wit-color-on-surface); text-align: left;
    transition: background var(--wit-motion-fast) ease, border-color var(--wit-motion-fast) ease, box-shadow var(--wit-motion-fast) ease;
}
.wit-result:hover { background: color-mix(in srgb, var(--neon-primary) 10%, transparent); }
.wit-result.active { background: color-mix(in srgb, var(--neon-primary) 16%, transparent); border-color: color-mix(in srgb, var(--neon-primary) 55%, transparent); box-shadow: var(--wit-glow-sm); }
.wit-result-icon { width: 30px; height: 30px; border-radius: var(--wit-radius-sm); display: grid; place-items: center; color: var(--neon-primary); background: color-mix(in srgb, var(--neon-primary) 12%, transparent); }
.wit-result-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wit-result-title { font-size: var(--wit-type-label-size); font-weight: 600; }
.wit-result-sub { font-size: var(--wit-type-micro-size); color: var(--wit-color-on-surface-variant); }
.wit-result-go { color: var(--wit-color-on-surface-variant); opacity: 0; transition: opacity var(--wit-motion-fast) ease; }
.wit-result.active .wit-result-go, .wit-result:hover .wit-result-go { opacity: 1; }

/* ── Footer: account + theme + power ── */
.win-start-footer {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wit-space-2);
    padding: var(--wit-space-3) var(--wit-space-4);
    border-top: 1px solid var(--wit-color-outline-variant);
    background: color-mix(in srgb, var(--neon-primary) 6%, transparent);
}
.win-start-user { display: inline-flex; align-items: center; gap: var(--wit-space-3); min-width: 0; text-decoration: none; color: inherit; }
.win-start-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--neon-primary), color-mix(in srgb, var(--neon-cyan, var(--neon-secondary)) 70%, var(--neon-primary)));
    color: var(--wit-color-on-primary); font-size: var(--wit-type-caption-size); font-weight: 700; flex-shrink: 0; box-shadow: var(--wit-glow-sm);
}
.win-start-user-text { display: flex; flex-direction: column; min-width: 0; }
.win-start-username { font-size: var(--wit-type-label-size); font-weight: 700; color: var(--wit-color-on-surface); }
.win-start-usersub { font-size: var(--wit-type-micro-size); color: var(--wit-color-on-surface-variant); max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-start-footer-actions { display: inline-flex; align-items: center; gap: var(--wit-space-1); }
.win-start-icon-btn, .win-start-power {
    width: var(--wit-target-min); height: var(--wit-target-min); border: none; border-radius: var(--wit-radius-sm); background: transparent; cursor: pointer;
    color: var(--wit-color-on-surface-variant); display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--wit-motion-fast) ease, color var(--wit-motion-fast) ease;
}
.win-start-icon-btn:hover { background: color-mix(in srgb, var(--neon-primary) 16%, transparent); color: var(--wit-color-on-surface); }
.win-start-power[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Token-level focus ring on every interactive element. */
.win-start button:focus-visible,
.win-start a:focus-visible,
.win-start input:focus-visible { outline: var(--wit-focus-ring); outline-offset: 2px; border-radius: var(--wit-radius-sm); }

@media (prefers-reduced-motion: reduce) {
    .win-start { animation: none !important; }
}

/* ── Guest landing CTA: shown to a no-entitlement visitor instead of the favourites editor ── */
.ds-guest-cta {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wit-space-4);
    margin: var(--wit-space-5) auto 0; max-width: 720px;
    padding: var(--wit-space-6) var(--wit-space-5); border-radius: var(--wit-radius-xl);
    background: var(--wit-gradient-holo), color-mix(in srgb, var(--holo-surface) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--neon-primary) 26%, var(--wit-color-outline-variant));
    box-shadow: var(--wit-elev-3), var(--wit-glow-sm);
}
.ds-guest-cta-actions { display: inline-flex; flex-wrap: wrap; gap: var(--wit-space-2); justify-content: center; }

/* Live demo of real domains for the guest home: app-style tiles (squircle + label), real data, real routes. */
.ds-guest-demo { width: 100%; max-width: 720px; margin: var(--wit-space-4) auto 0; text-align: center; }
.ds-guest-demo-title { font-size: var(--wit-type-caption-size); color: var(--wit-color-on-surface-variant); margin-bottom: var(--wit-space-4); }
.ds-guest-demo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wit-space-4); }
.ds-guest-demo-tile {
    display: flex; flex-direction: column; align-items: center; gap: var(--wit-space-2);
    width: 96px; min-height: var(--wit-target-min); text-decoration: none;
    color: var(--wit-color-on-surface); font-size: var(--wit-type-micro-size); font-weight: 600;
    transition: transform var(--wit-motion-fast) var(--wit-spring-snap);
}
.ds-guest-demo-tile:hover { transform: translateY(-2px); }
.ds-guest-demo-icon {
    width: 56px; height: 56px; border-radius: var(--wit-radius-lg); display: grid; place-items: center;
    font-size: 22px; color: var(--neon-primary);
    background: color-mix(in srgb, var(--neon-primary) 14%, transparent);
    box-shadow: var(--wit-elev-1);
}
.ds-guest-demo-tile:hover .ds-guest-demo-icon { box-shadow: var(--wit-glow-sm); }
.ds-guest-demo-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-guest-demo-count { font-size: var(--wit-type-micro-size); color: var(--wit-color-on-surface-variant); }
.ds-guest-demo-note { margin-top: var(--wit-space-4); font-size: var(--wit-type-micro-size); color: var(--wit-color-on-surface-variant); }
.ds-guest-cta-primary, .ds-guest-cta-secondary {
    display: inline-flex; align-items: center; gap: var(--wit-space-2); min-height: var(--wit-target-min);
    padding: 0 var(--wit-space-5); border-radius: var(--wit-radius-pill); text-decoration: none;
    font-size: var(--wit-type-label-size); font-weight: 600;
    transition: transform var(--wit-motion-fast) var(--wit-spring-snap), box-shadow var(--wit-motion-fast) ease;
}
.ds-guest-cta-primary { background: linear-gradient(135deg, var(--neon-primary), color-mix(in srgb, var(--neon-cyan, var(--neon-secondary)) 70%, var(--neon-primary))); color: var(--wit-color-on-primary); box-shadow: var(--wit-glow-sm); }
.ds-guest-cta-secondary { border: 1px solid var(--wit-color-outline-variant); color: var(--wit-color-on-surface); }
.ds-guest-cta-primary:hover, .ds-guest-cta-secondary:hover { transform: translateY(-1px); box-shadow: var(--wit-glow-md); }
.ds-guest-cta-ghost {
    display: inline-flex; align-items: center; gap: var(--wit-space-2); min-height: var(--wit-target-min);
    padding: 0 var(--wit-space-6); border-radius: var(--wit-radius-pill); cursor: pointer;
    background: color-mix(in srgb, var(--neon-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--neon-primary) 35%, transparent);
    color: var(--wit-color-on-surface); font-size: var(--wit-type-label-size); font-weight: 600;
    box-shadow: var(--wit-glow-sm);
    transition: transform var(--wit-motion-fast) var(--wit-spring-snap), box-shadow var(--wit-motion-fast) ease, background var(--wit-motion-fast) ease;
}
.ds-guest-cta-ghost:hover {
    background: color-mix(in srgb, var(--neon-primary) 24%, transparent);
    box-shadow: var(--wit-glow-md); transform: translateY(-1px);
}

/* Guest scope badge: neutral, because a visitor holds no wallet scope. */
.scope-badge.guest { background: color-mix(in srgb, var(--text-secondary) 18%, transparent); color: var(--text-secondary); }

/* The separate Windows Search popup (.win-search) is retired: the unified launcher above is the
   single search surface, so there is one place to style and one mental model for the user. */