:root{
	--bg:#0b1020;
	--bg-elev:#111834;
	--text:#e6e9f2;
	--muted:#9aa3b2;
	--primary:#22c55e;
	--danger:#ef4444;
	--accent:#38bdf8;
	--ring:rgba(56,189,248,.4)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
	background:linear-gradient(180deg,#0b1020 0%,#0d1328 100%);
	color:var(--text);
	-webkit-tap-highlight-color:transparent
}
#app{
	height:100dvh;
	display:flex;
	flex-direction:column
}
.app-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 20px;
	background:rgba(11,16,32,.8);
	backdrop-filter:saturate(140%) blur(10px);
	border-bottom:1px solid rgba(255,255,255,.06)
}
.app-bar h1{margin:0;font-size:18px;letter-spacing:.3px}
.icon-btn{background:none;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:8px 12px;border-radius:10px}
.content{flex:1;display:flex;flex-direction:column;gap:20px;padding:24px 24px 90px;max-width:720px;margin:0 auto;width:100%}
.view{display:none}
.view.active{display:block}
.timer{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:12px 0}
.time{font-variant-numeric:tabular-nums;letter-spacing:1px;font-size:56px;font-weight:700}
.subtime{color:var(--muted);display:flex;gap:8px;align-items:baseline}
.subtime .label{font-size:12px;color:var(--muted)}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.btn{appearance:none;outline:none;border:none;background:var(--bg-elev);color:var(--text);padding:14px 16px;border-radius:14px;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 20px rgba(0,0,0,.25);transition:transform .08s ease,background .2s ease, box-shadow .2s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(180deg,#16a34a,#22c55e);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px rgba(34,197,94,.35)}
.btn.danger{background:linear-gradient(180deg,#b91c1c,#ef4444);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px rgba(239,68,68,.35)}
.btn:disabled{opacity:.5;filter:grayscale(.2)}
.laps{flex:1;overflow:auto;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:8px}
.laps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.laps li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.laps .lap-time{font-variant-numeric:tabular-nums}

/* form */
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:8px}
.field-row{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 12px}
.field-row input{width:96px;appearance:textfield;background:transparent;border:none;outline:none;color:var(--text);font-size:18px;text-align:center}
.field-row span{color:var(--muted)}

/* card */
.card{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:12px}
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:10px 4px}
.switch-row input{width:42px;height:24px}

/* chat removed styles kept intentionally if reused */
.chat{display:flex;flex-direction:column;height:100%;gap:10px}
.chat-messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.chat-input{display:flex;gap:8px}
.chat-input input{flex:1;padding:12px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--text);outline:none}
.chat-input button{padding:0 16px;border-radius:20px}
.message{display:flex}
.message.user{justify-content:flex-end}
.message.ai{justify-content:flex-start}
.message .bubble{max-width:80%;padding:10px 14px;border-radius:16px}
.message.user .bubble{background:linear-gradient(180deg,#0ea5e9,#38bdf8);color:white;border-bottom-right-radius:4px}
.message.ai .bubble{background:rgba(255,255,255,.06);color:var(--text);border-bottom-left-radius:4px}

/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 14px;background:rgba(11,16,32,.85);backdrop-filter:saturate(140%) blur(10px);border-top:1px solid rgba(255,255,255,.06)}
.tab{appearance:none;background:transparent;border:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:12px;font-weight:600}
.tab small{font-size:10px}
.tab.active{color:var(--text);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}

@media (min-width:480px){
	.time{font-size:64px}
}