/* ===============================
   Wordty – Site-wide CSS (v2)
   data-theme drives dark/light across all pages
   =============================== */

/* ---------- Theme Vars ---------- */
:root{
  --bg:#0b0c0f; --fg:#e9eef3; --muted:#aab4bf; --panel:#12141a;
  --accent:#6aa9ff; --border:#1c2129; --btn:#1b2230; --btnfg:#e9eef3;
  --card:#12141a; --ring:var(--border); --text:var(--fg);
}
[data-theme="dark"]{
  --bg:#0b0c0f; --fg:#e9eef3; --muted:#aab4bf; --panel:#12141a;
  --accent:#6aa9ff; --border:#1c2129; --btn:#1b2230; --btnfg:#e9eef3; --card:#12141a;
}
[data-theme="light"]{
  --bg:#f7f9fc; --fg:#0a1320; --muted:#5b6672; --panel:#ffffff;
  --accent:#2b76ff; --border:#e3e8ef; --btn:#ffffff; --btnfg:#0a1320; --card:#ffffff;
}
[data-theme="light"] .go{ color:#fff }

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1100px; margin:0 auto; padding:0 16px}

/* ---------- Header/Footer ---------- */
header{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 0; border-bottom:1px solid var(--border)}
.brand{display:flex; align-items:center; gap:10px}
.logo{font-size:28px}
.actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
footer{padding:24px 0; color:var(--muted); border-top:1px solid var(--border)}

/* ---------- Buttons/Inputs ---------- */
button,select,input[type="file"],input[type="text"],input[type="number"],input[type="search"],input[type="range"],label.chip,.chip{
  background:var(--btn); color:var(--btnfg); border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; font-size:14px; cursor:pointer
}
input[type="text"],input[type="number"],input[type="search"]{cursor:text}
button:hover,select:hover{border-color:var(--accent)}
button:focus,select:focus,input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:2px}
.small{font-size:14px; padding:6px 10px}
.small-link{padding:6px 8px; border-radius:8px; border:1px solid var(--border)}
.actions select.select-compact{font-size:.9rem; line-height:1; padding:4px 8px; height:32px; border-radius:8px}
label.chip,.chip{display:inline-flex; gap:8px; align-items:center; user-select:none}
label.chip input{accent-color:var(--accent)}
input[type="range"]{accent-color:var(--accent); width:180px}

/* ---------- Cards/Panels ---------- */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:16px; margin:20px 0; padding:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:8px}

/* ---------- HOME grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:24px 0 40px}
.card:hover{transform:translateY(-2px); border-color:var(--accent); transition:transform .15s,border-color .15s}
.card h2{margin:0 0 4px; font-size:18px}
.card p{margin:0; color:var(--muted); min-height:40px}
.go{margin-top:auto; display:inline-block; background:var(--accent); color:#081427; padding:8px 12px; border-radius:10px; font-weight:600; text-align:center}

/* ---------- WORD COUNTER layout ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(6,minmax(140px,1fr));
  gap:10px;
  margin:18px 0 8px;
}
.stats .card{align-items:flex-start; gap:4px}
.pill{width:28px; height:6px; border-radius:4px; background:var(--accent); opacity:.8}
.label{font-size:12px; color:var(--muted)}
.value{font-size:24px; font-weight:700}

.two-col{
  display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; margin-bottom:28px
}
@media (max-width:980px){ .two-col{grid-template-columns:1fr} }

.editor textarea{
  width:100%; min-height:360px; background:#0e1117; color:var(--fg);
  border:1px solid var(--border); border-radius:12px; padding:12px; font:inherit; line-height:1.5; resize:vertical
}
[data-theme="light"] .editor textarea{background:#fff}

.font-size-controls button{min-width:36px}

/* Collapsibles (details/summary) */
.acc{border:1px solid var(--border); border-radius:12px; padding:6px 8px; background:var(--panel); margin-bottom:10px}
.acc > summary{cursor:pointer; list-style:none; font-weight:600}
.acc > summary::-webkit-details-marker{display:none}
.acc-body{padding:8px 4px}
.kv{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:6px 0}

/* Progress bars */
.progress{height:8px; background:rgba(127,127,127,.2); border-radius:6px; overflow:hidden; margin-top:6px}
.progress > span{display:block; height:100%; width:0; background:var(--accent); transition:width .15s ease}

/* Footer line on Word Counter */
.footer{color:var(--muted); padding:8px 0 24px}

/* ---------- PDF tools specifics ---------- */
.list{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.merge-row{display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--panel)}
.merge-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%}
.merge-actions button{margin-left:6px}

/* ---------- Image tools specifics ---------- */
.canvasWrap{display:flex; gap:12px; flex-wrap:wrap}
#preview{max-width:100%; max-height:420px; border:1px dashed var(--border); border-radius:12px; background:#0e1117}
[data-theme="light"] #preview{background:#fff}
.queue{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.thumb{border:1px solid var(--border); border-radius:8px; overflow:hidden}
.thumb img{display:block; height:80px}

/* ---------- Smooth theme transition ---------- */
body,.panel,.card,textarea,.merge-row,#preview{transition:background-color .15s,color .15s,border-color .15s}