:root{
	--color-bg:#f7f7fb;
	--color-card:#ffffff;
	--color-accent:#0b76ef;
	--color-muted:#6b7280;
	--text-color:#0d1727;
	--input-bg:#ffffff;
	--input-border:#d7dee9;
	--btn-outline-border: rgba(13,22,39,0.12);
	--link-color:var(--color-accent);
	--max-width:900px;
}
/* accessibility helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
*{box-sizing:border-box}
body{font-family:Segoe UI, Roboto, Arial, sans-serif;background:var(--color-bg);color:var(--text-color);margin:0;line-height:1.5}
/* light-mode only: no html.dark overrides */
.container{max-width:var(--max-width);margin:1.5rem auto;padding:0 1rem}
.site-header{background:var(--color-card);border-bottom:1px solid #e6e9ef}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.site-title a{color:var(--color-accent);text-decoration:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:0.5rem}
.nav-item{margin:0}
.nav-item a{color:inherit;text-decoration:none;padding:0.4rem 0.6rem;border-radius:4px}

.hero{padding:2rem 0;text-align:center}
.btn{background:var(--color-accent);color:#fff;padding:0.5rem 0.8rem;border:none;border-radius:6px;text-decoration:none;display:inline-block;box-shadow:0 1px 0 rgba(11,118,239,0.12)}
.btn-outline{background:transparent;border:1px solid var(--btn-outline-border);color:var(--link-color);padding:0.45rem 0.75rem;border-radius:6px}
.btn, .btn-outline{font-weight:600}
.btn-sm{padding:0.25rem 0.5rem;font-size:0.9rem}
.sep{margin:0 0.4rem;color:var(--color-muted)}

.auth-card,.create-note{background:var(--color-card);padding:1.25rem;border-radius:8px;border:1px solid #eef2f6;max-width:460px;margin:1.25rem auto;box-shadow:0 6px 18px rgba(13,22,39,0.04)}
.auth-card h2,.create-note h2{margin-top:0}
.form-row{margin-bottom:0.75rem}
.form-row label{display:block;margin-bottom:0.25rem;font-weight:600;color:var(--text-color)}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="password"],.form-row textarea,.form-row select{width:100%;padding:0.6rem;border:1px solid var(--input-border);border-radius:6px;background:var(--input-bg);color:var(--text-color)}
.form-row input::placeholder{color: #98a0ad}
.form-actions{display:flex;gap:0.5rem;align-items:center}

/* make links visible and consistent */
a{color:var(--link-color)}

/* focus states */
input:focus, textarea:focus, select:focus {outline:3px solid rgba(11,118,239,0.15);outline-offset:2px}

.dashboard-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.note-list{list-style:none;padding:0;margin:0}
.note-item{background:var(--color-card);padding:0.75rem;border-radius:6px;border:1px solid #eef2f6;margin-bottom:0.5rem}
.note-meta{font-size:0.9rem;color:var(--color-muted);margin-bottom:0.5rem}
.muted{color:var(--color-muted)}

/* note item position for badges */
.note-item{position:relative}

/* small age badge in corner */
.note-age{position:absolute;top:8px;right:8px;background:rgba(11,118,239,0.08);color:var(--color-accent);font-size:0.75rem;padding:0.15rem 0.45rem;border-radius:12px;border:1px solid rgba(11,118,239,0.12)}

/* loading overlay */
.loading-overlay{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(255,255,255,0.65);display:flex;align-items:center;justify-content:center;z-index:1000}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(0,0,0,0.08);border-top-color:var(--color-accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.site-footer{padding:1rem 0;text-align:center;color:var(--color-muted)}

.site-header .header-actions{display:flex;align-items:center;gap:0.5rem}

.flash{padding:0.5rem;border-radius:4px;margin-bottom:0.75rem}
.flash.error{background:#fff1f0;color:#9b1c1c;border:1px solid #ffd2d2}
.flash.success{background:#f0fff4;color:#0b6623;border:1px solid #c7f0d8}

/* no prefers-color-scheme overrides — site uses light theme only */

@media (max-width:600px){
	.dashboard-header{flex-direction:column;align-items:flex-start}
	.site-header .container{flex-direction:column;align-items:flex-start;gap:0.5rem}
}