/* resources.css — Redesigned UI
   Horizontal card layout, header bar, detail page, white background. */

/* Icon system — same as before */
.lp-ic{ display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; line-height:1; vertical-align:-0.125em; flex:0 0 auto; }
.lp-ic > svg{ width:1em; height:1em; display:block; stroke:currentColor; fill:none; }
.lp-ic > svg [fill="currentColor"]{ fill:currentColor; }

/* ============================================================
   TOKENS — redeclared from the app's design system
   ============================================================ */
/* Which set of system surfaces this page belongs to, and on a phone which
   colour the OS paints the status bar icons. It has to follow this app's own
   theme switch, not the system's: a static "light dark" means "follow
   the system", which puts the bar and the icons on it on opposite sides and
   makes the clock vanish into the bar. Same shape as app.css. */
:root{ color-scheme: dark; }
html.light-theme, html.light-theme-preload, body.light-theme{ color-scheme: light; }
/* Light mode ka gehra cyan, app.css jaisa — neon cyan safed par 1.54 : 1 tha.
   Ye page saved accent nahi lagata, isliye seedha cyan ka shade. --on-accent
   sirf light me hai; dark `var(--on-accent, #000)` ke fallback se #000 rakhta. */
body.light-theme, html.light-theme-preload body{
  --accent:#057BB9; --accent-rgb:5,123,185;
  --cyan:#057BB9;   --cyan-rgb:5,123,185;
  --on-accent:#fff;
}
:root{
  --bg:#000000;  --text:#F8FAFC;  --text-dim:#94A3B8;  --text-faint:#64748B;
  --card:rgba(255,255,255,.03);   --card-hover:rgba(255,255,255,.05);
  --card-brd:rgba(255,255,255,.24);
  --surface-bg:rgba(255,255,255,.04); --surface-border:rgba(255,255,255,.24);
  --inner-box-bg:rgba(255,255,255,0.04);
  --inner-box-border:rgba(255,255,255,0.26);
  --feed-sep:#28303f;
  --radius:18px;   --pad-page:24px;

  --accent:var(--cyan);   --accent-rgb:var(--cyan-rgb);
  --cyan:#00E5FF;    --cyan-rgb:0,229,255;
  --magenta:#FF3EA0; --magenta-rgb:255,62,160;
  --amber:#FFB224;   --amber-rgb:255,178,36;
  --violet:#9B6BFF;  --lime:#10B981;  --blue:#3B82F6;
  --danger:#FF4D6D;

  /* Content area dark background */
  --content-bg:var(--bg);
  --content-text:var(--text);
  --content-text-dim:var(--text-dim);
  --content-text-faint:var(--text-faint);
  --content-card-bg:var(--card);
  --content-card-border:var(--card-brd);
  --content-card-shadow:none;
  --content-divider:var(--surface-border);

  --topbar-bg:rgba(9,11,17,.82);
  --tabs-bg:rgba(9,11,17,.88);
}

html.light-theme-preload,
html.light-theme,
body.light-theme{
  --bg:#FFFFFF;  --text:#0F172A;  --text-dim:#475569;  --text-faint:#94A3B8;
  --card:rgba(0,0,0,.025);        --card-hover:rgba(0,0,0,.04);
  --card-brd:rgba(0,0,0,.12);
  --surface-bg:rgba(0,0,0,.02);   --surface-border:rgba(0,0,0,.10);
  --inner-box-bg:rgba(0,0,0,0.03);
  --inner-box-border:rgba(0,0,0,0.10);
  --feed-sep:#E2E8F0;
  --glass-bg:rgba(255,255,255,.85);
  --danger:#DC2626;

  --content-bg:#FFFFFF;
  --content-text:#0F172A;
  --content-text-dim:#475569;
  --content-text-faint:#94A3B8;
  --content-card-bg:#FFFFFF;
  --content-card-border:#E2E8F0;
  --content-card-shadow:0 2px 12px rgba(0,0,0,.06);
  --content-divider:#E2E8F0;

  --topbar-bg:rgba(255,255,255,.88);
  --tabs-bg:rgba(255,255,255,.92);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing:border-box; }
h1,h2,h3,h4,h5,h6 { font-family:'Space Grotesk', sans-serif; font-weight:700; margin:0 0 10px 0; }
a { color:var(--accent); text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ============================================================
   HEADER BAR — app-like top bar
   ============================================================ */
.res-header{
  display:flex; align-items:center; gap:14px;
  padding:10px var(--pad-page);
  background:var(--bg);
  border-bottom:1px solid var(--surface-border);
  position:sticky; top:0; z-index:200;
}
.res-header-logo{
  width:32px; height:32px; border-radius:10px; object-fit:cover;
}
.res-header-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:18px; font-weight:700; letter-spacing:0.5px;
  color:var(--text);
  width:200px; flex:0 0 200px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* margin-left:auto keeps it at the right edge on the phone, where .top-tabs
   is display:none and there is nothing else to take the slack. */
.res-header-search{
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text);
  width:40px; height:40px; min-width:40px; border-radius:12px;
  margin-left:auto; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.res-header-search:hover{ background:var(--card-hover); }

.res-header-back{
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; width:32px; height:32px; margin-right:-6px;
  color:var(--text); font-size:24px; cursor:pointer;
}

/* ============================================================
   APP CONTAINER
   ============================================================ */
.app-container {
  display:flex; flex-direction:column; min-height:100vh;
}

/* Navigation tabs (now in header on desktop) */
.top-tabs {
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex:1;
}
.nav-btn {
  background:none; border:none; color:var(--text-dim); font-size:15px; font-weight:600;
  padding:10px 16px; border-radius:var(--radius);
  display:flex; align-items:center; gap:8px; transition:0.2s ease;
  text-decoration:none;
}
.nav-btn:hover { color:var(--text); background:var(--card-hover); }
.nav-btn.active { color:var(--accent); background:var(--inner-box-bg); }
.bottom-nav { display:none; }

/* Page content */
.page-content {
  padding:0;
  max-width:800px; width:100%; margin:0 auto; flex:1;
  display:none;
}
.page-content.active { display:block; }

.page-content > h1 {
  padding:20px var(--pad-page) 10px;
  font-size:22px; color:var(--text);
}

/* ============================================================
   CONTENT AREA — white background
   ============================================================ */
.feed-list,
.library-grid,
.gifts-list {
  background:var(--content-bg);
  border-radius:16px;
  border:1px solid var(--content-divider);
  margin-top:16px; margin-bottom:40px;
  min-height:300px;
  overflow:hidden;
}

/* ============================================================
   HORIZONTAL CARD — inspired by reference images
   ============================================================ */
.h-card{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px;
  background:var(--content-card-bg);
  border-bottom:1px solid var(--content-divider);
  cursor:pointer;
  transition:box-shadow 0.15s ease;
  position:relative;
}
.h-card:hover{ box-shadow: inset 0 0 0 1px var(--accent); z-index:1; border-radius:16px; border-bottom-color:transparent; }
.h-card:first-child{ border-radius:16px 16px 0 0; }
.h-card:last-child{ border-bottom:none; border-radius:0 0 16px 16px; }
.h-card:only-child{ border-radius:16px; }

/* Thumbnail — left side */
.h-card-thumb{
  flex:0 0 96px; width:96px; height:96px;
  border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.h-card-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Letter fallback when no image */
.h-card-thumb-letter{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:32px; font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:1px;
}

/* Gradient palette for letter fallbacks. Not scoped to .h-card-thumb-letter:
   the detail page's hero uses the same eight classes on .detail-image-fallback,
   and while these rules named only the card they left that hero a black box
   with a letter floating in it. */
.grad-0{ background:linear-gradient(135deg, #667eea, #764ba2); }
.grad-1{ background:linear-gradient(135deg, #00b4db, #0083b0); }
.grad-2{ background:linear-gradient(135deg, #f857a6, #ff5858); }
.grad-3{ background:linear-gradient(135deg, #11998e, #38ef7d); }
.grad-4{ background:linear-gradient(135deg, #fc5c7d, #6a82fb); }
.grad-5{ background:linear-gradient(135deg, #f093fb, #f5576c); }
.grad-6{ background:linear-gradient(135deg, #4facfe, #00f2fe); }
.grad-7{ background:linear-gradient(135deg, #43e97b, #38f9d7); }

/* Card body — right side */
.h-card-body{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.h-card-tag{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px;
  color:#d63384;
}
.h-card-tag.type-news{ color:#0d6efd; }
.h-card-tag.type-tip{ color:#198754; }
.h-card-tag.type-link{ color:#6f42c1; }
.h-card-tag.type-audio{ color:#e85d04; }
.h-card-tag.type-pdf{ color:#d63384; }
.h-card-tag.type-gift{ color:#ffc107; }
.h-card-tag.type-guide{ color:#0ea5e9; }

.h-card-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px; font-weight:700; line-height:1.3;
  color:var(--content-text);
  margin:0;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.h-card-snippet{
  font-size:13px; line-height:1.45; color:var(--content-text-dim);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  margin:0;
}
.h-card-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:4px;
}
.h-card-date{
  font-size:11px; color:var(--content-text-faint); font-weight:500;
}
.h-card-link{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600;
  color:var(--accent); background:none; border:none;
  padding:4px 10px; border-radius:20px;
  background:rgba(0,229,255,.08);
  text-decoration:none;
}
.h-card-link .lp-ic{ font-size:12px; }
.h-card-pinned{
  position:absolute; top:8px; right:12px;
  font-size:10px; font-weight:700; color:var(--amber);
  text-transform:uppercase; letter-spacing:0.5px;
}

/* ============================================================
   CATEGORY FILTERS
   ============================================================ */
.cat-filters {
  display:flex; gap:8px; overflow-x:auto; padding:14px var(--pad-page);
  scrollbar-width:none; background:var(--bg);
}
.cat-filters::-webkit-scrollbar { display:none; }
.cat-btn {
  padding:7px 12px; background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  border-radius:10px; font-size:13px; color:var(--text-dim); white-space:nowrap;
  font-weight:500;
}
.cat-btn.active { background:var(--accent); color:var(--on-accent, #000); border-color:var(--accent); font-weight:600; }

/* ============================================================
   DETAIL VIEW — Dainik Bhaskar style news article
   ============================================================ */
.detail-view{
  display:none; flex-direction:column;
  max-width:800px; width:100%; margin:24px auto 40px;
  background:var(--content-bg);
  min-height:calc(100vh - 70px);
  border-radius:16px; border:1px solid var(--content-divider);
  overflow:hidden;
}
.detail-view.active{ display:flex; }

.detail-image{
  width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; display:block;
}
.detail-image-fallback{
  width:100%; aspect-ratio:16 / 9;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:64px; font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:2px;
}

.detail-content{
  padding:24px 20px 40px;
}
.detail-tag-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:14px;
}
.detail-tag{
  display:inline-block;
  padding:4px 12px; border-radius:20px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; color:#fff;
  background:#64748B;   /* a type nobody styled still reads as a pill */
}
.detail-tag.type-news{ background:#0d6efd; }
.detail-tag.type-tip{ background:#198754; }
.detail-tag.type-link{ background:#6f42c1; }
.detail-tag.type-audio{ background:#e85d04; }
.detail-tag.type-pdf{ background:#d63384; }
.detail-tag.type-gift{ background:#ffc107; color:#000; }
.detail-tag.type-guide{ background:#0ea5e9; }

.detail-date{
  font-size:12px; color:var(--content-text-faint); font-weight:500;
}
.detail-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:26px; font-weight:700; line-height:1.25;
  color:var(--content-text);
  margin:0 0 18px;
}
.detail-body{
  font-size:16.5px; line-height:1.75; color:var(--content-text-dim);
  white-space:normal; word-break:break-word;
  margin-bottom:24px;
}
/* Markdown Elements */
.detail-body p { margin-top:0; margin-bottom:1em; white-space:pre-wrap; }
.detail-body h1, .detail-body h2, .detail-body h3 { 
  font-family:'Space Grotesk', sans-serif; color:var(--content-text); margin:1.5em 0 0.5em; 
}
.detail-body h2 { font-size:1.3em; }
.detail-body h3 { font-size:1.15em; }
.detail-body ul, .detail-body ol { margin:0 0 1em 0; padding-left:1.5em; }
.detail-body li { margin-bottom:0.5em; }
.detail-body table { width:100%; border-collapse:collapse; margin-bottom:1.5em; }
.detail-body th, .detail-body td { 
  border:1px solid var(--content-divider); padding:8px 12px; text-align:left; 
}
.detail-body th { background:var(--inner-box-bg); font-weight:700; color:var(--content-text); }
.detail-body code { 
  background:var(--inner-box-bg); padding:2px 6px; border-radius:4px; font-size:0.9em; 
}
.detail-audio{
  width:100%; margin-bottom:24px; display:block;
}
.detail-link-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:28px auto 0; padding:12px 24px; border-radius:var(--radius);
  background:var(--accent); color:var(--on-accent, #000); max-width:max-content;
  font-size:14px; font-weight:700; text-decoration:none;
  transition:0.2s ease;
}
.detail-link-btn:hover{ opacity:0.85; }
.detail-link-btn .lp-ic{ font-size:16px; }

/* ============================================================
   LIBRARY GRID — reuse horizontal cards
   ============================================================ */
.library-grid {
  background:var(--content-bg);
  border-radius:16px 16px 0 0;
  min-height:200px;
}

/* ============================================================
   EMPTY / ERROR STATES
   ============================================================ */
.empty-state {
  text-align:center; padding:60px 20px;
  color:var(--content-text-faint);
  background:var(--content-bg);
  border-radius:16px;
}
.retry-btn{
  display:block; margin:16px auto 0; padding:12px 24px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  border-radius:var(--radius); color:var(--text); font-weight:600; font-size:14px;
  min-height:44px;
}

/* ============================================================
   ACCESS GATE
   ============================================================ */
.gate-msg{
  max-width:520px; margin:0 auto; padding:60px 24px; text-align:center;
  color:var(--text); font-family:'Inter', sans-serif;
}
.gate-msg h1{ font-family:'Space Grotesk', sans-serif; margin-bottom:12px; }
.gate-msg p{ color:var(--text-dim); line-height:1.6; margin-bottom:24px; }
.gate-msg a{ color:var(--accent); font-weight:600; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) { }

@media (max-width: 640px) {
  :root { --pad-page: 14px; }

  /* Header adjustments */
  .res-header{ padding:12px var(--pad-page); }
  .res-header-logo{ width:32px; height:32px; }
  .res-header-title{ font-size:16px; flex:1; }
  .res-header-home span{ display:none; }
  .res-header-home{ padding:8px 10px; }

  /* Switch nav */
  .top-tabs { display:none; }
  .bottom-nav {
    display:flex; position:fixed; bottom:0; left:0; right:0;
    background:var(--bg); border-top:1px solid var(--surface-border);
    padding:8px 10px; padding-bottom:env(safe-area-inset-bottom, 8px);
    justify-content:space-around; z-index:100;
  }
  .nav-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:4px 0; gap:3px; font-size:11px; font-weight:600;
    color:var(--text-faint); border:none; background:none !important;
    min-width:60px; min-height:44px;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-btn .bt-icon { font-size:19px; line-height:1; }
  .nav-btn.active { color:var(--accent); font-weight:700; background:none !important; }
  .nav-btn.active .bt-icon { transform:translateY(-1px); }
  .nav-btn.active .bt-label { text-decoration:underline; text-underline-offset:3px; }

  /* FAB styling for Home Button in Nav */
  .fab-container {
    display:flex; align-items:center; justify-content:center;
    flex:0 0 60px; position:relative;
  }
  .fab-btn {
    position:absolute; top:-24px;
    width:56px; height:56px; border-radius:50%;
    background:var(--accent); color:var(--on-accent, #000);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:transform 0.2s;
  }
  .fab-btn:active { transform:scale(0.92); }
  .fab-btn .lp-ic { font-size:24px; line-height:1; }

  .app-container { padding-bottom:70px; }
  .page-content { padding:0; max-width:100%; }

  /* Cards — edge to edge on phone */
  .feed-list,
  .library-grid,
  .gifts-list {
    border-radius:0; margin:0; border:none;
  }

  .detail-image,
  .detail-image-fallback {
    aspect-ratio:16 / 12;
  }

  .h-card{ padding:14px var(--pad-page); }
  .h-card:first-child{ border-radius:0; }
  .h-card:last-child{ border-radius:0; }
  .h-card:only-child{ border-radius:0; }

  .h-card-thumb{ flex:0 0 80px; width:80px; height:80px; border-radius:12px; }
  .h-card-thumb-letter{ font-size:26px; }
  .h-card-title{ font-size:15px; }
  .h-card-snippet{ font-size:12px; }

  /* Category filters */
  .cat-filters { padding:10px var(--pad-page); }

  /* Detail view phone */
  .detail-view{ border-radius:0; margin:0; border:none; min-height:100vh; overflow:visible; }
  .detail-content{ padding:18px var(--pad-page) 30px; }
  .detail-title{ font-size:22px; }
  .detail-body{ font-size:15.5px; line-height:1.7; }
  .detail-image-fallback{ font-size:48px; }

  /* Touch targets */
  .cat-btn{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .h-card{
    min-height:44px;
  }
  .detail-back{
    min-height:44px;
  }
  .desktop-fab{ display:none !important; }
}

/* ============================================================
   DESKTOP FAB
   ============================================================ */
.desktop-fab {
  position:fixed; bottom:24px; right:24px;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:var(--on-accent, #000);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:transform 0.2s; z-index:900;
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.desktop-fab:hover { transform:scale(1.05); }
.desktop-fab .lp-ic { font-size:24px; }

/* ============================================================
   TRANSITION LOADER
   ============================================================ */
#transitionLoader {
  position:fixed; inset:0; background:var(--bg); z-index:9999999;
  display:none; flex-direction:column; align-items:center; justify-content:center;
}
#transitionLoader.active { display:flex; }

.round-spinner {
  width:36px; height:36px;
  border:3px solid var(--surface-border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spinLoader 0.6s linear infinite;
}

@keyframes spinLoader {
  to { transform:rotate(360deg); }
}

/* ============================================================
   BOOT SKELETON
   ============================================================
   #globalLoader wears this. index.html paints the same shapes the instant
   the Resources button is pressed, so the wait spans both documents with
   nothing changing on screen at the hand-off — the skeleton simply gives
   way to the real cards once Firestore answers. */
.res-skeleton{
  position:fixed; inset:0; z-index:9999999;
  background:var(--bg); overflow:hidden;
  display:flex; flex-direction:column;
}
.res-skel-header{
  display:flex; align-items:center; gap:14px;
  padding:10px var(--pad-page); height:53px;
  border-bottom:1px solid var(--surface-border);
  flex:0 0 auto;
}
.res-skel-rows{
  max-width:800px; width:100%; margin:0 auto; padding-top:16px;
}
.res-skel-card{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px;
  border-bottom:1px solid var(--content-divider);
}
.res-skel-thumb{ flex:0 0 96px; width:96px; height:96px; border-radius:14px; }
.res-skel-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; padding-top:2px; }
.res-skel-box{ border-radius:6px; background-color:rgba(255,255,255,.06); }
html.light-theme .res-skel-box,
body.light-theme .res-skel-box{ background-color:rgba(0,0,0,.06); }

/* The sweep is sized as a percentage of each box, not in pixels: a pixel
   width wide enough to cross a title bar leaves an 80px thumbnail showing
   nothing but the tail of the gradient. Same numbers as index.html, which
   paints this shape before the navigation. */
.res-skeleton .shimmer{
  background-image:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.10) 45%,
                   rgba(255,255,255,.10) 55%, transparent 75%);
  background-size:250% 100%;
  background-repeat:no-repeat;
  animation:resSkelSweep 1.4s linear infinite;
}
html.light-theme .res-skeleton .shimmer,
body.light-theme .res-skeleton .shimmer{
  background-image:linear-gradient(100deg, transparent 25%, rgba(0,0,0,.07) 45%,
                   rgba(0,0,0,.07) 55%, transparent 75%);
}
@keyframes resSkelSweep{
  0%   { background-position:-50% 0; }
  100% { background-position:150% 0; }
}
@media (prefers-reduced-motion: reduce){
  .res-skeleton .shimmer{ animation:none; }
}

@media (max-width: 640px){
  .res-skel-rows{ padding-top:0; }
  .res-skel-card{ padding:14px var(--pad-page); }
  .res-skel-thumb{ flex:0 0 80px; width:80px; height:80px; border-radius:12px; }
  .res-skel-header{ padding:12px var(--pad-page); height:57px; }
}

/* =========================================================
   DESKTOP DRAWER (Phase 6)
   ========================================================= */
.desktop-drawer { display: none; }
.desktop-content { width: 100%; }

@media (min-width: 1024px) {
  .top-tabs { display: none !important; }
  .bottom-nav { display: none !important; }
  
  /* Reset header: spans edge-to-edge from drawer line, straight corners, 10px bottom margin */
  .soc-header {
    border-radius: 0 !important;
    margin: 0 0 10px 0 !important;
    padding: 12px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--surface-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background: var(--bg) !important;
  }
  .res-header {
    border-radius: 0 !important;
    margin: 0 0 10px 0 !important;
    padding: 12px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--surface-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background: var(--bg) !important;
  }

  .desktop-layout {
    display: grid;
    grid-template-columns: min(33%, 396px) 1fr;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  .desktop-drawer {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--surface-border) !important;
    background: var(--bg);
  }
  .drawer-header {
    padding: 24px 32px 16px 32px;
  }
  .drawer-header h1 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    font-family: "Space Grotesk", sans-serif;
  }
  .drawer-header p {
    margin: 0;
    font-size: 13px;
    color: var(--text-dim);
  }
  .drawer-divider {
    height: 1px;
    background: var(--card-brd);
    margin: 0 32px 16px 32px;
  }
  .drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    gap: 8px;
  }
  .drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    min-height: 44px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .drawer-item i, .drawer-item svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
  .drawer-item:hover {
    background: var(--card-hover);
    color: var(--text);
  }
  .drawer-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .drawer-item.is-active {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  
  .drawer-footer {
    margin-top: auto;
    padding: 16px 32px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .drawer-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-faint);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.15s ease;
  }
  .drawer-footer a:hover {
    color: var(--text);
  }

  .desktop-content {
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  .desktop-content-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #list-view {
    width: 100% !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .page-content {
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 10px 24px 40px 24px !important;
    box-sizing: border-box !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-item, .drawer-footer a {
    transition: none;
  }
}


/* --- Ripple & Press Feedback --- */
* { -webkit-tap-highlight-color: transparent; }

button, a, .fab-btn, .desktop-fab, .bottom-tab, .nav-btn, .res-header-logo, .res-header-back {
  touch-action: manipulation;
}

.lp-press {
  position: relative;
  overflow: hidden;
  transition: transform 90ms ease-out;
}
.lp-press[style*="position:absolute"],
.lp-press[style*="position: absolute"] {
  position: absolute;
}
.lp-press:active {
  transform: scale(0.97);
}
.card.lp-press:active,
.challenge-card.lp-press:active {
  transform: scale(0.988);
}

.lp-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: 0.18;
  transform: scale(0);
  animation: lpRipple 380ms cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
}
@keyframes lpRipple { to { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lp-ripple { display: none; }
}
/* ------------------------------- */