:root {
    --accent: #087f74;
    --accent-dark: #09685f;
    --ink: #203b38;
    --muted: #788783;
    --line: #e5eae6;
    --bg: #f6f8f5;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font:
        14px/1.55 Inter,
        'Segoe UI',
        Arial,
        sans-serif;
}
button,
input,
textarea,
select {
    font: inherit;
}
button,
a {
    touch-action: manipulation;
}
button {
    cursor: pointer;
    color: inherit;
    border: 0;
    background: none;
}
button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
a {
    color: var(--accent);
    text-decoration: none;
}
h1,
h2,
h3,
h4,
p {
    margin: 0;
}
h1 {
    font-size: 32px;
    font-weight: 650;
    letter-spacing: -1.1px;
    line-height: 1.25;
}
h2 {
    font-size: 24px;
    letter-spacing: -0.7px;
    line-height: 1.3;
}
h3 {
    font-size: 17px;
    font-weight: 650;
}
p {
    line-height: 1.7;
}
input,
textarea,
select {
    width: 100%;
    border: 1px solid #dce4df;
    border-radius: 8px;
    background: white;
    padding: 11px 13px;
    color: var(--ink);
    outline: none;
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px #087f7412;
}
input[type='color'] {
    height: 45px;
    padding: 5px;
}
input[type='checkbox'],
input[type='radio'] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
textarea {
    resize: vertical;
}
label {
    display: block;
    font-size: 13px;
    font-weight: 550;
    margin-bottom: 17px;
}
label > input,
label > textarea,
label > select {
    margin-top: 7px;
}
button:focus-visible,
a:focus-visible {
    outline: 3px solid #63c7b7;
    outline-offset: 3px;
}
[v-cloak] {
    display: none !important;
}
.icon {
    height: 19px;
    width: 19px;
    flex-shrink: 0;
    vertical-align: middle;
}
.brand {
    display: flex;
    align-items: center;
    font-size: 29px;
    letter-spacing: -1.5px;
    font-weight: 750;
    color: var(--ink);
    line-height: 1;
}
.brand-mark {
    display: inline-grid;
    place-items: center;
    background: var(--accent);
    color: white;
    width: 35px;
    height: 37px;
    border-radius: 12px;
    font-size: 31px;
    line-height: 1;
    padding-bottom: 6px;
    margin-right: 9px;
    transform: rotate(-6deg);
}
.brand-dot {
    color: var(--accent);
}
.eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--accent);
}
.small {
    font-size: 12px;
}
.muted {
    color: var(--muted);
}
.center {
    text-align: center;
}
.inline {
    display: flex;
    align-items: center;
    gap: 12px;
}
.between {
    justify-content: space-between;
}
.wrap {
    flex-wrap: wrap;
}
.full {
    width: 100%;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 17px;
    border: 1px solid #dae2dd;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    transition:
        background 0.15s,
        transform 0.15s;
    color: var(--ink);
    min-height: 40px;
}
.btn:hover:not(:disabled) {
    background: #f0f5f2;
    transform: translateY(-1px);
}
.btn.primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.btn.primary:hover:not(:disabled) {
    background: var(--accent-dark);
}
.btn.quiet {
    background: transparent;
}
.btn.danger-outline {
    color: #b44940;
    border-color: #edcec8;
}
.text-button {
    color: var(--accent);
    font-size: 12px;
    font-weight: 650;
    padding: 6px 0;
}
.card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 650;
    border-radius: 5px;
    padding: 4px 9px;
    background: #edf0ed;
    color: #63726d;
    letter-spacing: 0.1px;
    text-transform: capitalize;
}
.badge.live {
    background: #e0f5eb;
    color: #19865b;
}
.badge.draft {
    background: #fff8e7;
    color: #927224;
}
.badge.ended {
    background: #eaf0f6;
    color: #61778b;
}
.badge i,
.status-dot,
.connection i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.sidebar {
    width: 232px;
    background: #fff;
    border-right: 1px solid var(--line);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 34px 23px 18px;
    z-index: 20;
}
.workspace-label {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 35px 0 32px;
    padding: 12px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 650;
}
.workspace-label small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
}
.workspace-icon {
    background: #f0eade;
    border-radius: 7px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: #867654;
}
.nav-label {
    font-size: 9px;
    letter-spacing: 1.7px;
    color: #97a39b;
    font-weight: 650;
    padding-left: 10px;
    margin-bottom: 10px;
}
.sidebar nav {
    display: grid;
    gap: 6px;
}
.sidebar nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: 7px;
    font-size: 12px;
    color: #788780;
    text-align: left;
}
.sidebar nav button.active {
    background: #eaf4ef;
    color: var(--accent);
    font-weight: 650;
}
.sidebar nav button:hover {
    background: #f0f5f1;
}
.sidebar nav button span {
    margin-left: auto;
    background: #d6e9df;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 10px;
}
.sidebar-note {
    margin-top: auto;
    padding: 20px 14px;
    background: #f5f7ed;
    border: 1px solid #edf0df;
    border-radius: 10px;
    margin-bottom: 25px;
}
.sidebar-note > span {
    display: block;
    font-size: 30px;
    color: #a7b58e;
    margin-bottom: 10px;
}
.sidebar-note strong {
    display: block;
    font-size: 12px;
    line-height: 1.6;
}
.sidebar-note p {
    font-size: 10px;
    color: #85907a;
    margin-top: 7px;
}
.profile {
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid var(--line);
    padding-top: 19px;
}
.avatar {
    display: grid;
    place-items: center;
    background: #ece9df;
    border: 2px solid white;
    border-radius: 50%;
    width: 33px;
    height: 33px;
    font-size: 10px;
    font-weight: 700;
    color: #87775d;
    flex-shrink: 0;
}
.profile strong {
    display: block;
    font-size: 11px;
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile small {
    font-size: 9px;
    color: var(--muted);
    display: block;
}
.profile button {
    margin-left: auto;
    font-size: 18px;
    color: #87918d;
}
.workspace {
    margin-left: 232px;
    min-height: 100vh;
}
.topbar {
    height: 77px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 20px;
}
.breadcrumb {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 11px;
    color: #93a198;
    min-width: 0;
}
.breadcrumb b {
    font-weight: 500;
    color: #4f635b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}
.topbar-right {
    font-size: 10px;
    color: #829189;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.status-dot {
    color: #5ea98a;
}
.small-avatar {
    margin-left: 13px;
    width: 29px;
    height: 29px;
}
.workspace-content {
    padding: 34px 40px 20px;
    max-width: 1550px;
    margin: 0 auto;
}
.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.page-heading h1 {
    margin: 9px 0 8px;
}
.page-heading p {
    color: var(--muted);
    font-size: 12px;
}
.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 19px 21px;
    min-height: 93px;
}
.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}
.teal {
    background: #eaf5ed;
    color: #5b987d;
}
.purple {
    background: #f0edf8;
    color: #9b8cbc;
}
.orange {
    background: #fbefe4;
    color: #cb9a65;
}
.stat-card span:not(.stat-icon) {
    font-size: 11px;
    color: #8b9991;
    display: block;
}
.stat-card strong {
    display: block;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
    margin-top: 3px;
}
.welcome-banner {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    background: #e9f1e8;
    border: 1px solid #e0e9dd;
    border-radius: 12px;
    min-height: 235px;
    padding: 29px 32px;
    margin-bottom: 30px;
}
.welcome-banner .eyebrow {
    font-size: 9px;
    color: #708774;
}
.welcome-banner h2 {
    font-size: 25px;
    font-weight: 600;
    margin: 11px 0 9px;
    letter-spacing: -0.8px;
}
.welcome-banner p {
    font-size: 11px;
    color: #7c9080;
    line-height: 1.8;
}
.banner-btn {
    margin-top: 18px;
    background: #fff9f0;
    border-color: #e9e9d9;
    color: #53705a;
    padding: 8px 13px;
    min-height: 33px;
    font-size: 10px;
}
.banner-btn span {
    margin-left: 15px;
}
.banner-art {
    position: relative;
    width: 310px;
    min-width: 265px;
    margin: -29px -32px -29px 25px;
    display: grid;
    place-items: center;
}
.art-circle {
    position: absolute;
    right: -35px;
    top: -65px;
    width: 340px;
    height: 340px;
    border: 1px solid #ccddcc;
    border-radius: 50%;
    box-shadow:
        0 0 0 25px #e2ebdf,
        0 0 0 26px #d3e1d1,
        0 0 0 51px #e7eee2;
}
.art-question {
    width: 199px;
    padding: 17px;
    background: #fffef9;
    transform: rotate(-7deg);
    border-radius: 12px;
    box-shadow: 0 15px 30px #65836d18;
    position: relative;
    margin-top: 8px;
    margin-right: 42px;
}
.art-question > span {
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    color: #88a18d;
    letter-spacing: 1.4px;
}
.art-question i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #68ad88;
}
.art-question > strong {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 12px;
}
.art-question > div {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 60px;
    padding: 0 6px;
    margin-top: 12px;
}
.art-question b {
    background: #cfe0c9;
    flex: 1;
    border-radius: 4px 4px 0 0;
}
.art-question b:nth-child(2) {
    background: #9cbea6;
}
.art-question b:nth-child(4) {
    background: #3e8b71;
}
.art-question small {
    display: block;
    font-size: 6px;
    margin-top: 10px;
    color: #8c9c8b;
}
.art-bubble {
    position: absolute;
    right: 37px;
    top: 25px;
    border: 7px solid #e9f1e8;
    color: #b59c6d;
    background: #f7f2da;
    border-radius: 50%;
    font-size: 32px;
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    transform: rotate(12deg);
}
.art-people {
    position: absolute;
    bottom: 32px;
    right: 32px;
    transform: rotate(5deg);
    background: #fffdf5;
    border-radius: 20px;
    padding: 9px 15px;
    font-size: 12px;
    color: #97ab90;
    box-shadow: 0 7px 20px #60785a12;
    letter-spacing: -2px;
}
.art-people b {
    font-size: 9px;
    letter-spacing: 0;
    font-weight: 500;
    color: #6f856e;
    margin-left: 6px;
}
.section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}
.tabs {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.tabs button {
    font-size: 11px;
    font-weight: 500;
    color: #89958d;
    padding: 8px 13px;
    border-radius: 6px;
}
.tabs button.active {
    color: #41604c;
    background: #e7eee5;
    font-weight: 650;
}
.tabs button span {
    font-size: 9px;
    margin-left: 4px;
    background: #d5e0d2;
    border-radius: 4px;
    padding: 1px 5px;
}
.search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0 10px;
    max-width: 205px;
    margin: 0;
    color: #9ba69c;
}
.search input {
    border: 0;
    font-size: 10px;
    padding: 9px 0;
    margin: 0;
    box-shadow: none;
}
.search .icon {
    width: 14px;
    height: 14px;
}
.event-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.event-card {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: white;
    overflow: hidden;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px #1d422c08;
}
.event-cover {
    width: 100%;
    height: 151px;
    position: relative;
    overflow: hidden;
    text-align: left;
    display: block;
    padding: 14px 16px;
    background: #e4ebe1;
}
.event-cover.cover-1 {
    background: #e9e4ee;
}
.event-cover.cover-2 {
    background: #f2e9dc;
}
.event-cover.cover-3 {
    background: #dee9ee;
}
.event-cover .badge {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 1;
    background: #ffffffe0;
}
.cover-rings {
    width: 180px;
    height: 180px;
    position: absolute;
    right: -10px;
    top: -45px;
    border: 1px solid #ffffffa0;
    border-radius: 50%;
    box-shadow:
        0 0 0 18px #ffffff16,
        0 0 0 19px #ffffff80,
        0 0 0 37px #ffffff10,
        0 0 0 38px #ffffff80;
}
.cover-letter {
    font-family: Georgia, serif;
    position: absolute;
    right: 30px;
    top: 25px;
    font-size: 55px;
    font-style: italic;
    letter-spacing: -4px;
    color: #506e5377;
}
.cover-1 .cover-letter {
    color: #89779688;
}
.cover-2 .cover-letter {
    color: #ae906388;
}
.cover-caption {
    position: absolute;
    left: 16px;
    bottom: 15px;
    font-size: 10px;
    color: #647b65;
}
.cover-logo {
    position: absolute;
    right: 20px;
    top: 45px;
    max-width: 120px;
    height: 55px;
    object-fit: contain;
}
.event-card-body {
    padding: 18px 17px 0;
}
.event-date {
    font-size: 9px;
    color: #96a098;
    display: flex;
    gap: 6px;
    align-items: center;
}
.event-date .icon {
    height: 12px;
    width: 12px;
}
.event-card h3 {
    font-size: 15px;
    margin: 7px 0 6px;
    line-height: 1.4;
}
.event-card h3 button {
    font-weight: 650;
    padding: 0;
    text-align: left;
    overflow-wrap: anywhere;
}
.event-card p {
    font-size: 10px;
    color: #929d94;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 19px;
}
.event-card-foot {
    border-top: 1px solid #edf0eb;
    padding: 13px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: #8c9b90;
}
.event-card-foot span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.event-card-foot .icon {
    height: 13px;
    width: 13px;
}
.event-card-foot button {
    font-size: 9px;
    font-weight: 600;
    color: #648c77;
    padding: 0;
}
.workspace-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
    padding: 20px 0 5px;
    border-top: 1px solid var(--line);
    font-size: 9px;
    color: #9da79e;
}
.empty {
    padding: 50px 25px;
    text-align: center;
}
.empty h3 {
    margin: 14px 0 8px;
}
.empty p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 22px;
}
.empty-symbol {
    font-size: 34px;
    color: #8bb29d;
    background: #edf5ec;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin: auto;
}
.back-link {
    font-size: 11px;
    color: var(--muted);
    padding: 0;
    margin-bottom: 18px;
}
.event-heading h1 {
    margin-top: 10px;
}
.event-nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 13px;
    margin-bottom: 25px;
}
.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 23px;
    align-items: start;
}
.card-heading {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}
.card-heading h2 {
    font-size: 18px;
}
.card-heading p {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}
.content-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 21px;
    border-bottom: 1px solid #edf0eb;
}
.content-row:last-child {
    border: 0;
}
.row-number {
    font-size: 10px;
    color: #a2aca4;
}
.item-icon {
    width: 39px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    flex-shrink: 0;
    background: #eaf2ed;
    color: #6c9a7d;
}
.item-icon.quiz {
    background: #f2eef9;
    color: #a091be;
}
.item-icon.poll {
    background: #fbf0e1;
    color: #c8a16a;
}
.item-icon.feedback {
    background: #e8f2f4;
    color: #77a1aa;
}
.row-copy {
    flex: 1;
    min-width: 0;
}
.row-copy .eyebrow {
    font-size: 8px;
    color: #8c9b90;
    letter-spacing: 1px;
}
.row-copy h3 {
    font-size: 13px;
    overflow-wrap: anywhere;
    margin: 3px 0;
}
.row-copy .small {
    font-size: 9px;
}
.row-actions {
    display: flex;
    gap: 4px;
}
.row-actions button {
    color: #8c9d91;
    padding: 4px;
}
.row-actions .icon {
    height: 15px;
    width: 15px;
}
.add-content {
    padding: 24px 18px;
}
.add-content > .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
}
.add-content > h3 {
    margin: 7px 0 18px;
}
.add-content > button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 8px;
    text-align: left;
    margin-bottom: 10px;
}
.add-content button .item-icon {
    height: 31px;
    width: 29px;
    border-radius: 6px;
}
.add-content button .icon {
    height: 16px;
    width: 16px;
}
.add-content button strong {
    font-size: 10px;
    display: block;
}
.add-content button small {
    font-size: 8px;
    color: var(--muted);
    display: block;
}
.add-content button b {
    margin-left: auto;
    color: #8d9d8e;
}
.tip {
    margin-top: 20px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    font-size: 10px;
    color: #87988a;
}
.tip strong {
    font-size: 11px;
    color: #66826c;
}
.tip p {
    margin-top: 5px;
}
.notice {
    padding: 14px 18px;
    background: #fff7e6;
    border: 1px solid #eee0ba;
    color: #957438;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
}
.notice:has(+ .content-layout) {
    display: none;
}
.share-card {
    padding: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.share-card h2 {
    font-size: 29px;
    margin: 12px 0;
}
.share-card p {
    color: var(--muted);
    font-size: 12px;
}
.share-code {
    font-size: 32px;
    letter-spacing: 5px;
    font-weight: 600;
    color: var(--accent);
    margin: 25px 0;
}
.copy-box {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}
.copy-box input {
    min-width: 180px;
    font-size: 10px;
}
.share-card a {
    font-size: 11px;
}
.qr {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 15px;
    width: 228px;
    height: 228px;
    flex-shrink: 0;
}
.qr img {
    display: block;
}
.connection {
    font-size: 10px;
    color: #5f9f7d;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.connection.offline {
    color: #b47c44;
}
.presenter-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    font-size: 11px;
    gap: 14px;
}
.presenter-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
}
.presenter-timeline {
    padding: 18px 12px;
    align-self: start;
}
.presenter-timeline > .eyebrow {
    font-size: 9px;
    padding: 0 8px;
    margin-bottom: 15px;
}
.presenter-timeline > button {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border-radius: 7px;
    width: 100%;
    padding: 12px 7px;
    margin-bottom: 5px;
    border: 1px solid transparent;
}
.presenter-timeline > button.active {
    background: #eaf4ee;
    border-color: #cce0d2;
}
.presenter-timeline > button > span {
    font-size: 10px;
    color: #8ba292;
    background: white;
    width: 21px;
    height: 23px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 4px;
    flex-shrink: 0;
}
.presenter-timeline small {
    display: block;
    color: #9ca79e;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.presenter-timeline strong {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.presenter-timeline p {
    font-size: 11px;
    color: var(--muted);
    padding: 8px;
}
.live-stage {
    min-height: 410px;
    position: relative;
    overflow: hidden;
}
.stage-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid #f2f4f0;
    gap: 15px;
    font-size: 10px;
    color: #7e9283;
}
.stage-brand img {
    max-height: 35px;
    max-width: 160px;
    object-fit: contain;
}
.stage-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 340px;
    padding: 30px;
}
.stage-symbol {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background: #edf5ed;
    color: var(--accent);
    font-size: 33px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}
.stage-message h2 {
    font-size: 29px;
    margin: 10px 0;
}
.stage-message p {
    font-size: 12px;
    color: var(--muted);
    max-width: 360px;
    margin-bottom: 18px;
}
.waiting-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 15px 0;
}
.waiting-dots i {
    width: 5px;
    height: 5px;
    background: #a3b9a5;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
.waiting-dots i:nth-child(2) {
    animation-delay: 0.2s;
}
.waiting-dots i:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes pulse {
    50% {
        opacity: 0.35;
        transform: translateY(-3px);
    }
}
.text-slide {
    padding: 45px;
    text-align: center;
    min-height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at bottom right, #e9f2e7, transparent 60%);
}
.text-slide h2 {
    font-size: 36px;
    margin: 16px 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.text-slide p {
    font-size: 15px;
    color: #6c8372;
    white-space: pre-wrap;
    max-width: 700px;
}
.slide-decoration {
    font-size: 33px;
    margin-top: 25px;
    color: #a3b69b;
}
.slide-image {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    background: #f6f8f4;
}
.image-stage .stage-brand {
    padding: 10px 18px;
}
.question-stage {
    padding: 28px;
}
.question-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}
.question-top .eyebrow {
    font-size: 9px;
}
.question-stage h2 {
    font-size: 23px;
    line-height: 1.4;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}
.question-description {
    font-size: 12px;
    color: var(--muted);
    white-space: pre-wrap;
    margin-bottom: 15px;
}
.timer {
    background: #edf5ec;
    color: var(--accent);
    border: 1px solid #dfebdc;
    border-radius: 9px;
    padding: 5px 12px;
    font-size: 22px;
    font-weight: 650;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.timer small {
    font-size: 9px;
    margin-left: 4px;
    font-weight: 400;
}
.timer.urgent {
    background: #fff0e9;
    border-color: #f6d1c3;
    color: #b86542;
}
.waiting-callout {
    text-align: center;
    padding: 32px 15px;
}
.waiting-callout h3 {
    font-size: 19px;
    margin: 10px 0;
}
.waiting-callout p {
    font-size: 12px;
    color: var(--muted);
}
.waiting-callout .stage-symbol {
    margin: 0 auto 15px;
}
.answer-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 24px 0;
}
.answer-options button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 13px;
    background: #fafcf8;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.answer-options button:disabled {
    opacity: 1;
    cursor: default;
}
.answer-options button span {
    background: white;
    border: 1px solid #e5e9df;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.answer-options button.chosen {
    border-color: var(--accent);
    background: #eaf4ef;
    color: var(--accent);
}
.answer-options button.chosen span {
    background: var(--accent);
    color: white;
}
.compact {
    min-height: 200px;
    padding: 20px;
}
.compact h3 {
    margin-bottom: 12px;
}
.result-options {
    margin-top: 20px;
}
.result-row {
    padding: 12px 0;
    border-bottom: 1px solid #f0f3ec;
}
.result-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 12px;
}
.result-label > span {
    display: flex;
    align-items: center;
    gap: 10px;
}
.result-label b {
    font-size: 9px;
    font-weight: 500;
    color: #829783;
}
.result-row small {
    font-size: 9px;
    color: #94a091;
    display: block;
    text-align: right;
    margin-top: 4px;
}
.bar-track {
    background: #f0f3ed;
    border-radius: 4px;
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
}
.bar-track > div {
    height: 100%;
    background: #aac5aa;
    border-radius: 4px;
    transition: width 0.4s;
}
.result-row.correct .bar-track > div {
    background: var(--accent);
}
.result-row.correct .result-label {
    color: var(--accent);
}
.column-chart {
    height: 230px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 18px;
    padding: 22px 16px 0;
    border-bottom: 1px solid #dce6df;
}
.column-item {
    height: 100%;
    min-width: 42px;
    max-width: 90px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #63736a;
}
.column-item > strong { color: #24443e; }
.column-track {
    height: 155px;
    width: 100%;
    max-width: 60px;
    display: flex;
    align-items: end;
    background: #f0f3ed;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}
.column-track > div {
    width: 100%;
    background: #61b3a9;
    transition: height .4s;
}
.column-item.correct .column-track > div { background: var(--accent); }
.column-item small { font-size: 9px; color: #94a091; }
.chart-key, .pie-key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    padding: 14px 0 2px;
    font-size: 11px;
    color: #63736a;
}
.chart-key b, .pie-key b { color: #24443e; }
.pie-chart-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 20px 0 4px;
}
.pie-chart {
    width: 210px;
    height: 210px;
    flex: 0 0 210px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.pie-chart > span {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: white;
    display: grid;
    place-content: center;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #24443e;
}
.pie-chart small { display: block; font-size: 9px; font-weight: 500; color: #829783; }
.pie-key { max-width: 300px; flex-direction: column; }
.pie-key span { display: flex; align-items: center; gap: 6px; }
.pie-key i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.pie-key strong { margin-left: auto; color: #24443e; }
@media (max-width: 640px) {
    .column-chart { gap: 7px; padding-left: 3px; padding-right: 3px; }
    .pie-chart-wrap { flex-direction: column; gap: 10px; }
    .pie-key { width: 100%; max-width: none; }
}
.result-options > p {
    margin-top: 17px;
}
.submission-note {
    padding: 12px;
    font-size: 11px;
    background: #eef5ed;
    border-radius: 7px;
    margin-top: 15px;
}
.stage-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-top: 15px;
    gap: 10px;
}
.stage-controls .btn {
    font-size: 10px;
    padding: 8px 12px;
}
.stage-controls + p {
    margin-top: 13px;
}
.projection {
    padding: 20px 35px;
    min-height: 100vh;
    background: #f0f4ee;
}
.projection > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--muted);
}
.projection-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 25px;
    align-items: center;
    min-height: 80vh;
}
.projection .join-panel { display: none; }
.projection .projection-body { grid-template-columns: minmax(0, 1fr); }
.projection.show-join-panel .join-panel { display: flex; }
.projection.show-join-panel .projection-body { grid-template-columns: minmax(0, 1fr) 255px; }
.projection .live-stage {
    min-height: 70vh;
}
.projection .stage-message {
    min-height: 60vh;
}
.projection .question-stage {
    padding: 40px;
}
.projection .question-stage h2 {
    font-size: clamp(20px, 2.15vw, 32px);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.projection .text-slide {
    min-height: 65vh;
}
.projection .text-slide h2 {
    font-size: clamp(35px, 4vw, 70px);
}
.projector-controls { display:flex; justify-content:center; gap:12px; padding:0 0 18px; }
.projection > header > span:nth-child(2) { display: none; }
.projection .projector-controls {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}
.projection.controls-visible .projector-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
:fullscreen .projection > header .btn.quiet,
:-webkit-full-screen .projection > header .btn.quiet {
    display: none;
}
.deck-frame { width:100%; min-height:70vh; border:0; border-radius:14px; background:#fff; }
.leaderboard-stage { width:100%; min-height:60vh; padding:45px; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.leaderboard-stage h2 { font-size:clamp(32px,4vw,62px); margin:8px 0 25px; }
.leaderboard-stage ol { list-style:none; padding:0; margin:0 auto; width:min(760px,100%); }
.leaderboard-stage li { display:grid; grid-template-columns:50px 1fr auto; gap:15px; align-items:center; text-align:left; padding:13px 18px; margin:8px 0; border-radius:12px; background:rgba(255,255,255,.8); font-size:20px; }
.leaderboard-stage li span,.leaderboard-stage li b { color:var(--accent); }
.leaderboard-stage { padding:0; display:grid; grid-template-columns:34% 66%; overflow:hidden; min-height:62vh; background:#fff; text-align:left; }
.leaderboard-winner { position:relative; padding:45px 36px; background:linear-gradient(150deg,#00695c,#00897b); color:#fff; overflow:hidden; }
.leaderboard-winner:after { content:""; position:absolute; right:-90px; top:-20px; width:170px; height:110%; background:#fff; transform:skewX(-17deg); }
.leaderboard-brand { position:relative; z-index:1; font-size:26px; font-weight:800; letter-spacing:-1px; }
.winner-card { position:relative; z-index:1; margin-top:75px; padding:35px 22px; text-align:center; color:#37434c; background:#fff; border-radius:10px; box-shadow:0 5px 18px rgba(87,43,0,.2); }
.trophy { font-size:78px; line-height:1; filter:sepia(1) saturate(2); }
.winner-place { display:block; margin:13px 0 8px; color:#00796b; font-size:24px; font-weight:800; }
.winner-card > strong { display:block; min-height:30px; font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.winner-score { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid #edf0f1; }
.winner-score span { font-size:22px; font-weight:800; }.winner-score small { display:block; margin-top:5px; color:#8b949a; font-size:10px; letter-spacing:.7px; }
.leaderboard-board { padding:42px 55px 34px 45px; }.leaderboard-summary { display:flex; justify-content:flex-end; gap:45px; padding-bottom:40px; }.leaderboard-summary div { text-align:center; }.leaderboard-summary b { display:block; color:#56616a; font-size:30px; }.leaderboard-summary span { color:#69737b; font-size:14px; }
.leaderboard-head,.leaderboard-board li { display:grid; grid-template-columns:70px 1fr 100px 100px; gap:14px; align-items:center; }.leaderboard-head { padding:13px 0; color:#858f95; font-size:12px; font-weight:800; }.leaderboard-head span:first-child { grid-column:span 2; }.leaderboard-board ol { list-style:none; margin:0; padding:0; }.leaderboard-board li { min-height:54px; border-bottom:1px solid #edf0f1; color:#536068; }.leaderboard-board li .rank { color:#00796b; font-size:20px; font-weight:800; }.leaderboard-board li strong { font-size:19px; }.leaderboard-board li b,.leaderboard-board li em { font-size:18px; font-style:normal; text-align:center; }.leaderboard-empty { padding:60px 0; color:#778188; text-align:center; }
@media (max-width: 760px) { .leaderboard-stage { grid-template-columns:1fr; }.leaderboard-winner { padding:22px; }.leaderboard-winner:after { display:none; }.winner-card { margin-top:20px; }.leaderboard-board { padding:25px; }.leaderboard-summary { justify-content:flex-start; padding-bottom:22px; gap:22px; }.leaderboard-head,.leaderboard-board li { grid-template-columns:48px 1fr 55px 55px; } }
.projection .result-label {
    font-size: clamp(14px, 1.5vw, 23px);
}
.join-panel {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.join-panel > .eyebrow {
    font-size: 9px;
}
.join-panel > strong {
    font-size: 25px;
    letter-spacing: 3px;
}
.join-panel p {
    font-size: 12px;
    color: var(--muted);
}
.participant-header {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.participant-header .brand {
    font-size: 24px;
}
.participant-wrap {
    max-width: 660px;
    margin: 20px auto;
    padding: 0 20px;
}
.join-card {
    padding: 40px;
    max-width: 460px;
    margin: 30px auto;
}
.join-card h1 {
    margin: 15px 0;
}
.join-card > p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 24px;
}
.join-card > p:last-child {
    margin: 20px 0 0;
    font-size: 10px;
}
.join-card .eyebrow {
    font-size: 9px;
    letter-spacing: 1.1px;
}
.code-input {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 650;
}
.participant-footer {
    text-align: center;
    color: #9daa9e;
    font-size: 10px;
    padding: 25px;
}
.phone-stage .answer-options {
    grid-template-columns: 1fr;
}
.phone-stage .stage-message {
    min-height: 340px;
}
.phone-stage .stage-message.compact {
    min-height: 230px;
}
.phone-stage .question-stage {
    padding: 25px;
}
.phone-stage .question-stage h2 {
    font-size: 24px;
}
.feedback-question {
    margin: 22px 0;
}
.feedback-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
}
.feedback-choice-options button {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #c9d5d1;
    border-radius: 8px;
    background: #f7fbfa;
    color: #28453f;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.feedback-choice-options button:nth-child(4n + 1) { background: #eef5dc; }
.feedback-choice-options button:nth-child(4n + 2) { background: #e1f2f5; }
.feedback-choice-options button:nth-child(4n + 3) { background: #fce9d9; }
.feedback-choice-options button:nth-child(4n + 4) { background: #f1e7f7; }
.feedback-choice-options button.selected {
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 2px #d9f0eb;
}
.qa-stage { padding:36px; max-width:900px; margin:0 auto; }.qa-stage h2 { margin:8px 0 6px; }.qa-form { display:grid; gap:12px; margin:22px 0; }.qa-form textarea { width:100%; resize:vertical; }.qa-form .checkbox-label { display:flex; align-items:center; gap:8px; font-size:13px; }.qa-form .btn { justify-self:start; }.qa-list { display:grid; gap:10px; }.qa-question { padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; }.qa-question p { margin:0 0 9px; }.qa-question p strong { display:block; font-size:12px; color:var(--accent); }.qa-question > div { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.theme-presets { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#f8fbfa; }.theme-presets strong { display:block; font-size:13px; color:var(--ink); }.theme-presets > span { display:block; margin:4px 0 10px; font-size:11px; color:var(--muted); }.theme-presets > div { display:flex; gap:9px; flex-wrap:wrap; }.theme-presets button { width:31px; height:31px; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #c8d4d0; cursor:pointer; }.theme-presets button:hover,.theme-presets button:focus-visible { transform:scale(1.12); outline:2px solid var(--ink); }
.rating-options {
    display: flex;
    gap: 8px;
}
.judge-rating {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}
.judge-target {
    padding: 12px;
    border: 1px solid #e2ebe5;
    border-radius: 8px;
    background: #fbfdfb;
}
.judge-target > strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
}
.rating-options label {
    flex: 1;
    position: relative;
}
.rating-options input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.rating-options span {
    display: block;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 12px 5px;
    font-size: 13px;
    color: #9aab99;
}
.rating-options input:checked + span {
    background: #edf5e9;
    color: var(--accent);
    border-color: var(--accent);
}
.rating-options input:focus-visible + span {
    outline: 3px solid #63c7b7;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: #142e2955;
    backdrop-filter: blur(3px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}
.modal {
    max-width: 530px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 80px #1c3b3020;
    outline: none;
}
.modal.wide {
    max-width: 650px;
}
.modal > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
}
.modal > header h2 {
    font-size: 21px;
    text-transform: capitalize;
}
.modal > header button {
    font-size: 25px;
    color: #8c9d8c;
}
.modal-body {
    padding: 25px 26px;
    overflow: auto;
}
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    margin-top: 15px;
    border-top: 1px solid var(--line);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.upload-preview {
    display: flex;
    align-items: center;
    gap: 15px;
}
.upload-preview img {
    max-width: 220px;
    max-height: 100px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 5px;
}
.section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 650;
    margin: 16px 0;
}
.section-label span {
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
}
.option-editor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.option-editor > span {
    font-size: 11px;
    color: #95a391;
}
.option-editor button {
    font-size: 22px;
    color: #95a391;
}
.option-editor input[type='radio'] {
    margin: 0 3px;
}
.option-editor + .text-button {
    margin: 0 0 20px;
}
.feedback-editor {
    background: #f8faf6;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 18px;
    margin-bottom: 18px;
}
.feedback-editor > .inline {
    margin-bottom: 12px;
    font-size: 12px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 22px;
}
.checkbox-label input {
    margin: 0;
}
.report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 15px;
}
.report-toolbar h2 {
    font-size: 23px;
}
.report-toolbar p {
    font-size: 12px;
    margin-top: 6px;
}
.report-tabs {
    margin-bottom: 20px;
}
.report-question {
    padding: 26px;
    margin-bottom: 20px;
}
.report-question h3 {
    margin: 10px 0 20px;
}
.report-option {
    margin: 17px 0;
}
.report-option > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 12px;
}
.report-option small {
    font-size: 10px;
    color: var(--muted);
    font-weight: 400;
}
.report-option b {
    color: var(--accent);
    margin-left: 6px;
}
.report-question > .inline > input {
    width: 220px;
    font-size: 11px;
}
.table-scroll {
    overflow: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: left;
    font-size: 12px;
}
th {
    color: #92a08f;
    font-size: 10px;
    font-weight: 500;
    padding: 13px 12px;
    background: #f8faf5;
}
td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
}
.feedback-report-field {
    margin-top: 25px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}
.feedback-report-field h4 {
    font-size: 13px;
    margin-bottom: 15px;
}
.feedback-text-list p,
.feedback-answer {
    background: #f7f9f4;
    border-radius: 7px;
    margin: 8px 0;
    padding: 12px 15px;
    overflow-wrap: anywhere;
}
.feedback-all-answers {
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 15px;
}
.feedback-all-answers summary {
    color: var(--accent);
    cursor: pointer;
    font-weight: 700;
}
.feedback-answer p {
    font-size: 12px;
    margin: 7px 0 0;
}
.feedback-answer p span { color: var(--muted); }
.field-limit {
    color: var(--muted);
    display: block;
    font-size: 11px;
    margin: -9px 0 13px;
}
.content-list .content-row { cursor: grab; }
.content-list .content-row.dragging { cursor: grabbing; opacity: .45; }
.content-list .content-row.drag-over { box-shadow: inset 0 3px 0 var(--accent); }
.rating-average {
    display: inline-block;
    padding: 5px 10px;
    background: #f4f1df;
    border-radius: 5px;
    margin-left: 15px;
    color: #98844b;
    font-size: 12px;
}
.feedback-entry {
    background: #f7f9f4;
    padding: 12px 15px;
    margin: 8px 0;
    border-radius: 7px;
}
.feedback-entry strong {
    font-size: 10px;
    color: #8a9c86;
}
.feedback-entry p {
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-top: 5px;
}
.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
}
.auth-story {
    background: #164e43;
    color: #f2f6e9;
    padding: 45px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.auth-story .brand {
    color: #f9fff5;
}
.auth-story .brand-mark {
    background: #d4e5a8;
    color: #285340;
}
.auth-story .eyebrow {
    color: #aac6a7;
    font-size: 10px;
}
.auth-story h1 {
    font-size: clamp(33px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.15;
    margin: 22px 0;
    letter-spacing: -2px;
}
.auth-story p {
    color: #a9c7b5;
    font-size: 13px;
    max-width: 320px;
}
.auth-story > .small {
    font-size: 10px;
    color: #9fbdad;
}
.auth-art {
    position: relative;
    margin-top: 40px;
    padding: 10px 0 35px;
    max-width: 350px;
}
.mini-poll {
    padding: 25px;
    background: #fffff4;
    border-radius: 15px;
    transform: rotate(-5deg);
    max-width: 290px;
    box-shadow: 0 10px 35px #072e3520;
}
.mini-poll > span {
    color: #385c48;
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 16px;
}
.mini-poll > div {
    padding: 9px 10px;
    background: #dbe9cd;
    border-radius: 5px;
    font-size: 8px;
    color: #537444;
    margin-bottom: 9px;
    white-space: nowrap;
}
.mini-poll b {
    float: right;
}
.floating-chip {
    position: absolute;
    bottom: 15px;
    right: 0;
    background: #e3e8bc;
    border-radius: 25px;
    padding: 12px 18px;
    color: #507144;
    font-size: 11px;
    transform: rotate(6deg);
}
.auth-form {
    width: 100%;
    max-width: 430px;
    padding: 40px 25px;
    margin: auto;
}
.auth-form h2 {
    font-size: 32px;
    margin: 13px 0;
}
.auth-form > p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 27px;
}
.auth-form form > .btn {
    margin-top: 8px;
}
.auth-divider {
    border-top: 1px solid var(--line);
    margin: 30px 0 22px;
}
.auth-form > .small {
    font-size: 11px;
}
.toast,
.error-toast {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    max-width: calc(100vw - 30px);
    padding: 13px 20px;
    border-radius: 10px;
    background: #214f3f;
    color: white;
    box-shadow: 0 7px 30px #12382922;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.error-toast {
    background: #fff3eb;
    color: #a45435;
    border: 1px solid #f1d0bd;
    top: 20px;
}
.error-toast button {
    font-size: 22px;
}
.boot {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
}
.boot p {
    color: var(--muted);
    font-size: 12px;
}
.spinner {
    height: 25px;
    width: 25px;
    border: 2px solid #dce9df;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@media (min-width: 1500px) {
    .workspace-content {
        padding-top: 45px;
    }
    .welcome-banner {
        min-height: 260px;
    }
    .banner-art {
        width: 370px;
    }
    .event-cover {
        height: 180px;
    }
}
@media (max-width: 1150px) {
    .sidebar {
        width: 195px;
        padding: 28px 16px 16px;
    }
    .workspace {
        margin-left: 195px;
    }
    .workspace-content {
        padding: 28px 25px;
    }
    .topbar {
        padding: 0 25px;
    }
    .topbar-right {
        display: none;
    }
    .page-heading h1 {
        font-size: 28px;
    }
    .event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .content-layout {
        grid-template-columns: minmax(0, 1fr) 230px;
    }
    .content-row {
        padding: 16px 12px;
        gap: 9px;
    }
    .row-actions {
        flex-wrap: wrap;
        max-width: 65px;
    }
    .presenter-layout {
        grid-template-columns: 160px minmax(0, 1fr);
    }
    .stage-controls {
        flex-wrap: wrap;
    }
    .banner-art {
        min-width: 220px;
    }
    .welcome-banner h2 {
        font-size: 23px;
    }
    .auth-story {
        padding: 40px;
    }
    .stat-card {
        padding: 18px 14px;
        gap: 10px;
    }
    .stat-icon {
        width: 35px;
        height: 35px;
    }
}
@media (max-width: 850px) {
    .sidebar {
        width: 74px;
        padding: 26px 12px;
    }
    .sidebar > .brand {
        font-size: 0;
    }
    .sidebar .brand-mark {
        font-size: 30px;
        margin: 0;
    }
    .workspace-label,
    .nav-label,
    .sidebar-note,
    .profile > div,
    .profile > button {
        display: none;
    }
    .sidebar nav {
        margin-top: 45px;
    }
    .sidebar nav button {
        font-size: 0;
        gap: 0;
        justify-content: center;
        padding: 13px;
    }
    .sidebar nav button span {
        display: none;
    }
    .sidebar .profile {
        margin-top: auto;
        justify-content: center;
    }
    .workspace {
        margin-left: 74px;
    }
    .welcome-banner {
        padding: 25px;
    }
    .banner-art {
        margin: -25px -25px -25px 10px;
        min-width: 200px;
    }
    .art-question {
        width: 170px;
        margin-right: 25px;
    }
    .art-people {
        right: 18px;
        font-size: 10px;
    }
    .page-heading {
        align-items: flex-start;
    }
    .page-heading .btn {
        font-size: 10px;
        padding: 10px 12px;
    }
    .content-layout {
        grid-template-columns: 1fr;
    }
    .add-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .add-content > .eyebrow,
    .add-content > h3,
    .add-content > .tip {
        grid-column: 1/-1;
    }
    .add-content > h3 {
        margin: 0 0 5px;
    }
    .add-content > button {
        margin: 0;
    }
    .event-nav {
        flex-wrap: wrap;
        gap: 10px;
    }
    .share-card {
        padding: 25px;
        gap: 20px;
        flex-wrap: wrap;
    }
    .presenter-layout {
        grid-template-columns: 1fr;
    }
    .presenter-timeline {
        display: flex;
        overflow: auto;
        gap: 8px;
        padding: 10px;
    }
    .presenter-timeline > .eyebrow {
        display: none;
    }
    .presenter-timeline > button {
        min-width: 160px;
        max-width: 200px;
    }
    .projection-body {
        grid-template-columns: 1fr;
    }
    .join-panel {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    .join-panel .qr {
        width: 138px;
        height: 138px;
        padding: 10px;
    }
    .join-panel .qr img,
    .join-panel .qr canvas {
        width: 116px !important;
        height: 116px !important;
    }
    .projection > header > span:nth-child(2) {
        display: none;
    }
    .auth-story {
        padding: 30px;
    }
    .auth-story h1 {
        font-size: 35px;
    }
    .auth-form {
        padding: 30px;
    }
    .overview-grid {
        gap: 10px;
    }
    .stat-card {
        gap: 8px;
    }
    .stat-icon {
        display: none;
    }
    .report-toolbar {
        flex-wrap: wrap;
    }
}
@media (max-width: 600px) {
    .sidebar {
        position: static;
        width: 100%;
        height: 64px;
        flex-direction: row;
        align-items: center;
        padding: 10px 18px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .sidebar > .brand {
        font-size: 24px;
    }
    .sidebar .brand-mark {
        margin-right: 8px;
        width: 29px;
        height: 31px;
        font-size: 26px;
    }
    .sidebar nav {
        display: flex;
        margin: 0 0 0 auto;
        gap: 1px;
    }
    .sidebar nav button {
        padding: 10px;
    }
    .sidebar nav button .icon {
        width: 18px;
        height: 18px;
    }
    .profile {
        display: none;
    }
    .workspace {
        margin-left: 0;
    }
    .topbar {
        height: 43px;
        padding: 0 20px;
    }
    .breadcrumb {
        font-size: 10px;
        gap: 10px;
    }
    .workspace-content {
        padding: 23px 18px;
    }
    .page-heading {
        flex-wrap: wrap;
        gap: 17px;
        margin-bottom: 23px;
    }
    .page-heading h1 {
        font-size: 27px;
    }
    .page-heading .eyebrow {
        font-size: 8px;
        letter-spacing: 1.4px;
    }
    .page-heading p {
        font-size: 11px;
    }
    .overview-grid {
        gap: 8px;
        margin-bottom: 18px;
    }
    .stat-card {
        padding: 13px 12px;
        min-height: 79px;
    }
    .stat-card span:not(.stat-icon) {
        font-size: 8px;
        line-height: 1.4px;
        line-height: 1.4;
    }
    .stat-card strong {
        font-size: 23px;
        margin-top: 6px;
    }
    .welcome-banner {
        padding: 24px;
        min-height: 225px;
    }
    .welcome-banner h2 {
        font-size: 24px;
        max-width: 240px;
    }
    .welcome-banner .eyebrow {
        font-size: 7px;
        letter-spacing: 1px;
        max-width: 190px;
    }
    .welcome-banner p {
        font-size: 10px;
        max-width: 210px;
    }
    .banner-art {
        display: none;
    }
    .section-toolbar {
        flex-wrap: wrap;
        gap: 12px;
    }
    .tabs button {
        padding: 7px 9px;
        font-size: 10px;
    }
    .search {
        max-width: none;
        width: 100%;
    }
    .search input {
        font-size: 12px;
    }
    .event-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .event-cover {
        height: 160px;
    }
    .event-card h3 {
        font-size: 17px;
    }
    .event-card-body {
        padding: 18px 20px 0;
    }
    .event-card p {
        font-size: 12px;
    }
    .event-card-foot,
    .event-card-foot button,
    .event-date {
        font-size: 11px;
    }
    .workspace-footer span {
        display: none;
    }
    .workspace-footer {
        margin-top: 25px;
    }
    .content-row {
        gap: 8px;
    }
    .row-number {
        display: none;
    }
    .row-actions {
        max-width: 65px;
    }
    .row-copy h3 {
        font-size: 12px;
    }
    .content-row .item-icon {
        width: 31px;
        height: 35px;
    }
    .card-heading {
        padding: 20px;
    }
    .card-heading .small {
        display: none;
    }
    .card-heading h2 {
        font-size: 18px;
    }
    .card-heading p {
        font-size: 10px;
    }
    .add-content {
        padding: 20px 15px;
    }
    .share-card {
        padding: 24px;
    }
    .share-card h2 {
        font-size: 25px;
    }
    .share-card > .qr {
        margin: 0 auto;
    }
    .copy-box {
        flex-wrap: wrap;
    }
    .copy-box input {
        width: 100%;
    }
    .presenter-toolbar {
        flex-wrap: wrap;
    }
    .presenter-toolbar > .inline {
        flex-wrap: wrap;
    }
    .live-stage {
        min-height: 350px;
    }
    .stage-message {
        padding: 25px 20px;
    }
    .stage-message h2 {
        font-size: 25px;
    }
    .question-stage {
        padding: 22px 18px;
    }
    .question-stage h2 {
        font-size: 22px;
    }
    .answer-options {
        grid-template-columns: 1fr;
    }
    .stage-brand {
        padding: 16px 19px;
    }
    .text-slide {
        padding: 30px 20px;
    }
    .text-slide h2 {
        font-size: 28px;
    }
    .stage-controls {
        padding: 10px;
        gap: 6px;
    }
    .stage-controls .inline {
        gap: 5px;
    }
    .stage-controls .btn {
        font-size: 9px;
        padding: 8px;
    }
    .projection {
        padding: 18px;
    }
    .projection .question-stage {
        padding: 22px;
    }
    .projection .live-stage {
        min-height: 50vh;
    }
    .projection .stage-message {
        min-height: 45vh;
    }
    .projection-body {
        gap: 20px;
    }
    .projection > header .brand {
        font-size: 24px;
    }
    .participant-wrap {
        padding: 0 15px;
        margin: 10px auto;
    }
    .participant-header {
        padding: 20px;
    }
    .participant-header .connection {
        font-size: 9px;
    }
    .join-card {
        padding: 28px 23px;
    }
    .join-card h1 {
        font-size: 29px;
    }
    .phone-stage .question-stage {
        padding: 22px;
    }
    .phone-stage .question-stage h2 {
        font-size: 23px;
    }
    .modal-backdrop {
        padding: 12px;
    }
    .modal > header {
        padding: 18px 20px;
    }
    .modal-body {
        padding: 20px;
    }
    .modal > header h2 {
        font-size: 20px;
    }
    .form-grid {
        gap: 10px;
    }
    .feedback-editor {
        padding: 13px;
    }
    .report-question {
        padding: 20px;
    }
    .report-question > .inline {
        flex-wrap: wrap;
    }
    .report-question > .inline > input {
        width: 100%;
    }
    .report-toolbar > .inline {
        width: 100%;
        justify-content: space-between;
    }
    .auth-layout {
        grid-template-columns: 1fr;
    }
    .auth-story {
        display: none;
    }
    .auth-form {
        padding: 45px 25px;
    }
    .auth-form h2 {
        font-size: 32px;
    }
    .auth-layout:before {
        content: 'gather.';
        display: block;
        padding: 25px 25px 0;
        color: var(--accent);
        font-size: 30px;
        font-weight: 750;
        letter-spacing: -1px;
    }
    .auth-form {
        align-self: start;
    }
    .rating-options {
        gap: 5px;
    }
    .rating-options span {
        padding: 12px 3px;
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}