:root{
  --bg:#0f1114;
  --bg-soft:#13171c;
  --surface:#181d23;
  --surface-2:#1e242c;
  --surface-3:#252c36;
  --border:rgba(255,255,255,0.08);
  --fg:#f2f4f7;
  --muted:#9aa4b2;
  --accent:#d6b27b;
  --accent-2:#6eb7c4;
  --danger:#ff6b6b;
  --shadow:0 14px 36px rgba(0,0,0,0.45);
  --font-scale:1.4;
  --button-bg:var(--surface-3);
  --button-fg:var(--fg);
  --button-border:var(--border);
}
[data-theme="light"]{
  --bg:#f1f2f4;
  --bg-soft:#e8eaee;
  --surface:#ffffff;
  --surface-2:#f3f5f8;
  --surface-3:#e7ebf0;
  --border:rgba(15,20,26,0.08);
  --fg:#101418;
  --muted:#5a6777;
  --accent:#8e6b3a;
  --accent-2:#2f6aa6;
  --shadow:0 14px 34px rgba(16,20,24,0.15);
  --button-bg:#1b1f24;
  --button-fg:#ffffff;
  --button-border:rgba(0,0,0,0.2);
}
[data-theme="retro"]{
  --bg:#efe7dc;
  --bg-soft:#e5d5c6;
  --surface:#f6efe7;
  --surface-2:#efe1d2;
  --surface-3:#e2cbb7;
  --border:rgba(63,41,20,0.18);
  --fg:#2b1e12;
  --muted:#6b5140;
  --accent:#b47b3e;
  --accent-2:#6c9b90;
  --button-bg:#2b1e12;
  --button-fg:#ffffff;
  --button-border:rgba(255,255,255,0.12);
}
[data-theme="slate"]{
  --bg:#0d1117;
  --bg-soft:#12161c;
  --surface:#161b22;
  --surface-2:#1c222b;
  --surface-3:#232b36;
  --border:rgba(255,255,255,0.08);
  --fg:#e6edf3;
  --muted:#8b949e;
  --accent:#8ab4f8;
  --accent-2:#7dd3a6;
}
[data-theme="sand"]{
  --bg:#f6f1ea;
  --bg-soft:#efe7dd;
  --surface:#fbf7f0;
  --surface-2:#f0e6d8;
  --surface-3:#e7d8c3;
  --border:rgba(62,45,28,0.16);
  --fg:#2a2117;
  --muted:#6b5a46;
  --accent:#c28a3a;
  --accent-2:#5e9ea0;
  --button-bg:#2a2117;
  --button-fg:#ffffff;
  --button-border:rgba(255,255,255,0.12);
}
[data-theme="mist"]{
  --bg:#0e1216;
  --bg-soft:#151a20;
  --surface:#1a2027;
  --surface-2:#202732;
  --surface-3:#283241;
  --border:rgba(255,255,255,0.08);
  --fg:#e9eef4;
  --muted:#a0a9b6;
  --accent:#b7c3ff;
  --accent-2:#88c1d1;
}
[data-theme="dark-brown"]{
  --bg:#120c08;
  --bg-soft:#18100b;
  --surface:#20160f;
  --surface-2:#261a12;
  --surface-3:#2d1f16;
  --border:rgba(255,230,210,0.08);
  --fg:#f4ede7;
  --muted:#b6a79a;
  --accent:#c48a5a;
  --accent-2:#9b7a5c;
  --shadow:0 18px 40px rgba(0,0,0,0.6);
}
[data-theme="amoled"]{
  --bg:#000000;
  --bg-soft:#000000;
  --surface:#050505;
  --surface-2:#090909;
  --surface-3:#0d0d0d;
  --border:rgba(255,255,255,0.08);
  --fg:#f5f7fb;
  --muted:#9aa0ab;
  --accent:#6dd2ff;
  --accent-2:#7ee3b3;
  --shadow:0 18px 40px rgba(0,0,0,0.8);
}
[data-theme="amoled"] body{
  background:#000;
}

*{box-sizing:border-box}
html{ scrollbar-gutter: stable; }
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  font-size:calc(16px * var(--font-scale));
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), transparent 30%),
    radial-gradient(circle at 10% 20%, rgba(214,178,123,0.08), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(110,183,196,0.08), transparent 42%),
    var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  overflow:auto;
}

.app-loader{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    display:grid;
    place-items:center;
    background:var(--bg);
    z-index:999;
    transition:opacity 0.25s ease;
    padding:0;
  }
.app-loader-card{
    position:relative;
    width:100%;
    height:100%;
    display:block;
  }
.app-loader-card .loader-logo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(80vw,360px);
    height:auto;
    max-height:22vh;
    object-fit:contain;
    display:block;
  }
  @media (max-width: 980px){
  .app-loader-card .loader-logo{ width:min(82vw,360px); max-height:22vh; }
  }
  @media (max-width: 720px){
  .app-loader-card .loader-logo{
      width:88vw;
      max-width:360px;
      max-height:22vh;
    }
  }
.app-loader.hide{
  opacity:0;
  pointer-events:none;
}

.page{ display:none; }
.page.active{
  display:flex;
  flex-direction:column;
  gap:18px;
  animation:pageFade 0.45s ease both;
}

.layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:22px;
  padding:22px;
  max-width:1480px;
  margin:0 auto;
  align-items:start;
  height:100vh;
}

.sidebar{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:22px;
  padding:20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:12px;
  height:fit-content;
  width:260px;
  align-self:start;
}

.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.brand-logo{ height:34px; width:auto; display:block; }
.brand-logo.logo-alt{ display:none; }
[data-theme="light"] .brand-logo.logo-default,
[data-theme="sand"] .brand-logo.logo-default,
[data-theme="retro"] .brand-logo.logo-default{
    display:none;
  }
[data-theme="light"] .brand-logo.logo-alt,
[data-theme="sand"] .brand-logo.logo-alt,
[data-theme="retro"] .brand-logo.logo-alt{
    display:block;
  }
.brand-sub{ color:var(--muted); font-size:0.85rem; margin-top:4px; }

.nav{ display:flex; flex-direction:column; gap:8px; }
.nav-item{
  background:transparent;
  border:1px solid transparent;
  color:var(--fg);
  padding:10px 14px;
  border-radius:14px;
  text-align:left;
  cursor:pointer;
  font-weight:600;
  transition:all 0.2s ease;
}
.nav-item:hover{ background:var(--surface-3); }
.nav-item.active{
  background:var(--surface-3);
  border-color:rgba(214,178,123,0.3);
  box-shadow:inset 0 0 0 1px rgba(214,178,123,0.2);
}
.nav-item.locked{
  opacity:0.5;
  cursor:not-allowed;
}

.sidebar-card{
  padding:12px;
  border-radius:12px;
  background:var(--surface-3);
  border:1px solid var(--border);
}
.weather-card{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), var(--surface-3));
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.weather-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.weather-head .small{
  color:var(--muted);
  font-size:0.75rem;
}
.weather-badge{
  font-size:0.72rem;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.weather-badge[data-color="geel"]{
  border-color:rgba(255,210,90,0.45);
  background:rgba(255,210,90,0.16);
  color:#ffd97a;
}
.weather-badge[data-color="oranje"]{
  border-color:rgba(255,140,40,0.5);
  background:rgba(255,140,40,0.18);
  color:#ffb86e;
}
.weather-badge[data-color="rood"]{
  border-color:rgba(255,85,85,0.55);
  background:rgba(255,85,85,0.2);
  color:#ff9a9a;
}
.weather-badge[data-color="groen"]{
  border-color:rgba(100,220,150,0.45);
  background:rgba(100,220,150,0.16);
  color:#8fe0b5;
}
.weather-main{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.weather-icon{
  position:relative;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.weather-svg{
  width:44px;
  height:44px;
  display:block;
}
.weather-emoji{
  position:absolute;
  inset:auto 0 0 0;
  text-align:center;
  font-size:1rem;
  opacity:0;
}
.weather-temp{
  font-size:1.4rem;
  font-weight:700;
}
.weather-sub{
  color:var(--muted);
  font-size:0.85rem;
}
.weather-line{
  font-size:0.85rem;
}
.weather-tip{
  font-size:0.8rem;
  color:var(--muted);
}
.weather-footer{
  font-size:0.75rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.weather-spinner{
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:rgba(255,255,255,0.7);
  animation:weatherSpin 0.9s linear infinite;
  opacity:0;
  transform:scale(0.85);
}
.weather-spinner.active{
  opacity:1;
}
.weather-card.loading .weather-main,
.weather-card.loading .weather-sub,
.weather-card.loading .weather-line,
.weather-card.loading .weather-tip,
.weather-card.loading .weather-footer{
  opacity:1;
}
.weather-error{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:0.8rem;
}
.ghost.tiny{
  padding:6px 10px;
  border-radius:10px;
  font-size:0.75rem;
}
.sidebar-title{ font-family:"Syne",sans-serif; font-weight:600; margin-bottom:6px; }

.main{
    display:flex;
    flex-direction:column;
    gap:18px;
    overflow-y:auto;
    padding-bottom:24px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .main::-webkit-scrollbar{
    width:0;
    height:0;
  }

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  position:relative;
}
.menu-toggle{
  display:none;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-3);
  color:var(--fg);
  padding:8px 10px;
  font-size:1rem;
}
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
  z-index:40;
}
.nav-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.page-title{ display:flex; align-items:center; gap:10px; }
.page-title h1{
  font-family:var(--font-heading);
  font-size:1.7rem;
  margin:0;
}
.top-actions{ display:flex; align-items:center; gap:10px; }
.profile-button{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:6px 12px 6px 6px;
  background:var(--surface-3);
  border:1px solid var(--border);
  color:var(--fg);
}
.profile-button-text{ font-weight:600; }
.profile-menu{
  position:absolute;
  right:22px;
  top:72px;
  z-index:50;
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px) scale(0.98);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.profile-menu.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.profile-menu-card{
  min-width:240px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.profile-menu-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.profile-menu-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.danger{
  background:transparent;
  border:1px solid rgba(255,107,107,0.5);
  color:var(--danger);
}
.danger:hover{
  background:rgba(255,107,107,0.12);
}

.avatar{
  width:36px; height:36px; border-radius:12px;
  background:var(--surface-3);
  display:grid; place-items:center;
  font-size:0.85rem; color:var(--muted);
  border:1px solid var(--border);
  overflow:hidden;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.panel{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:22px;
  padding:20px;
  box-shadow:var(--shadow);
  animation:panelIn 0.5s ease both;
}
.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
  }
  .panel-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
  }
  .panel-actions .status{
    margin:0;
    text-align:right;
    font-size:0.8rem;
    color:var(--muted);
  }
.panel h2{
  margin:0 0 6px 0;
  font-family:var(--font-heading);
  font-size:1.2rem;
}
.status{ text-align:right; }
.status.error{ color:var(--danger); }
.week-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.week-actions .ghost.active{
  border-color:rgba(214,178,123,0.55);
  color:var(--accent);
  background:rgba(214,178,123,0.1);
}
.week-actions .ghost{ min-width:64px; }
.week-actions .ghost.icon-only{
  min-width:44px;
  padding:10px 12px;
  font-size:1rem;
  line-height:1;
}
.save-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(8,10,12,0.6);
  z-index:70;
}
.save-modal.open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.save-modal-card{
  width:min(420px, 90vw);
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:panelIn 0.35s ease both;
}
.save-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.save-modal-title{
  font-family:var(--font-heading);
  font-weight:600;
}
.save-modal-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
.email-modal{
  position:fixed;
  inset:0;
  display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(8,10,12,0.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:9999;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.2s ease, visibility 0.2s ease;
  }
  .email-modal.open{
    padding:20px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .email-modal-card{
    width:min(520px, 92vw);
    border-radius:22px;
    border:1px solid var(--border);
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    box-shadow:var(--shadow);
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:14px;
    animation:panelIn 0.35s ease both;
  }
  .email-modal-head{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    text-align:center;
  }
  .email-modal-title{
    font-family:var(--font-heading);
    font-weight:600;
  }
  #emailModalClose{
    position:absolute;
    right:0;
    top:0;
    padding:6px 12px;
    border-radius:999px;
  }
  .email-modal-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .email-modal-buttons{
    display:flex;
    gap:10px;
  }
  .privacy-blur{
    filter:blur(6px);
    transition:filter 0.2s ease;
    cursor:pointer;
  }
  .privacy-blur.revealed{
    filter:none;
  }
  .theme-select{
    border-radius:16px;
    padding:12px 14px;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--fg);
  }

.form-grid{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
    align-items:stretch;
  }
  .account-grid{
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  }
.input-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.weather-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,10,12,0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}
.weather-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  padding:20px;
}
.weather-modal-card{
  width:min(900px, 94vw);
  max-height:88vh;
  overflow:auto;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  animation:panelIn 0.35s ease both;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.weather-modal-card::-webkit-scrollbar{
  width:0;
  height:0;
}
.weather-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.weather-modal-title{
  font-family:var(--font-heading);
  font-weight:600;
}
.weather-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.weather-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.weather-tab.active{
  border-color:rgba(255,255,255,0.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.weather-panel{
  display:none;
  flex-direction:column;
  gap:14px;
}
.weather-panel.active{
  display:flex;
}
.weather-chip-group{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.weather-hours{
  display:flex;
  align-items:center;
  gap:8px;
}
.weather-filter.active,
.weather-hours-btn.active{
  border-color:rgba(255,255,255,0.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.weather-summary{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--surface-3);
  border:1px solid var(--border);
  font-size:0.85rem;
  color:var(--muted);
}
.weather-summary strong{
  color:var(--fg);
  font-weight:600;
}
.weather-ai{
  padding:10px 12px;
  border-radius:14px;
  background:var(--surface-3);
  border:1px solid var(--border);
  font-size:0.9rem;
  color:var(--fg);
  position:relative;
  overflow:hidden;
}
.weather-ai small{
  display:block;
  color:var(--muted);
  margin-bottom:4px;
}
.weather-summary{
  position:relative;
  overflow:hidden;
}
.weather-summary::after{
  content:"";
  position:absolute;
  inset:-40% -80%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.06), transparent);
  transform:translateX(-40%);
  animation:weatherSheen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes weatherSheen{
  0%{ transform:translateX(-45%); opacity:0; }
  30%{ opacity:0.6; }
  60%{ opacity:0.3; }
  100%{ transform:translateX(45%); opacity:0; }
}
@keyframes weatherSpin{
  0%{ transform:rotate(0deg) scale(0.85); }
  100%{ transform:rotate(360deg) scale(0.85); }
}
.weather-week-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:4px;
}
.weather-week-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  border-radius:12px;
  background:var(--surface-3);
  border:1px solid var(--border);
  min-width:110px;
}
.weather-week-legend{
  color:var(--muted);
}
.weather-week-details{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
  color:var(--muted);
  font-size:0.85rem;
}
.weather-week-details strong{
  color:var(--fg);
  font-weight:600;
}
.weather-modal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.weather-section h3{
  margin:0 0 8px 0;
  font-size:1rem;
}
.weather-hourly,
.weather-daily,
.weather-stats,
.weather-alerts{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.weather-alerts-title{
  margin-top:6px;
  font-size:0.8rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.weather-alert-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border-radius:14px;
  background:var(--surface-3);
  border:1px solid var(--border);
}
.weather-alert-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:600;
}
.weather-alert-card__code{
  font-size:0.72rem;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  white-space:nowrap;
}
.weather-alert-card__meta{
  color:var(--muted);
  font-size:0.78rem;
}
.weather-alert-card__body{
  font-size:0.85rem;
  line-height:1.4;
}
.weather-alert-card__link{
  font-size:0.8rem;
  color:var(--accent);
  text-decoration:none;
}
.weather-alert-card__link:hover{
  text-decoration:underline;
}
.weather-panel[data-panel="hours"] .weather-hourly{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.weather-panel[data-panel="hours"] .weather-row{
  padding:6px 10px;
  font-size:0.8rem;
}
.weather-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:var(--surface-3);
  border:1px solid var(--border);
  font-size:0.85rem;
}
.weather-row.is-geel{
  border-color:rgba(255,210,90,0.4);
  box-shadow:inset 3px 0 0 rgba(255,210,90,0.35);
}
.weather-row.is-oranje{
  border-color:rgba(255,140,40,0.45);
  box-shadow:inset 3px 0 0 rgba(255,140,40,0.4);
}
.weather-row.is-rood{
  border-color:rgba(255,85,85,0.5);
  box-shadow:inset 3px 0 0 rgba(255,85,85,0.45);
}
.weather-row.is-groen{
  border-color:rgba(100,220,150,0.4);
  box-shadow:inset 3px 0 0 rgba(100,220,150,0.35);
}
.weather-alert-card.is-geel{
  border-color:rgba(255,210,90,0.4);
  box-shadow:inset 3px 0 0 rgba(255,210,90,0.35);
}
.weather-alert-card.is-oranje{
  border-color:rgba(255,140,40,0.45);
  box-shadow:inset 3px 0 0 rgba(255,140,40,0.4);
}
.weather-alert-card.is-rood{
  border-color:rgba(255,85,85,0.5);
  box-shadow:inset 3px 0 0 rgba(255,85,85,0.45);
}
.weather-alert-card.is-groen{
  border-color:rgba(100,220,150,0.4);
  box-shadow:inset 3px 0 0 rgba(100,220,150,0.35);
}
.weather-alert-card.is-geel .weather-alert-card__code{
  border-color:rgba(255,210,90,0.45);
  background:rgba(255,210,90,0.16);
  color:#ffd97a;
}
.weather-alert-card.is-oranje .weather-alert-card__code{
  border-color:rgba(255,140,40,0.5);
  background:rgba(255,140,40,0.18);
  color:#ffb86e;
}
.weather-alert-card.is-rood .weather-alert-card__code{
  border-color:rgba(255,85,85,0.55);
  background:rgba(255,85,85,0.2);
  color:#ff9a9a;
}
.weather-alert-card.is-groen .weather-alert-card__code{
  border-color:rgba(100,220,150,0.45);
  background:rgba(100,220,150,0.16);
  color:#8fe0b5;
}
.weather-row .temp-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-weight:600;
}
.weather-row .temp-stack span{
  font-weight:600;
}
.weather-row .temp-stack .temp-day{
  opacity:0.95;
}
.weather-row .temp-stack .temp-night{
  opacity:0.75;
  font-size:0.78rem;
}
.weather-row small{ color:var(--muted); }
.weather-modal-actions{
  display:flex;
  justify-content:flex-end;
}
.input-group label{
    display:block;
    font-size:0.85rem;
    color:var(--muted);
    margin-bottom:4px;
  }
  .account-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:4px;
  }
  .account-grid .account-field{
    height:100%;
    justify-content:space-between;
  }
  .account-grid .account-field .account-actions{
    margin-top:auto;
  }
input, select{
  width:100%;
  padding:12px 14px;
  min-height:44px;
  border-radius:14px;
  border:1px solid transparent;
  background:var(--surface-3);
  color:var(--fg);
  outline:none;
  font-family:inherit;
}
input[type="file"]{
  padding:10px 12px;
  min-height:44px;
}
input[type="file"]::file-selector-button{
    margin-right:10px;
    border:1px solid var(--button-border);
    background:var(--button-bg);
    color:var(--button-fg);
    padding:8px 12px;
    border-radius:12px;
    cursor:pointer;
  }
  input[type="file"]::file-selector-button:hover{
    filter:brightness(1.05);
  }
input:focus, select:focus{
  border-color:rgba(214,178,123,0.5);
  box-shadow:0 0 0 3px rgba(214,178,123,0.2);
}
.hint{
  margin-top:2px;
  font-size:0.75rem;
  color:var(--muted);
  line-height:1.4;
}

.actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    grid-column:1 / -1;
    margin-top:4px;
  }
  .action-cta{
    min-width:160px;
  }

button{
    padding:10px 14px;
    border-radius:14px;
    border:1px solid var(--button-border);
    background:var(--button-bg);
    color:var(--button-fg);
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
  }
  button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
  .ghost{
    background:var(--button-bg);
    color:var(--button-fg);
    border:1px solid var(--button-border);
  }
  .ghost:hover{ filter:brightness(1.05); }
  .primary{
    border:1px solid transparent;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:var(--button-fg);
  }

.divider{
  height:1px;
  background:var(--border);
  margin:16px 0;
}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:14px;
}
.setting-block{
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}
.setting-title{
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  margin-bottom:8px;
}
.setting-control{ display:flex; flex-direction:column; gap:8px; }
.setting-cta{
  width:100%;
  text-align:left;
}
.setting-help{ display:block; }
.link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:8px;
}
.link-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:left;
  padding:14px;
  border-radius:16px;
  background:var(--surface-3);
  border:1px solid var(--border);
}
.link-card .small{ color:var(--muted); }
.link-title{
  font-family:var(--font-heading);
  font-weight:600;
}
.link-hint{ margin-top:10px; }
.somtoday-flow{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.link-step{
  border:1px solid var(--border);
  background:var(--surface-3);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.link-step-title{
  font-weight:600;
}
.code-block{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--border);
  font-size:0.78rem;
  color:var(--fg);
  overflow:auto;
  max-height:220px;
  white-space:pre;
}
.flow-step{
  border:1px solid var(--border);
  background:var(--surface-3);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  opacity:0;
  transform:translateY(6px);
  max-height:0;
  overflow:hidden;
  transition:opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease;
}
.flow-step.active{
  opacity:1;
  transform:translateY(0);
  max-height:1000px;
}
.flow-indicator{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.flow-dot{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  font-weight:600;
  border:1px solid var(--border);
  background:var(--surface-3);
  color:var(--muted);
}
.flow-dot.active{
  border-color:rgba(214,178,123,0.55);
  color:var(--fg);
  box-shadow:0 0 0 2px rgba(214,178,123,0.18);
}
.flow-line{
  flex:1;
  height:2px;
  background:var(--border);
  border-radius:999px;
}
.modal-close{
  position:absolute;
  right:0;
  top:0;
  padding:6px 12px;
  border-radius:999px;
}
.cta{
  padding:12px 18px;
  font-weight:700;
}
.code-block{
  width:100%;
  min-height:180px;
  resize:vertical;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.link-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.somtoday-token{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.setting-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  background:transparent;
  border:1px solid var(--border);
  color:var(--fg);
  padding:8px 12px;
  border-radius:999px;
  font-size:0.85rem;
}
.chip.active{
  border-color:rgba(214,178,123,0.55);
  background:rgba(214,178,123,0.12);
}

.lessons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.lesson{
  padding:14px;
  border-radius:16px;
  background:var(--surface-3);
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.lesson::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
}
.lesson strong{
  font-family:var(--font-heading);
}

.week-grid{
    --slot-height:52px;
    --break-height:16px;
    --time-col:70px;
    display:grid;
    grid-auto-rows:var(--slot-height);
  grid-template-columns:70px repeat(5, minmax(140px, 1fr));
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-2);
  position:relative;
}
.week-nav-fab{
  position:absolute;
  right:14px;
  bottom:14px;
  display:flex;
  gap:8px;
  z-index:4;
}
.week-nav-fab .ghost{
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
}
.week-header{
  background:var(--surface-3);
  border-right:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  color:var(--muted);
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.week-time{
  border-right:1px solid var(--border);
  border-top:1px solid var(--border);
  padding:6px 8px;
  font-size:0.75rem;
  color:var(--muted);
  background:var(--surface-2);
}
.week-time-lesson{
  white-space:pre-line;
  line-height:1.05;
}
.week-time-lesson::after{
  content:'';
  display:block;
  height:2px;
}
.week-cell{
    border-top:1px solid var(--border);
    border-right:1px solid var(--border);
    background:var(--surface-2);
  }
  .week-break{
    border-top:none;
    background:var(--surface-1);
  }
.week-item{
  position:relative;
  z-index:2;
  margin:4px;
  padding:8px 10px;
  border-radius:12px;
  background:var(--surface-3);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 12px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:0.78rem;
}
.week-item::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
}
.week-item-title{
  font-family:var(--font-heading);
  font-weight:600;
}
.week-item-meta{ color:var(--muted); font-size:0.72rem; }
.week-item.cancelled{
  opacity:0.6;
  border-color:rgba(255,107,107,0.55);
  background:linear-gradient(180deg, rgba(255,107,107,0.18), var(--surface-3));
}
.week-item.cancelled::before{ background:var(--danger); }
.week-item.changed{
  border-color:rgba(249,199,79,0.5);
  background:linear-gradient(180deg, rgba(249,199,79,0.16), var(--surface-3));
}
.week-item.changed::before{ background:#f9c74f; }
.now-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg, rgba(214,178,123,0), rgba(214,178,123,0.9), rgba(214,178,123,0));
  box-shadow:0 0 8px rgba(214,178,123,0.6);
  z-index:3;
}
.now-dot{
  position:absolute;
  width:8px; height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 8px rgba(214,178,123,0.8);
  top:-3px;
  left:-4px;
}

.next-lesson{
  margin:14px 0;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-3);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.next-lesson-title{
  font-family:var(--font-heading);
  font-weight:600;
}
.countdown{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.1rem;
  color:var(--accent);
}
.warn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(249,199,79,0.15);
  color:#f9c74f;
  font-size:0.68rem;
  border:1px solid rgba(249,199,79,0.3);
}
.warn-cancelled{
  background:rgba(255,107,107,0.12);
  color:var(--danger);
  border-color:rgba(255,107,107,0.35);
}
.warn-icon{
  display:inline-block;
  width:16px;
  text-align:center;
  font-weight:700;
}

.lesson.cancelled{
  border-color:rgba(255,107,107,0.5);
  background:linear-gradient(180deg, rgba(255,107,107,0.12), var(--surface-3));
}
.lesson.changed{
  border-color:rgba(249,199,79,0.45);
  background:linear-gradient(180deg, rgba(249,199,79,0.12), var(--surface-3));
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(214,178,123,0.14);
  color:var(--accent);
  font-size:0.75rem;
  border:1px solid rgba(214,178,123,0.35);
}

.small{ color:var(--muted); font-size:0.85rem; margin-top:0; }
.tip-fade{ animation:tipFade 0.6s ease; }
.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  background:var(--surface-3);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.2s ease, transform 0.2s ease;
  z-index:80;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}

body.auth{
  display:grid;
  place-items:center;
  padding:20px;
}
.auth-shell{
  width:min(820px, 100%);
  display:grid;
  gap:20px;
}
.auth-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
  }
.auth-logo{ height:72px; }
.auth-card{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:26px;
  padding:30px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.auth-card h1{
  margin:0;
  font-family:var(--font-heading);
}
.auth-card .small{
  margin:0;
}
.auth-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.auth-link{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.auth-link:hover{
  text-decoration:underline;
}
.field-status{
  min-height:18px;
  font-size:0.8rem;
  color:var(--muted);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.field-status.ok{ color:#6fcf97; }
.field-status.error{ color:#ff8f8f; }
.field-status.show{
  opacity:1;
  transform:translateY(0);
}
.field-wrap{ position:relative; }
.field-wrap.show-suggestions{ margin-bottom:0; }
.field-wrap.tight{ margin-bottom:0; }
.field-wrap input.field-ok{
  border-color:rgba(111,207,151,0.6);
  box-shadow:0 0 0 3px rgba(111,207,151,0.15);
}
.field-wrap input.field-error{
  border-color:rgba(255,143,143,0.6);
  box-shadow:0 0 0 3px rgba(255,143,143,0.12);
}
.field-wrap input.field-checking,
.field-wrap input.field-checking:focus{
    border-color:color-mix(in srgb, var(--accent-2) 70%, white 30%);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-2) 40%, transparent 60%);
    position:relative;
    animation:checkingPulse 1.1s ease-in-out infinite;
  }
.suggestions{
  display:none;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.suggestions.show{
  display:flex;
  opacity:1;
  transform:translateY(0);
  animation:suggestionIn 0.24s ease;
}
.suggestion{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--fg);
  padding:6px 10px;
  border-radius:999px;
  font-size:0.75rem;
  cursor:pointer;
}
.password-panel{
  display:none;
  margin-top:8px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-3);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.password-panel.open{ display:block; opacity:1; transform:translateY(0); }
.password-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.8rem;
  color:var(--muted);
  padding:4px 0;
}
.password-item::after{
  content:'✕';
  color:#8b949e;
  font-weight:700;
}
.password-item.ok{
  color:#6fcf97;
}
.password-item.ok::after{
  content:'✓';
  color:#6fcf97;
}

@keyframes panelIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pageFade{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes tipFade{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes suggestionIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes checkingPulse{
  0%{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-2) 45%, transparent 55%); }
  60%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-2) 18%, transparent 82%); }
  100%{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-2) 35%, transparent 65%); }
}

@media (max-width: 980px){
  body{ overflow:auto; }
  .layout{ grid-template-columns:1fr; }
  .layout{ height:auto; }
  .main{ overflow:visible; }
  .topbar{ margin-top:0; }
  .sidebar{
    position:fixed;
    left:16px;
    top:16px;
    bottom:16px;
    width:260px;
    transform:translateX(-120%);
    transition:transform 0.25s ease;
    z-index:50;
  }
  .sidebar.open{
    transform:translateX(0);
  }
  .menu-toggle{ display:inline-flex; }
  .nav{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; }
  .nav-item{ flex:0 0 auto; }
  .topbar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .top-actions{ width:100%; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  #weekExport{ overflow-x:auto; }
  .week-grid{ min-width:700px; grid-template-columns:60px repeat(5, minmax(120px, 1fr)); --time-col:60px; }
  .next-lesson{ flex-direction:column; align-items:flex-start; }
  .profile-menu{ right:16px; top:88px; }
  .week-nav-fab{ display:none; }
  .mobile-hide{ display:none; }
}
@media (max-width: 720px){
  .auth-shell{ width:100%; }
  .auth-card{ padding:22px; }
  .layout{ padding:12px; gap:14px; }
  .sidebar{ border-radius:18px; padding:16px; }
  .panel{ border-radius:18px; padding:14px; }
  .panel-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .panel-actions{ width:100%; justify-content:space-between; }
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .page-title h1{ font-size:1.4rem; }
  .top-actions{ width:100%; justify-content:space-between; flex-wrap:nowrap; }
  .profile-button{ padding:4px 8px 4px 4px; }
  .profile-button-text{ display:none; }
  .week-actions{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
    padding-bottom:4px;
  }
  .week-actions .ghost{
    min-width:auto;
    padding:8px 10px;
    font-size:0.8rem;
    border-radius:12px;
  }
  #weekExport{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .week-grid{
    min-width:560px;
    grid-template-columns:50px repeat(5, minmax(90px, 1fr));
    --time-col:50px;
    --slot-height:40px;
  }
  .week-header{ font-size:0.7rem; }
  .week-time{ font-size:0.65rem; padding:4px 6px; }
  .week-item{
    margin:3px;
    padding:6px 8px;
    font-size:0.68rem;
  }
  .week-item-title{ font-size:0.72rem; }
  .week-item-meta{ font-size:0.65rem; }
  .sidebar-card{ display:none; }
  .nav{ flex-direction:column; }
  .nav-item{ width:100%; }
  .form-grid{ grid-template-columns:1fr; }
  .settings-grid{ grid-template-columns:1fr; }
  .profile-grid{ grid-template-columns:1fr; }
  .auth-actions{ flex-direction:column; align-items:stretch; }
  .auth-actions button{ width:100%; }
  .auth-brand{
    align-items:center;
    text-align:center;
    width:100%;
  }
  .panel{ width:100%; }
  #weekExport{ width:100%; }
}

[data-font="120"]{ --font-scale:1.2; }
[data-font="140"]{ --font-scale:1.4; }

[data-layout="compact"] .panel{ padding:12px; }
[data-layout="compact"] .lessons{ gap:6px; }
[data-layout="compact"] .layout{ gap:12px; padding:12px; }
[data-layout="compact"] .page.active{ gap:10px; }

[data-layout="spacious"] .panel{ padding:30px; }
[data-layout="spacious"] .lessons{ gap:18px; }
[data-layout="spacious"] .layout{ gap:36px; padding:34px; }
[data-layout="spacious"] .page.active{ gap:24px; }

[data-layout="focus"] .sidebar{ width:200px; }
[data-layout="focus"] .layout{ grid-template-columns:200px 1fr; }

.profile-grid{
  display:grid;
  gap:16px;
}
.profile-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--surface-3);
}
.profile-photo{
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size:cover;
  background-position:center;
  display:grid;
  place-items:center;
  color:#201508;
  font-weight:700;
  font-family:var(--font-heading);
}
.profile-name{
  font-family:var(--font-heading);
  font-weight:600;
}

.drawer{
  position:fixed;
  inset:0;
  background:rgba(8,10,12,0.6);
  display:none;
  justify-content:flex-end;
  z-index:60;
  pointer-events:none;
}
.drawer.open{ display:flex; }
.drawer-panel{
  width:min(360px, 90vw);
  height:100%;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border-left:1px solid var(--border);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow);
  animation:slideIn 0.35s ease both;
  pointer-events:auto;
}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.drawer-title{
  font-family:var(--font-heading);
  font-size:1.2rem;
}
.drawer-body{ display:flex; flex-direction:column; gap:10px; }
.detail-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--surface-3);
  border:1px solid var(--border);
}
.detail-row span{ color:var(--muted); font-size:0.85rem; }

@keyframes slideIn{
  from{ transform:translateX(20px); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}

@media print{
  body *{ visibility:hidden !important; }
  #weekExport, #weekExport *{ visibility:visible !important; }
  #weekExport{
    position:fixed;
    inset:0;
    padding:24px;
    background:white !important;
    overflow:visible !important;
  }
  html, body{
    overflow:visible !important;
  }
  .week-grid, #weekExport{
    overflow:visible !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .week-grid::-webkit-scrollbar,
  #weekExport::-webkit-scrollbar{
    display:none !important;
  }
}

:root{
  --font-body:"Instrument Sans",system-ui,Arial;
  --font-heading:"Syne",sans-serif;
}
[data-font-family="instrument"]{
  --font-body:"Instrument Sans",system-ui,Arial;
  --font-heading:"Syne",sans-serif;
}
[data-font-family="sora"]{
  --font-body:"Sora",system-ui,Arial;
  --font-heading:"Sora",system-ui,Arial;
}
[data-font-family="plusjakarta"]{
  --font-body:"Plus Jakarta Sans",system-ui,Arial;
  --font-heading:"Plus Jakarta Sans",system-ui,Arial;
}