:root{
  --bg:#05060a; --surface:#0e1220; --surface2:#141a2c;
  --ink:#eef3ff; --muted:#9fb0d0; --line:rgba(150,180,255,.14);
  --cyan:#5ad0ff; --violet:#9b7bff; --grad:linear-gradient(135deg,#3b6dff,#8f5bff);
  --easy:#1bbd7e; --med:#e0a53b; --adv:#e0603b;
  --maxw:820px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(120% 90% at 50% 0%, #0b1022 0%, #070912 55%, #04050a 100%) fixed;
  color:var(--ink); min-height:100vh;
  font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none;}
img{max-width:100%;display:block;}

#app{max-width:var(--maxw);margin:0 auto;padding:16px 16px 40px;}

/* hero */
.hero{text-align:center;padding:8px 0 4px;}
.hero-banner{width:100%;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 10px 40px rgba(60,80,200,.18);}
.hero-sub{color:var(--muted);font-size:15px;margin:14px auto 4px;max-width:520px;}

/* search */
.searchbar{display:flex;align-items:center;gap:10px;margin:18px 0 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:2px 14px;}
.s-icon{opacity:.7;}
#search{flex:1;background:transparent;border:none;outline:none;color:var(--ink);
  font-family:inherit;font-size:16px;padding:13px 0;}
#search::placeholder{color:var(--muted);opacity:.8;}

/* grid + cards */
.grid{display:grid;gap:12px;}
.card{position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;color:var(--ink);
  transition:transform .1s ease,border-color .15s,box-shadow .15s;}
.card:hover{transform:translateY(-2px);border-color:rgba(150,180,255,.32);
  box-shadow:0 8px 26px rgba(60,80,200,.18);}
.card:active{transform:scale(.99);}
.card-link{display:flex;align-items:center;gap:14px;padding:16px;padding-right:48px;color:var(--ink);}
.card-emoji{font-size:30px;flex:none;width:52px;height:52px;display:flex;align-items:center;
  justify-content:center;background:var(--surface2);border-radius:13px;}
.card-body{flex:1;min-width:0;}
.card-title{font-size:17px;font-weight:700;line-height:1.25;}
.card-summary{color:var(--muted);font-size:14px;margin-top:3px;}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;align-items:center;}
.card-arrow{color:var(--muted);font-size:20px;flex:none;}
.empty{color:var(--muted);text-align:center;padding:40px 10px;}

/* fav heart on cards */
.fav-btn{position:absolute;top:12px;right:12px;background:rgba(20,26,44,.6);border:1px solid var(--line);
  width:34px;height:34px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .1s,background .15s;}
.fav-btn:hover{background:rgba(40,50,80,.8);}
.fav-btn:active{transform:scale(.85);}
.fav-btn.on{border-color:rgba(255,120,150,.5);}

/* category chip tint */
.chip.cat{color:#cfe0ff;background:rgba(80,110,200,.18);border-color:rgba(140,170,255,.25);}

/* filter chips */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px;}
.filter-chip{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px 13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .12s;}
.filter-chip:hover{border-color:rgba(150,180,255,.35);color:var(--ink);}
.filter-chip.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(90,110,255,.32);}
.fc-count{font-size:11px;opacity:.75;background:rgba(0,0,0,.18);border-radius:10px;padding:1px 7px;}
.filter-chip.active .fc-count{background:rgba(255,255,255,.2);}

/* detail action row */
.action-row{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px;}
.act{font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--surface2);
  border:1px solid var(--line);border-radius:12px;padding:10px 15px;cursor:pointer;transition:transform .08s,background .15s;}
.act:hover{background:rgba(40,50,80,.8);}
.act:active{transform:scale(.95);}
.act.on{border-color:rgba(255,120,150,.5);background:rgba(120,40,70,.28);}

/* mini related grid */
.grid.mini .card-summary{display:none;}
.grid.mini .card-link{padding:12px;padding-right:44px;}
.grid.mini .card-emoji{width:42px;height:42px;font-size:24px;}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:rgba(20,26,44,.95);border:1px solid var(--line);border-radius:12px;padding:10px 16px;
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* badges / chips */
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em;color:#04121a;}
.d-easy{background:var(--easy);} .d-med{background:var(--med);} .d-adv{background:var(--adv);color:#fff;}
.chip{font-size:11.5px;color:var(--muted);background:var(--surface2);
  border:1px solid var(--line);padding:3px 9px;border-radius:20px;}

/* detail */
.detail{padding-top:6px;}
.back{display:inline-block;color:var(--muted);font-size:14px;font-weight:600;margin:4px 0 16px;}
.back:hover{color:var(--cyan);}
.back.bottom{margin-top:28px;}
.detail-head{display:flex;gap:14px;align-items:center;margin-bottom:16px;}
.detail-emoji{font-size:34px;width:60px;height:60px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--surface2);border-radius:15px;}
.detail-head h1{font-size:23px;line-height:1.2;}
.detail-hero{width:100%;border-radius:16px;border:1px solid var(--line);margin:8px 0 16px;
  box-shadow:0 10px 34px rgba(60,80,200,.16);}
.lead{font-size:16px;color:#cfe2ff;margin-bottom:18px;}

.block{margin:22px 0;}
.block h2{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  margin-bottom:12px;font-weight:700;}
.block p{margin-bottom:10px;color:#dbe6ff;}

/* callout */
.callout{border-radius:14px;padding:14px 16px;margin:18px 0;border:1px solid;}
.callout.warn{background:rgba(224,120,60,.10);border-color:rgba(255,160,90,.35);}
.callout-title{font-weight:700;margin-bottom:8px;color:#ffcaa0;}
.callout ul{margin-left:18px;} .callout li{margin-bottom:6px;color:#f0dccb;}

/* checklist */
.checklist{list-style:none;display:grid;gap:8px;}
.checklist li{position:relative;padding-left:30px;color:#dbe6ff;}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;
  background:var(--grad);color:#fff;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;}

/* steps */
.steps{list-style:none;counter-reset:step;display:grid;gap:14px;}
.step{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:16px 16px 16px 58px;}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:14px;top:16px;
  width:30px;height:30px;background:var(--grad);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  box-shadow:0 3px 12px rgba(90,110,255,.4);}
.step-head{font-weight:700;font-size:16px;margin-bottom:5px;}
.step-img{margin-top:12px;border-radius:12px;border:1px solid var(--line);}

/* links / buttons */
.linkrow{display:flex;flex-wrap:wrap;gap:10px;}
.btn{display:inline-block;font-weight:700;font-size:15px;padding:12px 20px;border-radius:14px;
  border:1px solid var(--line);color:var(--ink);background:var(--surface2);}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 6px 22px rgba(90,110,255,.35);}
.btn:active{transform:scale(.96);}

.sources ul{margin-left:18px;} .sources li{margin-bottom:5px;font-size:14px;color:var(--muted);}

/* footer */
.site-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:13px;}
.foot-links{margin-top:6px;}

@media(min-width:640px){
  .grid{grid-template-columns:1fr;}
  .detail-head h1{font-size:26px;}
}

/* print-friendly guides */
@media print{
  body{background:#fff;color:#111;}
  .no-print{display:none!important;}
  .wrap,#app{max-width:100%;}
  .detail-hero,.step-img{max-width:420px;border:1px solid #ccc;}
  .card,.step,.callout,.block{break-inside:avoid;}
  .step{background:#fff;border:1px solid #ccc;}
  .step::before{background:#333!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .callout.warn{background:#fff7ee;border-color:#e0a53b;color:#5a3d0a;}
  .checklist li::before{background:#333!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  a{color:#111;text-decoration:none;}
  h1,h2,.step-head,.card-title{color:#111;}
  .lead,.card-summary,.block p,.chip{color:#333;}
}