:root{
  --bg: #f6f8fb; /* light background */
  --card: #ffffff;
  --text: #0b1220;
  --muted: #54637a;
  --accent: #5b9df6; /* light blue */
  --accent-2: #60e3f0; /* cyan */
  --ring: #5b9df6;
  --border: #e6eaf1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  background: var(--bg);
  color:var(--text);
}
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; backdrop-filter: saturate(1.2) blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:600}
.brand .logo{font-size:1.3rem}
.tabs{display:flex; align-items:center; gap:.5rem}
.tab, .ghost{
  background:transparent; color:var(--text); border:1px solid var(--border);
  padding:.5rem .8rem; border-radius:999px; cursor:pointer; font-weight:600;
}
.tab.active{border-color:var(--accent); box-shadow: 0 0 0 2px rgba(91,157,246,.25) inset}
.ghost{opacity:.85}
.ghost:hover{opacity:1}

main{max-width:960px; margin:24px auto; padding:0 16px 80px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px; padding:20px; box-shadow:0 10px 30px rgba(10, 20, 40, .05);
}
.card h1{margin:0 0 .5rem; font-size:1.6rem}
.muted{color:var(--muted)}

.stack{display:grid; gap:14px}
.field label{display:block; font-weight:600; margin-bottom:.35rem}
.field input[type="text"], .field textarea{
  width:100%; border-radius:12px; background:#fff; color:var(--text);
  border:1px solid var(--border); padding:.8rem; outline:none;
}
.field input:focus, .field textarea:focus{border-color:var(--ring); box-shadow:0 0 0 3px rgba(91,157,246,.25)}

.primary{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0b1220; font-weight:800; border:none; padding:.9rem 1rem; border-radius:12px; cursor:pointer;
}
.primary.small{padding:.6rem .8rem; font-size:.95rem}
.primary:hover{filter:brightness(1.05)}
.status{min-height:1.2rem}

/* Dropzone */
.dropzone{position:relative; border:2px dashed var(--border); border-radius:12px; padding:18px; text-align:center; background:#fbfdff}
.dropzone.drag{border-color: var(--accent); background: #f0f6ff}
.dropzone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
#dropLabel{pointer-events:none; color:var(--muted)}

/* Progress */
.progress{position:relative; height:10px; background:#eef3fb; border-radius:999px; overflow:hidden; margin-top:8px}
.progress .bar{position:absolute; inset:0 80% 0 0; animation: indet 1.2s linear infinite; background: linear-gradient(90deg, var(--accent), var(--accent-2))}
.progress .progress-text{display:block; margin-top:8px; font-size:.9rem; color:var(--muted)}
@keyframes indet{0%{left:-40%; right:100%} 50%{left:30%; right:30%} 100%{left:100%; right:-40%}}

/* Results */
.results-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.results-header .actions{display:flex; flex-wrap:wrap; gap:8px;}
@media (max-width:600px){
  .results-header { flex-direction: column; align-items: flex-start; }
  .results-header .actions { width: 100%; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
  .results-header .actions button { flex: 1 1 auto; width: auto; margin-bottom: 8px; }
}
.events{display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px;}
.event-card{border:1px solid var(--border); border-radius:14px; padding:12px; background:#fff; display:flex; gap:10px}
.event-card input[type=checkbox]{margin-top:2px}
.event-meta{font-size:.9rem; color:var(--muted)}
.event-title{font-weight:700}
.event-desc{margin-top:4px; font-size:.9rem; color:var(--text);}
.event-reminder{margin-top:4px; font-size:.85rem; color:var(--muted); font-style:italic;}
.pager{display:flex; align-items:center; gap:10px; justify-content:center; margin-top:12px}