:root{
  --bg:#06111a;
  --nav:#03131f;
  --panel:rgba(5,22,34,.88);
  --panel2:rgba(7,27,41,.84);
  --line:rgba(48,136,177,.62);
  --cyan:#21c7ff;
  --cyan-soft:#79dfff;
  --gold:#e8bd82;
  --gold-soft:#f2d8ad;
  --text:#edf6fb;
  --muted:#91aabc;
  --green:#41d9b7;
  --danger:#ed6a64;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#06111a;color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.login-page{
  min-height:100vh;
  background:
  linear-gradient(rgba(3,11,18,.54),rgba(3,11,18,.72)),
  url("athena-scene.jpg") center/cover fixed no-repeat;
}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:28px}
.login-card{
  width:min(460px,94vw);
  padding:38px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(3,17,28,.91);
  backdrop-filter:blur(20px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.brand-mark,.owl-ring{
  width:70px;height:70px;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;margin:auto;color:var(--gold-soft);
  font:500 30px Georgia,serif;
  box-shadow:inset 0 0 30px rgba(232,189,130,.08);
}
.brand-name{font:500 28px Georgia,serif;letter-spacing:.18em;color:var(--gold-soft);text-align:center;margin-top:10px}
.brand-tag{text-align:center;font-size:8px;letter-spacing:.28em;color:#9dc7da;margin-top:6px}
.login-card h1{font:500 30px Georgia,serif;color:#faead2;text-align:center;margin:28px 0 6px}
.login-card p{color:var(--muted);text-align:center}
.login-card label{display:block;font-size:12px;color:#c9dae5;margin-top:16px}
.login-card input{
  width:100%;margin-top:7px;padding:12px;border-radius:10px;
  border:1px solid rgba(48,136,177,.48);
  background:#061723;color:#fff
}
.btn{border-radius:10px;padding:11px 14px;border:1px solid #2a7398;color:#fff}
.btn.primary{width:100%;margin-top:20px;background:linear-gradient(#0b3851,#071f30)}
.btn.secondary{background:#0b2c40}
.link-button{border:0;background:transparent;color:#55ccfd;padding:12px 0}
.form-msg{font-size:12px;color:#ff8d87;margin-top:10px}

.athena-page{
  min-height:100vh;
  background:
  linear-gradient(180deg,rgba(2,9,15,.12),rgba(2,9,15,.38)),
  url("athena-scene.jpg") center/cover fixed no-repeat;
}
.shell{min-height:100vh;display:grid;grid-template-columns:208px 1fr}
.sidebar{
  height:100vh;position:sticky;top:0;overflow:auto;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:18px 10px;
  background:linear-gradient(180deg,rgba(2,16,26,.98),rgba(2,14,23,.97));
  border-right:1px solid rgba(48,116,150,.48);
  box-shadow:10px 0 30px rgba(0,0,0,.22)
}
.logo-wrap{padding:0 10px 18px}
.owl-ring{width:55px;height:55px;font-size:24px}
.logo-wrap .brand-name{font-size:23px}
.logo-wrap .brand-tag{font-size:7px}
.side-nav{display:grid;gap:2px}
.nav{
  width:100%;display:flex;align-items:center;gap:11px;
  padding:8px 12px;border:0;border-left:3px solid transparent;border-radius:7px;
  background:transparent;color:#b9d3e3;text-align:left;font-size:11px
}
.nav span{width:18px;text-align:center;color:#eef8ff;font-size:15px}
.nav:hover{background:rgba(39,103,136,.17)}
.nav.active{
  color:#fff;border-left-color:var(--gold);
  background:linear-gradient(90deg,rgba(232,189,130,.20),rgba(31,88,116,.20))
}
.side-foot{padding:12px 16px 0}
.quote{font:italic 15px/1.42 Georgia,serif;color:#e7c99f}
.quote-sub{font-size:9px;color:#829dad;margin-top:10px}
.sync{font-size:10px;color:#79b5ad;margin:16px 0 8px}
.logout-btn{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(91,139,163,.38);background:transparent;color:#a7c2d2}

.main-stage{min-width:0;padding:18px 24px 92px}
.topbar{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-bottom:14px
}
.info-pill{
  display:flex;gap:15px;align-items:center;padding:10px 16px;border-radius:15px;
  background:rgba(5,22,35,.74);border:1px solid rgba(52,118,151,.55);
  backdrop-filter:blur(14px);font-size:10px;color:#e4f0f7
}
.sun{color:#ffc66e;font-size:18px}
.motto{text-align:center;font:italic 12px Georgia,serif;color:#e4d5cf}
.top-actions{display:flex;align-items:center;gap:9px}
.round,.focus-btn{
  border:1px solid rgba(58,124,158,.58);background:rgba(5,22,35,.75);color:#eaf5fb;
  backdrop-filter:blur(14px)
}
.round{width:38px;height:38px;border-radius:50%}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid #315f8d;background:#0b2358}
.focus-btn{padding:10px 17px;border-radius:14px}

.hero{
  display:grid;grid-template-columns:minmax(330px,1.05fr) 300px minmax(330px,.95fr);
  gap:18px;align-items:center
}
.hero-copy{padding-left:10px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-copy h1{font:500 38px Georgia,serif;color:#f8e7d0;margin:0}
.hero-copy h2{font:400 21px Georgia,serif;color:#f7e8d7;margin:3px 0 14px}
.hero-copy p{font:italic 13px/1.55 Georgia,serif;color:#dae3e7}
.quick-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.quick{
  padding:7px 11px;border-radius:999px;border:1px solid rgba(50,140,184,.64);
  background:rgba(2,17,28,.70);color:#d8ebf6;font-size:10px
}
.orb-zone{text-align:center}
.orb{
  width:210px;height:210px;border-radius:50%;margin:auto;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle,#08263b 0 41%,#051826 42% 61%,transparent 62%),
             conic-gradient(#76dcff,#21aef7,#8c88ff,#f0b9d6,#f0c48a,#69dfff);
  box-shadow:0 0 0 8px rgba(5,20,32,.76),0 0 32px rgba(55,188,255,.35)
}
.orb:after{content:"";position:absolute;inset:15px;border:1px solid rgba(76,199,246,.46);border-radius:50%}
.orb-inner{z-index:1}
.wave{font-weight:800;color:#41d4ff;font-size:26px;letter-spacing:-3px;text-shadow:0 0 14px #27acf1}
.orb-title{margin-top:12px;color:#efd3aa;font:500 15px Georgia,serif;letter-spacing:.2em}
.orb-status{color:#8fb6ca;font-size:10px;margin-top:6px}
.orb-question{
  width:100%;margin-top:8px;padding:10px;border-radius:13px;
  border:1px solid rgba(52,149,198,.68);background:rgba(2,17,29,.83);
  color:#e9eef1;font:14px Georgia,serif
}
.panel{
  background:linear-gradient(180deg,rgba(4,20,32,.90),rgba(3,16,27,.86));
  border:1px solid rgba(49,133,174,.60);border-radius:11px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);backdrop-filter:blur(14px)
}
.agenda{padding:12px 14px}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.panel-title strong{font-size:13px}
.panel-title a{font-size:9px;color:#46c8fb}
.agenda-item{
  display:grid;grid-template-columns:12px 75px 1fr;gap:7px;
  border-top:1px solid rgba(58,96,116,.25);padding:7px 0;font-size:10px
}
.dot{width:8px;height:8px;border-radius:50%;margin-top:2px;background:#55d4f6}
.agenda-item:nth-child(3) .dot{background:#f1bf87}
.agenda-item:nth-child(4) .dot{background:#3fe1d9}
.agenda-item:nth-child(5) .dot{background:#c879df}
.agenda-item:nth-child(6) .dot{background:#efbc59}

.actions{
  display:grid;grid-template-columns:140px 140px 185px 185px 1fr 60px;
  gap:9px;margin:10px 0 12px
}
.action-btn{
  border:1px solid rgba(52,140,184,.64);border-radius:10px;background:rgba(3,20,32,.78);
  color:#dbeef8;padding:10px 11px;text-align:left;font-size:10px
}
.action-btn b{color:var(--cyan);font-size:14px;margin-right:7px}

.stats{
  display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr 1fr .78fr;gap:9px
}
.stat{padding:12px;min-height:120px}
.stat h3{font-size:12px;margin:0 0 9px}
.stat-body{display:flex;gap:11px;align-items:center}
.stat small{display:block;color:#90aabd;font-size:9px;margin-top:5px}
.donut{
  --p:32;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(#efba76 calc(var(--p)*1%),#225d7d 0)
}
.donut:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#092033}
.donut span{z-index:1;font-size:15px}
.progress{height:15px;border-radius:999px;background:#1b2b37;overflow:hidden;margin:13px 0}
.progress i{display:block;height:100%;width:46%;background:linear-gradient(90deg,#29dbbf,#63dbc9 42%,#ebb676 43% 62%,#213540 63%)}
.big{font-size:23px}.cyan{font-size:28px;color:#23bdf4}.online{color:#45d9b9}
.quote-card{font:italic 16px/1.45 Georgia,serif;color:#c8d6df}

.lower{
  display:grid;grid-template-columns:1.05fr 1.15fr .95fr;gap:9px;margin-top:9px
}
.list-panel{padding:11px 13px}
.list-row{
  display:grid;grid-template-columns:31px 1fr auto;gap:9px;align-items:center;
  border-top:1px solid rgba(56,94,114,.25);padding:7px 0;font-size:10px
}
.list-icon{width:27px;height:27px;border-radius:7px;background:#12466d;color:#d9f2ff;display:grid;place-items:center}
.list-row small,.rec small{display:block;color:#87a4b6;font-size:9px;margin-top:2px}
.rec{
  width:100%;display:flex;align-items:center;gap:9px;
  border:0;border-top:1px solid rgba(56,94,114,.25);border-radius:7px;
  background:rgba(13,42,60,.38);color:#ddecf5;padding:8px;text-align:left;font-size:10px;margin-top:3px
}
.chev{margin-left:auto;color:#4bc9fa}
.focus-list .checkrow{padding:6px 0}
.mini-quote{margin-top:9px;padding:12px;color:#e4d4c1;font:italic 14px/1.4 Georgia,serif}

.section{padding:4px 2px}
.section-head{margin:4px 0 14px}
.section-head h1{font:500 29px Georgia,serif;color:#f8e7d0;margin:0}
.section-head p{font-size:11px;color:#91aabd;margin:4px 0 0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px}
.card{grid-column:span 6;padding:15px}.card.wide{grid-column:span 12}.card.third{grid-column:span 4}
.card h3{font-size:13px;margin:0 0 10px}
.card label{font-size:10px;color:#c8dce8}
.card input,.card textarea,.card select{
  width:100%;border:1px solid rgba(48,136,177,.45);border-radius:9px;
  background:rgba(2,16,26,.76);color:#eef8ff;padding:10px
}
.checkrow{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-top:1px solid rgba(56,94,114,.22);font-size:10px}
.checkrow input{width:auto;margin:1px 0 0;accent-color:#37d5b5}
.table{width:100%;border-collapse:collapse;font-size:10px}
.table th,.table td{text-align:left;padding:9px;border-bottom:1px solid rgba(56,94,114,.26)}
.table th{color:#89a7b8}
.row{display:flex;gap:9px;align-items:end}.row>*{flex:1}.row button{flex:0 0 auto}
.small-btn{border:1px solid rgba(53,142,187,.65);border-radius:8px;background:#092d43;color:#fff;padding:9px 12px}
.note{padding:10px;border-radius:9px;background:rgba(105,76,30,.24);border:1px solid rgba(222,174,99,.40);font-size:10px}
.fileline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(56,94,114,.25);font-size:10px}
.chat{max-height:440px;overflow:auto;display:grid;gap:8px;padding:8px}
.bubble{padding:10px 12px;border-radius:10px;white-space:pre-wrap;font-size:11px;line-height:1.5}
.me{background:#123c53;margin-left:15%}.ai{background:#142a39;margin-right:8%}

.bottom-bar{
  position:fixed;left:232px;right:24px;bottom:12px;z-index:15;
  display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none
}
.bottom-bar>*{pointer-events:auto}
.voice-btn{
  width:60px;height:60px;border-radius:50%;border:1px solid #2d6f91;
  background:radial-gradient(circle,#1c4a6f,#071c2c 70%);color:#a0dcff;font-size:24px;
  margin-right:-28px;z-index:2
}
.ask-btn{
  width:min(470px,47vw);height:57px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;
  padding:0 20px 0 43px;border:1px solid #315973;border-radius:30px;background:rgba(8,24,38,.92);color:#bfd4e2
}
.ask-brand{font-size:9px;letter-spacing:.2em;color:#ead2ae}.ask-placeholder{text-align:left}.send{color:#6dcff5}
.foot-icons{display:flex;gap:14px}.foot-icons button{position:relative;border:0;background:transparent;color:#eaf5fa;font-size:18px}
.foot-icons em{position:absolute;top:-7px;right:-6px;background:#d84a47;border-radius:50%;font:8px Arial;color:#fff;padding:2px 5px}

@media(max-width:1180px){
  .hero{grid-template-columns:1fr 230px}.agenda{grid-column:1/-1}
  .stats{grid-template-columns:repeat(3,1fr)}
  .actions{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:850px){
  .shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}
  .main-stage{padding:14px 12px 95px}.topbar{grid-template-columns:1fr}.motto{display:none}
  .top-actions{justify-content:flex-end}.hero{grid-template-columns:1fr}
  .stats,.lower,.actions{grid-template-columns:1fr}
  .card,.card.third{grid-column:span 12}
  .bottom-bar{left:12px;right:12px}.foot-icons{display:none}.ask-btn{width:80vw}
}

/* Athena V5 — origineel logo, aspect ratio altijd behouden */
.logo-image,
.sidebar-logo,
.login-logo,
.orb-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  aspect-ratio: auto;
  transform: none !important;
}

.login-logo {
  width: 96px !important;
  max-height: 72px;
  margin: 0 auto 8px;
}

.sidebar-logo {
  width: 82px !important;
  max-height: 62px;
  margin: 0 auto 6px;
}

.orb-logo {
  width: 72px !important;
  max-height: 54px;
  margin: 0 auto 4px;
  filter: drop-shadow(0 0 8px rgba(232,189,130,.18));
}

.logo-wrap .brand-name,
.login-card .brand-name {
  margin-top: 2px;
}

/* voorkom dat een generieke img-regel het logo kan uitrekken */
.sidebar .logo-image,
.login-card .logo-image,
.orb .logo-image {
  flex: 0 0 auto;
  align-self: center;
}


max-width: 210px;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(48,190,255,.22));
}
@media(max-width:1180px){
  
  
}
@media(max-width:850px){
  
  
}


/* Athena V5.3 — centrale orb correct geplaatst en volledig rond */
.orb-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.orb-image-wrap.orb-fixed{
  width:220px;
  height:220px;
  aspect-ratio:1 / 1;
  display:block;
  margin:0 auto 10px;
  padding:0;
  overflow:visible;
  flex:0 0 220px;
}

.orb-image-wrap.orb-fixed .orb-image{
  display:block;
  width:220px !important;
  height:220px !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:50%;
  margin:0;
  padding:0;
  transform:none !important;
  filter:drop-shadow(0 0 22px rgba(48,190,255,.20));
}

.orb-question{
  width:100%;
  max-width:360px;
  margin:0 auto;
}

@media(max-width:1180px){
  .orb-image-wrap.orb-fixed{
    width:200px;
    height:200px;
    flex-basis:200px;
  }
  .orb-image-wrap.orb-fixed .orb-image{
    width:200px !important;
    height:200px !important;
  }
}

@media(max-width:850px){
  .orb-image-wrap.orb-fixed{
    width:210px;
    height:210px;
    flex-basis:210px;
  }
  .orb-image-wrap.orb-fixed .orb-image{
    width:210px !important;
    height:210px !important;
  }
  .orb-question{
    max-width:330px;
  }
}


/* =========================================================
   ATHENA V5.4 — ORB POSITIONERING
   De orb staat nu in een vaste middenkolom en kan niet meer
   door de linker tekstkolom of agenda naar rechts worden gedrukt.
   ========================================================= */

.hero{
  display:grid !important;
  grid-template-columns:minmax(320px, 1fr) 300px minmax(320px, 390px) !important;
  grid-template-areas:"copy orb agenda" !important;
  column-gap:24px !important;
  row-gap:14px !important;
  align-items:start !important;
  width:100% !important;
  max-width:none !important;
}

.hero > *{
  min-width:0 !important;
}

.hero-copy{
  grid-area:copy !important;
  width:100% !important;
  max-width:560px !important;
  justify-self:start !important;
  align-self:center !important;
  padding-left:8px !important;
}

.orb-zone{
  grid-area:orb !important;
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  justify-self:center !important;
  align-self:start !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

.orb-image-wrap.orb-fixed{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  flex:0 0 220px !important;
  aspect-ratio:1/1 !important;
  margin:0 auto 10px !important;
  padding:0 !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
}

.orb-image-wrap.orb-fixed .orb-image{
  position:static !important;
  display:block !important;
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  aspect-ratio:1/1 !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  border-radius:50% !important;
}

.orb-question{
  display:block !important;
  width:300px !important;
  max-width:300px !important;
  min-width:0 !important;
  margin:0 auto !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  text-align:center !important;
}

.agenda{
  grid-area:agenda !important;
  width:100% !important;
  max-width:390px !important;
  min-width:0 !important;
  justify-self:end !important;
  align-self:start !important;
  margin:0 !important;
}

/* Middenklasse: orb blijft boven, agenda schuift er niet tegenaan */
@media (max-width: 1280px){
  .hero{
    grid-template-columns:minmax(300px,1fr) 280px minmax(300px,350px) !important;
    column-gap:18px !important;
  }
  .orb-zone{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
  }
  .orb-question{
    width:280px !important;
    max-width:280px !important;
  }
  .agenda{
    max-width:350px !important;
  }
}

/* Smallere desktop/tablet: agenda onder de kop, orb blijft gecentreerd */
@media (max-width: 1080px){
  .hero{
    grid-template-columns:minmax(0,1fr) 280px !important;
    grid-template-areas:
      "copy orb"
      "agenda agenda" !important;
    align-items:center !important;
  }
  .hero-copy{
    max-width:none !important;
  }
  .agenda{
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }
}

/* Mobiel: alles onder elkaar */
@media (max-width: 760px){
  .hero{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "copy"
      "orb"
      "agenda" !important;
  }
  .orb-zone{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .orb-question{
    width:min(320px,100%) !important;
    max-width:320px !important;
  }
}


/* =========================================================
   ATHENA V5.5 — ORB EXACT IN HET MIDDEN VAN HET HOOFDVLAK
   Niet meer gecentreerd in een gridkolom, maar t.o.v. de hele hero.
   ========================================================= */

.hero{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(330px, 1fr) minmax(330px, 390px) !important;
  grid-template-areas:"copy agenda" !important;
  column-gap:360px !important; /* fysieke ruimte voor de orb in het midden */
  align-items:start !important;
  min-height:300px !important;
}

.hero-copy{
  grid-area:copy !important;
  align-self:start !important;
  justify-self:start !important;
  max-width:520px !important;
  z-index:2 !important;
}

.agenda{
  grid-area:agenda !important;
  align-self:start !important;
  justify-self:end !important;
  width:100% !important;
  max-width:390px !important;
  z-index:2 !important;
}

.orb-zone{
  position:absolute !important;
  left:50% !important;
  top:2px !important;
  right:auto !important;
  bottom:auto !important;
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  z-index:3 !important;
}

.orb-image-wrap.orb-fixed{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  flex:0 0 220px !important;
  margin:0 auto 10px !important;
}

.orb-image-wrap.orb-fixed .orb-image{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  object-fit:contain !important;
  border-radius:50% !important;
}

.orb-question{
  width:300px !important;
  max-width:300px !important;
  min-width:300px !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* De snelacties beginnen altijd onder de orb */
.actions{
  position:relative !important;
  z-index:2 !important;
  clear:both !important;
}

/* Normale desktopbreedtes */
@media(max-width:1450px){
  .hero{
    grid-template-columns:minmax(290px,1fr) minmax(300px,350px) !important;
    column-gap:320px !important;
  }
  .hero-copy{max-width:460px !important}
  .agenda{max-width:350px !important}
  .orb-zone{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
  }
  .orb-question{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
  }
}

/* Tablet / smalle desktop: geen absolute orb meer, om overlap te voorkomen */
@media(max-width:1100px){
  .hero{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr 280px !important;
    grid-template-areas:
      "copy orb"
      "agenda agenda" !important;
    column-gap:18px !important;
    row-gap:14px !important;
    min-height:0 !important;
  }
  .orb-zone{
    position:static !important;
    grid-area:orb !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    justify-self:center !important;
  }
  .agenda{
    grid-area:agenda !important;
    max-width:none !important;
    justify-self:stretch !important;
  }
}

/* Mobiel */
@media(max-width:760px){
  .hero{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "copy"
      "orb"
      "agenda" !important;
  }
  .orb-zone{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .orb-question{
    width:min(320px,100%) !important;
    min-width:0 !important;
    max-width:320px !important;
  }
}


/* =========================================================
   ATHENA V5.6 — ORB VERTICAAL OMHOOG GECORRIGEERD
   De orb stond visueel te laag. Alleen de verticale positie
   wordt aangepast; horizontale centrering blijft exact 50%.
   ========================================================= */

@media(min-width:1101px){
  .orb-zone{
    top:-34px !important;
  }

  .hero{
    min-height:276px !important;
  }

  .orb-question{
    margin-top:-2px !important;
  }
}

@media(min-width:1281px){
  .orb-zone{
    top:-42px !important;
  }

  .hero{
    min-height:270px !important;
  }
}


/* =========================================================
   ATHENA V5.7 — ORB BRONAFBEELDING ONGEWIJZIGD + LAGER
   ========================================================= */

@media(min-width:1101px){
  .hero{
    min-height:330px !important;
  }

  .orb-zone{
    left:50% !important;
    top:32px !important;
    width:320px !important;
    min-width:320px !important;
    max-width:320px !important;
    transform:translateX(-50%) !important;
  }

  .orb-image-wrap.orb-fixed{
    width:270px !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:270px !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    flex:0 0 auto !important;
    margin:0 auto 8px !important;
    overflow:visible !important;
  }

  .orb-image-wrap.orb-fixed .orb-image{
    display:block !important;
    width:270px !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:270px !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:0 !important;
    clip-path:none !important;
    mask:none !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
  }

  .orb-question{
    width:320px !important;
    min-width:320px !important;
    max-width:320px !important;
    margin:2px auto 0 !important;
  }
}

/* Brede monitor: iets groter, maar nog steeds natuurlijk */
@media(min-width:1450px){
  .orb-zone{
    top:38px !important;
    width:340px !important;
    min-width:340px !important;
    max-width:340px !important;
  }
  .orb-image-wrap.orb-fixed{
    width:285px !important;
    max-width:285px !important;
  }
  .orb-image-wrap.orb-fixed .orb-image{
    width:285px !important;
    max-width:285px !important;
  }
  .orb-question{
    width:340px !important;
    min-width:340px !important;
    max-width:340px !important;
  }
}

/* Tablet/mobile: natuurlijke verhouding behouden */
@media(max-width:1100px){
  .orb-image-wrap.orb-fixed{
    width:240px !important;
    height:auto !important;
    max-width:240px !important;
    aspect-ratio:auto !important;
    flex:0 0 auto !important;
  }
  .orb-image-wrap.orb-fixed .orb-image{
    width:240px !important;
    height:auto !important;
    max-width:240px !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
  }
}


/* =========================================================
   ATHENA V5.8 — NIEUWE TRANSPARANTE ATHENA ORB
   Gebruikt de hierboven gegenereerde afbeelding rechtstreeks.
   ========================================================= */

@media(min-width:1101px){
  .hero{
    min-height:320px !important;
  }

  .orb-zone{
    left:50% !important;
    top:18px !important;
    width:340px !important;
    min-width:340px !important;
    max-width:340px !important;
    transform:translateX(-50%) !important;
  }

  .orb-image-wrap.orb-fixed{
    width:280px !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:280px !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    flex:0 0 auto !important;
    margin:0 auto 6px !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .orb-image-wrap.orb-fixed .orb-image{
    display:block !important;
    width:280px !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:280px !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:0 !important;
    clip-path:none !important;
    mask:none !important;
    background:transparent !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
    filter:drop-shadow(0 0 22px rgba(35,187,255,.18)) !important;
  }

  .orb-question{
    width:340px !important;
    min-width:340px !important;
    max-width:340px !important;
    margin:0 auto !important;
  }
}

@media(min-width:1450px){
  .orb-zone{
    top:20px !important;
    width:360px !important;
    min-width:360px !important;
    max-width:360px !important;
  }

  .orb-image-wrap.orb-fixed{
    width:300px !important;
    max-width:300px !important;
  }

  .orb-image-wrap.orb-fixed .orb-image{
    width:300px !important;
    max-width:300px !important;
  }

  .orb-question{
    width:360px !important;
    min-width:360px !important;
    max-width:360px !important;
  }
}

@media(max-width:1100px){
  .orb-image-wrap.orb-fixed{
    width:250px !important;
    height:auto !important;
    max-width:250px !important;
    aspect-ratio:auto !important;
    flex:0 0 auto !important;
    background:transparent !important;
  }

  .orb-image-wrap.orb-fixed .orb-image{
    width:250px !important;
    height:auto !important;
    max-width:250px !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    background:transparent !important;
  }
}


/* Athena V5.9 — AI Tutor status en foutmeldingen */
#sendAI:disabled{opacity:.65;cursor:wait}
.error-bubble{border:1px solid rgba(237,106,100,.55);background:rgba(75,28,31,.72)!important;color:#ffd9d7}
.diag-link{color:#55cffd;font-weight:700;margin-left:8px;white-space:nowrap}

/* Athena V6.1 - Athena-logo op login */
.login-card .login-logo-main{
  width:112px !important;
  height:auto !important;
  max-width:42% !important;
  max-height:none !important;
  margin:0 auto 10px !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 0 12px rgba(231,190,131,.16));
}
@media(max-width:600px){
  .login-card .login-logo-main{width:100px !important;max-width:46% !important;}
}


/* Athena V6.3 — live temperatuur Vlieghuis */
#weatherTemp{
  min-width:42px;
  display:inline-block;
  text-align:center;
}
#weatherIcon{
  min-width:18px;
  display:inline-block;
  text-align:center;
}