/* Dark nebula theme with yellow heart accent 💛 */
:root {
  --bg: #0b0c10;
  --bg-alt: #14161d;
  --panel: #1e2129;
  --text: #f5f7fa;
  --muted: #9aa1b1;
  --accent: #ffc94d; /* yellow heart variant */
  --accent-glow: 255, 201, 77;
  --danger: #ff4d4d;
  --radius: 18px;
  --gradient-accent: linear-gradient(135deg,#ffdd73,#ffbb38 55%,#ffac1f);
  --font-stack: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

/* Light theme overrides */
:root[data-theme='light'] {
  --bg: #fafbfe;
  --bg-alt: #eef1f7;
  --panel: #ffffffd9;
  --text: #21252c;
  --muted: #5b6372;
  --danger: #d53030;
  background:#fff;
}

html[data-theme='light'] body { background: radial-gradient(circle at 30% 20%, #ffffff, #e4e8f2 70%); }
html[data-theme='light'] .day-col { background: rgba(255,255,255,.85); border-color:#d5dae2; }
html[data-theme='light'] .item { background: var(--panel); border:1px solid #e3e7ee; box-shadow:0 4px 12px -4px rgba(0,0,0,.08), 0 0 0 1px #f3f5f9; }
html[data-theme='light'] .badge { background:#e2e6ed; color:#4a5360; }
html[data-theme='light'] .notice { background:#ffffff; border-color:#d7dde6; }
html[data-theme='light'] form input, html[data-theme='light'] form select, html[data-theme='light'] form textarea { background:#ffffff; border-color:#d5dae2; color:var(--text); }
html[data-theme='light'] .tab-bar .tab { background:#edf1f6; border-color:#d5dae2; color:#67707d; }
html[data-theme='light'] .tab-bar .tab.active { color:#222; }
html[data-theme='light'] .login-container { background:#ffffff; border-color:#d4dae3; box-shadow:0 12px 40px -12px rgba(0,0,0,.15); }
html[data-theme='light'] .subtitle { color:#67707d; }
html[data-theme='light'] .day-name .date { background:#eaeff5; color:#67707d; }
html[data-theme='light'] footer { color:#5a6471; }
html[data-theme='light'] .sparkle { opacity:.35; }

* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-stack); background: radial-gradient(circle at 30% 20%, #151821, #050607 70%); color: var(--text); min-height:100vh; position:relative; overflow-x:hidden; }
#bg-layer { position:fixed; inset:0; z-index:0; overflow:hidden; }

h1,h2,h3 { font-weight:600; letter-spacing:1px; }

.header { text-align:center; padding:40px 20px 10px; position:relative; z-index:5; }
.header h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); background: var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 12px rgba(var(--accent-glow), .35); }
.subtitle { color: var(--muted); font-size: .95rem; }

.schedule-grid { width: min(2000px, 96%); margin:40px auto; display:grid; gap:22px; z-index:5; position:inherit }
.schedule-grid.rolling { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); }
.day-col { background: rgba(255,255,255,.03); backdrop-filter: blur(4px); border:1px solid rgba(255,255,255,.06); padding:14px 12px 18px; border-radius: var(--radius); position:relative; overflow:hidden; transition:transform .35s, box-shadow .35s; }
.day-col.today { box-shadow:0 0 0 2px rgba(var(--accent-glow),.5), 0 8px 24px -6px rgba(var(--accent-glow), .25); }
.day-col.today .day-name { color:#222; background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.day-col:hover { transform:translateY(-4px); box-shadow:0 6px 18px -8px rgba(var(--accent-glow),.35); }
.day-col:before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 70% 20%,rgba(var(--accent-glow),.07),transparent 70%); opacity:.7; pointer-events:none; }
.day-name { font-size: .9rem; text-transform:uppercase; letter-spacing:2px; font-weight:600; color: var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.day-name .date { font-size:.65rem; letter-spacing:1px; background:#20242d; padding:2px 6px; border-radius:6px; color:var(--muted); }

.item { --item-accent: var(--accent); position:relative; padding:10px 10px 12px 14px; background: var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:15px; margin-bottom:12px; box-shadow:0 4px 14px -4px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05); animation: floatIn .5s ease; display:block; color:inherit; text-decoration:none; cursor:pointer; border-left:6px solid var(--item-accent); }
.item:last-child { margin-bottom:0; }
.item:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(var(--accent-glow),.35), transparent 60%); opacity:0; transition:.4s; }
.item:hover:before { opacity:.35; }
.item h4 { margin:0 0 4px; font-size: .95rem; font-weight:600; display:flex; align-items:center; gap:6px; }
.item img { display:block; width:100%; border-radius:12px; }
.item .time { font-family: 'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:1px; color: var(--muted); }
.item .desc { font-size:.7rem; color: var(--muted); line-height:1.3; margin-top:4px; }
.item .desc a { color: var(--accent); text-decoration:underline; word-break:break-word; }
.item .desc a:hover { filter:brightness(1.15); }
.item .priority-badge { position:absolute; top:6px; right:8px; font-size:.55rem; background:var(--item-accent); color:#111; padding:2px 6px; border-radius:14px; font-weight:600; letter-spacing:.5px; box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 2px 6px -2px rgba(0,0,0,.6); }
html[data-theme='light'] .item .priority-badge { color:#222; }
.tag { display:inline-flex; background:rgba(var(--accent-glow), .15); color:#222; font-size:.55rem; padding:2px 6px; border-radius:20px; text-transform:uppercase; letter-spacing:1px; font-weight:600; background:var(--gradient-accent); box-shadow:0 2px 4px rgba(var(--accent-glow),.4); }

footer { text-align:center; padding:40px 0 60px; font-size:.75rem; color: var(--muted); z-index:5; position: inherit; }
.social-links { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:10px 0 18px; }
.social-links a { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:var(--text); text-decoration:none; position:relative; overflow:hidden; transition:.35s; }
.social-links a:hover { background:var(--gradient-accent); color:#222; transform:translateY(-4px); box-shadow:0 6px 20px -6px rgba(var(--accent-glow),.55); }
.social-links svg { width:22px; height:22px; display:block; fill:currentColor; }
html[data-theme='light'] .social-links a { background:#f3f5f9; border-color:#d9dfe7; color:#39414c; }
html[data-theme='light'] .social-links a:hover { color:#222; }
.sparkle { position:absolute; width:6px; height:6px; background:var(--accent); border-radius:50%; filter:blur(.5px); animation: sparkle 8s linear infinite; opacity:.45; }

/* Light theme emoji floaters (replace sparkles) */
#bg-layer .bg-emoji { position:absolute; animation: floatEm 14s linear infinite; user-select:none; pointer-events:none; font-family: 'Apple Color Emoji','Segoe UI Emoji',sans-serif; will-change:transform, opacity; }
@keyframes floatEm { from { transform:translate3d(0,0,0) scale(1) rotate(0deg); opacity:0; }
  10% { opacity:.35; }
  50% { opacity:.65; }
  to { transform:translate3d(20px, -60vh, 0) scale(1.2) rotate(18deg); opacity:0; } }
html[data-theme='light'] .sparkle { display:none; }

@keyframes sparkle { from { transform:translateY(0) translateX(0); opacity:.2;} 50% { opacity:1;} to { transform:translateY(60vh) translateX(20vw); opacity:0;} }
@keyframes floatIn { from { transform:translateY(12px); opacity:0;} to { transform:translateY(0); opacity:1;} }

/* Admin */
.admin-wrapper { width:min(1100px,95%); margin:40px auto; }
.table { width:100%; border-collapse: collapse; font-size:.85rem; }
.table th, .table td { padding:8px 10px; border-bottom:1px solid #2c313d; }
.table th { text-align:left; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.btn { appearance:none; background:var(--gradient-accent); border:none; color:#222; padding:8px 14px; border-radius:30px; font-weight:600; cursor:pointer; box-shadow:0 4px 10px -2px rgba(var(--accent-glow),.4); font-size:.7rem; letter-spacing:1px; }
.btn.danger { background:linear-gradient(135deg,#ff7373,#ff4040); color:#fff; }
.form-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:10px; }
form input, form select, form textarea { width:100%; background:#101219; border:1px solid #222934; padding:8px 10px; border-radius:10px; color:var(--text); font:inherit; font-size:.75rem; }
/* Date input tweaks */
input[type=date] { cursor:pointer; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.2); opacity:.8; cursor:pointer; }
html[data-theme='light'] input[type=date]::-webkit-calendar-picker-indicator { filter:none; }
.date-field { position:relative; }
.date-field:after { content:'📅'; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:.9rem; pointer-events:none; opacity:.7; }
html[data-theme='light'] .date-field:after { opacity:.55; }
form textarea { min-height:80px; resize:vertical; }
.notice { background:#16202b; border:1px solid #283342; padding:10px 14px; border-radius:12px; font-size:.7rem; color:var(--muted); margin-bottom:18px; }
.login-container { width: min(380px,90%); margin:120px auto; padding:34px 32px 40px; background:#12151d; border:1px solid #222a33; border-radius:24px; box-shadow:0 12px 40px -10px #000; }
.login-container h2 { margin-top:0; }

/* Tabs (admin) */
.tab-bar .tab { background:#1b2129; border:1px solid #2c313d; padding:10px 14px; border-radius:14px; cursor:pointer; font-size:.7rem; font-weight:600; letter-spacing:1px; color:var(--muted); transition:.25s; }
.tab-bar .tab.active { background:var(--gradient-accent); color:#222; box-shadow:0 4px 14px -4px rgba(var(--accent-glow),.5); }
.section-tab { display:none; }
.section-tab.active { display:block; animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

.badge { font-size:.55rem; background:#263140; padding:2px 6px; border-radius:6px; margin-left:4px; color: var(--muted); }

/* Responsive tweaks */
@media (max-width:900px){
  .schedule-grid.rolling { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:16px; }
  .item { padding:8px 8px 10px; }
  .item h4 { font-size:.8rem; }
  .day-col { padding:12px 10px 16px; }
}

@media (max-width:640px){
  .schedule-grid.rolling { display:flex; flex-direction:column; }
  .day-col { display:flex; flex-direction:column; }
  .day-col.today { order:-1; }
  .day-name { justify-content:space-between; }
  .item { margin-bottom:10px; }
}

/* Theme toggle */
.theme-toggle { position:fixed; top:14px; right:16px; z-index:20; background:#1c222a; color:var(--text); border:1px solid #2c313d; padding:8px 14px; font-size:.65rem; font-weight:600; letter-spacing:1px; border-radius:28px; cursor:pointer; display:flex; align-items:center; gap:6px; box-shadow:0 4px 14px -6px rgba(0,0,0,.6); }
.theme-toggle:hover { background:#242c35; }
html[data-theme='light'] .theme-toggle { background:#ffffff; color:#39414c; border-color:#d5dae2; box-shadow:0 4px 14px -6px rgba(0,0,0,.15); }
html[data-theme='light'] .theme-toggle:hover { background:#f3f6fa; }

/* Live banner */
.live-banner { position:sticky; top:0; z-index:60; display:flex; gap:12px; align-items:center; justify-content:center; padding:10px 18px; font-size:.8rem; font-weight:600; letter-spacing:.5px; background:linear-gradient(90deg,#ff2d55,#ff9d2d); color:#fff; cursor:pointer; box-shadow:0 4px 16px -4px rgba(0,0,0,.45); }
.live-banner .cta { font-weight:700; text-decoration:underline; }
.live-banner .pulse { width:10px; height:10px; background:#fff; border-radius:50%; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:pulse 1.5s ease-out infinite; }
@keyframes pulse { to { box-shadow:0 0 0 18px rgba(255,255,255,0); } }
html[data-theme='light'] .live-banner { box-shadow:0 4px 18px -6px rgba(0,0,0,.18); }