*{box-sizing:border-box}:root{--bg:#f3f5fa;--panel:#fff;--text:#101828;--muted:#667085;--line:#e4e7ec;--accent:#5b55e7;--accent2:#4540c6;--shadow:0 16px 40px rgba(16,24,40,.09)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:linear-gradient(180deg,#f8f9fc 0,#eef2f8 100%);min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.topbar{height:72px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}.brand-btn{display:flex;align-items:center;gap:11px;border:0;background:transparent;padding:0;text-align:left}.logo{width:39px;height:39px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 8px 18px rgba(91,85,231,.25)}.logo.big{width:58px;height:58px;border-radius:17px;margin:auto;font-size:21px}.brand-copy{display:flex;flex-direction:column}.brand-copy b{font-size:17px}.brand-copy span{font-size:11px;color:var(--muted);margin-top:2px}.top-actions{display:flex;align-items:center;gap:12px}.user-name{font-size:13px;color:var(--muted)}main{min-height:calc(100vh - 72px)}.page{padding:34px 32px}.page-head,.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px}.eyebrow{display:inline-block;font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:900}.page-head h1{margin:8px 0 6px;font-size:40px}.page-head p,.board-head p{margin:0;color:var(--muted)}.primary,.ghost,.danger,.soft-btn{border-radius:11px;padding:10px 14px;border:1px solid transparent;font-weight:700}.primary{background:var(--accent);color:#fff}.primary:hover{background:var(--accent2)}.ghost{background:#fff;border-color:var(--line);color:#344054}.danger{background:#fff1f2;color:#be123c;border-color:#fecdd3}.soft-btn{background:#f4f3ff;color:#4f46e5;border-color:#dedcff}.wide{width:100%;padding:12px}.boards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:26px}.board-card{min-height:148px;border:1px solid #e7e9ef;background:rgba(255,255,255,.9);border-radius:18px;padding:20px;box-shadow:0 7px 22px rgba(16,24,40,.05);cursor:pointer;transition:.18s;display:flex;flex-direction:column;justify-content:space-between}.board-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d9d7ff}.board-card h3{font-size:20px;margin:0}.board-card span{font-size:12px;color:var(--muted)}.board-head{padding:0 0 18px}.back{border:0;background:transparent;padding:0;color:var(--accent);font-weight:700;margin-bottom:8px}.board-title{border:0;outline:none;background:transparent;font-size:34px;font-weight:850;max-width:700px;width:min(70vw,700px);padding:0;color:var(--text)}.board-actions{display:flex;gap:10px;align-items:center}.danger-link{border:0;background:transparent;color:#b42318;font-size:13px}.board-scroll{overflow-x:auto;padding:8px 2px 28px}.board{display:flex;align-items:flex-start;gap:16px;min-width:max-content}.column{width:316px;background:rgba(255,255,255,.72);border:1px solid rgba(228,231,236,.9);border-radius:18px;padding:13px;box-shadow:0 5px 18px rgba(16,24,40,.04)}.column.drag-over{outline:2px solid rgba(91,85,231,.3);background:#f8f7ff}.column-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.column-name-wrap{display:flex;align-items:center;gap:8px;min-width:0}.dot{width:10px;height:10px;border-radius:50%;flex:none}.column-name{width:190px;border:0;background:transparent;outline:none;font-weight:850;color:var(--text)}.count{font-size:11px;color:var(--muted);background:#eef1f6;border-radius:999px;padding:4px 8px}.remove-column{border:0;background:transparent;color:#98a2b3;font-size:22px}.cards{min-height:28px;display:flex;flex-direction:column;gap:9px}.card{background:#fff;border:1px solid #eceef3;border-radius:14px;padding:13px;box-shadow:0 4px 13px rgba(16,24,40,.05);cursor:grab;transition:.16s}.card:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(16,24,40,.09)}.card.dragging{opacity:.42}.card.card-red{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.22)}.card.card-green{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.22)}.card.card-blue{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.22)}.card.card-yellow{background:rgba(234,179,8,.16);border-color:rgba(234,179,8,.24)}.card-label{display:inline-flex;background:rgba(255,255,255,.75);color:#4f46e5;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:850;margin-bottom:7px}.card-title{font-weight:780;line-height:1.35}.card-description{font-size:12px;color:var(--muted);line-height:1.45;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:11px;color:var(--muted);font-size:11px;gap:8px}.meta-icons{display:flex;gap:8px;align-items:center}.card-progress{margin-top:10px}.card-progress-row{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:5px}.mini-progress{height:5px;border-radius:99px;background:rgba(255,255,255,.75);overflow:hidden}.mini-progress>span{display:block;height:100%;background:#22c55e;border-radius:99px}.add-card{width:100%;margin-top:9px;border:1px dashed #d5d9e2;background:transparent;border-radius:11px;padding:10px;color:var(--muted);text-align:left}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:min(410px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow);text-align:center}.auth-card h1{font-size:30px;margin:14px 0 6px}.auth-card p{color:var(--muted);margin:0 0 25px}.auth-card form{text-align:left}.auth-card label,.card-settings label,.side-block label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px}.auth-card input,.card-settings input{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px;outline:none}.auth-card .wide{margin-top:18px}.error{min-height:19px;color:#b42318;font-size:12px;margin-top:10px}.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.55);display:grid;place-items:center;z-index:60;padding:18px}.modal{background:#fff;border-radius:22px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.28)}.card-modal-panel{width:min(1000px,96vw);max-height:92vh;display:grid;grid-template-columns:minmax(0,1fr) 230px;overflow:hidden}.modal-main{padding:26px;overflow-y:auto;min-height:0}.modal-side{padding:56px 20px 26px;border-left:1px solid var(--line);background:#fafbfc;display:flex;flex-direction:column;gap:12px}.modal-close{position:absolute;right:15px;top:11px;border:0;background:transparent;color:#98a2b3;font-size:28px;z-index:3}.modal-title{width:100%;border:0;border-bottom:1px solid var(--line);outline:none;font-size:24px;font-weight:850;padding:9px 0 13px}.modal-main>textarea{width:100%;height:105px;margin-top:15px;border:1px solid var(--line);border-radius:12px;padding:12px;resize:vertical;outline:none}.card-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}.side-block{padding:2px 0 12px}.side-block label{margin-top:0}.color-picker{display:flex;gap:8px;flex-wrap:wrap}.color-chip{width:34px;height:34px;border-radius:10px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}.color-chip.active{border-color:#344054;transform:scale(1.05)}.color-chip.none{background:#fff}.color-chip.red{background:rgba(239,68,68,.25)}.color-chip.green{background:rgba(34,197,94,.25)}.color-chip.blue{background:rgba(59,130,246,.25)}.color-chip.yellow{background:rgba(234,179,8,.28)}.modal-section{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h3{margin:0;font-size:16px}.section-note{font-size:11px;color:var(--muted)}.progress-track{height:7px;border-radius:99px;background:#eef1f5;overflow:hidden;margin:12px 0}.progress-bar{height:100%;width:0;background:#22c55e;border-radius:99px;transition:.2s}.checklist-list{display:flex;flex-direction:column;gap:8px}.check-item{display:grid;grid-template-columns:24px 1fr 30px;align-items:center;gap:8px;padding:8px;border-radius:10px}.check-item:hover{background:#f7f8fa}.check-circle{appearance:none;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:50%;display:grid;place-items:center;margin:0;cursor:pointer}.check-circle:checked{background:#22c55e;border-color:#22c55e}.check-circle:checked:after{content:"✓";color:#fff;font-size:13px;font-weight:900}.check-text{border:0;background:transparent;outline:none;width:100%;padding:5px}.check-text.done{text-decoration:line-through;color:#98a2b3}.icon-btn{border:0;background:transparent;color:#98a2b3;font-size:18px}.inline-add{display:flex;gap:8px;margin-top:10px}.inline-add input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px;outline:none}.attachments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:10px 0}.attachment{border:1px solid var(--line);border-radius:12px;background:#fafbfc;overflow:hidden;position:relative}.attachment-preview{height:110px;background:#eef1f5;display:grid;place-items:center;overflow:hidden;text-decoration:none}.attachment-preview img{width:100%;height:100%;object-fit:cover}.file-icon{font-size:34px}.attachment-info{padding:9px 36px 9px 10px}.attachment-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-size{font-size:10px;color:var(--muted);margin-top:3px}.attachment-delete{position:absolute;right:6px;bottom:7px}.upload-btn{display:inline-flex;align-items:center;gap:8px;border:1px dashed #cfd4dc;border-radius:11px;padding:10px 12px;color:#475467;cursor:pointer;background:#fff}.comments-list{display:flex;flex-direction:column;gap:10px;margin:10px 0}.comment{padding:10px 12px;background:#f8fafc;border-radius:12px}.comment-head{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin-bottom:5px}.comment-text{font-size:13px;white-space:pre-wrap;line-height:1.45}.comment-box{width:100%;height:70px;border:1px solid var(--line);border-radius:11px;padding:10px;resize:vertical;outline:none;margin-bottom:8px}.toast{position:fixed;right:20px;bottom:20px;background:#101828;color:#fff;padding:11px 15px;border-radius:11px;z-index:100;box-shadow:var(--shadow)}@media(max-width:800px){.topbar{padding:0 14px}.brand-copy span,.user-name{display:none}.page{padding:24px 14px}.page-head,.board-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:32px}.board-title{font-size:28px;width:90vw}.column{width:min(86vw,316px)}.board-actions{width:100%;justify-content:space-between}.auth-card{padding:24px}.card-modal-panel{display:block;overflow-y:auto}.modal-main{overflow:visible;padding:22px}.modal-side{border-left:0;border-top:1px solid var(--line);padding:18px 22px}.card-settings{grid-template-columns:1fr}.attachments-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.attachments-grid{grid-template-columns:1fr}}


/* v3: checklist and file chips directly on cards */
.board-checklist{margin-top:11px;padding-top:9px;border-top:1px solid rgba(16,24,40,.08)}
.board-check-item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:7px;align-items:start;padding:5px 2px;border-radius:8px;cursor:pointer;user-select:none}
.board-check-item:hover{background:rgba(255,255,255,.46)}
.board-check-circle{appearance:none;width:17px;height:17px;border:2px solid rgba(71,84,103,.42);border-radius:50%;margin:1px 0 0;display:grid;place-items:center;background:rgba(255,255,255,.55);cursor:pointer}
.board-check-circle:checked{background:#22c55e;border-color:#22c55e}
.board-check-circle:checked:after{content:"✓";font-size:11px;line-height:1;color:#fff;font-weight:900}
.board-check-text{font-size:12px;line-height:1.35;color:#344054;overflow-wrap:anywhere}
.board-check-text.done{text-decoration:line-through;color:#98a2b3}
.board-attachments{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(16,24,40,.08)}
.board-attachment{display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:7px;text-decoration:none;color:inherit;padding:6px 7px;border-radius:9px;background:rgba(255,255,255,.54);border:1px solid rgba(16,24,40,.06)}
.board-attachment:hover{background:rgba(255,255,255,.83);border-color:rgba(91,85,231,.18)}
.board-file-icon{font-size:16px;line-height:1;text-align:center}
.board-file-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;min-width:0}
.board-file-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-file-type{font-size:9px;font-weight:850;letter-spacing:.04em;color:#667085;background:rgba(255,255,255,.7);border-radius:6px;padding:2px 5px}
.card-progress{margin-top:7px}


/* v4: modal scrolling */
.card-modal-panel{
  height:min(900px,92vh);
  max-height:92vh;
  min-height:0;
}
.modal-main{
  height:100%;
  min-height:0;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-bottom:48px;
}
.modal-side{
  min-height:0;
  overflow-y:auto;
}
.modal-main::-webkit-scrollbar,.modal-side::-webkit-scrollbar{width:10px}
.modal-main::-webkit-scrollbar-thumb,.modal-side::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:99px;border:3px solid #fff}

/* v4: board layout switch */
.layout-switch{display:flex;gap:3px;padding:3px;border:1px solid var(--line);background:#fff;border-radius:12px}
.layout-btn{border:0;background:transparent;color:#667085;border-radius:8px;padding:7px 9px;font-size:12px;font-weight:750}
.layout-btn.active{background:#f0efff;color:#4f46e5}
.board.vertical{flex-direction:column;min-width:0;width:100%;align-items:stretch}
.board.vertical .column{width:min(900px,100%);max-width:100%}
.board.vertical .cards{width:100%}

/* v4: column reorder + color */
.column.column-moving{opacity:.48;outline:2px dashed #8b85ff}
.column-head{position:relative}
.column-head-actions{display:flex;align-items:center;gap:3px}
.column-drag-handle{border:0;background:transparent;color:#98a2b3;font-size:17px;line-height:1;padding:4px 5px;cursor:grab;border-radius:7px;letter-spacing:-2px}
.column-drag-handle:hover{background:#f2f4f7;color:#475467}
.column-drag-handle:active{cursor:grabbing}
.column-color-wrap{position:relative;display:flex;align-items:center}
.dot-button{width:16px;height:16px;padding:0;border:3px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 1px rgba(16,24,40,.14);cursor:pointer;flex:none}
.column-color-menu{position:absolute;z-index:25;left:-7px;top:25px;display:flex;gap:6px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 30px rgba(16,24,40,.14)}
.column-color-option{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(16,24,40,.12)}
.column-color-option:hover{transform:scale(1.12)}

/* v4: simple Paint */
.paint-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.paint-tool{border:1px solid var(--line);background:#fff;color:#475467;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:700}
.paint-tool.active{background:#f0efff;border-color:#c9c6ff;color:#4f46e5}
.paint-colors{display:flex;gap:6px}
.paint-color{width:27px;height:27px;border-radius:8px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)}
.paint-color.active{border-color:#344054}
.paint-color.black{background:#111827}.paint-color.red{background:#ef4444}.paint-color.blue{background:#3b82f6}.paint-color.green{background:#22c55e}
.paint-size-label{display:flex;align-items:center;gap:7px;font-size:11px;color:#667085}
.paint-size-label select{border:1px solid var(--line);border-radius:9px;padding:7px 8px;background:#fff}
.soft-btn.compact{padding:8px 10px;font-size:12px}
.paint-wrap{width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;touch-action:none}
#drawingCanvas{display:block;width:100%;height:auto;aspect-ratio:1000/420;background:#fff;cursor:crosshair;touch-action:none}
.paint-actions{display:flex;gap:12px;align-items:center;margin-top:10px}

/* drawing indicator */
.card-drawing-badge{font-size:11px;color:#667085}

@media(max-width:800px){
  .card-modal-panel{height:92vh;max-height:92vh;overflow-y:auto}
  .modal-main{height:auto;overflow:visible !important;padding-bottom:28px}
  .modal-side{overflow:visible}
  .board.vertical .column{width:100%}
  .board-actions{flex-wrap:wrap}
  .layout-switch{order:-1}
  .paint-actions{align-items:stretch;flex-direction:column}
}