.care-map { --care-ink: #102b41; --care-line: #70bed2; border: 1px solid #dbe9ef; border-radius: 24px; background: #f6fafc; color: var(--care-ink); overflow: hidden; box-shadow: 0 14px 50px #0b395608; }
.care-toolbar { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid #e1ecf1; background:#fff; }
.care-legend { display:flex; gap:10px; align-items:center; font-size:13px; font-weight:600; color:#557083; }
.care-legend>span { width:8px; height:8px; border-radius:50%; background:#1896ac; box-shadow:0 0 0 4px #e4f4f6; }
.care-zoom { display:flex; gap:6px; }
.care-zoom button { display:grid; place-items:center; width:32px; height:32px; border:1px solid #dce7ec; border-radius:8px; background:white; color:#285165; cursor:pointer; font-size:20px; }
.care-zoom svg { width:16px; height:16px; }
.care-viewport { overflow:auto; max-height:720px; position:relative; scrollbar-width:thin; scrollbar-color:#bfd6e0 transparent; background-image:radial-gradient(#c2d5df 1px, transparent 1px); background-size:22px 22px; overscroll-behavior-x:contain; }
.care-stage { position:relative; transform-origin:top left; }
.care-node { display:flex; align-items:center; gap:14px; min-height:106px; margin:12px; padding:18px; background:#fff; color:var(--care-ink); border:1px solid #d2e3ec; border-radius:14px; text-decoration:none; box-shadow:0 6px 18px #20486108; }
.care-node>span:last-child { min-width:0; }
.care-node strong { display:block; font-size:14px; line-height:1.35; font-weight:700; }
.care-node small { display:block; color:#447b8e; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px; }
.care-node em { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:10px; line-height:1.4; color:#78909f; font-style:normal; margin-top:5px; }
.care-node-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:10px; background:#eaf5f8; color:#178ba3; }
.care-node-icon svg { width:22px; height:22px; }
.care-root { background:#0b3149; border-color:#16435b; color:#fff; }
.care-root small,.care-root em { color:#aed9e3; }
.care-root strong { font-size:21px; }
.care-root .care-node-icon { color:#0a4254; background:#b7e8ee; width:48px; height:48px; flex-basis:48px; border-radius:50%; }
.care-complication { border-left:3px solid #c29d67; }
.care-complication .care-node-icon { color:#94703b; background:#f9f1e6; }
.care-edges { display:none; }
.care-ready .care-node { position:absolute; top:0; left:0; margin:0; width:238px; height:106px; min-height:0; box-sizing:border-box; cursor:grab; user-select:none; touch-action:none; z-index:2; transition:box-shadow .2s, border-color .2s; }
.care-ready .care-node:hover { border-color:#61aabd; box-shadow:0 8px 24px #0b395615; }
.care-ready .care-node.is-dragging { cursor:grabbing; z-index:5; box-shadow:0 16px 30px #0c3c562b; }
.care-ready .care-edges { display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.care-edges path { fill:none; stroke:var(--care-line); stroke-width:2; }
.care-node:focus-visible,.care-zoom button:focus-visible { outline:3px solid #dd9837; outline-offset:3px; }
.care-inactive { border-style:dashed; filter:grayscale(1); }
@media(max-width:600px) { .care-toolbar {padding:12px 15px;} .care-viewport {max-height:560px;} .care-map {border-radius:16px;} }