:root {
  --bg: #f5f4ef;
  --card: #ffffff;
  --text: #171717;
  --muted: #6b6b6b;
  --line: #e5e2da;
  --accent: #2f5d57;
  --danger: #b64b4b;
  --high: #d84a4a;
  --normal: #d49b2f;
  --low: #5b8b74;
  --shadow: 0 10px 28px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.shell{width:min(980px,calc(100% - 28px));margin:0 auto;padding:24px 0 56px}
.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}
.brand h1{margin:0;font-size:clamp(26px,5vw,40px);letter-spacing:-.04em}
.brand p{margin:6px 0 0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.auth{width:min(470px,calc(100% - 28px));margin:10vh auto 0}
.auth h1{margin:0 0 8px}.auth p{color:var(--muted);margin:0 0 20px}
.form-grid{display:grid;gap:12px}
label{display:grid;gap:6px;font-weight:650;font-size:14px}
input,textarea,select{width:100%;border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px 13px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,93,87,.12)}
textarea{min-height:80px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:0;border-radius:13px;padding:11px 15px;font-weight:750;background:#eceae4;color:var(--text)}
.btn.primary{background:var(--accent);color:white}.btn.danger{background:#faeaea;color:var(--danger)}.btn.ghost{background:transparent;border:1px solid var(--line)}
.status{margin-top:12px;color:var(--muted);font-size:14px;min-height:20px}
.grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-title h2{margin:0;font-size:20px}
.share-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.share-box code{display:block;word-break:break-all;background:#f5f4ef;padding:10px;border-radius:10px;margin:8px 0;font-size:12px}
.todo-list{display:grid;gap:10px}
.todo{display:grid;grid-template-columns:8px 1fr auto;gap:13px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff}
.todo-priority{width:8px;min-height:58px;border-radius:99px;background:var(--normal)}
.todo[data-priority="high"] .todo-priority{background:var(--high)}.todo[data-priority="low"] .todo-priority{background:var(--low)}
.todo h3{margin:0;font-size:17px}.todo p{margin:5px 0 0;color:var(--muted);white-space:pre-wrap}
.todo-meta{margin-top:8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:750}
.todo-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.todo-actions button{border:0;border-radius:10px;padding:7px 9px;background:#f0eee8}
.empty{text-align:center;padding:45px 20px;color:var(--muted)}

/* Display */
.display-page{min-height:100vh;background:#111;color:#f8f8f5;padding:clamp(18px,4vw,46px)}
.display-wrap{width:min(1200px,100%);margin:0 auto}
.display-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:clamp(26px,5vw,55px)}
.display-head h1{margin:0;font-size:clamp(34px,6vw,76px);letter-spacing:-.05em}.display-head p{margin:8px 0 0;color:#aaa;font-size:clamp(15px,2vw,22px)}
.clock{text-align:right;font-variant-numeric:tabular-nums;font-size:clamp(28px,4vw,52px);font-weight:800}.clock small{display:block;color:#888;font-size:clamp(12px,1.4vw,17px);font-weight:600;margin-top:4px}
.display-list{display:grid;gap:clamp(12px,2vw,22px)}
.display-todo{display:grid;grid-template-columns:12px 1fr;gap:clamp(16px,2.2vw,26px);background:#1d1d1d;border:1px solid #2a2a2a;border-radius:clamp(18px,2.5vw,30px);padding:clamp(19px,3vw,34px)}
.display-todo .bar{border-radius:99px;background:var(--normal)}.display-todo.high .bar{background:var(--high)}.display-todo.low .bar{background:var(--low)}
.display-todo h2{margin:0;font-size:clamp(24px,3.8vw,48px);line-height:1.08;letter-spacing:-.025em}.display-todo p{margin:10px 0 0;color:#bbb;font-size:clamp(16px,2vw,25px);line-height:1.35;white-space:pre-wrap}
.display-empty{display:grid;place-items:center;min-height:55vh;text-align:center;color:#aaa}.display-empty strong{display:block;color:#f5f5f2;font-size:clamp(34px,5vw,64px);margin-bottom:10px}
.display-controls{position:fixed;right:14px;bottom:14px;display:flex;gap:8px}.display-controls button{border:1px solid #333;background:rgba(20,20,20,.82);color:#ddd;border-radius:12px;padding:9px 11px;font-size:13px}
.display-error{background:#401f1f;border:1px solid #6f3434;border-radius:16px;padding:16px;color:#ffd7d7}
@media(max-width:760px){.grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.todo{grid-template-columns:7px 1fr}.todo-actions{grid-column:2;justify-content:flex-start}.display-head{align-items:flex-start}.clock{font-size:26px}}