*{box-sizing:border-box}
:root{
    --navy:#233160;
    --purple:#6D2F90;
    --bg:#f5f7fb;
    --panel:#ffffff;
    --text:#1f2937;
    --muted:#8b95a5;
    --border:#e5e7eb;
    --shadow:0 12px 30px rgba(15,23,42,.12);
}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--purple))}
.auth-card{width:390px;background:white;padding:34px;border-radius:24px;box-shadow:var(--shadow)}
.auth-card h1{margin:0 0 8px;font-size:30px;color:var(--navy)}
.auth-card p{color:#667085;margin-bottom:22px}
.auth-card label{display:block;margin:12px 0 6px;font-weight:700}
.auth-card input,.create-board input{width:100%;padding:13px;border:1px solid var(--border);border-radius:12px}
.auth-card button,.create-board button{width:100%;margin-top:16px;padding:13px;border:0;border-radius:12px;background:var(--navy);color:white;font-weight:800;cursor:pointer}
.alert{padding:12px;background:#fee2e2;color:#991b1b;border-radius:12px;margin-bottom:12px}
.dash-header{height:70px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.dash-header h1{color:var(--navy)}
.dashboard{max-width:1100px;margin:35px auto;padding:0 20px}
.create-board{background:white;padding:24px;border-radius:22px;box-shadow:var(--shadow);margin-bottom:24px}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.board-card{background:white;padding:24px;border-radius:22px;box-shadow:var(--shadow);min-height:160px;transition:.2s}
.board-card:hover{transform:translateY(-4px)}
.board-icon{width:54px;height:54px;border-radius:15px;background:#d9f2f2;display:flex;align-items:center;justify-content:center;font-size:28px}
.board-body{overflow:hidden}
.board-body.dark{
    --bg:#111827;
    --panel:#1f2937;
    --text:#f9fafb;
    --muted:#9ca3af;
    --border:#374151;
    background:#0b1020;
}
.topbar{height:70px;background:var(--panel);border-bottom:1px solid var(--border);display:grid;grid-template-columns:300px 1fr 340px;align-items:center;padding:0 20px;position:fixed;top:0;left:0;right:0;z-index:50}
.crumb{display:flex;gap:10px;color:var(--muted);align-items:center}
.crumb strong{color:var(--text)}
#boardTitle{justify-self:center;text-align:center;border:0;background:transparent;color:var(--text);font-size:25px;font-weight:900;outline:none}
.top-actions{justify-self:end;display:flex;gap:10px;align-items:center}
.top-actions button,.top-actions a{border:1px solid var(--border);background:transparent;color:var(--text);padding:9px 12px;border-radius:12px;cursor:pointer}
.toolbar{position:fixed;top:70px;left:0;bottom:0;width:78px;background:var(--panel);border-right:1px solid var(--border);z-index:40;padding:14px 8px;display:flex;flex-direction:column;gap:10px}
.toolbar button{height:58px;border:0;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;font-size:20px}
.toolbar button:hover,.toolbar button.active{background:rgba(109,47,144,.12)}
.toolbar span{display:block;font-size:11px;margin-top:3px}
#status{position:fixed;top:82px;left:92px;z-index:55;color:var(--muted);font-size:13px}
#canvasWrap{position:fixed;top:70px;left:78px;right:0;bottom:0;overflow:auto;background:var(--bg)}
.canvas-grid{position:relative;width:4200px;height:2600px;background-image:radial-gradient(var(--border) 1px, transparent 1px);background-size:18px 18px;transform-origin:0 0}
#connectionsLayer{position:absolute;left:0;top:0;width:4200px;height:2600px;z-index:2;pointer-events:none;overflow:visible}
.connector-path{stroke:#233160;stroke-width:3;fill:none;marker-end:url(#arrowHead)}
.connector-hit{stroke:transparent;stroke-width:14;fill:none;pointer-events:stroke;cursor:pointer}
.card{position:absolute;background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 22px rgba(15,23,42,.09);z-index:3;overflow:hidden;resize:both;min-width:160px;min-height:95px}
.card.selected{outline:3px solid rgba(109,47,144,.35)}
.card-head{height:38px;display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:move;border-bottom:1px solid var(--border);font-weight:800}
.card-icon{font-size:17px}
.card-title{border:0;background:transparent;color:var(--text);font-weight:800;width:100%;outline:none}
.card-content{padding:12px;height:calc(100% - 38px);overflow:auto}
.card textarea{width:100%;height:100%;border:0;outline:none;background:transparent;color:var(--text);resize:none;font-size:14px}
.title-card .card-content textarea{font-size:26px;font-weight:900}
.boardbox-card .board-thumb{height:75px;border-radius:14px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;font-size:34px;background:rgba(35,49,96,.15)}
.file-card a{display:flex;align-items:center;gap:10px;background:rgba(35,49,96,.08);padding:14px;border-radius:14px}
.image-card img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.check-item{display:flex;gap:8px;align-items:center;margin:8px 0}
.check-item input[type=text]{border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);outline:none;width:100%;padding:6px}
.add-check{border:0;background:rgba(109,47,144,.12);color:var(--text);border-radius:10px;padding:7px 10px;cursor:pointer}
.kanban-card{overflow:auto}
.kanban-board{display:flex;gap:12px;padding:12px;height:100%}
.kanban-col{min-width:210px;background:rgba(148,163,184,.14);border:1px solid var(--border);border-radius:15px;padding:10px;display:flex;flex-direction:column}
.kanban-col-title{font-weight:900;margin-bottom:8px;border:0;background:transparent;color:var(--text);outline:none}
.kanban-task{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px;margin-bottom:8px;cursor:grab}
.add-task{border:0;background:rgba(35,49,96,.12);color:var(--text);border-radius:10px;padding:8px;cursor:pointer}
.floating-panel{position:fixed;right:22px;top:94px;width:220px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:18px;padding:16px;z-index:80}
.hidden{display:none}
.floating-panel label{display:block;font-size:12px;color:var(--muted);margin-top:10px}
.floating-panel input,.floating-panel select,.floating-panel button{width:100%;margin-top:6px;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text)}
#deleteCard{background:#ef4444;color:white;border:0;margin-top:14px}
.repo-panel{position:fixed;right:-360px;top:70px;bottom:0;width:360px;background:var(--panel);border-left:1px solid var(--border);z-index:70;padding:18px;transition:.25s;box-shadow:var(--shadow);overflow:auto}
.repo-panel.open{right:0}
.repo-head{display:flex;justify-content:space-between;align-items:center}
.repo-head button{border:0;background:transparent;font-size:25px;color:var(--text);cursor:pointer}
#repoUpload{width:100%;border:1px dashed var(--border);padding:14px;border-radius:14px}
.repo-item{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:10px;margin-top:10px;background:rgba(148,163,184,.08);cursor:grab}
.repo-thumb{width:52px;height:52px;border-radius:10px;background:rgba(35,49,96,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}
.repo-thumb img{width:100%;height:100%;object-fit:cover}
.repo-name{font-size:13px;word-break:break-word}
.drop-hover{outline:3px dashed var(--purple);outline-offset:-10px}
@media(max-width:900px){
    .topbar{grid-template-columns:1fr;gap:4px;height:110px}
    .toolbar{top:110px}
    #canvasWrap{top:110px}
}