/* ── Body selection lock ── */
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
textarea, input { -webkit-user-select:text; user-select:text; }

/* ── Theme-aware CSS variables ── */
:root {
  --bg-color:#eef2f9; --card-bg:#ffffff; --text-main:#0d1b2a; --text-muted:#64748b;
  --border-color:#d6dfee; --input-bg:#f8faff; --hover-bg:#eaf0fc;
  --navy:#0d1b2a; --navy2:#1b2d4f; --navy3:#243b6a;
  --gold:#c9922e; --gold2:#e8b44a; --green:#15803d; --red:#dc2626;
  --shadow:0 2px 16px rgba(13,27,42,0.08),0 1px 4px rgba(13,27,42,0.06);
  --shadow2:0 12px 40px rgba(13,27,42,0.18);
}
[data-theme="dark"] {
  --bg-color:#0a0f1e; --card-bg:#111827; --text-main:#f1f5f9; --text-muted:#94a3b8;
  --border-color:#1e2d45; --input-bg:#0a0f1e; --hover-bg:#1e2d45;
  --gold:#dba83c; --gold2:#f0c055;
  --shadow:0 4px 24px rgba(0,0,0,0.5);
}

/* ── Smooth theme transition ── */
body { transition: background 0.3s, color 0.3s; }

/* ── Scrollbar & input placeholders ── */
.search-input::placeholder { color: var(--text-muted); }
.drop-input::placeholder   { color: var(--text-muted); }
.write-input::placeholder  { color: var(--text-muted); }
.write-textarea::placeholder { color: var(--text-muted); }

/* ── SVG progress ring ── */
.chart-bg       { fill:none; stroke:var(--border-color); stroke-width:8; }
.chart-progress { fill:none; stroke:var(--gold); stroke-width:8; stroke-linecap:round; transition:stroke-dasharray 0.8s ease; transform:rotate(-90deg); transform-origin:50% 50%; }

/* ── Mobile sidebar collapse ── */
@media(max-width:1024px) {
  .main-grid   { grid-template-columns: 1fr !important; padding-top:15px; }
  .sidebar     { position: static !important; }
  .mode-bar    { gap:6px; flex-wrap:wrap; width:100%; display:flex; justify-content:space-between; }
  .mode-btn    { flex:1; padding:0 4px; font-size:0.75rem; min-width:0; }
  .q-footer    { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
  .q-actions   { margin-left:auto; width:auto; justify-content:flex-end; margin-top:0; flex-shrink:0; }
  .q-footer .tag, .small-btn { white-space:nowrap; }
  .sort-btn    { order:1; margin-left:0; flex-shrink:0; }
  .search-wrap { order:2; width:100%; margin-left:0; margin-top:4px; display:flex; }
  .search-wrap input { width:100%; flex:1; }
  .profile-dropdown { right:-10px; }
}