:root{
  --bg: #0b0c10;
  --surface: #121319;
  --muted: #6b7280;
  --text: #e5e7eb;
  --primary: #60a5fa;
  --accent: #34d399;
  --danger: #f87171;
  --card: #151824;
  --border: #262a36;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --header-top: 56px;
}
:root[data-theme="light"]{
  --bg:#f6f7fb; --surface:#ffffff; --muted:#6b7280; --text:#111827; --primary:#2563eb; --accent:#059669; --danger:#dc2626; --card:#ffffff; --border:#e5e7eb; --shadow:0 8px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: light){
  :root[data-theme="system"]{
    --bg:#f6f7fb; --surface:#ffffff; --muted:#6b7280; --text:#111827; --primary:#2563eb; --accent:#059669; --danger:#dc2626; --card:#ffffff; --border:#e5e7eb; --shadow:0 8px 24px rgba(0,0,0,.08);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
/* Ensure elements with the hidden attribute are not displayed, even if class styles set display */
[hidden]{ display:none !important }
button, input, select, textarea{ color:inherit; font:inherit }
button{ cursor:pointer; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; min-height:40px; min-width:40px }
button:hover{ filter:brightness(1.05) }
button:active{ transform: translateY(1px) }
.btn-text{ margin-left:.3rem }
@media (max-width: 720px){ .btn-text{ display:none } }
input, select, textarea{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.5rem .6rem }
textarea{ min-height:40vh; width:100%; resize:vertical }
/* Visible focus styles */
:where(a,button,input,select,textarea, [role="button"])::selection{ background: color-mix(in srgb, var(--primary) 35%, transparent) }
:where(a,button,input,select,textarea, [role="button"]):focus-visible{ outline:3px solid color-mix(in srgb, var(--primary) 80%, white 0%); outline-offset:2px; border-radius: 8px }

.action-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:color-mix(in srgb, var(--surface) 88%, black 12%);
  border:1px solid color-mix(in srgb, var(--border) 70%, black 30%);
  color:color-mix(in srgb, var(--text) 92%, white 8%);
  padding:.35rem .75rem;
  border-radius:999px;
  line-height:1.1;
  min-height:0;
  min-width:auto;
}
.action-btn .icon{ width:1.1em; height:1.1em; fill:currentColor }
.action-btn.primary{
  background:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 70%, black 30%);
  color:#fff;
}

.article-viewer .favorite-toggle{
  background:color-mix(in srgb, var(--surface) 90%, var(--primary) 10%);
  border-color:color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
  color:var(--text);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.article-viewer .favorite-toggle.is-favorite{
  background:color-mix(in srgb, var(--accent) 70%, var(--surface) 30%);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
  color:#ffffff;
}
.article-viewer .favorite-toggle-label{ font-weight:600 }


/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--primary); color:#fff; padding:.5rem .75rem; border-radius:8px; z-index:1000 }

.app-header{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow) }
.brand{ display:flex; align-items:center; gap:.6rem }
.brand .logo{ font-size:1.4rem }
.brand h1{ margin:0; font-size:1.1rem; letter-spacing:.3px; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.brand .only-mobile{ padding:.6rem .8rem; border-radius:10px; border:1px solid color-mix(in srgb, var(--border) 70%, white 30%); background: color-mix(in srgb, var(--surface) 85%, white 15%); line-height:1; font-size:1.1rem; margin-right:.25rem }
.actions{ display:flex; align-items:center; gap:.5rem }
@media (max-width: 480px){
  /* Hide lower-priority actions to keep the menu visible */
  #btn-import, #btn-export, #btn-edit-opml{ display:none }
}
.theme-toggle{ display:flex; align-items:center; gap:.4rem }
.theme-toggle select{ min-width:110px }
.theme-toggle #btn-theme-toggle{ display:none; padding:.35rem .45rem; font-size:1.05rem; line-height:1; min-width:auto; min-height:auto }

/* On narrow screens, collapse theme select into emoji button */
@media (max-width: 540px){
  .theme-toggle select{ display:none }
  .theme-toggle #btn-theme-toggle{ display:inline-flex }
}

.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--border) }
.toolbar{ position: sticky; top: var(--header-top, 56px); background: var(--surface); z-index: 30 }
.search-box{ display:flex; gap:.4rem; align-items:center }
#search-input{ width:min(70vw, 520px) }
.filters{ display:flex; gap:.5rem; align-items:center; margin-left:auto; flex-wrap:wrap }
.filters select{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.checkbox{ display:flex; align-items:center; gap:.35rem; user-select:none }

.app-main{ display:grid; grid-template-columns: 280px 1fr; gap:0; min-height: calc(100vh - 110px) }
.sidebar{ padding:1rem; border-right:1px solid var(--border); background:var(--surface); min-width:0; overflow-x:hidden; overflow-y:auto }
.sidebar-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
.feed-list, .category-list{ list-style:none; padding:0; margin:.5rem 0 1rem; display:grid; gap:.25rem }
.feed-list li, .category-list li{ padding:.4rem .5rem; border-radius:8px; border:1px solid transparent; overflow:hidden }
.feed-list li:hover, .category-list li:hover{ background:var(--card); border-color:var(--border) }
.feed-list li.active, .category-list li.active{ background:linear-gradient(180deg, rgba(96,165,250,.2), rgba(96,165,250,.08)); border-color:color-mix(in srgb, var(--primary) 50%, var(--border)) }
.feed-list .row, .category-list .row{ display:flex; align-items:center; gap:.4rem; justify-content:space-between; min-width:0; flex-wrap:nowrap }
.feed-list .row-left, .category-list .row-left{ display:flex; align-items:center; gap:.5rem; flex:1 1 auto; min-width:0 }
.feed-list .title, .category-list .title{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; flex:1 1 auto }
.icon-btn{ padding:.3rem .45rem; min-height:auto; min-width:auto; line-height:1; flex:0 0 auto }
.feed-list .chip.button{ cursor:pointer; user-select:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 0 auto }
.feed-list .chip.button{ cursor:pointer; user-select:none; }
.inline-input{ width:100%; box-sizing:border-box }

.content{ padding:1rem; min-width:0 }
.empty-state{ display:grid; place-items:center; gap:.5rem; padding:2rem; text-align:center; color:var(--muted) }
.post-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:1rem; grid-auto-flow: row dense }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; min-height:120px }
.card .media{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#000 }
.card .body{ padding:.75rem .85rem; display:flex; flex-direction:column; gap:.5rem }
.card h4{ margin:.2rem 0; font-size:1rem; line-height:1.3 }
.card .meta{ color:var(--muted); font-size:.85rem; display:flex; flex-wrap:wrap; gap:.5rem }
.card .excerpt{ color:var(--text); opacity:.9; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.card .tags{ display:flex; gap:.35rem; flex-wrap:wrap }
.tag{ background:color-mix(in srgb, var(--accent) 18%, var(--card) 82%); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color:color-mix(in srgb, var(--text) 95%, white 5%); padding:.15rem .5rem; border-radius:999px; font-size:.8rem }
.chip{ background:color-mix(in srgb, var(--card) 88%, black 12%); border:1px solid color-mix(in srgb, var(--border) 70%, black 30%); padding:.15rem .5rem; border-radius:999px; color:color-mix(in srgb, var(--text) 92%, white 8%); font-size:.8rem }
.card .actions{ display:flex; gap:.6rem; align-items:center; margin-top:.35rem }
.card .actions .spacer{ flex:1 }
.favorite.active{ color:#f59e0b }
button[aria-pressed="true"]{ outline:2px solid color-mix(in srgb, var(--primary) 65%, white 0%); outline-offset:2px }

.app-footer{ border-top:1px solid var(--border); padding:.5rem 1rem; color:var(--muted); background:var(--surface) }

.modal{ border:none; padding:0; border-radius:14px; background:var(--surface); color:var(--text); width:min(900px, 96vw); box-shadow:var(--shadow); }
.modal::backdrop{ background:rgba(0,0,0,.5) }
.modal.wide{ width:min(1200px, 96vw) }
.modal .modal-body{ padding:1rem; display:grid; gap:.75rem }
.modal .modal-actions{ display:flex; justify-content:flex-end; gap:.5rem; padding:.5rem 1rem 1rem }
#opml-editor{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; line-height:1.4; background:var(--card) }

.post-view{ padding:1rem }
.post-view header{ display:grid; gap:.25rem }
.post-view .meta{ color:var(--muted) }
.post-view-media{ display:grid; gap:.5rem }
.post-view-content img, .post-view-content video, .post-view-content audio{ max-width:100% }
.post-view-actions{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.5rem }
.tag-list{ display:flex; gap:.35rem; flex-wrap:wrap }

/* Off-canvas sidebar behavior on small screens */
@media (max-width: 900px){
  .app-main{ grid-template-columns: 1fr; position:relative }
  .app-header{ z-index: 30 }
  :root{ --header-top: 64px }
  .sidebar{ order:2; position: fixed; top: var(--header-top, 64px); left: 0; height: calc(100vh - var(--header-top, 64px)); width:min(86vw, 360px); max-width:86vw; z-index: 20; transform: translateX(-101%); transition: transform .25s ease; box-shadow: var(--shadow) }
  .sidebar.open{ transform: translateX(0) }
  .sidebar-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 15 }
  .only-mobile{ display:inline-flex }
}

/* Menu button visibility: only show on narrow screens where sidebar is hidden */
.only-mobile{ display:none; flex-shrink:0 }
@media (max-width: 900px){ .only-mobile{ display:inline-flex } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}

/* High contrast preference adjustments (lighten borders/text) */
@media (prefers-contrast: more){
  :root{ --border: color-mix(in srgb, var(--border) 60%, white 40%); --text: color-mix(in srgb, var(--text) 90%, white 10%)}
  .card, .sidebar, .toolbar, .app-header, .app-footer{ border-color: var(--border) }
}