:root{
  --bg:#0b0b0b;
  --fg:#ffffff;
  --primary:#00aff1;
  --link-visited:#004e7a;
  --accent:#f5d77a;
  --muted: #8b8b8b;
  --max-width:1200px;
  --nav-height:72px;
  font-synthesis: none;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;padding-top:var(--nav-height);display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto;padding-bottom:24px}
.container{width:calc(100% - 40px);max-width:var(--max-width);margin:0 auto}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.4));backdrop-filter:blur(6px);z-index:40;height:var(--nav-height)}
.nav-inner{position:relative;display:flex;align-items:center;justify-content:center;padding:22px 0}
.brand{position:absolute;left:24px;display:flex;align-items:center;gap:14px;color:var(--fg);text-decoration:none}
.brand .logo{height:44px;width:auto}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{text-decoration:none;opacity:.9;color:var(--fg);transition:background-color .18s ease,color .18s ease}
.nav-cta{position:absolute;right:24px}
.nav-cta .btn{margin-left:8px}
.nav-links a{padding:8px 12px;border-radius:8px}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.btn-primary{background:var(--primary);color:#000}
.btn-ghost{border:1px solid rgba(255,255,255,0.08);color:var(--fg);background:transparent}
.btn:visited{color:inherit;text-decoration:none}
.btn-ghost:visited{color:var(--fg)}
.btn-primary:visited{color:#000}

/* Hero */
.hero{position:relative;padding:80px 0;background-size:cover;background-position:center;color:var(--fg);overflow:hidden}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.65))}
.hero-inner{display:flex;gap:32px;align-items:center;position:relative}
.hero-copy{flex:1;max-width:640px}
.hero .hero-banner{max-width:240px;margin-bottom:8px}
.hero h1{font-size:48px;margin:6px 0 12px}
.lead{color:var(--muted);font-size:18px}
.hero-actions{margin-top:18px;display:flex;gap:12px}
.badges{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:12px;color:var(--muted)}

.hero-media{width:380px;display:flex;align-items:center;justify-content:center;position:relative}
.character{width:320px;max-width:100%;border-radius:10px;display:block;border:0;background:transparent;outline:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:none !important;filter:none !important;-webkit-filter:none !important}
.spin-deco{position:absolute;right:-20px;bottom:10px;width:120px;opacity:.9;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.6))}

/* Sections */
h2{color:var(--fg);margin-top:28px}
.features{padding:48px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));padding:18px;border-radius:12px}
.card h3{margin:0 0 8px}

.commands{padding:28px 0}
.commands code{background:rgba(255,255,255,0.04);padding:4px 8px;border-radius:6px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.04);padding:24px 0;margin-top:40px}
.site-footer{margin-top:auto}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:12px}
.footer-links a{text-decoration:none;color:var(--fg);transition:background-color .18s ease,color .18s ease;padding:6px 10px;border-radius:8px}

/* Keep navbar/footer links white (override global visited color) */
.nav-links a:visited, .footer-links a:visited{color:var(--fg)}

/* Auth menu dropdown: keep links white in all states (clicked/focus/visited) */
.auth-menu-dropdown a, .auth-menu-dropdown a:visited, .auth-menu-dropdown a:active, .auth-menu-dropdown a:focus{
  color:var(--fg);
  text-decoration:none;
}

/* Fill with secondary accent on hover */
.nav-links a:hover,.nav-links a:focus,.footer-links a:hover,.footer-links a:focus{
  background:var(--accent);
  color:var(--bg);
  text-decoration:none;
}

/* Global link styles: remove underline, make unclicked links primary blue
  and clicked (visited) links the site's foreground color */
a{color:var(--primary);text-decoration:none}
a:visited{color:var(--link-visited)}
a:hover,a:focus,a:active{color:var(--accent);text-decoration:none}

/* Buttons should not inherit global visited-link colors */
a.btn,
a.btn:visited,
a.btn:hover,
a.btn:focus,
a.btn:active{
  text-decoration:none;
}
a.btn.btn-ghost,
a.btn.btn-ghost:visited,
a.btn.btn-ghost:hover,
a.btn.btn-ghost:focus,
a.btn.btn-ghost:active{
  color:var(--fg);
}
a.btn.btn-primary,
a.btn.btn-primary:visited{
  color:#000;
}

/* Brand (AgentOS) should remain white in the nav */
.nav .brand, a.brand{color:var(--fg);text-decoration:none}
.nav .brand:visited, a.brand:visited{color:var(--fg)}

/* Buttons should keep their intended colors and hover behavior
  (override global link hover that fills with --accent) */
.btn{color:inherit;text-decoration:none}
.btn-ghost{color:var(--fg)}
.btn-primary{color:#000}

/* Hero/index buttons: preserve original hover behavior */
.hero .btn, .hero .btn-ghost, .hero .btn-primary{color:inherit}
/* Ensure hero buttons show white text on hover and are not filled with --accent */
.hero .btn:hover, .hero .btn:focus, .hero .btn:active{color:var(--fg);text-decoration:none}
.hero .btn-ghost:hover, .hero .btn-ghost:focus{background:rgba(255,255,255,0.06);color:var(--fg)}
.hero .btn-primary:hover, .hero .btn-primary:focus, .hero #invite:hover, .hero #invite:focus{background:var(--primary);filter:brightness(0.88);color:#000 !important;text-decoration:none}

/* Ensure primary buttons keep black text by default and white on hover
  across the site (overrides earlier `color:inherit`). */
.btn.btn-primary{color:#000}
.btn.btn-primary:hover,.btn.btn-primary:focus,.btn.btn-primary:active{color:var(--fg);filter:brightness(0.95);text-decoration:none}
.nav-cta .btn.btn-primary{color:#000}

.btn.disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ensure footer hovers visually match navbar hovers */
.footer-links a:hover,.footer-links a:focus{background:var(--accent);color:var(--bg);text-decoration:none}

/* make small footer logo consistent */
.brand-sm img{height:28px;width:auto;display:inline-block}
.brand-sm{display:flex;align-items:center;gap:8px;color:var(--fg)}

/* page banner / parallax for features page */
.page-banner{background-image:url('media/banner.png');background-size:contain;background-position:center top;background-repeat:no-repeat;background-attachment:fixed;min-height:240px;border-bottom:1px solid rgba(255,255,255,0.04);box-shadow:inset 0 -60px 80px rgba(0,0,0,0.45)}
.content{padding:36px 0}
.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:18px}
.commands-list{margin-top:14px}

/* Command card grid */
.cmd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.cmd-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);min-height:120px;display:flex;flex-direction:column;justify-content:flex-start}
.cmd-card code{display:block;background:rgba(0,0,0,0.25);padding:8px 10px;border-radius:8px;color:var(--fg);margin-bottom:10px;font-weight:700}
.cmd-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.4}

/* Feature intro with spinning gif */
.features-intro{display:flex;gap:24px;align-items:center;margin-bottom:18px}
.features-intro .intro-copy{flex:1}
.features-intro .spin-feature{width:180px;height:auto;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,0.6);align-self:flex-start}

@media (max-width:900px){
  .features-intro{flex-direction:column-reverse;text-align:center}
  .features-intro .spin-feature{width:140px}
}

/* Single-row showcase for index */
.cmd-row{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;margin-top:18px}
@media (max-width:900px){
  .cmd-row{grid-template-columns:repeat(2,minmax(160px,1fr))}
}


/* Responsiveness */
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse;text-align:center}
  .hero-media{width:100%}
  .hero h1{font-size:36px}
  .nav-links{display:none}
  .nav{overflow:visible}
  .nav .nav-inner{justify-content:space-between;padding:14px 0}
  .nav .brand{position:static;left:auto}
  .nav .nav-cta{position:static;right:auto}
  .nav.nav-mobile-open .nav-links{
    display:flex;
    position:absolute;
    top:calc(100% + 8px);
    left:20px;
    right:20px;
    z-index:70;
    flex-direction:column;
    gap:4px;
    padding:10px;
    border-radius:12px;
    background:linear-gradient(180deg, rgba(18,18,18,0.98), rgba(10,10,10,0.98));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 18px 40px rgba(0,0,0,0.42);
    backdrop-filter:blur(10px);
  }
  .nav.nav-mobile-open .nav-links a{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
  }
}

/* Small animations */
.card{transform:translateY(6px);transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:none;box-shadow:0 10px 30px rgba(0,0,0,0.55)}
.hero h1, .card, .character{animation:fadeUp .6s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Grading page styles */
.content.grading{padding-top:52px}
.grading .question{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  padding:16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  margin:10px 0;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.grading .question:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,0.34);
  border-color:rgba(255,255,255,0.10);
}
.grading .question::after{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  transition:box-shadow .22s ease, opacity .22s ease;
  opacity:.45;
}
.grading .question:hover::after{opacity:.75}
.grading .question.mc-correct{
  border-color:rgba(54, 199, 108, 0.6);
  box-shadow:0 0 0 1px rgba(54, 199, 108, 0.18), 0 10px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(54, 199, 108, 0.08) inset;
}
.grading .question.mc-correct::after{
  background:linear-gradient(90deg, rgba(54,199,108,0), rgba(54,199,108,.85), rgba(54,199,108,0));
  box-shadow:0 0 16px rgba(54,199,108,0.72), 0 0 28px rgba(54,199,108,0.35);
}
.grading .question.mc-correct:hover{
  box-shadow:0 0 0 1px rgba(54, 199, 108, 0.22), 0 14px 30px rgba(0,0,0,0.34), 0 0 24px rgba(54,199,108,0.18);
}
.grading .question.mc-correct:hover::after{box-shadow:0 0 22px rgba(54,199,108,0.95), 0 0 40px rgba(54,199,108,0.5)}
.grading .question.mc-incorrect{
  border-color:rgba(234, 76, 76, 0.6);
  box-shadow:0 0 0 1px rgba(234, 76, 76, 0.18), 0 10px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(234, 76, 76, 0.08) inset;
}
.grading .question.mc-incorrect::after{
  background:linear-gradient(90deg, rgba(234,76,76,0), rgba(234,76,76,.85), rgba(234,76,76,0));
  box-shadow:0 0 16px rgba(234,76,76,0.72), 0 0 28px rgba(234,76,76,0.35);
}
.grading .question.mc-incorrect:hover{
  box-shadow:0 0 0 1px rgba(234, 76, 76, 0.22), 0 14px 30px rgba(0,0,0,0.34), 0 0 24px rgba(234,76,76,0.18);
}
.grading .question.mc-incorrect:hover::after{box-shadow:0 0 22px rgba(234,76,76,0.95), 0 0 40px rgba(234,76,76,0.5)}
.grading .qmeta{font-size:.95rem;color:var(--muted);margin-bottom:6px}
.grading .prompt,.grading .answer{margin:6px 0;color:var(--fg)}
.grading textarea{width:100%;min-height:120px;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--fg)}
.grading input[type=number]{width:120px;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--fg);transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.grading input[type=number]:focus{outline:none;border-color:rgba(0,175,241,0.5);box-shadow:0 0 0 3px rgba(0,175,241,0.12)}
.grading input[type=number].score-over-max{
  border-color:rgba(234,76,76,0.95);
  box-shadow:0 0 0 3px rgba(234,76,76,0.18), 0 0 18px rgba(234,76,76,0.18);
  transform:translateY(-1px);
}
.grading input[type=number].score-over-max:focus{box-shadow:0 0 0 3px rgba(234,76,76,0.24), 0 0 22px rgba(234,76,76,0.24)}
.grading .actions{margin-top:16px;display:flex;gap:8px}
.grading .actions .btn{
  position:relative;
  overflow:hidden;
  min-width:140px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, color .18s ease;
}
.grading .actions .btn::before{
  content:'';
  position:absolute;
  inset:-40% -20%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%);
  transform:translateX(-30%) rotate(8deg);
  opacity:0;
  transition:opacity .18s ease, transform .45s ease;
  pointer-events:none;
}
.grading .actions .btn:hover::before,
.grading .actions .btn:focus::before{opacity:1;transform:translateX(20%) rotate(8deg)}
.grading .actions .btn:hover,
.grading .actions .btn:focus{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,0.22);
}
.grading .actions .btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(0,0,0,0.18)}
.grading .actions .btn-primary{
  background:linear-gradient(180deg, rgba(0,175,241,1), rgba(0,150,214,1));
  box-shadow:0 10px 22px rgba(0,175,241,0.24);
}
.grading .actions .btn-primary:hover,.grading .actions .btn-primary:focus{
  filter:brightness(1.05);
  box-shadow:0 14px 30px rgba(0,175,241,0.34);
}
.grading .actions .btn-ghost{
  border-color:rgba(255,255,255,0.14);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}
.grading .actions .btn-ghost:hover,.grading .actions .btn-ghost:focus{
  border-color:rgba(245,215,122,0.4);
  background:linear-gradient(180deg, rgba(245,215,122,0.12), rgba(255,255,255,0.03));
}
.grading .actions .btn.disabled,
.grading .actions .btn:disabled{opacity:.6;filter:saturate(.8)}
.grading .actions .btn-primary.is-submitting{letter-spacing:.02em}
.grading .notice{color:#ff6b6b;margin:8px 0}
.access-notice{
  margin:20px auto 0;
  width:calc(100% - 40px);
  max-width:var(--max-width);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(234,76,76,0.32);
  background:linear-gradient(180deg, rgba(72,20,20,0.7), rgba(46,14,14,0.7));
  color:#ffd3d3;
}
.access-notice__content{line-height:1.35}
.access-notice__close{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:var(--fg);
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:700;
}
.access-notice__close:hover,
.access-notice__close:focus{
  background:rgba(255,255,255,0.12);
}
.grading #previewArea pre{background:rgba(255,255,255,0.03);padding:12px;border-radius:8px;color:var(--fg)}
.dm-preview-card{
  max-width:340px;
  padding:14px 16px 16px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(32, 28, 28, 0.98), rgba(20, 18, 18, 0.98));
  border:1px solid rgba(255,255,255,0.08);
  border-left:4px solid rgba(255,255,255,0.22);
  box-shadow:0 18px 40px rgba(0,0,0,0.32);
  color:var(--fg);
}
.dm-preview-card--passed{
  border-left-color:#31d06c;
  background:linear-gradient(180deg, rgba(16, 44, 28, 0.98), rgba(13, 28, 22, 0.98));
}
.dm-preview-card--failed{
  border-left-color:#ea4c4c;
  background:linear-gradient(180deg, rgba(49, 22, 22, 0.98), rgba(30, 12, 12, 0.98));
}
.dm-preview-card__title{font-size:1.03rem;font-weight:800;margin:0 0 10px;letter-spacing:-0.01em}
.dm-preview-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:10px}
.dm-preview-card__label{font-size:.82rem;font-weight:800;opacity:.92;margin-bottom:2px}
.dm-preview-card__value{font-size:.98rem;font-weight:600;line-height:1.3}
.dm-preview-card__feedback{margin-top:12px}
.dm-preview-card__feedback .dm-preview-card__label{margin-bottom:4px}
.dm-preview-card__passed{color:#8af0ad}
.dm-preview-card__failed{color:#ff9d9d}
.grading #questions{margin-top:12px}
.grading-page{position:relative}
.grading-page--with-toc{padding-right:0}
.exam-section-divider{
  margin:16px 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.82rem;
}
.exam-section-divider::before,
.exam-section-divider::after{
  content:'';
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(245,215,122,0.06), rgba(245,215,122,0.45), rgba(245,215,122,0.06));
}
.exam-section-divider span{
  white-space:nowrap;
  padding:0 2px;
}

.grade-sections-toc{
  position:fixed;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  width:210px;
  max-height:calc(100vh - (var(--nav-height) + 48px));
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg, rgba(18,18,18,0.96), rgba(10,10,10,0.96));
  box-shadow:0 18px 40px rgba(0,0,0,0.3);
  backdrop-filter:blur(10px);
  z-index:20;
  overflow:auto;
}
.grade-sections-toc__title{
  margin-bottom:10px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.grade-sections-toc__list{
  display:grid;
  gap:8px;
}
.grade-sections-toc__item{
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  color:var(--fg);
  text-align:left;
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.grade-sections-toc__item:hover,
.grade-sections-toc__item:focus{
  transform:translateX(-2px);
  border-color:rgba(245,215,122,0.35);
  background:rgba(245,215,122,0.08);
  color:var(--accent);
}
.grade-sections-toc__item:focus:not(:focus-visible){
  transform:none;
  border-color:rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  color:var(--fg);
}
.grade-sections-toc__item:focus-visible{
  outline:2px solid rgba(245,215,122,0.45);
  outline-offset:2px;
}
.grade-sections-toc__item.is-active{
  border-color:rgba(0,175,241,0.34);
  background:rgba(0,175,241,0.12);
  color:#bfefff;
}
.grade-sections-toc__item.is-active:focus,
.grade-sections-toc__item.is-active:focus-visible,
.grade-sections-toc__item.is-active:hover{
  border-color:rgba(0,175,241,0.34);
  background:rgba(0,175,241,0.12);
  color:#bfefff;
}

@media (max-width:700px){
  .grading input[type=number]{width:100%}
  .grading .actions{flex-direction:column}
}

@media (max-width:1150px){
  .grading-page--with-toc{padding-right:0}
  .grade-sections-toc{display:none}
}

/* Dashboard cards */
.dashboard-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  margin-top:30px;
}
.dashboard-header h1{margin:0}
.history-page{padding-top:22px}
.grading-page{padding-top:22px}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:14px;
}
.dashboard-card{
  position:relative;
  display:block;
  padding:22px 22px 20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
  color:var(--fg);
  text-decoration:none;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,0.22);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.dashboard-card:visited,
.dashboard-card:hover,
.dashboard-card:focus,
.dashboard-card:active,
.dashboard-card:visited:hover,
.dashboard-card:visited:focus{
  color:var(--fg);
  text-decoration:none;
}
.dashboard-card:hover,
.dashboard-card:focus{
  transform:translateY(-3px);
  border-color:rgba(0,175,241,0.35);
  box-shadow:0 16px 36px rgba(0,0,0,0.34), 0 0 0 1px rgba(0,175,241,0.10), 0 0 28px rgba(0,175,241,0.12);
  background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.025));
}
.dashboard-card::after{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,175,241,0), rgba(0,175,241,0.95), rgba(0,175,241,0));
  box-shadow:0 0 14px rgba(0,175,241,0.35);
  opacity:.65;
  transition:opacity .22s ease, box-shadow .22s ease;
}
.dashboard-card:hover::after,
.dashboard-card:focus::after{
  opacity:1;
  box-shadow:0 0 18px rgba(0,175,241,0.55), 0 0 30px rgba(0,175,241,0.18);
}
.dashboard-card__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.dashboard-card__badge{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(54,199,108,0.14);
  color:#8af0ad;
  border:1px solid rgba(54,199,108,0.22);
}
.dashboard-card__badge--locked{
  text-transform:none;
  letter-spacing:0;
  max-width:72%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:rgba(245,215,122,0.14);
  color:#ffe2a8;
  border-color:rgba(245,215,122,0.3);
}
.dashboard-card__badge--new{
  background:rgba(0,175,241,0.18);
  color:#d6f6ff;
  border-color:rgba(0,175,241,0.34);
}
.dashboard-card__badge--current{
  background:rgba(54,199,108,0.14);
  color:#8af0ad;
  border-color:rgba(54,199,108,0.22);
}
.dashboard-card__link,
.dashboard-card:visited .dashboard-card__link,
.dashboard-card:hover .dashboard-card__link,
.dashboard-card:focus .dashboard-card__link,
.dashboard-card:active .dashboard-card__link{
  font-size:.88rem;
  color:var(--primary);
  font-weight:700;
}
.dashboard-card h3{margin:0 0 10px;font-size:1.15rem}
.dashboard-card p{margin:0;color:var(--fg);opacity:.92;line-height:1.52}
.dashboard-card__meta{margin-top:14px;color:var(--muted);font-size:.92rem}
.dashboard-empty{
  padding:18px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.02);
  color:var(--muted);
}

.dashboard-card--selector .dashboard-card__badge{
  background:rgba(0,175,241,0.14);
  color:#bfefff;
  border-color:rgba(0,175,241,0.24);
}

.dashboard-card__details{
  margin-top:12px;
  display:grid;
  gap:10px;
  color:var(--muted);
  font-size:.93rem;
}

.dashboard-card__detail{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.dashboard-card__detail strong{
  color:var(--fg);
}

.dashboard-card__detail span:last-child{
  text-align:right;
}

.dashboard-card__link.is-muted{
  color:var(--muted);
  font-weight:600;
}

.aos-page{padding-top:24px}
.aos-page .profile-card__banner{background:linear-gradient(135deg, rgba(0,175,241,0.2), rgba(245,215,122,0.12), rgba(234,76,76,0.14))}

.aos-person-card .dashboard-card__badge{background:rgba(245,215,122,0.14);color:#ffe2a8;border-color:rgba(245,215,122,0.22)}
.aos-person-card .dashboard-card__link{color:var(--primary)}
.aos-person-card{padding:18px 18px 16px}
.aos-person-card__tags{margin-top:10px}
.aos-person-card__meta{display:grid;gap:8px;margin-top:10px;color:var(--muted);font-size:.93rem}
.aos-person-card__meta-row{display:flex;justify-content:space-between;gap:12px}
.aos-person-card__meta-row strong{color:var(--fg)}

.aos-warrant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.aos-warrant-card{display:block}
.aos-warrant-card .dashboard-card__top{align-items:flex-start}
.aos-warrant-card__title{margin:0 0 8px;font-size:1.08rem;font-weight:800}
.aos-warrant-card__subtitle{margin:0 0 12px;color:var(--muted);line-height:1.45}
.aos-warrant-card__meta{display:grid;gap:10px;margin-top:14px}
.aos-warrant-card__row{display:flex;justify-content:space-between;gap:12px;font-size:.93rem}
.aos-warrant-card__row strong{color:var(--fg)}
.aos-warrant-card__row--charges{align-items:flex-start}
.aos-warrant-card__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.aos-warrant-card__links a,
.aos-warrant-card__links button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
  text-decoration:none;
  font:inherit;
  cursor:pointer;
}
.aos-warrant-card__links a:hover,
.aos-warrant-card__links button:hover,
.aos-warrant-card__links a:focus,
.aos-warrant-card__links button:focus{
  border-color:rgba(0,175,241,0.45);
  box-shadow:0 0 0 3px rgba(0,175,241,0.12);
  outline:none;
}
.aos-warrant-card__links .is-danger{
  border-color:rgba(234,76,76,0.22);
  color:#ffb0b0;
  background:rgba(234,76,76,0.12);
}
.aos-warrant-card__links .is-danger:hover,
.aos-warrant-card__links .is-danger:focus{
  border-color:rgba(234,76,76,0.45);
  box-shadow:0 0 0 3px rgba(234,76,76,0.14);
  background:rgba(234,76,76,0.16);
}

.aos-charge-inline{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:72%}
.aos-charge-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(0,175,241,0.12);
  border:1px solid rgba(0,175,241,0.2);
  color:#d6f6ff;
  font-size:.82rem;
}

.aos-edit-fields{
  width:100%;
  margin-top:8px;
  padding:11px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.28);
  display:grid;
  gap:10px;
}
.aos-edit-fields label{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:.84rem;
}
.aos-edit-fields input{
  width:100%;
  padding:9px 10px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
}
.aos-edit-fields input:focus{
  outline:none;
  border-color:rgba(0,175,241,0.45);
  box-shadow:0 0 0 3px rgba(0,175,241,0.14);
}
.aos-edit-fields__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.aos-modal-open{overflow:hidden}

.aos-edit-modal[hidden]{display:none !important}
.aos-edit-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:18px;
}
.aos-edit-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(2px);
}
.aos-edit-modal__dialog{
  position:relative;
  width:min(560px, 100%);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(180deg, rgba(18,18,18,0.98), rgba(10,10,10,0.98));
  box-shadow:0 24px 52px rgba(0,0,0,0.44);
  padding:16px;
  display:grid;
  gap:10px;
}
.aos-edit-modal__dialog h3{margin:0 0 4px}
.aos-edit-modal__dialog label{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:.88rem;
}
.aos-edit-modal__dialog input{
  width:100%;
  padding:10px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
}
.aos-edit-modal__dialog input:focus{
  outline:none;
  border-color:rgba(0,175,241,0.45);
  box-shadow:0 0 0 3px rgba(0,175,241,0.14);
}
.aos-edit-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.aos-edit-modal__actions .btn{
  min-width:110px;
  text-align:center;
}

.aos-tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.aos-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  color:#e6edf3;
  font-size:.86rem;
  font-weight:700;
}
.aos-tag--approved{background:rgba(0,175,241,0.16);border-color:rgba(0,175,241,0.32);color:#c9f3ff}
.aos-tag--light{background:rgba(54,199,108,0.14);border-color:rgba(54,199,108,0.26);color:#b7f5cb}
.aos-tag--medium{background:rgba(245,173,66,0.16);border-color:rgba(245,173,66,0.28);color:#ffd9a0}
.aos-tag--heavy{background:rgba(234,76,76,0.16);border-color:rgba(234,76,76,0.28);color:#ffb0b0}
.aos-tag--reward{background:rgba(149,101,255,0.16);border-color:rgba(149,101,255,0.28);color:#d8c9ff}
.aos-tag--medal{background:rgba(28,193,169,0.16);border-color:rgba(28,193,169,0.28);color:#bbfff6}
.aos-tag--limit{background:rgba(255,104,162,0.16);border-color:rgba(255,104,162,0.28);color:#ffd0e1}
.aos-tag--neutral{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);color:#e6edf3}

.aos-empty{
  padding:18px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.02);
  color:var(--muted);
}

.aos-profile-note{color:var(--muted);margin:8px 0 0}

.aos-controls{margin:10px 0 14px}
.aos-search{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  color:var(--fg);
}
.aos-search:focus{
  outline:none;
  border-color:rgba(0,175,241,0.55);
  box-shadow:0 0 0 3px rgba(0,175,241,0.14);
}
.aos-search-summary{margin:8px 0 0;color:var(--muted);font-size:.95rem}

.event-panel-page .dashboard-header{margin-bottom:10px}
.event-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.event-card{
  position:relative;
  padding:16px 16px 14px;
}
.event-card--attending{
  border-color:rgba(54,199,108,0.34);
  box-shadow:0 16px 36px rgba(0,0,0,0.34), 0 0 0 1px rgba(54,199,108,0.16), 0 0 28px rgba(54,199,108,0.12);
}
.event-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.event-card__status{
  text-transform:uppercase;
  letter-spacing:.04em;
  background:rgba(0,175,241,0.14);
  border-color:rgba(0,175,241,0.28);
  color:#c9f3ff;
}
.event-card__time{color:var(--muted);font-size:.84rem;font-weight:700}
.event-card__title{margin:0 0 7px;font-size:1.05rem;line-height:1.25}
.event-card .event-card__attending-indicator{
  margin:0 0 12px;
  display:flex;
  width:fit-content;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(54,199,108,0.14);
  border:1px solid rgba(54,199,108,0.28);
  color:#b8f5cb;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
}
.event-card__meta{margin:0;color:var(--muted);font-size:.88rem;line-height:1.35}
.event-card__meta + .event-card__meta{margin-top:3px}
.event-card__desc{margin:10px 0 0;line-height:1.45;font-size:.93rem;color:var(--fg);opacity:.95}
.event-card__footer{
  margin-top:12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.event-card .event-card__id{
  margin:14px 0 0 !important;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.2;
  letter-spacing:.02em;
  display:block;
}
.event-attend-btn{
  padding:7px 11px;
  border-radius:10px;
  font-size:.85rem;
  font-weight:700;
}
.event-attend-btn.is-on{
  border-color:rgba(54,199,108,0.34);
  background:rgba(54,199,108,0.12);
  color:#b8f5cb;
}

.event-attendees-trigger{
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:0;
  color:var(--fg);
}
.event-attendees-trigger:hover .event-attendee-count,
.event-attendees-trigger:focus .event-attendee-count{
  color:#d6f6ff;
}

.event-attendee-stack{
  position:relative;
  height:30px;
  display:inline-block;
}
.event-attendee-avatar,
.event-attendee-plus,
.event-attendee-avatar--fallback{
  position:absolute;
  top:0;
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid #0e0e0e;
  box-shadow:0 6px 16px rgba(0,0,0,0.28);
}
.event-attendee-avatar{object-fit:cover;background:#222}
.event-attendee-avatar--fallback,
.event-attendee-plus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(0,175,241,0.22), rgba(0,175,241,0.12));
  color:#d6f6ff;
  font-size:.78rem;
  font-weight:800;
}
.event-attendee-plus{
  background:linear-gradient(180deg, rgba(245,215,122,0.25), rgba(245,215,122,0.14));
  color:#ffe2a8;
}
.event-attendee-count{
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
}

.event-attendee-menu{
  position:absolute;
  right:12px;
  bottom:52px;
  width:min(280px, calc(100% - 24px));
  max-height:230px;
  overflow:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(20,20,20,0.98), rgba(12,12,12,0.98));
  box-shadow:0 18px 38px rgba(0,0,0,0.45);
  padding:10px;
  z-index:8;
}
.event-attendee-menu__title{
  font-size:.83rem;
  font-weight:800;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:8px;
}
.event-attendee-menu__list{display:grid;gap:7px}
.event-attendee-menu__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 7px;
  border-radius:9px;
  background:rgba(255,255,255,0.03);
  font-size:.9rem;
}
.event-attendee-menu__item img,
.event-attendee-menu__fallback{
  width:24px;
  height:24px;
  border-radius:999px;
  flex:0 0 24px;
}
.event-attendee-menu__fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.12);
  color:var(--fg);
  font-size:.75rem;
  font-weight:800;
}
.event-attendee-menu__empty{margin:0;color:var(--muted);font-size:.88rem}

.event-attendance-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:20;
}
.event-attendance-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(3px);
}
.event-attendance-modal__dialog{
  position:relative;
  width:min(430px, 100%);
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(24,24,24,0.98), rgba(12,12,12,0.98));
  box-shadow:0 24px 40px rgba(0,0,0,0.5);
  z-index:1;
}
.event-attendance-modal__title{margin:0 0 8px;font-size:1rem}
.event-attendance-modal__text{margin:0 0 12px;color:var(--muted);line-height:1.45;font-size:.95rem}
.event-attendance-modal__option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  margin-top:10px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--fg);
  font-size:.93rem;
}
.event-attendance-modal__checkbox{accent-color:#36c76c;transform:scale(1.06)}
.event-attendance-modal__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
.event-attendance-modal__button{padding:8px 11px;border-radius:10px;font-size:.9rem;font-weight:700}
.event-attendance-modal__cancel{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:var(--fg)}
.event-attendance-modal__remove{border-color:rgba(255,104,162,0.24);background:rgba(255,104,162,0.12);color:#ffd0e1}
.event-attendance-modal__confirm{background:rgba(54,199,108,0.16);border-color:rgba(54,199,108,0.3);color:#b8f5cb}

@media (max-width:700px){
  .event-card__footer{flex-direction:column;align-items:stretch}
  .event-attendees-trigger{justify-content:flex-end}
}

.history-controls{
  margin:14px 0 10px;
}
.history-search{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  color:var(--fg);
}
.history-search:focus{
  outline:none;
  border-color:rgba(0,175,241,0.55);
  box-shadow:0 0 0 3px rgba(0,175,241,0.14);
}
.history-summary{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 10px;
}

@media (max-width:700px){
  .dashboard-header{align-items:flex-start;flex-direction:column}
}

/* Profile page */
.profile-page{padding-top:24px}
.profile-shell{display:grid;gap:18px}
.profile-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(18,18,18,0.98), rgba(12,12,12,0.98));
  box-shadow:0 20px 48px rgba(0,0,0,0.34);
}
.profile-card__banner{height:112px;background:linear-gradient(135deg, rgba(0,175,241,0.22), rgba(245,215,122,0.12), rgba(54,199,108,0.16))}
.profile-card__body{display:flex;gap:18px;align-items:flex-start;padding:0 20px 18px;margin-top:-38px}
.profile-card__avatar{
  width:96px;height:96px;border-radius:50%;border:5px solid #121212;object-fit:cover;background:#111;box-shadow:0 10px 24px rgba(0,0,0,0.45)
}
.profile-card__identity{padding-top:48px;min-width:0}
.profile-card__identity h1{margin:0;font-size:1.5rem;line-height:1.15}
.profile-card__identity p{margin:6px 0 0;color:var(--muted)}
.profile-card__bio{color:var(--fg) !important;opacity:.92}
.profile-roles{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 20px}
.profile-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:rgba(0,175,241,0.12);border:1px solid rgba(0,175,241,0.22);color:#bfefff;font-size:.9rem;font-weight:700
}
.profile-chip--muted{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08);color:var(--muted)}
.profile-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.profile-panel{
  padding:22px;border-radius:16px;border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  box-shadow:0 14px 32px rgba(0,0,0,0.18)
}
.profile-panel h2{margin-top:0;margin-bottom:14px}
.profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.profile-stat{padding:16px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05)}
.profile-stat__label{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.profile-stat__value{font-size:1.05rem;font-weight:800;color:var(--fg)}
.aos-charge-summary{margin-top:18px}
.aos-charge-summary h3{margin:0 0 10px;color:var(--fg);font-size:1.02rem}
.aos-charge-totals{display:grid;gap:10px}
.aos-charge-total-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.025);
}
.aos-charge-total-row span{color:#bfefff;font-weight:700}
.aos-charge-total-row strong{color:var(--fg);font-weight:700;text-align:right}
.profile-activity{display:grid;gap:10px}
.profile-activity__item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05)
}
.profile-activity__title{font-weight:800}
.profile-activity__meta{margin-top:4px;color:var(--muted);font-size:.92rem}
.profile-activity__status{
  padding:7px 10px;border-radius:999px;font-size:.82rem;font-weight:800;white-space:nowrap
}
.profile-activity__status.is-passed{background:rgba(54,199,108,0.14);color:#8af0ad;border:1px solid rgba(54,199,108,0.2)}
.profile-activity__status.is-failed{background:rgba(234,76,76,0.14);color:#ffb0b0;border:1px solid rgba(234,76,76,0.2)}
.profile-empty{padding:16px;border-radius:12px;border:1px dashed rgba(255,255,255,0.12);color:var(--muted);background:rgba(255,255,255,0.02)}

.auth-denied{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(234,76,76,0.2);
  background:rgba(234,76,76,0.12);
  color:#ffb0b0;
  font-size:.9rem;
  font-weight:700;
}

@media (max-width:900px){
  .profile-grid{grid-template-columns:1fr}
}