:root{
  --paper:#EFE7D4;
  --paper-dark:#E1D5B8;
  --card-line:#CDBE97;
  --oak:#6B4A36;
  --oak-dark:#4A3324;
  --forest:#38493A;
  --stamp:#9C3B2E;
  --brass:#B8934A;
  --ink:#2B241D;
  --ink-soft:#6b5f4f;
  --shadow: 0 2px 0 rgba(43,36,29,0.08), 0 8px 18px rgba(43,36,29,0.15);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background: var(--paper-dark);
  background-image: radial-gradient(circle at 1px 1px, rgba(107,74,54,0.08) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  padding-bottom: 60px;
}
.mono{ font-family:'Space Mono', monospace; }
.display{ font-family:'Fraunces', serif; }

.plate{
  background: var(--oak);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
  border-bottom: 6px solid var(--oak-dark);
  padding: 34px 28px 26px;
  text-align:center;
  position:relative;
}
.plate::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:6px;
  background: repeating-linear-gradient(90deg, var(--brass) 0 24px, transparent 24px 48px);
  opacity:0.5;
}
.plate h1{ color:#F3E9D2; font-size: clamp(28px, 4vw, 42px); font-weight:600; letter-spacing: 0.5px; margin:0; }
.plate .sub{ color: #D8C8A4; font-family:'Space Mono', monospace; font-size:12px; letter-spacing: 3px; text-transform: uppercase; margin-top:8px; }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top: -26px; position:relative; z-index:2; }
.stat-card{ background: var(--paper); border: 1px solid var(--card-line); box-shadow: var(--shadow); border-radius: 3px; padding: 14px 16px; }
.stat-num{ font-family:'Space Mono', monospace; font-size:26px; font-weight:700; color:var(--forest); }
.stat-label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; }

.controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin: 28px 0 18px; }
.search-box{ flex:1; min-width:220px; background: var(--paper); border:1px solid var(--card-line); border-radius:3px; padding:10px 14px; font-family:'Inter', sans-serif; font-size:14px; color:var(--ink); }
.search-box:focus{ outline:2px solid var(--forest); outline-offset:1px; }
select.sortsel{ background: var(--paper); border:1px solid var(--card-line); border-radius:3px; padding:10px 12px; font-family:'Inter', sans-serif; font-size:13px; color:var(--ink); }
.btn-add{ background: var(--forest); color:#F3EFE2; border:none; border-radius:3px; padding:11px 20px; font-family:'Inter', sans-serif; font-weight:600; font-size:14px; cursor:pointer; box-shadow: var(--shadow); }
.btn-add:hover{ background:#2c3a2d; }
.btn-add:focus-visible{ outline:2px solid var(--stamp); outline-offset:2px; }
.btn-secondary{ background:none; border:1px solid var(--card-line); color:var(--ink-soft); border-radius:3px; padding:10px 16px; font-family:'Inter'; font-size:13px; cursor:pointer; white-space:nowrap; }
.btn-secondary:hover{ background: rgba(0,0,0,0.03); }
.btn-primary{ background: var(--forest); color:#F3EFE2; border:none; border-radius:3px; padding:10px 18px; font-family:'Inter'; font-weight:600; font-size:13px; cursor:pointer; }

.drawers{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom: 22px; }
.drawer-tab{ flex-shrink:0; background: var(--oak); color:#EEE2C8; border:none; border-bottom:4px solid var(--oak-dark); border-radius: 3px 3px 0 0; padding: 9px 16px 8px; font-family:'Space Mono', monospace; font-size:12px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; position:relative; transition: transform .12s ease; }
.drawer-tab::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brass); margin-right:8px; }
.drawer-tab.active{ background: var(--paper); color: var(--ink); border-bottom-color: var(--stamp); transform: translateY(-4px); box-shadow: 0 -2px 6px rgba(0,0,0,0.12); }
.drawer-tab.active::before{ background:var(--stamp); }
.drawer-tab .count{ opacity:0.65; margin-left:6px; }
.drawer-tab:focus-visible{ outline:2px solid var(--stamp); outline-offset:2px; }

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.card{
  background: var(--paper); border:1px solid var(--card-line); border-radius: 2px; box-shadow: var(--shadow);
  padding: 18px 18px 16px; position:relative;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, rgba(107,74,54,0.12) 28px);
  background-position: 0 62px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-3px) rotate(-0.3deg); box-shadow: 0 4px 0 rgba(43,36,29,0.08), 0 14px 24px rgba(43,36,29,0.2); }
.card::before, .card::after{ content:""; position:absolute; top:10px; width:11px; height:11px; border-radius:50%; background: var(--paper-dark); box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); }
.card::before{ left:14px; }
.card::after{ right:14px; }

.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-top:6px; }
.card-title{ font-family:'Fraunces', serif; font-size:19px; font-weight:600; line-height:1.25; margin:0; }
.card-instr{ font-family:'Space Mono', monospace; font-size:11px; color:var(--ink-soft); margin-top:4px; letter-spacing:0.5px; }
.tag{ display:inline-block; background: var(--forest); color:#EFE9D8; font-family:'Space Mono', monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:4px 8px; border-radius:2px; margin-top:10px; }
.meta-row{ display:flex; gap:14px; margin-top:12px; font-family:'Space Mono', monospace; font-size:11px; color:var(--ink-soft); flex-wrap:wrap; }

.progress-row{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.ring-wrap{ position:relative; width:56px; height:56px; flex-shrink:0; }
.ring-wrap svg{ transform: rotate(-90deg); }
.ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Space Mono', monospace; font-weight:700; font-size:12px; color:var(--stamp); }
.progress-slider{ flex:1; }
.progress-slider input[type=range]{ width:100%; accent-color: var(--stamp); }
.progress-slider label{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); }

.complete-stamp{ position:absolute; top:56px; right:-6px; font-family:'Space Mono', monospace; font-size:11px; font-weight:700; letter-spacing:2px; color: var(--stamp); border: 2px solid var(--stamp); border-radius:3px; padding: 3px 8px; transform: rotate(8deg); opacity:0.85; mix-blend-mode: multiply; }

.stars{ margin-top:12px; display:flex; gap:3px; }
.star{ cursor:pointer; font-size:16px; color: var(--card-line); user-select:none; }
.star.filled{ color: var(--brass); }

.notes-toggle{ margin-top:12px; font-family:'Space Mono', monospace; font-size:11px; color: var(--forest); background:none; border:none; cursor:pointer; padding:0; text-decoration: underline; }
.notes-box{ width:100%; margin-top:8px; background: rgba(255,255,255,0.35); border: 1px dashed var(--card-line); border-radius:2px; padding:8px 10px; font-family:'Inter', sans-serif; font-size:12.5px; color: var(--ink); resize: vertical; min-height:50px; }

.card-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:10px; border-top:1px dashed var(--card-line); font-family:'Space Mono', monospace; font-size:11px; color:var(--ink-soft); flex-wrap:wrap; gap:6px; }
.card-actions .icon-btn{ background:none; border:none; cursor:pointer; color: var(--ink-soft); font-family:'Space Mono', monospace; font-size:11px; text-decoration: underline; padding:0; margin-left:12px; }
.card-actions .icon-btn.danger:hover{ color: var(--stamp); }
.card-actions .icon-btn.watch{ color: var(--forest); font-weight:700; }

.empty{ grid-column: 1/-1; text-align:center; padding: 60px 20px; background: var(--paper); border: 1px dashed var(--card-line); border-radius:3px; }
.empty h3{ font-family:'Fraunces', serif; font-size:22px; margin-bottom:6px; }
.empty p{ color: var(--ink-soft); font-size:14px; margin-bottom:18px; }

.modal-overlay{ position:fixed; inset:0; background: rgba(43,36,29,0.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal{ background: var(--paper); border-radius:4px; width:100%; max-width:480px; max-height:88vh; overflow-y:auto; padding: 26px 26px 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.modal.modal-wide{ max-width: 680px; }
.modal h2{ font-family:'Fraunces', serif; font-size:22px; margin:0 0 4px; }
.modal .slip-label{ font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field textarea{ width:100%; background: #fff; border:1px solid var(--card-line); border-radius:3px; padding:9px 10px; font-family:'Inter', sans-serif; font-size:14px; color:var(--ink); }
.field textarea{ resize:vertical; min-height:60px; }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.star-picker{ display:flex; gap:4px; }
.star-picker .star{ font-size:22px; }

/* Browse modal */
.breadcrumb{ font-family:'Space Mono', monospace; font-size:12px; color: var(--ink-soft); margin-bottom:12px; word-break:break-all; }
.breadcrumb button{ background:none; border:none; color:var(--forest); text-decoration:underline; cursor:pointer; font-family:'Space Mono', monospace; font-size:12px; padding:0; }
.browse-list{ border:1px solid var(--card-line); border-radius:3px; max-height:320px; overflow-y:auto; background:#fff; }
.browse-item{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--paper-dark); cursor:pointer; font-size:13.5px; }
.browse-item:last-child{ border-bottom:none; }
.browse-item:hover{ background: var(--paper); }
.browse-item .icon{ opacity:0.7; }
.browse-item.file{ cursor:default; color: var(--ink-soft); }
.browse-empty{ padding:20px; text-align:center; color:var(--ink-soft); font-size:13px; }

/* Watch modal */
.watch-modal{ max-width: 820px; }
.watch-video{ width:100%; background:#000; border-radius:3px; max-height:60vh; }
.playlist{ margin-top:14px; max-height:180px; overflow-y:auto; border:1px solid var(--card-line); border-radius:3px; background:#fff; }
.playlist-item{ padding:8px 12px; font-family:'Space Mono', monospace; font-size:12px; cursor:pointer; border-bottom:1px solid var(--paper-dark); }
.playlist-item:last-child{ border-bottom:none; }
.playlist-item:hover{ background: var(--paper); }
.playlist-item.playing{ background: var(--forest); color:#F3EFE2; }

.scan-toast, .toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background: var(--oak); color:#F3E9D2;
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.5px;
  padding:12px 20px; border-radius:3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index:60;
}

@media (max-width: 720px){ .stats{ grid-template-columns: repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){ .card, .drawer-tab{ transition:none; } }