* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2328; background: #f6f5f2; }
[hidden] { display: none !important; }
button, select, input { font: inherit; }
button { border: 1px solid #d6d3cd; background: #fff; border-radius: 6px; padding: 5px 11px; cursor: pointer; }
button:hover { background: #f0eee9; }

#login { display: grid; place-items: center; height: 100%; }
#loginForm { width: min(420px, 92vw); background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.08); display: grid; gap: 14px; }
#loginForm h1 { margin: 0; font-size: 30px; }
h1 span, .brand span { color: #e44332; }
#loginForm p { margin: 0; color: #57534e; }
#loginForm label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
#loginForm input { padding: 9px 11px; border: 1px solid #d6d3cd; border-radius: 6px; }
#loginForm small { color: #78716c; }
#loginForm button { background: #e44332; color: #fff; border: 0; padding: 10px; font-weight: 600; }
#loginError { color: #b91c1c; font-size: 14px; }

#app { display: flex; flex-direction: column; height: 100%; }
header { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e7e5e0; z-index: 10; }
.brand { font-weight: 800; font-size: 18px; margin-right: 8px; }
header select { padding: 5px 8px; border: 1px solid #d6d3cd; border-radius: 6px; background: #fff; max-width: 260px; }
.spacer { flex: 1; }
#status { color: #78716c; font-size: 13px; }
#zoomLabel { color: #78716c; font-size: 13px; min-width: 44px; text-align: right; }

#viewport { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none;
  background-color: #f6f5f2; background-image: radial-gradient(#d9d6cf 1px, transparent 1px); background-size: 24px 24px; }
#viewport.panning { cursor: grabbing; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#links { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
#links path.link { fill: none; stroke: #6b7280; stroke-width: 2; marker-end: url(#arrow); cursor: pointer; pointer-events: stroke; }
#links path.link.sub { stroke: #b8b3aa; stroke-dasharray: 5 5; marker-end: none; pointer-events: none; }
#links path.hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
#links path.link.selected { stroke: #e44332; marker-end: url(#arrowSel); }
#dragLink { fill: none; stroke: #e44332; stroke-width: 2; stroke-dasharray: 6 4; }

.card { position: absolute; width: 230px; background: #fff; border: 1px solid #e7e5e0; border-left: 4px solid var(--pc, #999);
  border-radius: 8px; padding: 9px 22px 9px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); cursor: move; user-select: none; display: flex; gap: 8px; }
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.card.dragging { box-shadow: 0 10px 28px rgba(0,0,0,.18); z-index: 5; }
.card.linkTarget { outline: 2px solid #e44332; }
.check { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--prio, #9ca3af); margin-top: 1px; cursor: pointer; background: #fff; }
.check:hover { background: color-mix(in srgb, var(--prio, #9ca3af) 20%, #fff); }
.body { min-width: 0; flex: 1; }
.content { font-size: 14px; line-height: 1.35; word-wrap: break-word; outline: none; }
.content[contenteditable="true"] { cursor: text; background: #fffbeb; border-radius: 3px; user-select: text; }
.meta { margin-top: 5px; font-size: 11.5px; color: #78716c; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.meta .due { color: #16a34a; }
.meta .due.late { color: #dc2626; }
.meta .label { color: #a16207; }
.handle { position: absolute; right: -7px; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #e44332; cursor: crosshair; opacity: 0; transition: opacity .1s; }
.card:hover .handle, .handle.active { opacity: 1; }
.open { position: absolute; right: 6px; top: 5px; font-size: 12px; color: #a8a29e; text-decoration: none; opacity: 0; }
.card:hover .open { opacity: 1; }

.newTask { position: absolute; width: 230px; }
.newTask input { width: 100%; padding: 9px 10px; border: 2px solid #e44332; border-radius: 8px; font-size: 14px; outline: none; }

#help { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(255,255,255,.92); border: 1px solid #e7e5e0;
  border-radius: 8px; padding: 6px 12px; font-size: 12px; color: #78716c; pointer-events: none; text-align: center; max-width: 94vw; }