@font-face {
  font-family: Marianne;
  src: url("../fonts/Marianne-Regular.woff") format("woff");
  font-display: swap;
}

:root {
  --ink: #20163a;
  --muted: #746d83;
  --violet: #5b2bb2;
  --violet-dark: #412080;
  --violet-soft: #eee7fb;
  --mint: #13a889;
  --orange: #f0913f;
  --blue: #3978d4;
  --surface: rgba(255, 255, 255, .91);
  --line: rgba(67, 43, 105, .11);
  --shadow: 0 22px 70px rgba(44, 26, 77, .13);
  font-family: Marianne, Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f6f3fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(121, 79, 204, .13), transparent 30rem),
    radial-gradient(circle at 97% 95%, rgba(244, 153, 79, .12), transparent 27rem),
    #f7f5fb;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .45;
  pointer-events: none;
  animation: float 15s ease-in-out infinite alternate;
}
.ambient-one { left: -10rem; top: 18%; background: rgba(131, 90, 214, .14); }
.ambient-two { right: -11rem; bottom: -8rem; background: rgba(244, 164, 97, .16); animation-delay: -6s; }

@keyframes float {
  to { transform: translate3d(1.6rem, -1.8rem, 0) scale(1.08); }
}

.eyebrow {
  margin: 0 0 .45rem;
  color: var(--violet);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.login-card {
  position: relative;
  width: min(100%, 29rem);
  padding: 3.25rem 3.15rem 2.6rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 2rem;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  animation: card-in .55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
}

.brand-mark, .mini-mark {
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(140deg, #764bd0, #48218f 68%);
  box-shadow: 0 10px 28px rgba(83, 40, 163, .28);
}
.brand-mark {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.7rem;
  border-radius: 1.35rem;
  font-size: 2rem;
  font-weight: 900;
  transform: rotate(-4deg);
}
.brand-mark span { color: #ffbd72; }
.brand-orbit {
  position: absolute;
  top: -3.2rem;
  right: -2rem;
  width: 11rem;
  height: 11rem;
  border: 1px solid rgba(91, 43, 178, .09);
  border-radius: 50%;
}
.brand-orbit::before, .brand-orbit::after {
  content: "";
  position: absolute;
  inset: 1.5rem;
  border: 1px solid rgba(91, 43, 178, .09);
  border-radius: inherit;
}
.brand-orbit::after { inset: 3rem; }
.brand-orbit span { position: absolute; color: rgba(91, 43, 178, .24); font-weight: 900; }
.brand-orbit span:nth-child(1) { bottom: .5rem; left: 1.4rem; }
.brand-orbit span:nth-child(2) { bottom: 2.8rem; right: -.1rem; }
.brand-orbit span:nth-child(3) { top: 2.5rem; left: .3rem; }

.login-card h1 {
  max-width: 20rem;
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.65rem);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.login-intro { margin: 1rem 0 1.8rem; color: var(--muted); line-height: 1.58; }
.login-form { display: grid; gap: 1rem; }
.login-form label { display: grid; gap: .45rem; color: #4e4560; font-size: .82rem; font-weight: 700; }
.login-form input {
  width: 100%;
  padding: .9rem 1rem;
  color: var(--ink);
  border: 1px solid rgba(68, 47, 99, .18);
  border-radius: .85rem;
  outline: none;
  background: rgba(251, 250, 253, .92);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-form input:focus { border-color: #7952c5; background: white; box-shadow: 0 0 0 4px rgba(101, 56, 188, .1); }
.form-error { margin: -.2rem 0 0; color: #b52645; font-size: .82rem; line-height: 1.4; }

.primary-button, .secondary-button, .danger-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border: 0;
  border-radius: .85rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.primary-button {
  min-height: 2.85rem;
  padding: .75rem 1rem;
  color: white;
  background: linear-gradient(135deg, #7043ca, #4c238e);
  box-shadow: 0 10px 24px rgba(82, 38, 165, .2);
  font-weight: 750;
}
.primary-button:hover, .secondary-button:hover, .danger-button:hover, .icon-button:hover { transform: translateY(-2px); }
.primary-button:active, .secondary-button:active, .danger-button:active, .icon-button:active { transform: translateY(0); }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.login-button { justify-content: space-between; margin-top: .25rem; padding-inline: 1.15rem; }
.danger-button {
  min-height: 2.72rem;
  padding: .7rem .95rem;
  color: #fff;
  background: linear-gradient(135deg, #d44c68, #aa2747);
  box-shadow: 0 9px 22px rgba(174, 40, 72, .18);
  font-size: .78rem;
  font-weight: 780;
}
.danger-button:disabled { opacity: .58; cursor: wait; transform: none; }
.privacy-note { display: flex; gap: .45rem; align-items: center; margin: 1.3rem 0 0; color: #8a8295; font-size: .72rem; }
.privacy-note span { color: var(--mint); font-size: .55rem; }
.back-home-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.35rem;
  padding: .52rem .75rem;
  border: 1px solid rgba(91, 43, 178, .14);
  border-radius: .72rem;
  color: #53328c;
  background: rgba(246, 241, 253, .82);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 800;
  transition: border-color .18s, background .18s, transform .18s;
}
.back-home-link:hover { border-color: rgba(91, 43, 178, .28); background: #f0e8fb; transform: translateY(-1px); }
.back-home-link:focus-visible { outline: 3px solid rgba(91, 43, 178, .16); outline-offset: 2px; }
.login-home-link { position: relative; z-index: 1; margin-bottom: 1.35rem; }

.dashboard {
  display: grid;
  grid-template: 4.75rem calc(100vh - 4.75rem) / 19rem minmax(0, 1fr);
  min-height: 100vh;
}
.topbar {
  position: relative;
  z-index: 10;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.45rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
}
.dashboard-brand { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.mini-mark { width: 2.7rem; height: 2.7rem; border-radius: .85rem; font-weight: 900; }
.dashboard-brand > span:last-child { display: grid; gap: .1rem; }
.dashboard-brand strong { font-size: .95rem; }
.dashboard-brand small { color: var(--muted); font-size: .69rem; }
.topbar-actions { display: flex; align-items: center; gap: .85rem; }
.status-dot, .live-mini {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #19b793;
  box-shadow: 0 0 0 4px rgba(25, 183, 147, .12);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 60%, 100% { box-shadow: 0 0 0 9px rgba(25, 183, 147, 0); } }
.icon-button { width: 2.55rem; height: 2.55rem; border: 1px solid var(--line); background: white; font-size: 1.15rem; }

.sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 1rem;
  padding: 1.55rem 1.15rem 1.2rem;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: rgba(249, 248, 252, .78);
}
.sidebar-heading { display: flex; align-items: end; justify-content: space-between; padding-inline: .35rem; }
.sidebar h2, .panel h2 { margin: 0; font-size: 1.22rem; letter-spacing: -.02em; }
.count-bubble { min-width: 1.75rem; padding: .28rem .45rem; border-radius: 99px; color: var(--violet); background: var(--violet-soft); text-align: center; font-size: .73rem; font-weight: 800; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box > span:first-child { position: absolute; left: .85rem; top: .53rem; color: #938ba0; font-size: 1.2rem; transform: rotate(-15deg); pointer-events: none; }
.search-box input { width: 100%; padding: .72rem .8rem .72rem 2.35rem; border: 1px solid var(--line); border-radius: .8rem; outline: none; background: white; }
.search-box input:focus { border-color: rgba(91, 43, 178, .35); box-shadow: 0 0 0 3px rgba(91, 43, 178, .07); }
.session-list { display: grid; flex: 1; gap: .55rem; align-content: start; min-height: 6rem; overflow: auto; padding: .15rem .25rem .5rem; scrollbar-width: thin; }
.session-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem;
  padding: .32rem;
  border: 1px solid transparent;
  border-radius: .95rem;
  color: inherit;
  background: transparent;
  text-align: left;
  transition: background .18s, transform .18s, border-color .18s, box-shadow .18s;
}
.session-item:hover { background: rgba(255, 255, 255, .9); transform: translateX(2px); }
.session-item.active { border-color: rgba(91, 43, 178, .14); background: white; box-shadow: 0 9px 24px rgba(57, 36, 89, .08); }
.session-item.dragging { opacity: .46; transform: scale(.98); }
.session-item.drop-before { box-shadow: inset 0 3px 0 #7850c7; }
.session-item.drop-after { box-shadow: inset 0 -3px 0 #7850c7; }
.session-drag-handle {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 2.25rem;
  border: 0;
  color: #aaa2b4;
  background: transparent;
  cursor: grab;
  font-size: .85rem;
  letter-spacing: -.2em;
}
.session-item:active .session-drag-handle { cursor: grabbing; }
.session-select {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .38rem .22rem;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.session-select:focus-visible { outline: 3px solid rgba(91, 43, 178, .18); outline-offset: 2px; border-radius: .7rem; }
.session-delete {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: .55rem;
  color: #a9a1b1;
  background: transparent;
  cursor: pointer;
  font-size: 1.05rem;
  transition: color .18s, background .18s, transform .18s;
}
.session-delete:hover, .row-delete:hover { color: #b42d4c; background: #fde8ed; transform: scale(1.04); }
.session-avatar { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .75rem; color: var(--violet); background: var(--violet-soft); font-weight: 900; }
.session-item:nth-child(3n+2) .session-avatar { color: #a05a1d; background: #fff0df; }
.session-item:nth-child(3n) .session-avatar { color: #087f6b; background: #dcf7ef; }
.session-copy { min-width: 0; display: grid; gap: .22rem; }
.session-copy strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.session-copy small { color: var(--muted); font-size: .66rem; }
.session-result-count { min-width: 1.5rem; padding: .2rem .35rem; border-radius: 99px; color: #726b7d; background: #f0edf3; text-align: center; font-size: .64rem; font-weight: 800; }
.session-empty { padding: 1.4rem .5rem; color: var(--muted); text-align: center; font-size: .8rem; line-height: 1.5; }
.workspace { min-width: 0; overflow: auto; padding: clamp(1.3rem, 2.4vw, 2.4rem); }
.empty-session { min-height: calc(100vh - 9.6rem); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; animation: card-in .5s both; }
.empty-session h1 { margin: .1rem 0 .55rem; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.04em; }
.empty-session > p:last-child { max-width: 28rem; margin: 0; color: var(--muted); line-height: 1.6; }
.empty-illustration { position: relative; display: flex; align-items: center; gap: .7rem; margin-bottom: 1.8rem; padding: 1.3rem 1.6rem; border: 1px solid rgba(91, 43, 178, .08); border-radius: 1.4rem; color: var(--violet); background: rgba(255, 255, 255, .76); box-shadow: 0 16px 40px rgba(63, 37, 99, .08); font-size: 1.8rem; font-weight: 900; }
.empty-illustration i { position: absolute; right: -1.2rem; top: -1rem; width: 2.4rem; height: 2.4rem; border: 7px solid #ffbc74; border-radius: 50%; opacity: .7; }

.session-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.35rem; }
.session-hero > div:first-child { min-width: 0; flex: 1; }
.session-hero h1 { margin: 0; max-width: 50rem; font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.08; letter-spacing: -.04em; }
.session-meta { margin: .55rem 0 0; color: var(--muted); font-size: .8rem; }
.session-hero .eyebrow { display: flex; align-items: center; gap: .55rem; }
.session-share {
  width: min(44rem, 100%);
  display: grid;
  gap: .35rem;
  margin-top: .85rem;
  padding: .65rem .7rem .42rem;
  border: 1px solid rgba(91, 43, 178, .1);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .68);
}
.session-share > label { color: #5e4778; font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.session-share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.session-share-row input {
  min-width: 0;
  width: 100%;
  padding: .6rem .72rem;
  border: 1px solid rgba(67, 43, 105, .13);
  border-radius: .65rem;
  outline: none;
  color: #4b3b5e;
  background: rgba(250, 249, 252, .92);
  font-size: .7rem;
}
.session-share-row input:focus { border-color: rgba(91, 43, 178, .38); box-shadow: 0 0 0 3px rgba(91, 43, 178, .08); }
.copy-session-button {
  min-width: 6.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border: 0;
  border-radius: .65rem;
  color: white;
  background: #5b2bb2;
  cursor: pointer;
  font-size: .7rem;
  font-weight: 850;
  transition: background .18s, transform .18s;
}
.copy-session-button:hover { background: #47208f; transform: translateY(-1px); }
.copy-session-button:focus-visible { outline: 3px solid rgba(91, 43, 178, .2); outline-offset: 2px; }
.copy-session-button.copied { background: #11856f; }
.session-copy-feedback { min-height: .9rem; margin: 0; color: #18735f; font-size: .61rem; line-height: 1.35; }
.hero-actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.secondary-button { min-height: 2.72rem; padding: .7rem .95rem; border: 1px solid var(--line); color: #443655; background: rgba(255, 255, 255, .86); font-size: .78rem; font-weight: 750; }
.pdf-export-button { position: relative; min-width: 9.3rem; overflow: hidden; border-color: rgba(91,43,178,.18); color: #55318f; background: linear-gradient(145deg, #fff, #f4effc); }
.pdf-export-button:hover { border-color: rgba(91,43,178,.32); box-shadow: 0 9px 24px rgba(68,34,119,.11); }
.pdf-export-button:disabled { cursor: wait; opacity: .82; transform: none; }
.pdf-export-icon { color: #7247bd; font-size: 1rem; }
.pdf-export-spinner { width: .9rem; height: .9rem; display: none; border: 2px solid rgba(91,43,178,.18); border-top-color: #6539ad; border-radius: 50%; }
.pdf-export-button.is-loading .pdf-export-icon { display: none; }
.pdf-export-button.is-loading .pdf-export-spinner { display: block; animation: pdf-spin .75s linear infinite; }
@keyframes pdf-spin { to { transform: rotate(360deg); } }
.compact { min-height: 2.72rem; padding: .7rem .95rem; font-size: .78rem; }
.security-warning { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.1rem; padding: .75rem 1rem; border: 1px solid rgba(224, 132, 42, .2); border-radius: .8rem; color: #80501e; background: #fff7e9; font-size: .75rem; }
.security-warning > span { display: grid; place-items: center; flex: 0 0 1.55rem; height: 1.55rem; border-radius: 50%; color: white; background: var(--orange); font-weight: 900; }
.security-warning p { margin: 0; }
.security-warning code { padding: .12rem .3rem; border-radius: .3rem; background: rgba(128, 80, 30, .08); }
.warning-action { margin-left: auto; padding: .35rem .65rem; border: 1px solid rgba(128, 80, 30, .18); border-radius: .55rem; color: inherit; background: rgba(255,255,255,.62); cursor: pointer; font-size: .7rem; font-weight: 800; white-space: nowrap; }

.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; margin-bottom: .95rem; }
.metric-card { position: relative; min-width: 0; display: flex; gap: .8rem; align-items: center; padding: 1rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .85); border-radius: 1.15rem; background: var(--surface); box-shadow: 0 9px 27px rgba(50, 33, 76, .055); }
.metric-card::after { content: ""; position: absolute; width: 5rem; height: 5rem; right: -2.6rem; bottom: -3rem; border-radius: 50%; background: currentColor; opacity: .055; }
.metric-icon { display: grid; place-items: center; flex: 0 0 2.55rem; height: 2.55rem; border-radius: .8rem; font-size: 1.25rem; font-weight: 800; }
.metric-card > div:last-child { min-width: 0; display: grid; }
.metric-card span { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.metric-card strong { margin: .13rem 0 .05rem; font-size: 1.45rem; line-height: 1; letter-spacing: -.04em; }
.metric-card small { overflow: hidden; color: #9a93a3; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.metric-card.violet { color: var(--violet); }.metric-card.violet .metric-icon { background: var(--violet-soft); }
.metric-card.mint { color: #09866f; }.metric-card.mint .metric-icon { background: #def8f0; }
.metric-card.orange { color: #bc681f; }.metric-card.orange .metric-icon { background: #fff0df; }
.metric-card.blue { color: var(--blue); }.metric-card.blue .metric-icon { background: #e5f0ff; }
.metric-card.rose { color: #b33e6c; }.metric-card.rose .metric-icon { background: #fde8f1; }
.metric-card span, .metric-card small { color: var(--muted); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .7fr); gap: .95rem; align-items: start; }
.panel { min-width: 0; border: 1px solid rgba(255, 255, 255, .88); border-radius: 1.25rem; background: var(--surface); box-shadow: 0 12px 36px rgba(50, 33, 76, .065); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }
.panel-heading h2 { font-size: 1rem; }
.last-update { color: var(--muted); font-size: .65rem; white-space: nowrap; }
.participants-tools { display: flex; align-items: flex-end; justify-content: flex-end; gap: .7rem; }
.participant-sort-control { display: grid; gap: .25rem; color: var(--muted); font-size: .59rem; font-weight: 750; }
.participant-sort-control select { min-width: 10.5rem; padding: .48rem 1.7rem .48rem .6rem; border: 1px solid var(--line); border-radius: .58rem; color: #4b3b5d; outline: 0; background: #fbf9fd; font: inherit; font-size: .68rem; font-weight: 720; }
.participant-sort-control select:focus-visible { border-color: rgba(91,43,178,.42); box-shadow: 0 0 0 3px rgba(91,43,178,.07); }
.participants-list { display: grid; gap: .65rem; padding: .9rem; }
.participant-card { border: 1px solid var(--line); border-radius: .95rem; background: rgba(251, 250, 253, .7); overflow: hidden; }
.participant-card[open] { border-color: rgba(91, 43, 178, .18); box-shadow: 0 8px 25px rgba(60, 37, 90, .06); background: white; }
.participant-summary { list-style: none; display: grid; grid-template-columns: auto minmax(6rem, 1fr) minmax(8rem, 1.1fr) auto auto auto; gap: .8rem; align-items: center; padding: .8rem; cursor: pointer; }
.participant-summary::-webkit-details-marker { display: none; }
.participant-avatar { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .75rem; color: white; background: linear-gradient(140deg, #8158d2, #5b2bb2); font-size: .8rem; font-weight: 850; box-shadow: 0 6px 14px rgba(91, 43, 178, .18); }
.participant-name { min-width: 0; display: grid; gap: .2rem; }
.participant-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.participant-name small { color: var(--muted); font-size: .64rem; }
.participant-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem; }
.progress-track { width: 100%; height: .42rem; overflow: hidden; border: 0; border-radius: 99px; background: #ebe7f0; appearance: none; }
.progress-track::-webkit-progress-bar { border-radius: inherit; background: #ebe7f0; }
.progress-track::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #7143c8, #a87ce9); }
.progress-track::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #7143c8, #a87ce9); }
.participant-progress span { min-width: 2.4rem; color: #5d456f; font-size: .68rem; font-weight: 800; text-align: right; }
.participant-pin-button { min-width: 3rem; padding: .38rem .48rem; border: 1px solid rgba(91,43,178,.13); border-radius: .55rem; color: #72599a; background: #f4effb; cursor: pointer; font-size: .58rem; font-weight: 850; letter-spacing: .02em; }
.participant-pin-button.active { color: #08715f; border-color: rgba(8,113,95,.15); background: #e4f8f2; }
.participant-pin-button:hover, .participant-pin-button:focus-visible { outline: 0; border-color: rgba(91,43,178,.3); background: #ede4fa; }
.participant-pin-button.active:hover, .participant-pin-button.active:focus-visible { border-color: rgba(8,113,95,.28); background: #d8f4ec; }
.summary-chevron { color: #9a92a4; }
.participant-card[open] .summary-chevron { transform: rotate(90deg); }
.participant-details { display: grid; gap: .45rem; padding: .1rem .8rem .8rem 3.95rem; }
.participant-no-results { margin: 0; padding: .7rem; border-radius: .65rem; color: var(--muted); background: #f7f4fa; font-size: .68rem; }
.exercise-attempt-group { overflow: hidden; border: 1px solid rgba(77,52,109,.07); border-radius: .78rem; background: #f8f6fa; }
.exercise-attempt-heading { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .55rem .65rem; border-bottom: 1px solid rgba(77,52,109,.065); background: #f4f0f8; }
.exercise-attempt-title { min-width: 0; display: grid; gap: .12rem; }
.exercise-attempt-title strong { overflow: hidden; color: #493d53; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.exercise-attempt-title small { color: var(--muted); font-size: .57rem; }
.attempt-list { display: grid; margin: 0; padding: .18rem .55rem; list-style: none; }
.attempt-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: .65rem; align-items: center; min-width: 0; padding: .55rem .1rem; border-top: 1px solid rgba(77,52,109,.055); }
.attempt-row:first-child { border-top: 0; }
.attempt-number { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: .5rem; color: #72599a; background: #ece4f7; font-size: .58rem; font-weight: 850; }
.attempt-copy { min-width: 0; display: grid; gap: .14rem; }
.attempt-copy strong { color: #4c4054; font-size: .66rem; }
.attempt-copy small { overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.attempt-score { display: grid; justify-items: end; gap: .08rem; min-width: 3.6rem; }
.attempt-score small { color: var(--muted); font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.attempt-score strong { color: #4c4054; font-size: .64rem; white-space: nowrap; }
.result-pill { padding: .23rem .45rem; border-radius: 99px; font-size: .61rem; font-weight: 800; }
.result-pill.good { color: #08715f; background: #dff8f0; }
.result-pill.mixed { color: #a45e21; background: #ffeedc; }
.row-delete { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: .5rem; color: #a9a1b1; background: transparent; cursor: pointer; font-size: .95rem; transition: color .18s, background .18s, transform .18s; }
.participant-delete { align-self: center; }
.list-empty { padding: 2.5rem 1rem; color: var(--muted); text-align: center; font-size: .78rem; line-height: 1.6; }

.rankings-panel { position: sticky; top: 0; overflow: hidden; }
.rankings-heading { align-items: center; gap: .75rem; }
.ranking-sort-button { display: inline-flex; align-items: center; gap: .38rem; min-height: 2rem; padding: .38rem .58rem; border: 1px solid rgba(91,43,178,.13); border-radius: .65rem; color: #694597; background: #f2ecfa; cursor: pointer; font: inherit; font-size: .58rem; font-weight: 850; white-space: nowrap; transition: color .18s, border-color .18s, background .18s, transform .18s; }
.ranking-sort-button:hover { border-color: rgba(91,43,178,.28); background: #eae0f7; transform: translateY(-1px); }
.ranking-sort-button:focus-visible { outline: 3px solid rgba(108,72,196,.22); outline-offset: 2px; }
.ranking-sort-icon { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: .35rem; color: #fff; background: #7650ad; font-size: .68rem; line-height: 1; }
.exercise-rankings { padding: .95rem; }
.ranking-group { min-width: 0; padding: .75rem; border: 1px solid rgba(63,42,92,.07); border-radius: .9rem; background: #fbfafc; }
.ranking-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ranking-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .55rem; align-items: center; padding: .52rem .35rem; border-top: 1px solid rgba(67,43,105,.055); }
.ranking-item:first-child { border-top: 0; }
.ranking-position { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: .5rem; color: #7f718c; background: #f0edf3; font-size: .6rem; font-weight: 850; }
.ranking-copy { min-width: 0; display: grid; gap: .22rem; }
.ranking-result { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ranking-result strong { overflow: hidden; color: #493d53; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.ranking-result b { color: hsl(var(--ranking-hue, 270) 68% 39%); font-size: .66rem; white-space: nowrap; }
.ranking-copy small { color: var(--muted); font-size: .57rem; }
.ranking-track { display: block; height: .38rem; overflow: hidden; border-radius: 99px; background: #ebe7f0; }
.ranking-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,hsl(var(--ranking-hue,0) 78% 56%),hsl(var(--ranking-hue,0) 68% 39%)); box-shadow: 0 0 .35rem hsl(var(--ranking-hue,0) 68% 39% / .25); }
.ranking-empty { padding: 1rem .4rem; color: var(--muted); text-align: center; font-size: .64rem; }

.context-menu {
  position: fixed;
  z-index: 80;
  width: 14rem;
  padding: .4rem;
  border: 1px solid rgba(61, 40, 91, .12);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 55px rgba(39, 25, 59, .2);
  backdrop-filter: blur(18px);
  animation: menu-in .16s ease both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.context-menu button { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .62rem .7rem; border: 0; border-radius: .55rem; color: #4a3b5c; background: transparent; cursor: pointer; text-align: left; font-size: .75rem; font-weight: 720; }
.context-menu button:hover, .context-menu button:focus-visible { outline: 0; background: #f2ecfb; }
.context-menu button:disabled { opacity: .38; cursor: default; }
.context-menu hr { height: 1px; margin: .3rem .35rem; border: 0; background: var(--line); }
.context-menu .danger-menu-item { color: #aa2948; }
.context-menu .danger-menu-item:hover, .context-menu .danger-menu-item:focus-visible { background: #fdecef; }

.modal {
  width: min(94vw, 44rem);
  max-width: none;
  max-height: min(92vh, 58rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 1.35rem;
  color: var(--ink);
  background: transparent;
}
.modal::backdrop { background: rgba(31, 20, 48, .44); backdrop-filter: blur(5px); }
.modal[open] { animation: modal-in .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal-card { max-height: min(92vh, 58rem); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: inherit; background: rgba(255,255,255,.98); box-shadow: 0 26px 90px rgba(35,21,58,.28); }
.narrow-modal { width: min(94vw, 31rem); margin: auto; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem 1rem; border-bottom: 1px solid var(--line); }
.modal-heading h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.025em; }
.modal-close { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border: 0; border-radius: .62rem; color: #756c81; background: #f2eff5; cursor: pointer; font-size: 1.2rem; }
.modal-close:hover { color: #ad2d4a; background: #fdecef; }
.modal-body { min-height: 0; padding: 1.15rem 1.35rem; overflow: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: .95rem 1.35rem 1.15rem; border-top: 1px solid var(--line); background: #fbfafc; }
.field-label, .password-fields label { display: grid; gap: .42rem; color: #4f455d; font-size: .76rem; font-weight: 780; }
.text-input, .picker-grid select, .advanced-code-row textarea {
  width: 100%;
  padding: .75rem .82rem;
  border: 1px solid rgba(66, 43, 98, .17);
  border-radius: .72rem;
  color: var(--ink);
  outline: 0;
  background: #fdfcfe;
  transition: border-color .18s, box-shadow .18s;
}
.text-input:focus, .picker-grid select:focus, .advanced-code-row textarea:focus { border-color: rgba(91,43,178,.48); box-shadow: 0 0 0 4px rgba(91,43,178,.08); }
.editor-body > .text-input { margin-top: .42rem; }
.editor-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .65rem; }
.editor-section-heading h3 { margin: 0; font-size: .92rem; }
.editor-section-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }
.compact-heading { margin: 0 0 .75rem; }
.editor-exercise-list { display: grid; gap: .45rem; min-height: 4rem; }
.editor-exercise { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .65rem .72rem; border: 1px solid var(--line); border-radius: .78rem; background: #fbf9fd; transition: border-color .18s, transform .18s, box-shadow .18s; }
.editor-exercise:hover { border-color: rgba(91,43,178,.2); box-shadow: 0 6px 18px rgba(50,31,76,.055); }
.editor-exercise.dragging { opacity: .45; }
.editor-exercise.drop-before { border-top-color: #6d42bf; transform: translateY(2px); }
.editor-exercise.drop-after { border-bottom-color: #6d42bf; transform: translateY(-2px); }
.editor-drag { color: #a39aaa; cursor: grab; font-size: .85rem; letter-spacing: -.18em; }
.editor-index { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: .52rem; color: #6841ad; background: #eee7fb; font-size: .68rem; font-weight: 850; }
.editor-exercise-copy { min-width: 0; display: grid; gap: .15rem; }
.editor-exercise-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.editor-exercise-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; }
.editor-empty { padding: 1.2rem; border: 1px dashed rgba(91,43,178,.2); border-radius: .78rem; color: var(--muted); background: rgba(244,240,249,.5); text-align: center; font-size: .72rem; }
.exercise-picker { margin-top: 1.15rem; padding: 1rem; border: 1px solid rgba(91,43,178,.1); border-radius: .95rem; background: #f7f3fc; }
.picker-grid { display: grid; grid-template-columns: .7fr 1.4fr 1fr .65fr; gap: .55rem; }
.picker-grid label { min-width: 0; display: grid; gap: .35rem; color: #62566f; font-size: .64rem; font-weight: 760; }
.picker-grid select { min-width: 0; padding: .62rem .65rem; background: white; font-size: .7rem; }
.picker-grid select:disabled { opacity: .55; }
.picker-add { margin-top: .7rem; min-height: 2.35rem; padding: .55rem .78rem; font-size: .7rem; }
.advanced-editor { margin-top: 1rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: .78rem; background: #fbfafc; }
.advanced-editor summary { cursor: pointer; color: #5b4772; font-size: .72rem; font-weight: 780; }
.advanced-editor p { margin: .65rem 0; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.advanced-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; align-items: stretch; }
.advanced-code-row textarea { min-height: 4.5rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .64rem; line-height: 1.45; }
.advanced-code-row button { align-self: end; }
.password-fields { display: grid; gap: .9rem; }
.field-hint { margin: -.2rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.participant-pin-body { display: grid; gap: 1rem; }
.pin-participant { display: flex; align-items: center; gap: .75rem; padding: .72rem; border: 1px solid rgba(91,43,178,.08); border-radius: .85rem; background: #faf8fc; }
.pin-participant > span:last-child { min-width: 0; display: grid; gap: .2rem; }
.pin-participant strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.pin-participant small { color: var(--muted); font-size: .65rem; line-height: 1.4; }
.participant-pin-reveal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; border: 1px solid rgba(8,113,95,.12); border-radius: .8rem; color: #4d6f67; background: #effaf7; font-size: .67rem; font-weight: 760; }
.participant-pin-reveal output { padding: .36rem .55rem; border-radius: .5rem; color: #08715f; background: white; font: 850 .9rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.participant-pin-reveal output.unavailable { color: #8b7e91; letter-spacing: .08em; }
.pin-input-label { display: grid; gap: .42rem; color: #4f455d; font-size: .76rem; font-weight: 780; }
.pin-input { max-width: 11rem; font: 850 1.1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .32em; text-align: center; }
.pin-modal-actions { align-items: center; }
.modal-action-spacer { flex: 1; }
.danger-text-button { padding: .58rem .68rem; border: 0; border-radius: .58rem; color: #aa2948; background: #fdecef; cursor: pointer; font-size: .68rem; font-weight: 800; }
.danger-text-button:hover, .danger-text-button:focus-visible { outline: 0; background: #f9dfe6; }
.danger-text-button:disabled { opacity: .5; cursor: wait; }
.confirm-modal { width: min(94vw, 27rem); align-items: center; padding: 1.5rem 1.35rem 1.25rem; text-align: center; }
.confirm-symbol { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; color: #b2294a; background: #fde9ee; font-size: 1.3rem; font-weight: 900; }
.confirm-modal h2 { margin: .9rem 0 .45rem; font-size: 1.2rem; }
.confirm-modal > p { max-width: 23rem; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.confirm-modal .confirm-warning { margin-top: .55rem; color: #aa2948; font-weight: 750; }
.confirm-modal .form-error { margin-top: .7rem; color: #b52645; }
.centered-actions { width: 100%; justify-content: center; margin-top: 1.1rem; padding: 0; border: 0; background: transparent; }

.toast { position: fixed; z-index: 50; right: 1.3rem; bottom: 1.3rem; max-width: min(25rem, calc(100vw - 2.6rem)); padding: .82rem 1rem; border-radius: .85rem; color: white; background: #332347; box-shadow: 0 15px 40px rgba(32, 22, 58, .28); font-size: .78rem; animation: toast-in .25s ease both; }
.toast.error { background: #a72c48; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1080px) {
  .dashboard { grid-template-columns: 16rem minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .rankings-panel { position: static; }
}

@media (max-width: 1280px) and (min-width: 1081px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .dashboard { display: block; }
  .topbar { position: sticky; top: 0; height: 4.25rem; padding-inline: .85rem; }
  .sidebar { min-height: auto; padding: 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-heading, .search-box { display: none; }
  .session-list { display: flex; min-height: auto; padding: 0 0 .25rem; overflow-x: auto; }
  .session-item { flex: 0 0 min(17rem, 78vw); background: rgba(255, 255, 255, .72); }
  .workspace { overflow: visible; padding: 1.2rem .8rem 2rem; }
  .session-hero { align-items: flex-start; flex-direction: column; }
  .session-share { width: 100%; }
  .topbar .back-home-link { padding-inline: .6rem; }
  .participant-summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .participant-progress { grid-column: 2 / -1; }
  .participant-pin-button { grid-column: 3; grid-row: 1; }
  .participant-delete { grid-column: 4; grid-row: 1; }
  .summary-chevron { display: none; }
  .participant-details { padding-left: .8rem; }
  .empty-session { min-height: 56vh; }
  .picker-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .login-card { padding: 2.5rem 1.3rem 1.8rem; border-radius: 1.4rem; }
  .metrics { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .metric-card { align-items: flex-start; padding: .8rem; }
  .metric-icon { flex-basis: 2rem; height: 2rem; font-size: .9rem; }
  .metric-card strong { font-size: 1.2rem; }
  .metric-card small { display: none; }
  .panel-heading { align-items: flex-start; }
  .participants-heading { align-items: stretch; flex-direction: column; }
  .participants-tools { align-items: center; justify-content: space-between; }
  .participant-sort-control { flex: 1; }
  .participant-sort-control select { width: 100%; min-width: 0; }
  .attempt-row { grid-template-columns: auto minmax(0,1fr) auto; gap: .48rem; }
  .attempt-score { grid-column: 2; grid-row: 2; justify-items: start; }
  .attempt-row .result-pill { grid-column: 3; grid-row: 1 / span 2; }
  .dashboard-brand > span:last-child { display: none; }
  .topbar .back-home-link { min-height: 2.15rem; padding: .42rem .55rem; font-size: .65rem; }
  .session-share-row { grid-template-columns: 1fr; }
  .copy-session-button { width: 100%; }
  .advanced-code-row { grid-template-columns: 1fr; }
  .modal-actions { flex-wrap: wrap; }
  .pin-modal-actions .modal-action-spacer { display: none; }
  .pin-modal-actions .danger-text-button { margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}