*{box-sizing:border-box;font-family:"SF Pro Display","SF Pro Text","-apple-system",system-ui,Arial,sans-serif;}
:root{
	--bg:radial-gradient(circle at 20% 20%,#f5f7fb 0,#eef1f7 30%,#e7ecf5 60%,#e4e9f3 100%);
	--card:#fff;
	--text:#0f172a;
	--muted:#6b7280;
	--border:#e5e7eb;
	--shadow:0 20px 60px rgba(15,23,42,0.07);
	--primary:#111827;
	--primary-strong:#1f2937;
	--accent:#4f46e5;
	--danger:#dc2626;
	--chip:#f3f4f6;
	--focus:0 0 0 3px rgba(79,70,229,0.18);
}
[data-theme="dark"]{
	--bg:radial-gradient(circle at 20% 20%,#0f172a 0,#0b1221 35%,#0a0f1d 70%,#070b14 100%);
	--card:#0f172a;
	--text:#e5e7eb;
	--muted:#9ca3af;
	--border:#1f2937;
	--shadow:0 20px 60px rgba(0,0,0,0.4);
	--primary:#e5e7eb;
	--primary-strong:#f9fafb;
	--accent:#8b5cf6;
	--danger:#f87171;
	--chip:#111827;
	--focus:0 0 0 3px rgba(139,92,246,0.35);
}
body{margin:0;background:var(--bg);color:var(--text);display:flex;justify-content:center;min-height:100vh;padding:1rem;transition:background .3s ease,color .3s ease}
main{width:100%;max-width:1040px;padding:1.5rem 1.75rem 2.5rem;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);transition:background .3s ease,border-color .3s ease,color .3s ease}

.skip-link{position:absolute;left:-999px;top:-999px;background:var(--card);color:var(--text);padding:.75rem 1rem;border-radius:10px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,0.15);z-index:10}
.skip-link:focus{left:1rem;top:1rem}

.hero{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.25rem;margin-bottom:1rem;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:0.1em;font-size:.78rem;color:var(--muted);margin:0 0 .25rem}
h1{margin:0;font-size:2.4rem;letter-spacing:-0.02em}
.lead{margin:.35rem 0 0;color:var(--muted);max-width:38ch}

.quote-card{flex:1 1 260px;min-width:260px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,#eaf0ff),color-mix(in srgb,var(--card) 92%,#dfe7f5));border:1px solid var(--border);border-radius:14px;padding:1rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3)}
.quote-label{margin:0;color:var(--muted);font-size:.85rem;font-weight:600;letter-spacing:0.02em}
blockquote{margin:.4rem 0 1rem;font-size:1rem;font-weight:600;color:var(--text);line-height:1.4}
#new-quote{border:1px solid var(--border);background:var(--card);color:var(--text);padding:.45rem .85rem;border-radius:10px;font-weight:600;cursor:pointer;box-shadow:0 10px 30px rgba(99,102,241,0.08)}
#new-quote:hover{background:color-mix(in srgb,var(--card) 90%,var(--accent) 10%)}

.top-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.top-left{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.metrics{display:flex;gap:.75rem;flex-wrap:wrap}
.metric{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.6rem .75rem;min-width:100px;box-shadow:0 10px 24px rgba(0,0,0,0.05)}
.metric-label{margin:0;color:var(--muted);font-size:.85rem;font-weight:600}
.metric-value{margin:.1rem 0 0;font-size:1.2rem;font-weight:700;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.top-right{display:flex;gap:.5rem;flex-wrap:wrap}

form{display:grid;gap:1rem;margin-bottom:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:0 12px 34px rgba(15,23,42,0.05)}
label{font-weight:600;color:var(--text);display:block}
input,textarea,select{width:100%;margin-top:.35rem;padding:.65rem .7rem;border:1px solid #cfd8e3;border-radius:10px;background:color-mix(in srgb,var(--card) 96%,#f9fafb);transition:box-shadow .15s ease,border-color .15s ease;background-clip:padding-box;font-variant-numeric:tabular-nums;color:var(--text)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%,var(--card))}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus);background:var(--card)}
.weight-row .weight-input{display:flex;gap:.5rem;align-items:center}
select{width:auto;min-width:72px}
.helper{margin:-.35rem 0 0;color:var(--muted);font-size:.9rem}

button{padding:.72rem 1.2rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-strong));color:#fff;font-weight:700;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,0.12);transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
button:hover{opacity:.93;transform:translateY(-1px);box-shadow:0 16px 36px rgba(0,0,0,0.16)}
button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}
.ghost{background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:0 10px 24px rgba(0,0,0,0.05)}
.ghost:hover{background:color-mix(in srgb,var(--card) 85%,var(--accent) 15%);color:var(--text)}
.chip{background:var(--chip);color:var(--text);border:1px solid var(--border);padding:.4rem .8rem;border-radius:999px;font-weight:600;box-shadow:none}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 15%,var(--chip));border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}

#chart-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem;margin-bottom:1.25rem;box-shadow:0 12px 34px rgba(15,23,42,0.05)}
#chart-card header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}
#chart-card h2{margin:0;font-size:1.1rem;letter-spacing:-0.01em}
.muted{color:var(--muted);font-size:.92rem;margin:0}
.chart-controls{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;width:100%}

#log-list{display:grid;gap:1rem}
#log-list article{border:1px solid var(--border);border-radius:12px;padding:1rem;background:var(--card);box-shadow:0 10px 28px rgba(15,23,42,0.04);opacity:0;transform:translateY(6px);animation:fadeIn .3s ease forwards}
#log-list h2{margin:0 0 .35rem;letter-spacing:-0.01em}
#log-list p{margin:.25rem 0;color:var(--text)}
.entry-actions{display:flex;gap:.5rem;margin-top:.65rem}
.btn-danger{background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 70%,#7f1d1d));color:#fff;border:none}
.sparkline{height:32px;width:100%;margin-top:.5rem}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--border);border-radius:12px;padding:1.25rem;color:var(--muted);background:var(--card)}
.error{color:#c00;font-weight:600}

#snackbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--card);padding:.85rem 1.1rem;border-radius:12px;box-shadow:0 18px 38px rgba(0,0,0,0.3);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:20}
#snackbar.show{opacity:1;transform:translate(-50%,-4px)}

.focus-visible:focus-visible{outline:none;box-shadow:var(--focus)}

@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}

@media (max-width:720px){
	main{padding:1.1rem 1.1rem 2rem}
	.hero{flex-direction:column;align-items:flex-start}
	h1{font-size:2rem}
	.top-bar{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
	*{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}