@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

/* =========================================================
   TICKETLY — CLEAN DASHBOARD SYSTEM
   Dark / refined / readable
========================================================= */

:root {
    --bg: #080c15;
    --bg-deep: #050811;

    --surface: rgba(16, 23, 39, 0.82);
    --surface-soft: rgba(255, 255, 255, 0.025);
    --surface-hover: rgba(255, 255, 255, 0.045);

    --accent: #707bf2;
    --accent-light: #9ca5ff;
    --accent-dark: #5964df;
    --accent-soft: rgba(112, 123, 242, 0.10);

    --green: #59d49b;
    --red: #f27676;
    --yellow: #e8c76a;

    --text-primary: #f5f7fc;
    --text-secondary: #a8b1c3;
    --text-muted: #717c91;
    --text-dim: #535e73;

    --border: rgba(164, 174, 255, 0.10);
    --border-strong: rgba(164, 174, 255, 0.17);

    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 17px;

    --shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    --shadow-small: 0 8px 24px rgba(0, 0, 0, 0.16);

    --transition: 180ms ease;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--bg-deep);
}

body {
    min-height: 100vh;
    color: var(--text-primary);
    background:
        radial-gradient(
            850px circle at 50% -20%,
            rgba(101, 114, 242, 0.09),
            transparent 62%
        ),
        radial-gradient(
            650px circle at 0% 45%,
            rgba(70, 91, 190, 0.045),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            #080c15 0%,
            #070b13 55%,
            #050811 100%
        );
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        );
    background-size: 64px 64px;
    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
}

::selection {
    background: rgba(112, 123, 242, 0.25);
    color: white;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a,
button {
    outline: none;
    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition),
        opacity var(--transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(141, 151, 255, 0.65);
    outline-offset: 2px;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

::placeholder {
    color: #59657b;
    opacity: 1;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #060910;
}

::-webkit-scrollbar-thumb {
    background: #222c41;
    border-radius: 999px;
    border: 2px solid #060910;
}

::-webkit-scrollbar-thumb:hover {
    background: #303b54;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.ambient {
    position: fixed;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.09;
    filter: blur(100px);
}

.ambient-one {
    top: 8%;
    left: -100px;
    background: #6572ed;
}

.ambient-two {
    top: 50%;
    right: -120px;
    background: #7660df;
}

.ambient-three {
    bottom: -100px;
    left: 35%;
    background: #405bb8;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 2rem;

    border-bottom: 1px solid var(--border);
    background: rgba(6, 9, 16, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.brand-area,
.topbar-actions,
.brand,
.current-server,
.user-pill {
    display: flex;
    align-items: center;
}

.brand-area {
    gap: 1rem;
    min-width: 0;
}

.brand {
    gap: 0.7rem;
    color: white;
    text-decoration: none;
}

.brand-mark,
.login-mark,
.footer-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: white;
    font-weight: 850;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.9rem;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-text strong {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.brand-text span {
    margin-top: 0.24rem;
    color: var(--text-dim);
    font-size: 0.58rem;
    font-weight: 600;
}

.brand-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
}

.current-server {
    min-width: 0;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.current-server > span:last-child {
    overflow: hidden;
    max-width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-status,
.status-dot,
.server-indicator,
.status-badge > span {
    display: inline-block;
    flex-shrink: 0;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(89, 212, 155, 0.4);
}

.topbar-actions {
    gap: 0.55rem;
}

.user-pill {
    gap: 0.5rem;

    min-height: 34px;
    padding: 0 0.7rem;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--surface-soft);

    color: var(--text-secondary);
    font-size: 0.7rem;
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 6px;

    background: rgba(112, 123, 242, 0.13);
    color: var(--accent-light);

    font-size: 0.65rem;
    font-weight: 800;
}

.topbar-button {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.75rem;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.02);

    color: var(--text-secondary);
    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700;
}

.topbar-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: white;
}

.danger-button:hover {
    border-color: rgba(242, 118, 118, 0.22);
    background: rgba(242, 118, 118, 0.06);
    color: #ffb0b0;
}

.invite-button {
    border-color: rgba(112, 123, 242, 0.22);
    background: rgba(112, 123, 242, 0.08);
    color: #d8dcff;
}

.invite-button:hover {
    border-color: rgba(112, 123, 242, 0.35);
    background: rgba(112, 123, 242, 0.13);
}


/* =========================================================
   PAGE
========================================================= */

.page-container {
    width: min(1160px, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: 2.6rem 0 2rem;
}

.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.8rem;
}

.eyebrow,
.panel-eyebrow {
    color: #8d98f5;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.page-intro h1 {
    margin-top: 0.35rem;

    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}

.page-intro p {
    max-width: 620px;
    margin-top: 0.55rem;

    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.6;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.dashboard-invite {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0 0.85rem;

    border: 1px solid rgba(112, 123, 242, 0.22);
    border-radius: 9px;

    background: rgba(112, 123, 242, 0.08);

    color: #dce0ff;
    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700;
}

.dashboard-invite:hover {
    border-color: rgba(112, 123, 242, 0.36);
    background: rgba(112, 123, 242, 0.13);
    transform: translateY(-1px);
}

.dashboard-invite-icon {
    color: var(--accent-light);
}

.status-badge {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0 0.7rem;

    border: 1px solid rgba(89, 212, 155, 0.14);
    border-radius: 9px;

    background: rgba(89, 212, 155, 0.045);

    color: #7fd9b0;

    font-size: 0.68rem;
    font-weight: 700;
}


/* =========================================================
   OVERVIEW
========================================================= */

.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.overview-card {
    min-height: 76px;

    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.8rem 0.9rem;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: var(--surface);
}

.overview-card:hover {
    border-color: var(--border-strong);
    background: rgba(19, 27, 46, 0.86);
}

.overview-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(112, 123, 242, 0.12);
    border-radius: 10px;

    background: rgba(112, 123, 242, 0.07);

    font-size: 0.9rem;
}

.overview-label {
    display: block;
    margin-bottom: 0.22rem;

    color: var(--text-muted);

    font-size: 0.67rem;
    font-weight: 650;
}

.overview-card strong {
    display: block;

    color: var(--text-primary);

    font-size: 1.02rem;
    line-height: 1.15;
    font-weight: 760;
}


/* =========================================================
   PANELS
========================================================= */

.panel-card {
    position: relative;

    margin-top: 1rem;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 40, 0.88),
            rgba(10, 15, 27, 0.90)
        );

    box-shadow: var(--shadow);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.panel-card:hover {
    border-color: rgba(164, 174, 255, 0.135);
}

.panel-header {
    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.2rem 1.3rem;

    border-bottom: 1px solid var(--border);
}

.panel-header h2 {
    margin-top: 0.2rem;

    color: var(--text-primary);

    font-size: 1.18rem;
    font-weight: 760;
    letter-spacing: -0.025em;
}

.panel-header p {
    margin-top: 0.32rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.panel-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.025);

    color: #a5adff;
    font-size: 0.9rem;
}


/* =========================================================
   FORMS
========================================================= */

.dashboard-form {
    display: grid;
    gap: 0.95rem;

    padding: 1.25rem 1.3rem 1.35rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.form-group label {
    color: #c0c7d6;
    font-size: 0.76rem;
    font-weight: 700;
}

.form-hint {
    color: var(--text-dim);
    font-size: 0.7rem;
    line-height: 1.45;
}

input,
select,
textarea {
    width: 100%;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(5, 9, 17, 0.62);
    color: var(--text-primary);

    font-size: 0.82rem;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

input,
select {
    min-height: 42px;
    padding: 0 0.75rem;
}

textarea {
    min-height: 105px;
    padding: 0.7rem 0.75rem;
    resize: vertical;
    line-height: 1.5;
}

select {
    appearance: auto;
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(164, 174, 255, 0.16);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(112, 123, 242, 0.48);
    background: rgba(7, 11, 20, 0.84);
    box-shadow: 0 0 0 3px rgba(112, 123, 242, 0.07);
    outline: none;
}

input.has-value {
    border-color: rgba(112, 123, 242, 0.25);
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-button,
.blue-button {
    position: relative;

    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.95rem;

    border: 1px solid rgba(147, 155, 255, 0.25);
    border-radius: 9px;

    background: linear-gradient(
        135deg,
        #707bf1,
        #5d68db
    );

    color: white;

    font-size: 0.76rem;
    font-weight: 750;

    box-shadow:
        0 8px 22px rgba(69, 80, 190, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.primary-button:hover,
.blue-button:hover {
    transform: translateY(-1px);

    border-color: rgba(177, 183, 255, 0.35);

    box-shadow:
        0 11px 26px rgba(69, 80, 190, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.delete-button {
    min-height: 34px;

    padding: 0 0.7rem;

    border: 1px solid rgba(242, 118, 118, 0.14);
    border-radius: 8px;

    background: rgba(242, 118, 118, 0.045);

    color: #e99999;

    font-size: 0.7rem;
    font-weight: 700;
}

.delete-button:hover {
    border-color: rgba(242, 118, 118, 0.27);
    background: rgba(242, 118, 118, 0.08);
    color: #ffb3b3;
}


/* =========================================================
   SETUP / CONTENT GRID
========================================================= */

.content-grid,
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.content-grid > .panel-card {
    margin-top: 1rem;
}


/* =========================================================
   DEPLOY PREVIEW
========================================================= */

.deploy-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;

    padding: 0.8rem;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.018);
}

.preview-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    margin-top: 0.3rem;

    border-radius: 50%;

    background: var(--accent);
    box-shadow: 0 0 12px rgba(112, 123, 242, 0.35);
}

.deploy-preview strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.77rem;
}

.deploy-preview span {
    display: block;

    margin-top: 0.2rem;

    color: var(--text-muted);

    font-size: 0.7rem;
    line-height: 1.45;
}


/* =========================================================
   KNOWLEDGE BASE
========================================================= */

.knowledge-header {
    align-items: flex-start;
}

.status-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    color: #79d4aa;

    font-size: 0.67rem;
    font-weight: 700;

    white-space: nowrap;
}

.status-inline span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);
    box-shadow: 0 0 9px rgba(89, 212, 155, 0.38);
}

.knowledge-create {
    margin: 1.15rem;

    padding: 1rem;

    border: 1px solid var(--border);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(112, 123, 242, 0.045),
            rgba(255, 255, 255, 0.012)
        );
}

.knowledge-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.9rem;
}

.knowledge-create-header h3 {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.knowledge-create-header p {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.knowledge-counter,
.knowledge-count {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 0.55rem;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--text-secondary);

    font-size: 0.62rem;
    font-weight: 700;

    white-space: nowrap;
}

.knowledge-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.knowledge-form .form-group:nth-child(2),
.knowledge-form .form-group:nth-child(3),
.knowledge-form > .primary-button {
    grid-column: 1 / -1;
}

.knowledge-list {
    padding: 0 1.15rem 1.15rem;
}

.knowledge-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.85rem;
}

.knowledge-list-header h3 {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.knowledge-list-header p {
    margin-top: 0.22rem;
    color: var(--text-muted);
    font-size: 0.7rem;
}


/* =========================================================
   FAQ / KNOWLEDGE CARDS
========================================================= */

.faq-list {
    display: grid;
    gap: 0.65rem;
}

.faq-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;

    padding: 0.9rem;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.018);
}

.faq-card:hover {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.025);
}

.faq-main {
    min-width: 0;
}

.faq-topline {
    display: flex;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 0.55rem;
}

.faq-number {
    color: var(--text-dim);

    font-size: 0.64rem;
    font-weight: 750;
}

.faq-ai-badge {
    display: inline-flex;
    align-items: center;

    min-height: 20px;

    padding: 0 0.42rem;

    border: 1px solid rgba(112, 123, 242, 0.14);
    border-radius: 999px;

    background: rgba(112, 123, 242, 0.055);

    color: #929cf1;

    font-size: 0.55rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.faq-card h4 {
    color: var(--text-primary);

    font-size: 0.85rem;
    line-height: 1.45;
    font-weight: 700;
}

.faq-answer {
    margin-top: 0.45rem;

    color: var(--text-secondary);

    font-size: 0.75rem;
    line-height: 1.6;
}

.faq-keywords {
    margin-top: 0.75rem;
}

.keywords-label {
    display: block;

    margin-bottom: 0.4rem;

    color: var(--text-dim);

    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.keyword-tag {
    display: inline-flex;
    align-items: center;

    min-height: 23px;

    padding: 0 0.48rem;

    border: 1px solid var(--border);
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.018);

    color: #8d98aa;

    font-size: 0.62rem;
}

.faq-actions {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.empty-knowledge {
    padding: 2rem 1rem;
    text-align: center;

    border: 1px dashed var(--border);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.012);
}

.empty-knowledge-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 0.7rem;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(112, 123, 242, 0.055);

    color: var(--accent-light);
}

.empty-knowledge h3 {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.empty-knowledge p {
    max-width: 460px;
    margin: 0.35rem auto 0;

    color: var(--text-muted);

    font-size: 0.72rem;
    line-height: 1.5;
}


/* =========================================================
   ADVANCED SETTINGS
========================================================= */

.advanced-settings {
    position: relative;

    margin-top: 1rem;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: rgba(12, 18, 31, 0.72);

    box-shadow: var(--shadow-small);
}

.advanced-settings summary {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 1.2rem;

    cursor: pointer;
    list-style: none;

    color: var(--text-primary);

    font-size: 0.82rem;
    font-weight: 750;
}

.advanced-settings summary::-webkit-details-marker {
    display: none;
}

.advanced-settings summary::after {
    content: "+";

    color: var(--accent-light);
    font-size: 1.15rem;
    font-weight: 400;
}

.advanced-settings[open] summary::after {
    content: "−";
}

.advanced-settings summary:hover {
    background: rgba(255, 255, 255, 0.018);
}

.advanced-settings-content {
    padding: 0 1.2rem 1.2rem;
    border-top: 1px solid var(--border);
}

.advanced-block {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border);
}

.advanced-block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.advanced-block h3 {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.advanced-block > p {
    margin-top: 0.28rem;
    margin-bottom: 0.95rem;

    color: var(--text-muted);

    font-size: 0.72rem;
}

.advanced-block .dashboard-form {
    padding: 0;
}


/* =========================================================
   ANALYTICS
========================================================= */

.compact-panel {
    margin-top: 1rem;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;

    padding: 1.15rem 1.3rem 1.3rem;
}

.analytics-item {
    padding: 0.8rem;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.016);
}

.analytics-item span {
    display: block;

    margin-bottom: 0.28rem;

    color: var(--text-muted);

    font-size: 0.62rem;
}

.analytics-item strong {
    display: block;

    color: var(--text-primary);

    font-size: 0.82rem;
    line-height: 1.3;
}


/* =========================================================
   SERVER LIST
========================================================= */

.server-section {
    margin-top: 1.25rem;
}

.server-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.9rem;
}

.server-section-header h2 {
    margin-top: 0.18rem;

    color: var(--text-primary);

    font-size: 1.2rem;
    font-weight: 760;
}

.server-section-header p {
    margin-top: 0.3rem;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.server-card {
    position: relative;
    overflow: hidden;

    padding: 1rem;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 41, 0.84),
            rgba(9, 14, 25, 0.88)
        );

    box-shadow: var(--shadow-small);
}

.server-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.server-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.9rem;
}

.server-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    color: #75d5a7;

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.server-status {
    color: var(--text-dim);
    font-size: 0.62rem;
}

.server-card-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.large-server-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    border: 1px solid var(--border-strong);
    border-radius: 14px;

    background: linear-gradient(
        145deg,
        #6875ec,
        #525ecb
    );

    color: white;

    font-size: 1rem;
    font-weight: 800;
}

.large-server-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-card-info {
    min-width: 0;
}

.server-card h3 {
    overflow: hidden;

    color: var(--text-primary);

    font-size: 0.9rem;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-id {
    display: block;

    margin-top: 0.25rem;

    color: var(--text-dim);

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size: 0.61rem;
}

.server-card-footer {
    margin-top: 1rem;
}

.server-access-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    margin-bottom: 0.65rem;

    color: var(--text-muted);

    font-size: 0.64rem;
}

.manage-button {
    width: 100%;
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 0.75rem;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.022);

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700;
}

.manage-button:hover {
    border-color: rgba(112, 123, 242, 0.25);
    background: rgba(112, 123, 242, 0.07);
    color: white;
}

.button-arrow {
    color: var(--accent-light);
    transition: transform var(--transition);
}

.manage-button:hover .button-arrow {
    transform: translateX(3px);
}


/* =========================================================
   EMPTY SERVER STATE
========================================================= */

.empty-state {
    margin-top: 1.25rem;
}

.empty-server-card {
    padding: 3rem 1.5rem;

    text-align: center;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 40, 0.82),
            rgba(8, 13, 23, 0.86)
        );

    box-shadow: var(--shadow);
}

.empty-orb {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 0.9rem;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: rgba(112, 123, 242, 0.06);

    color: var(--accent-light);
}

.empty-server-card h2 {
    margin-top: 0.4rem;

    color: var(--text-primary);

    font-size: 1.25rem;
    font-weight: 780;
}

.empty-server-card p {
    max-width: 510px;

    margin: 0.5rem auto 0;

    color: var(--text-muted);

    font-size: 0.76rem;
    line-height: 1.55;
}

.empty-invite-button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-top: 1rem;
    padding: 0 0.85rem;

    border: 1px solid rgba(112, 123, 242, 0.22);
    border-radius: 9px;

    background: rgba(112, 123, 242, 0.075);

    color: #dbe0ff;

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700;
}

.empty-invite-button:hover {
    border-color: rgba(112, 123, 242, 0.34);
    background: rgba(112, 123, 242, 0.12);
    transform: translateY(-1px);
}

.empty-invite-button span {
    color: var(--accent-light);
}


/* =========================================================
   FOOTER
========================================================= */

.dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    padding: 1.8rem 0 0.5rem;

    color: var(--text-dim);

    font-size: 0.63rem;
}

.dashboard-footer > div {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-footer strong {
    color: #7c879b;
}

.dashboard-footer span {
    color: var(--text-dim);
}


/* =========================================================
   LOGIN
========================================================= */

.login-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1.5rem;
}

.login-wrapper {
    width: min(100%, 450px);
}

.login-card {
    padding: 2.5rem 2.2rem 2rem;

    border: 1px solid rgba(164, 174, 255, 0.15);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 41, 0.92),
            rgba(7, 11, 20, 0.94)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    text-align: center;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    margin-bottom: 1.15rem;

    color: white;

    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.login-mark {
    width: 36px;
    height: 36px;

    border-radius: 10px;

    font-size: 0.9rem;
}

.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    min-height: 27px;

    padding: 0 0.58rem;

    margin-bottom: 1rem;

    border: 1px solid rgba(112, 123, 242, 0.14);
    border-radius: 999px;

    background: rgba(112, 123, 242, 0.055);

    color: #929cf2;

    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.badge-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #8a95f8;
    box-shadow: 0 0 8px rgba(138, 149, 248, 0.6);
}

.login-card h1 {
    color: var(--text-primary);

    font-size: clamp(1.9rem, 6vw, 2.45rem);
    line-height: 1.03;
    font-weight: 820;
    letter-spacing: -0.055em;
}

.login-card h1 span {
    display: block;

    margin-top: 0.08rem;

    background: linear-gradient(
        110deg,
        #a9b0ff,
        #7180ed
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.login-description {
    margin: 0.85rem auto 0;

    max-width: 410px;

    color: var(--text-secondary);

    font-size: 0.8rem;
    line-height: 1.65;
}

.discord-login-button {
    min-height: 48px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.6rem;

    margin-top: 1.35rem;

    padding: 0 1rem;

    border: 1px solid rgba(145, 154, 255, 0.22);
    border-radius: 11px;

    background: linear-gradient(
        135deg,
        #6f7bf0,
        #5965d9
    );

    color: white;

    text-decoration: none;

    font-size: 0.8rem;
    font-weight: 750;

    box-shadow:
        0 12px 30px rgba(69, 80, 190, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.discord-login-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(69, 80, 190, 0.31),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.discord-icon {
    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.discord-icon svg {
    width: 18px;
    height: 18px;
}

.login-arrow {
    margin-left: auto;

    color: rgba(255, 255, 255, 0.72);

    transition: transform var(--transition);
}

.discord-login-button:hover .login-arrow {
    transform: translateX(3px);
    color: white;
}

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    margin-top: 0.9rem;

    color: var(--text-dim);

    font-size: 0.62rem;
}

.security-icon {
    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(89, 212, 155, 0.13);
    border-radius: 50%;

    background: rgba(89, 212, 155, 0.05);

    color: #69d6a5;

    font-size: 0.55rem;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.65rem;

    margin: 1.5rem 0 1rem;
}

.login-divider span {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-divider small {
    color: #4e5a6e;

    font-size: 0.53rem;
    font-weight: 750;
    letter-spacing: 0.1em;
}

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    color: #586377;

    font-size: 0.6rem;
}

.login-footer span:first-child {
    color: #7c879b;
    font-weight: 750;
}


/* =========================================================
   RESPONSIVE — 1000
========================================================= */

@media (max-width: 1000px) {

    .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — 820
========================================================= */

@media (max-width: 820px) {

    .topbar {
        padding: 0 1.15rem;
    }

    .page-container {
        width: min(100% - 1.75rem, 720px);
        padding-top: 2rem;
    }

    .page-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-actions {
        justify-content: flex-start;
    }

    .content-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .knowledge-form {
        grid-template-columns: 1fr;
    }

    .knowledge-form .form-group:nth-child(2),
    .knowledge-form .form-group:nth-child(3),
    .knowledge-form > .primary-button {
        grid-column: auto;
    }

    .server-grid {
        grid-template-columns: 1fr;
    }

    .analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — 620
========================================================= */

@media (max-width: 620px) {

    .topbar {
        min-height: 64px;
    }

    .brand-divider,
    .current-server {
        display: none;
    }

    .brand-text span {
        display: none;
    }

    .user-pill {
        display: none;
    }

    .topbar-button {
        min-height: 32px;
        padding: 0 0.65rem;
    }

    .page-container {
        width: calc(100% - 1.25rem);
        padding-top: 1.7rem;
    }

    .page-intro h1 {
        font-size: 2rem;
    }

    .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .overview-card {
        min-height: 70px;
        padding: 0.7rem;
        gap: 0.65rem;
    }

    .overview-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .panel-header {
        padding: 1rem;
    }

    .dashboard-form {
        padding: 1rem;
    }

    .knowledge-create {
        margin: 0.85rem;
        padding: 0.85rem;
    }

    .knowledge-list {
        padding: 0 0.85rem 0.85rem;
    }

    .knowledge-create-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .faq-card {
        grid-template-columns: 1fr;
    }

    .faq-actions {
        justify-content: flex-end;
    }

    .analytics-grid {
        grid-template-columns: 1fr 1fr;
        padding: 0.85rem;
    }

    .server-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .empty-server-card {
        padding: 2.3rem 1rem;
    }

    .login-page {
        padding: 1rem;
    }

    .login-card {
        padding: 2.1rem 1.2rem 1.7rem;
        border-radius: 18px;
    }

}


/* =========================================================
   RESPONSIVE — 430
========================================================= */

@media (max-width: 430px) {

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-actions {
        width: 100%;
    }

    .dashboard-invite,
    .status-badge {
        width: 100%;
        justify-content: center;
    }

    .topbar-actions {
        gap: 0.35rem;
    }

    .topbar-button {
        padding: 0 0.55rem;
        font-size: 0.64rem;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
    }

    .server-card {
        padding: 0.85rem;
    }

    .login-footer {
        flex-direction: column;
        gap: 0.15rem;
    }

    .login-footer span:nth-child(2) {
        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   SERVER SETUP / BOT MANAGEMENT
========================================================= */

.server-setup-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.server-setup-grid > .panel-card {
    min-width: 0;
    height: 100%;
}

.bot-management-panel {
    scroll-margin-top: 90px;
}

.support-editor {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.016);
}

.support-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.support-editor-header strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.82rem;
}

.support-editor-header span {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.support-counter {
    flex-shrink: 0;
    color: var(--text-dim) !important;
    font-family: Consolas, Monaco, monospace;
    white-space: nowrap;
}

.support-editor textarea {
    min-height: 190px;
}

.support-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.flash-stack {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.flash-message {
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.flash-message.success {
    border-color: rgba(89, 212, 155, 0.18);
    background: rgba(89, 212, 155, 0.055);
    color: #8ce0ba;
}

.flash-message.error {
    border-color: rgba(242, 118, 118, 0.18);
    background: rgba(242, 118, 118, 0.055);
    color: #f5aaaa;
}

@media (max-width: 820px) {
    .server-setup-grid {
        grid-template-columns: 1fr;
    }

    .support-editor-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* =========================================================
   PAGE TYPOGRAPHY GUARDS / RESPONSIVE FIT
   Kept in the shared stylesheet so dashboard templates remain markup-only.
========================================================= */

.page-container h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.08;
}

.page-container h2 {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.2;
}

.page-container h3 {
    font-size: 1.08rem;
    line-height: 1.3;
}

.page-container h4 {
    font-size: 1rem;
    line-height: 1.45;
}

.page-container p {
    font-size: .92rem;
    line-height: 1.65;
}

.page-container .panel-eyebrow,
.page-container .eyebrow {
    font-size: .68rem;
    letter-spacing: .13em;
}

.page-container .overview-label {
    font-size: .72rem;
}

.page-container .overview-card strong {
    font-size: 1.15rem;
    line-height: 1.25;
}

.page-container .form-hint {
    font-size: .78rem;
    line-height: 1.5;
}

.page-container label {
    font-size: .82rem;
}

.page-container input,
.page-container select,
.page-container textarea,
.page-container button {
    font-size: .9rem;
}

.page-container .ai-explainer-step strong,
.page-container .keyword-preview strong,
.page-container .deploy-preview strong {
    font-size: .92rem;
}

.page-container .ai-explainer-step p,
.page-container .keyword-preview p,
.page-container .deploy-preview span {
    font-size: .82rem;
}

.page-container .faq-answer {
    font-size: .88rem;
    line-height: 1.65;
}

.page-container .keyword-tag {
    font-size: .72rem;
}

.page-container .dashboard-footer {
    font-size: .78rem;
}

.user-avatar-image {
    object-fit: cover;
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    background: transparent;
}

/* The same class is used for the small green dot in the dashboard
   header and for the text label on a server card. Keep the two uses
   visually independent so "Ticketly Active" never gets forced into a
   7px box. */
.current-server .server-status {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(89, 212, 155, 0.4);
}

.server-card-top .server-status {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 48%;
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--text-dim);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: .72rem;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-card-top {
    min-width: 0;
    gap: .65rem;
}

.server-label {
    min-width: 0;
    flex: 1 1 auto;
}

.server-label,
.server-card-top .server-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.large-server-icon {
    object-fit: cover;
}

.large-server-icon.server-icon-placeholder {
    object-fit: cover;
}

.server-card-content,
.server-card-info {
    min-width: 0;
}

.server-card-info h3 {
    min-width: 0;
}

.server-card-footer {
    min-width: 0;
}

.manage-button {
    min-width: 0;
}

.manage-button > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Guild selection hero. These rules were previously absent from the
   shared sheet even though the markup already uses these classes. */
.server-selection-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 40, 0.86),
            rgba(10, 15, 27, 0.88)
        );
    box-shadow: var(--shadow-small);
}

.server-selection-copy {
    min-width: 0;
}

.server-selection-copy h2 {
    margin-top: .22rem;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.server-selection-copy p {
    max-width: 680px;
    margin-top: .45rem;
    color: var(--text-secondary);
    font-size: .8rem;
    line-height: 1.6;
}

.server-selection-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
    min-width: 0;
}

.server-selection-feature {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
}

.feature-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(112,123,242,.12);
    border-radius: 9px;
    background: rgba(112,123,242,.07);
    color: var(--accent-light);
    font-size: .82rem;
}

.server-selection-feature div {
    min-width: 0;
}

.server-selection-feature strong {
    display: block;
    color: var(--text-primary);
    font-size: .84rem;
}

.server-selection-feature span:not(.feature-icon) {
    display: block;
    margin-top: .18rem;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.45;
}

/* Knowledge/Smart Resolve pieces that are present in the markup but
   need their shared presentation kept independent from inline styles. */
.ai-status {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0 .55rem;
    border: 1px solid rgba(89,212,155,.14);
    border-radius: 999px;
    background: rgba(89,212,155,.045);
    color: #79d4aa;
    font-size: .67rem;
    font-weight: 700;
    white-space: nowrap;
}

.ai-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 9px rgba(89,212,155,.38);
}

.ai-explainer {
    display: grid;
    gap: 0;
    margin: 1rem 1.15rem 0;
    padding: .95rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.012);
}

.ai-explainer-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .7rem;
    min-width: 0;
}

.step-number {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(112,123,242,.06);
    color: var(--accent-light);
    font-family: Consolas, Monaco, monospace;
    font-size: .63rem;
    font-weight: 800;
}

.ai-explainer-step > div:last-child {
    min-width: 0;
}

.ai-explainer-step strong {
    display: block;
    color: var(--text-primary);
    font-size: .84rem;
}

.ai-explainer-step p {
    margin-top: .2rem;
    color: var(--text-muted);
    font-size: .73rem;
    line-height: 1.55;
}

.ai-guide-link {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.5;
}

.ai-explainer-line {
    width: 1px;
    min-height: 16px;
    margin: .2rem 0 .2rem 16px;
    background: var(--border);
}

.keyword-preview {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: flex-start;
    gap: .7rem;
    margin: 1rem 1.15rem 0;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.016);
}

.keyword-preview-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(112,123,242,.12);
    border-radius: 9px;
    background: rgba(112,123,242,.07);
    color: var(--accent-light);
}

.keyword-preview > div:last-child {
    min-width: 0;
}

.keyword-preview strong {
    display: block;
    color: var(--text-primary);
    font-size: .84rem;
}

.keyword-preview p {
    margin-top: .22rem;
    color: var(--text-muted);
    font-size: .73rem;
    line-height: 1.55;
}

.support-message-panel {
    margin-top: 1rem;
}

@media (max-width: 820px) {
    .server-selection-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .page-container h1 {
        font-size: 2rem;
    }

    .page-container h2 {
        font-size: 1.3rem;
    }

    .server-selection-hero {
        padding: 1rem;
    }

    .server-card-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .server-card-top .server-status {
        max-width: 100%;
        flex: 0 1 100%;
        text-align: left;
    }

    .panel-header {
        flex-wrap: wrap;
    }

    .ai-status {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .server-selection-feature span:not(.feature-icon) {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 430px) {
    .server-card-content {
        align-items: flex-start;
    }

    .large-server-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .server-card-top .server-status {
        flex-basis: 100%;
    }

    .ai-explainer,
    .keyword-preview {
        margin-left: .85rem;
        margin-right: .85rem;
    }
}

/* Preserve the original page-level sizing from the templates. */
.server-card h3 {
    font-size: 1.08rem;
    margin: 0;
}

.server-card .server-id,
.server-card .server-status,
.server-access-label {
    font-size: .72rem;
}

.empty-server-card h2 {
    font-size: 1.55rem;
}

.empty-server-card p {
    font-size: .86rem;
}

/* =========================================================
   TICKET TOPICS / SUPPORT MESSAGE CONTROLS
   ========================================================= */
.ticket-topics-panel {
    position: relative;
    overflow: hidden;
}

.ticket-topics-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--accent-light),
        var(--accent-dark)
    );
    opacity: 0.75;
    pointer-events: none;
}

.ticket-topics-panel .panel-header,
.ticket-topics-panel .dashboard-form {
    position: relative;
    z-index: 1;
}

.topic-list {
    display: grid;
    gap: 0.7rem;
}

.topic-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.018);
}

.topic-row .form-group {
    min-width: 0;
}

.topic-row .form-group label {
    margin-bottom: 0;
}

.topic-remove {
    min-width: 72px;
    min-height: 40px;
}

.topic-config-footer,
.support-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.support-message-meta {
    margin-top: 0.2rem;
}

.character-counter {
    flex-shrink: 0;
    color: var(--text-dim);
    font-family: Consolas, Monaco, monospace;
    font-size: 0.68rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .topic-row {
        grid-template-columns: 1fr;
    }

    .topic-remove {
        width: 100%;
    }

    .topic-config-footer,
    .support-message-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* =========================================================
   LANGUAGE SWITCHER
========================================================= */
.ticketly-language-switcher {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.55rem 0 0.65rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
}

.ticketly-language-label {
    color: var(--text-dim);
    font-size: 0.62rem;
    font-weight: 750;
    white-space: nowrap;
}

.ticketly-language-select {
    width: auto;
    min-width: 86px;
    min-height: 30px;
    padding: 0 1.45rem 0 0.35rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.ticketly-language-select:hover,
.ticketly-language-select:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ticketly-language-select option {
    background: #0b101c;
    color: var(--text-primary);
}

@media (max-width: 620px) {
    .ticketly-language-label {
        display: none;
    }

    .ticketly-language-switcher {
        padding: 0 0.3rem 0 0.45rem;
    }

    .ticketly-language-select {
        min-width: 76px;
        font-size: 0.64rem;
    }
}

@media (max-width: 430px) {
    .ticketly-language-switcher {
        min-height: 32px;
    }

    .ticketly-language-select {
        min-width: 70px;
        padding-right: 1.15rem;
        font-size: 0.6rem;
    }
}


/* =========================================================
   TICKETLY — HALLOWEEN THEME OVERRIDES
========================================================= */

/* =========================================================
   TICKETLY — HALLOWEEN DASHBOARD SYSTEM
   Dark / refined / Halloween
========================================================= */

    html[data-ticketly-theme="halloween"] { --bg: #0a070d;
    --bg-deep: #050307;

    --surface: rgba(21, 15, 28, 0.84);
    --surface-soft: rgba(255, 255, 255, 0.025);
    --surface-hover: rgba(255, 255, 255, 0.045);

    --accent: #a56cff;
    --accent-light: #c29aff;
    --accent-dark: #7b42d0;
    --accent-soft: rgba(165, 108, 255, 0.10);

    --green: #59d49b;
    --red: #f27676;
    --yellow: #e8c76a;

    --text-primary: #f7f4fa;
    --text-secondary: #b5adbe;
    --text-muted: #7e7489;
    --text-dim: #5d5367;

    --border: rgba(192, 155, 255, 0.11);
    --border-strong: rgba(192, 155, 255, 0.19);

    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 17px;

    --shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    --shadow-small: 0 8px 24px rgba(0, 0, 0, 0.22);

    --halloween-orange: #ff7a2f;
    --halloween-orange-light: #ff9a5c;
    --halloween-orange-dark: #d95718;
    --halloween-orange-soft: rgba(255, 122, 47, 0.10);

    --transition: 180ms ease; }

/* =========================================================
   RESET
========================================================= */

    html[data-ticketly-theme="halloween"] * { box-sizing: border-box;
    margin: 0;
    padding: 0; }

    html[data-ticketly-theme="halloween"] html { min-height: 100%;
    scroll-behavior: smooth;
    background: var(--bg-deep); }

    html[data-ticketly-theme="halloween"] body { min-height: 100vh;
    color: var(--text-primary);
    background:
        radial-gradient(
            900px circle at 12% -10%,
            rgba(255, 106, 36, 0.055),
            transparent 44%
        ),
        radial-gradient(
            780px circle at 95% 25%,
            rgba(139, 75, 217, 0.065),
            transparent 46%
        ),
        linear-gradient(180deg, #0a070d 0%, #08050c 55%, #050307 100%);
    font-family:
        "Plus Jakarta Sans",
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; }

    html[data-ticketly-theme="halloween"] body::before { content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        );
    background-size: 64px 64px;
    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    ); }

    html[data-ticketly-theme="halloween"] ::selection { background: rgba(165, 108, 255, 0.25);
    color: white; }

    html[data-ticketly-theme="halloween"] a,
    html[data-ticketly-theme="halloween"] button,
    html[data-ticketly-theme="halloween"] input,
    html[data-ticketly-theme="halloween"] select,
    html[data-ticketly-theme="halloween"] textarea { -webkit-tap-highlight-color: transparent; }

    html[data-ticketly-theme="halloween"] a,
    html[data-ticketly-theme="halloween"] button { outline: none;
    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition),
        opacity var(--transition); }

    html[data-ticketly-theme="halloween"] a:focus-visible,
    html[data-ticketly-theme="halloween"] button:focus-visible,
    html[data-ticketly-theme="halloween"] input:focus-visible,
    html[data-ticketly-theme="halloween"] select:focus-visible,
    html[data-ticketly-theme="halloween"] textarea:focus-visible { outline: 2px solid rgba(141, 151, 255, 0.65);
    outline-offset: 2px; }

    html[data-ticketly-theme="halloween"] button,
    html[data-ticketly-theme="halloween"] input,
    html[data-ticketly-theme="halloween"] select,
    html[data-ticketly-theme="halloween"] textarea { font: inherit; }

    html[data-ticketly-theme="halloween"] button { cursor: pointer; }

    html[data-ticketly-theme="halloween"] button:disabled { cursor: not-allowed;
    opacity: 0.55; }

    html[data-ticketly-theme="halloween"] a { color: inherit; }

    html[data-ticketly-theme="halloween"] img { max-width: 100%;
    display: block; }

    html[data-ticketly-theme="halloween"] ::placeholder { color: #59657b;
    opacity: 1; }

/* =========================================================
   SCROLLBAR
========================================================= */

    html[data-ticketly-theme="halloween"] ::-webkit-scrollbar { width: 9px;
    height: 9px; }

    html[data-ticketly-theme="halloween"] ::-webkit-scrollbar-track { background: #060910; }

    html[data-ticketly-theme="halloween"] ::-webkit-scrollbar-thumb { background: #222c41;
    border-radius: 999px;
    border: 2px solid #060910; }

    html[data-ticketly-theme="halloween"] ::-webkit-scrollbar-thumb:hover { background: #303b54; }

/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

    html[data-ticketly-theme="halloween"] .ambient { position: fixed;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.09;
    filter: blur(100px); }

    html[data-ticketly-theme="halloween"] .ambient-one { top: 8%;
    left: -100px;
    background: #6572ed; }

    html[data-ticketly-theme="halloween"] .ambient-two { top: 50%;
    right: -120px;
    background: #7660df; }

    html[data-ticketly-theme="halloween"] .ambient-three { bottom: -100px;
    left: 35%;
    background: #405bb8; }

/* =========================================================
   TOPBAR
========================================================= */

    html[data-ticketly-theme="halloween"] .topbar { position: sticky;
    top: 0;
    z-index: 100;
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 2rem;

    border-bottom: 1px solid var(--border);
    background: rgba(6, 9, 16, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); }

    html[data-ticketly-theme="halloween"] .brand-area,
    html[data-ticketly-theme="halloween"] .topbar-actions,
    html[data-ticketly-theme="halloween"] .brand,
    html[data-ticketly-theme="halloween"] .current-server,
    html[data-ticketly-theme="halloween"] .user-pill { display: flex;
    align-items: center; }

    html[data-ticketly-theme="halloween"] .brand-area { gap: 1rem;
    min-width: 0; }

    html[data-ticketly-theme="halloween"] .brand { gap: 0.7rem;
    color: white;
    text-decoration: none; }

    html[data-ticketly-theme="halloween"] .brand-mark,
    html[data-ticketly-theme="halloween"] .login-mark,
    html[data-ticketly-theme="halloween"] .footer-mark { display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: white;
    font-weight: 850; }

    html[data-ticketly-theme="halloween"] .brand-mark { width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.9rem; }

    html[data-ticketly-theme="halloween"] .brand-text { display: flex;
    flex-direction: column;
    line-height: 1; }

    html[data-ticketly-theme="halloween"] .brand-text strong { font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em; }

    html[data-ticketly-theme="halloween"] .brand-text span { margin-top: 0.24rem;
    color: var(--text-dim);
    font-size: 0.58rem;
    font-weight: 600; }

    html[data-ticketly-theme="halloween"] .brand-divider { width: 1px;
    height: 22px;
    background: var(--border); }

    html[data-ticketly-theme="halloween"] .current-server { min-width: 0;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.72rem; }

    html[data-ticketly-theme="halloween"] .current-server > span:last-child { overflow: hidden;
    max-width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .server-status,
    html[data-ticketly-theme="halloween"] .status-dot,
    html[data-ticketly-theme="halloween"] .server-indicator,
    html[data-ticketly-theme="halloween"] .status-badge > span { display: inline-block;
    flex-shrink: 0;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(89, 212, 155, 0.4); }

    html[data-ticketly-theme="halloween"] .topbar-actions { gap: 0.55rem; }

    html[data-ticketly-theme="halloween"] .user-pill { gap: 0.5rem;

    min-height: 34px;
    padding: 0 0.7rem;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--surface-soft);

    color: var(--text-secondary);
    font-size: 0.7rem; }

    html[data-ticketly-theme="halloween"] .user-avatar { display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 6px;

    background: rgba(165, 108, 255, 0.13);
    color: var(--accent-light);

    font-size: 0.65rem;
    font-weight: 800; }

    html[data-ticketly-theme="halloween"] .topbar-button { min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.75rem;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.02);

    color: var(--text-secondary);
    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700; }

    html[data-ticketly-theme="halloween"] .topbar-button:hover { border-color: var(--border-strong);
    background: var(--surface-hover);
    color: white; }

    html[data-ticketly-theme="halloween"] .danger-button:hover { border-color: rgba(242, 118, 118, 0.22);
    background: rgba(242, 118, 118, 0.06);
    color: #ffb0b0; }

    html[data-ticketly-theme="halloween"] .invite-button { border-color: rgba(165, 108, 255, 0.22);
    background: rgba(165, 108, 255, 0.08);
    color: #d8dcff; }

    html[data-ticketly-theme="halloween"] .invite-button:hover { border-color: rgba(165, 108, 255, 0.35);
    background: rgba(165, 108, 255, 0.13); }

/* =========================================================
   PAGE
========================================================= */

    html[data-ticketly-theme="halloween"] .page-container { width: min(1160px, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: 2.6rem 0 2rem; }

    html[data-ticketly-theme="halloween"] .page-intro { display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.8rem; }

    html[data-ticketly-theme="halloween"] .eyebrow,
    html[data-ticketly-theme="halloween"] .panel-eyebrow { color: #8d98f5;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em; }

    html[data-ticketly-theme="halloween"] .page-intro h1 { margin-top: 0.35rem;

    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.045em; }

    html[data-ticketly-theme="halloween"] .page-intro p { max-width: 620px;
    margin-top: 0.55rem;

    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.6; }

    html[data-ticketly-theme="halloween"] .dashboard-actions { display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap; }

    html[data-ticketly-theme="halloween"] .dashboard-invite { min-height: 36px;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0 0.85rem;

    border: 1px solid rgba(165, 108, 255, 0.22);
    border-radius: 9px;

    background: rgba(165, 108, 255, 0.08);

    color: #dce0ff;
    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700; }

    html[data-ticketly-theme="halloween"] .dashboard-invite:hover { border-color: rgba(165, 108, 255, 0.36);
    background: rgba(165, 108, 255, 0.13);
    transform: translateY(-1px); }

    html[data-ticketly-theme="halloween"] .dashboard-invite-icon { color: var(--accent-light); }

    html[data-ticketly-theme="halloween"] .status-badge { min-height: 34px;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0 0.7rem;

    border: 1px solid rgba(89, 212, 155, 0.14);
    border-radius: 9px;

    background: rgba(89, 212, 155, 0.045);

    color: #7fd9b0;

    font-size: 0.68rem;
    font-weight: 700; }

/* =========================================================
   OVERVIEW
========================================================= */

    html[data-ticketly-theme="halloween"] .overview-grid { display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem; }

    html[data-ticketly-theme="halloween"] .overview-card { min-height: 76px;

    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.8rem 0.9rem;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: var(--surface); }

    html[data-ticketly-theme="halloween"] .overview-card:hover { border-color: var(--border-strong);
    background: rgba(19, 27, 46, 0.86); }

    html[data-ticketly-theme="halloween"] .overview-icon { width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(165, 108, 255, 0.12);
    border-radius: 10px;

    background: rgba(165, 108, 255, 0.07);

    font-size: 0.9rem; }

    html[data-ticketly-theme="halloween"] .overview-label { display: block;
    margin-bottom: 0.22rem;

    color: var(--text-muted);

    font-size: 0.67rem;
    font-weight: 650; }

    html[data-ticketly-theme="halloween"] .overview-card strong { display: block;

    color: var(--text-primary);

    font-size: 1.02rem;
    line-height: 1.15;
    font-weight: 760; }

/* =========================================================
   PANELS
========================================================= */

    html[data-ticketly-theme="halloween"] .panel-card { position: relative;

    margin-top: 1rem;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 40, 0.88),
            rgba(10, 15, 27, 0.90)
        );

    box-shadow: var(--shadow);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); }

    html[data-ticketly-theme="halloween"] .panel-card:hover { border-color: rgba(192, 155, 255, 0.135); }

    html[data-ticketly-theme="halloween"] .panel-header { min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.2rem 1.3rem;

    border-bottom: 1px solid var(--border); }

    html[data-ticketly-theme="halloween"] .panel-header h2 { margin-top: 0.2rem;

    color: var(--text-primary);

    font-size: 1.18rem;
    font-weight: 760;
    letter-spacing: -0.025em; }

    html[data-ticketly-theme="halloween"] .panel-header p { margin-top: 0.32rem;
    color: var(--text-muted);
    font-size: 0.75rem; }

    html[data-ticketly-theme="halloween"] .panel-icon { width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.025);

    color: #a5adff;
    font-size: 0.9rem; }

/* =========================================================
   FORMS
========================================================= */

    html[data-ticketly-theme="halloween"] .dashboard-form { display: grid;
    gap: 0.95rem;

    padding: 1.25rem 1.3rem 1.35rem; }

    html[data-ticketly-theme="halloween"] .form-group { display: flex;
    flex-direction: column;
    gap: 0.38rem; }

    html[data-ticketly-theme="halloween"] .form-group label { color: #c0c7d6;
    font-size: 0.76rem;
    font-weight: 700; }

    html[data-ticketly-theme="halloween"] .form-hint { color: var(--text-dim);
    font-size: 0.7rem;
    line-height: 1.45; }

    html[data-ticketly-theme="halloween"] input,
    html[data-ticketly-theme="halloween"] select,
    html[data-ticketly-theme="halloween"] textarea { width: 100%;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(5, 9, 17, 0.62);
    color: var(--text-primary);

    font-size: 0.82rem;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition); }

    html[data-ticketly-theme="halloween"] input,
    html[data-ticketly-theme="halloween"] select { min-height: 42px;
    padding: 0 0.75rem; }

    html[data-ticketly-theme="halloween"] textarea { min-height: 105px;
    padding: 0.7rem 0.75rem;
    resize: vertical;
    line-height: 1.5; }

    html[data-ticketly-theme="halloween"] select { appearance: auto; }

    html[data-ticketly-theme="halloween"] input:hover,
    html[data-ticketly-theme="halloween"] select:hover,
    html[data-ticketly-theme="halloween"] textarea:hover { border-color: rgba(192, 155, 255, 0.16); }

    html[data-ticketly-theme="halloween"] input:focus,
    html[data-ticketly-theme="halloween"] select:focus,
    html[data-ticketly-theme="halloween"] textarea:focus { border-color: rgba(165, 108, 255, 0.48);
    background: rgba(7, 11, 20, 0.84);
    box-shadow: 0 0 0 3px rgba(165, 108, 255, 0.07);
    outline: none; }

    html[data-ticketly-theme="halloween"] input.has-value { border-color: rgba(165, 108, 255, 0.25); }

/* =========================================================
   BUTTONS
========================================================= */

    html[data-ticketly-theme="halloween"] .primary-button,
    html[data-ticketly-theme="halloween"] .blue-button { position: relative;

    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.95rem;

    border: 1px solid rgba(147, 155, 255, 0.25);
    border-radius: 9px;

    background: linear-gradient(
        135deg,
        #707bf1,
        #5d68db
    );

    color: white;

    font-size: 0.76rem;
    font-weight: 750;

    box-shadow:
        0 8px 22px rgba(69, 80, 190, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14); }

    html[data-ticketly-theme="halloween"] .primary-button:hover,
    html[data-ticketly-theme="halloween"] .blue-button:hover { transform: translateY(-1px);

    border-color: rgba(177, 183, 255, 0.35);

    box-shadow:
        0 11px 26px rgba(69, 80, 190, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.16); }

    html[data-ticketly-theme="halloween"] .delete-button { min-height: 34px;

    padding: 0 0.7rem;

    border: 1px solid rgba(242, 118, 118, 0.14);
    border-radius: 8px;

    background: rgba(242, 118, 118, 0.045);

    color: #e99999;

    font-size: 0.7rem;
    font-weight: 700; }

    html[data-ticketly-theme="halloween"] .delete-button:hover { border-color: rgba(242, 118, 118, 0.27);
    background: rgba(242, 118, 118, 0.08);
    color: #ffb3b3; }

/* =========================================================
   SETUP / CONTENT GRID
========================================================= */

    html[data-ticketly-theme="halloween"] .content-grid,
    html[data-ticketly-theme="halloween"] .settings-grid { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem; }

    html[data-ticketly-theme="halloween"] .content-grid > .panel-card { margin-top: 1rem; }

/* =========================================================
   DEPLOY PREVIEW
========================================================= */

    html[data-ticketly-theme="halloween"] .deploy-preview { display: flex;
    align-items: flex-start;
    gap: 0.7rem;

    padding: 0.8rem;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.018); }

    html[data-ticketly-theme="halloween"] .preview-dot { width: 8px;
    height: 8px;

    flex-shrink: 0;

    margin-top: 0.3rem;

    border-radius: 50%;

    background: var(--accent);
    box-shadow: 0 0 12px rgba(165, 108, 255, 0.35); }

    html[data-ticketly-theme="halloween"] .deploy-preview strong { display: block;
    color: var(--text-primary);
    font-size: 0.77rem; }

    html[data-ticketly-theme="halloween"] .deploy-preview span { display: block;

    margin-top: 0.2rem;

    color: var(--text-muted);

    font-size: 0.7rem;
    line-height: 1.45; }

/* =========================================================
   KNOWLEDGE BASE
========================================================= */

    html[data-ticketly-theme="halloween"] .knowledge-header { align-items: flex-start; }

    html[data-ticketly-theme="halloween"] .status-inline { display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    color: #79d4aa;

    font-size: 0.67rem;
    font-weight: 700;

    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .status-inline span { width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);
    box-shadow: 0 0 9px rgba(89, 212, 155, 0.38); }

    html[data-ticketly-theme="halloween"] .knowledge-create { margin: 1.15rem;

    padding: 1rem;

    border: 1px solid var(--border);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(165, 108, 255, 0.045),
            rgba(255, 255, 255, 0.012)
        ); }

    html[data-ticketly-theme="halloween"] .knowledge-create-header { display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.9rem; }

    html[data-ticketly-theme="halloween"] .knowledge-create-header h3 { color: var(--text-primary);
    font-size: 0.95rem; }

    html[data-ticketly-theme="halloween"] .knowledge-create-header p { margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.72rem; }

    html[data-ticketly-theme="halloween"] .knowledge-counter,
    html[data-ticketly-theme="halloween"] .knowledge-count { display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 0.55rem;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--text-secondary);

    font-size: 0.62rem;
    font-weight: 700;

    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .knowledge-form { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem; }

    html[data-ticketly-theme="halloween"] .knowledge-form .form-group:nth-child(2),
    html[data-ticketly-theme="halloween"] .knowledge-form .form-group:nth-child(3),
    html[data-ticketly-theme="halloween"] .knowledge-form > .primary-button { grid-column: 1 / -1; }

    html[data-ticketly-theme="halloween"] .knowledge-list { padding: 0 1.15rem 1.15rem; }

    html[data-ticketly-theme="halloween"] .knowledge-list-header { display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.85rem; }

    html[data-ticketly-theme="halloween"] .knowledge-list-header h3 { color: var(--text-primary);
    font-size: 0.95rem; }

    html[data-ticketly-theme="halloween"] .knowledge-list-header p { margin-top: 0.22rem;
    color: var(--text-muted);
    font-size: 0.7rem; }

/* =========================================================
   FAQ / KNOWLEDGE CARDS
========================================================= */

    html[data-ticketly-theme="halloween"] .faq-list { display: grid;
    gap: 0.65rem; }

    html[data-ticketly-theme="halloween"] .faq-card { display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;

    padding: 0.9rem;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.018); }

    html[data-ticketly-theme="halloween"] .faq-card:hover { border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.025); }

    html[data-ticketly-theme="halloween"] .faq-main { min-width: 0; }

    html[data-ticketly-theme="halloween"] .faq-topline { display: flex;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 0.55rem; }

    html[data-ticketly-theme="halloween"] .faq-number { color: var(--text-dim);

    font-size: 0.64rem;
    font-weight: 750; }

    html[data-ticketly-theme="halloween"] .faq-ai-badge { display: inline-flex;
    align-items: center;

    min-height: 20px;

    padding: 0 0.42rem;

    border: 1px solid rgba(165, 108, 255, 0.14);
    border-radius: 999px;

    background: rgba(165, 108, 255, 0.055);

    color: #929cf1;

    font-size: 0.55rem;
    font-weight: 750;
    letter-spacing: 0.04em; }

    html[data-ticketly-theme="halloween"] .faq-card h4 { color: var(--text-primary);

    font-size: 0.85rem;
    line-height: 1.45;
    font-weight: 700; }

    html[data-ticketly-theme="halloween"] .faq-answer { margin-top: 0.45rem;

    color: var(--text-secondary);

    font-size: 0.75rem;
    line-height: 1.6; }

    html[data-ticketly-theme="halloween"] .faq-keywords { margin-top: 0.75rem; }

    html[data-ticketly-theme="halloween"] .keywords-label { display: block;

    margin-bottom: 0.4rem;

    color: var(--text-dim);

    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.08em; }

    html[data-ticketly-theme="halloween"] .keyword-tags { display: flex;
    flex-wrap: wrap;
    gap: 0.35rem; }

    html[data-ticketly-theme="halloween"] .keyword-tag { display: inline-flex;
    align-items: center;

    min-height: 23px;

    padding: 0 0.48rem;

    border: 1px solid var(--border);
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.018);

    color: #8d98aa;

    font-size: 0.62rem; }

    html[data-ticketly-theme="halloween"] .faq-actions { display: flex;
    align-items: flex-start;
    gap: 0.4rem; }

    html[data-ticketly-theme="halloween"] .empty-knowledge { padding: 2rem 1rem;
    text-align: center;

    border: 1px dashed var(--border);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.012); }

    html[data-ticketly-theme="halloween"] .empty-knowledge-icon { width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 0.7rem;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(165, 108, 255, 0.055);

    color: var(--accent-light); }

    html[data-ticketly-theme="halloween"] .empty-knowledge h3 { color: var(--text-primary);
    font-size: 0.9rem; }

    html[data-ticketly-theme="halloween"] .empty-knowledge p { max-width: 460px;
    margin: 0.35rem auto 0;

    color: var(--text-muted);

    font-size: 0.72rem;
    line-height: 1.5; }

/* =========================================================
   ADVANCED SETTINGS
========================================================= */

    html[data-ticketly-theme="halloween"] .advanced-settings { position: relative;

    margin-top: 1rem;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: rgba(12, 18, 31, 0.72);

    box-shadow: var(--shadow-small); }

    html[data-ticketly-theme="halloween"] .advanced-settings summary { min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 1.2rem;

    cursor: pointer;
    list-style: none;

    color: var(--text-primary);

    font-size: 0.82rem;
    font-weight: 750; }

    html[data-ticketly-theme="halloween"] .advanced-settings summary::-webkit-details-marker { display: none; }

    html[data-ticketly-theme="halloween"] .advanced-settings summary::after { content: "+";

    color: var(--accent-light);
    font-size: 1.15rem;
    font-weight: 400; }

    html[data-ticketly-theme="halloween"] .advanced-settings[open] summary::after { content: "−"; }

    html[data-ticketly-theme="halloween"] .advanced-settings summary:hover { background: rgba(255, 255, 255, 0.018); }

    html[data-ticketly-theme="halloween"] .advanced-settings-content { padding: 0 1.2rem 1.2rem;
    border-top: 1px solid var(--border); }

    html[data-ticketly-theme="halloween"] .advanced-block { padding: 1.2rem 0;
    border-bottom: 1px solid var(--border); }

    html[data-ticketly-theme="halloween"] .advanced-block:last-child { border-bottom: 0;
    padding-bottom: 0; }

    html[data-ticketly-theme="halloween"] .advanced-block h3 { color: var(--text-primary);
    font-size: 0.92rem; }

    html[data-ticketly-theme="halloween"] .advanced-block > p { margin-top: 0.28rem;
    margin-bottom: 0.95rem;

    color: var(--text-muted);

    font-size: 0.72rem; }

    html[data-ticketly-theme="halloween"] .advanced-block .dashboard-form { padding: 0; }

/* =========================================================
   ANALYTICS
========================================================= */

    html[data-ticketly-theme="halloween"] .compact-panel { margin-top: 1rem; }

    html[data-ticketly-theme="halloween"] .analytics-grid { display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;

    padding: 1.15rem 1.3rem 1.3rem; }

    html[data-ticketly-theme="halloween"] .analytics-item { padding: 0.8rem;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.016); }

    html[data-ticketly-theme="halloween"] .analytics-item span { display: block;

    margin-bottom: 0.28rem;

    color: var(--text-muted);

    font-size: 0.62rem; }

    html[data-ticketly-theme="halloween"] .analytics-item strong { display: block;

    color: var(--text-primary);

    font-size: 0.82rem;
    line-height: 1.3; }

/* =========================================================
   SERVER LIST
========================================================= */

    html[data-ticketly-theme="halloween"] .server-section { margin-top: 1.25rem; }

    html[data-ticketly-theme="halloween"] .server-section-header { display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.9rem; }

    html[data-ticketly-theme="halloween"] .server-section-header h2 { margin-top: 0.18rem;

    color: var(--text-primary);

    font-size: 1.2rem;
    font-weight: 760; }

    html[data-ticketly-theme="halloween"] .server-section-header p { margin-top: 0.3rem;
    color: var(--text-muted);
    font-size: 0.74rem; }

    html[data-ticketly-theme="halloween"] .server-grid { display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem; }

    html[data-ticketly-theme="halloween"] .server-card { position: relative;
    overflow: hidden;

    padding: 1rem;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 41, 0.84),
            rgba(9, 14, 25, 0.88)
        );

    box-shadow: var(--shadow-small); }

    html[data-ticketly-theme="halloween"] .server-card:hover { transform: translateY(-2px);
    border-color: var(--border-strong); }

    html[data-ticketly-theme="halloween"] .server-card-top { display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.9rem; }

    html[data-ticketly-theme="halloween"] .server-label { display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    color: #75d5a7;

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em; }

    html[data-ticketly-theme="halloween"] .server-status { color: var(--text-dim);
    font-size: 0.62rem; }

    html[data-ticketly-theme="halloween"] .server-card-content { display: flex;
    align-items: center;
    gap: 0.85rem; }

    html[data-ticketly-theme="halloween"] .large-server-icon { width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    border: 1px solid var(--border-strong);
    border-radius: 14px;

    background: linear-gradient(
        145deg,
        #6875ec,
        #525ecb
    );

    color: white;

    font-size: 1rem;
    font-weight: 800; }

    html[data-ticketly-theme="halloween"] .large-server-icon img { width: 100%;
    height: 100%;
    object-fit: cover; }

    html[data-ticketly-theme="halloween"] .server-card-info { min-width: 0; }

    html[data-ticketly-theme="halloween"] .server-card h3 { overflow: hidden;

    color: var(--text-primary);

    font-size: 0.9rem;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .server-id { display: block;

    margin-top: 0.25rem;

    color: var(--text-dim);

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size: 0.61rem; }

    html[data-ticketly-theme="halloween"] .server-card-footer { margin-top: 1rem; }

    html[data-ticketly-theme="halloween"] .server-access-label { display: flex;
    align-items: center;
    gap: 0.4rem;

    margin-bottom: 0.65rem;

    color: var(--text-muted);

    font-size: 0.64rem; }

    html[data-ticketly-theme="halloween"] .manage-button { width: 100%;
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 0.75rem;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.022);

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700; }

    html[data-ticketly-theme="halloween"] .manage-button:hover { border-color: rgba(165, 108, 255, 0.25);
    background: rgba(165, 108, 255, 0.07);
    color: white; }

    html[data-ticketly-theme="halloween"] .button-arrow { color: var(--accent-light);
    transition: transform var(--transition); }

    html[data-ticketly-theme="halloween"] .manage-button:hover .button-arrow { transform: translateX(3px); }

/* =========================================================
   EMPTY SERVER STATE
========================================================= */

    html[data-ticketly-theme="halloween"] .empty-state { margin-top: 1.25rem; }

    html[data-ticketly-theme="halloween"] .empty-server-card { padding: 3rem 1.5rem;

    text-align: center;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 40, 0.82),
            rgba(8, 13, 23, 0.86)
        );

    box-shadow: var(--shadow); }

    html[data-ticketly-theme="halloween"] .empty-orb { width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 0.9rem;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: rgba(165, 108, 255, 0.06);

    color: var(--accent-light); }

    html[data-ticketly-theme="halloween"] .empty-server-card h2 { margin-top: 0.4rem;

    color: var(--text-primary);

    font-size: 1.25rem;
    font-weight: 780; }

    html[data-ticketly-theme="halloween"] .empty-server-card p { max-width: 510px;

    margin: 0.5rem auto 0;

    color: var(--text-muted);

    font-size: 0.76rem;
    line-height: 1.55; }

    html[data-ticketly-theme="halloween"] .empty-invite-button { min-height: 38px;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-top: 1rem;
    padding: 0 0.85rem;

    border: 1px solid rgba(165, 108, 255, 0.22);
    border-radius: 9px;

    background: rgba(165, 108, 255, 0.075);

    color: #dbe0ff;

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700; }

    html[data-ticketly-theme="halloween"] .empty-invite-button:hover { border-color: rgba(165, 108, 255, 0.34);
    background: rgba(165, 108, 255, 0.12);
    transform: translateY(-1px); }

    html[data-ticketly-theme="halloween"] .empty-invite-button span { color: var(--accent-light); }

/* =========================================================
   FOOTER
========================================================= */

    html[data-ticketly-theme="halloween"] .dashboard-footer { display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    padding: 1.8rem 0 0.5rem;

    color: var(--text-dim);

    font-size: 0.63rem; }

    html[data-ticketly-theme="halloween"] .dashboard-footer > div { display: flex;
    align-items: center;
    gap: 0.45rem; }

    html[data-ticketly-theme="halloween"] .dashboard-footer strong { color: #7c879b; }

    html[data-ticketly-theme="halloween"] .dashboard-footer span { color: var(--text-dim); }

/* =========================================================
   LOGIN
========================================================= */

    html[data-ticketly-theme="halloween"] .login-page { min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1.5rem; }

    html[data-ticketly-theme="halloween"] .login-wrapper { width: min(100%, 450px); }

    html[data-ticketly-theme="halloween"] .login-card { padding: 2.5rem 2.2rem 2rem;

    border: 1px solid rgba(192, 155, 255, 0.15);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 41, 0.92),
            rgba(7, 11, 20, 0.94)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    text-align: center;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); }

    html[data-ticketly-theme="halloween"] .login-logo { display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    margin-bottom: 1.15rem;

    color: white;

    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em; }

    html[data-ticketly-theme="halloween"] .login-mark { width: 36px;
    height: 36px;

    border-radius: 10px;

    font-size: 0.9rem; }

    html[data-ticketly-theme="halloween"] .login-badge { display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    min-height: 27px;

    padding: 0 0.58rem;

    margin-bottom: 1rem;

    border: 1px solid rgba(165, 108, 255, 0.14);
    border-radius: 999px;

    background: rgba(165, 108, 255, 0.055);

    color: #929cf2;

    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em; }

    html[data-ticketly-theme="halloween"] .badge-dot { width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #8a95f8;
    box-shadow: 0 0 8px rgba(138, 149, 248, 0.6); }

    html[data-ticketly-theme="halloween"] .login-card h1 { color: var(--text-primary);

    font-size: clamp(1.9rem, 6vw, 2.45rem);
    line-height: 1.03;
    font-weight: 820;
    letter-spacing: -0.055em; }

    html[data-ticketly-theme="halloween"] .login-card h1 span { display: block;

    margin-top: 0.08rem;

    background: linear-gradient(
        110deg,
        #a9b0ff,
        #7180ed
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent; }

    html[data-ticketly-theme="halloween"] .login-description { margin: 0.85rem auto 0;

    max-width: 410px;

    color: var(--text-secondary);

    font-size: 0.8rem;
    line-height: 1.65; }

    html[data-ticketly-theme="halloween"] .discord-login-button { min-height: 48px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.6rem;

    margin-top: 1.35rem;

    padding: 0 1rem;

    border: 1px solid rgba(145, 154, 255, 0.22);
    border-radius: 11px;

    background: linear-gradient(
        135deg,
        #6f7bf0,
        #5965d9
    );

    color: white;

    text-decoration: none;

    font-size: 0.8rem;
    font-weight: 750;

    box-shadow:
        0 12px 30px rgba(69, 80, 190, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.15); }

    html[data-ticketly-theme="halloween"] .discord-login-button:hover { transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(69, 80, 190, 0.31),
        inset 0 1px 0 rgba(255, 255, 255, 0.18); }

    html[data-ticketly-theme="halloween"] .discord-icon { width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center; }

    html[data-ticketly-theme="halloween"] .discord-icon svg { width: 18px;
    height: 18px; }

    html[data-ticketly-theme="halloween"] .login-arrow { margin-left: auto;

    color: rgba(255, 255, 255, 0.72);

    transition: transform var(--transition); }

    html[data-ticketly-theme="halloween"] .discord-login-button:hover .login-arrow { transform: translateX(3px);
    color: white; }

    html[data-ticketly-theme="halloween"] .login-security { display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    margin-top: 0.9rem;

    color: var(--text-dim);

    font-size: 0.62rem; }

    html[data-ticketly-theme="halloween"] .security-icon { width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(89, 212, 155, 0.13);
    border-radius: 50%;

    background: rgba(89, 212, 155, 0.05);

    color: #69d6a5;

    font-size: 0.55rem; }

    html[data-ticketly-theme="halloween"] .login-divider { display: flex;
    align-items: center;
    gap: 0.65rem;

    margin: 1.5rem 0 1rem; }

    html[data-ticketly-theme="halloween"] .login-divider span { flex: 1;
    height: 1px;
    background: var(--border); }

    html[data-ticketly-theme="halloween"] .login-divider small { color: #4e5a6e;

    font-size: 0.53rem;
    font-weight: 750;
    letter-spacing: 0.1em; }

    html[data-ticketly-theme="halloween"] .login-footer { display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    color: #586377;

    font-size: 0.6rem; }

    html[data-ticketly-theme="halloween"] .login-footer span:first-child { color: #7c879b;
    font-weight: 750; }

/* =========================================================
   RESPONSIVE — 1000
========================================================= */

@media (max-width: 1000px) {
            html[data-ticketly-theme="halloween"] .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            html[data-ticketly-theme="halloween"] .server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   RESPONSIVE — 820
========================================================= */

@media (max-width: 820px) {
            html[data-ticketly-theme="halloween"] .topbar { padding: 0 1.15rem; }
            html[data-ticketly-theme="halloween"] .page-container { width: min(100% - 1.75rem, 720px);
        padding-top: 2rem; }
            html[data-ticketly-theme="halloween"] .page-intro { align-items: flex-start;
        flex-direction: column;
        gap: 1rem; }
            html[data-ticketly-theme="halloween"] .dashboard-actions { justify-content: flex-start; }
            html[data-ticketly-theme="halloween"] .content-grid,
        html[data-ticketly-theme="halloween"] .settings-grid { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .knowledge-form { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .knowledge-form .form-group:nth-child(2),
        html[data-ticketly-theme="halloween"] .knowledge-form .form-group:nth-child(3),
        html[data-ticketly-theme="halloween"] .knowledge-form > .primary-button { grid-column: auto; }
            html[data-ticketly-theme="halloween"] .server-grid { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   RESPONSIVE — 620
========================================================= */

@media (max-width: 620px) {
            html[data-ticketly-theme="halloween"] .topbar { min-height: 64px; }
            html[data-ticketly-theme="halloween"] .brand-divider,
        html[data-ticketly-theme="halloween"] .current-server { display: none; }
            html[data-ticketly-theme="halloween"] .brand-text span { display: none; }
            html[data-ticketly-theme="halloween"] .user-pill { display: none; }
            html[data-ticketly-theme="halloween"] .topbar-button { min-height: 32px;
        padding: 0 0.65rem; }
            html[data-ticketly-theme="halloween"] .page-container { width: calc(100% - 1.25rem);
        padding-top: 1.7rem; }
            html[data-ticketly-theme="halloween"] .page-intro h1 { font-size: 2rem; }
            html[data-ticketly-theme="halloween"] .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem; }
            html[data-ticketly-theme="halloween"] .overview-card { min-height: 70px;
        padding: 0.7rem;
        gap: 0.65rem; }
            html[data-ticketly-theme="halloween"] .overview-icon { width: 32px;
        height: 32px;
        border-radius: 9px; }
            html[data-ticketly-theme="halloween"] .panel-header { padding: 1rem; }
            html[data-ticketly-theme="halloween"] .dashboard-form { padding: 1rem; }
            html[data-ticketly-theme="halloween"] .knowledge-create { margin: 0.85rem;
        padding: 0.85rem; }
            html[data-ticketly-theme="halloween"] .knowledge-list { padding: 0 0.85rem 0.85rem; }
            html[data-ticketly-theme="halloween"] .knowledge-create-header { align-items: flex-start;
        flex-direction: column; }
            html[data-ticketly-theme="halloween"] .faq-card { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .faq-actions { justify-content: flex-end; }
            html[data-ticketly-theme="halloween"] .analytics-grid { grid-template-columns: 1fr 1fr;
        padding: 0.85rem; }
            html[data-ticketly-theme="halloween"] .server-section-header { align-items: flex-start;
        flex-direction: column; }
            html[data-ticketly-theme="halloween"] .empty-server-card { padding: 2.3rem 1rem; }
            html[data-ticketly-theme="halloween"] .login-page { padding: 1rem; }
            html[data-ticketly-theme="halloween"] .login-card { padding: 2.1rem 1.2rem 1.7rem;
        border-radius: 18px; }
}

/* =========================================================
   RESPONSIVE — 430
========================================================= */

@media (max-width: 430px) {
            html[data-ticketly-theme="halloween"] .overview-grid { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .analytics-grid { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .dashboard-actions { width: 100%; }
            html[data-ticketly-theme="halloween"] .dashboard-invite,
        html[data-ticketly-theme="halloween"] .status-badge { width: 100%;
        justify-content: center; }
            html[data-ticketly-theme="halloween"] .topbar-actions { gap: 0.35rem; }
            html[data-ticketly-theme="halloween"] .topbar-button { padding: 0 0.55rem;
        font-size: 0.64rem; }
            html[data-ticketly-theme="halloween"] .brand-mark { width: 32px;
        height: 32px; }
            html[data-ticketly-theme="halloween"] .server-card { padding: 0.85rem; }
            html[data-ticketly-theme="halloween"] .login-footer { flex-direction: column;
        gap: 0.15rem; }
            html[data-ticketly-theme="halloween"] .login-footer span:nth-child(2) { display: none; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
            html[data-ticketly-theme="halloween"] *,
        html[data-ticketly-theme="halloween"] *::before,
        html[data-ticketly-theme="halloween"] *::after { scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important; }
}

/* =========================================================
   SERVER SETUP / BOT MANAGEMENT
========================================================= */

    html[data-ticketly-theme="halloween"] .server-setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch; }

    html[data-ticketly-theme="halloween"] .server-setup-grid > .panel-card { min-width: 0;
    height: 100%; }

    html[data-ticketly-theme="halloween"] .bot-management-panel { scroll-margin-top: 90px; }

    html[data-ticketly-theme="halloween"] .support-editor { display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.016); }

    html[data-ticketly-theme="halloween"] .support-editor-header { display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem; }

    html[data-ticketly-theme="halloween"] .support-editor-header strong { display: block;
    color: var(--text-primary);
    font-size: 0.82rem; }

    html[data-ticketly-theme="halloween"] .support-editor-header span { display: block;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45; }

    html[data-ticketly-theme="halloween"] .support-counter { flex-shrink: 0;
    color: var(--text-dim) !important;
    font-family: Consolas, Monaco, monospace;
    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .support-editor textarea { min-height: 190px; }

    html[data-ticketly-theme="halloween"] .support-editor-actions { display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; }

    html[data-ticketly-theme="halloween"] .flash-stack { display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem; }

    html[data-ticketly-theme="halloween"] .flash-message { padding: 0.8rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    color: var(--text-secondary);
    font-size: 0.78rem; }

    html[data-ticketly-theme="halloween"] .flash-message.success { border-color: rgba(89, 212, 155, 0.18);
    background: rgba(89, 212, 155, 0.055);
    color: #8ce0ba; }

    html[data-ticketly-theme="halloween"] .flash-message.error { border-color: rgba(242, 118, 118, 0.18);
    background: rgba(242, 118, 118, 0.055);
    color: #f5aaaa; }

@media (max-width: 820px) {
            html[data-ticketly-theme="halloween"] .server-setup-grid { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .support-editor-actions { align-items: stretch;
        flex-direction: column; }
}

/* =========================================================
   PAGE TYPOGRAPHY GUARDS / RESPONSIVE FIT
   Kept in the shared stylesheet so dashboard templates remain markup-only.
========================================================= */

    html[data-ticketly-theme="halloween"] .page-container h1 { font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.08; }

    html[data-ticketly-theme="halloween"] .page-container h2 { font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.2; }

    html[data-ticketly-theme="halloween"] .page-container h3 { font-size: 1.08rem;
    line-height: 1.3; }

    html[data-ticketly-theme="halloween"] .page-container h4 { font-size: 1rem;
    line-height: 1.45; }

    html[data-ticketly-theme="halloween"] .page-container p { font-size: .92rem;
    line-height: 1.65; }

    html[data-ticketly-theme="halloween"] .page-container .panel-eyebrow,
    html[data-ticketly-theme="halloween"] .page-container .eyebrow { font-size: .68rem;
    letter-spacing: .13em; }

    html[data-ticketly-theme="halloween"] .page-container .overview-label { font-size: .72rem; }

    html[data-ticketly-theme="halloween"] .page-container .overview-card strong { font-size: 1.15rem;
    line-height: 1.25; }

    html[data-ticketly-theme="halloween"] .page-container .form-hint { font-size: .78rem;
    line-height: 1.5; }

    html[data-ticketly-theme="halloween"] .page-container label { font-size: .82rem; }

    html[data-ticketly-theme="halloween"] .page-container input,
    html[data-ticketly-theme="halloween"] .page-container select,
    html[data-ticketly-theme="halloween"] .page-container textarea,
    html[data-ticketly-theme="halloween"] .page-container button { font-size: .9rem; }

    html[data-ticketly-theme="halloween"] .page-container .ai-explainer-step strong,
    html[data-ticketly-theme="halloween"] .page-container .keyword-preview strong,
    html[data-ticketly-theme="halloween"] .page-container .deploy-preview strong { font-size: .92rem; }

    html[data-ticketly-theme="halloween"] .page-container .ai-explainer-step p,
    html[data-ticketly-theme="halloween"] .page-container .keyword-preview p,
    html[data-ticketly-theme="halloween"] .page-container .deploy-preview span { font-size: .82rem; }

    html[data-ticketly-theme="halloween"] .page-container .faq-answer { font-size: .88rem;
    line-height: 1.65; }

    html[data-ticketly-theme="halloween"] .page-container .keyword-tag { font-size: .72rem; }

    html[data-ticketly-theme="halloween"] .page-container .dashboard-footer { font-size: .78rem; }

    html[data-ticketly-theme="halloween"] .user-avatar-image { object-fit: cover;
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    background: transparent; }

/* The same class is used for the small green dot in the dashboard
   header and for the text label on a server card. Keep the two uses
   visually independent so "Ticketly Active" never gets forced into a
   7px box. */

    html[data-ticketly-theme="halloween"] .current-server .server-status { display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(89, 212, 155, 0.4); }

    html[data-ticketly-theme="halloween"] .server-card-top .server-status { display: block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 48%;
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--text-dim);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: .72rem;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .server-card-top { min-width: 0;
    gap: .65rem; }

    html[data-ticketly-theme="halloween"] .server-label { min-width: 0;
    flex: 1 1 auto; }

    html[data-ticketly-theme="halloween"] .server-label,
    html[data-ticketly-theme="halloween"] .server-card-top .server-status { overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .large-server-icon { object-fit: cover; }

    html[data-ticketly-theme="halloween"] .large-server-icon.server-icon-placeholder { object-fit: cover; }

    html[data-ticketly-theme="halloween"] .server-card-content,
    html[data-ticketly-theme="halloween"] .server-card-info { min-width: 0; }

    html[data-ticketly-theme="halloween"] .server-card-info h3 { min-width: 0; }

    html[data-ticketly-theme="halloween"] .server-card-footer { min-width: 0; }

    html[data-ticketly-theme="halloween"] .manage-button { min-width: 0; }

    html[data-ticketly-theme="halloween"] .manage-button > span:first-child { min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

/* Guild selection hero. These rules were previously absent from the
   shared sheet even though the markup already uses these classes. */

    html[data-ticketly-theme="halloween"] .server-selection-hero { display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 40, 0.86),
            rgba(10, 15, 27, 0.88)
        );
    box-shadow: var(--shadow-small); }

    html[data-ticketly-theme="halloween"] .server-selection-copy { min-width: 0; }

    html[data-ticketly-theme="halloween"] .server-selection-copy h2 { margin-top: .22rem;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.035em; }

    html[data-ticketly-theme="halloween"] .server-selection-copy p { max-width: 680px;
    margin-top: .45rem;
    color: var(--text-secondary);
    font-size: .8rem;
    line-height: 1.6; }

    html[data-ticketly-theme="halloween"] .server-selection-features { display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
    min-width: 0; }

    html[data-ticketly-theme="halloween"] .server-selection-feature { min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.018); }

    html[data-ticketly-theme="halloween"] .feature-icon { width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(165,108,255,.12);
    border-radius: 9px;
    background: rgba(165,108,255,.07);
    color: var(--accent-light);
    font-size: .82rem; }

    html[data-ticketly-theme="halloween"] .server-selection-feature div { min-width: 0; }

    html[data-ticketly-theme="halloween"] .server-selection-feature strong { display: block;
    color: var(--text-primary);
    font-size: .84rem; }

    html[data-ticketly-theme="halloween"] .server-selection-feature span:not(.feature-icon) { display: block;
    margin-top: .18rem;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.45; }

/* Knowledge/Smart Resolve pieces that are present in the markup but
   need their shared presentation kept independent from inline styles. */

    html[data-ticketly-theme="halloween"] .ai-status { display: inline-flex;
    align-items: center;
    gap: .42rem;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0 .55rem;
    border: 1px solid rgba(89,212,155,.14);
    border-radius: 999px;
    background: rgba(89,212,155,.045);
    color: #79d4aa;
    font-size: .67rem;
    font-weight: 700;
    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .ai-status-dot { width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 9px rgba(89,212,155,.38); }

    html[data-ticketly-theme="halloween"] .ai-explainer { display: grid;
    gap: 0;
    margin: 1rem 1.15rem 0;
    padding: .95rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.012); }

    html[data-ticketly-theme="halloween"] .ai-explainer-step { display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .7rem;
    min-width: 0; }

    html[data-ticketly-theme="halloween"] .step-number { width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(165,108,255,.06);
    color: var(--accent-light);
    font-family: Consolas, Monaco, monospace;
    font-size: .63rem;
    font-weight: 800; }

    html[data-ticketly-theme="halloween"] .ai-explainer-step > div:last-child { min-width: 0; }

    html[data-ticketly-theme="halloween"] .ai-explainer-step strong { display: block;
    color: var(--text-primary);
    font-size: .84rem; }

    html[data-ticketly-theme="halloween"] .ai-explainer-step p { margin-top: .2rem;
    color: var(--text-muted);
    font-size: .73rem;
    line-height: 1.55; }

    html[data-ticketly-theme="halloween"] .ai-guide-link { display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.5; }

    html[data-ticketly-theme="halloween"] .ai-explainer-line { width: 1px;
    min-height: 16px;
    margin: .2rem 0 .2rem 16px;
    background: var(--border); }

    html[data-ticketly-theme="halloween"] .keyword-preview { display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: flex-start;
    gap: .7rem;
    margin: 1rem 1.15rem 0;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.016); }

    html[data-ticketly-theme="halloween"] .keyword-preview-icon { width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(165,108,255,.12);
    border-radius: 9px;
    background: rgba(165,108,255,.07);
    color: var(--accent-light); }

    html[data-ticketly-theme="halloween"] .keyword-preview > div:last-child { min-width: 0; }

    html[data-ticketly-theme="halloween"] .keyword-preview strong { display: block;
    color: var(--text-primary);
    font-size: .84rem; }

    html[data-ticketly-theme="halloween"] .keyword-preview p { margin-top: .22rem;
    color: var(--text-muted);
    font-size: .73rem;
    line-height: 1.55; }

    html[data-ticketly-theme="halloween"] .support-message-panel { margin-top: 1rem; }

@media (max-width: 820px) {
            html[data-ticketly-theme="halloween"] .server-selection-hero { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
            html[data-ticketly-theme="halloween"] .page-container h1 { font-size: 2rem; }
            html[data-ticketly-theme="halloween"] .page-container h2 { font-size: 1.3rem; }
            html[data-ticketly-theme="halloween"] .server-selection-hero { padding: 1rem; }
            html[data-ticketly-theme="halloween"] .server-card-top { align-items: flex-start;
        flex-wrap: wrap; }
            html[data-ticketly-theme="halloween"] .server-card-top .server-status { max-width: 100%;
        flex: 0 1 100%;
        text-align: left; }
            html[data-ticketly-theme="halloween"] .panel-header { flex-wrap: wrap; }
            html[data-ticketly-theme="halloween"] .ai-status { max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis; }
            html[data-ticketly-theme="halloween"] .server-selection-feature span:not(.feature-icon) { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
            html[data-ticketly-theme="halloween"] .server-card-content { align-items: flex-start; }
            html[data-ticketly-theme="halloween"] .large-server-icon { width: 48px;
        height: 48px;
        border-radius: 12px; }
            html[data-ticketly-theme="halloween"] .server-card-top .server-status { flex-basis: 100%; }
            html[data-ticketly-theme="halloween"] .ai-explainer,
        html[data-ticketly-theme="halloween"] .keyword-preview { margin-left: .85rem;
        margin-right: .85rem; }
}

/* Preserve the original page-level sizing from the templates. */

    html[data-ticketly-theme="halloween"] .server-card h3 { font-size: 1.08rem;
    margin: 0; }

    html[data-ticketly-theme="halloween"] .server-card .server-id,
    html[data-ticketly-theme="halloween"] .server-card .server-status,
    html[data-ticketly-theme="halloween"] .server-access-label { font-size: .72rem; }

    html[data-ticketly-theme="halloween"] .empty-server-card h2 { font-size: 1.55rem; }

    html[data-ticketly-theme="halloween"] .empty-server-card p { font-size: .86rem; }

/* =========================================================
   TICKET TOPICS / SUPPORT MESSAGE CONTROLS
   ========================================================= */

    html[data-ticketly-theme="halloween"] .ticket-topics-panel { position: relative;
    overflow: hidden; }

    html[data-ticketly-theme="halloween"] .ticket-topics-panel::before { content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--accent-light),
        var(--accent-dark)
    );
    opacity: 0.75;
    pointer-events: none; }

    html[data-ticketly-theme="halloween"] .ticket-topics-panel .panel-header,
    html[data-ticketly-theme="halloween"] .ticket-topics-panel .dashboard-form { position: relative;
    z-index: 1; }

    html[data-ticketly-theme="halloween"] .topic-list { display: grid;
    gap: 0.7rem; }

    html[data-ticketly-theme="halloween"] .topic-row { display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.018); }

    html[data-ticketly-theme="halloween"] .topic-row .form-group { min-width: 0; }

    html[data-ticketly-theme="halloween"] .topic-row .form-group label { margin-bottom: 0; }

    html[data-ticketly-theme="halloween"] .topic-remove { min-width: 72px;
    min-height: 40px; }

    html[data-ticketly-theme="halloween"] .topic-config-footer,
    html[data-ticketly-theme="halloween"] .support-message-meta { display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; }

    html[data-ticketly-theme="halloween"] .support-message-meta { margin-top: 0.2rem; }

    html[data-ticketly-theme="halloween"] .character-counter { flex-shrink: 0;
    color: var(--text-dim);
    font-family: Consolas, Monaco, monospace;
    font-size: 0.68rem;
    white-space: nowrap; }

@media (max-width: 700px) {
            html[data-ticketly-theme="halloween"] .topic-row { grid-template-columns: 1fr; }
            html[data-ticketly-theme="halloween"] .topic-remove { width: 100%; }
            html[data-ticketly-theme="halloween"] .topic-config-footer,
        html[data-ticketly-theme="halloween"] .support-message-meta { align-items: flex-start;
        flex-direction: column; }
}

/* =========================================================
   LANGUAGE SWITCHER
========================================================= */

    html[data-ticketly-theme="halloween"] .ticketly-language-switcher { min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.55rem 0 0.65rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary); }

    html[data-ticketly-theme="halloween"] .ticketly-language-label { color: var(--text-dim);
    font-size: 0.62rem;
    font-weight: 750;
    white-space: nowrap; }

    html[data-ticketly-theme="halloween"] .ticketly-language-select { width: auto;
    min-width: 86px;
    min-height: 30px;
    padding: 0 1.45rem 0 0.35rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer; }

    html[data-ticketly-theme="halloween"] .ticketly-language-select:hover,
    html[data-ticketly-theme="halloween"] .ticketly-language-select:focus { border: 0;
    background: transparent;
    box-shadow: none; }

    html[data-ticketly-theme="halloween"] .ticketly-language-select option { background: #0b101c;
    color: var(--text-primary); }

@media (max-width: 620px) {
            html[data-ticketly-theme="halloween"] .ticketly-language-label { display: none; }
            html[data-ticketly-theme="halloween"] .ticketly-language-switcher { padding: 0 0.3rem 0 0.45rem; }
            html[data-ticketly-theme="halloween"] .ticketly-language-select { min-width: 76px;
        font-size: 0.64rem; }
}

@media (max-width: 430px) {
            html[data-ticketly-theme="halloween"] .ticketly-language-switcher { min-height: 32px; }
            html[data-ticketly-theme="halloween"] .ticketly-language-select { min-width: 70px;
        padding-right: 1.15rem;
        font-size: 0.6rem; }
}

/* =========================================================
   HALLOWEEN THEME — SEASONAL ENHANCEMENTS
========================================================= */

    html[data-ticketly-theme="halloween"] body::before { background-image:
        linear-gradient(rgba(255, 122, 47, 0.010) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165, 108, 255, 0.014) 1px, transparent 1px); }

    html[data-ticketly-theme="halloween"] body::after { content: "✦";
    position: fixed;
    right: 18px;
    bottom: 12px;
    z-index: -1;
    color: rgba(255, 122, 47, 0.08);
    font-size: 34px;
    pointer-events: none; }

    html[data-ticketly-theme="halloween"] .ambient-one { background: #ff6a24; }

    html[data-ticketly-theme="halloween"] .ambient-two { background: #8b4bd9; }

    html[data-ticketly-theme="halloween"] .ambient-three { background: #ff7a2f; }

    html[data-ticketly-theme="halloween"] .topbar::after { background:
        linear-gradient(
            90deg,
            transparent,
            rgba(165,108,255,.30),
            rgba(255,122,47,.22),
            transparent
        ); }

    html[data-ticketly-theme="halloween"] .eyebrow,
    html[data-ticketly-theme="halloween"] .panel-eyebrow { color: var(--halloween-orange-light); }

    html[data-ticketly-theme="halloween"] .page-intro h1 span { background:
        linear-gradient(
            135deg,
            var(--accent-light),
            var(--halloween-orange-light)
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; }

    html[data-ticketly-theme="halloween"] .dashboard-invite,
    html[data-ticketly-theme="halloween"] .invite-button { border-color: rgba(255,122,47,.23);
    background:
        linear-gradient(
            135deg,
            rgba(255,122,47,.10),
            rgba(165,108,255,.08)
        ); }

    html[data-ticketly-theme="halloween"] .dashboard-invite:hover,
    html[data-ticketly-theme="halloween"] .invite-button:hover { border-color: rgba(255,122,47,.40);
    background:
        linear-gradient(
            135deg,
            rgba(255,122,47,.15),
            rgba(165,108,255,.12)
        ); }

    html[data-ticketly-theme="halloween"] .panel-card::before,
    html[data-ticketly-theme="halloween"] .server-card::before,
    html[data-ticketly-theme="halloween"] .discord-server-card::before { background:
        linear-gradient(
            90deg,
            transparent,
            rgba(165,108,255,.28),
            rgba(255,122,47,.22),
            transparent
        ); }

    html[data-ticketly-theme="halloween"] .overview-icon,
    html[data-ticketly-theme="halloween"] .panel-icon,
    html[data-ticketly-theme="halloween"] .feature-icon,
    html[data-ticketly-theme="halloween"] .large-server-icon,
    html[data-ticketly-theme="halloween"] .discord-server-icon { background:
        linear-gradient(
            145deg,
            rgba(165,108,255,.13),
            rgba(255,122,47,.065)
        ); }

    html[data-ticketly-theme="halloween"] .primary-button,
    html[data-ticketly-theme="halloween"] .blue-button,
    html[data-ticketly-theme="halloween"] .discord-login-button { background:
        linear-gradient(
            135deg,
            #a56cff,
            #7b42d0
        ); }

    html[data-ticketly-theme="halloween"] .primary-button:hover,
    html[data-ticketly-theme="halloween"] .blue-button:hover,
    html[data-ticketly-theme="halloween"] .discord-login-button:hover { background:
        linear-gradient(
            135deg,
            #b07cff,
            #8a4ddd
        ); }

    html[data-ticketly-theme="halloween"] input:focus,
    html[data-ticketly-theme="halloween"] select:focus,
    html[data-ticketly-theme="halloween"] textarea:focus { border-color: rgba(165,108,255,.45);
    box-shadow:
        0 0 0 3px rgba(165,108,255,.07),
        0 0 18px rgba(255,122,47,.025); }

    html[data-ticketly-theme="halloween"] .manage-button:hover .button-arrow,
    html[data-ticketly-theme="halloween"] .join-servers-button .button-arrow,
    html[data-ticketly-theme="halloween"] .discord-server-button span { color: var(--halloween-orange-light); }

/* =========================================================
   GUILD SELECTION HERO — HALLOWEEN
========================================================= */

    html[data-ticketly-theme="halloween"] .server-selection-hero { position: relative;
    overflow: hidden;
    background:
        radial-gradient(400px circle at 100% 0%, rgba(165,108,255,.07), transparent 70%),
        radial-gradient(350px circle at 0% 100%, rgba(255,122,47,.045), transparent 70%),
        linear-gradient(145deg, rgba(20,14,29,.91), rgba(10,7,14,.93)); }

    html[data-ticketly-theme="halloween"] .server-selection-hero::after { content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 18%, rgba(255,122,47,.035), transparent 22%),
        radial-gradient(circle at 12% 85%, rgba(165,108,255,.035), transparent 25%); }

    html[data-ticketly-theme="halloween"] .server-selection-copy,
    html[data-ticketly-theme="halloween"] .server-selection-features { position: relative;
    z-index: 1; }

/* =========================================================
   TICKET TOPICS — HALLOWEEN ACCENT
========================================================= */

    html[data-ticketly-theme="halloween"] .ticket-topics-panel::before { background:
        linear-gradient(
            180deg,
            var(--halloween-orange-light),
            var(--accent-dark),
            var(--accent-light)
        ); }

/* =========================================================
   JOIN / DIRECTORY BUTTONS — HALLOWEEN
========================================================= */

    html[data-ticketly-theme="halloween"] .join-servers-button,
    html[data-ticketly-theme="halloween"] .discord-server-button { border-color: rgba(255,122,47,.22);
    background:
        linear-gradient(
            135deg,
            rgba(255,122,47,.065),
            rgba(165,108,255,.07)
        ); }

    html[data-ticketly-theme="halloween"] .join-servers-button:hover,
    html[data-ticketly-theme="halloween"] .discord-server-button:hover { border-color: rgba(255,122,47,.38);
    background:
        linear-gradient(
            135deg,
            rgba(255,122,47,.12),
            rgba(165,108,255,.11)
        ); }

/* =========================================================
   HALLOWEEN SEASONAL NOTICE
========================================================= */

    html[data-ticketly-theme="halloween"] .halloween-notice { position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px; }

    html[data-ticketly-theme="halloween"] .halloween-notice[hidden] { display: none !important; }

    html[data-ticketly-theme="halloween"] .halloween-notice-backdrop { position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(143,84,219,.13), transparent 34%),
        rgba(3,2,7,.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); }

    html[data-ticketly-theme="halloween"] .halloween-notice-modal { position: relative;
    width: min(560px,100%);
    padding: 38px 38px 34px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,122,47,.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 10% 0%, rgba(143,84,219,.14), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(255,122,47,.10), transparent 32%),
        linear-gradient(145deg, rgba(20,15,29,.98), rgba(9,7,14,.985));
    box-shadow:
        0 40px 100px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,255,255,.025) inset,
        0 0 70px rgba(143,84,219,.10);
    animation: halloweenNoticeIn 260ms ease-out both; }

    html[data-ticketly-theme="halloween"] .halloween-notice-modal::before { content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.025) 45%, transparent 72%); }

    html[data-ticketly-theme="halloween"] .halloween-notice-modal::after { content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,122,47,.72), rgba(166,108,255,.82), transparent);
    opacity: .85; }

    html[data-ticketly-theme="halloween"] .halloween-notice-close { position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: var(--text-muted);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color var(--transition),
        background var(--transition),
        color var(--transition),
        transform var(--transition); }

    html[data-ticketly-theme="halloween"] .halloween-notice-close:hover { border-color: rgba(255,122,47,.30);
    background: rgba(255,122,47,.08);
    color: var(--text-primary);
    transform: rotate(4deg); }

    html[data-ticketly-theme="halloween"] .halloween-notice-close:focus-visible,
    html[data-ticketly-theme="halloween"] .halloween-notice-confirm:focus-visible { outline: 2px solid rgba(166,108,255,.75);
    outline-offset: 3px; }

    html[data-ticketly-theme="halloween"] .halloween-notice-header { position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px; }

    html[data-ticketly-theme="halloween"] .halloween-notice-icon { width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,122,47,.20);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,122,47,.14), transparent 70%),
        rgba(255,122,47,.055);
    box-shadow:
        0 10px 25px rgba(0,0,0,.16),
        inset 0 0 20px rgba(255,122,47,.04); }

    html[data-ticketly-theme="halloween"] .halloween-notice-icon span { font-size: 22px; filter: saturate(.88); }

    html[data-ticketly-theme="halloween"] .halloween-notice-eyebrow { color: #ff9a61;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase; }

    html[data-ticketly-theme="halloween"] .halloween-notice-modal h2 { position: relative;
    z-index: 2;
    margin: 0 0 14px;
    color: var(--text-primary);
    font-size: clamp(27px,4vw,36px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em; }

    html[data-ticketly-theme="halloween"] .halloween-notice-description { position: relative;
    z-index: 2;
    max-width: 470px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75; }

    html[data-ticketly-theme="halloween"] .halloween-notice-note { position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
    padding: 13px 14px;
    border: 1px solid rgba(166,108,255,.11);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(143,84,219,.055), rgba(255,122,47,.035));
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55; }

    html[data-ticketly-theme="halloween"] .halloween-notice-note-dot { width: 7px;
    min-width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--halloween-orange);
    box-shadow:
        0 0 0 4px rgba(255,122,47,.08),
        0 0 18px rgba(255,122,47,.22); }

    html[data-ticketly-theme="halloween"] .halloween-notice-confirm { position: relative;
    z-index: 2;
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 0 17px 0 18px;
    border: 1px solid rgba(255,122,47,.24);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(166,108,255,.14), rgba(255,122,47,.11));
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 12px 30px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.035);
    transition:
        border-color var(--transition),
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition); }

    html[data-ticketly-theme="halloween"] .halloween-notice-confirm:hover { border-color: rgba(255,122,47,.42);
    background: linear-gradient(135deg, rgba(166,108,255,.19), rgba(255,122,47,.15));
    transform: translateY(-2px);
    box-shadow:
        0 16px 34px rgba(0,0,0,.22),
        0 0 30px rgba(255,122,47,.08); }

    html[data-ticketly-theme="halloween"] .halloween-notice-confirm:active { transform: translateY(0); }

    html[data-ticketly-theme="halloween"] .halloween-notice-confirm .button-arrow { color: var(--halloween-orange-light); font-size: 18px; transition: transform var(--transition); }

    html[data-ticketly-theme="halloween"] .halloween-notice-confirm:hover .button-arrow { transform: translateX(3px); }

    html[data-ticketly-theme="halloween"] .halloween-notice-web { position: absolute;
    width: 170px;
    height: 170px;
    pointer-events: none;
    z-index: 1;
    opacity: .34;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23d7b9ff' stroke-opacity='.34' stroke-width='1'%3E%3Cpath d='M2 2 Q48 22 88 88 T178 178'/%3E%3Cpath d='M2 35 Q48 44 90 90 T145 178'/%3E%3Cpath d='M35 2 Q44 48 90 90 T178 145'/%3E%3Cpath d='M2 70 Q48 65 90 90 T178 110'/%3E%3Cpath d='M70 2 Q65 48 90 90 T110 178'/%3E%3Cpath d='M110 2 Q103 50 90 90 T70 178'/%3E%3Cpath d='M178 35 Q132 44 90 90 T2 145'/%3E%3Cpath d='M178 70 Q132 65 90 90 T2 110'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain; }

    html[data-ticketly-theme="halloween"] .halloween-notice-web-left { left: -42px; bottom: -44px; transform: rotate(7deg); }

    html[data-ticketly-theme="halloween"] .halloween-notice-web-right { top: -48px; right: -48px; transform: rotate(188deg); opacity: .26; }

    html[data-ticketly-theme="halloween"] body.halloween-notice-open { overflow: hidden; }

@keyframes halloweenNoticeIn { from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 620px) {
            html[data-ticketly-theme="halloween"] .halloween-notice { padding: 16px; }
            html[data-ticketly-theme="halloween"] .halloween-notice-modal { padding: 32px 22px 22px; border-radius: 18px; }
            html[data-ticketly-theme="halloween"] .halloween-notice-modal h2 { font-size: 27px; }
            html[data-ticketly-theme="halloween"] .halloween-notice-description { font-size: 13px; line-height: 1.68; }
            html[data-ticketly-theme="halloween"] .halloween-notice-web { width: 130px; height: 130px; }
            html[data-ticketly-theme="halloween"] .halloween-notice-close { top: 12px; right: 12px; }
}

/* =========================================================
   CLASSIC THEME
   The original Ticketly palette remains available as a real
   theme instead of requiring a separate stylesheet.
========================================================= */

    html[data-ticketly-theme="halloween"] body.classic-theme { --bg: #080c15;
    --bg-deep: #050811;
    --surface: rgba(16,23,39,.82);
    --surface-soft: rgba(255,255,255,.025);
    --surface-hover: rgba(255,255,255,.045);
    --accent: #707bf2;
    --accent-light: #9ca5ff;
    --accent-dark: #5964df;
    --accent-soft: rgba(112,123,242,.10);
    --green: #59d49b;
    --red: #f27676;
    --yellow: #e8c76a;
    --text-primary: #f5f7fc;
    --text-secondary: #a8b1c3;
    --text-muted: #717c91;
    --text-dim: #535e73;
    --border: rgba(164,174,255,.10);
    --border-strong: rgba(164,174,255,.17);
    --shadow: 0 18px 50px rgba(0,0,0,.22);
    --shadow-small: 0 8px 24px rgba(0,0,0,.16); }

    html[data-ticketly-theme="halloween"] body.classic-theme { background:
        radial-gradient(850px circle at 50% -20%, rgba(101,114,242,.09), transparent 62%),
        radial-gradient(650px circle at 0% 45%, rgba(70,91,190,.045), transparent 65%),
        linear-gradient(180deg,#080c15 0%,#070b13 55%,#050811 100%); }

    html[data-ticketly-theme="halloween"] body.classic-theme::before { background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px); }

    html[data-ticketly-theme="halloween"] body.classic-theme::after { color: rgba(112,123,242,.045); }

    html[data-ticketly-theme="halloween"] body.classic-theme .ambient { display: none; }

    html[data-ticketly-theme="halloween"] body.classic-theme .topbar::after { background: linear-gradient(90deg,transparent,rgba(112,123,242,.32),transparent); }

    html[data-ticketly-theme="halloween"] body.classic-theme .eyebrow,
    html[data-ticketly-theme="halloween"] body.classic-theme .panel-eyebrow { color: var(--accent-light); }

    html[data-ticketly-theme="halloween"] body.classic-theme .page-intro h1 span { background: linear-gradient(135deg,#9ca5ff,#707bf2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; }

    html[data-ticketly-theme="halloween"] body.classic-theme .dashboard-invite,
    html[data-ticketly-theme="halloween"] body.classic-theme .invite-button,
    html[data-ticketly-theme="halloween"] body.classic-theme .join-servers-button,
    html[data-ticketly-theme="halloween"] body.classic-theme .discord-server-button { border-color: rgba(112,123,242,.18);
    background: linear-gradient(135deg,rgba(112,123,242,.075),rgba(89,100,223,.045)); }

    html[data-ticketly-theme="halloween"] body.classic-theme .dashboard-invite:hover,
    html[data-ticketly-theme="halloween"] body.classic-theme .invite-button:hover,
    html[data-ticketly-theme="halloween"] body.classic-theme .join-servers-button:hover,
    html[data-ticketly-theme="halloween"] body.classic-theme .discord-server-button:hover { border-color: rgba(112,123,242,.34);
    background: linear-gradient(135deg,rgba(112,123,242,.13),rgba(89,100,223,.08)); }

    html[data-ticketly-theme="halloween"] body.classic-theme .overview-icon,
    html[data-ticketly-theme="halloween"] body.classic-theme .panel-icon,
    html[data-ticketly-theme="halloween"] body.classic-theme .feature-icon,
    html[data-ticketly-theme="halloween"] body.classic-theme .large-server-icon,
    html[data-ticketly-theme="halloween"] body.classic-theme .discord-server-icon { background: linear-gradient(145deg,rgba(112,123,242,.13),rgba(89,100,223,.07)); }

    html[data-ticketly-theme="halloween"] body.classic-theme .panel-card::before,
    html[data-ticketly-theme="halloween"] body.classic-theme .server-card::before,
    html[data-ticketly-theme="halloween"] body.classic-theme .discord-server-card::before { background: linear-gradient(90deg,transparent,rgba(112,123,242,.28),transparent); }

    html[data-ticketly-theme="halloween"] body.classic-theme .primary-button,
    html[data-ticketly-theme="halloween"] body.classic-theme .blue-button,
    html[data-ticketly-theme="halloween"] body.classic-theme .discord-login-button { background: linear-gradient(135deg,#707bf2,#5964df); }

    html[data-ticketly-theme="halloween"] body.classic-theme .primary-button:hover,
    html[data-ticketly-theme="halloween"] body.classic-theme .blue-button:hover,
    html[data-ticketly-theme="halloween"] body.classic-theme .discord-login-button:hover { background: linear-gradient(135deg,#7d87f5,#636de5); }

    html[data-ticketly-theme="halloween"] body.classic-theme input:focus,
    html[data-ticketly-theme="halloween"] body.classic-theme select:focus,
    html[data-ticketly-theme="halloween"] body.classic-theme textarea:focus { border-color: rgba(112,123,242,.45);
    box-shadow: 0 0 0 3px rgba(112,123,242,.08); }

    html[data-ticketly-theme="halloween"] body.classic-theme .ticket-topics-panel::before { background: linear-gradient(180deg,var(--accent-light),var(--accent-dark),var(--accent)); }

    html[data-ticketly-theme="halloween"] body.classic-theme .halloween-notice-web { display: none; }

@media (prefers-reduced-motion: reduce) {
            html[data-ticketly-theme="halloween"] .halloween-notice-modal { animation: none; }
            html[data-ticketly-theme="halloween"] .halloween-notice-close,
        html[data-ticketly-theme="halloween"] .halloween-notice-confirm,
        html[data-ticketly-theme="halloween"] .halloween-notice-confirm .button-arrow { transition: none; }
}

/* =========================================================
   TICKETLY — RANDOM HALLOWEEN EVENT SYSTEM
   Visual-only / no external assets / reduced-motion aware
========================================================= */

    html[data-ticketly-theme="halloween"] .ticketly-halloween-events { position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate; }

    html[data-ticketly-theme="halloween"] .ticketly-halloween-events:empty { display: none; }

    html[data-ticketly-theme="halloween"] .halloween-event { position: absolute;
    pointer-events: none;
    user-select: none; }

/* Spider descending from the ceiling. */

    html[data-ticketly-theme="halloween"] .halloween-spider-event { top: 0;
    left: var(--spider-x);
    width: 74px;
    height: 100vh;
    transform: translateX(-50%); }

    html[data-ticketly-theme="halloween"] .halloween-spider-thread { position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    transform-origin: top;
    background: linear-gradient(to bottom, rgba(239,229,248,.46), rgba(239,229,248,.12));
    box-shadow: 0 0 5px rgba(255,255,255,.05);
    animation: halloweenSpiderThread 4.3s cubic-bezier(.22,.7,.2,1) both; }

    html[data-ticketly-theme="halloween"] .halloween-spider-body { position: absolute;
    left: 50%;
    top: 0;
    width: 62px;
    height: 62px;
    transform: translate(-50%, -100%);
    color: #100c15;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.45));
    animation: halloweenSpiderDrop 4.3s cubic-bezier(.22,.7,.2,1) both; }

    html[data-ticketly-theme="halloween"] .halloween-spider-body svg { width: 100%;
    height: 100%; }

@keyframes halloweenSpiderThread { 0%, 8% { transform: scaleY(0); opacity: 0; }
    28%, 70% { transform: scaleY(1); opacity: .95; }
    91%, 100% { transform: scaleY(0); opacity: 0; } }

@keyframes halloweenSpiderDrop { 0% { transform: translate(-50%, -110%); opacity: 0; }
    18% { transform: translate(-50%, -4%); opacity: 1; }
    29%, 68% { transform: translate(-50%, calc(min(48vh, 360px))); opacity: 1; }
    83% { transform: translate(-50%, -2%); opacity: 1; }
    100% { transform: translate(-50%, -110%); opacity: 0; } }

/* Brief corner web. */

    html[data-ticketly-theme="halloween"] .halloween-web-event { width: 220px;
    height: 220px;
    opacity: 0;
    background:
        radial-gradient(circle at center, transparent 0 13%, rgba(230,218,244,.17) 13.4% 13.8%, transparent 14.2%),
        repeating-conic-gradient(from 0deg at 0 0, rgba(230,218,244,.18) 0deg 1deg, transparent 1deg 11deg);
    mask-image: radial-gradient(circle at 0 0, black 0 66%, transparent 76%);
    -webkit-mask-image: radial-gradient(circle at 0 0, black 0 66%, transparent 76%);
    animation: halloweenWebReveal 3.3s ease both; }

    html[data-ticketly-theme="halloween"] .halloween-web-event::before,
    html[data-ticketly-theme="halloween"] .halloween-web-event::after { content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 0 0, transparent 0 20px, rgba(230,218,244,.15) 21px 22px, transparent 23px 32px); }

    html[data-ticketly-theme="halloween"] .halloween-web-event::after { transform: rotate(11deg) scale(.98);
    opacity: .55; }

    html[data-ticketly-theme="halloween"] .halloween-web-event.top-left { top: -20px; left: -20px; }

    html[data-ticketly-theme="halloween"] .halloween-web-event.top-right { top: -20px; right: -20px; transform: scaleX(-1); }

    html[data-ticketly-theme="halloween"] .halloween-web-event.bottom-left { bottom: -20px; left: -20px; transform: scaleY(-1); }

    html[data-ticketly-theme="halloween"] .halloween-web-event.bottom-right { bottom: -20px; right: -20px; transform: scale(-1); }

@keyframes halloweenWebReveal { 0%, 100% { opacity: 0; transform: scale(.92); }
    20%, 74% { opacity: .55; transform: scale(1); } }

/* Bats crossing the viewport. */

    html[data-ticketly-theme="halloween"] .halloween-bats-event { top: var(--bat-y);
    left: -130px;
    width: 130px;
    height: 65px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #120e18;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.35));
    animation: halloweenBatsAcross var(--bat-speed) linear both; }

    html[data-ticketly-theme="halloween"] .halloween-bats-event svg { width: 55px;
    height: 35px;
    opacity: .9;
    transform: scale(var(--bat-scale));
    animation: halloweenBatWing .42s ease-in-out var(--bat-delay) infinite alternate; }

@keyframes halloweenBatsAcross { from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 260px)); } }

@keyframes halloweenBatWing { from { transform: scale(var(--bat-scale)) rotate(-3deg); }
    to { transform: scale(var(--bat-scale)) rotate(5deg) translateY(-4px); } }

/* Very short eye apparition. */

    html[data-ticketly-theme="halloween"] .halloween-eye-event { left: var(--eye-x);
    top: var(--eye-y);
    width: 76px;
    height: 42px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: halloweenEyeAppear 2.2s ease both; }

    html[data-ticketly-theme="halloween"] .halloween-eye-shape { position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255,154,92,.26);
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    background: radial-gradient(circle, rgba(255,122,47,.18) 0 8%, rgba(8,5,12,.9) 10% 100%);
    box-shadow: 0 0 30px rgba(255,122,47,.07); }

    html[data-ticketly-theme="halloween"] .halloween-eye-shape::before,
    html[data-ticketly-theme="halloween"] .halloween-eye-shape::after { content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(255,154,92,.16); }

    html[data-ticketly-theme="halloween"] .halloween-eye-shape::before { top: 17%; transform: rotate(10deg); }

    html[data-ticketly-theme="halloween"] .halloween-eye-shape::after { bottom: 17%; transform: rotate(-10deg); }

    html[data-ticketly-theme="halloween"] .halloween-eye-shape i { position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 15px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ff8b4d;
    box-shadow: 0 0 15px rgba(255,122,47,.38); }

@keyframes halloweenEyeAppear { 0%, 20%, 86%, 100% { opacity: 0; }
    28%, 48% { opacity: .72; }
    52% { opacity: .28; }
    60%, 78% { opacity: .62; } }

/* Shadow passing across an edge. */

    html[data-ticketly-theme="halloween"] .halloween-shadow-event { top: 0;
    width: 38vw;
    min-width: 260px;
    max-width: 560px;
    height: 100vh;
    opacity: 0;
    filter: blur(14px);
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.48), rgba(0,0,0,.05), transparent); }

    html[data-ticketly-theme="halloween"] .halloween-shadow-event.shadow-left { left: -42vw; animation: halloweenShadowLeft 2.6s ease both; }

    html[data-ticketly-theme="halloween"] .halloween-shadow-event.shadow-right { right: -42vw; transform: scaleX(-1); animation: halloweenShadowLeft 2.6s ease both; }

@keyframes halloweenShadowLeft { 0% { transform: translateX(0); opacity: 0; }
    25% { opacity: .55; }
    72% { opacity: .26; }
    100% { transform: translateX(170vw); opacity: 0; } }

/* Warm, distant ambient glow. */

    html[data-ticketly-theme="halloween"] .halloween-glow-event { left: var(--glow-x);
    top: var(--glow-y);
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,47,.13), rgba(255,122,47,.035) 32%, transparent 70%);
    filter: blur(4px);
    opacity: 0;
    animation: halloweenGlowPulse 2.8s ease both; }

@keyframes halloweenGlowPulse { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
    30%, 68% { opacity: .75; transform: translate(-50%, -50%) scale(1); } }

/* Tiny candle-like flame near an edge. */

    html[data-ticketly-theme="halloween"] .halloween-candle-event { bottom: 7vh;
    width: 18px;
    height: 48px;
    opacity: 0; }

    html[data-ticketly-theme="halloween"] .halloween-candle-event.candle-left { left: 5vw; }

    html[data-ticketly-theme="halloween"] .halloween-candle-event.candle-right { right: 5vw; }

    html[data-ticketly-theme="halloween"] .candle-core { position: absolute;
    left: 50%;
    bottom: 0;
    width: 12px;
    height: 28px;
    transform: translateX(-50%);
    border-radius: 3px 3px 2px 2px;
    background: linear-gradient(90deg, #28202e, #4b374e, #211923);
    box-shadow: 0 4px 15px rgba(0,0,0,.45); }

    html[data-ticketly-theme="halloween"] .candle-flame { position: absolute;
    left: 50%;
    bottom: 23px;
    width: 10px;
    height: 17px;
    transform: translateX(-50%) rotate(3deg);
    border-radius: 60% 40% 60% 40%;
    background: #ff8b4d;
    box-shadow: 0 0 16px rgba(255,122,47,.35), 0 0 30px rgba(255,122,47,.14);
    animation: halloweenFlame .22s ease-in-out infinite alternate; }

@keyframes halloweenFlame { from { transform: translateX(-50%) rotate(-4deg) scale(.9); opacity: .7; }
    to { transform: translateX(-50%) rotate(5deg) scale(1.08); opacity: 1; } }

    html[data-ticketly-theme="halloween"] .halloween-candle-event { animation: halloweenCandleAppear 4.2s ease both; }

@keyframes halloweenCandleAppear { 0%, 100% { opacity: 0; }
    18%, 80% { opacity: .62; } }

/* Rare spider walking in from an edge. */

    html[data-ticketly-theme="halloween"] .halloween-edge-spider-event { top: var(--edge-y);
    width: 38px;
    height: 38px;
    color: #100c15;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
    opacity: 0; }

    html[data-ticketly-theme="halloween"] .halloween-edge-spider-event svg { width: 100%; height: 100%; }

    html[data-ticketly-theme="halloween"] .halloween-edge-spider-event.edge-from-left { left: -50px; animation: halloweenEdgeLeft 4.7s ease both; }

    html[data-ticketly-theme="halloween"] .halloween-edge-spider-event.edge-from-right { right: -50px; transform: scaleX(-1); animation: halloweenEdgeRight 4.7s ease both; }

@keyframes halloweenEdgeLeft { 0%, 8% { left: -50px; opacity: 0; }
    18% { opacity: .85; }
    70% { left: 74px; opacity: .85; }
    100% { left: -50px; opacity: 0; } }

@keyframes halloweenEdgeRight { 0%, 8% { right: -50px; opacity: 0; }
    18% { opacity: .85; }
    70% { right: 74px; opacity: .85; }
    100% { right: -50px; opacity: 0; } }

/* Extremely rare micro-flicker. */

    html[data-ticketly-theme="halloween"] .halloween-glitch-event { inset: 0;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255,154,92,.035) 18.1% 18.25%, transparent 18.4% 63%, rgba(165,108,255,.035) 63.1% 63.25%, transparent 63.4%),
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.012) 6px, transparent 7px);
    mix-blend-mode: screen;
    animation: halloweenMicroGlitch .9s steps(2, end) both; }

@keyframes halloweenMicroGlitch { 0%, 62%, 100% { opacity: 0; transform: translateX(0); }
    66% { opacity: .55; transform: translateX(-2px); }
    70% { opacity: .12; transform: translateX(2px); }
    74% { opacity: .35; transform: translateX(-1px); } }

/* Never show random effects while the classic theme is selected. */

    html[data-ticketly-theme="halloween"] body.classic-theme .ticketly-halloween-events { display: none; }

@media (max-width: 620px) {
            html[data-ticketly-theme="halloween"] .halloween-spider-body { width: 52px; height: 52px; }
            html[data-ticketly-theme="halloween"] .halloween-web-event { width: 170px; height: 170px; }
            html[data-ticketly-theme="halloween"] .halloween-shadow-event { width: 55vw; min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
            html[data-ticketly-theme="halloween"] .ticketly-halloween-events { display: none !important; }
}

/* =========================================================
   TICKETLY — THEME SYSTEM
========================================================= */

.ticketly-theme-button {
    white-space: nowrap;
}

.ticketly-theme-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(3, 4, 9, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ticketly-theme-modal {
    width: min(720px, 100%);
    padding: 1.35rem;
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(14, 18, 31, .97), rgba(8, 11, 20, .98));
    box-shadow: 0 34px 90px rgba(0, 0, 0, .55);
}

.ticketly-theme-modal h2 {
    margin-top: .3rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text-primary);
}

.ticketly-theme-modal p {
    margin-top: .55rem;
    color: var(--text-secondary);
}

.ticketly-theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.2rem;
}

.ticketly-theme-choice {
    position: relative;
    padding: 1rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: var(--text-primary);
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.ticketly-theme-choice:hover,
.ticketly-theme-choice:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: rgba(255,255,255,.05);
    box-shadow: 0 16px 34px rgba(0,0,0,.22);
    outline: none;
}

.ticketly-theme-choice strong {
    display: block;
    font-size: 1rem;
}

.ticketly-theme-choice span {
    display: block;
    margin-top: .35rem;
    color: var(--text-secondary);
    font-size: .8rem;
    line-height: 1.5;
}

.ticketly-theme-choice-halloween {
    background: linear-gradient(145deg, rgba(100, 53, 143, .18), rgba(255, 122, 47, .07));
}

.ticketly-theme-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.ticketly-theme-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

@media (max-width: 620px) {
    .ticketly-theme-choice-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ticketly-theme-choice { transition: none; }
}


/* =========================================================
   TICKETLY — GUILD PAGE POLISH / THEME CHOOSER
   These rules intentionally override only the guild-selection controls.
========================================================= */

.ticketly-theme-button {
    position: relative;
    min-width: 82px;
    min-height: 36px;
    flex: 0 0 auto;
    gap: 0.42rem;
    padding: 0 0.68rem !important;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 6px 18px rgba(0, 0, 0, 0.08);
}

.theme-button-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-light);
    font-size: 0.9rem;
    line-height: 1;
}

.theme-button-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticketly-theme-button:hover .theme-button-icon {
    transform: rotate(18deg);
}

.join-servers-button {
    width: 100%;
    max-width: 360px;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0 0.78rem 0 0.62rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(112, 123, 242, 0.075),
            rgba(89, 100, 223, 0.045)
        );
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 800;
}

.join-servers-button:hover {
    border-color: rgba(112, 123, 242, 0.34);
    background:
        linear-gradient(
            135deg,
            rgba(112, 123, 242, 0.13),
            rgba(89, 100, 223, 0.08)
        );
    color: white;
}

.join-button-content {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.62rem;
    overflow: hidden;
}

.join-button-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.join-button-icon img {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    flex: 0 0 18px;
    display: block;
    object-fit: contain;
    object-position: center;
}

.join-button-label {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.join-servers-button .button-arrow {
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    line-height: 1;
}

.join-servers-button:hover .button-arrow {
    transform: translateX(3px);
}

/* Theme chooser */
.ticketly-theme-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11000;
    padding: 1.25rem;
    display: grid;
    place-items: center;
    overflow-y: auto;
    box-sizing: border-box;
    background: rgba(3, 4, 9, 0.76);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    animation: ticketlyThemeBackdropIn 160ms ease both;
}

.ticketly-theme-modal {
    position: relative;
    width: min(680px, 100%);
    max-height: min(720px, calc(100vh - 2.5rem));
    overflow: auto;
    padding: 1.45rem;
    box-sizing: border-box;
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    background:
        radial-gradient(480px circle at 100% 0%, rgba(112, 123, 242, 0.075), transparent 60%),
        linear-gradient(145deg, rgba(14, 18, 31, 0.985), rgba(8, 11, 20, 0.99));
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    animation: ticketlyThemeModalIn 180ms cubic-bezier(.2,.8,.2,1) both;
}

.ticketly-theme-modal::before {
    content: "";
    position: absolute;
    inset: 0 18% auto 18%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(156, 165, 255, 0.42), transparent);
}

.ticketly-theme-modal h2 {
    margin-top: 0.3rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
    color: var(--text-primary);
    letter-spacing: -0.035em;
}

.ticketly-theme-modal p {
    margin-top: 0.55rem;
    max-width: 560px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

.ticketly-theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.2rem;
}

.ticketly-theme-choice {
    position: relative;
    min-width: 0;
    min-height: 190px;
    padding: 0.9rem;
    overflow: hidden;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    cursor: pointer;
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.ticketly-theme-choice:hover,
.ticketly-theme-choice:focus-visible {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
    outline: none;
}

.ticketly-theme-choice::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 0.9rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.22;
}

.ticketly-theme-choice-preview {
    position: relative;
    height: 92px;
    margin-bottom: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.ticketly-theme-preview-classic {
    background:
        radial-gradient(120px circle at 70% 12%, rgba(112, 123, 242, 0.25), transparent 64%),
        linear-gradient(145deg, #10172a, #090d18);
}

.ticketly-theme-preview-halloween {
    background:
        radial-gradient(130px circle at 78% 16%, rgba(255, 122, 47, 0.22), transparent 62%),
        radial-gradient(100px circle at 20% 82%, rgba(165, 108, 255, 0.18), transparent 66%),
        linear-gradient(145deg, #191126, #0b070e);
}

.ticketly-theme-choice-preview::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 0 rgba(255, 255, 255, 0.045),
        0 36px 0 rgba(255, 255, 255, 0.035),
        0 54px 0 rgba(255, 255, 255, 0.025);
}

.ticketly-theme-choice-preview::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 11px;
    width: 54px;
    height: 8px;
    border-radius: 999px;
    background: rgba(156, 165, 255, 0.5);
    box-shadow: 66px 0 0 rgba(255, 255, 255, 0.08);
}

.ticketly-theme-preview-halloween::after {
    background: rgba(255, 154, 92, 0.58);
    box-shadow: 66px 0 0 rgba(194, 154, 255, 0.24);
}

.ticketly-theme-choice strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 800;
}

.ticketly-theme-choice span {
    display: block;
    margin-top: 0.32rem;
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.5;
}

.ticketly-theme-choice-halloween {
    background:
        linear-gradient(145deg, rgba(100, 53, 143, 0.12), rgba(255, 122, 47, 0.05));
}

.ticketly-theme-choice-halloween:hover,
.ticketly-theme-choice-halloween:focus-visible {
    border-color: rgba(255, 122, 47, 0.32);
}

.ticketly-theme-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.ticketly-theme-close {
    min-height: 34px;
    padding: 0 0.7rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.ticketly-theme-close:hover {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
}

@keyframes ticketlyThemeBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ticketlyThemeModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 620px) {
    .topbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ticketly-theme-button {
        min-width: 36px;
        width: 36px;
        padding: 0 !important;
    }

    .theme-button-label {
        display: none;
    }

    .ticketly-theme-choice-grid {
        grid-template-columns: 1fr;
    }

    .ticketly-theme-choice {
        min-height: 168px;
    }

    .ticketly-theme-choice-preview {
        height: 78px;
    }
}

@media (max-width: 430px) {
    .topbar-actions {
        gap: 0.4rem;
        min-width: 0;
    }

    .user-pill {
        max-width: 108px;
        min-width: 0;
    }

    .user-pill > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ticketly-theme-modal-backdrop {
        padding: 0.7rem;
    }

    .ticketly-theme-modal {
        padding: 1rem;
        border-radius: 18px;
    }

    .join-servers-button {
        max-width: 100%;
    }

    .join-button-label {
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticketly-theme-button:hover .theme-button-icon,
    .join-servers-button:hover .button-arrow,
    .ticketly-theme-choice {
        transition: none;
        transform: none;
    }

    .ticketly-theme-modal-backdrop,
    .ticketly-theme-modal {
        animation: none;
    }
}