*{box-sizing:border-box;margin:0;padding:0}
:root{
  --radius:1.25rem;
  --background:oklch(0.24 0.11 260);
  --foreground:oklch(0.98 0 0);
  --card:oklch(0.28 0.10 260);
  --muted:oklch(0.32 0.09 260);
  --muted-foreground:oklch(0.78 0.04 260);
  --border:oklch(0.39 0.09 260);
  --accent:oklch(0.36 0.10 260);
  --primary:oklch(0.98 0 0);
  --primary-foreground:oklch(0.24 0.11 260);
  --ring:oklch(0.65 0.16 260);
  --gradient-page:radial-gradient(1200px 600px at 80% -10%, oklch(0.37 0.16 260 / 0.8), transparent 60%),
                  radial-gradient(900px 500px at -10% 20%, oklch(0.31 0.14 260 / 0.75), transparent 60%),
                  var(--background);
  --gradient-card:linear-gradient(160deg, oklch(0.30 0.10 260 / 0.96), oklch(0.25 0.10 260 / 0.96));
  --shadow-card:0 30px 80px -40px oklch(0 0 0 / 0.8), 0 0 0 1px oklch(1 0 0 / 0.04) inset;
}
html.light{
  --background:oklch(0.985 0 0);
  --foreground:oklch(0.18 0.01 260);
  --card:oklch(1 0 0);
  --muted:oklch(0.96 0.005 260);
  --muted-foreground:oklch(0.45 0.01 260);
  --border:oklch(0.9 0.005 260);
  --accent:oklch(0.95 0.005 260);
  --primary:oklch(0.18 0.01 260);
  --primary-foreground:oklch(0.985 0 0);
  --gradient-page:radial-gradient(1200px 600px at 80% -10%, oklch(0.92 0.01 260 / 0.7), transparent 60%),
                  radial-gradient(900px 500px at -10% 20%, oklch(0.94 0.01 260 / 0.7), transparent 60%),
                  var(--background);
  --gradient-card:linear-gradient(160deg, oklch(1 0 0), oklch(0.97 0.005 260));
  --shadow-card:0 30px 80px -40px oklch(0.5 0.02 260 / 0.25), 0 0 0 1px oklch(0 0 0 / 0.04) inset;
}
html,body{background:var(--gradient-page);color:var(--foreground);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.page{max-width:1280px;margin:0 auto;padding:1.5rem 1rem 4rem}
@media(min-width:640px){.page{padding:1.5rem 1.5rem 4rem}}
@media(min-width:1024px){.page{padding:1.5rem 2.5rem 4rem}}

.muted{color:var(--muted-foreground)}
.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gap{gap:.75rem}

.hdr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:2.75rem;height:2.75rem;border-radius:1rem;background:var(--gradient-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;box-shadow:var(--shadow-card)}
.brand-name{font-weight:600}
.brand-tag{font-size:.75rem;color:var(--muted-foreground)}
.nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

.surface-card{background:var(--gradient-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card)}

.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--card) 70%,transparent);font-size:.85rem;color:var(--foreground);transition:background .2s}
.pill:hover{background:var(--accent)}
.pill.langgrp{padding:.25rem;gap:.25rem}
.lang{padding:.35rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;color:var(--muted-foreground)}
.lang.active{background:var(--primary);color:var(--primary-foreground)}

.btn-primary{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.1rem;border-radius:999px;background:var(--primary);color:var(--primary-foreground);font-weight:600;font-size:.9rem}
.btn-primary:hover{opacity:.9}

.icon-btn{width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--card) 60%,transparent)}
.icon-btn:hover{background:var(--accent)}

.hero{display:grid;gap:1.25rem;margin-bottom:1.5rem}
@media(min-width:1024px){.hero{grid-template-columns:1.4fr 1fr}}
.hero-main{padding:2rem}
@media(min-width:1024px){.hero-main{padding:2.5rem}}
.kicker{text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--muted-foreground);margin-bottom:1rem}
.hero h1{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700;line-height:.95;letter-spacing:-.02em;margin-bottom:1.25rem}
.hero p.muted{max-width:36rem;margin-bottom:1.75rem;line-height:1.6}
.next{padding:2rem}
.next h2{font-size:1.875rem;font-weight:700;margin:.5rem 0 1.25rem}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.next-cell{border:1px solid var(--border);border-radius:.75rem;padding:.75rem}
.next-cell .lbl{font-size:.7rem;color:var(--muted-foreground);margin-bottom:.25rem}
.next-cell .val{font-weight:600}

.cal-grid{display:grid;gap:1.25rem;margin-bottom:1.5rem}
@media(min-width:1024px){.cal-grid{grid-template-columns:1.4fr 1fr}}
.cal-grid > .surface-card{padding:1.5rem}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.cal-head h2{font-size:1.5rem;font-weight:700}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin-bottom:.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);padding:0 .5rem}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}
.day{position:relative;min-height:5.5rem;padding:.6rem .65rem;border-radius:1rem;border:1px solid var(--border);background:color-mix(in oklab,var(--card) 50%,transparent);text-align:left;display:flex;flex-direction:column;gap:.4rem;transition:background .15s,border-color .15s;cursor:pointer;color:var(--foreground)}
.day:hover{background:var(--accent)}
.day.is-muted{opacity:.35;cursor:default}
.day.is-hidden{visibility:hidden}
.day.is-today{border-color:var(--ring)}
.day.is-selected{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.day.is-selected .count{background:var(--primary-foreground);color:var(--primary)}
.day-top{display:flex;justify-content:space-between;align-items:center}
.day-num{font-weight:600}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--primary);color:var(--primary-foreground)}
.mini-event{font-size:.7rem;line-height:1.1;opacity:.85;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.note{margin-top:1.25rem;border:1px solid var(--border);border-radius:.75rem;padding:1rem;font-size:.875rem}
.note strong{color:var(--foreground)}

#selectedPanel{padding:1.5rem}
.sel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1rem;height:100%}
.sel-empty h3{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}
.sel-date{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}
.sel-sub{font-size:.875rem;color:var(--muted-foreground);margin-bottom:1.25rem}
.show{border:1px solid var(--border);border-radius:1rem;padding:1.25rem;background:color-mix(in oklab,var(--accent) 40%,transparent);margin-bottom:1rem}
.show h4{font-size:1.125rem;font-weight:700;margin-bottom:.75rem}
.show .pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.show .pills .pill{font-size:.7rem;padding:.3rem .6rem}
.show p{font-size:.875rem;color:var(--muted-foreground);line-height:1.55;margin-bottom:1rem}
.show details{border-top:1px solid var(--border);padding-top:.5rem}
.show summary{cursor:pointer;font-weight:600;font-size:.875rem;display:flex;justify-content:space-between;align-items:center;list-style:none;padding:.5rem 0}
.show summary::-webkit-details-marker{display:none}
.show summary::after{content:"+";font-size:1.25rem;transition:transform .2s}
.show details[open] summary::after{transform:rotate(45deg)}

.upcoming{padding:1.5rem;margin-bottom:2.5rem}
@media(min-width:1024px){.upcoming{padding:2rem}}
.upcoming h2{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}
.up-item{display:flex;align-items:flex-start;gap:1.25rem;border:1px solid var(--border);border-radius:1rem;padding:1.25rem;margin-bottom:.75rem;cursor:pointer;transition:background .2s}
.up-item:hover{background:color-mix(in oklab,var(--accent) 60%,transparent)}
.up-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;border-radius:.75rem;background:var(--accent);border:1px solid var(--border);padding:.5rem}
.up-date .m{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.up-date .d{font-size:1.5rem;font-weight:700}
.up-body h3{font-size:1.125rem;font-weight:700;margin-bottom:.25rem}
.up-body p{font-size:.875rem;color:var(--muted-foreground)}
.up-body p strong{color:var(--foreground)}

.foot{text-align:center;font-size:.8rem;padding:1rem 0}

/* -------- Mobile optimisations -------- */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img,svg{ max-width:100%; }

/* Touch targets */
button,.pill,.btn-primary,.icon-btn,a{ -webkit-tap-highlight-color:transparent; }

/* Safer container padding incl. iOS safe-area */
.page{
  padding-left:max(1rem,env(safe-area-inset-left));
  padding-right:max(1rem,env(safe-area-inset-right));
  padding-bottom:max(4rem,env(safe-area-inset-bottom));
}

@media (max-width:640px){
  .page{ padding-top:1rem; }
  .hdr{ margin-bottom:1.25rem; gap:.6rem; }
  .brand{ gap:.6rem; }
  .logo{ width:2.4rem;height:2.4rem;font-size:.75rem;border-radius:.85rem; }
  .brand-name{ font-size:.95rem; }
  .brand-tag{ font-size:.7rem; }
  .nav{ gap:.4rem; width:100%; justify-content:flex-start; }
  .nav .pill{ padding:.4rem .75rem;font-size:.8rem; }
  .nav .btn-primary{ padding:.55rem .9rem;font-size:.85rem; margin-left:auto; }
  .icon-btn{ width:2rem;height:2rem; }

  .hero{ gap:1rem;margin-bottom:1rem; }
  .hero-main,.next{ padding:1.5rem; }
  .hero h1{ font-size:clamp(2rem,8vw,2.75rem); margin-bottom:1rem; }
  .hero p.muted{ font-size:.9rem;margin-bottom:1.25rem; }
  .next h2{ font-size:1.4rem;margin-bottom:1rem; }

  .cal-grid{ gap:1rem;margin-bottom:1rem; }
  .cal-grid > .surface-card,#selectedPanel{ padding:1rem; }
  .cal-head{ margin-bottom:1rem; }
  .cal-head h2{ font-size:1.15rem; }
  .weekdays{ gap:.25rem;padding:0 .15rem;font-size:.6rem;letter-spacing:.05em; }
  .grid7{ gap:.25rem; }
  .day{
    min-height:3rem;
    padding:.35rem .3rem;
    border-radius:.65rem;
    gap:.15rem;
    font-size:.8rem;
  }
  .day-num{ font-size:.85rem; }
  .count{ min-width:1rem;height:1rem;font-size:.6rem;padding:0 .25rem; }
  .mini-event{ display:none; }
  .day.has-event::after{
    content:"";
    position:absolute;
    bottom:.3rem;left:50%;
    width:4px;height:4px;border-radius:50%;
    background:var(--primary);
    transform:translateX(-50%);
  }
  .day.is-selected.has-event::after{ background:var(--primary-foreground); }
  .note{ padding:.85rem;font-size:.8rem; }

  .upcoming{ padding:1rem;margin-bottom:1.5rem; }
  .upcoming h2{ font-size:1.25rem;margin-bottom:1rem; }
  .up-item{ padding:.9rem;gap:.85rem; }
  .up-date{ min-width:52px;padding:.4rem; }
  .up-date .d{ font-size:1.25rem; }
  .up-body h3{ font-size:1rem; }
  .up-body p{ font-size:.8rem; }

  .show{ padding:1rem; }
  .show h4{ font-size:1rem; }
  .sel-date{ font-size:1.1rem; }
}

@media (max-width:380px){
  .nav .btn-primary span{ display:none; }
  .nav .btn-primary{ padding:.55rem .7rem; }
  .day{ min-height:2.6rem;padding:.25rem; }
  .day-num{ font-size:.78rem; }
}