:root {
 --bg-page: #f3f5f8;
 --bg-app: #ffffff;
 --bg-sidebar: #f5f7fa;
 --border-color: #d9dde3;
 --primary-blue: #1769d2;
 --text-primary: #20242a;
 --text-secondary: #555d68;
 --text-muted: #686D75;
 --bg-selected: #edf2f8;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

button,
a,
input {
 touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
 outline: 3px solid rgba(23, 105, 210, 0.35);
 outline-offset: 3px;
}

.skip-link {
 position: fixed;
 top: 8px;
 left: 8px;
 z-index: 2000;
 padding: 10px 14px;
 color: #ffffff;
 background: var(--primary-blue);
 border-radius: 6px;
 text-decoration: none;
 transform: translateY(-160%);
}

.skip-link:focus {
 transform: translateY(0);
}

body {
 font-family: 'DejaVu Sans','Inter', 'Segoe UI', Arial, Roboto, sans-serif;
 background: var(--bg-page);
 color: var(--text-primary);
 height: 100vh;
 overflow: hidden;
 display: flex;
 justify-content: center;
}

.app {
 position: relative;
 width: 100%;
 max-width: 1780px;
 height: 100vh;
 background: var(--bg-app);
 display: flex;
 flex-direction: column;
}

/* Header */
.header {
 min-height: 60px;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 padding: 8px 16px;
 border-bottom: 1px solid var(--border-color);
 flex-shrink: 0;
}

.header-left {
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 gap: 8px;
}

.header-icon {
 font-size: 42px!important;
 background: linear-gradient(135deg, var(--primary-blue), #60a5fa);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent; 
}

.header-text {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.header-right {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 text-align: right;
}

.actions {
 display: flex;
 gap: 8px;
 font-size: 13px;
 color: var(--text-muted);
 padding-right:12px;
}

.actions button {
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var( --primary-blue);
}

.actions button:hover {
 color: var(--text-secondary);
}

.actions button .material-symbols-outlined {
 font-size: 36px;
 font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.mobile-nav-trigger {
 display: none!important;
}

.header h1 {
 font-size: 20px;
 font-weight: 700;
 color: var(--text-primary);
 line-height: 1.2; 
 
 /* `background-clip: text` is opgenomen in de shorthand */
 background: text url("pix/gradient.jpg") center/auto 1lh;
 /* transparante tekst zodat de uitgesneden achtergrond eronder zichtbaar is */
 color: transparent;
}

.tagline {
 font-size: 13px;
 color: var(--text-muted);  
 padding-left:1px; 
}

.header-link {
 text-decoration: none;
 color: inherit;
 cursor: pointer; 
}

.header-link:hover {
 opacity: 0.8;
}

/* Columns Container */
.columns {
 display: flex;
 flex: 1;
 overflow-x: auto;
 overflow-y: hidden;
}

/* Left Sidebar */
.sidebar {
 width: 280px;
 flex-shrink: 0;
 background: var(--bg-sidebar);
 padding: 20px 18px;
 border-right: 1px solid var(--border-color);
 display: flex;
 flex-direction: column;
 overflow-y: auto;
 flex-shrink: 0;
}

.category {
 margin-bottom: 0px;
 padding: 4px 6px;
 border-radius: 6px;
 cursor: pointer;
 transition: background 0.15s, color 0.15s;
}

.category:hover, #pinned .category-link:hover {
 background: #eaecf0;
}

.category.active {
 background: #d9dde3;
 font-weight:bold;
 color: var(--primary-blue);
}

.category-link {
 text-decoration: none;
 color: inherit;
 display: flex;
 align-items: center;
 gap: 8px;
}

.title-icon {
 display: flex;
 gap:6px; 
 align-items: center;
}

.title-icon .material-symbols-outlined {
 font-size:16px;
}

.category-name-wrapper {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column; 
}

.category-title {
 font-size: 13.5px;
 color: inherit;
 line-height: 1.4;
}

.category-count {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 margin-top: auto;
 margin-bottom: auto;
 padding: 0 7px;
 border-radius: 10px;
 background: #FFBE6F;
 font-size: 13px;
 color: #000;
 font-weight: 500;
 line-height: 1.4;
 height: 20px;
 flex-shrink: 0;
 min-width:30px;
}

.category-subtitle {
 font-size: 12px;
 color: inherit;
 opacity: 0.7;
 margin-top: 2px;
 line-height: 1.3;
}

/* Settings Panel */
.settings-panel {
 margin-top: auto;
 background: #eaecf0;
 border-radius: 8px;
 padding: 14px 16px;
}

.mobile-sidebar-heading,
.mobile-nav-backdrop,
.mobile-back-link {
 display: none;
}

.radio-option {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
 font-size: 13px;
 color: var(--text-secondary);
 cursor: pointer;
}

.radio-option:last-child {
 margin-bottom: 0;
}

.radio-option input[type="radio"] {
 accent-color: var(--primary-blue);
}

.settings-dialog-backdrop {
 position: fixed;
 inset: 0;
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 background: rgba(32, 36, 42, 0.38);
}

.settings-dialog-backdrop[hidden] {
 display: none;
}

.settings-dialog {
 width: min(440px, 100%);
 max-height: min(680px, calc(100vh - 40px));
 display: flex;
 flex-direction: column;
 overflow: hidden;
 background: var(--bg-app);
 border: 1px solid var(--border-color);
 border-radius: 12px;
 box-shadow: 0 18px 50px rgba(32, 36, 42, 0.18);
}

.settings-dialog-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 20px;
 padding: 20px;
 border-bottom: 1px solid var(--border-color);
}

.settings-dialog-header h2 {
 font-size: 18px;
 line-height: 1.3;
}

.settings-dialog-header p {
 margin-top: 4px;
 font-size: 13px;
 color: var(--text-muted);
}

.settings-close {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 2px;
 color: var(--text-muted);
 background: none;
 border: none;
 cursor: pointer;
}

.settings-close:hover {
 color: var(--text-primary);
}

.settings-categories {
 overflow-y: auto;
 padding: 8px 20px;
}

.settings-category-option {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 padding: 11px 0;
 border-bottom: 1px solid var(--border-color);
 cursor: pointer;
}

.settings-category-option:last-child {
 border-bottom: none;
}

.settings-category-option span {
 display: flex;
 flex-direction: column;
 min-width: 0;
}

.settings-category-option strong {
 font-size: 14px;
 font-weight: 600;
}

.settings-category-option small {
 margin-top: 2px;
 color: var(--text-muted);
 font-size: 12px;
 line-height: 1.35;
}

.settings-category-option input {
 width: 17px;
 height: 17px;
 flex-shrink: 0;
 accent-color: var(--primary-blue);
}

.settings-dialog-actions {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding: 16px 20px;
 border-top: 1px solid var(--border-color);
}

.settings-dialog-actions button {
 padding: 9px 14px;
 border-radius: 7px;
 font: inherit;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}

.settings-secondary {
 color: var(--text-secondary);
 background: var(--bg-sidebar);
 border: 1px solid var(--border-color);
}

.settings-primary {
 color: #ffffff;
 background: var(--primary-blue);
 border: 1px solid var(--primary-blue);
}

/* Info Drawer */
.info-drawer-backdrop {
 position: absolute;
 inset: 0;
 z-index: 1000;
 display: flex;
 justify-content: flex-end;
 background: rgba(32, 36, 42, 0.5);
}

.icon-legend {width:100%;border:none;}

.info-drawer-backdrop[hidden] {
 display: none;
}

.info-drawer {
 width: min(620px, 90%);
 height: 100%;
 background: var(--bg-app);
 border-left: 1px solid var(--border-color);
 box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.info-drawer-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 24px;
 flex-shrink: 0;
 border-bottom: 1px solid var(--border-color);
}

.info-drawer-header h2 {
 font-size: 18px;
 margin: 0;
}

.info-drawer-content {
 flex: 1;
 overflow-y: auto;
 padding: 24px;
}

.info-drawer-content p {
 font-size: 14px;
 line-height: 1.65;
 color: var(--text-primary);
 margin-bottom: 14px;
}

.info-drawer a, .info-drawer td, .info-drawer-content b {color:var(--color-primary);font-size:14px}

.info-drawer-content p:last-child {
 margin-bottom: 0;
}

/* Middle Column */
.article-list {
 width: 400px;
 background: var(--bg-app);
 border-right: 1px solid var(--border-color);
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
}

.search-area {
 padding: 18px;
 flex-shrink: 0;
}

.search-input-wrapper {
 position: relative;
 width: 100%;
}

.search-icon {
 position: absolute;
 left: 12px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-muted);
 pointer-events: none;
}

.search-input {
 width: 100%;
 height: 40px;
 border: 1px solid var(--border-color);
 border-radius: 8px;
 padding: 0 12px 0 38px;
 font-size: 14px;
 font-family: inherit;
 color: var(--text-primary);
 background: var(--bg-sidebar);
 outline: none;
}

.search-input:focus-visible {
 border-color: var(--primary-blue);
 box-shadow: 0 0 0 3px rgba(23, 105, 210, 0.12);
 outline: none;
}

.search-input::placeholder {
 color: var(--text-muted);
}

/* Article Cards */
.cards-container {
 flex: 1;
 overflow-y: auto;
 min-height: 0;
}

.more-articles {
 padding: 12px 34px;
 text-align: center;
 border-top: 1px solid var(--border-color);
 flex-shrink: 0;
}

.more-articles a {
 color: var(--text-muted);
 font-size: 13px;
 cursor: pointer;
 text-decoration: none;
 transition: color 0.15s;
}

.more-articles a:hover {
 color: var(--primary-blue);
 text-decoration: underline;
}

.article-card { 
 display: flex;
 padding: 12px 12px;
 border-bottom: 1px solid var(--border-color);
 gap: 4px;
 cursor: pointer; 
}

.article-card[hidden],
.article-viewer[hidden] {
 display: none;
}

.article-card.selected {
 background: var(--bg-selected);
 border-left: 4px solid var(--primary-blue);
 padding-left: 15px;
}

.card-thumb {
 width: 32px;
 height: 32px;
 border-radius: 6px;
 background: transparent;
 flex-shrink: 0;
 overflow: hidden;
}

.article-card.no-image {
 gap: 0;
}

.card-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 6px;
}

.card-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-width: 0;
}

.card-text a {text-decoration:none;}

.article-card.unread {
 background: #D4F0D4;
}

.card-title {
 font-size: 14px;
 font-weight: 700;
 line-height: 1.35;
 margin-bottom: 6px;
 color: var(--text-primary);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.article-card.selected .card-title {
 color: var(--primary-blue);
}

.card-desc {
 font-size: 12.5px;
 color: var(--text-primary);
 line-height: 1.45;
 display: -webkit-box; 
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin-bottom: 8px;
}

.card-meta {
 font-size: 11.5px;
 color: var(--text-muted);
}

/* Right Column */
.article-viewer {
 flex: 1;
 min-width: 340px;
 background: var(--bg-app);
 padding: 36px 34px;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 padding-top:16px;
}

.article-scroll-area {
 flex: 1;
 overflow-y: auto;
 min-height: 0;
}

.viewer-title-row {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 16px;
}

.viewer-title {
 font-size: 29px;
 font-weight: 700;
 line-height: 1.3;
 color: var(--text-primary);
}

.viewer-actions {
 display: flex;
 gap: 12px;
 flex-shrink: 0;
}

.viewer-actions button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 background:none;
 border:none;
 cursor: pointer;
 border-radius: 50%;
}

.viewer-actions button:hover {
 background: var(--bg-selected);
}
.viewer-actions button .material-symbols-outlined {
 font-size: 36px;
 color:var(--primary-blue);
 color:#B88445;
 font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;

}

.action-icon {
 width: 20px;
 height: 20px;
 color: var(--text-muted);
 cursor: pointer;
 transition: color 0.15s;
}

.action-icon:hover {
 color: var(--text-primary);
}

.viewer-meta {
 font-size: 13px;
 color: var(--text-muted);
 margin-top: 8px;
 margin-bottom: 16px;
}

.viewer-meta a{ color: var(--text-muted);}

.viewer-meta,
.pull-quote,
.article-body {
 overflow-wrap: anywhere;
}

.divider {
 border: none;
 border-top: 1px solid var(--border-color);
 margin-bottom: 0px;
}

.pull-quote {
 position: relative;
 padding-left: 20px;
 margin: 32px 0;
 border-left: 4px solid var(--primary-blue);
 margin-top:0;
}

.article-body blockquote {
 padding-left: 20px; 
 border-left: 4px solid var(--primary-blue); margin-bottom: 20px;
 line-height:1.65;
}


.pull-quote p {
 font-size: 18px;
 line-height: 1.4;
 color: var(--text-primary);
 font-weight: 400!important;
 margin-top:16px;
}

.article-body p{
 font-size: 18px;
 line-height: 1.65;
 color: var(--text-primary);
 margin-bottom: 20px;
}

.article-body li {font-size:18px; line-height: 1.65;color: var(--text-primary);}

.article-body ul, .article-body ol {
 margin-left:20px;
}

.article-body img,
.article-body video,
.article-body iframe {
 max-width: 100%;
 height: auto;
}

.article-body pre {
 max-width: 100%;
 margin-bottom: 20px;
 padding: 14px;
 overflow-x: auto;
 border-radius: 8px;
 background: var(--bg-sidebar);
 -webkit-overflow-scrolling: touch;
}

.article-body code {
 overflow-wrap: anywhere;
}

.article-body table {
 display: block;
 width: max-content;
 max-width: 100%;
 margin-bottom: 20px;
 overflow-x: auto;
 border-collapse: collapse;
 -webkit-overflow-scrolling: touch;
}

.article-body th,
.article-body td {
 padding: 8px 10px;
 border: 1px solid var(--border-color);
 text-align: left;
}

.article-body h1 {
 font-size: 20px;
 font-weight: 700;
 margin-top: 36px;
 margin-bottom: 16px;
 color: var(--text-primary);
}

.article-body h2, .article-body h3 { 
 font-size: 18px;
 font-weight: 700;
 margin-top: 26px;
 margin-bottom: 8px;
 color: var(--text-primary);
}

.article-body h4, .article-body h5 { 
 font-size: 18px;
 font-weight: 700;
 margin-top: 26px;
 margin-bottom: 6px;
 color: var(--text-primary);
}

#pinned {margin-top:8px; margin-bottom:8px;}
.special{
 padding-top:4px;
 padding-bottom:4px; 
}

/* Compact desktop and tablet: move categories into a drawer. */
@media (max-width: 1100px) {
 .mobile-nav-trigger {
  display: flex!important;
 }

 .sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  width: min(340px, 88vw);
  padding: 0 18px 20px;
  border-right: 1px solid var(--border-color);
  box-shadow: 10px 0 30px rgba(32, 36, 42, 0.18);
  transform: translateX(-105%);
  transition: transform 0.22s ease;
  overscroll-behavior: contain;
 }

 .mobile-sidebar-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -18px 14px;
  padding: calc(16px + env(safe-area-inset-top)) 18px 14px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
 }

 .mobile-sidebar-heading div {
  display: flex;
  min-width: 0;
  flex-direction: column;
 }

 .mobile-sidebar-heading strong {
  font-size: 18px;
 }

 .mobile-sidebar-heading > div > span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
 }

 .mobile-sidebar-heading button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 50%;
 }

 .mobile-sidebar-heading button .material-symbols-outlined {
  margin: 0;
  font-size: 24px;
 }

 .mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: block;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background: rgba(22, 29, 39, 0.46);
  border: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
 }

 body.mobile-nav-open .sidebar {
  transform: translateX(0);
 }

 body.mobile-nav-open {
  overflow: hidden;
 }

 body.mobile-nav-open .mobile-nav-backdrop {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
 }

 .sidebar .category-link,
 .sidebar #pinned .category-link,
 .sidebar .radio-option {
  min-height: 44px;
 }

 .article-list {
  width: 360px;
 }

 .info-drawer-backdrop {
  position: fixed;
 }
}

@media (min-width: 701px) and (max-width: 900px) {
 .article-list {
  width: 320px;
 }

 .article-viewer {
  padding-right: 24px;
  padding-left: 24px;
 }

 .viewer-title-row {
  flex-direction: column;
  gap: 10px;
 }

 .viewer-title {
  font-size: 26px;
 }

 .viewer-actions {
  width: 100%;
  gap: 4px;
  padding: 2px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
 }

 .viewer-actions button .material-symbols-outlined {
  font-size: 30px;
 }
}

/* Mobile: the list and reader become separate, full-width views. */
@media (max-width: 700px) {
 html,
 body {
  width: 100%;
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
 }

 .app {
  min-height: 100dvh;
  height: auto;
  overflow: visible;
 }

 .header {
  position: sticky;
  top: 0;
  z-index: 900;
  min-height: 62px;
  padding: calc(7px + env(safe-area-inset-top)) 10px 7px;
  background: var(--bg-app);
  background: color-mix(in srgb, var(--bg-app) 96%, transparent);
  backdrop-filter: blur(12px);
 }

 .header-left {
  min-width: 0;
  align-items: center;
 }

 .header-icon {
  font-size: 36px!important;
 }

 .header h1 {
  font-size: 18px;
 }

 .tagline {
  font-size: 11px;
 }

 .actions {
  gap: 0;
  padding-right: 0;
 }

 .actions button {
  width: 44px;
  height: 44px;
  padding: 0;
 }

 .actions button .material-symbols-outlined {
  font-size: 29px;
 }

 .columns {
  display: block;
  flex: none;
  overflow: visible;
 }

 body.mobile-list-open .article-viewer {
  display: none;
 }

 body.mobile-article-open .article-list {
  display: none;
 }

 .article-list {
  width: 100%;
  min-height: calc(100dvh - 62px - env(safe-area-inset-top));
  border-right: 0;
 }

 .search-area {
  position: sticky;
  top: calc(62px + env(safe-area-inset-top));
  z-index: 10;
  padding: 14px 16px 10px;
  background: var(--bg-app);
  box-shadow: 0 8px 18px rgba(32, 36, 42, 0.04);
 }

 .search-input {
  height: 48px;
  padding-left: 42px;
  font-size: 16px;
 }

 .cards-container {
  flex: none;
  overflow: visible;
 }

 .article-card {
  min-height: 112px;
  padding: 14px 16px;
  gap: 10px;
 }

 .article-card.selected {
  padding-left: 12px;
 }

 .card-thumb {
  width: 42px;
  height: 42px;
 }

 .card-title {
  font-size: 16px;
  line-height: 1.35;
 }

 .card-desc {
  font-size: 14px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
 }

 .card-meta {
  font-size: 12px;
  line-height: 1.45;
 }

 .more-articles {
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
 }

 .more-articles a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
 }

 .article-viewer {
  width: 100%;
  min-width: 0;
  min-height: calc(100dvh - 62px - env(safe-area-inset-top));
  padding: 14px 18px calc(28px + env(safe-area-inset-bottom));
  overflow: visible;
 }

 .article-scroll-area {
  flex: none;
  overflow: visible;
 }

 .mobile-back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  margin: -4px 0 8px -8px;
  padding: 0 8px;
  color: var(--primary-blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
 }

 .mobile-back-link .material-symbols-outlined {
  font-size: 21px;
 }

 .viewer-title-row {
  flex-direction: column;
  gap: 10px;
 }

 .viewer-title {
  max-width: 22ch;
  font-size: clamp(24px, 7.2vw, 30px);
  line-height: 1.22;
  text-wrap: balance;
 }

 .viewer-actions {
  width: 100%;
  gap: 4px;
  padding: 2px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
 }

 .viewer-actions button {
  width: 48px;
  height: 48px;
 }

 .viewer-actions button .material-symbols-outlined {
  font-size: 30px;
 }

 .viewer-meta {
  margin: 12px 0 14px;
  font-size: 12px;
  line-height: 1.55;
 }

 .article-viewer > .divider {
  display: none;
 }

 .pull-quote {
  margin: 8px 0 24px;
  padding-left: 15px;
 }

 .pull-quote p,
 .article-body p,
 .article-body li {
  font-size: 17px;
  line-height: 1.65;
 }

 .article-body ul,
 .article-body ol {
  margin-left: 18px;
 }

 .settings-dialog-backdrop {
  align-items: flex-end;
  padding: env(safe-area-inset-top) 0 0;
 }

 .settings-dialog {
  width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top));
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 16px 16px 0 0;
 }

 .settings-dialog-actions {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
 }

 .settings-dialog-actions button {
  min-height: 44px;
 }

 .settings-category-option {
  min-height: 52px;
 }

 .info-drawer {
  width: 100%;
  max-width: none;
  border-left: 0;
 }

 .info-drawer-header {
  padding: calc(18px + env(safe-area-inset-top)) 18px 16px;
 }

 .info-drawer-content {
  padding: 18px 18px calc(24px + env(safe-area-inset-bottom));
 }
}

@media (max-width: 340px) {
 .header-left {
  gap: 6px;
 }

 .header-icon {
  font-size: 32px!important;
 }

 .header h1 {
  font-size: 16px;
  white-space: nowrap;
 }

 .tagline {
  font-size: 10px;
  white-space: nowrap;
 }
}

@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }

 .sidebar,
 .mobile-nav-backdrop {
  transition: none;
 }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
 :root {
  --bg-page: #1a1d23;
  --bg-app: #24272e;
  --bg-sidebar: #1e2025;
  --border-color: #3a3f47;
  --primary-blue: #4c9af5;
  --text-primary: #e4e7ec;
  --text-secondary: #9aa0ab;
  --text-muted: #8b9099;
  --bg-selected: #2c3040;
 }

 .category:hover, #pinned .category-link:hover {
  background: #2c3040;
 }

 .category.active {
  background: #3a3f47;
 }

 .settings-panel {
  background: #2c3040;
 }

 .article-card.unread {
  background: #1a2e1a;
 }

 .settings-secondary {
  color: var(--text-secondary);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
 }

 .more-articles a {
  color: var(--text-primary);
 }
}