:root{
	--bg:#f4f7fb;
	--panel:#ffffff;
	--text:#0f172a;
	--muted:#64748b;
	--border:rgba(15,23,42,.10);
	--shadow:0 10px 24px rgba(2,6,23,.07);

	/* Akcenty: błękit + zieleń */
	--accent:#0ea5e9;
	--accent2:#22c55e;
	--danger:#ef4444;
	--warn:#f59e0b;

	--r:18px;
	--tap:52px; /* duże touch targety */
	--pad:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	background:linear-gradient(180deg,#ffffff,var(--bg));
	color:var(--text);
	font:16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Shell zajmuje CAŁY ekran */
.app{
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
}

/* Topbar minimalistyczny */
.top{
	position:sticky;
	top:0;
	z-index:10;
	background:rgba(255,255,255,.88);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--border);
	padding:10px 12px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.brand{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
}
.brand .name{font-weight:900;letter-spacing:.2px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .title{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.top .right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Content wypełnia przestrzeń, scrolluje */
.content{
	flex:1;
	padding:12px;
	padding-bottom:86px; /* miejsce na bottomnav */
}

/* Bottom nav pod jedną rękę */
.nav{
	position:fixed;
	left:0;right:0;bottom:0;
	z-index:20;
	background:rgba(255,255,255,.92);
	backdrop-filter:blur(10px);
	border-top:1px solid var(--border);
	padding:10px 10px calc(10px + env(safe-area-inset-bottom));
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:10px;
}

.nav button{
	appearance:none;
	border:1px solid var(--border);
	background:#fff;
	border-radius:16px;
	min-height:54px;
	font-weight:900;
	font-size:14px;
	cursor:pointer;
	box-shadow:0 8px 18px rgba(2,6,23,.06);
}
.nav button.active{border-color:rgba(14,165,233,.35);box-shadow:0 0 0 4px rgba(14,165,233,.12)}

/* Karty / panele minimalistyczne */
.card{
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:var(--r);
	box-shadow:var(--shadow);
	padding:var(--pad);
}
.stack{display:grid;gap:12px}

/* Tiles (pełny kafel klikalny) */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.tiles{grid-template-columns:1fr}}

.tile{
	appearance:none;
	text-align:left;
	border:1px solid var(--border);
	background:#fff;
	border-radius:var(--r);
	padding:18px;
	box-shadow:var(--shadow);
	cursor:pointer;
}
.tile:active{transform:translateY(1px)}
.tile .t{font-weight:900;font-size:18px;margin:0 0 6px 0}
.tile .d{color:var(--muted);margin:0 0 12px 0}
.tile .cta{font-weight:900;color:rgba(15,23,42,.75)}

/* Formularze */
.input{
	width:100%;
	min-height:var(--tap);
	padding:12px 14px;
	border-radius:16px;
	border:1px solid var(--border);
	background:#fff;
	color:var(--text);
	outline:none;
	font-size:16px;
}
.input:focus{border-color:rgba(14,165,233,.45);box-shadow:0 0 0 4px rgba(14,165,233,.14)}

.btn{
	appearance:none;
	border:1px solid var(--border);
	background:#fff;
	color:var(--text);
	min-height:var(--tap);
	padding:12px 14px;
	border-radius:16px;
	cursor:pointer;
	font-size:16px;
	font-weight:900;
	box-shadow:0 8px 18px rgba(2,6,23,.06);
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#38bdf8);border-color:transparent;color:#fff}
.btn.ok{background:linear-gradient(135deg,var(--accent2),#86efac);border-color:transparent;color:#073012}
.btn.danger{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.28);color:#7f1d1d}
.btn.ghost{background:transparent;box-shadow:none}
.btn.small{min-height:44px;font-size:15px;border-radius:14px;box-shadow:none}

.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.space{height:10px}

.hr{height:1px;background:var(--border);margin:12px 0}
.muted{color:var(--muted)}

/* Tabela minimalistyczna */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.td{padding:12px 14px;border:1px solid var(--border);background:#fff;vertical-align:middle}
.td:first-child{border-radius:16px 0 0 16px}
.td:last-child{border-radius:0 16px 16px 0}
@media (max-width:680px){
	.table{border-spacing:0 8px}
	.td{padding:12px}
}

/* Plus/minus */
.qty{display:flex;align-items:center;gap:10px}
.qty .num{min-width:64px;text-align:center;font-size:22px;font-weight:900}
.qty button{width:60px;height:60px;border-radius:18px}

/* Noty */
.note{border:1px solid var(--border);background:rgba(14,165,233,.07);border-radius:16px;padding:12px 14px;color:rgba(15,23,42,.85)}
.note.danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22)}
.note.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.22)}

/* Sheet (modal) */
.sheet-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.35);z-index:30}
.sheet{
	position:fixed;
	left:0;right:0;bottom:0;
	z-index:31;
	background:#fff;
	border-radius:22px 22px 0 0;
	box-shadow:0 -18px 50px rgba(2,6,23,.20);
	padding:14px;
	max-height:82vh;
	overflow:auto;
}
.sheet h3{margin:0 0 10px 0;font-size:18px}
.sheet .sub{color:var(--muted);font-size:14px;margin:-6px 0 12px 0}

/* FAB */
.fab{
	position:fixed;
	right:14px;
	bottom:88px;
	z-index:25;
	width:60px;
	height:60px;
	border-radius:20px;
	border:none;
	background:linear-gradient(135deg,var(--accent),#38bdf8);
	color:#fff;
	font-size:28px;
	font-weight:900;
	box-shadow:0 14px 28px rgba(2,6,23,.18);
	cursor:pointer;
}
.fab:active{transform:translateY(1px)}