@font-face{
  font-family:"DM Sans";
  src:url("assets/dm-sans.ttf") format("truetype");
  font-display:swap;
  font-weight:100 1000;
}
@font-face{
  font-family:"DM Serif Display";
  src:url("assets/dm-serif.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/ibm-plex-mono.ttf") format("truetype");
  font-display:swap;
}
:root{
  --bg:#FDF8F0;
  --bg-2:#F3EDE1;
  --surface:#FFFFFF;
  --surface-2:#FAF6EE;
  --line:#E9E0D1;
  --line-strong:#DDD4C0;
  --ink:#141413;
  --muted:#6E6A62;
  --muted-2:#9A958C;
  --accent:#E85D2F;
  --accent-hover:#D14E24;
  --teal:#1B6B5A;
  --mustard:#E9B949;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow:0 4px 24px rgba(20,20,19,0.07), 0 1px 4px rgba(20,20,19,0.08);
  --shadow-lg:0 12px 40px rgba(20,20,19,0.12), 0 2px 8px rgba(20,20,19,0.08);
  --focus:0 0 0 2px #FDF8F0, 0 0 0 4px #1B6B5A;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important}}
body{
  margin:0;
  font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
button,select,input{font:inherit}
:focus-visible{outline:none; box-shadow:var(--focus)}
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:12px; top:12px; width:auto; height:auto; padding:8px 14px; background:var(--ink); color:white; border-radius:8px; z-index:9999}

/* Header */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(253,248,240,0.86);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.header-inner{
  max-width:1360px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 24px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{flex:0 0 auto}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:"DM Serif Display", Georgia, serif; font-size:20px; letter-spacing:-0.02em}
.brand-sub{font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:2px}
.header-center{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); border:1px solid var(--line); background:var(--surface); padding:6px 12px; border-radius:999px}
.live-dot{width:8px; height:8px; border-radius:50%; background:#2EB67D; box-shadow:0 0 0 3px rgba(46,182,125,0.18)}
.header-divider{width:1px; height:14px; background:var(--line)}
.header-center-sub{color:var(--ink); font-weight:600}
.header-actions{display:flex; align-items:center; gap:8px}
.avatars{display:flex; align-items:center}
.avatar{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; background:var(--c); border:2px solid var(--bg); margin-left:-6px}
.avatar:first-child{margin-left:0}
.avatar.more{background:var(--ink); color:#fff}
.header-sep{width:1px; height:20px; background:var(--line); margin:0 4px}
.btn-ghost{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--ink); cursor:pointer}
.btn-ghost:hover{background:var(--surface-2)}
.user-chip{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; background:var(--ink); color:white; padding:6px 10px; border-radius:999px}
.user-dot{width:8px; height:8px; border-radius:50%; background:#F0C24A}

/* Main */
.main{max-width:1360px; margin:0 auto; padding:24px 24px 24px}
.intro{display:grid; grid-template-columns:1.15fr 0.85fr; gap:20px; margin-bottom:18px}
.intro-left h1{font-family:"DM Serif Display", Georgia, serif; font-size:44px; line-height:0.95; letter-spacing:-0.03em; margin:0 0 8px; text-wrap:balance}
.intro-left p{margin:0; color:var(--muted); font-size:16px; max-width:46ch; line-height:1.6}
.intro-right{display:flex; justify-content:flex-end}
.quote-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; width:100%; max-width:380px; box-shadow:var(--shadow)}
.quote-top{display:flex; gap:12px; align-items:center; margin-bottom:10px}
.quote-top img{width:48px; height:48px; border-radius:12px; object-fit:cover}
.quote-top strong{display:block; font-size:13px}
.quote-top span{display:block; font-size:13px; color:var(--muted)}
.quote-card p{margin:0; font-size:14px; line-height:1.5; color:#2B2B2A; font-style:italic}

/* Stats */
.stats{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px; margin-bottom:16px;
}
.stat{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; border:1px solid transparent; background:transparent; cursor:pointer; font-size:14px; font-weight:600; color:var(--muted); touch-action:manipulation; -webkit-tap-highlight-color:rgba(27,107,90,0.15); transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.stat:hover{border-color:var(--line); color:var(--ink)}
.stat.is-active{background:var(--ink); color:white; border-color:var(--ink)}
.stat.is-active .stat-num{color:white}
.stat-dot{width:8px; height:8px; border-radius:50%; background:var(--dot)}
.stat-num{font-variant-numeric:tabular-nums; font-weight:800; color:var(--ink)}
.stat.is-active .stat-num{font-weight:800}
.stat-label{font-weight:600}
.stats-hint{margin-left:auto; font-size:12px; color:var(--muted-2); padding-right:8px}

/* Toolbar */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:16px;
}
.toolbar-left{display:flex; align-items:center; gap:12px; flex:1; flex-wrap:wrap}
.toolbar-right{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.search-wrap{position:relative; display:flex; align-items:center; flex:1; min-width:220px; max-width:420px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:0 10px; transition:border-color 150ms}
.search-wrap:focus-within{border-color:var(--teal); background:white}
.search-wrap input{flex:1; border:0; background:transparent; padding:10px 8px; outline:none; font-size:14px; min-width:0}
.search-icon{flex:0 0 auto}
.clear-search{border:0; background:#EEE8DA; width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1; display:grid; place-items:center}
.filter-wrap{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:6px 10px}
.filter-label{font-size:13px; font-weight:700; color:var(--muted); letter-spacing:0.02em}
.filter-wrap select, .sort-wrap select{
  border:0; background:transparent; font-size:14px; font-weight:600; color:var(--ink); outline:none; cursor:pointer;
}
.toolbar select{
  background-color:transparent; color:var(--ink); padding-right:4px;
}
#resultsCount{font-variant-numeric:tabular-nums; min-width:70px; text-align:right}
.sort-wrap{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px}

/* Workspace */
.workspace{display:grid; grid-template-columns:420px 1fr; gap:16px; align-items:start}
.list-pane{background:transparent}
.list-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; padding:0 4px}
.list-head h2{font-family:"DM Serif Display", Georgia, serif; font-size:18px; margin:0}
.list-meta{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.task-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.task-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px; position:relative; transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.task-card:hover{border-color:var(--line-strong); box-shadow:0 6px 20px rgba(0,0,0,0.07)}
.task-card.is-active{border-color:var(--ink); box-shadow:var(--shadow-lg)}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted)}
.card-top-left{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.project-pill{background:var(--surface-2); border:1px solid var(--line); padding:3px 8px; border-radius:999px; font-weight:700; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted)}
.priority-dot{width:8px; height:8px; border-radius:50%; display:inline-block}
.priority-high{background:#D93E1F}
.priority-medium{background:#E9B949}
.priority-low{background:#A8A39A}
.due{font-variant-numeric:tabular-nums; font-weight:600; display:flex; align-items:center; gap:4px; white-space:nowrap}
.due svg{flex:0 0 auto}
.card-title{font-size:16px; font-weight:700; line-height:1.25; margin:0; letter-spacing:-0.01em; text-wrap:pretty}
.card-title a{color:inherit}
.card-title a:hover{color:var(--teal)}
.card-summary{margin:0; color:var(--muted); font-size:14px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; overflow-wrap:break-word}
.card-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.assignee{display:flex; align-items:center; gap:8px; min-width:0}
.avatar-sm{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; color:white; background:#6B6B6B; flex:0 0 auto}
.assignee-name{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.assignee-role{font-size:12px; color:var(--muted)}
.status-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.status-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--line)}
.status-pill.todo{background:#F7F1E6; border-color:#E9E0D1; color:#7A7162}
.status-pill.in-progress{background:#E6F0EC; border-color:#C8DDD6; color:#1B6B5A}
.status-pill.blocked{background:#FDEBE7; border-color:#F5CFC7; color:#B93A24}
.status-pill.done{background:#EFEFEF; border-color:#D8D8D8; color:#3A3A3A}
.status-pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.card-actions{display:flex; align-items:center; gap:8px}
.btn{border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700; border:1px solid transparent; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:rgba(0,0,0,0.1); transition:background-color 150ms, border-color 150ms, color 150ms, transform 150ms}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); color:white; border-color:var(--ink)}
.btn-primary:hover{background:#2A2A28}
.btn-secondary{background:white; border-color:var(--line); color:var(--ink)}
.btn-secondary:hover{border-color:var(--line-strong)}
.btn-small{padding:7px 12px; font-size:12px}
.open-btn{background:var(--ink); color:white; border-color:var(--ink)}
.open-btn:hover{background:#232321}
.comments{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums}

/* Empty */
.empty-state{
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:16px; padding:28px 20px; text-align:center; display:grid; justify-items:center; gap:10px;
}
.empty-state h3{margin:0; font-size:16px}
.empty-state p{margin:0; color:var(--muted); font-size:14px; max-width:32ch}
.empty-hint{font-size:12px; color:var(--muted-2)}
.empty-hint kbd{border:1px solid var(--line); background:var(--surface-2); padding:1px 6px; border-radius:4px; font-family:"IBM Plex Mono", monospace; font-size:11px}

/* Detail */
.detail-host{display:block}
.detail-overlay{
  position:fixed; inset:0; z-index:40; display:grid; place-items:start center; padding:24px; padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:max(24px, env(safe-area-inset-bottom));
}
.detail-overlay[hidden]{display:none !important}
.detail-backdrop{position:absolute; inset:0; background:rgba(20,20,19,0.38); backdrop-filter:blur(6px); overscroll-behavior:contain}
.detail-panel{
  position:relative; width:min(720px, 100%); max-height:min(84vh, 900px); overflow:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg);
  animation:detailIn 220ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes detailIn{from{transform:translateY(8px) scale(0.98); opacity:0} to{transform:none; opacity:1}}
.detail-panel::-webkit-scrollbar{width:8px}
.detail-header{
  position:sticky; top:0; z-index:2; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line);
}
.detail-header-left{display:flex; align-items:center; gap:10px; min-width:0}
.detail-kicker{font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.detail-title{margin:4px 0 0; font-family:"DM Serif Display", Georgia, serif; font-size:26px; line-height:1.1; letter-spacing:-0.02em; text-wrap:balance}
.detail-meta{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.detail-body{padding:18px}
.detail-grid{display:grid; grid-template-columns:1fr 260px; gap:18px}
.detail-main{ min-width:0; display:flex; flex-direction:column; gap:16px}
.detail-section h3{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.detail-desc{font-size:15px; line-height:1.7; color:#222220; white-space:pre-wrap; overflow-wrap:break-word; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px}
.detail-desc p{margin:0}
.detail-side{display:flex; flex-direction:column; gap:14px}
.side-card{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px}
.side-row{display:flex; justify-content:space-between; gap:12px; font-size:13px}
.side-label{color:var(--muted); font-weight:600}
.side-value{font-weight:700; text-align:right; overflow-wrap:break-word; min-width:0}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{background:white; border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600}
.status-control-wrap{display:flex; flex-direction:column; gap:6px}
.status-control-wrap label{font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted)}
.status-control-wrap select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:white; color:var(--ink); font-weight:600;
}
.status-feedback{font-size:13px; color:var(--teal); font-weight:600; min-height:18px}
.detail-actions{display:flex; gap:8px; flex-wrap:wrap}
.activity{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.activity-head{display:flex; justify-content:space-between; padding:10px 12px; background:var(--surface-2); font-size:13px; font-weight:700; border-bottom:1px solid var(--line)}
.activity-item{display:flex; gap:10px; padding:10px 12px; font-size:13px; color:var(--muted); border-bottom:1px solid #F0E9DA}
.activity-item:last-child{border-bottom:0}
.activity-avatar{width:24px; height:24px; border-radius:50%; background:var(--ink); color:white; display:grid; place-items:center; font-size:10px; font-weight:800; flex:0 0 auto}
.detail-close{display:inline-flex; align-items:center; gap:6px}
.close-x{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:white; display:grid; place-items:center; cursor:pointer}
.close-x:hover{background:var(--surface-2)}

/* Toast */
.toast-stack{position:fixed; bottom:16px; right:16px; z-index:50; display:flex; flex-direction:column; gap:8px; pointer-events:none; padding-bottom:env(safe-area-inset-bottom)}
.toast{
  pointer-events:auto; background:var(--ink); color:white; padding:12px 14px; border-radius:12px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg); max-width:360px; animation:toastIn 200ms ease;
}
@keyframes toastIn{from{transform:translateY(6px); opacity:0} to{transform:none; opacity:1}}
.toast-dot{width:8px; height:8px; border-radius:50%; background:var(--mustard); flex:0 0 auto}

/* Footer */
.site-footer{border-top:1px solid var(--line); margin-top:24px; padding:12px 24px; font-size:13px; color:var(--muted)}
.footer-inner{max-width:1360px; margin:0 auto; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer-inner a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* Utilities */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.u-muted{color:var(--muted)}

/* Responsive */
@media(max-width:900px){
  .header-center{display:none}
  .intro{grid-template-columns:1fr}
  .intro-right{justify-content:stretch}
  .quote-card{max-width:none}
  .workspace{grid-template-columns:1fr}
  .detail-overlay{padding:0; align-items:end}
  .detail-panel{width:100%; max-height:92vh; border-radius:20px 20px 0 0; margin-top:auto; animation:sheetIn 240ms cubic-bezier(0.16,1,0.3,1)}
  .detail-grid{grid-template-columns:1fr}
  .detail-header{padding-top:max(14px, env(safe-area-inset-top))}
  .detail-body{padding-bottom:max(18px, env(safe-area-inset-bottom))}
  @keyframes sheetIn{from{transform:translateY(16px)} to{transform:none}}
}
@media(max-width:520px){
  .header-inner{padding:12px 12px}
  .main{padding:16px 12px 12px}
  .intro-left h1{font-size:32px}
  .stats{gap:6px; padding:6px}
  .stat{padding:7px 10px; font-size:13px}
  .stats-hint{display:none}
  .toolbar{padding:10px}
  .search-wrap{max-width:none}
  .task-card{padding:12px}
  .card-title{font-size:15px}
}