/********************************************************************
  DARK–MODE RSS READER  •  v2 tidy 2025‑07‑06
********************************************************************/

/* ---------- colour & sizing tokens ---------- */
:root{
  --bg        : #121212;
  --card      : #1E1E1E;
  --border    : #333;
  --accent    : #ff8f00;      /* deep amber */
  --text      : #E0E0E0;
  --meta      : #9E9E9E;
  --gap       : 1.2rem;
  --card-min  : 300px;
}

/* ---------- base reset ---------- */
html,body{
  margin:0; padding:0; width:100%; min-height:100vh;
  background:var(--bg); color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- headings & generic buttons ---------- */
h1{font-size:1.8rem;margin:.8rem 0;text-align:center;}

button{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-weight:600;
  padding:.4rem .9rem;
  font-size:.88rem;
  transition:opacity .15s, background .25s;
}
button:hover{opacity:.85;}
button:active{opacity:.7;}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------- GRID ---------- */
#items{
  display:grid;
  gap:var(--gap);
  margin:1.5rem auto 3.5rem;
  grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));
}
@media (min-width:640px){ #items{grid-template-columns:repeat(2,1fr);}}

/* ---------- CARD ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1rem 1.1rem;
  box-shadow:0 2px 4px rgba(0,0,0,.3);        /* un‑duplicated */
  display:flex; flex-direction:column;
  scroll-margin-top:80px;                      /* scroll‑to offsets header */
  transition:transform .18s;
}
.card:hover{ transform:translateY(-2px); }

.card img.thumb{
  width:100%; height:auto;
  border:1px solid var(--border);
  border-radius:4px;
  margin:.6rem 0;
  object-fit:cover;
}

/* links */
.item-title{color:var(--accent);text-decoration:none;font-weight:600;font-size:1.04rem;}
.item-title:hover{text-decoration:underline;}

/* meta + feed badge */
.item-meta{color:var(--meta);font-size:.8rem;}
.feed-badge{
  background:#2A2A2A;
  color:var(--meta);
  border-radius:.25rem;
  padding:.14rem .45rem;
  font-size:.74rem;
  margin-left:.5rem;
  cursor:pointer;
}
.feed-badge.active{background:var(--accent);color:#fff;}

/* 4‑line clamp */
.desc{
  margin-top:.55rem;
  font-size:.9rem;
  line-height:1.42;
  color:var(--text);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

/* Read dim */
.card.read{opacity:.33;}
.badge-read{
  position:absolute; top:.6rem; right:.6rem;
  background:#4CAF50; color:#fff;
  font-size:.65rem; padding:.15rem .45rem; border-radius:12px;
}

/* Pulse border helper */
@keyframes pulseBorder{
  0%{box-shadow:0 0 0 0 var(--accent);}
  70%{box-shadow:0 0 0 8px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}
.card.pulse{animation:pulseBorder .9s ease-out 2;}

/* ---------- Sticky header ---------- */
#appHeader{
  position:sticky; top:0; z-index:1000;
  background:var(--card);
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  padding:.6rem 1rem .7rem;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}

#pageTitle{
  flex:1 1 auto; margin:0;
  font-size:1.3rem; color:var(--text);
}

.btn‑group{display:flex; gap:.5rem;}
.btn‑group button{padding:.35rem .75rem; font-size:.82rem;}

#showAllBtn{
  background:transparent; color:var(--accent);
  border:1px solid var(--accent);
}
#showAllBtn:hover{background:var(--accent); color:#fff;}

#sortBtn{
  background:#2A2A2A; color:var(--text); border:1px solid var(--border);
}
#sortBtn.active{background:var(--accent);color:#fff;}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:.8rem;
  background:rgba(0,0,0,.7); color:#fff;
  z-index:99999;
}
.loader .bar{
  width:0%; height:6px; border-radius:3px;
  background:var(--accent); transition:width .25s ease;
}
.loader .txt{font-size:1rem;}

/* ---------- Modal shell ---------- */
.modal-bg{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.65); z-index:9999;
}
.modal-content{
  background:var(--card); color:var(--text);
  width:92%; max-width:560px; max-height:90vh;
  border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
}
/* header + footer */
.modal-top,
.import-export{flex:0 0 auto; padding:.9rem 1.25rem;}
.modal-top{display:flex;align-items:center;border-bottom:1px solid var(--border);}
.modal-top h2{margin:0;font-size:1.15rem;}
.icon-btn{
  margin-left:auto;background:none;border:none;color:var(--meta);
  font-size:1.4rem;cursor:pointer;line-height:1;
}
.icon-btn:hover{color:#fff;}
.import-export{
  border-top:1px solid var(--border);
  display:flex;gap:.6rem;justify-content:flex-end;
}

button.ghost{
  background:transparent; color:var(--meta);
  border:1px solid var(--border); font-size:.8rem;
  padding:.33rem .9rem; border-radius:4px;
}
button.ghost:hover{color:#fff;border-color:#666;}

/* modal scrolling body */
.modal-body{flex:1 1 auto; padding:0 1.25rem 1rem; overflow-y:auto;}
#folderList,#feeds{margin:0;padding:0;list-style:none;}
.folder-label{margin-top:.8rem;font-weight:bold;color:#bbb;}

#folderList li,#feeds li{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 0;border-bottom:1px solid var(--border);
}
#feeds button.del{
  width:1.8rem;height:1.8rem;border-radius:50%;
  background:#E04848;color:#fff;border:none;font-weight:bold;cursor:pointer;
}
#feeds button.del:hover{opacity:.8;}

/* ---------- Search modal ---------- */
.amodal{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.6); z-index:9999;
  align-items:center; justify-content:center;
}
.amodal-content{
  background:#1f1f1f; color:#fff; padding:22px;
  width:92%; max-width:400px; border-radius:8px;
  box-shadow:0 5px 15px rgba(0,0,0,.55); text-align:center;
  position:relative;
}
.amodal-content input{
  width:100%; padding:10px;
  border:none; border-radius:4px; background:#333; color:#fff;
  font-size:16px; margin-top:12px;
}
.amodal-content button{margin-top:14px;}
.aclose-btn{
  position:absolute; top:10px; right:18px;
  font-size:26px; cursor:pointer; color:#fff;
}

/* ---------- WebKit scrollbar for the grid ---------- */
#items::-webkit-scrollbar{height:12px;}
#items::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
#items::-webkit-scrollbar-thumb:hover{background:#555;}




/* ╔══════════════════════════════════════════════╗
   ║  FORM ELEMENTS – dark‑mode / amber accent   ║
   ╚══════════════════════════════════════════════╝ */

/* text + url inputs */
input[type="text"],
input[type="url"],
input[type="search"],
input[type="file"]{
  width:100%;
  padding:.55rem .8rem;
  font-size:.9rem;
  color:var(--text);
  background:#181818;
  border:1px solid var(--border);
  border-radius:4px;
  transition:border-color .25s, box-shadow .25s;
}
input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* dropdowns */
select{
  width:100%;
  padding:.55rem .8rem;
  font-size:.9rem;
  color:var(--text);
  background:#181818 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff8f00' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right .7rem center/12px;
  appearance:none;               /* remove default arrow */
  border:1px solid var(--border);
  border-radius:4px;
  transition:border-color .25s, box-shadow .25s;
}
select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* smaller inline (for the edit‑folder dropdown in feed list) */
#feeds select{
  width:auto;
  padding:.3rem .6rem;
  font-size:.78rem;
  margin-left:auto;
}

/* remove default blue autofill background in Chromium */
input:-webkit-autofill{
  box-shadow:0 0 0 30px #181818 inset !important;
  -webkit-text-fill-color:var(--text) !important;
}



.add-row{
  flex:0 0 auto;                 /* keeps it out of scrolling area */
  display:flex; gap:.6rem;
  padding:.9rem 1.3rem;
  border-bottom:1px solid var(--border);
  background:var(--card);        /* same as modal bg so it “sticks” */
}
.add-row select,
.add-row input{ flex:1 1 auto; }    /* share width nicely */
.add-row button{ flex:0 0 auto; }