/* GENIO visual system. Canonical source; copied into web and extension. */
html[data-theme="light"], body.genio-popup, body.genio-sidepanel, body.genio-settings, body.genio-prompts, body.genio-connect, body.genio-payment {
  /* Warm, natural paper foundation (reduced blue in neutrals) + vibrant accent */
  --genio-bg: #f7f6f3;
  --genio-library-bg: #efeee9;
  --genio-surface: #ffffff;
  --genio-raised: #ffffff;
  --genio-well: #f4f3ef;
  --genio-line: #e5e3dc;
  --genio-line-strong: #d3cfc5;
  --genio-ink: #18181b;
  --genio-muted: #52525b;
  --genio-subtle: #71717a;
  --genio-accent: #0284c7;
  --genio-blue-500: #0284c7;
  --genio-blue-600: #0369a1;
  --genio-action: #0284c7;
  --genio-action-text: #ffffff;
  --genio-overlay: rgb(24 24 27 / .08);
  --genio-shadow-card: none;
  --genio-shadow-float: 0 4px 16px rgb(24 24 27 / .06);
  --genio-sheen: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--genio-accent) 3.5%, transparent), transparent 75%);
  --genio-grain: none;
  --genio-paper-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.065'/%3E%3C/svg%3E");
  --genio-reader-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseReader'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseReader)' opacity='0.035'/%3E%3C/svg%3E");
  --genio-radius-s: 8px;
  --genio-radius-m: 12px;
  --genio-radius-l: 16px;
  --genio-control: 36px;
  --genio-icon: 16px;
}
html[data-theme="dark"], body.genio-popup[data-theme="dark"], body.genio-sidepanel[data-theme="dark"], body.genio-settings[data-theme="dark"], body.genio-prompts[data-theme="dark"] {
  /* Obsidian & warm charcoal (reduced cold navy blue) + electric sky accent */
  --genio-bg: #121214;
  --genio-library-bg: #17171a;
  --genio-surface: #1e1e23;
  --genio-raised: #26262c;
  --genio-well: #19191d;
  --genio-line: #2c2c34;
  --genio-line-strong: #3d3d47;
  --genio-ink: #f5f5f7;
  --genio-muted: #a1a1aa;
  --genio-subtle: #71717a;
  --genio-accent: #38bdf8;
  --genio-blue-500: #38bdf8;
  --genio-blue-600: #7dd3fc;
  --genio-action: #0284c7;
  --genio-action-text: #ffffff;
  --genio-overlay: rgb(0 0 0 / .45);
  --genio-shadow-card: none;
  --genio-shadow-float: 0 6px 20px rgb(0 0 0 / .30);
  --genio-sheen: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--genio-accent) 4%, transparent), transparent 75%);
  --genio-grain: none;
  --genio-paper-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.038'/%3E%3C/svg%3E");
  --genio-reader-grain-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='readerDarkNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23readerDarkNoise)' opacity='0.013'/%3E%3C/svg%3E");
  --genio-radius-s: 8px;
  --genio-radius-m: 12px;
  --genio-radius-l: 16px;
  --genio-control: 36px;
  --genio-icon: 16px;
}

/* Web Library and Reader */
html[data-theme] {
  --accent-color: var(--genio-accent);
  --font-family-sans: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --closed-navigation-rail-width: 48px;
  --genio-radius-s: 8px;
  --genio-radius-m: 12px;
  --genio-radius-l: 16px;
  --genio-control: 36px;
  --genio-icon: 16px;
}
html[data-theme="light"] { --bg-reader-content: #ffffff; --bg-body-fallback: var(--genio-bg); }
html[data-theme="dark"] { --bg-reader-content: #1e1e23; --bg-body-fallback: var(--genio-bg); }
body {
  background-color: var(--genio-bg) !important;
  background-image: var(--genio-sheen), var(--genio-paper-grain) !important;
}

/* Ensure browser hides native scrollbars on custom-managed areas */
#article-list-content,
.article-content-scroll-wrapper,
.sidebar-nav {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#article-list-content::-webkit-scrollbar,
.article-content-scroll-wrapper::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Minimal floating capsule scrollbars ("pallina allungata"): zero track line, zero shadow, short clamped pill */
.genio-capsule-scroll-track,
.sidebar-scroll-track {
  position: absolute !important;
  width: 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 60 !important;
  opacity: 0.35 !important;
  transition: opacity 0.25s ease !important;
}
.sidebar-scroll-track {
  right: 2px !important;
}
.genio-capsule-scroll-track.active,
.sidebar-scroll-track.active,
.genio-capsule-scroll-track:hover,
.sidebar-scroll-track:hover,
#main-column:hover .genio-capsule-scroll-track,
#reading-pane:hover .genio-capsule-scroll-track,
#hamburger-menu:hover .sidebar-scroll-track {
  opacity: 1 !important;
}
.genio-capsule-scroll-thumb,
.sidebar-scroll-thumb {
  width: 4px !important;
  min-height: 24px !important;
  max-height: 38px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--genio-muted) 32%, transparent) !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: grab !important;
  transition: background 0.15s ease !important;
}
.genio-capsule-scroll-thumb:hover,
.sidebar-scroll-thumb:hover,
.genio-capsule-scroll-thumb.dragging,
.sidebar-scroll-thumb.dragging {
  background: color-mix(in srgb, var(--genio-muted) 55%, transparent) !important;
  cursor: grabbing !important;
}

/* Minimal fallback scrollbars for other containers */
::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}
::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  min-height: 20px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--genio-muted) 20%, transparent) !important;
  border: none !important;
  box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--genio-muted) 40%, transparent) !important;
}

/* Resizer and main column divider: seamless integration, no harsh shadows or gaps */
#resizer {
  width: 6px !important;
  flex-basis: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 -3px !important;
  z-index: 25 !important;
  cursor: col-resize;
}
#main-column::after {
  display: none !important;
  box-shadow: none !important;
}

/* Blocco unico per header e hamburger menu - seamless sul medesimo livello */
#main-header {
  position: relative !important;
  min-height: 60px !important;
  height: 60px !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 16px !important;
  z-index: 100 !important;
}

/* Wide / Full library view: Search bar centered */
#reader-content-wrapper.reading-pane-collapsed-wrapper #main-header .search-wrapper {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(440px, calc(100% - 200px)) !important;
  max-width: 440px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 10 !important;
}

/* Search bar: soft rounded rectangle (10px), no forced pill, no outer box clash */
#main-header .search-container {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#main-header .search-container input,
#searchInput {
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background-color: color-mix(in srgb, var(--genio-muted) 8%, var(--genio-surface)) !important;
  padding: 0 16px 0 38px !important;
  font-size: 13.5px !important;
  color: var(--genio-ink) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}
#main-header .search-container input:focus,
#searchInput:focus {
  background-color: var(--genio-surface) !important;
  border-color: var(--genio-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--genio-accent) 25%, transparent) !important;
}
#main-header .search-container .search-icon {
  left: 14px !important;
  color: var(--genio-subtle) !important;
}

/* Three-column or Split view (when reader is open): Search bar anchors to the left without colliding with actions */
#reader-content-wrapper:not(.reading-pane-collapsed-wrapper) #main-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
}
#reader-content-wrapper:not(.reading-pane-collapsed-wrapper) #main-header .search-wrapper {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 84px) !important;
  min-width: 80px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  z-index: 10 !important;
}
#reader-content-wrapper:not(.reading-pane-collapsed-wrapper) #main-header .search-container {
  width: 100% !important;
  max-width: 100% !important;
}
#reader-content-wrapper:not(.reading-pane-collapsed-wrapper) #main-header .header-actions {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  gap: 6px !important;
  margin-right: 0 !important;
}

#main-header .header-actions { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; z-index: 20 !important; }
html[data-theme="dark"] #main-header .header-actions,
html[data-theme="dark"] #reader-content-wrapper:not(.reading-pane-collapsed-wrapper) #main-header .header-actions {
  gap: 9px !important;
}
.library-controls-menu-container {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
}

/* Controlli header: solo icone, niente bottoni a scatola / contorno */
#main-header .header-actions .icon-btn,
#mainHeaderHamburgerBtn,
#sidebarHeaderHamburgerBtn {
  width: var(--genio-control) !important;
  min-width: var(--genio-control) !important;
  height: var(--genio-control) !important;
  min-height: var(--genio-control) !important;
  border-radius: var(--genio-radius-s) !important;
  border: none !important;
  background: transparent !important;
  color: var(--genio-muted) !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
#main-header .header-actions .icon-btn:hover,
#mainHeaderHamburgerBtn:hover,
#sidebarHeaderHamburgerBtn:hover {
  border: none !important;
  color: var(--genio-accent);
  background: color-mix(in srgb, var(--genio-accent) 10%, transparent) !important;
}
#main-header .header-actions #openSourceButton {
  border: none !important;
  color: var(--genio-accent);
  background: transparent !important;
}
#main-header .header-actions #openSourceButton:hover {
  background: color-mix(in srgb, var(--genio-accent) 12%, transparent) !important;
}

/* Hamburger menu & header as blocco unico con lo stesso colore - Opzione B Borderless */
#hamburger-menu.closed ~ #mainHeaderHamburgerBtn,
#hamburger-menu.closed ~ #reader-main-content #mainHeaderHamburgerBtn {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--closed-navigation-rail-width, 48px) !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-top: none !important;
  border-left: none !important;
  box-shadow: none !important;
  z-index: 300 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}
#hamburger-menu.closed ~ #mainHeaderHamburgerBtn img,
#hamburger-menu.closed ~ #reader-main-content #mainHeaderHamburgerBtn img {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  transition: transform 0.15s ease !important;
}
#hamburger-menu.closed ~ #mainHeaderHamburgerBtn:hover img,
#hamburger-menu.closed ~ #reader-main-content #mainHeaderHamburgerBtn:hover img {
  transform: scale(1.08) !important;
}
#hamburger-menu.closed ~ #reader-main-content #quick-nav-header {
  position: fixed !important;
  z-index: 100 !important;
  top: 60px !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--closed-navigation-rail-width, 48px) !important;
  background: transparent !important;
  border: none !important;
  border-right: none !important;
  border-top: none !important;
  padding: 12px 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
#hamburger-menu.closed ~ #reader-main-content #quick-nav-header .quick-nav-btn {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
#hamburger-menu.closed ~ #reader-main-content #quick-nav-header .quick-nav-btn span {
  display: none !important;
}
#hamburger-menu.closed ~ #reader-main-content #quick-nav-header #themeToggleBtn {
  margin-top: auto !important;
}
#hamburger-menu.open ~ #mainHeaderHamburgerBtn,
#hamburger-menu.open ~ #reader-main-content #mainHeaderHamburgerBtn {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
#hamburger-menu {
  background-color: var(--genio-bg) !important;
  background-image: var(--genio-sheen), var(--genio-paper-grain) !important;
  border: none !important;
  border-right: none !important;
  box-shadow: none !important;
}
#hamburger-menu.open {
  background-color: var(--genio-bg) !important;
  background-image: var(--genio-sheen), var(--genio-paper-grain) !important;
  box-shadow: none !important;
  border: none !important;
  border-right: none !important;
}
#hamburger-menu .sidebar-header {
  height: 60px !important;
  min-height: 60px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
}
#hamburger-menu .sidebar-account-controls {
  border: none !important;
  border-top: none !important;
  background: transparent;
}
#hamburger-menu .sidebar-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1; letter-spacing: .065em; font-weight: 750; color: var(--genio-ink); }
#hamburger-menu .sidebar-brand img { display: block; width: 23px; height: 23px; object-fit: contain; }
#hamburger-menu .main-pages-nav li.active-filter,
#hamburger-menu .manage-pages-nav li.active-filter,
#quick-nav-header .quick-nav-btn.active-filter { color: var(--genio-accent); background: color-mix(in srgb, var(--genio-accent) 12%, var(--genio-surface)); box-shadow: inset 2px 0 var(--genio-accent); }
#hamburger-menu .main-pages-nav li i, #hamburger-menu .manage-pages-nav li i, #quick-nav-header .quick-nav-btn i { width: 18px; text-align: center; font-size: 14px; }
#quick-nav-header { min-height: 52px; align-items: center; padding-top: 7px; padding-bottom: 7px; background: transparent; border: none !important; border-bottom: none !important; }
#quick-nav-header .quick-nav-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; border-radius: var(--genio-radius-s); }

.library-view-bar { display: flex; align-items: center; justify-content: space-between; min-height: 0; padding: 12px 28px 4px; background: transparent; border-bottom: 0; }
.library-view-eyebrow, .library-view-description { display: none !important; }
.library-view-title-row { display: flex; align-items: baseline; gap: 8px; }
.library-view-title-row h1 { margin: 0; color: var(--genio-ink); font-size: 20px; line-height: 1.2; letter-spacing: -.025em; font-weight: 750; }
.library-view-count { color: var(--genio-subtle); font-size: 12px; font-weight: 600; }

/* Dossier / Fascicolo Tabs - Borderless Pill Capsules */
.context-filter-bar { display: flex !important; align-items: center !important; min-height: 40px !important; padding: 0 28px !important; margin: 4px 0 8px 0 !important; background: transparent !important; border: none !important; border-bottom: none !important; position: relative !important; z-index: 5 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; }
.context-filter-bar::-webkit-scrollbar { display: none !important; }
.context-filter-group { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; scrollbar-width: none !important; }
.context-filter-group::-webkit-scrollbar { display: none !important; }
.context-filter-group[hidden] { display: none !important; }
.context-filter-group button { display: inline-flex !important; align-items: center !important; gap: 7px !important; height: 32px !important; padding: 0 14px !important; border: none !important; border-radius: 999px !important; background: color-mix(in srgb, var(--genio-muted) 8%, transparent) !important; color: var(--genio-muted) !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important; position: relative !important; box-shadow: none !important; transition: all .15s ease !important; }
.context-filter-group button:hover { background: color-mix(in srgb, var(--genio-muted) 14%, transparent) !important; color: var(--genio-ink) !important; border: none !important; }
.context-filter-group button[data-active="true"], .context-filter-group button.active { background: color-mix(in srgb, var(--genio-accent) 14%, var(--genio-surface)) !important; border: none !important; color: var(--genio-accent) !important; font-weight: 700 !important; height: 32px !important; margin-bottom: 0 !important; z-index: 6 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important; }
.context-filter-group button[data-active="true"] i, .context-filter-group button.active i { color: var(--genio-accent) !important; }

#article-list-content {
  margin: 0 16px;
  padding: 24px 28px 36px;
  background-color: var(--genio-library-bg);
  background-image: var(--genio-sheen), var(--genio-paper-grain);
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-radius: 20px 20px 0 0;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}
.article-card, .feed-item-card {
  border: none !important;
  border-radius: 16px;
  background-color: var(--genio-surface);
  background-image: var(--genio-paper-grain);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.03) !important;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.article-card:hover, .feed-item-card:hover {
  border: none !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  transform: translateY(-2px);
}
.article-card.selected {
  border: none !important;
  box-shadow: 0 0 0 2px var(--genio-accent), 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}
.article-card .card-image-top {
  background-color: var(--genio-well);
  border: none !important;
  border-bottom: none !important;
  border-radius: 16px 16px 0 0 !important;
}
.article-card .card-image-top .article-card-image-placeholder i { color: var(--genio-accent); font-size: 28px; opacity: 0.9; filter: none; }
.article-card .card-content-wrapper, .article-card.detailed-card { padding: 16px 17px; }
.article-card .article-card-title { font-size: 15px; line-height: 1.38; color: var(--genio-ink); font-weight: 700; }
.article-card .article-card-excerpt { font-size: 13px; line-height: 1.52; color: var(--genio-muted); }
.article-card .card-actions-horizontal { display: flex !important; gap: 4px !important; opacity: 1 !important; }
.article-card .card-actions-horizontal .icon-btn { width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; border-radius: var(--genio-radius-s) !important; border: none !important; background: color-mix(in srgb, var(--genio-muted) 8%, var(--genio-surface)) !important; color: var(--genio-subtle) !important; display: inline-grid !important; place-items: center !important; padding: 0 !important; transition: all .15s ease !important; }
.article-card .card-actions-horizontal .icon-btn:hover { border: none !important; color: var(--genio-accent) !important; background: color-mix(in srgb, var(--genio-accent) 15%, var(--genio-surface)) !important; }
.article-card .card-actions-horizontal .icon-btn i { font-size: 12.5px !important; line-height: 1 !important; }

#reading-pane {
  background-color: var(--genio-surface) !important;
  border: none !important;
  border-left: 1px solid color-mix(in srgb, var(--genio-line) 40%, transparent) !important;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  border-top-left-radius: 20px !important;
  border-radius: 20px 0 0 0 !important;
  box-shadow: -4px 0 20px rgba(15, 23, 42, 0.06) !important;
  z-index: 20 !important;
  overflow: hidden !important;
  background-image: var(--genio-sheen), var(--genio-paper-grain);
}
#reading-pane .toolbar {
  height: 60px !important;
  min-height: 60px !important;
  border: none !important;
  border-top-left-radius: 20px !important;
  border-radius: 20px 0 0 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--genio-line) 40%, transparent) !important;
  background-color: color-mix(in srgb, var(--genio-surface) 90%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  padding-left: 18px !important;
  padding-right: 18px !important;
}
#reading-pane.fullscreen,
#reading-pane.fullscreen .toolbar {
  border-radius: 0 !important;
  box-shadow: none !important;
}
#reading-pane .toolbar .icon-btn,
#reading-pane .toolbar #closeArticleBtn,
#reading-pane .toolbar #toggleAnnotationsBtn,
#reading-pane .toolbar #toggleAppearanceMenuBtn,
#reading-pane .toolbar #readerMoreBtn {
  width: var(--genio-control);
  min-width: var(--genio-control);
  height: var(--genio-control);
  min-height: var(--genio-control);
  border-radius: var(--genio-radius-s);
}
#reading-pane .toolbar .reader-notes-button { width: auto; min-width: 0; padding: 0 10px; }
#reading-pane .toolbar .reader-notes-button i { font-size: var(--genio-icon); }
.article-content-scroll-wrapper {
  background-color: var(--genio-surface);
  background-image: var(--genio-sheen), var(--genio-paper-grain);
}
html[data-theme="dark"] #reading-pane {
  background-color: var(--genio-surface) !important;
  border-top-left-radius: 20px !important;
  border-radius: 20px 0 0 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--genio-line) 40%, transparent) !important;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.40) !important;
}
html[data-theme="dark"] #reading-pane .toolbar {
  background-color: color-mix(in srgb, var(--genio-surface) 90%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--genio-line) 40%, transparent) !important;
  border-top-left-radius: 20px !important;
  border-radius: 20px 0 0 0 !important;
}
html[data-theme="dark"] .article-content-scroll-wrapper {
  background-color: var(--genio-surface) !important;
  background-image: var(--genio-sheen), var(--genio-reader-grain-dark) !important;
}
.reader-context-rail, .tts-player, #libraryControlsMenu, .reader-actions-menu, .reader-toc-panel, .account-center-dialog, .web-auth-card, .feedback-board-intro { border: 1px solid var(--genio-line); box-shadow: var(--genio-shadow-float); }
.reader-context-rail, .tts-player { background-image: var(--genio-sheen), var(--genio-grain); background-color: var(--genio-raised); border-color: var(--genio-line-strong); }
.account-center-dialog, .web-auth-card { background-image: var(--genio-sheen); background-color: var(--genio-surface); }
.account-primary-action, .web-auth-primary, .feedback-submit-button, .empty-state-message .action-btn { background: var(--genio-action); border-color: var(--genio-action); color: var(--genio-action-text); }
.icon-btn i, .reader-actions-trigger i, .account-setting-icon i { font-size: 14px; line-height: 1; }
html[data-theme] :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--genio-accent); outline-offset: 2px; }

/* Popup: the legacy blueprint uses !important, so this final layer wins. */
body.genio-popup {
  background-color: var(--genio-bg) !important;
  background-image: var(--genio-sheen), var(--genio-grain) !important;
  background-size: auto, 180px 180px !important;
  color: var(--genio-ink) !important;
  font-family: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif !important;
  --popup-bg-color: var(--genio-bg);
  --popup-text-color: var(--genio-ink);
  --popup-secondary-text-color: var(--genio-muted);
  --popup-border-color: var(--genio-line);
  --popup-input-bg-color: var(--genio-surface);
  --popup-icon-color: var(--genio-muted);
  --popup-url-color: var(--genio-accent);
}
body.genio-popup .top-bar { min-height: 42px !important; height: 42px !important; box-sizing: border-box !important; padding-bottom: 8px !important; border-color: var(--genio-line) !important; }
body.genio-popup .brand-lockup { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0; }
body.genio-popup .brand-lockup img { display: block; width: 23px; height: 23px; object-fit: contain; }
body.genio-popup .brand-lockup span:first-of-type { color: var(--genio-ink) !important; letter-spacing: .065em !important; font-size: 15px !important; font-weight: 750 !important; }
body.genio-popup .top-actions { gap: 5px !important; }
body.genio-popup :is(#theme-toggle-btn,#reader-mode-btn,#open-manager-btn,.highlighter-toggle,.device-tts-button) {
  width: var(--genio-control) !important;
  min-width: var(--genio-control) !important;
  height: var(--genio-control) !important;
  min-height: var(--genio-control) !important;
  border: 1px solid var(--genio-line) !important;
  border-radius: var(--genio-radius-s) !important;
  background: var(--genio-raised) !important;
  color: var(--genio-muted) !important;
  box-shadow: var(--genio-shadow-card) !important;
}
body.genio-popup :is(#theme-toggle-btn,#reader-mode-btn,#open-manager-btn,.highlighter-toggle,.device-tts-button):hover {
  border-color: var(--genio-accent) !important;
  background: var(--genio-well) !important;
  color: var(--genio-accent) !important;
}
body.genio-popup :is(#theme-toggle-btn,#reader-mode-btn,#open-manager-btn,.highlighter-toggle,.device-tts-button) i {
  font-size: var(--genio-icon) !important;
  width: var(--genio-icon) !important;
  text-align: center;
}
body.genio-popup :is(#markdown-drawer,.popup-tts-player,#detected-rss-outside,.capture-section) {
  border: 1px solid var(--genio-line) !important;
  border-radius: var(--genio-radius-m) !important;
  background: var(--genio-surface) !important;
  color: var(--genio-ink) !important;
  box-shadow: var(--genio-shadow-card) !important;
}
body.genio-popup #markdown-drawer { border-left: 1px solid var(--genio-line) !important; }
body.genio-popup #markdown-drawer summary { color: var(--genio-ink) !important; padding-top: 14px !important; padding-bottom: 14px !important; }
body.genio-popup :is(.page-info-container h1,.brand-lockup span:first-of-type) { color: var(--genio-ink) !important; }
body.genio-popup :is(.page-info-container .info,.section-heading,.info,#popup-tts-time) { color: var(--genio-muted) !important; }
body.genio-popup :is(#markdown-content,#custom-feed-url,input,select,textarea) { border: 1px solid var(--genio-line) !important; background: var(--genio-well) !important; color: var(--genio-ink) !important; border-radius: var(--genio-radius-s) !important; }
body.genio-popup .buttons-container { margin-top: 12px !important; }
body.genio-popup .action-btn { height: 40px !important; border-radius: var(--genio-radius-s) !important; }
body.genio-popup #save-reader-button { border-color: var(--genio-action) !important; background: var(--genio-action) !important; color: var(--genio-action-text) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--genio-action) 30%, transparent) !important; }
body.genio-popup #download-markdown-btn { border-color: var(--genio-line) !important; background: var(--genio-raised) !important; color: var(--genio-ink) !important; box-shadow: var(--genio-shadow-card) !important; }
body.genio-popup #feed-section { margin-top: 18px !important; border-top: 1px solid var(--genio-line) !important; }
body.genio-popup #rss-manual-drawer { border: 1px solid var(--genio-line) !important; border-radius: var(--genio-radius-s) !important; background: var(--genio-well) !important; }
body.genio-popup #rss-manual-drawer summary { color: var(--genio-accent) !important; }
body.genio-popup :is(button,input,select,textarea):focus-visible { outline: 2px solid var(--genio-accent) !important; outline-offset: 2px; }

/* Side Panel */
body.genio-sidepanel {
  --genio-text: var(--genio-ink);
  --genio-accent-soft: color-mix(in srgb, var(--genio-accent) 12%, var(--genio-surface));
  --genio-surface-strong: var(--genio-raised);
  background: var(--genio-bg);
  color: var(--genio-ink);
  font-family: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
body.genio-sidepanel .chat-container { background: var(--genio-bg); }
body.genio-sidepanel .header { min-height: 60px; height: 60px; padding-inline: 11px; border-bottom: 1px solid var(--genio-line); background: var(--genio-surface); background-image: var(--genio-sheen); box-shadow: 0 1px 0 color-mix(in srgb, var(--genio-line) 65%, transparent); }
body.genio-sidepanel .header-controls { gap: 4px; min-width: 70px; }
body.genio-sidepanel .header-controls.right { min-width: 108px; }
body.genio-sidepanel .header-title { gap: 8px; font-size: 14px; line-height: 1; letter-spacing: .065em; font-weight: 750; color: var(--genio-ink); }
body.genio-sidepanel .header-title img { width: 23px; height: 23px; }
body.genio-sidepanel .icon-button,
body.genio-sidepanel .composer-icon-button,
body.genio-sidepanel #sendBtn {
  display: inline-grid;
  place-items: center;
  width: var(--genio-control);
  min-width: var(--genio-control);
  height: var(--genio-control);
  min-height: var(--genio-control);
  padding: 0;
  border-radius: var(--genio-radius-s);
}
body.genio-sidepanel :is(.icon-button,.composer-icon-button,#sendBtn) i {
  display: block;
  width: var(--genio-icon);
  font-size: var(--genio-icon);
  line-height: 1;
  text-align: center;
}
body.genio-sidepanel .icon-button:hover, body.genio-sidepanel .composer-icon-button:hover {
  color: var(--genio-accent);
  background: var(--genio-well);
  border-color: var(--genio-line);
}
body.genio-sidepanel #messages { flex: 1 1 auto; padding: 14px 12px; background-color: var(--genio-bg); background-image: var(--genio-grain), var(--genio-sheen); background-size: 180px 180px, auto; }
body.genio-sidepanel .message { border-radius: var(--genio-radius-m); box-shadow: var(--genio-shadow-card); }
body.genio-sidepanel .message.incoming { background: var(--genio-surface); color: var(--genio-ink); border: 1px solid var(--genio-line); }
body.genio-sidepanel .message.outgoing { background: var(--genio-action); border: 1px solid var(--genio-action); color: var(--genio-action-text); }
body.genio-sidepanel .input-wrapper { padding: 11px; border-top: 1px solid var(--genio-line); background: var(--genio-surface); box-shadow: 0 -6px 19px color-mix(in srgb, var(--genio-overlay) 36%, transparent); }
body.genio-sidepanel .input-area { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 5px; border-radius: var(--genio-radius-m); border: 1px solid var(--genio-line); background: var(--genio-raised); box-shadow: 0 2px 7px color-mix(in srgb, var(--genio-overlay) 38%, transparent); }
body.genio-sidepanel #userInput { min-height: 36px; margin: 0; padding: 8px 9px; line-height: 20px; color: var(--genio-ink); }
body.genio-sidepanel #userInput::placeholder { color: var(--genio-subtle); }
body.genio-sidepanel #sendBtn:not(:disabled) { box-shadow: 0 2px 7px color-mix(in srgb, var(--genio-action) 34%, transparent); background: var(--genio-action); color: var(--genio-action-text); }
body.genio-sidepanel #customPromptsContainer { border-color: var(--genio-line); background: var(--genio-surface); box-shadow: var(--genio-shadow-card); }
body.genio-sidepanel .prompt-button, body.genio-sidepanel .add-prompt-button { width: 32px; min-width: 32px; height: 32px; border-radius: var(--genio-radius-s); color: var(--genio-accent); background: var(--genio-well); border: 1px solid var(--genio-line); }
body.genio-sidepanel .chat-history-panel { top: 60px; background: var(--genio-raised); color: var(--genio-ink); border-color: var(--genio-line); box-shadow: var(--genio-shadow-float); }
body.genio-sidepanel :is(button,textarea,select):focus-visible { outline: 2px solid var(--genio-accent); outline-offset: 2px; }

/* Settings and Prompts */
body.genio-settings {
  --bg: var(--genio-bg); --surface: var(--genio-surface); --line: var(--genio-line);
  --ink: var(--genio-ink); --muted: var(--genio-muted); --accent: var(--genio-accent);
  background: var(--genio-bg); color: var(--genio-ink);
  font-family: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
body.genio-settings .nav { background: var(--genio-bg); background-image: var(--genio-sheen), var(--genio-grain); border-color: var(--genio-line); }
body.genio-settings .tab { border-radius: var(--genio-radius-s); }
body.genio-settings .tab.active { box-shadow: inset 2px 0 var(--genio-accent); background: var(--genio-well); }
body.genio-settings .head { background: var(--genio-surface); background-image: var(--genio-sheen); border-color: var(--genio-line); min-height: 60px; }
body.genio-settings .profile, body.genio-settings .list, body.genio-settings .coin-hero { border-color: var(--genio-line); background: var(--genio-surface); box-shadow: var(--genio-shadow-card); }
body.genio-settings .primary { border-color: var(--genio-action); background: var(--genio-action); color: var(--genio-action-text); }

body.genio-prompts { background: var(--genio-bg); color: var(--genio-ink); font-family: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif; }
body.genio-prompts .header { background: var(--genio-surface); background-image: var(--genio-sheen); border-color: var(--genio-line); min-height: 60px; }
body.genio-prompts #promptList li, body.genio-prompts .prompt-form { border-color: var(--genio-line); border-radius: var(--genio-radius-m); background: var(--genio-surface); box-shadow: var(--genio-shadow-card); }
body.genio-prompts #promptList li .prompt-title { color: var(--genio-accent); }

/* Component geometry: 36px control and 16px icon throughout */
html[data-theme] :is(.icon-btn, .reader-actions-trigger) {
  display: inline-grid;
  place-items: center;
  width: var(--genio-control);
  min-width: var(--genio-control);
  height: var(--genio-control);
  min-height: var(--genio-control);
  padding: 0;
  border-radius: var(--genio-radius-s);
  line-height: 1;
}
html[data-theme] :is(.icon-btn, .reader-actions-trigger) i,
html[data-theme] #quick-nav-header .quick-nav-btn i,
html[data-theme] #hamburger-menu .sidebar-nav li i {
  display: inline-block;
  width: var(--genio-icon);
  font-size: var(--genio-icon);
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

/* Final state and contrast corrections */
.reader-state-notice[hidden] { display: none; }
html[data-theme] .article-card.unread-feed-article .card-title-actions-row h3::before,
html[data-theme] .feed-item-card.unread .article-card-title::before {
  color: var(--genio-accent);
  font-size: .65em;
  vertical-align: .12em;
}
body.genio-popup #download-markdown-btn:disabled {
  border-color: var(--genio-line) !important;
  background: var(--genio-well) !important;
  color: var(--genio-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
body.genio-sidepanel .mini-icon-button,
body.genio-sidepanel .add-prompt-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--genio-radius-s);
}
body.genio-sidepanel :is(.mini-icon-button,.add-prompt-button) i {
  width: 15px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

html[data-theme] #sortFilterButton {
  width: var(--genio-control) !important;
  min-width: var(--genio-control) !important;
  height: var(--genio-control) !important;
  min-height: var(--genio-control) !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-grid !important;
  place-items: center !important;
}
html[data-theme] #sortFilterButton .filter-button-label,
html[data-theme] #sortFilterButton .visual-filter-count {
  display: none !important;
}
html[data-theme] #sortFilterButton i {
  display: inline-block;
  line-height: 1;
  font-size: 15px;
}
html[data-theme] #reading-pane .toolbar .reader-notes-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  padding: 0 10px;
}