*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  min-height:100dvh;
  padding-bottom:76px; /* bottom nav clearance */
}
@media(min-width:900px){ body{padding-bottom:0} }

img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit;background:transparent;border:none;outline:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.mono{font-family:var(--font-mono)}

:focus-visible{outline:2px solid var(--accent-violet);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

.container{max-width:1120px;margin-inline:auto;padding-inline:var(--space-5)}
@media(min-width:900px){ .container{padding-inline:var(--space-8)} }

.app-shell{max-width:520px;margin-inline:auto}
@media(min-width:900px){
  .app-shell{max-width:1120px;display:grid;grid-template-columns:232px 1fr;gap:var(--space-7);align-items:start}
}

/* ---------- Top bar (mobile) & Sidebar (desktop) ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-5) var(--space-5) var(--space-2);
}
.hello{font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.hello-sub{font-size:.8rem;color:var(--text-muted);margin-top:2px}
.topbar-actions{display:flex;gap:var(--space-3);align-items:center}
.icon-btn{
  width:40px;height:40px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;position:relative;transition:transform var(--dur-fast) var(--ease);
}
.icon-btn:active{transform:scale(.94)}
.avatar{width:40px;height:40px;border-radius:var(--radius-pill);object-fit:cover;border:1px solid var(--border)}
.dot-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent-coral);border:2px solid var(--surface)}

.sidebar{display:none}
@media(min-width:900px){
  .sidebar{
    display:flex;flex-direction:column;gap:var(--space-2);
    position:sticky;top:var(--space-6);padding:var(--space-6) var(--space-3);
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  }
  .sidebar .brand{font-family:var(--font-display);font-weight:700;font-size:1.1rem;padding:0 var(--space-3) var(--space-5)}
  .sidebar .brand span{color:var(--accent-amber)}
  .sidebar a{
    display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);
    color:var(--text-muted);font-weight:500;font-size:.92rem;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  }
  .sidebar a svg{width:20px;height:20px;flex-shrink:0}
  .sidebar a:hover{background:var(--surface-2);color:var(--text)}
  .sidebar a.active{background:var(--surface-2);color:var(--text);font-weight:600}
  .sidebar a.active svg{color:var(--accent-amber)}
}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;align-items:center;
  padding:var(--space-2) var(--space-2) max(var(--space-2),env(safe-area-inset-bottom));
  background:var(--surface-glass);backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--border);
}
@media(min-width:900px){ .bottom-nav{display:none} }
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-faint);
  font-size:.68rem;font-weight:600;transition:color var(--dur-fast) var(--ease);
}
.bottom-nav a svg{width:22px;height:22px}
.bottom-nav a.active{color:var(--accent-amber)}

.main-col{padding-bottom:var(--space-9)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-sm);
}
.card-glass{
  background:var(--surface-glass);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--border);border-radius:var(--radius-lg);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:12px 20px;border-radius:var(--radius-pill);font-weight:600;font-size:.92rem;
  cursor:pointer;border:1px solid transparent;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--text);color:var(--bg)}
[data-theme="dark"] .btn-primary,body:not([data-theme="light"]) .btn-primary{background:var(--accent-amber);color:#1A1300}
.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--surface-2);color:var(--text)}
.btn-secondary:hover{background:var(--border)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:.82rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Chips ---------- */
.chip-row{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.chip.active{background:var(--text);color:var(--bg)}
[data-theme="dark"] .chip.active,body:not([data-theme="light"]) .chip.active{background:var(--accent-amber);color:#1A1300;border-color:transparent}

/* ---------- Section heading ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-3)}
.section-head h2{font-size:1rem}
.section-head .sub{font-size:.78rem;color:var(--text-faint);font-weight:500}
.link-more{font-size:.82rem;font-weight:600;color:var(--accent-amber-ink)}
[data-theme="dark"] .link-more,body:not([data-theme="light"]) .link-more{color:var(--accent-amber)}

/* ---------- Status pill ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-pill);font-size:.72rem;font-weight:600}
.pill-pending{background:rgba(242,184,75,.15);color:var(--accent-amber-ink)}
.pill-success{background:rgba(52,211,153,.15);color:var(--accent-mint-ink)}
.pill-fail{background:rgba(240,87,107,.15);color:var(--accent-coral-ink)}
[data-theme="dark"] .pill-pending,body:not([data-theme="light"]) .pill-pending{color:var(--accent-amber)}
[data-theme="dark"] .pill-success,body:not([data-theme="light"]) .pill-success{color:var(--accent-mint)}
[data-theme="dark"] .pill-fail,body:not([data-theme="light"]) .pill-fail{color:var(--accent-coral)}

/* ---------- Skeletons ---------- */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);background-size:400% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;border-radius:var(--radius-sm)}
@keyframes skel-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Empty state ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-9) var(--space-5);color:var(--text-muted)}
.empty-state svg{width:44px;height:44px;color:var(--text-faint);margin-bottom:var(--space-3)}
.empty-state h3{font-size:.95rem;color:var(--text);margin-bottom:4px}
.empty-state p{font-size:.85rem;max-width:260px}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--surface);border-top:1px solid var(--border)}
.footer-grid{display:grid;gap:var(--space-6);padding-block:var(--space-8)}
.footer-bottom{border-top:1px solid var(--border);padding:var(--space-5);text-align:center;font-size:.78rem;color:var(--text-faint)}
.footer-bottom a{color:var(--accent-amber)}

/* Desktop: tabs and panels lay out as one 4-column grid, all panels open. */
@media(min-width:760px){
  footer.site-footer{margin-top:var(--space-9)}
  .footer-grid{grid-template-columns:repeat(4,1fr)}
  .footer-tabs{display:contents}
  .footer-panel-wrap{display:contents}
  .footer-tab{background:none;border:none;font:inherit;text-align:left;cursor:default;padding:0;margin-bottom:var(--space-3);
    font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}
  .footer-tab svg.chevron{display:none}
  .footer-panel{display:block !important}
  .footer-panel a{display:block;font-size:.86rem;color:var(--text-muted);padding:5px 0}
  .footer-panel a:hover{color:var(--text)}
}

/* Mobile: category names sit in one horizontal row; tapping one opens a single
   shared panel below and automatically closes whichever panel was open. */
@media(max-width:759px){
  footer.site-footer{
    position:fixed;left:0;right:0;bottom:var(--bottom-nav-h,64px);z-index:39;
    transform:translateY(100%);transition:transform var(--dur-fast,.25s) var(--ease,ease);
    box-shadow:0 -4px 16px rgba(0,0,0,.10);
  }
  footer.site-footer.footer-visible{transform:translateY(0)}
  .footer-grid{grid-template-columns:1fr;padding-block:0;gap:0}
  .footer-tabs{display:flex;border-bottom:1px solid var(--border)}
  .footer-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:none;border-right:1px solid var(--border);cursor:pointer;
    padding:var(--space-3) var(--space-1);font-size:.68rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);
  }
  .footer-tab:last-child{border-right:none}
  .footer-tab.active{color:var(--accent-amber)}
  .footer-panel-wrap{max-height:45vh;overflow-y:auto}
  .footer-panel{display:none;padding:var(--space-3) var(--space-5)}
  .footer-panel.open{display:block}
  .footer-panel a{display:block;font-size:.86rem;color:var(--text-muted);padding:6px 0}
  .footer-panel a:hover{color:var(--text)}
  .footer-tab .chevron{transition:transform var(--dur-fast) var(--ease)}
  .footer-tab.active .chevron{transform:rotate(180deg)}
}

.page-title{padding:var(--space-5) var(--space-5) 0}
.page-title h1{font-size:1.3rem}
.page-title p{font-size:.85rem;color:var(--text-muted);margin-top:2px}
@media(min-width:900px){ .page-title{padding-inline:0} }

.stack{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4) var(--space-5)}
@media(min-width:900px){ .stack{padding-inline:0} }

/* ---------- Task detail meta table ---------- */
.detail-meta{padding:0}
.detail-meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:10px var(--space-5);border-bottom:1px solid var(--border);font-size:.88rem}
.detail-meta-row:last-child{border-bottom:none}
.detail-meta-label{color:var(--text-muted);flex-shrink:0}

/* ---------- Mobile topbar brand ---------- */
.topbar-brand{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.topbar-brand span{color:var(--accent-amber)}
@media(min-width:900px){ .topbar-brand{display:none} }