/*
 * USL Web port of TabNook's Glass Pane skin.
 * Frosted panels, hairline borders, pill controls, Inter, pastel page wash.
 * Light glass is the default (USL light theme). USL dark (no data-theme="light")
 * uses the same dark-glass tokens TabNook applies under prefers-color-scheme.
 * Every rule is scoped to body[data-skin="glass"].
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body[data-skin="glass"] {
  --skin-radius-card: 18px;
  --skin-radius-input: 12px;
  --skin-blur: 24px;
  --skin-saturate: 180%;
  --skin-surface: rgba(255, 255, 255, 0.62);
  --skin-surface-strong: rgba(255, 255, 255, 0.86);
  --skin-surface-subtle: rgba(255, 255, 255, 0.4);
  --skin-border: rgba(15, 23, 42, 0.16);
  --skin-border-soft: rgba(15, 23, 42, 0.1);
  --skin-divider: rgba(15, 23, 42, 0.1);
  --skin-text: #1c2433;
  --skin-text-muted: #3d4a5c;
  --skin-text-subtle: #5c6b7c;
  --skin-text-link: #1d4ed8;
  --skin-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 30px 60px -20px rgba(15, 23, 42, 0.18),
    0 8px 24px -8px rgba(15, 23, 42, 0.12);
  --skin-font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: light;
  background-color: #e9eaf4 !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 18% 18%, rgba(167, 139, 250, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 28%, rgba(251, 146, 191, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 60% 85%, rgba(125, 211, 252, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% 78%, rgba(253, 224, 71, 0.32) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: var(--skin-text) !important;
  font-family: var(--skin-font-display);
  letter-spacing: -0.01em;
}

html:not([data-theme="light"]) body[data-skin="glass"] {
  --skin-surface: rgba(28, 28, 32, 0.72);
  --skin-surface-strong: rgba(28, 28, 32, 0.9);
  --skin-surface-subtle: rgba(255, 255, 255, 0.08);
  --skin-border: rgba(255, 255, 255, 0.14);
  --skin-border-soft: rgba(255, 255, 255, 0.08);
  --skin-divider: rgba(255, 255, 255, 0.1);
  --skin-text: #f4f5f7;
  --skin-text-muted: #d5d7de;
  --skin-text-subtle: #b7bcc8;
  --skin-text-link: #7dd3fc;
  --skin-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 8px 24px -8px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
  background-color: #0c0c10 !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 18% 18%, rgba(76, 29, 149, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 28%, rgba(124, 24, 60, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 60% 85%, rgba(8, 47, 73, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% 78%, rgba(120, 53, 15, 0.35) 0%, transparent 60%) !important;
}

body[data-skin="glass"] h1,
body[data-skin="glass"] h2,
body[data-skin="glass"] h3,
body[data-skin="glass"] h4,
body[data-skin="glass"] h5,
body[data-skin="glass"] h6,
body[data-skin="glass"] .home-wordmark-title,
body[data-skin="glass"] .ft-name,
body[data-skin="glass"] .section-head,
body[data-skin="glass"] .navbar-brand,
body[data-skin="glass"] .navbar-brand-text {
  font-family: var(--skin-font-display) !important;
  color: var(--skin-text) !important;
  letter-spacing: -0.02em;
  text-shadow: none;
  text-transform: none;
}

body[data-skin="glass"] .home-banner,
body[data-skin="glass"] .home-wordmark-title {
  background: transparent !important;
}

body[data-skin="glass"] .home-wordmark-rule {
  background: linear-gradient(90deg, rgba(125, 211, 252, 0.2), rgba(167, 139, 250, 0.85), rgba(251, 146, 191, 0.2)) !important;
  box-shadow: none;
}

body[data-skin="glass"] a { color: var(--skin-text-link); }
body[data-skin="glass"] a:hover { color: var(--skin-text); }

body[data-skin="glass"] p,
body[data-skin="glass"] li,
body[data-skin="glass"] label,
body[data-skin="glass"] .lede,
body[data-skin="glass"] .site-desc,
body[data-skin="glass"] .store-lede,
body[data-skin="glass"] .disc-note,
body[data-skin="glass"] .text-muted,
body[data-skin="glass"] .form-text,
body[data-skin="glass"] .ft-count,
body[data-skin="glass"] .topic-count {
  color: var(--skin-text-muted) !important;
}

body[data-skin="glass"] .res-card,
body[data-skin="glass"] .facet-tile,
body[data-skin="glass"] .featured-card,
body[data-skin="glass"] .home-store-card,
body[data-skin="glass"] .prod-card,
body[data-skin="glass"] .card,
body[data-skin="glass"] .lb-box,
body[data-skin="glass"] .rpt-box,
body[data-skin="glass"] .store-lb-box,
body[data-skin="glass"] .sidebar,
body[data-skin="glass"] .usl-situation,
body[data-skin="glass"] .site-foot {
  background: var(--skin-surface) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: var(--skin-radius-card) !important;
  box-shadow: var(--skin-shadow) !important;
  backdrop-filter: blur(var(--skin-blur)) saturate(var(--skin-saturate));
  -webkit-backdrop-filter: blur(var(--skin-blur)) saturate(var(--skin-saturate));
}

body[data-skin="glass"] .res-card:hover,
body[data-skin="glass"] .facet-tile:hover,
body[data-skin="glass"] .featured-card:hover,
body[data-skin="glass"] .home-store-card:hover,
body[data-skin="glass"] .prod-card:hover,
body[data-skin="glass"] .card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 36px 70px -22px rgba(15, 23, 42, 0.22),
    0 12px 28px -10px rgba(15, 23, 42, 0.16) !important;
}

body[data-skin="glass"] .card-header,
body[data-skin="glass"] .lb-head,
body[data-skin="glass"] .store-lb-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 100%) !important;
  color: var(--skin-text) !important;
  border-bottom: 1px solid var(--skin-divider) !important;
  font-family: var(--skin-font-display);
}

html:not([data-theme="light"]) body[data-skin="glass"] .card-header,
html:not([data-theme="light"]) body[data-skin="glass"] .lb-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%) !important;
}

body[data-skin="glass"] .card-body,
body[data-skin="glass"] .rc-body,
body[data-skin="glass"] .pc-body {
  background: transparent !important;
  color: var(--skin-text) !important;
}

body[data-skin="glass"] .res-card h5,
body[data-skin="glass"] .featured-card h5,
body[data-skin="glass"] .home-store-title,
body[data-skin="glass"] .featured-card p,
body[data-skin="glass"] .res-card p {
  color: var(--skin-text) !important;
  font-family: var(--skin-font-display);
}

body[data-skin="glass"] .res-card p,
body[data-skin="glass"] .featured-card p {
  color: var(--skin-text-muted) !important;
}

body[data-skin="glass"] .section-head .sh-icon { color: #6d28d9 !important; }
html:not([data-theme="light"]) body[data-skin="glass"] .section-head .sh-icon { color: #c4b5fd !important; }

body[data-skin="glass"] .type-chip,
body[data-skin="glass"] .cat-chip,
body[data-skin="glass"] .topic-pills a,
body[data-skin="glass"] .rb-saved {
  background: var(--skin-surface-strong) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px);
}

body[data-skin="glass"] .type-chip:hover,
body[data-skin="glass"] .cat-chip.on,
body[data-skin="glass"] .topic-pills a[aria-current="page"] {
  background: #ffffff !important;
  color: #1c2433 !important;
  border-color: rgba(109, 40, 217, 0.45) !important;
}

body[data-skin="glass"] #navbar-placeholder .navbar {
  background: var(--skin-surface) !important;
  border-bottom: 1px solid var(--skin-border-soft);
  backdrop-filter: blur(20px) saturate(var(--skin-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--skin-saturate));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 24px -12px rgba(15, 23, 42, 0.2) !important;
  position: sticky;
  z-index: 1030;
}

body[data-skin="glass"] #navbar-placeholder .navbar-brand,
body[data-skin="glass"] #navbar-placeholder .navbar-brand-text,
body[data-skin="glass"] #navbar-placeholder .nav-link {
  color: var(--skin-text) !important;
  font-family: var(--skin-font-display);
  font-weight: 600;
  text-shadow: none;
}

body[data-skin="glass"] #navbar-placeholder .btn-store,
body[data-skin="glass"] #navbar-placeholder .btn-suggest,
body[data-skin="glass"] #navbar-placeholder .btn-contact,
body[data-skin="glass"] #navbar-placeholder .btn-reader,
body[data-skin="glass"] #navbar-placeholder .btn-videos,
body[data-skin="glass"] #navbar-placeholder .btn-topics,
body[data-skin="glass"] #navbar-placeholder .btn-library,
body[data-skin="glass"] #navbar-placeholder .btn-auth,
body[data-skin="glass"] .home-store-cta,
body[data-skin="glass"] .btn,
body[data-skin="glass"] .btn-primary,
body[data-skin="glass"] .btn-dark,
body[data-skin="glass"] .btn-amazon,
body[data-skin="glass"] .load-more,
body[data-skin="glass"] .rc-btn,
body[data-skin="glass"] .rpt-submit,
body[data-skin="glass"] .rpt-cancel,
body[data-skin="glass"] .usl-situation-toggle {
  border-radius: 999px !important;
  font-family: var(--skin-font-display) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  background: var(--skin-surface-strong) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  text-shadow: none;
}

/* Keep the shared nav on Rajdhani so the homepage count stays on screen. */
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-store,
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-suggest,
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-contact,
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-reader,
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-videos,
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-topics,
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-library,
body[data-skin="glass"] #navbar-placeholder .navbar-nav .btn-auth {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.92rem;
}

body[data-skin="glass"] #navbar-placeholder .btn-store,
body[data-skin="glass"] .home-store-cta,
body[data-skin="glass"] .btn-primary,
body[data-skin="glass"] .btn-dark,
body[data-skin="glass"] .btn-amazon,
body[data-skin="glass"] .rpt-submit {
  background: color-mix(in srgb, #0f766e 20%, white) !important;
  color: #0c3d38 !important;
  border-color: color-mix(in srgb, #0f766e 45%, transparent) !important;
}

body[data-skin="glass"] #navbar-placeholder .btn-suggest {
  background: color-mix(in srgb, #be123c 16%, white) !important;
  color: #7a1230 !important;
  border-color: color-mix(in srgb, #be123c 40%, transparent) !important;
}

html:not([data-theme="light"]) body[data-skin="glass"] #navbar-placeholder .btn-store,
html:not([data-theme="light"]) body[data-skin="glass"] .home-store-cta,
html:not([data-theme="light"]) body[data-skin="glass"] .btn-primary,
html:not([data-theme="light"]) body[data-skin="glass"] .btn-amazon,
html:not([data-theme="light"]) body[data-skin="glass"] .rpt-submit {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

html:not([data-theme="light"]) body[data-skin="glass"] #navbar-placeholder .btn-suggest {
  background: #be123c !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body[data-skin="glass"] #navbar-placeholder .btn-store:hover,
body[data-skin="glass"] #navbar-placeholder .btn-suggest:hover,
body[data-skin="glass"] #navbar-placeholder .btn-contact:hover,
body[data-skin="glass"] .btn:hover,
body[data-skin="glass"] .home-store-cta:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

body[data-skin="glass"] #navbar-placeholder .usl-theme-toggle,
body[data-skin="glass"] #navbar-placeholder .usl-saved-toggle {
  background: var(--skin-surface-strong);
  color: var(--skin-text);
  border: 1px solid var(--skin-border);
}

body[data-skin="glass"] #navbar-placeholder .usl-skin-btn {
  background-color: var(--skin-surface-strong);
  background-image: none;
  color: var(--skin-text);
  border: 1px solid var(--skin-border);
  border-radius: 50%;
}

body[data-skin="glass"] #navbar-placeholder .usl-skin-menu {
  background: var(--skin-surface-strong);
  color: var(--skin-text);
  border: 1px solid var(--skin-border);
  border-radius: 12px;
  box-shadow: var(--skin-shadow);
  backdrop-filter: blur(20px) saturate(var(--skin-saturate));
}

body[data-skin="glass"] #navbar-placeholder .usl-skin-menu li {
  color: var(--skin-text);
}

body[data-skin="glass"] #navbar-placeholder .usl-skin-menu li:hover,
body[data-skin="glass"] #navbar-placeholder .usl-skin-menu li:focus,
body[data-skin="glass"] #navbar-placeholder .usl-skin-menu li[aria-selected="true"] {
  background: rgba(15, 23, 42, 0.08);
  color: var(--skin-text);
}

html:not([data-theme="light"]) body[data-skin="glass"] #navbar-placeholder .usl-skin-menu li:hover,
html:not([data-theme="light"]) body[data-skin="glass"] #navbar-placeholder .usl-skin-menu li:focus,
html:not([data-theme="light"]) body[data-skin="glass"] #navbar-placeholder .usl-skin-menu li[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.1);
}

body[data-skin="glass"] .navbar-toggler {
  border-color: var(--skin-border) !important;
}

body[data-skin="glass"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%231c2433' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

html:not([data-theme="light"]) body[data-skin="glass"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23f4f5f7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

body[data-skin="glass"] .dropdown-menu {
  background: var(--skin-surface-strong) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--skin-shadow) !important;
  backdrop-filter: blur(20px) saturate(var(--skin-saturate));
  z-index: 1050 !important;
}

body[data-skin="glass"] .dropdown-item {
  color: var(--skin-text) !important;
  border-radius: 8px;
}

body[data-skin="glass"] .dropdown-item:hover,
body[data-skin="glass"] .dropdown-item:focus {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--skin-text) !important;
}

html:not([data-theme="light"]) body[data-skin="glass"] .dropdown-item:hover,
html:not([data-theme="light"]) body[data-skin="glass"] .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}

body[data-skin="glass"] .form-control,
body[data-skin="glass"] select,
body[data-skin="glass"] textarea,
body[data-skin="glass"] .header-search input,
body[data-skin="glass"] .sort-sel,
body[data-skin="glass"] .store-search input {
  background: var(--skin-surface-strong) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border-soft) !important;
  border-radius: var(--skin-radius-input) !important;
  font-family: var(--skin-font-display);
}

body[data-skin="glass"] .form-control:focus,
body[data-skin="glass"] textarea:focus,
body[data-skin="glass"] .header-search input:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
  color: var(--skin-text) !important;
}

body[data-skin="glass"] .form-control::placeholder,
body[data-skin="glass"] .header-search input::placeholder {
  color: var(--skin-text-subtle);
}

body[data-skin="glass"] .header-search i,
body[data-skin="glass"] .store-search i { color: var(--skin-text-muted) !important; }

body[data-skin="glass"] .suggest {
  background: var(--skin-surface-strong) !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 12px;
  z-index: 1060;
}

body[data-skin="glass"] .suggest div { color: var(--skin-text) !important; }

body[data-skin="glass"] .usl-situation-kicker,
body[data-skin="glass"] .usl-situation-headline,
body[data-skin="glass"] .usl-situation-copy {
  color: var(--skin-text) !important;
  font-family: var(--skin-font-display);
}

body[data-skin="glass"] .usl-situation-asof,
body[data-skin="glass"] .usl-situation-regions,
body[data-skin="glass"] .site-foot,
body[data-skin="glass"] .site-foot .foot-copy {
  color: var(--skin-text-muted) !important;
}

body[data-skin="glass"] .site-foot a,
body[data-skin="glass"] .usl-situation-sources a {
  color: var(--skin-text-link) !important;
}

body[data-skin="glass"] .lb-overlay,
body[data-skin="glass"] .rpt-overlay,
body[data-skin="glass"] .store-lb,
body[data-skin="glass"] .modal { z-index: 1080; }

body[data-skin="glass"] .modal-content {
  background: var(--skin-surface-strong) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: var(--skin-radius-card) !important;
  box-shadow: var(--skin-shadow) !important;
}

body[data-skin="glass"] .result-bar,
body[data-skin="glass"] .header-stat,
body[data-skin="glass"] .header-stat b,
body[data-skin="glass"] #totalCount,
body[data-skin="glass"] .rb-count { color: var(--skin-text) !important; }

body[data-skin="glass"] .home-store-photo,
body[data-skin="glass"] .prod-card .pc-media,
body[data-skin="glass"] .prod-card .pc-media.has-photo,
body[data-skin="glass"] .store-lb-imgwrap { background: rgba(255, 255, 255, 0.55) !important; }

html:not([data-theme="light"]) body[data-skin="glass"] .home-store-photo,
html:not([data-theme="light"]) body[data-skin="glass"] .prod-card .pc-media,
html:not([data-theme="light"]) body[data-skin="glass"] .prod-card .pc-media.has-photo,
html:not([data-theme="light"]) body[data-skin="glass"] .store-lb-imgwrap { background: rgba(255, 255, 255, 0.06) !important; }

body[data-skin="glass"] .reader-sidebar,
body[data-skin="glass"] .reader-toolbar,
body[data-skin="glass"] .reader-guest-note,
body[data-skin="glass"] .reader-article {
  background: var(--skin-surface) !important;
  color: var(--skin-text) !important;
  border-color: var(--skin-border) !important;
}

body[data-skin="glass"] .reader-view-item,
body[data-skin="glass"] .reader-feed-row,
body[data-skin="glass"] .reader-sidebar-title,
body[data-skin="glass"] .reader-stream-title,
body[data-skin="glass"] .reader-lede,
body[data-skin="glass"] .reader-article-title { color: var(--skin-text) !important; }

body[data-skin="glass"][data-skin-cursors="on"] {
  cursor: url('/assets/skins/glass/defaultarrow.png') 0 0, default !important;
}

body[data-skin="glass"][data-skin-cursors="on"] a,
body[data-skin="glass"][data-skin-cursors="on"] button,
body[data-skin="glass"][data-skin-cursors="on"] [role="button"],
body[data-skin="glass"][data-skin-cursors="on"] .btn,
body[data-skin="glass"][data-skin-cursors="on"] .dropdown-item,
body[data-skin="glass"][data-skin-cursors="on"] select,
body[data-skin="glass"][data-skin-cursors="on"] summary,
body[data-skin="glass"][data-skin-cursors="on"] label[for],
body[data-skin="glass"][data-skin-cursors="on"] .res-card,
body[data-skin="glass"][data-skin-cursors="on"] .facet-tile,
body[data-skin="glass"][data-skin-cursors="on"] .featured-card,
body[data-skin="glass"][data-skin-cursors="on"] .type-chip,
body[data-skin="glass"][data-skin-cursors="on"] .prod-card {
  cursor: url('/assets/skins/glass/pointer.png') 10 0, pointer !important;
}

body[data-skin="glass"][data-skin-cursors="on"] input,
body[data-skin="glass"][data-skin-cursors="on"] textarea {
  cursor: url('/assets/skins/glass/ibeam.png') 16 16, text !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="glass"] .res-card,
  body[data-skin="glass"] .card,
  body[data-skin="glass"] .btn { transition: none !important; }
}