:root{
	/* Dark palette (default) */
	--bg-1:#0f1724; --bg-2:#0b1220; --card:#000;
	--text:#e6eef8; --accent:#ff8a65; --muted:#94a3b8; --glass: rgba(255,255,255,0.04);
	--success:#38bdf8; --danger:#fb7185;
	/* micro UI colors (rgba strings and gradients) */
	--th-bg: rgba(255,255,255,0.03);
	--td-border: rgba(255,255,255,0.04);
	--spinner-border: rgba(255,255,255,0.08);
	--card-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 2px 8px rgba(255,255,255,0.03);
	--cal-bg: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
	--cal-shadow: 0 8px 30px rgba(255,255,255,0.04);
	--today-border: rgba(255,255,255,0.06);
	--day-hover: rgba(255,255,255,0.03);
	--good-bg: rgba(34,197,94,0.40);
	--bad-bg: rgba(239,68,68,0.40);
	--mixed-bg: rgba(128,128,128,0.40);
	--accent-foreground:#08202a;
}
	body{height:100%;background:#7f287f;color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Microsoft Yahei',sans-serif;padding:28px;line-height:1.6;display:flex;flex-direction:column;align-items:center}

/* Constrain top-level blocks to the previous `main` width */
#date-card, #cards-grid, footer{width:100%;max-width:980px;box-sizing:border-box}
h1{margin-bottom:8px;font-weight:700;color:var(--accent)}
.lead{color:var(--muted);margin-bottom:14px}
label{display:block;margin-top:12px}
label{display:block;margin-top:12px}
button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,138,101,0.12)}
.card{background:var(--card);border-radius:10px;padding:14px;margin-top:16px;box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,0.02)}
table{width:100%;border-collapse:collapse;background:transparent;color:inherit}
thead th{background:var(--th-bg);padding:10px;text-align:left;color:var(--text);font-weight:600}
tbody td{padding:10px;border-top:1px solid var(--td-border)}
tbody tr.enter{transform:translateY(6px);opacity:0}

/* unified chip/button style */
.chip{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;background:var(--glass);color:var(--muted);font-weight:600}

/* calendar basic styles (single definitions) */
.cal-header{background:transparent;padding-bottom:6px}
.cal-nav button{background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--text);padding:6px 8px;border-radius:8px}
.cal-nav button:hover{background:rgba(255,255,255,0.02)}
tbody tr.enter.show{transform:none;opacity:1}

.cal-day{padding:8px;border-radius:8px;text-align:center;color:var(--muted);background:transparent}
.small{font-size:0.92rem;color:var(--muted)}

.spinner{width:48px;height:48px;border-radius:50%;border:4px solid var(--spinner-border);border-top-color:var(--accent);animation:spin 1s linear infinite;margin:8px auto}

.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:8px;vertical-align:middle}
.advice-row{display:flex;gap:12px;align-items:center}

@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--muted)}
@media (max-width:640px){
	body{padding:12px}
	thead th{display:none}
	/* make each table row readable as a distinct card on small screens */
	tbody tr{display:block;margin-bottom:10px;padding:10px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid var(--td-border)}
	tbody td{display:block;border-top:none;padding:6px 8px}
	/* emphasize the time (assumed first cell) when width is narrow */
	tbody td:first-child{font-weight:700;color:var(--text);margin-bottom:6px}
	/* subtle separator between logical rows (in case visuals collapse) */
	tbody tr + tr{border-top:1px solid rgba(255,255,255,0.03)}
}

/* calendar styles */
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cal-nav{display:flex;gap:8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-day{padding:8px;border-radius:8px;text-align:center;color:var(--muted);background:transparent}
.cal-day.today{border:1px dashed var(--today-border)}
.cal-day.selected{background:var(--accent);color:var(--accent-foreground);font-weight:700}
.cal-day:hover{background:var(--day-hover);cursor:pointer}
.cal-day.past:not(.selected){
	color:var(--muted);
	opacity:0.6;
}
.cal-week{color:var(--muted);font-size:0.85rem;text-align:center}
.chip{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;background:var(--glass);color:var(--muted);font-weight:600}

/* stronger specificity: apply background to table cells so gradients are visible */
/* stronger, solid base color plus gradient; use background-color fallback for visibility */
/* use solid fills for row highlights (no gradients) */
tbody tr.row-good td{
	background-color: var(--good-bg) !important;
}
tbody tr.row-bad td{
	background-color: var(--bad-bg) !important;
}
tbody tr.row-mixed td{
	background-color: var(--mixed-bg) !important;
}
tbody tr.row-neutral td{background:transparent;}
tbody tr.table-swatch{display:flex;gap:8px;align-items:center}
/* Responsive cards grid to avoid excessive vertical stacking */
#cards-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;margin-top:16px}
#cards-grid .card{margin-top:0}
#day-info{grid-column:1 / -1}
/* make advice span full width above the timetable */
#advice{grid-column:1 / -1}
/* make timetable span same full width as other cards */
#table{grid-column:1 / -1}

@media (max-width:880px){
	#cards-grid{grid-template-columns:1fr;}
	#day-info{grid-column:auto}
}


/* Light theme overrides */
body[data-theme="light"]{
	--bg-1:#f3e8ff; --bg-2:#efe6ff; --card:#ffffff;
	--text:#0f1724; --accent:#ff6b6b; --muted:#475569; --glass: rgba(2,6,23,0.04);
	--accent-foreground: #ffffff;
	--th-bg: rgba(2,6,23,0.03);
	--td-border: rgba(2,6,23,0.06);
	--spinner-border: rgba(2,6,23,0.06);
	--cal-bg: linear-gradient(180deg, rgba(2,6,23,0.02), transparent);
	--cal-shadow: 0 8px 30px rgba(2,6,23,0.08);
	--today-border: rgba(2,6,23,0.08);
	--day-hover: rgba(2,6,23,0.03);
	--good-grad: rgba(16,185,129,0.08);
	--bad-grad: rgba(239,68,68,0.08);
	--mixed-grad: rgba(245,158,11,0.04);
	--good-bg: rgba(16,185,129,0.06);
	--bad-bg: rgba(239,68,68,0.06);
	--mixed-bg: rgba(128,128,128,0.12);
}

/* apply a visible light background when light theme is active */
body[data-theme="light"] , body[data-theme="light"] html, body[data-theme="light"] body{
	background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
}

/* smooth theme transition */
body{transition:background .25s ease,color .25s ease}
.card{transition:background .2s ease,box-shadow .2s ease,transform .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.7),0 4px 12px rgba(255,255,255,0.03)}
/* only calendar controls should change text color to accent on hover */
.cal-nav button:hover, .cal-day:hover{color:var(--accent)}