/* ─── RESET & VARIABLES ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:#0f0e0c; --bg2:#161511; --bg3:#1e1c17;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12);
  --text:#e8e2d6; --text2:#a89f8e; --text3:#6b6358;
  --amber:#d4903a; --amber-dim:rgba(212,144,58,0.12); --amber-border:rgba(212,144,58,0.3);
  --green:#7aad6e; --green-dim:rgba(122,173,110,0.1); --green-border:rgba(122,173,110,0.3);
  --blue:#6fa3c8; --blue-dim:rgba(111,163,200,0.1); --blue-border:rgba(111,163,200,0.25);
  --red:#c46a5a; --red-dim:rgba(196,106,90,0.1); --red-border:rgba(196,106,90,0.25);
  --purple:#9b84c4; --purple-dim:rgba(155,132,196,0.1);
  --teal:#5aada0; --teal-dim:rgba(90,173,160,0.1);
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --radius:8px;
  --transition: 0.15s ease;
}

/* IMPROVEMENT #1: POLISHED LIGHT THEME */
body[data-theme="light"] {
  --bg:#f5f0e8; --bg2:#ede8de; --bg3:#e2dbd0;
  --border:rgba(0,0,0,0.07); --border2:rgba(0,0,0,0.13);
  --text:#1a1814; --text2:#5c5248; --text3:#9a9088;
  --amber:#b5711c; --amber-dim:rgba(181,113,28,0.12); --amber-border:rgba(181,113,28,0.3);
  --shadow: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
}

/* IMPROVEMENT #2: SMOOTH THEME TRANSITIONS */
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Grain texture */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
  opacity:0.6;
}

.page {
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto;
  padding:52px 24px 120px;
}

/* ─── HEADER ─────────────────────────────────────────── */
.header { margin-bottom:36px; }
.header-eyebrow { font-family:var(--font-mono);font-size:11px;color:var(--amber);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:10px; }
.header-title { font-family:var(--font-display);font-size:clamp(30px,5vw,44px);font-weight:600;color:var(--text);line-height:1.15;margin-bottom:12px; }
.header-title span { color:var(--amber); }
.header-sub { font-size:13px;color:var(--text2);max-width:520px;line-height:1.75;margin-bottom:20px; }

/* STATS STRIP */
.stats-strip {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0;
  background:var(--bg2);
  border:0.5px solid var(--border2);
  border-radius:var(--radius);
  padding:0;
  width:fit-content;
  max-width:100%;
  overflow:hidden;
}
.stat-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:14px 20px;
}
.stat-num {
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:500;
  color:var(--amber);
  line-height:1;
  display:block;
}
.stat-label {
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--text3);
  letter-spacing:0.14em;
  text-transform:uppercase;
  display:block;
  white-space:nowrap;
}
.stat-sep {
  width:0.5px;
  height:40px;
  background:var(--border2);
  flex-shrink:0;
}

/* ─── PROGRESS ───────────────────────────────────────── */
/* IMPROVEMENT #4: STICKY PROGRESS BAR WITH BACKDROP BLUR */
.progress-wrap {
  position:sticky;
  top:12px;
  z-index:100;
  margin-bottom:20px;
  padding:14px 18px;
  background:var(--bg2);
  border:0.5px solid var(--border2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.progress-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.progress-label { font-family:var(--font-mono);font-size:11px;color:var(--text3);letter-spacing:0.08em; }
.progress-count { font-family:var(--font-mono);font-size:11px;color:var(--amber); }
.progress-track { height:3px;background:var(--bg3);border-radius:99px;overflow:hidden; }
.progress-fill { height:100%;background:linear-gradient(90deg,var(--amber),#e8b86d);border-radius:99px;transition:width 0.4s cubic-bezier(0.4,0,0.2,1);width:0%; }

/* PER-PHASE MINI PROGRESS BARS */
.phase-mini-bars {
  display:flex;
  gap:16px;
  margin-top:12px;
  flex-wrap:wrap;
  border-top:0.5px solid var(--border);
  padding-top:12px;
}
.phase-mini {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:100px;
  flex:1;
}
.phase-mini-header {
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text3);
  letter-spacing:0.06em;
}
.phase-mini-track {
  width:100%;
  height:3px;
  background:var(--bg3);
  border-radius:99px;
  overflow:hidden;
}
.phase-mini-fill {
  height:100%;
  border-radius:99px;
  transition:width 0.5s cubic-bezier(0.4,0,0.2,1);
  width:0%;
}
.mini-unity .phase-mini-fill  { background:var(--blue); }
.mini-unreal .phase-mini-fill { background:var(--red); }
.mini-general .phase-mini-fill{ background:var(--green); }

/* IMPROVEMENT #6: OFFLINE BANNER */
.offline-banner {
  background:var(--red-dim);
  border:0.5px solid var(--red-border);
  border-radius:var(--radius);
  color:var(--red);
  font-family:var(--font-mono);
  font-size:12px;
  padding:10px 14px;
  margin-bottom:14px;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown { from{transform:translateY(-8px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ─── TOOLBAR ────────────────────────────────────────── */
.toolbar {
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--bg2);
  border:0.5px solid var(--border2);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:8px;
}
.toolbar-left {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.toolbar-right {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  border-top:0.5px solid var(--border);
  padding-top:8px;
}

.toolbar-left input[type="text"] {
  flex:1;
  min-width:160px;
  background:var(--bg);
  border:0.5px solid var(--border2);
  border-radius:6px;
  padding:7px 12px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:13px;
  outline:none;
  transition:border-color var(--transition);
}
.toolbar-left input:focus { border-color:var(--amber); }
.toolbar-left input::placeholder { color:var(--text3); }

.tbtn {
  background:var(--bg);
  border:0.5px solid var(--border2);
  border-radius:6px;
  padding:7px 12px;
  color:var(--text2);
  font-family:var(--font-mono);
  font-size:11px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color var(--transition),color var(--transition),background var(--transition);
  letter-spacing:0.04em;
  line-height:1;
}
.tbtn:hover { border-color:var(--amber);color:var(--amber); }
.tbtn.primary {
  background:var(--amber-dim);
  border-color:var(--amber-border);
  color:var(--amber);
  font-weight:500;
}
.tbtn.primary:hover { background:rgba(212,144,58,0.22); }
.tbtn.active { border-color:var(--amber);color:var(--amber);background:var(--amber-dim); }

/* STYLED SELECT DROPDOWNS */
.tbtn-select {
  background:var(--bg);
  border:0.5px solid var(--border2);
  border-radius:6px;
  padding:7px 10px;
  color:var(--text2);
  font-family:var(--font-mono);
  font-size:11px;
  cursor:pointer;
  outline:none;
  transition:border-color var(--transition),color var(--transition);
  line-height:1;
}
.tbtn-select:hover, .tbtn-select:focus { border-color:var(--amber);color:var(--text); }

select#task-priority, select#task-phase {
  background:var(--bg);
  border:0.5px solid var(--border2);
  border-radius:6px;
  padding:7px 10px;
  color:var(--text2);
  font-family:var(--font-mono);
  font-size:11px;
  cursor:pointer;
  outline:none;
  line-height:1;
}

/* ─── SEARCH ROW ─────────────────────────────────────── */
/* IMPROVEMENT #9: ENHANCED SEARCH WITH ICON & CLEAR BUTTON */
.search-row { display:flex;gap:8px;align-items:center;margin-bottom:20px; }
.search-wrap { position:relative;flex:1; }
.search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:16px;pointer-events:none; }
.search-wrap input {
  width:100%;
  background:var(--bg2);
  border:0.5px solid var(--border2);
  border-radius:6px;
  padding:8px 36px 8px 32px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:13px;
  outline:none;
  transition:border-color var(--transition);
}
.search-wrap input:focus { border-color:var(--amber); }
.search-wrap input::placeholder { color:var(--text3); }
.search-clear {
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:12px;padding:2px 4px;border-radius:3px;
  transition:color var(--transition);
}
.search-clear:hover { color:var(--text); }

/* ─── KANBAN CONTAINER ───────────────────────────────── */
/* IMPROVEMENT #10: TRUE KANBAN LAYOUT WITH PHASE COLUMNS */
.kanban-container { display:flex;flex-direction:column;gap:32px; }

body.kanban-active .kanban-container {
  flex-direction:row;
  gap:20px;
  overflow-x:auto;
  align-items:flex-start;
  padding-bottom:20px;
}
body.kanban-active .phase {
  min-width:300px;
  max-width:340px;
  background:var(--bg2);
  border:0.5px solid var(--border2);
  border-radius:12px;
  padding:16px;
  flex-shrink:0;
}

/* ─── PHASE ──────────────────────────────────────────── */
.phase { margin-bottom:0; }
.phase-header { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.phase-pill { font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:3px 10px;border-radius:99px;white-space:nowrap; }
.pill-unity  { background:var(--blue-dim);color:var(--blue);border:0.5px solid var(--blue-border); }
.pill-unreal { background:var(--red-dim);color:var(--red);border:0.5px solid var(--red-border); }
.pill-general{ background:var(--green-dim);color:var(--green);border:0.5px solid var(--green-border); }
.phase-name { font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text); }
.phase-line { flex:1;height:0.5px;background:var(--border); }
.phase-prog-label { font-family:var(--font-mono);font-size:10px;color:var(--text3); }
.tasks { display:flex;flex-direction:column;gap:5px;min-height:40px; }

/* ─── TASK CARD ──────────────────────────────────────── */
/* IMPROVEMENT #11: RICHER TASK CARDS WITH CLICK-TO-EDIT */
.task {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--bg2);
  border:0.5px solid var(--border);
  border-radius:7px;
  padding:11px 14px;
  cursor:grab;
  transition:border-color var(--transition), background var(--transition), transform 0.1s ease, box-shadow 0.15s ease;
  user-select:none;
}
.task:hover { border-color:var(--border2);background:var(--bg3);box-shadow:var(--shadow-sm); }
.task:active { cursor:grabbing;transform:scale(0.99); }
.task.done { background:var(--bg);border-color:var(--border);opacity:0.55; }
.task.done .task-title { text-decoration:line-through;color:var(--text3); }
.task.done .task-desc { color:var(--text3); }
.task.hidden { display:none !important; }
.task.highlight { border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-border); }

/* IMPROVEMENT #12: ANIMATED CHECKBOX */
.task-check {
  width:17px;height:17px;min-width:17px;
  border-radius:50%;
  border:1px solid var(--text3);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;flex-shrink:0;
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s,transform 0.15s;
}
.task-check:hover { border-color:var(--green);transform:scale(1.1); }
.task.done .task-check { background:var(--green-dim);border-color:var(--green); }
.checkmark { width:7px;height:7px;border-right:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(45deg) translate(-1px,-1px);display:none;animation:checkPop 0.2s ease; }
.task.done .checkmark { display:block; }
@keyframes checkPop { from{transform:rotate(45deg) translate(-1px,-1px) scale(0)} to{transform:rotate(45deg) translate(-1px,-1px) scale(1)} }

.task-body { flex:1;min-width:0; }
.task-title { font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px; }
.task-desc { font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:4px; }

/* IMPROVEMENT #13: PRIORITY TAGS WITH BETTER COLORS */
.task-tag { font-family:var(--font-mono);font-size:10px;padding:2px 8px;border-radius:4px;display:inline-block;letter-spacing:.05em;margin-top:2px; }
.tag-high   { background:var(--red-dim);color:var(--red);border:0.5px solid var(--red-border); }
.tag-med    { background:var(--amber-dim);color:var(--amber);border:0.5px solid var(--amber-border); }
.tag-low    { background:var(--blue-dim);color:var(--blue);border:0.5px solid var(--blue-border); }
/* Legacy tag classes */
.tag-setup  { background:var(--blue-dim);color:var(--blue); }
.tag-code   { background:var(--amber-dim);color:var(--amber); }
.tag-system { background:var(--red-dim);color:var(--red); }
.tag-art    { background:var(--teal-dim);color:var(--teal); }
.tag-polish { background:var(--purple-dim);color:var(--purple); }
.tag-world  { background:var(--green-dim);color:var(--green); }

/* Edit icon - show on hover */
.task-edit {
  position:absolute;right:36px;top:10px;
  width:22px;height:22px;
  background:none;color:var(--text3);
  border:0.5px solid transparent;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;cursor:pointer;opacity:0;
  transition:opacity 0.2s,color 0.15s,border-color 0.15s;
}
.task:hover .task-edit { opacity:1; }
.task-edit:hover { color:var(--amber);border-color:var(--amber-border);background:var(--amber-dim); }

.task-delete {
  position:absolute;right:10px;top:10px;
  width:22px;height:22px;
  background:var(--red-dim);color:var(--red);
  border:0.5px solid rgba(196,106,90,0.25);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;cursor:pointer;opacity:0;
  transition:opacity 0.2s,background 0.15s;
}
.task:hover .task-delete { opacity:1; }
.task-delete:hover { background:var(--red);color:#fff; }

/* IMPROVEMENT #14: DRAG GHOST */
.sortable-ghost { opacity:0.35;background:var(--bg3);border:1px dashed var(--amber); }
.sortable-chosen { box-shadow:0 8px 30px rgba(0,0,0,0.4); }

/* ─── EMPTY STATE ────────────────────────────────────── */
/* IMPROVEMENT #15: EMPTY STATE ILLUSTRATION */
.empty-state {
  text-align:center;
  padding:60px 20px;
  color:var(--text3);
}
.empty-icon { font-size:48px;margin-bottom:16px;opacity:0.5; }
.empty-title { font-family:var(--font-display);font-size:20px;color:var(--text2);margin-bottom:8px; }
.empty-sub { font-size:13px;color:var(--text3); }

/* ─── TOAST SYSTEM ───────────────────────────────────── */
/* IMPROVEMENT #16: TOAST NOTIFICATIONS */
#toast-container {
  position:fixed;
  bottom:24px;right:24px;
  z-index:9999;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast {
  background:var(--bg2);
  border:0.5px solid var(--border2);
  border-radius:var(--radius);
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text);
  box-shadow:var(--shadow);
  animation:toastIn 0.25s ease, toastOut 0.3s ease 2.7s forwards;
  pointer-events:all;
  max-width:280px;
}
.toast.success { border-left:2px solid var(--green);color:var(--green); }
.toast.error   { border-left:2px solid var(--red);color:var(--red); }
.toast.info    { border-left:2px solid var(--amber);color:var(--amber); }
@keyframes toastIn  { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateY(8px)} }

/* ─── MODALS / OVERLAYS ──────────────────────────────── */
.overlay {
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100vw;height:100vh;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.overlay.hidden { display:none !important; }
.overlay-backdrop {
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.overlay-panel {
  position:relative;
  z-index:1;
  background:var(--bg2);
  border:0.5px solid var(--border2);
  border-radius:14px;
  width:calc(100% - 48px);
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.05);
  animation:panelIn 0.22s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes panelIn {
  from { transform:scale(0.9) translateY(10px);opacity:0; }
  to   { transform:scale(1) translateY(0);opacity:1; }
}
.overlay-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  border-bottom:0.5px solid var(--border);
  position:sticky;top:0;
  background:var(--bg2);
  z-index:2;
  border-radius:14px 14px 0 0;
}
.overlay-title {
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--text);
}
.overlay-close {
  width:28px;height:28px;
  background:var(--bg3);
  border:0.5px solid var(--border2);
  border-radius:6px;
  color:var(--text3);
  cursor:pointer;
  font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--transition),background var(--transition);
  flex-shrink:0;
}
.overlay-close:hover { color:var(--text);background:var(--bg3);border-color:var(--text3); }

/* SHORTCUT PANEL */
.shortcut-panel { max-width:360px; }
.shortcut-grid { padding:16px 20px;display:flex;flex-direction:column;gap:8px; }
.shortcut-row { display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text2); }
kbd { font-family:var(--font-mono);font-size:11px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:4px;padding:3px 8px;color:var(--text);min-width:28px;text-align:center; }

/* DETAIL PANEL */
.detail-panel { max-width:500px; }
.detail-body { padding:22px; }
.detail-label {
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text3);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:7px;
  margin-top:18px;
}
.detail-label:first-child { margin-top:0; }
.detail-input, .detail-select {
  width:100%;
  background:var(--bg);
  border:0.5px solid var(--border2);
  border-radius:7px;
  padding:10px 13px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:13px;
  outline:none;
  transition:border-color var(--transition);
}
.detail-input:focus, .detail-select:focus { border-color:var(--amber); }
.detail-textarea {
  width:100%;
  background:var(--bg);
  border:0.5px solid var(--border2);
  border-radius:7px;
  padding:10px 13px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:13px;
  outline:none;
  resize:vertical;
  line-height:1.6;
  min-height:100px;
  transition:border-color var(--transition);
}
.detail-textarea:focus { border-color:var(--amber); }

/* PRIORITY PILL SELECTOR */
.priority-pills { display:flex;gap:6px; }
.ppill {
  flex:1;
  padding:9px 0;
  border-radius:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  cursor:pointer;
  background:var(--bg);
  border:0.5px solid var(--border2);
  color:var(--text2);
  transition:all 0.15s;
  text-align:center;
}
.ppill:hover { background:var(--bg3);border-color:var(--text3);color:var(--text); }
.ppill.active[data-val="high"] { background:var(--red-dim);border-color:var(--red);color:var(--red);font-weight:500; }
.ppill.active[data-val="med"]  { background:var(--amber-dim);border-color:var(--amber);color:var(--amber);font-weight:500; }
.ppill.active[data-val="low"]  { background:var(--blue-dim);border-color:var(--blue);color:var(--blue);font-weight:500; }

.detail-meta {
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text3);
  margin-top:18px;
  padding-top:14px;
  border-top:0.5px solid var(--border);
}
.detail-actions {
  display:flex;
  gap:8px;
  margin-top:18px;
}
.btn-save {
  flex:1;
  background:var(--amber-dim);
  border:0.5px solid var(--amber-border);
  color:var(--amber);
  border-radius:7px;
  padding:10px 0;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background 0.15s,border-color 0.15s;
  letter-spacing:0.04em;
}
.btn-save:hover { background:rgba(212,144,58,0.25);border-color:var(--amber); }
.btn-danger {
  background:var(--red-dim);
  border:0.5px solid var(--red-border);
  color:var(--red);
  border-radius:7px;
  padding:10px 18px;
  font-family:var(--font-mono);
  font-size:12px;
  cursor:pointer;
  transition:background 0.15s;
  letter-spacing:0.04em;
}
.btn-danger:hover { background:rgba(196,106,90,0.25); }

/* ─── ACTIVITY LOG ───────────────────────────────────── */
/* IMPROVEMENT #19: ACTIVITY LOG */
.activity-log {
  background:var(--bg2);
  border:0.5px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:44px;
  max-height:240px;
  overflow-y:auto;
}
.activity-empty { font-family:var(--font-mono);font-size:12px;color:var(--text3);text-align:center;padding:12px 0; }
.activity-item {
  display:flex;align-items:flex-start;gap:10px;
  padding:7px 0;
  border-bottom:0.5px solid var(--border);
  font-size:12px;
}
.activity-item:last-child { border-bottom:none; }
.activity-icon { font-size:14px;line-height:1;flex-shrink:0;margin-top:1px; }
.activity-text { color:var(--text2);flex:1; }
.activity-text strong { color:var(--text); }
.activity-time { font-family:var(--font-mono);font-size:10px;color:var(--text3);white-space:nowrap; }

/* ─── GUIDE SECTIONS ─────────────────────────────────── */
.section-divider { display:flex;align-items:center;gap:14px;margin:52px 0 28px; }
.sdline { flex:1;height:.5px;background:var(--border); }
.sdlabel { font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:4px 12px;border-radius:99px;white-space:nowrap; }
.sdl-unity  { background:var(--blue-dim);color:var(--blue);border:.5px solid var(--blue-border); }
.sdl-unreal { background:var(--red-dim);color:var(--red);border:.5px solid var(--red-border); }
.sdl-arch   { background:var(--purple-dim);color:var(--purple);border:.5px solid rgba(155,132,196,0.25); }

.guide-intro { background:var(--amber-dim);border:.5px solid var(--amber-border);border-radius:var(--radius);padding:16px 18px;font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:20px; }
.guide-intro strong { color:var(--amber); }

.rule-block { margin-bottom:14px;background:var(--bg2);border:.5px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color 0.2s; }
.rule-block:hover { border-color:var(--border2); }
.rule-header { padding:12px 16px;border-bottom:.5px solid var(--border);display:flex;align-items:center;gap:10px; }
.rule-num { font-family:var(--font-mono);font-size:10px;background:var(--amber-dim);color:var(--amber);border:.5px solid var(--amber-border);border-radius:99px;padding:2px 9px;letter-spacing:.08em;white-space:nowrap; }
.rule-title { font-size:13px;font-weight:500;color:var(--text); }
.rule-body { padding:14px 16px;font-size:13px;color:var(--text2);line-height:1.75; }
.rule-body p { margin-bottom:10px; }
.rule-body p:last-child { margin-bottom:0; }
.rule-body strong { color:var(--text);font-weight:500; }
.rule-body em { font-style:italic; }
.rule-body code { font-family:var(--font-mono);font-size:11px;background:var(--bg3);border:.5px solid var(--border2);border-radius:4px;padding:1px 6px;color:var(--amber); }

.eg-row { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px; }
.eg { padding:10px 12px;border-radius:6px;font-size:12px;line-height:1.6;color:var(--text2); }
.eg-bad  { background:var(--red-dim);border:.5px solid var(--red-border); }
.eg-bad::before  { content:'✕  Bad  ';color:var(--red);font-weight:600;font-family:var(--font-mono);font-size:10px;display:block;margin-bottom:4px;letter-spacing:.06em; }
.eg-good { background:var(--green-dim);border:.5px solid var(--green-border); }
.eg-good::before { content:'✓  Good  ';color:var(--green);font-weight:600;font-family:var(--font-mono);font-size:10px;display:block;margin-bottom:4px;letter-spacing:.06em; }

.trap-list { display:flex;flex-direction:column;gap:6px;margin-top:10px; }
.trap { padding:11px 13px;border-radius:6px;font-size:12px;line-height:1.65;background:var(--bg3);border-left:2px solid var(--red);color:var(--text2); }
.trap strong { color:var(--text);font-weight:500;display:block;margin-bottom:3px; }
.trap.ok { border-left-color:var(--green); }
.trap.ok strong { color:var(--green); }

.concept-table { display:flex;flex-direction:column;gap:6px;margin-top:12px; }
.concept-row { background:var(--bg3);border-radius:6px;overflow:hidden; }
.concept-names { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:9px 12px; }
.cn-unity { font-family:var(--font-mono);color:var(--blue);font-size:11px; }
.cn-arrow { color:var(--text3); }
.cn-ue    { font-family:var(--font-mono);color:var(--red);font-size:11px; }
.concept-desc { font-size:12px;color:var(--text2);padding:0 12px 10px;line-height:1.6;border-top:.5px solid var(--border); }
.concept-desc code { font-family:var(--font-mono);font-size:11px;background:var(--bg2);border:.5px solid var(--border2);border-radius:4px;padding:1px 5px;color:var(--amber); }

.folder-tree { background:var(--bg3);border-radius:6px;padding:14px 16px;font-family:var(--font-mono);font-size:12px;line-height:2;color:var(--text2);margin-top:12px; }
.fi { color:var(--text3); }
.i1 { padding-left:18px; }
.i2 { padding-left:36px; }
.ha { color:var(--amber); }
.hd { color:var(--text3); }

/* ─── UTILITIES ──────────────────────────────────────── */
.hidden { display:none !important; }

/* IMPROVEMENT #20: PRINT STYLES */
@media print {
  body { background:#fff !important;color:#000 !important; }
  .toolbar,.progress-wrap,.toolbar-right,.search-row,#toast-container,.overlay,
  .task-delete,.task-edit,.activity-log,.offline-banner { display:none !important; }
  .task { border:1px solid #ccc !important;break-inside:avoid;background:#fff !important;box-shadow:none !important; }
  .task-title { color:#000 !important;font-weight:bold; }
  .task-desc { color:#444 !important; }
  .page { padding:20px; }
  body::before { display:none; }
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:640px) {
  .toolbar { flex-direction:column;align-items:stretch; }
  .toolbar-left,.toolbar-right { flex-wrap:wrap;justify-content:flex-start; }
  .stats-strip { gap:0;padding:10px 12px; }
  .stat-item { padding:0 10px; }
  .eg-row { grid-template-columns:1fr; }
  .concept-names { font-size:10px; }
  .search-row { flex-direction:column; }
}

/* IMPROVEMENT #21: SCROLLBAR STYLING */
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--bg3);border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* IMPROVEMENT #22: FOCUS VISIBLE FOR ACCESSIBILITY */
:focus-visible { outline:2px solid var(--amber);outline-offset:2px; }

/* IMPROVEMENT #23: LOADING SKELETON */
.skeleton {
  background:linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:6px;
  height:52px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* IMPROVEMENT #24: TASK ENTRY ANIMATION */
@keyframes taskIn {
  from { opacity:0;transform:translateY(-4px); }
  to   { opacity:1;transform:translateY(0); }
}
.task.new-task { animation:taskIn 0.25s ease; }