:root{
	--bg:#f6f8fb;
	--card:#ffffff;
	--text:#121a2d;
	--muted:#667085;
	--border:#e6eaf0;
	--shadow:0 12px 30px rgba(14, 20, 40, 0.10);
	--shadow2:0 6px 18px rgba(14, 20, 40, 0.08);
	--radius:16px;
	--radius2:12px;
	--pad:16px;

	--todo:#3f6bff;
	--doing:#f09619;
	--done:#32be91;

	--tap:48px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background:var(--bg);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; }

.wrap{
	padding:16px;
	max-width:680px;
	margin:0 auto;
}

.topbar{
	position:sticky;
	top:0;
	z-index:20;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:12px 14px;
	background:rgba(246,248,251,0.9);
	backdrop-filter: blur(10px);
	border-bottom:1px solid var(--border);
}

.topbar-title{
	font-weight:800;
	letter-spacing:-0.02em;
}

.topbar-link{
	display:inline-flex;
	align-items:center;
	height:40px;
	padding:0 12px;
	border-radius:12px;
	border:1px solid var(--border);
	background:#fff;
	box-shadow:var(--shadow2);
}

header button{
	height:40px;
	padding:0 12px;
	border-radius:12px;
	border:1px solid var(--border);
	background:var(--text);
	color:#fff;
	box-shadow:var(--shadow2);
}

.row{ display:flex; gap:12px; align-items:center; }

#newBoard{
	height:var(--tap);
	padding:0 14px;
	border-radius:14px;
	border:1px solid var(--border);
	background:#fff;
	box-shadow:var(--shadow2);
	font-weight:700;
}

.muted{ color:var(--muted); margin:12px 0 0; }

.board{
	display:block;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow2);
	padding:14px 14px;
	margin-top:12px;
}
.board-name{
	font-weight:800;
	letter-spacing:-0.02em;
}

.col{
	margin-top:18px;
}
.col h2{
	margin:0 0 10px;
	font-size:14px;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--muted);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.col h2 .pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:6px 10px;
	border-radius:999px;
	border:1px solid var(--border);
	background:#fff;
	box-shadow:var(--shadow2);
	font-weight:800;
	letter-spacing:0;
	text-transform:none;
	color:var(--text);
}
.pill .dot{
	width:10px; height:10px; border-radius:50%;
	background:var(--todo);
}
.col.doing h2 .dot{ background:var(--doing); }
.col.done  h2 .dot{ background:var(--done); }

.task{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow2);
	padding:12px 12px;
	margin-bottom:10px;
}
.task-title{
	font-weight:800;
	letter-spacing:-0.01em;
	line-height:1.2;
}

.task-actions{
	display:flex;
	gap:8px;
	margin-top:10px;
}
.task-actions button{
	height:38px;
	padding:0 12px;
	border-radius:12px;
	border:1px solid var(--border);
	background:#fff;
	box-shadow:none;
	color:var(--text);
	font-weight:700;
}
.task-actions .primary{
	background:var(--text);
	color:#fff;
	border-color:var(--text);
}
.task-actions .danger{
	color:#b42318;
	border-color:#f5c6c1;
	background:#fff;
}

.link{
	background:none;
	border:none;
	padding:0;
	color:inherit;
	cursor:pointer;
	font-weight:800;
}

.error{
	color:#b42318;
	background:#fff;
	border:1px solid #f5c6c1;
	padding:10px 12px;
	border-radius:12px;
}

/* Auth */
body.auth{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
}
.auth-card{
	width:100%;
	max-width:420px;
	background:#fff;
	border:1px solid var(--border);
	border-radius:20px;
	box-shadow:var(--shadow);
	padding:18px;
}
.auth-card h1{
	margin:0 0 14px;
	letter-spacing:-0.03em;
}
.auth-card label{
	display:block;
	margin:12px 0 6px;
	color:var(--muted);
	font-weight:700;
	font-size:13px;
}
.auth-card input[type="email"],
.auth-card input[type="password"]{
	width:100%;
	height:48px;
	padding:0 12px;
	border-radius:14px;
	border:1px solid var(--border);
	outline:none;
}
.auth-card button{
	width:100%;
	height:48px;
	margin-top:14px;
	border-radius:14px;
	border:1px solid var(--text);
	background:var(--text);
	color:#fff;
	font-weight:800;
}
.check{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:10px;
	color:var(--muted);
}

/* Bottom sheet */
.sheet-overlay{
	position:fixed;
	inset:0;
	background:rgba(10, 12, 20, 0.35);
	backdrop-filter: blur(2px);
	z-index:1000;
	display:none;
}
.sheet{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:1001;
	display:none;
	background:#fff;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	box-shadow:0 -18px 60px rgba(10,12,20,0.22);
	padding:14px;
}
.sheet .grab{
	width:56px;
	height:5px;
	border-radius:999px;
	background:#e7ecf3;
	margin:6px auto 12px;
}
.sheet h3{
	margin:0 0 12px;
	font-size:16px;
	letter-spacing:-0.01em;
}
.sheet .field label{
	display:block;
	margin:10px 0 6px;
	color:var(--muted);
	font-weight:700;
	font-size:13px;
}
.sheet input[type="text"],
.sheet textarea{
	width:100%;
	border:1px solid var(--border);
	border-radius:14px;
	padding:12px;
	outline:none;
}
.sheet textarea{ min-height:90px; resize:vertical; }
.sheet .actions{
	display:flex;
	gap:10px;
	margin-top:12px;
}
.sheet .actions button{
	flex:1;
	height:46px;
	border-radius:14px;
	border:1px solid var(--border);
	background:#fff;
	font-weight:800;
}
.sheet .actions .primary{
	background:var(--text);
	border-color:var(--text);
	color:#fff;
}
.sheet .actions .danger{
	border-color:#f5c6c1;
	color:#b42318;
}

.task.swipe{
	position:relative;
	overflow:hidden;
	padding:0;
}

.swipe-actions{
	position:absolute;
	top:0; right:0; bottom:0;
	display:flex;
	gap:8px;
	align-items:center;
	padding:12px;
}

.swipe-actions button{
	height:42px;
	padding:0 12px;
	border-radius:12px;
	border:1px solid var(--border);
	background:#fff;
	font-weight:800;
}

.swipe-content{
	padding:12px;
	background:var(--card);
	border-radius:var(--radius);
	transform:translateX(0);
	transition:transform 120ms ease;
	will-change:transform;
}

.task.swipe.open .swipe-content{
	transform:translateX(-210px); /* width of revealed actions; tune */
}

/* Boards: row wrapper + drag handle + menu */
.board-row{
	display:flex;
	gap:10px;
	align-items:stretch;
	margin-top:12px;
}
.board-row .board{
	flex:1;
	margin-top:0;
}
.board-drag,
.board-menu{
	width:48px;
	border-radius:14px;
	border:1px solid var(--border);
	background:#fff;
	box-shadow:var(--shadow2);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:900;
	color:var(--muted);
	user-select:none;
	-webkit-user-select:none;
}
.board-drag{ touch-action:none; }
.board-menu{ color:var(--text); }

/* Swipe tasks */
.task.swipe{
	position:relative;
	overflow:hidden;
	padding:0;
}
.swipe-actions{
	position:absolute;
	top:0; right:0; bottom:0;
	display:flex;
	gap:8px;
	align-items:center;
	padding:12px;
}
.swipe-content{
	padding:12px;
	background:var(--card);
	border-radius:var(--radius);
	transform:translateX(0);
	transition:transform 120ms ease;
	will-change:transform;
}
.task.swipe.open .swipe-content{
	transform:translateX(-230px);
}

/* Task top row + drag handle */
.task-top{
	display:flex;
	gap:10px;
	align-items:center;
}
.drag-handle{
	width:30px;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	border:0;
	background:#fff;
	color:var(--muted);
	font-weight:900;
	cursor: pointer;
}

.board-row{
	display:flex;
	gap:10px;
	align-items:stretch;
	margin-top:12px;
}
.board-row .board{
	flex:1;
	margin-top:0;
	display:block;
}
.board-drag,
.board-menu{
	width:48px;
	border-radius:14px;
	border:1px solid var(--border);
	background:#fff;
	box-shadow:var(--shadow2);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:900;
	color:var(--muted);
	cursor: pointer;
}
.board-drag{ touch-action:none; cursor:grab; }
.board-menu{ color:var(--text); }

.board-menu svg,
.board-drag svg,
.drag-handle svg {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* No inline "Empty" labels inside columns */

/* Keep Done visible (no collapse). Optional: give empty columns a little minimum height */
#todo, #doing, #done{ min-height: 24px; }

/* Optional: while dragging you can style drop targets */
body.dragging #todo,
body.dragging #doing,
body.dragging #done{
	outline: 2px dashed rgba(102,112,133,0.35);
	outline-offset: 6px;
}