:root{--ink: #14161a;--ink-soft: #5b626d;--paper: #f6f5f2;--surface: #ffffff;--line: #e4e2dc;--dot: #d7d4cc;--accent: #7b8089;--shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 6px 18px rgba(20, 22, 26, .06);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}.app{display:flex;flex-direction:column;height:100vh;background:var(--paper)}.topbar{flex:0 0 auto;display:flex;align-items:baseline;gap:16px;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--line);z-index:2}.topbar__logo{font-weight:650;letter-spacing:-.01em;font-size:16px}.topbar__hint{font-size:12px;color:var(--ink-soft)}.topbar__save{margin-left:auto;font-size:12px;color:var(--ink-soft)}.topbar__save--saved{color:#159a6e}.topbar__save--error{color:#b4452f}.topbar__err{margin-left:auto;font-size:12px;color:#b4452f;border:1px solid #e8c9c1;border-radius:6px;padding:2px 8px;cursor:help}.topbar__save+.topbar__err{margin-left:10px}.canvas{position:relative;flex:1 1 auto;overflow:hidden}.canvas-wrap{width:100%!important;height:100%!important;background-color:var(--paper);background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);background-size:26px 26px;cursor:grab}.canvas-wrap:active{cursor:grabbing}.canvas-content{position:relative}.state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:0 24px;text-align:center;color:var(--ink-soft);font-size:14px;pointer-events:none}.card{position:absolute;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.card:active{cursor:grabbing}.card__type{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.card__title{margin:2px 0 0;font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.card__body{margin:0;flex:1 1 auto;min-height:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);white-space:pre-wrap;overflow:hidden}.card__body--empty{font-style:italic;opacity:.5}.card__resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none;border-bottom-right-radius:10px;background:linear-gradient(135deg,transparent 0 55%,var(--line) 55% 64%,transparent 64% 73%,var(--line) 73% 82%,transparent 82%)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14161a52;display:grid;place-items:center;padding:24px;z-index:50}.detail{width:min(680px,100%);max-height:86vh;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 48px #14161a3d;padding:22px}.detail__meta{display:flex;align-items:baseline;gap:10px}.detail__type{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.detail__id{font-size:11px;color:var(--ink-soft);opacity:.7}.detail__title{font-size:19px;font-weight:650;letter-spacing:-.01em;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:inherit;color:var(--ink)}.detail__body{flex:1 1 auto;min-height:300px;max-height:56vh;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.detail__actions{display:flex;gap:8px;align-items:center}.btn{font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);cursor:pointer;font-family:inherit}.btn:hover{background:var(--paper)}.btn--primary{background:var(--ink);color:#fff;border-color:var(--ink)}.btn--danger{color:#b4452f;border-color:#e8c9c1;margin-left:auto}.fab{position:absolute;top:16px;right:16px;z-index:5;font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);cursor:pointer;font-family:inherit}.fab:hover{background:var(--paper)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}@media (max-width: 640px){.topbar__hint{display:none}}.card__head{padding-right:26px}.card__expand{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;padding:0;display:grid;place-items:center;line-height:1;font-size:13px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-soft);cursor:pointer;opacity:.7}.card__expand:hover{opacity:1;background:var(--paper)}.card__title-input{width:100%;font-size:14.5px;font-weight:600;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-family:inherit;color:var(--ink);background:var(--paper)}.card__body-input{width:100%;flex:1 1 auto;min-height:0;resize:none;font-size:12.5px;line-height:1.45;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-family:inherit;color:var(--ink);background:var(--paper)}.detail--loading{display:grid;place-items:center;min-height:200px;color:var(--ink-soft)}.card--done{background:#e9f6ec}.card--done .card__title{text-decoration:line-through;opacity:.6}.card--blocked{background:#fbebe9}.card--faded{opacity:.45}.detail__status{margin-left:auto;font-size:12px;font-family:inherit;border:1px solid var(--line);border-radius:6px;padding:3px 6px;background:var(--surface);color:var(--ink);cursor:pointer}
