:root{
  --paper:#eeefe9; --surface:#ffffff; --surface-2:#f7f8f3;
  --ink:#1d2019; --muted:#6b7268; --muted-2:#8a9086;
  --line:#dee1d7; --line-soft:#e8eadf;
  --accent:#d98e2b; --accent-ink:#241300; --accent-soft:#fbefda; --accent-soft-line:#f0d9ac;
  --danger:#c1503d; --danger-soft:#f7e3de;
  --ok:#3e8a5c; --ok-soft:#e2efe6;
  --shadow-sm:0 1px 2px rgba(29,32,25,.06);
  --shadow-md:0 10px 30px -14px rgba(29,32,25,.28), 0 2px 8px rgba(29,32,25,.06);
  --radius:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171a15; --surface:#1f2318; --surface-2:#242a1d;
    --ink:#eceee6; --muted:#a1a897; --muted-2:#7d8474;
    --line:#333a2a; --line-soft:#2a3022;
    --accent:#e5a13f; --accent-ink:#1c1102; --accent-soft:#332305; --accent-soft-line:#4a3610;
    --danger:#e0836e; --danger-soft:#3a2019;
    --ok:#6bbf8c; --ok-soft:#1c3226;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 14px 34px -16px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#171a15; --surface:#1f2318; --surface-2:#242a1d;
  --ink:#eceee6; --muted:#a1a897; --muted-2:#7d8474;
  --line:#333a2a; --line-soft:#2a3022;
  --accent:#e5a13f; --accent-ink:#1c1102; --accent-soft:#332305; --accent-soft-line:#4a3610;
  --danger:#e0836e; --danger-soft:#3a2019;
  --ok:#6bbf8c; --ok-soft:#1c3226;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 14px 34px -16px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.3);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif; font-size:14.5px; line-height:1.45;
  display:flex; flex-direction:column;
}
h1,h2{font-family:'Fraunces', Georgia, serif; margin:0;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
button{font-family:inherit;}
[hidden]{display:none !important;}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 26px; border-bottom:1px solid var(--line); background:var(--paper);
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{font-size:28px; line-height:1;}
.brand-text h1{font-size:21px; font-weight:600; letter-spacing:-.01em;}
.brand-sub{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.search{
  display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:8px 12px; min-width:200px;
}
.search svg{width:15px; height:15px; color:var(--muted); flex:none;}
.search input{border:none; background:none; outline:none; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;}

.btn{
  display:inline-flex; align-items:center; gap:7px; border-radius:10px; padding:9px 14px;
  font-size:13px; font-weight:500; cursor:pointer; border:1px solid transparent; font-family:inherit;
}
.btn svg{width:15px; height:15px;}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent-soft-line); background:var(--accent-soft);}
.btn-primary{background:var(--accent); color:var(--accent-ink); font-weight:600;}
.btn-primary:hover{filter:brightness(1.05);}
.btn-danger-ghost{background:none; border:1px solid var(--danger-soft); color:var(--danger); border-radius:10px; padding:9px 14px; font-size:13px; cursor:pointer;}
.btn-danger-ghost:hover{background:var(--danger-soft);}
.icon-btn{background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; padding:4px 6px; border-radius:8px;}
.icon-btn:hover{background:var(--line-soft); color:var(--ink);}
.icon-btn svg{width:16px; height:16px; display:block;}

.account-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none; padding:0;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; color:var(--ink);
}
.account-btn svg{width:18px; height:18px;}
.account-btn:hover{border-color:var(--accent-soft-line); background:var(--accent-soft);}

.tg-pill{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:500;
}
.tg-pill svg{width:14px; height:14px; color:var(--accent);}
.tg-pill:hover{border-color:var(--accent-soft-line); background:var(--accent-soft);}

/* ---------- board ---------- */
.board{
  flex:1; display:flex; gap:16px; padding:20px 26px 40px; overflow-x:auto; align-items:flex-start;
}
.column{
  flex:0 0 300px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; max-height:calc(100vh - 110px);
  box-shadow:var(--shadow-sm);
}
.column.drag-ghost{opacity:.4;}
.column-head{
  display:flex; align-items:center; gap:8px; padding:12px 10px 10px 12px; cursor:grab;
  border-bottom:1px solid var(--line-soft);
}
.column-head:active{cursor:grabbing;}
.col-emoji{
  font-size:16px; background:none; border:none; cursor:pointer; border-radius:8px; padding:2px 4px; line-height:1;
}
.col-emoji:hover{background:var(--line-soft);}
.col-title{
  font-size:14.5px; font-weight:600; flex:1; outline:none; border-radius:6px; padding:2px 4px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.col-title:focus{background:var(--surface); box-shadow:0 0 0 2px var(--accent-soft-line);}
.col-count{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:1px 8px; flex:none;
}
.col-menu-btn{background:none; border:none; color:var(--muted); cursor:pointer; padding:3px; border-radius:6px; flex:none;}
.col-menu-btn:hover{background:var(--line-soft); color:var(--ink);}
.col-menu-btn svg{width:16px; height:16px;}

.task-list{
  flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:40px;
}
.quick-add{
  display:flex; align-items:center; gap:6px; margin:2px 10px 12px; padding:9px 10px; border-radius:10px;
  border:1px dashed var(--line); background:none; color:var(--muted); font-size:13px; cursor:pointer;
}
.quick-add svg{width:14px; height:14px;}
.quick-add:hover{border-color:var(--accent-soft-line); color:var(--ink); background:var(--accent-soft);}
.quick-add-input{
  margin:2px 10px 12px; padding:9px 10px; border-radius:10px; border:1px solid var(--accent-soft-line);
  background:var(--surface); font-size:13px; font-family:inherit; outline:none; color:var(--ink);
}

/* ---------- card ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:11px 12px;
  cursor:grab; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:5px;
}
.card:active{cursor:grabbing;}
.card:hover{border-color:var(--accent-soft-line);}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.card.drag-ghost{opacity:.35;}
.card-top{display:flex; align-items:flex-start; gap:8px;}
.card-emoji{font-size:16px; line-height:1.3; flex:none;}
.card-title{font-size:13.5px; font-weight:500; line-height:1.35; word-break:break-word;}
.card-desc{
  margin:0; font-size:12px; color:var(--muted); line-height:1.4; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-badges{display:flex; gap:6px; flex-wrap:wrap;}
.badge{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-family:'IBM Plex Mono', monospace;
  padding:2px 7px; border-radius:999px; border:1px solid var(--line);
}
.badge-remind{background:var(--accent-soft); border-color:var(--accent-soft-line); color:#8a5a12;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .badge-remind{color:var(--accent);} }
:root[data-theme="dark"] .badge-remind{color:var(--accent);}
.badge-overdue{background:var(--danger-soft); border-color:var(--danger-soft); color:var(--danger);}
.badge-tg{background:var(--ok-soft); border-color:var(--ok-soft); color:var(--ok);}

/* ---------- overlay / modal ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(20,22,16,.42); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:20; padding:20px;
}
.modal{
  width:100%; max-width:520px; background:var(--surface); border-radius:16px; box-shadow:var(--shadow-md);
  padding:18px; display:flex; flex-direction:column; gap:12px; border:1px solid var(--line);
}
.modal-sm{max-width:360px;}
.modal-head{display:flex; align-items:center; gap:8px;}
.emoji-trigger{
  font-size:22px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  width:42px; height:42px; flex:none; cursor:pointer; line-height:1;
}
.emoji-trigger:hover{border-color:var(--accent-soft-line);}
.modal-title-input{
  flex:1; border:none; outline:none; font-size:17px; font-weight:600; font-family:'Fraunces', serif;
  background:none; color:var(--ink); min-width:0;
}
.modal-desc{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13.5px; font-family:inherit;
  resize:vertical; background:var(--surface-2); color:var(--ink); outline:none;
}
.modal-desc:focus{border-color:var(--accent-soft-line);}
.modal-row{display:flex; gap:12px; flex-wrap:wrap;}
.field{display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); flex:1; min-width:170px; text-transform:uppercase; letter-spacing:.03em;}
.field select, .field input{
  font-family:inherit; font-size:13px; padding:8px 10px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); text-transform:none; letter-spacing:normal;
}
.modal-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:4px; border-top:1px solid var(--line-soft);}
.modal-foot-right{display:flex; align-items:center; gap:10px;}
.save-hint{font-size:11px; color:var(--muted);}

.popover{
  position:absolute; z-index:30; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-md); padding:10px; display:grid; grid-template-columns:repeat(8, 1fr); gap:3px; width:260px;
}
.popover button{
  font-size:18px; background:none; border:none; border-radius:8px; padding:5px; cursor:pointer; line-height:1;
}
.popover button:hover{background:var(--accent-soft);}
.popover .emoji-custom{
  grid-column:1 / -1; margin-top:4px; padding-top:8px; border-top:1px solid var(--line-soft);
  display:flex; gap:6px;
}
.popover .emoji-custom input{
  flex:1; font-family:inherit; font-size:13px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--surface-2); color:var(--ink); text-align:center;
}

.empty-hint{color:var(--muted); font-size:12.5px; text-align:center; padding:18px 8px;}

/* ---------- account modal ---------- */
.acc-section{
  display:flex; flex-direction:column; gap:8px; padding:12px 0; border-top:1px solid var(--line-soft);
}
.acc-section h3{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-family:inherit; font-weight:600; margin:0;}
.acc-section input{
  font-family:inherit; font-size:13.5px; padding:9px 11px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); outline:none;
}
.acc-section input:focus{border-color:var(--accent-soft-line);}
.acc-note{margin:0; font-size:12.5px; color:var(--muted);}
.acc-msg{font-size:12px; min-height:14px;}
.acc-msg.ok{color:var(--ok);}
.acc-msg.err{color:var(--danger);}
.acc-secret{
  align-self:center; background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font-size:13px; letter-spacing:.05em;
}
.totp-input-sm{letter-spacing:.3em; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:16px !important;}

@media (max-width:640px){
  .topbar{padding:14px 16px;}
  .board{padding:14px 16px 30px;}
  .column{flex-basis:82vw;}
}