:root {
    color-scheme:dark;
    --bg:#09090b;
    --panel:#111113;
    --panel2:#17171a;
    --line:#29292e;
    --text:#f4f4f5;
    --muted:#9b9ba3;
    --faint:#686870;
    --accent:#9c7cff;
    --accent2:#7857dc;
    --radius:10px;
}
* {
    box-sizing:border-box;
}
html,body {
    margin:0;
    min-height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a {
    color:inherit;
    text-decoration:none;
}
button,input,textarea {
    font:inherit;
}
.skip-link {
    position:fixed;
    top:-50px;
    left:16px;
    z-index:99;
    background:var(--text);
    color:var(--bg);
    padding:8px;
}
.skip-link:focus {
    top:12px;
}
.app-shell,.workspace-shell {
    display:flex;
    min-height:100vh;
}
.app-sidebar,.workspace-sidebar {
    width:244px;
    background:#0d0d0f;
    border-right:1px solid var(--line);
    padding:20px 14px;
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0 auto 0 0;
    z-index:20;
}
.product-mark {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px;
    font-weight:650;
    padding:0 8px 24px;
}
.product-glyph {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:8px;
    background:linear-gradient(145deg,#b69cff,#7455d7);
    font-family:Georgia;
    font-weight:800;
    color:white;
}
.app-nav {
    display:grid;
    gap:3px;
}
.app-nav-link,.workspace-nav a {
    border:0;
    width:100%;
    display:flex;
    align-items:center;
    gap:11px;
    padding:9px 10px;
    border-radius:7px;
    background:none;
    color:#aaaab2;
    font-size:14px;
    text-align:left;
}
.app-nav-link:hover,.workspace-nav a:hover,.app-nav-link.is-active,.workspace-nav a.is-active {
    background:#1b1b1f;
    color:#fff;
}
.app-nav-link span:first-child,.workspace-nav a span {
    width:18px;
    text-align:center;
}
.app-nav-link small {
    margin-left:auto;
    color:var(--faint);
    font-size:10px;
}
.is-disabled {
    opacity:.55;
    pointer-events:none;
}
.sidebar-spacer {
    flex:1;
}
.account-menu {
    display:flex;
    gap:10px;
    align-items:center;
    padding:14px 8px 2px;
    margin-top:14px;
    border-top:1px solid var(--line);
}
.account-avatar,.campaign-identity>span {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#332a4d;
    color:#d7caff;
}
.account-copy {
    display:grid;
    min-width:0;
}
.account-copy strong {
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.account-copy small {
    font-size:10px;
    color:var(--muted);
}
.auth-actions {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:13px;
}
.app-frame {
    margin-left:244px;
    min-width:0;
    flex:1;
}
.app-topbar {
    height:64px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    padding:0 32px;
    gap:20px;
    position:sticky;
    top:0;
    background:rgba(9,9,11,.92);
    backdrop-filter:blur(16px);
    z-index:10;
}
.command-search {
    display:flex;
    align-items:center;
    gap:9px;
    width:min(430px,50vw);
    margin:auto;
    color:var(--muted);
    background:#151518;
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 10px;
}
.command-search:focus-within {
    border-color:#68549b;
    box-shadow:0 0 0 3px #9c7cff1c;
}
.command-search input {
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
}
kbd {
    font-size:10px;
    color:var(--faint);
    border:1px solid #35353a;
    border-radius:4px;
    padding:2px 5px;
    white-space:nowrap;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 13px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#19191c;
    color:var(--text);
    font-weight:600;
    font-size:13px;
    cursor:pointer;
}
.button-primary {
    background:var(--accent);
    border-color:var(--accent);
    color:#110d1a;
}
.button-primary:hover {
    background:#ae96ff;
}
.button-subtle:hover {
    background:#222226;
}
.app-content {
    padding:54px clamp(24px,5vw,72px);
    max-width:1500px;
    margin:auto;
}
.library-header {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
    margin-bottom:48px;
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    font-weight:700;
    color:var(--accent);
    margin:0 0 10px;
}
.library-header h1,.form-heading h1,.workspace-page-header h1 {
    font-size:clamp(30px,4vw,44px);
    letter-spacing:-.04em;
    margin:0 0 10px;
}
.page-description,.form-heading>p:last-child,.workspace-page-header p {
    color:var(--muted);
    margin:0;
    max-width:650px;
    line-height:1.6;
}
.library-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    margin-bottom:22px;
    color:var(--muted);
    font-size:13px;
}
.view-switcher button {
    background:none;
    border:0;
    color:var(--faint);
    padding:8px;
}
.view-switcher .is-active {
    color:var(--text);
}
.campaign-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:18px;
}
.campaign-tile {
    position:relative;
    display:block;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--panel);
    transition:.16s;
}
.campaign-tile:hover {
    transform:translateY(-2px);
    border-color:#4a405e;
    box-shadow:0 14px 40px #0005;
}
.campaign-tile-link {
    display:none;
}
.campaign-cover {
    height:128px;
    padding:18px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    background:radial-gradient(circle at 15% 20%,#59467a 0,transparent 36%),linear-gradient(135deg,#25202d,#15151a);
}
.campaign-monogram {
    font:700 45px Georgia;
    color:#d6c8f7;
    align-self:center;
}
.campaign-system,.workspace-meta span {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    background:#0a0a0cbf;
    border:1px solid #ffffff18;
    border-radius:20px;
    padding:5px 8px;
    color:#c8c8cf;
}
.campaign-tile-body {
    padding:17px;
}
.campaign-title-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.campaign-title-row h2 {
    font-size:16px;
    margin:0;
}
.campaign-title-row>span {
    color:var(--faint);
}
.campaign-tile-body>p {
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
    height:40px;
    overflow:hidden;
}
.campaign-meta {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
    color:var(--faint);
    font-size:11px;
}
.empty-state {
    text-align:center;
    border:1px dashed #38383e;
    border-radius:12px;
    padding:70px 20px;
}
.empty-symbol {
    color:var(--accent);
    font-size:32px;
}
.empty-state p,.search-empty {
    color:var(--muted);
}
.form-page {
    max-width:760px;
    margin:auto;
}
.back-link {
    color:var(--muted);
    font-size:13px;
}
.form-heading {
    margin:40px 0;
}
.campaign-form {
    display:grid;
    gap:22px;
}
.field {
    display:grid;
    gap:8px;
}
.field label {
    font-size:13px;
    font-weight:600;
}
.field label small {
    color:var(--faint);
    font-weight:400;
}
.field input,.field textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:#141416;
    padding:11px 12px;
    color:var(--text);
    outline:none;
    resize:vertical;
}
.field input:focus,.field textarea:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px #9c7cff18;
}
.field span {
    color:#ff8585;
    font-size:12px;
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.form-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding-top:12px;
}
.workspace-sidebar {
    width:230px;
}
.product-mark.compact {
    border-bottom:1px solid var(--line);
}
.campaign-identity {
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 8px;
}
.campaign-identity>span {
    border-radius:7px;
}
.campaign-identity div {
    display:grid;
    min-width:0;
}
.campaign-identity strong {
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.campaign-identity small {
    font-size:10px;
    color:var(--muted);
}
.workspace-nav {
    display:grid;
    gap:2px;
}
.workspace-nav p {
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:9px;
    color:var(--faint);
    margin:16px 10px 5px;
}
.back-library {
    margin-top:auto;
    padding:10px;
    color:var(--muted);
    font-size:12px;
}
.workspace-content {
    margin-left:230px;
    padding:60px clamp(28px,6vw,90px);
    width:100%;
    max-width:1250px;
}
.workspace-page-header {
    display:flex;
    justify-content:space-between;
    gap:30px;
}
.workspace-page-header h1 {
    font-size:40px;
}
.workspace-meta {
    display:flex;
    gap:8px;
    margin:24px 0 60px;
}
.workspace-meta span {
    background:var(--panel);
}
.continue-section {
    max-width:780px;
}
.continue-section h2 {
    font-size:15px;
    margin-bottom:14px;
}
.tool-list {
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
}
.tool-list a {
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
}
.tool-list a:last-child {
    border:0;
}
.tool-list a:hover {
    background:var(--panel2);
}
.tool-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:7px;
    background:#292331;
    color:#c8b6f5;
}
.tool-list a>span:nth-child(2) {
    display:grid;
}
.tool-list small {
    color:var(--muted);
    margin-top:3px;
}
.tool-arrow {
    margin-left:auto;
    color:var(--faint);
}
.mobile-menu,.sidebar-scrim {
    display:none;
}
@media(max-width:760px) {
    .app-sidebar {
        transform:translateX(-100%);
        transition:.2s;
    }
    .sidebar-open .app-sidebar {
        transform:none;
    }
    .sidebar-open .sidebar-scrim {
        display:block;
        position:fixed;
        inset:0;
        background:#0008;
        z-index:15;
    }
    .app-frame {
        margin-left:0;
    }
    .mobile-menu {
        display:block;
    }
    .app-topbar {
        padding:0 15px;
    }
    .app-topbar>.button {
        font-size:0;
    }
    .app-topbar>.button span {
        font-size:18px;
    }
    .app-content {
        padding:32px 18px;
    }
    .library-header {
        align-items:start;
    }
    .header-create {
        display:none;
    }
    .campaign-grid {
        grid-template-columns:1fr;
    }
    .workspace-sidebar {
        position:static;
        width:72px;
        padding:16px 8px;
    }
    .workspace-sidebar .product-mark {
        font-size:0;
    }
    .campaign-identity div,.workspace-nav a:not(.is-active) {
        font-size:0;
    }
    .workspace-nav a {
        justify-content:center;
    }
    .workspace-nav p,.back-library {
        display:none;
    }
    .workspace-content {
        margin:0;
        padding:40px 22px;
    }
    .form-row {
        grid-template-columns:1fr;
    }
}
/* Public landing page */ .landing-body {
    background:#08080a;
}
.landing-nav {
    height:72px;
    display:flex;
    align-items:center;
    padding:0 clamp(24px,6vw,96px);
    position:absolute;
    inset:0 0 auto;
    z-index:5;
    border-bottom:1px solid #ffffff12;
}
.landing-nav .product-mark {
    padding:0;
    margin-right:auto;
}
.landing-nav nav {
    display:flex;
    gap:30px;
    color:#b6b6bd;
    font-size:13px;
}
.landing-nav nav a:hover {
    color:#fff;
}
.landing-auth {
    display:flex;
    align-items:center;
    gap:18px;
    margin-left:auto;
    font-size:13px;
}
.landing-hero {
    height:min(900px,100vh);
    min-height:680px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-bottom:1px solid var(--line);
}
.hero-art {
    position:absolute;
    inset:0;
    background-image:linear-gradient(90deg,#08080a 0%,#08080ae8 25%,transparent 61%),linear-gradient(0deg,#08080a 0%,transparent 30%),url('/images/faestudio-hero.png');
    background-size:cover;
    background-position:center;
}
.hero-copy {
    position:relative;
    z-index:2;
    width:min(660px,85vw);
    margin-left:clamp(24px,8vw,140px);
    padding-top:55px;
}
.hero-kicker {
    display:flex;
    align-items:center;
    gap:9px;
    color:#c8b6ef;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:10px;
    font-weight:700;
}
.hero-kicker span {
    width:22px;
    height:1px;
    background:var(--accent);
}
.hero-copy h1 {
    font-size:clamp(54px,7.5vw,108px);
    line-height:.9;
    letter-spacing:-.065em;
    margin:27px 0;
    color:#f6f3f0;
    font-weight:630;
}
.hero-copy h1 em {
    font-family:Georgia,serif;
    font-weight:400;
    color:#bba5ef;
}
.hero-copy>p {
    font-size:clamp(16px,1.5vw,20px);
    line-height:1.65;
    color:#b2afb6;
    max-width:560px;
}
.hero-actions {
    display:flex;
    gap:12px;
    margin-top:34px;
}
.button-large {
    padding:12px 18px;
    font-size:14px;
}
.button-ghost {
    background:#101012b8;
    backdrop-filter:blur(8px);
}
.hero-proof {
    display:flex;
    gap:24px;
    margin-top:30px;
    color:#75757e;
    font-size:11px;
}
.hero-scroll {
    position:absolute;
    z-index:2;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    color:#777780;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:9px;
}
.hero-scroll span {
    margin-left:9px;
}
.landing-features {
    padding:120px clamp(24px,8vw,140px);
    max-width:1600px;
    margin:auto;
}
.section-intro {
    max-width:690px;
}
.section-intro h2,.landing-workflow h2 {
    font-size:clamp(36px,5vw,64px);
    line-height:1.05;
    letter-spacing:-.045em;
    margin:0 0 20px;
}
.section-intro>p:last-child {
    color:var(--muted);
    font-size:17px;
    line-height:1.6;
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:70px;
}
.feature-grid article {
    background:#0c0c0e;
    padding:38px;
}
.feature-grid article>span {
    color:var(--accent);
    font-size:25px;
}
.feature-grid h3 {
    margin:45px 0 12px;
    font-size:17px;
}
.feature-grid p {
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
}
.landing-workflow {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:60px;
    padding:100px clamp(24px,8vw,140px);
    background:#111014;
    border-block:1px solid var(--line);
}
.workflow-line {
    display:flex;
    align-items:center;
    min-width:min(650px,50vw);
}
.workflow-line span {
    display:grid;
    gap:8px;
    font-size:12px;
}
.workflow-line b {
    font-size:10px;
    color:var(--accent);
}
.workflow-line i {
    height:1px;
    background:#3a3445;
    flex:1;
    margin:0 15px;
}
.landing-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:var(--faint);
    font-size:11px;
    padding:35px clamp(24px,8vw,140px);
}
.landing-referral {
    color:#a98ae7;
}
.landing-referral:hover {
    color:#fff;
}
@media(max-width:800px) {
    .landing-nav nav {
        display:none;
    }
    .landing-auth>a:first-child {
        display:none;
    }
    .landing-hero {
        min-height:720px;
    }
    .hero-art {
        opacity:.65;
        background-position:65% center;
    }
    .hero-copy {
        margin:auto;
        padding:80px 24px 0;
    }
    .hero-proof {
        display:grid;
        gap:10px;
    }
    .hero-scroll {
        display:none;
    }
    .feature-grid {
        grid-template-columns:1fr;
    }
    .landing-features {
        padding-block:80px;
    }
    .landing-workflow {
        display:block;
        padding-block:70px;
    }
    .workflow-line {
        min-width:0;
        margin-top:45px;
    }
    .workflow-line i {
        margin:0 8px;
    }
    .landing-footer {
        gap:20px;
    }
}
/* Authentication */ .auth-body {
    min-height:100vh;
    background:#09090b;
}
.auth-shell {
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(390px,42%) 1fr;
}
.auth-brand-panel {
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:34px clamp(32px,4vw,68px);
    border-right:1px solid #ffffff14;
    background:radial-gradient(circle at 75% 20%,#7657c43d 0,transparent 30%),radial-gradient(circle at 10% 90%,#422c6838 0,transparent 35%),linear-gradient(145deg,#15131a,#09090b 72%);
}
.auth-brand-panel:before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.18;
    background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,black,transparent);
}
.auth-product {
    position:relative;
    z-index:1;
    padding:0;
    font-size:18px;
}
.auth-product .product-glyph {
    width:34px;
    height:34px;
}
.auth-brand-copy {
    position:relative;
    z-index:1;
    margin:auto 0;
    max-width:520px;
}
.auth-brand-copy h2 {
    font-size:clamp(44px,5.2vw,78px);
    line-height:.98;
    letter-spacing:-.055em;
    margin:18px 0 24px;
}
.auth-brand-copy h2 em {
    font-family:Georgia,serif;
    font-weight:400;
    color:#bba5ef;
}
.auth-brand-copy>p:last-child {
    max-width:460px;
    color:#aaa7b0;
    font-size:16px;
    line-height:1.7;
}
.auth-rune {
    position:absolute;
    right:-90px;
    bottom:2%;
    width:330px;
    height:330px;
    border:1px solid #a78bfa22;
    border-radius:50%;
    display:grid;
    place-items:center;
}
.auth-rune:before,.auth-rune:after {
    content:"";
    position:absolute;
    border:1px solid #a78bfa1c;
    border-radius:50%;
}
.auth-rune:before {
    inset:35px;
}
.auth-rune:after {
    inset:75px;
}
.auth-rune span {
    color:#a78bfa40;
    font-size:58px;
}
.auth-brand-foot {
    position:relative;
    z-index:1;
    color:#65636b;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.auth-content {
    display:grid;
    place-items:center;
    padding:56px clamp(28px,7vw,110px);
    background:radial-gradient(circle at 100% 0,#6f50b614,transparent 35%);
}
.auth-mobile-brand {
    display:none;
}
.auth-card {
    width:min(100%,640px);
}
.auth-card-login {
    max-width:480px;
}
.auth-heading {
    margin-bottom:34px;
}
.auth-heading h1 {
    font-size:clamp(34px,4vw,48px);
    letter-spacing:-.045em;
    margin:0 0 10px;
}
.auth-heading>p:last-child {
    color:var(--muted);
    line-height:1.6;
    margin:0;
}
.auth-card form {
    display:grid;
    gap:20px;
}
.auth-field {
    display:grid;
    gap:8px;
}
.auth-field>label,.auth-label-row label {
    font-size:12px;
    font-weight:650;
    color:#d8d8dd;
}
.auth-label-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.auth-label-row a {
    font-size:11px;
    color:#b69cff;
}
.auth-input {
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #303036;
    border-radius:9px;
    background:#121215;
    padding:0 13px;
    transition:.15s;
}
.auth-input:focus-within {
    border-color:#8b6ee0;
    box-shadow:0 0 0 4px #9c7cff16;
    background:#151419;
}
.auth-input>span {
    width:18px;
    color:#706a7d;
    font-size:12px;
    text-align:center;
}
.auth-input input {
    width:100%;
    height:48px;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
}
.auth-input input::placeholder {
    color:#5f5f67;
}
.auth-field>span {
    color:#ff8f8f;
    font-size:11px;
}
.auth-form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.auth-check {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
}
.auth-check input {
    accent-color:var(--accent);
    width:15px;
    height:15px;
}
.auth-submit {
    width:100%;
    height:48px;
    margin-top:4px;
    font-size:14px;
}
.auth-submit>span {
    margin-left:auto;
}
.auth-validation:empty {
    display:none;
}
.auth-validation {
    border:1px solid #8f3f49;
    background:#351b20;
    color:#ffb8bf;
    border-radius:8px;
    padding:12px 15px;
    font-size:12px;
}
.auth-validation ul {
    margin:0;
    padding-left:18px;
}
.auth-switch {
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:28px;
}
.auth-switch a {
    color:#bda8ff;
    font-weight:650;
}
.auth-switch a:hover,.auth-label-row a:hover {
    text-decoration:underline;
}
@media(max-width:980px) {
    .auth-shell {
        grid-template-columns:1fr;
    }
    .auth-brand-panel {
        display:none;
    }
    .auth-content {
        min-height:100vh;
        padding:32px clamp(22px,8vw,70px);
    }
    .auth-mobile-brand {
        display:block;
        width:min(100%,640px);
        margin-bottom:42px;
    }
    .auth-mobile-brand .product-mark {
        padding:0;
    }
    .auth-card-login {
        max-width:640px;
    }
}
@media(max-width:600px) {
    .auth-content {
        display:block;
    }
    .auth-form-row {
        grid-template-columns:1fr;
    }
    .auth-heading h1 {
        font-size:34px;
    }
    .auth-mobile-brand {
        margin-bottom:50px;
    }
    .auth-card form {
        gap:17px;
    }
}
.auth-success {
    border:1px solid #3d7458;
    background:#14291e;
    color:#a9e8c2;
    border-radius:8px;
    padding:12px 15px;
    font-size:12px;
    line-height:1.5;
    margin:0 0 20px;
}
/* Normalize framework-provided Identity pages inside the branded auth shell. */ .auth-content>h1,.auth-content>h2,.auth-content>h3,.auth-content>.row,.auth-content>form,.auth-content>p,.auth-content>div:not(.auth-mobile-brand) {
    width:min(100%,560px);
}
.auth-content>h1 {
    margin:0 0 10px;
    font-size:clamp(34px,4vw,48px);
    letter-spacing:-.045em;
}
.auth-content>h2 {
    margin:0 0 28px;
    color:var(--muted);
    font-size:15px;
    font-weight:400;
    line-height:1.6;
}
.auth-content>h3 {
    margin:0 0 22px;
    font-size:20px;
}
.auth-content>.row {
    display:block;
}
.auth-content [class*="col-md-"] {
    width:100%;
    max-width:none;
}
.auth-content hr {
    width:min(100%,560px);
    margin:0 0 28px;
    border:0;
    border-top:1px solid var(--line);
}
.auth-content form {
    display:grid;
    gap:18px;
}
.auth-content .form-floating {
    display:grid;
    gap:8px;
}
.auth-content .form-floating>label {
    position:static;
    order:-1;
    padding:0;
    color:#d8d8dd;
    font-size:12px;
    font-weight:650;
    transform:none;
}
.auth-content .form-control {
    width:100%;
    height:50px;
    padding:0 14px;
    border:1px solid #303036;
    border-radius:9px;
    background:#121215;
    color:var(--text);
    outline:0;
}
.auth-content .form-control:focus {
    border-color:#8b6ee0;
    box-shadow:0 0 0 4px #9c7cff16;
    background:#151419;
}
.auth-content .form-control::placeholder {
    color:#5f5f67;
}
.auth-content textarea.form-control {
    height:auto;
    padding-block:12px;
}
.auth-content .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:10px 16px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#19191c;
    color:var(--text);
    font-weight:650;
    cursor:pointer;
}
.auth-content .btn-primary {
    border-color:var(--accent);
    background:var(--accent);
    color:#110d1a;
}
.auth-content .btn-primary:hover {
    background:#ae96ff;
}
.auth-content .w-100 {
    width:100%;
}
.auth-content a {
    color:#bda8ff;
}
.auth-content a:hover {
    text-decoration:underline;
}
.auth-content form+p,.auth-content .row+div,.auth-content section>p {
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}
.auth-content .text-danger,.auth-content [data-valmsg-for] {
    color:#ff8f8f;
    font-size:11px;
}
.auth-content .validation-summary-errors {
    padding:12px 15px;
    border:1px solid #8f3f49;
    border-radius:8px;
    background:#351b20;
    color:#ffb8bf;
    font-size:12px;
}
.auth-content .validation-summary-errors ul {
    margin:0;
    padding-left:18px;
}
.auth-content .alert {
    padding:12px 15px;
    border:1px solid #3d7458;
    border-radius:8px;
    background:#14291e;
    color:#a9e8c2;
    font-size:12px;
}
.auth-content .checkbox {
    color:var(--muted);
    font-size:12px;
}
.auth-content .checkbox input {
    width:15px;
    height:15px;
    margin-right:7px;
    accent-color:var(--accent);
}
/* Billing */ .billing-hero {
    text-align:center;
    max-width:850px;
    margin:20px auto 60px;
}
.billing-hero h1 {
    font-size:clamp(42px,6vw,72px);
    line-height:1;
    letter-spacing:-.055em;
    margin:12px 0 22px;
}
.billing-hero>p:last-child {
    color:var(--muted);
    font-size:17px;
    line-height:1.6;
}
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,430px));
    justify-content:center;
    gap:20px;
}
.price-card {
    position:relative;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel);
    padding:34px;
    display:flex;
    flex-direction:column;
}
.price-card.is-featured {
    border-color:#765dd0;
    box-shadow:0 20px 70px #5f43a826;
    background:radial-gradient(circle at 100% 0,#7253bd2c,transparent 38%),var(--panel);
}
.price-card h2 {
    font-size:25px;
    margin:0;
}
.price {
    font-size:20px;
    font-weight:700;
    margin:22px 0;
}
.price small {
    font-size:12px;
    color:var(--muted);
    font-weight:400;
}
.price-card ul {
    list-style:none;
    padding:0;
    margin:5px 0 28px;
    display:grid;
    gap:12px;
    color:#c5c5ca;
    font-size:13px;
}
.price-card li:before {
    content:"✓";
    color:#a78bfa;
    margin-right:10px;
}
.price-card>.button,.billing-unavailable {
    margin-top:auto;
}
.price-badge {
    position:absolute;
    right:20px;
    top:20px;
    border:1px solid #8b70df55;
    background:#5e45a32e;
    color:#c9b9ff;
    border-radius:20px;
    padding:5px 9px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.paypal-choice {
    display:grid;
    gap:18px;
    margin-top:auto;
}
.paypal-choice>div>strong {
    display:block;
    font-size:11px;
    margin-bottom:8px;
    color:var(--muted);
}
.billing-unavailable {
    color:#d5b98d;
    background:#302719;
    border:1px solid #554329;
    border-radius:8px;
    padding:12px;
}
.billing-account-card {
    max-width:700px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel);
    padding:32px;
}
.billing-account-card h2 {
    font-size:30px;
    margin:12px 0 5px;
}
.billing-account-card dl {
    display:grid;
    grid-template-columns:140px 1fr;
    border-block:1px solid var(--line);
    padding:18px 0;
    margin:25px 0;
    gap:10px;
    font-size:13px;
}
.billing-account-card dt {
    color:var(--muted);
}
.billing-account-card dd {
    margin:0;
}
.subscription-status {
    display:inline-block;
    border-radius:20px;
    padding:5px 9px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.09em;
    background:#29292d;
}
.status-active,.status-trialing {
    color:#9be8b8;
    background:#173222;
}
.status-pastdue,.status-suspended {
    color:#ffd095;
    background:#3a2914;
}
.status-canceled,.status-expired,.status-revoked {
    color:#f3a1a9;
    background:#3a1d22;
}
/* Administration */ .admin-hero {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:35px;
}
.admin-hero h1 {
    font-size:clamp(36px,5vw,58px);
    letter-spacing:-.05em;
    margin:0 0 8px;
}
.admin-hero>div>p:last-child {
    margin:0;
    color:var(--muted);
}
.admin-live-dot {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#94dfaf;
}
.admin-live-dot:before {
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#57c680;
    margin-right:7px;
    box-shadow:0 0 12px #57c680;
}
.admin-metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:30px;
}
.admin-metrics article {
    border:1px solid var(--line);
    border-radius:10px;
    background:linear-gradient(145deg,#151518,#101012);
    padding:20px;
    display:grid;
}
.admin-metrics span {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--faint);
}
.admin-metrics strong {
    font-size:31px;
    margin:12px 0 4px;
}
.admin-metrics small {
    color:var(--muted);
    font-size:11px;
}
.admin-tabs {
    display:flex;
    gap:4px;
    border-bottom:1px solid var(--line);
    margin-bottom:24px;
}
.admin-tabs a {
    padding:10px 14px;
    color:var(--muted);
    font-size:12px;
    border-bottom:2px solid transparent;
}
.admin-tabs a.is-active {
    color:#fff;
    border-color:var(--accent);
}
.admin-overview-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.admin-panel {
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--panel);
    overflow:hidden;
}
.admin-panel>header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px;
    border-bottom:1px solid var(--line);
}
.admin-panel>header h2 {
    font-size:16px;
    margin:0;
}
.admin-panel>header .eyebrow {
    margin-bottom:5px;
}
.admin-panel>header>a,.admin-panel>header>span {
    font-size:11px;
    color:#b69cff;
}
.admin-feed-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
}
.admin-feed-row:last-child {
    border:0;
}
.admin-feed-row>div {
    display:grid;
}
.admin-feed-row small,.admin-modern-table small {
    color:var(--muted);
    font-size:10px;
    margin-top:3px;
}
.admin-feed-row em {
    margin-left:auto;
}
.admin-state {
    font-style:normal;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
    border-radius:20px;
    padding:5px 8px;
    background:#29292d;
    color:#aaa;
}
.admin-state.is-good {
    background:#173222;
    color:#9be8b8;
}
.admin-state.is-warn {
    background:#3a2914;
    color:#ffd095;
}
.admin-empty {
    padding:30px;
    color:var(--muted);
}
.admin-table-panel {
    overflow:auto;
}
.admin-modern-table {
    min-width:900px;
}
.admin-modern-table .table-head,.admin-modern-table .table-row {
    display:grid;
    align-items:center;
    gap:16px;
    padding:13px 20px;
    border-bottom:1px solid var(--line);
}
.admin-modern-table .table-head {
    color:var(--faint);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
    background:#0e0e10;
}
.admin-modern-table .table-row {
    font-size:12px;
    min-height:70px;
}
.admin-modern-table .table-row:last-child {
    border:0;
}
.admin-modern-table .table-row>span {
    display:grid;
}
.admin-users-table .table-head,.admin-users-table .table-row {
    grid-template-columns:2fr .8fr .9fr .8fr 1.4fr;
}
.admin-campaigns-table .table-head,.admin-campaigns-table .table-row {
    grid-template-columns:1.4fr 1.8fr 1fr .6fr .6fr;
}
.admin-subscriptions-table .table-head,.admin-subscriptions-table .table-row {
    grid-template-columns:1.4fr .8fr .7fr 1fr .5fr;
}
.admin-user-cell {
    display:flex;
    align-items:center;
    gap:10px;
}
.admin-user-cell>span:last-child {
    display:grid;
}
.admin-actions {
    display:flex;
    gap:6px;
}
.admin-actions form {
    margin:0;
}
.admin-modern-table form {
    display:flex;
    gap:7px;
    align-items:center;
}
.admin-modern-table select,.admin-grant select {
    min-width:0;
    border:1px solid var(--line);
    background:#151518;
    color:var(--text);
    border-radius:7px;
    padding:8px;
}
.admin-grant {
    padding:20px;
    border-bottom:1px solid var(--line);
    background:#111014;
}
.admin-grant h3 {
    font-size:13px;
    margin:0 0 12px;
}
.admin-grant form {
    display:flex;
    gap:8px;
}
.admin-grant select:first-child {
    min-width:270px;
}
@media(max-width:900px) {
    .pricing-grid {
        grid-template-columns:1fr;
    }
    .admin-metrics {
        grid-template-columns:1fr 1fr;
    }
    .admin-overview-grid {
        grid-template-columns:1fr;
    }
    .admin-hero {
        align-items:start;
        flex-direction:column;
    }
    .admin-tabs {
        overflow:auto;
    }
    .admin-grant form {
        display:grid;
    }
    .admin-grant select:first-child {
        min-width:0;
    }
}
/* Map library and editor */ .map-library-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:42px;
}
.map-library-header h1 {
    font-size:40px;
    letter-spacing:-.04em;
    margin:0 0 8px;
}
.map-library-header p:last-child {
    color:var(--muted);
    margin:0;
}
.map-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:18px;
}
.map-card {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:var(--panel);
    transition:.16s;
}
.map-card:hover {
    transform:translateY(-2px);
    border-color:#504465;
}
.map-thumbnail {
    height:180px;
    background-size:cover;
    background-position:center;
    background-color:#17171a;
}
.map-card a>div:last-child {
    padding:14px 16px;
}
.map-card h2 {
    font-size:15px;
    margin:0 0 5px;
}
.map-card p {
    font-size:11px;
    color:var(--faint);
    margin:0;
}
.map-empty {
    margin-top:50px;
}
.upload-field input[type=file] {
    padding:9px;
}
.upload-field>small {
    color:var(--faint);
    font-size:11px;
}
.map-editor {
    position:fixed;
    inset:0 0 0 230px;
    background:#08080a;
    z-index:5;
    display:grid;
    grid-template-rows:52px 1fr;
}
.map-editor-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    border-bottom:1px solid var(--line);
    background:#111113;
    font-size:12px;
}
.map-editor-bar>div:first-child {
    display:flex;
    gap:8px;
    color:var(--muted);
}
.map-editor-bar strong {
    color:var(--text);
}
.map-editor-actions {
    display:flex;
    align-items:center;
    gap:5px;
}
.map-editor-actions button {
    border:1px solid var(--line);
    border-radius:5px;
    background:#1a1a1d;
    color:var(--text);
    height:30px;
    min-width:30px;
    cursor:pointer;
}
.map-editor-actions output {
    width:48px;
    text-align:center;
    color:var(--muted);
}
.map-stage {
    position:relative;
    overflow:hidden;
    cursor:grab;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    background-color:#0d0d10;
    background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
    background-size:24px 24px;
}
.map-stage.is-dragging {
    cursor:grabbing;
}
.map-canvas {
    position:absolute;
    transform-origin:0 0;
    will-change:transform;
}
.map-canvas>img {
    display:block;
    max-width:none;
    user-select:none;
    box-shadow:0 20px 70px #000a;
}
.map-hint {
    position:absolute;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#111113dd;
    color:var(--muted);
    font-size:10px;
    pointer-events:none;
}
@media(max-width:760px) {
    .map-editor {
        left:72px;
    }
    .map-editor-bar>div:first-child span,.map-editor-bar>div:first-child a,.map-editor-actions [data-fit] {
        display:none;
    }
}
.map-card-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px 14px 14px;
    border-top:1px solid var(--line);
}
.map-card-actions form {
    margin:0;
}
.map-card-actions .button {
    padding:8px 11px;
    font-size:10px;
}
.markdown-body .lore-color-red,.markdown-body span[style*="color:red" i] {
    color:#ff6b76!important;
}
.markdown-body .lore-color-orange,.markdown-body span[style*="color:orange" i] {
    color:#ffad66!important;
}
.markdown-body .lore-color-yellow,.markdown-body span[style*="color:yellow" i] {
    color:#f2d66f!important;
}
.markdown-body .lore-color-green,.markdown-body span[style*="color:green" i] {
    color:#72d69a!important;
}
.markdown-body .lore-color-blue,.markdown-body span[style*="color:blue" i] {
    color:#75baff!important;
}
.markdown-body .lore-color-purple,.markdown-body span[style*="color:purple" i] {
    color:#bd91ff!important;
}
.markdown-body .lore-color-cyan,.markdown-body span[style*="color:cyan" i] {
    color:#67dce3!important;
}
.markdown-body .lore-color-magenta,.markdown-body span[style*="color:magenta" i] {
    color:#ed82d8!important;
}
.markdown-body .lore-color-white,.markdown-body span[style*="color:white" i] {
    color:#fff!important;
}
.markdown-body .lore-color-gray,.markdown-body .lore-color-grey,.markdown-body span[style*="color:gray" i],.markdown-body span[style*="color:grey" i] {
    color:#aeb6c5!important;
}
.lore-actions {
    display:flex;
    align-items:center;
    gap:8px;
}
.lore-actions form {
    margin:0;
}
.lore-editor-page {
    max-width:1100px;
}
.lore-edit-form textarea {
    width:100%;
    min-height:65vh;
    padding:18px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#0d0d0f;
    color:var(--text);
    font:14px/1.65 Consolas,monospace;
    resize:vertical;
}
.lore-edit-form .form-actions {
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:13px;
}
.lore-library-row {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    border-bottom:1px solid var(--line);
    background:var(--panel);
}
.lore-library-row:last-child {
    border-bottom:0;
}
.lore-library-row:hover {
    background:var(--panel2);
}
.lore-library-row>a:first-child {
    display:grid;
    grid-template-columns:42px 1fr;
    align-items:center;
    gap:14px;
    padding:15px 17px;
}
.lore-row-actions {
    display:flex;
    gap:7px;
    padding:10px 14px;
}
.lore-row-actions form {
    margin:0;
}
.lore-row-actions .button {
    padding:8px 10px;
    font-size:10px;
}
@media(max-width:650px) {
    .lore-library-row {
        grid-template-columns:1fr;
    }
    .lore-row-actions {
        padding:0 17px 14px;
    }
}
.lore-header-actions {
    display:flex;
    align-items:center;
    gap:8px;
}
.lore-header-actions form {
    margin:0;
}
.lore-edit-form>label {
    display:grid;
    gap:7px;
    margin-bottom:13px;
    color:var(--muted);
    font-size:11px;
}
.lore-edit-form input[name=fileName] {
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#111113;
    color:var(--text);
}
/* Map markers */ .map-editor-tools {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.marker-tool {
    border:1px solid var(--line);
    border-radius:6px;
    background:#1a1a1d;
    color:var(--text);
    height:32px;
    padding:0 12px;
    cursor:pointer;
}
.marker-tool.is-active {
    background:var(--accent);
    border-color:var(--accent);
    color:#100d18;
}
.map-stage.is-placing {
    cursor:crosshair;
}
.map-markers {
    position:absolute;
    inset:0;
    pointer-events:none;
}
.map-marker {
    position:absolute;
    transform:translate(-50%,-100%);
    border:0;
    background:none;
    color:white;
    pointer-events:auto;
    cursor:pointer;
    padding:0;
}
.map-marker>span {
    display:block;
    width:22px;
    height:22px;
    border:3px solid #fff;
    border-radius:50% 50% 50% 0;
    transform:rotate(-45deg);
    background:var(--accent);
    box-shadow:0 3px 12px #000;
}
.map-marker>em {
    display:none;
    position:absolute;
    top:28px;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    padding:4px 7px;
    border-radius:4px;
    background:#09090be8;
    font-style:normal;
    font-size:10px;
}
.map-marker:hover>em,.map-marker:focus>em {
    display:block;
}
.map-marker.marker-danger>span {
    background:#d85353;
}
.map-marker.marker-secret>span {
    background:#6c5b86;
}
.map-marker.marker-location>span {
    background:#4c8d78;
}
.map-marker.marker-travel>span {
    background:#c18a45;
}
.marker-panel {
    position:absolute;
    right:0;
    top:52px;
    bottom:0;
    width:330px;
    z-index:8;
    background:#111113;
    border-left:1px solid var(--line);
    padding:22px;
    box-shadow:-15px 0 40px #0005;
}
.marker-panel[hidden] {
    display:none;
}
.marker-panel header {
    display:flex;
    justify-content:space-between;
    align-items:start;
    margin-bottom:28px;
}
.marker-panel h2 {
    font-size:20px;
    margin:0;
}
.marker-panel header button {
    border:0;
    background:none;
    color:var(--muted);
    font-size:24px;
    cursor:pointer;
}
.marker-panel form {
    display:grid;
    gap:18px;
}
.marker-panel select {
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:#141416;
    padding:11px 12px;
    color:var(--text);
}
.marker-form-error {
    min-height:16px;
    color:#ff8585;
    font-size:11px;
}
.marker-delete {
    margin-right:auto;
    color:#ff8585;
}
.marker-panel .form-actions {
    padding:0;
}
@media(max-width:760px) {
    .map-editor-tools {
        left:85px;
        transform:none;
    }
    .marker-panel {
        width:min(330px,calc(100vw - 72px));
    }
}
/* Map calibration and ruler */ .map-measurements {
    position:absolute;
    inset:0;
    pointer-events:none;
}
.ruler-line {
    position:absolute;
    height:3px;
    background:#f5cf68;
    transform-origin:0 50%;
    box-shadow:0 0 0 1px #241c09,0 0 12px #000;
}
.ruler-line:before,.ruler-line:after {
    content:"";
    position:absolute;
    top:50%;
    width:9px;
    height:9px;
    border:2px solid #fff;
    border-radius:50%;
    background:#b68525;
    transform:translate(-50%,-50%);
}
.ruler-line:after {
    left:100%;
}
.ruler-line output {
    position:absolute;
    left:50%;
    top:-12px;
    transform:translate(-50%,-100%);
    background:#111113e8;
    border:1px solid #5b4c27;
    border-radius:5px;
    padding:5px 8px;
    color:#f5df9e;
    font-size:11px;
    white-space:nowrap;
}
.panel-help {
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
    margin:-12px 0 24px;
}
.scale-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.map-stage.is-measuring {
    cursor:crosshair;
}
.map-editor button,.map-editor input,.map-editor select,.map-editor textarea {
    touch-action:manipulation;
}
.map-editor-bar button {
    min-width:38px;
    min-height:38px;
}
@media(pointer:coarse) {
    .map-editor-bar {
        height:60px;
    }
    .map-editor {
        grid-template-rows:60px 1fr;
    }
    .marker-panel {
        top:60px;
    }
    .map-editor-tools {
        display:flex;
        gap:6px;
    }
    .marker-tool {
        height:40px;
        padding:0 14px;
    }
    .map-editor-actions button {
        min-width:42px;
        height:40px;
    }
}
@media(hover:none) {
    .campaign-tile:hover {
        transform:none;
    }
    .campaign-tile:active {
        background:var(--panel2);
        border-color:var(--accent);
    }
}
/* NPC directory and profiles */ .npc-library-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:42px;
}
.npc-library-header h1 {
    font-size:40px;
    letter-spacing:-.04em;
    margin:0 0 8px;
}
.npc-library-header p:last-child {
    color:var(--muted);
    margin:0;
}
.npc-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    color:var(--faint);
    font-size:11px;
}
.npc-search {
    display:flex;
    align-items:center;
    gap:8px;
    width:min(420px,70%);
    border:1px solid var(--line);
    border-radius:7px;
    background:#131315;
    padding:8px 10px;
}
.npc-search input {
    border:0;
    outline:0;
    width:100%;
    background:transparent;
    color:var(--text);
}
.npc-directory {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.npc-row {
    display:grid;
    grid-template-columns:40px minmax(150px,1.5fr) minmax(120px,1fr) 90px 20px;
    align-items:center;
    gap:14px;
    padding:13px 16px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    touch-action:manipulation;
}
.npc-row:last-child {
    border:0;
}
.npc-row:hover,.npc-row:active {
    background:var(--panel2);
}
.npc-avatar,.npc-portrait-placeholder {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:9px;
    background:linear-gradient(145deg,#493b60,#272230);
    color:#e1d5f7;
    font-family:Georgia;
    font-weight:700;
}
.npc-primary {
    display:grid;
}
.npc-primary strong {
    font-size:13px;
}
.npc-primary small,.npc-location {
    font-size:11px;
    color:var(--muted);
    margin-top:3px;
}
.npc-status {
    justify-self:start;
    border:1px solid #3d5148;
    border-radius:20px;
    padding:4px 7px;
    color:#8fc5a9;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.07em;
}
.status-missing {
    color:#dfbc73;
    border-color:#554829;
}
.status-deceased {
    color:#aaa;
    border-color:#444;
}
.status-unknown {
    color:#a99ac4;
    border-color:#494057;
}
.npc-arrow {
    color:var(--faint);
}
.npc-editor-page {
    max-width:850px;
    margin:auto;
}
.npc-form {
    display:grid;
    gap:22px;
}
.form-section {
    display:grid;
    gap:20px;
    padding:26px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#101012;
}
.form-section>h2,.form-section>div:first-child h2 {
    font-size:14px;
    margin:0;
}
.form-row.three {
    grid-template-columns:1fr 1fr 1fr;
}
.npc-form select {
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:#141416;
    padding:11px 12px;
    color:var(--text);
}
.gm-section {
    border-color:#3d3450;
    background:#121017;
}
.gm-section>div:first-child p {
    font-size:11px;
    color:var(--muted);
    margin:5px 0 0;
}
.publish-toggle {
    display:flex;
    gap:11px;
    align-items:start;
    padding:16px;
    border:1px solid var(--line);
    border-radius:8px;
}
.publish-toggle input {
    margin-top:4px;
}
.publish-toggle label {
    display:grid;
    font-size:12px;
}
.publish-toggle small {
    color:var(--muted);
    margin-top:3px;
}
.npc-profile {
    max-width:980px;
}
.npc-profile-header {
    display:grid;
    grid-template-columns:76px 1fr auto;
    gap:20px;
    align-items:center;
    margin:42px 0 30px;
}
.npc-portrait-placeholder {
    width:76px;
    height:76px;
    border-radius:16px;
    font-size:30px;
}
.profile-badges {
    display:flex;
    gap:8px;
}
.profile-badges>span:not(.npc-status) {
    font-size:9px;
    text-transform:uppercase;
    color:#bba5ef;
    border:1px solid #493c61;
    border-radius:20px;
    padding:4px 7px;
}
.npc-profile-header h1 {
    font-size:42px;
    letter-spacing:-.045em;
    margin:8px 0 0;
}
.npc-title {
    color:#bba5ef;
    margin:4px 0;
}
.npc-facts {
    display:flex;
    gap:16px;
    color:var(--muted);
    font-size:11px;
    margin-top:12px;
}
.profile-summary {
    font-size:18px;
    line-height:1.7;
    color:#cccbd1;
    max-width:760px;
    padding-bottom:35px;
    border-bottom:1px solid var(--line);
}
.profile-columns {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:50px;
    margin-top:38px;
}
.profile-columns section {
    margin-bottom:34px;
}
.profile-columns h2 {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:#aaaab2;
}
.profile-columns p {
    color:#c4c4ca;
    white-space:pre-line;
    line-height:1.75;
    font-size:13px;
}
.gm-notes {
    border-left:1px solid #3a3048;
    padding-left:26px;
}
.gm-notes h2 {
    color:#bba5ef;
}
.muted {
    color:var(--muted)!important;
}
@media(max-width:760px) {
    .npc-library-header {
        align-items:start;
    }
    .npc-row {
        grid-template-columns:40px 1fr 20px;
    }
    .npc-location,.npc-status {
        display:none;
    }
    .form-row.three {
        grid-template-columns:1fr;
    }
    .npc-profile-header {
        grid-template-columns:60px 1fr;
    }
    .npc-portrait-placeholder {
        width:60px;
        height:60px;
    }
    .profile-edit {
        grid-column:1/-1;
    }
    .profile-columns {
        grid-template-columns:1fr;
    }
    .gm-notes {
        border-left:0;
        border-top:1px solid #3a3048;
        padding:25px 0 0;
    }
}
/* Encounter preparation */ .encounter-list {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.encounter-list>a {
    display:grid;
    grid-template-columns:38px 1fr auto 20px;
    align-items:center;
    gap:14px;
    padding:15px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    touch-action:manipulation;
}
.encounter-list>a:last-child {
    border:0;
}
.encounter-list>a:hover,.encounter-list>a:active {
    background:var(--panel2);
}
.encounter-list>a>span:nth-child(2) {
    display:grid;
}
.encounter-list small {
    color:var(--muted);
    font-size:11px;
    margin-top:4px;
}
.encounter-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#30262b;
    color:#df9b83;
}
.participant-picker {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}
.participant-picker>label {
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:7px;
    padding:10px;
    cursor:pointer;
}
.participant-picker>label:has(input:checked) {
    border-color:#655185;
    background:#17131e;
}
.participant-picker .npc-avatar {
    width:30px;
    height:30px;
}
.participant-picker label>span:last-child {
    display:grid;
    font-size:12px;
}
.participant-picker small {
    color:var(--muted);
}
.encounter-detail-header {
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin:42px 0 30px;
}
.encounter-detail-header h1 {
    font-size:42px;
    letter-spacing:-.045em;
    margin:8px 0;
}
.participant-cast {
    display:grid;
    gap:8px;
}
.participant-cast>a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:7px;
}
.participant-cast>a>span:last-child {
    display:grid;
    font-size:12px;
}
.participant-cast small {
    color:var(--muted);
}
@media(max-width:760px) {
    .participant-picker {
        grid-template-columns:1fr;
    }
    .encounter-detail-header {
        align-items:start;
        gap:20px;
    }
    .encounter-list>a {
        grid-template-columns:38px 1fr 20px;
    }
    .encounter-list .npc-status {
        display:none;
    }
}
/* World and location workspace */ .world-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:40px;
}
.world-header h1 {
    font-size:40px;
    letter-spacing:-.04em;
    margin:0 0 8px;
}
.world-header p:last-child {
    color:var(--muted);
    margin:0;
}
.world-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:14px;
}
.world-view-switch {
    display:flex;
    border:1px solid var(--line);
    border-radius:7px;
    padding:3px;
    background:#101012;
}
.world-view-switch a {
    padding:6px 9px;
    border-radius:5px;
    color:var(--muted);
    font-size:11px;
}
.world-view-switch a.is-active {
    background:#252429;
    color:#fff;
}
.location-directory {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.location-directory>a {
    display:grid;
    grid-template-columns:40px minmax(180px,1.6fr) minmax(110px,.8fr) 100px 20px;
    gap:14px;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    touch-action:manipulation;
}
.location-directory>a:last-child {
    border:0;
}
.location-directory>a:hover,.location-directory>a:active {
    background:var(--panel2);
}
.location-type-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#263246;
    color:#9db9df;
    font:700 14px Georgia;
}
.type-city,.type-district,.type-building,.type-room {
    background:#332c44;
    color:#c4afe7;
}
.type-world,.type-continent,.type-region,.type-country,.type-kingdom,.type-province {
    background:#24372f;
    color:#9ac9ad;
}
.type-dungeon,.type-level {
    background:#3b2929;
    color:#dcaaa0;
}
.type-wilderness,.type-landmark {
    background:#39341f;
    color:#ddc777;
}
.location-primary,.location-parent {
    display:grid;
    min-width:0;
}
.location-primary strong,.location-parent strong {
    font-size:13px;
}
.location-primary small {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--muted);
    font-size:11px;
    margin-top:4px;
}
.location-parent small {
    font-size:9px;
    color:var(--faint);
    text-transform:uppercase;
}
.location-kind {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--muted);
}
.world-tree-panel {
    border:1px solid var(--line);
    border-radius:10px;
    background:#101012;
    padding:18px;
}
.tree-guide {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:11px;
    padding:0 8px 14px;
    border-bottom:1px solid var(--line);
}
.world-tree {
    list-style:none;
    margin:0;
    padding:8px 0 0;
}
.world-tree .world-tree {
    margin-left:27px;
    border-left:1px solid #35333b;
    padding-left:17px;
}
.tree-node {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:5px 8px;
    border-radius:7px;
}
.tree-node:hover {
    background:#1a191d;
}
.tree-toggle {
    border:0;
    background:none;
    color:var(--muted);
    font-size:18px;
    width:18px;
}
.tree-toggle:disabled {
    opacity:.2;
}
.tree-node>a:not(.tree-add) {
    display:grid;
    flex:1;
}
.tree-node strong {
    font-size:12px;
}
.tree-node small {
    color:var(--muted);
    font-size:9px;
}
.tree-add {
    opacity:0;
    padding:7px;
    color:var(--accent);
}
.tree-node:hover .tree-add {
    opacity:1;
}
.location-breadcrumb {
    display:flex;
    gap:8px;
    color:var(--muted);
    font-size:11px;
}
.location-breadcrumb strong {
    color:var(--text);
}
.location-profile-header {
    display:grid;
    grid-template-columns:72px 1fr auto;
    align-items:center;
    gap:20px;
    margin:42px 0 35px;
}
.location-hero-icon {
    display:grid;
    place-items:center;
    width:72px;
    height:72px;
    border-radius:16px;
    font:700 28px Georgia;
}
.location-profile-header h1 {
    font-size:42px;
    letter-spacing:-.045em;
    margin:0;
}
.location-profile-header p:last-child {
    color:var(--muted);
    font-size:12px;
}
.location-description {
    font-size:17px;
    line-height:1.75;
    max-width:780px;
    white-space:pre-line;
    padding-bottom:38px;
    border-bottom:1px solid var(--line);
}
.sub-location-section {
    margin-top:35px;
}
.sub-location-section>div:first-child {
    display:flex;
    align-items:center;
    gap:10px;
}
.sub-location-section h2 {
    font-size:14px;
}
.sub-location-section>div:first-child span {
    color:var(--muted);
    font-size:10px;
}
.sub-location-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px;
    margin-top:14px;
}
.sub-location-grid>a {
    display:grid;
    grid-template-columns:34px 1fr 20px;
    align-items:center;
    gap:11px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--panel);
}
.sub-location-grid>a>span:nth-child(2) {
    display:grid;
    font-size:12px;
}
.sub-location-grid small {
    color:var(--muted);
}
.inline-empty {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px dashed var(--line);
    border-radius:8px;
    padding:18px;
    color:var(--muted);
    font-size:12px;
}
.inline-empty a {
    color:var(--accent);
}
@media(max-width:760px) {
    .world-header {
        align-items:start;
    }
    .world-toolbar {
        align-items:stretch;
        flex-direction:column;
    }
    .world-view-switch {
        align-self:flex-end;
    }
    .location-directory>a {
        grid-template-columns:40px 1fr 20px;
    }
    .location-parent,.location-kind {
        display:none;
    }
    .location-profile-header {
        grid-template-columns:58px 1fr;
    }
    .location-hero-icon {
        width:58px;
        height:58px;
    }
    .location-profile-header>.button {
        grid-column:1/-1;
    }
    .sub-location-grid {
        grid-template-columns:1fr;
    }
}
.coordinate-fields {
    grid-template-columns:1fr 1fr;
}
.coordinate-fields input {
    font-variant-numeric:tabular-nums;
}
.campaign-form .field select {
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:#141416;
    padding:11px 12px;
    color:var(--text);
    outline:none;
}
.campaign-form .field select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px #9c7cff18;
}
/* XYZ tile maps */ .map-header-actions,.empty-actions {
    display:flex;
    gap:9px;
}
.map-thumbnail {
    position:relative;
}
.map-mode {
    position:absolute;
    top:10px;
    right:10px;
    padding:4px 7px;
    border:1px solid #ffffff24;
    border-radius:20px;
    background:#09090bcc;
    color:#d5d5da;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.tile-layer {
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#0b0b0d;
}
.tile-layer img {
    position:absolute;
    display:block;
    max-width:none;
    user-select:none;
    -webkit-user-drag:none;
    box-shadow:none;
    border:0;
    outline:0;
}
.tile-size-proxy {
    position:absolute;
    inset:0;
    pointer-events:none;
}
.tile-settings {
    display:grid;
    gap:18px;
    padding:20px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#101012;
}
.tile-settings h2 {
    font-size:12px;
    margin:0;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
}
.tile-import-page code {
    color:#cdbcf1;
}
@media(max-width:760px) {
    .map-header-actions {
        flex-direction:column;
    }
    .map-header-actions .button {
        font-size:11px;
    }
}
.tile-source {
    display:grid;
    gap:16px;
}
.source-divider {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--faint);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.source-divider:before,.source-divider:after {
    content:"";
    height:1px;
    background:var(--line);
    flex:1;
}
.import-policy {
    border:1px solid #3f374f;
    border-radius:8px;
    background:#121017;
    padding:16px;
    color:var(--muted);
    font-size:11px;
}
.import-policy strong {
    color:#cdbcf1;
}
.import-policy ul {
    margin:10px 0 0;
    padding-left:18px;
    line-height:1.8;
}
/* Session planning and journal */ .session-library-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:42px;
}
.session-library-header h1 {
    font-size:40px;
    letter-spacing:-.04em;
    margin:0 0 8px;
}
.session-library-header p:last-child {
    color:var(--muted);
    margin:0;
}
.session-timeline {
    position:relative;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.session-timeline>a {
    display:grid;
    grid-template-columns:46px minmax(180px,1fr) 90px 100px 20px;
    align-items:center;
    gap:15px;
    padding:15px 18px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    touch-action:manipulation;
}
.session-timeline>a:last-child {
    border:0;
}
.session-timeline>a:hover,.session-timeline>a:active {
    background:var(--panel2);
}
.session-number {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid #494052;
    border-radius:50%;
    color:#c9b8e8;
    font:700 15px Georgia;
}
.session-main {
    display:grid;
}
.session-main>small {
    color:var(--accent);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.session-main>strong {
    font-size:14px;
    margin-top:3px;
}
.session-main>em {
    color:var(--muted);
    font-size:10px;
    font-style:normal;
    margin-top:4px;
}
.session-encounters {
    color:var(--muted);
    font-size:10px;
}
.session-heading-fields {
    grid-template-columns:110px 1fr;
}
.section-help {
    color:var(--muted);
    font-size:11px;
    margin:5px 0 0;
}
.session-encounter-picker {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}
.session-encounter-picker label {
    display:grid;
    grid-template-columns:18px 34px 1fr;
    align-items:center;
    gap:9px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:7px;
    cursor:pointer;
}
.session-encounter-picker label:has(input:checked) {
    border-color:#655185;
    background:#17131e;
}
.session-encounter-picker label>span:last-child {
    display:grid;
    font-size:11px;
}
.session-encounter-picker small {
    color:var(--muted);
}
.session-journal-section {
    border-color:#344a42;
    background:#101614;
}
.session-profile {
    max-width:1100px;
}
.session-profile-header {
    display:grid;
    grid-template-columns:86px 1fr auto;
    align-items:center;
    gap:22px;
    margin:42px 0 45px;
}
.session-number.large {
    width:76px;
    height:76px;
    font-size:28px;
}
.session-profile-header h1 {
    font-size:42px;
    letter-spacing:-.045em;
    margin:3px 0;
}
.session-profile-header>div>p:last-child {
    color:var(--muted);
    font-size:11px;
}
.session-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:55px;
}
.session-workspace section {
    margin-bottom:35px;
}
.session-workspace h2 {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.09em;
}
.session-workspace p {
    white-space:pre-line;
    color:#c7c7cd;
    line-height:1.75;
    font-size:13px;
}
.session-recap {
    padding:26px;
    border:1px solid #35483f;
    border-radius:9px;
    background:#101613;
}
.session-linked-list {
    display:grid;
    gap:7px;
}
.session-linked-list>a {
    display:grid;
    grid-template-columns:24px 1fr 18px;
    align-items:center;
    gap:8px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--panel);
}
.session-linked-list>a>span:nth-child(2) {
    display:grid;
    font-size:11px;
}
.session-linked-list small {
    color:var(--muted);
}
.gm-notes.compact {
    border:1px solid #3a3048;
    border-radius:8px;
    padding:18px;
}
.gm-notes.compact p:last-child {
    margin-bottom:0;
}
@media(max-width:760px) {
    .session-library-header {
        align-items:start;
    }
    .session-timeline>a {
        grid-template-columns:42px 1fr 20px;
    }
    .session-timeline .npc-status,.session-encounters {
        display:none;
    }
    .session-encounter-picker {
        grid-template-columns:1fr;
    }
    .session-profile-header {
        grid-template-columns:62px 1fr;
    }
    .session-number.large {
        width:58px;
        height:58px;
    }
    .session-profile-header>.button {
        grid-column:1/-1;
    }
    .session-workspace {
        grid-template-columns:1fr;
    }
}
/* Item catalog */ .item-library-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:42px;
}
.item-library-header h1 {
    font-size:40px;
    letter-spacing:-.04em;
    margin:0 0 8px;
}
.item-library-header p:last-child {
    color:var(--muted);
    margin:0;
}
.item-header-actions {
    display:flex;
    gap:9px;
}
.item-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
}
.item-toolbar select {
    border:1px solid var(--line);
    border-radius:7px;
    background:#141416;
    color:var(--text);
    padding:8px 10px;
}
.item-catalog {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.item-row {
    display:grid;
    grid-template-columns:34px minmax(150px,1fr) minmax(150px,1.2fr) 80px 90px 20px;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    touch-action:manipulation;
}
.item-row:last-child {
    border:0;
}
.item-row:hover,.item-row:active {
    background:var(--panel2);
}
.item-rarity-gem {
    font-size:17px;
    text-align:center;
    text-shadow:0 0 12px currentColor;
}
.item-primary {
    display:grid;
}
.item-primary strong {
    font-size:13px;
}
.item-primary small {
    color:var(--muted);
    font-size:10px;
    margin-top:4px;
}
.item-tags,.item-profile-tags {
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}
.item-tags em,.item-profile-tags span {
    border:1px solid var(--line);
    border-radius:20px;
    padding:3px 6px;
    color:var(--muted);
    font-size:9px;
    font-style:normal;
}
.rarity-label {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.rarity-normal {
    color:#f0f0f2;
}
.rarity-uncommon {
    color:#55c878;
}
.rarity-rare {
    color:#5897f5;
}
.rarity-epic {
    color:#ad6bea;
}
.rarity-legendary {
    color:#ed923e;
}
.item-value {
    color:var(--muted);
    font-size:11px;
    text-align:right;
}
.tag-suggestions {
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
    margin-top:2px;
}
.tag-suggestions>small {
    color:var(--faint);
}
.tag-suggestions button {
    border:1px solid var(--line);
    border-radius:20px;
    background:#19191c;
    color:var(--muted);
    padding:3px 7px;
    font-size:9px;
    cursor:pointer;
}
.tag-suggestions button:hover {
    border-color:var(--accent);
    color:#fff;
}
.compound-field {
    display:grid;
    grid-template-columns:1fr 80px;
    gap:7px;
}
.unit-field input {
    text-align:center;
}
.item-profile {
    max-width:980px;
}
.item-profile-header {
    display:grid;
    grid-template-columns:82px 1fr auto;
    align-items:center;
    gap:22px;
    margin:42px 0;
}
.item-hero-gem {
    display:grid;
    place-items:center;
    width:76px;
    height:76px;
    border:1px solid currentColor;
    border-radius:18px;
    background:#111113;
    font-size:30px;
    box-shadow:inset 0 0 25px currentColor;
}
.item-profile-header h1 {
    font-size:42px;
    letter-spacing:-.045em;
    margin:8px 0;
}
.profile-badges>.rarity-label {
    border:1px solid currentColor;
}
.item-profile-content {
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:55px;
    padding-top:35px;
    border-top:1px solid var(--line);
}
.item-profile-content h2 {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.item-profile-content main p {
    white-space:pre-line;
    line-height:1.8;
    color:#c8c8ce;
}
.item-profile-content aside {
    display:grid;
    align-content:start;
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
}
.item-profile-content aside>div {
    display:grid;
    gap:5px;
    padding:15px;
    border-bottom:1px solid var(--line);
}
.item-profile-content aside>div:last-child {
    border:0;
}
.item-profile-content aside small {
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
}
.item-profile-content aside strong {
    font-size:13px;
}
.type-manager {
    max-width:760px;
}
.add-type-form {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:10px;
    margin-bottom:28px;
}
.type-list {
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
}
.type-list>div {
    display:grid;
    grid-template-columns:30px 1fr auto;
    align-items:center;
    gap:10px;
    padding:13px 15px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
}
.type-list>div:last-child {
    border:0;
}
.type-list strong {
    font-size:12px;
}
.type-list small {
    color:var(--muted);
    font-size:9px;
}
@media(max-width:760px) {
    .item-library-header {
        align-items:start;
    }
    .item-header-actions {
        flex-direction:column;
    }
    .item-toolbar {
        align-items:stretch;
        flex-direction:column;
    }
    .item-row {
        grid-template-columns:30px 1fr 70px 20px;
    }
    .item-tags,.item-value {
        display:none;
    }
    .item-profile-header {
        grid-template-columns:62px 1fr;
    }
    .item-hero-gem {
        width:58px;
        height:58px;
    }
    .item-profile-header>.button {
        grid-column:1/-1;
    }
    .item-profile-content {
        grid-template-columns:1fr;
    }
    .add-type-form {
        grid-template-columns:1fr;
    }
}
/* Players, characters, and inventory */ .player-library-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:42px;
}
.player-library-header h1 {
    font-size:40px;
    letter-spacing:-.04em;
    margin:0 0 8px;
}
.player-library-header p:last-child {
    color:var(--muted);
    margin:0;
}
.player-directory {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.player-directory>a {
    display:grid;
    grid-template-columns:42px minmax(160px,1fr) 90px 80px 80px 20px;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    touch-action:manipulation;
}
.player-directory>a:last-child {
    border:0;
}
.player-directory>a:hover,.player-directory>a:active {
    background:var(--panel2);
}
.player-avatar {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:linear-gradient(145deg,#4d3e63,#28232f);
    color:#dfd1f6;
    font:700 14px Georgia;
}
.player-primary,.player-character-count,.player-item-count {
    display:grid;
}
.player-primary strong {
    font-size:13px;
}
.player-primary small,.player-character-count small,.player-item-count small {
    color:var(--muted);
    font-size:9px;
    margin-top:3px;
}
.player-character-count strong,.player-item-count strong {
    font-size:14px;
}
.player-profile {
    max-width:1100px;
}
.player-profile-header {
    display:grid;
    grid-template-columns:82px 1fr;
    align-items:center;
    gap:20px;
    margin:42px 0;
}
.player-avatar.large {
    width:76px;
    height:76px;
    font-size:28px;
}
.player-profile-header h1 {
    font-size:42px;
    letter-spacing:-.045em;
    margin:8px 0 2px;
}
.player-profile-header>div>p:last-child {
    color:var(--muted);
    font-size:11px;
}
.player-alert {
    border:1px solid #634141;
    border-radius:7px;
    background:#211414;
    color:#efa3a3;
    padding:11px;
    font-size:11px;
}
.section-title-row {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:18px;
}
.section-title-row h2 {
    font-size:18px;
    margin:0;
}
.quick-character-form {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 90px auto;
    align-items:end;
    gap:8px;
    padding:16px;
    border:1px solid #443852;
    border-radius:9px;
    background:#121016;
    margin-bottom:18px;
}
.quick-character-form[hidden] {
    display:none;
}
.character-stack {
    display:grid;
    gap:16px;
}
.character-card {
    border:1px solid var(--line);
    border-radius:10px;
    background:#101012;
    overflow:hidden;
}
.character-card>header {
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:12px;
    padding:16px;
    border-bottom:1px solid var(--line);
}
.character-avatar {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:9px;
    background:#25334a;
    color:#abc3eb;
    font:700 15px Georgia;
}
.character-card h3 {
    font-size:15px;
    margin:0;
}
.character-card header p {
    color:var(--muted);
    font-size:10px;
    margin:4px 0 0;
}
.character-status {
    font-size:9px;
    text-transform:uppercase;
    color:#81b99a;
}
.inventory-header {
    display:flex;
    justify-content:space-between;
    padding:13px 16px 8px;
}
.inventory-header h4 {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--muted);
    margin:0;
}
.inventory-header span {
    font-size:9px;
    color:var(--faint);
}
.inventory-list {
    padding:0 10px;
}
.inventory-row {
    display:grid;
    grid-template-columns:26px 1fr 45px 65px 24px;
    align-items:center;
    gap:8px;
    padding:9px 6px;
    border-top:1px solid #232327;
}
.inventory-row>a {
    display:grid;
}
.inventory-row strong {
    font-size:11px;
}
.inventory-row small {
    color:var(--muted);
    font-size:9px;
}
.inventory-quantity {
    font-size:11px;
    color:var(--muted);
}
.equip-toggle,.inventory-remove {
    border:0;
    background:none;
    color:var(--muted);
    font-size:9px;
    cursor:pointer;
}
.equip-toggle.is-equipped {
    color:#73c592;
}
.inventory-remove {
    font-size:16px;
}
.inventory-empty {
    color:var(--muted);
    font-size:11px;
    padding:0 16px;
}
.assign-item-form {
    display:grid;
    grid-template-columns:minmax(160px,1fr) 65px minmax(130px,.8fr) auto;
    gap:7px;
    padding:13px 16px;
    background:#0d0d0f;
    border-top:1px solid var(--line);
}
.assign-item-form select,.assign-item-form input {
    min-width:0;
    border:1px solid var(--line);
    border-radius:6px;
    background:#17171a;
    color:var(--text);
    padding:8px;
    font-size:10px;
}
.player-notes {
    margin-top:30px;
    border:1px solid #3a3048;
    border-radius:9px;
    padding:20px;
}
.player-notes h2 {
    font-size:12px;
}
.player-notes p:last-child {
    white-space:pre-line;
    color:#c8c8ce;
}
.status-invited {
    color:#85aee2;
    border-color:#344d6a;
}
.status-inactive {
    color:#999;
    border-color:#444;
}
@media(max-width:760px) {
    .player-library-header {
        align-items:start;
    }
    .player-directory>a {
        grid-template-columns:42px 1fr 70px 20px;
    }
    .player-character-count,.player-item-count {
        display:none;
    }
    .quick-character-form {
        grid-template-columns:1fr 1fr;
    }
    .quick-character-form .button {
        grid-column:1/-1;
    }
    .assign-item-form {
        grid-template-columns:1fr 60px;
    }
    .assign-item-form input[name=notes] {
        grid-column:1/-1;
    }
    .inventory-row {
        grid-template-columns:24px 1fr 35px 55px 20px;
    }
}
.session-actions {
    display:flex;
    align-items:center;
    gap:9px;
}
.session-actions form {
    margin:0;
}
.live-launch {
    max-width:1200px;
    margin:0 auto;
    padding:28px;
}
.live-launch header {
    max-width:720px;
    margin:32px 0;
}
.live-launch header h1 {
    font:500 46px/1.1 Georgia,serif;
    margin:8px 0 12px;
}
.live-launch header>p:last-child {
    color:var(--text-muted);
    line-height:1.6;
}
.live-link-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.live-link-grid section {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
    padding:22px;
    border:1px solid var(--border-color);
    border-radius:10px;
    background:var(--surface-raised);
}
.live-link-role {
    color:#ad88f5;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:11px;
}
.live-link-grid h2 {
    margin:0;
}
.live-link-grid code {
    display:block;
    width:100%;
    padding:12px;
    border-radius:7px;
    background:#090c12;
    color:#d9c7ff;
    font-size:20px;
    letter-spacing:.12em;
}
.live-link-grid small {
    color:var(--text-muted);
    line-height:1.5;
}
@media(max-width:850px) {
    .live-link-grid {
        grid-template-columns:1fr;
    }
    .session-actions {
        flex-wrap:wrap;
    }
}
/* Collapsible character inventory */ .app-content:has(#account),.app-content:has(#registerForm) {
    max-width:1050px;
    margin:0 auto;
}
.app-content:has(#account)>h1,.app-content:has(#registerForm)>h1 {
    font-size:42px;
    letter-spacing:-.04em;
    margin:24px 0;
}
.app-content:has(#account)>.row,.app-content:has(#registerForm)>.row {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
    gap:28px;
}
.app-content:has(#account) section,.app-content:has(#registerForm) section {
    padding:28px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
}
.app-content:has(#account) h2,.app-content:has(#registerForm) h2 {
    margin:0 0 12px;
    font-size:18px;
}
.app-content:has(#account) h3,.app-content:has(#registerForm) h3 {
    margin-top:0;
    font-size:15px;
}
.app-content:has(#account) hr,.app-content:has(#registerForm) hr {
    border:0;
    border-top:1px solid var(--line);
    margin:0 0 22px;
}
.app-content:has(#account) .form-floating,.app-content:has(#registerForm) .form-floating {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:16px;
}
.app-content:has(#account) .form-floating label,.app-content:has(#registerForm) .form-floating label {
    order:-1;
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.app-content:has(#account) .form-control,.app-content:has(#registerForm) .form-control {
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:7px;
    background:#141416;
    color:var(--text);
    padding:12px;
    outline:none;
}
.app-content:has(#account) .form-control:focus,.app-content:has(#registerForm) .form-control:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px #9c7cff18;
}
.app-content:has(#account) .checkbox,.app-content:has(#registerForm) .checkbox {
    margin:12px 0 18px;
    color:var(--muted);
}
.app-content:has(#account) .btn-primary,.app-content:has(#registerForm) .btn-primary {
    width:100%;
    border:1px solid #8064b5;
    border-radius:7px;
    background:var(--accent);
    color:#fff;
    padding:12px;
    font-weight:700;
    cursor:pointer;
}
.app-content:has(#account) .text-danger,.app-content:has(#registerForm) .text-danger {
    display:block;
    color:#ef9292;
    font-size:10px;
    margin-top:4px;
}
.app-content:has(#account) form+div,.app-content:has(#registerForm) form+div {
    color:var(--muted);
}
@media(max-width:760px) {
    .app-content:has(#account)>.row,.app-content:has(#registerForm)>.row {
        grid-template-columns:1fr;
    }
    .app-content:has(#account)>h1,.app-content:has(#registerForm)>h1 {
        font-size:34px;
    }
}
.character-card>header form {
    margin:0;
}
.character-status {
    border:1px solid #3d4f46;
    border-radius:20px;
    background:#121b17;
    padding:6px 10px;
    cursor:pointer;
}
.character-status:hover {
    border-color:#6d9d82;
    color:#a2d6b5;
}
.character-status.is-active {
    border-color:#47705a;
    background:#15251c;
    color:#8ed0a6;
}
.character-inventory>summary {
    display:grid;
    grid-template-columns:16px 1fr auto;
    align-items:center;
    gap:8px;
    padding:13px 16px;
    color:var(--muted);
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.character-inventory>summary::-webkit-details-marker {
    display:none;
}
.character-inventory>summary:hover {
    background:#151519;
    color:var(--text);
}
.inventory-caret {
    width:7px;
    height:7px;
    border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transform:rotate(-45deg);
    transition:transform .15s ease;
}
.character-inventory[open] .inventory-caret {
    transform:rotate(45deg);
}
.inventory-title {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.inventory-total {
    font-size:9px;
    color:var(--faint);
}
.inventory-content {
    border-top:1px solid var(--line);
}
.lore-header {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:32px;
}
.lore-header h1 {
    font-size:42px;
    margin:5px 0;
}
.lore-header p:last-child {
    color:var(--muted);
}
.lore-library {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}
.lore-library>a {
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:14px;
    padding:15px 17px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    color:inherit;
    text-decoration:none;
}
.lore-library>a:last-child {
    border-bottom:0;
}
.lore-library>a:hover {
    background:var(--panel-2);
}
.lore-library .lore-icon {
    font-size:22px;
}
.lore-library strong,.lore-library small {
    display:block;
}
.lore-library small {
    color:var(--muted);
    margin-top:3px;
}
.lore-library time {
    color:var(--muted);
    font-size:13px;
}
.lore-empty {
    padding:42px;
    text-align:center;
    color:var(--muted);
    border:1px dashed var(--line);
    border-radius:10px;
}
.lore-reader {
    max-width:920px;
}
.lore-reader-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.markdown-body {
    line-height:1.75;
}
.markdown-body h1,.markdown-body h2,.markdown-body h3 {
    font-family:Georgia,serif;
    margin-top:1.4em;
}
.markdown-body blockquote {
    margin:16px 0;
    padding:10px 16px;
    border-left:4px solid var(--accent);
    background:var(--panel);
}
.markdown-body pre {
    overflow:auto;
    padding:15px;
    background:#0d0e12;
    border-radius:7px;
}
.markdown-body code {
    font-family:Consolas,monospace;
}
.markdown-body table {
    width:100%;
    border-collapse:collapse;
}
.markdown-body td,.markdown-body th {
    padding:8px 10px;
    border:1px solid var(--line);
    text-align:left;
}
.active-session-banner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:22px 0;
    padding:20px 22px;
    border:1px solid #5f4a8c;
    border-radius:12px;
    background:linear-gradient(135deg,#211832,#11131a);
}
.active-session-banner h2 {
    margin:4px 0 6px;
}
.active-session-banner p:last-child {
    color:var(--muted);
}
.active-session-banner>div:last-child {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}
@media(max-width:720px) {
    .active-session-banner {
        align-items:flex-start;
        flex-direction:column;
    }
}
.session-danger-zone {
    margin-top:36px;
    border:1px solid #733e49;
    border-radius:10px;
    background:#211318;
}
.session-danger-zone>summary {
    padding:13px 16px;
    color:#e6a6b3;
    font-weight:700;
    cursor:pointer;
}
.session-danger-zone>div {
    padding:4px 18px 18px;
    border-top:1px solid #733e49;
}
.session-danger-zone h2 {
    margin-bottom:6px;
}
.session-danger-zone p {
    color:var(--muted);
    max-width:700px;
}
.button-danger {
    background:#8f3144!important;
    color:#fff!important;
}
.notice-banner {
    margin:16px 0;
    padding:12px 15px;
    border:1px solid #356a51;
    border-radius:8px;
    background:#10251b;
    color:#9ee0b9;
}
.player-access-links {
    align-content:start;
}
.player-access-link {
    display:grid;
    grid-template-columns:minmax(100px,1fr) auto auto;
    align-items:center;
    gap:9px;
    padding:10px 0;
    border-top:1px solid var(--line);
}
.player-access-link code {
    font-size:13px;
}
.player-access-link .button {
    padding:7px 9px;
}
@media(max-width:680px) {
    .player-access-link {
        grid-template-columns:1fr auto;
    }
    .player-access-link .button {
        grid-column:1/-1;
    }
}
.product-glyph {
    font-size:0!important;
    background:transparent url('/images/Logo1d20.png') center/contain no-repeat!important;
    border:0!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px;
}
.product-mark.compact .product-glyph {
    width:36px!important;
    height:36px!important;
    flex-basis:36px;
}
.asset-header {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
}
.asset-header h1 {
    font-size:42px;
    margin:5px 0;
}
.asset-header p:last-child {
    color:var(--muted);
}
.asset-quota {
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--panel);
}
.asset-quota progress {
    width:100%;
    accent-color:var(--accent);
}
.asset-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:14px;
}
.asset-grid article {
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
}
.asset-grid img {
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit:contain;
    background:#0b0d12;
}
.asset-grid article>div {
    display:grid;
    gap:3px;
    padding:12px;
}
.asset-grid small {
    color:var(--muted);
}
.asset-grid form {
    padding:0 12px 12px;
}
.asset-grid form button {
    width:100%;
}
@media(max-width:650px) {
    .asset-header {
        align-items:flex-start;
        flex-direction:column;
    }
    .asset-quota {
        grid-template-columns:1fr;
    }
}
.asset-dropzone {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
    padding:20px;
    border:2px dashed #51436c;
    border-radius:12px;
    background:#17131f;
}
.asset-dropzone.is-dragging {
    border-color:#af83ff;
    background:#241a34;
}
.asset-dropzone input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}
.asset-dropzone label {
    display:grid;
    gap:4px;
    margin:0;
    cursor:pointer;
}
.asset-dropzone label strong {
    color:#e7dcf7;
    font-size:17px;
}
.asset-dropzone label span,.asset-dropzone label small {
    color:var(--muted);
}
@media(max-width:650px) {
    .asset-dropzone {
        grid-template-columns:1fr;
    }
    .asset-dropzone button {
        width:100%;
    }
}
.token-asset-picker {
    display:flex;
    align-items:end;
    gap:12px;
    padding:10px 14px;
    border-top:1px solid var(--line);
    background:#11131a;
}
.token-asset-picker label {
    flex:1;
    margin:0;
}
.token-asset-picker img {
    width:54px;
    height:54px;
    border:2px solid #75609a;
    border-radius:50%;
    object-fit:cover;
    background:#090b10;
}
.asset-data-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:18px;
}
.asset-data-links a {
    display:flex;
    justify-content:space-between;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--panel);
    color:inherit;
    text-decoration:none;
}
.asset-data-links span {
    color:var(--muted);
}
.reference-page {
    padding:32px;
}
.reference-page>header {
    display:flex;
    justify-content:space-between;
    align-items:end;
}
.reference-page h1 {
    font-size:42px;
    margin:4px 0;
}
.reference-search {
    display:flex;
    gap:9px;
    margin:22px 0;
}
.reference-table {
    overflow:auto;
    border:1px solid var(--line);
    border-radius:9px;
}
.reference-table table {
    width:100%;
    border-collapse:collapse;
    background:var(--panel);
}
.reference-table th,.reference-table td {
    padding:11px 13px;
    border-bottom:1px solid var(--line);
    text-align:left;
    white-space:nowrap;
}
.reference-table th {
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
}
.reference-table td small {
    display:block;
    color:var(--muted);
}
/* Game Master command center and durable live codes */ .dm-command-hero {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:28px;
}
.dm-command-hero h1 {
    margin:0 0 10px;
    font-size:clamp(38px,5vw,60px);
    letter-spacing:-.05em;
}
.dm-command-hero>div>p:last-child {
    margin:0;
    color:var(--muted);
}
.dm-command-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:44px;
}
.dm-command-stats article {
    display:grid;
    gap:5px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
}
.dm-command-stats strong {
    font-size:26px;
}
.dm-command-stats span {
    color:var(--muted);
    font-size:10px;
}
.dm-section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px;
    margin-bottom:16px;
}
.dm-section-heading h2 {
    margin:2px 0 0;
    font-size:22px;
}
.dm-section-heading>p {
    max-width:560px;
    margin:0;
    color:var(--muted);
    font-size:12px;
}
.dm-section-heading.campaigns {
    margin-top:48px;
}
.dm-live-room-list {
    display:grid;
    gap:15px;
}
.dm-live-room-list>article {
    overflow:hidden;
    border:1px solid #4a3b64;
    border-radius:13px;
    background:linear-gradient(135deg,#17131f,#101013);
}
.dm-live-room-list>article>header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px;
    border-bottom:1px solid var(--line);
}
.dm-live-room-list h2 {
    margin:3px 0 5px;
    font-size:18px;
}
.dm-live-room-list header small {
    color:var(--muted);
}
.dm-code-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
}
.dm-code-grid>div,.session-code-vault>div:not(:first-child) {
    display:grid;
    gap:7px;
    padding:18px 22px;
    border-right:1px solid var(--line);
}
.dm-code-grid>div:last-child {
    border:0;
}
.dm-code-grid span,.session-code-vault span {
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.dm-code-grid code,.session-code-vault code {
    color:#d7c2ff;
    font-size:18px;
    letter-spacing:.1em;
}
.dm-code-grid a,.session-code-vault a {
    color:#a98ae7;
    font-size:10px;
}
.dm-code-grid .private,.session-code-vault .private {
    background:#1b1218;
}
.dm-campaign-list {
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:11px;
}
.dm-campaign-list>a {
    display:grid;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:15px;
    padding:15px 18px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
}
.dm-campaign-list>a:last-child {
    border:0;
}
.dm-campaign-list>a:hover {
    background:var(--panel2);
}
.dm-campaign-list .campaign-monogram {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:9px;
    background:#2c2440;
    font-size:20px;
}
.dm-campaign-list h3 {
    margin:0 0 4px;
}
.dm-campaign-list p {
    max-width:650px;
    margin:0;
    color:var(--muted);
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dm-campaign-list>a>span:last-child {
    color:var(--muted);
    font-size:10px;
}
.session-code-vault {
    display:grid;
    grid-template-columns:minmax(260px,1.3fr) repeat(3,1fr);
    margin:0 0 30px;
    border:1px solid #4a3b64;
    border-radius:11px;
    background:#121016;
    overflow:hidden;
}
.session-code-vault>div:first-child {
    padding:18px 22px;
    border-right:1px solid var(--line);
}
.session-code-vault h2 {
    margin:3px 0 6px;
}
.session-code-vault p:last-child {
    margin:0;
    color:var(--muted);
    font-size:11px;
}
@media(max-width:800px) {
    .dm-command-hero,.dm-section-heading {
        align-items:start;
        flex-direction:column;
    }
    .dm-command-stats,.dm-code-grid {
        grid-template-columns:1fr;
    }
    .dm-code-grid>div {
        border-right:0;
        border-bottom:1px solid var(--line);
    }
    .dm-live-room-list>article>header {
        align-items:start;
        flex-direction:column;
    }
    .session-code-vault {
        grid-template-columns:1fr;
    }
    .session-code-vault>div {
        border-right:0!important;
        border-bottom:1px solid var(--line);
    }
    .dm-campaign-list>a {
        grid-template-columns:42px 1fr;
    }
    .dm-campaign-list>a>span:last-child {
        grid-column:2;
    }
}
/* Custom campaign rollers */ .roller-editor-card {
    display:grid;
    grid-template-columns:minmax(220px,.65fr) minmax(360px,1.35fr);
    gap:34px;
    margin:26px 0 38px;
    padding:26px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
}
.roller-editor-card h2,.roller-library h2 {
    margin:0 0 8px;
}
.roller-editor-card>div p {
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}
.roller-editor-card code {
    color:#d6c3fb;
}
.roller-editor-card form {
    display:grid;
    gap:15px;
}
.roller-editor-card label {
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:11px;
}
.roller-editor-card input,.roller-editor-card textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:#0d0d0f;
    color:var(--text);
    padding:11px 12px;
}
.roller-editor-card textarea {
    resize:vertical;
    font:12px/1.65 Consolas,monospace;
}
.roller-fields {
    display:grid;
    grid-template-columns:1fr 140px;
    gap:12px;
}
.roller-editor-card .check-line {
    display:flex;
    align-items:center;
    gap:9px;
}
.roller-editor-card .check-line input {
    width:auto;
}
.roller-editor-card .button {
    justify-self:start;
}
.roller-library {
    display:grid;
    gap:10px;
}
.roller-library>h2 {
    margin-bottom:6px;
}
.roller-library article {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--panel);
}
.roller-library article>div {
    display:grid;
    grid-template-columns:70px 1fr;
    align-items:center;
    column-gap:14px;
}
.roller-library h3 {
    margin:0;
    font-size:14px;
}
.roller-library p {
    grid-column:2;
    margin:4px 0 0;
    color:var(--muted);
    font-size:11px;
}
.roller-die {
    grid-row:1/3;
    display:grid;
    place-items:center;
    min-height:44px;
    border:1px solid #594974;
    border-radius:8px;
    background:#251d34;
    color:#dbcaff;
    font:700 12px Consolas,monospace;
}
.roller-library form {
    margin:0;
}
@media(max-width:760px) {
    .roller-editor-card {
        grid-template-columns:1fr;
        padding:20px;
    }
    .roller-fields {
        grid-template-columns:1fr;
    }
    .roller-library article {
        align-items:stretch;
        flex-direction:column;
    }
    .roller-library article form button {
        width:100%;
    }
}
.roller-actions {
    display:flex;
    align-items:center;
    gap:8px;
}
.roller-result {
    display:grid;
    gap:5px;
    margin:20px 0;
    padding:18px 20px;
    border:1px solid #68518e;
    border-radius:10px;
    background:linear-gradient(135deg,#241a35,#141118);
}
.roller-result span {
    color:#bca6e7;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.roller-result strong {
    font-size:19px;
}
.roller-result p {
    margin:0;
    color:var(--muted);
    font-size:12px;
}
.roller-result p:empty {
    display:none;
}
/* Authenticator setup */ .mfa-setup-card {
    width:min(920px,100%);
    max-width:none;
}
.mfa-setup-grid {
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:38px;
    align-items:start;
}
.mfa-qr-panel {
    padding:24px;
    border:1px solid #3d354c;
    border-radius:13px;
    background:#111014;
    text-align:center;
}
.mfa-qr-panel img {
    display:block;
    width:100%;
    height:auto;
    border:12px solid #fff;
    border-radius:8px;
    background:#fff;
}
.mfa-qr-panel p {
    margin:15px 0 0;
    color:var(--muted);
    font-size:11px;
    line-height:1.6;
}
.mfa-instructions ol {
    margin:0 0 22px;
    padding-left:22px;
    color:#d4d4d9;
    line-height:1.9;
}
.mfa-instructions details {
    margin-bottom:22px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#111113;
    color:var(--muted);
}
.mfa-instructions summary {
    cursor:pointer;
    color:#d1c3ee;
    font-size:12px;
}
.mfa-shared-key {
    display:block;
    margin-top:9px;
    padding:10px;
    border-radius:6px;
    background:#09090b;
    color:#d8c5ff;
    word-break:break-all;
}
.mfa-instructions form {
    display:grid;
    gap:17px;
}
.mfa-recovery-codes {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin:0 0 25px;
}
.mfa-recovery-codes code {
    padding:11px;
    border:1px solid var(--line);
    border-radius:6px;
    background:#111113;
    color:#d9c9f5;
    text-align:center;
}
@media(max-width:760px) {
    .mfa-setup-grid {
        grid-template-columns:1fr;
    }
    .mfa-qr-panel {
        max-width:300px;
        margin:auto;
    }
    .mfa-recovery-codes {
        grid-template-columns:1fr;
    }
}
/* User-first site administration */ .user-admin-hero {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:28px;
}
.user-admin-hero h1 {
    margin:0 0 8px;
    font-size:clamp(38px,5vw,60px);
    letter-spacing:-.055em;
}
.user-admin-hero>div>p:last-child {
    margin:0;
    color:var(--muted);
}
.user-admin-summary {
    display:flex;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--panel);
    overflow:hidden;
}
.user-admin-summary span {
    display:grid;
    gap:4px;
    padding:14px 17px;
    border-right:1px solid var(--line);
    color:var(--muted);
    font-size:9px;
}
.user-admin-summary span:last-child {
    border:0;
}
.user-admin-summary strong {
    color:var(--text);
    font-size:20px;
}
.admin-notice {
    margin-bottom:18px;
    padding:13px 16px;
    border:1px solid #3a7455;
    border-radius:9px;
    background:#11251a;
    color:#a6e5bd;
}
.admin-section-nav {
    display:flex;
    gap:5px;
    margin-bottom:20px;
    border-bottom:1px solid var(--line);
}
.admin-section-nav a {
    display:flex;
    gap:8px;
    padding:11px 14px;
    border-bottom:2px solid transparent;
    color:var(--muted);
    font-size:12px;
}
.admin-section-nav a:hover,.admin-section-nav a.is-active {
    border-color:var(--accent);
    color:#fff;
}
.admin-section-nav span {
    padding:2px 6px;
    border-radius:20px;
    background:#222226;
    color:var(--faint);
    font-size:9px;
}
.user-admin-workspace,.admin-data-panel {
    border:1px solid var(--line);
    border-radius:13px;
    background:#0e0e10;
    overflow:hidden;
}
.user-admin-toolbar {
    display:grid;
    grid-template-columns:minmax(240px,1fr) 190px auto auto;
    align-items:end;
    gap:10px;
    padding:18px;
    border-bottom:1px solid var(--line);
    background:#131316;
}
.user-admin-toolbar label {
    display:grid;
    gap:6px;
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.user-admin-toolbar input,.user-admin-toolbar select,.user-management-actions select,.admin-record-list select {
    width:100%;
    border:1px solid #34343a;
    border-radius:7px;
    background:#0d0d0f;
    color:var(--text);
    padding:10px;
}
.user-result-count {
    padding:12px 20px;
    border-bottom:1px solid var(--line);
    color:var(--muted);
    font-size:11px;
}
.user-management-card {
    display:grid;
    grid-template-columns:minmax(300px,1.5fr) minmax(240px,1fr) minmax(260px,auto);
    align-items:center;
    gap:22px;
    padding:21px;
    border-bottom:1px solid var(--line);
    background:#111113;
}
.user-management-card:last-child {
    border:0;
}
.user-management-card:hover {
    background:#151518;
}
.user-management-card.is-locked {
    border-left:3px solid #b75a68;
    background:#151012;
}
.user-management-identity {
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}
.user-admin-avatar {
    display:grid;
    place-items:center;
    flex:none;
    width:44px;
    height:44px;
    border-radius:11px;
    background:linear-gradient(145deg,#493965,#272230);
    color:#e4d8f7;
    font:700 17px Georgia;
}
.user-management-identity>div {
    min-width:0;
}
.user-title-line {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.user-title-line h2 {
    margin:0 4px 0 0;
    font-size:15px;
}
.user-management-identity p {
    margin:5px 0 7px;
    color:var(--muted);
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.user-security-line {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    color:var(--faint);
    font-size:9px;
}
.user-security-line span:before {
    content:"";
    display:inline-block;
    width:5px;
    height:5px;
    margin-right:5px;
    border-radius:50%;
    background:#666;
}
.user-security-line .is-good:before {
    background:#52bc78;
}
.user-security-line .is-warn:before {
    background:#d89b42;
}
.user-badge {
    display:inline-flex;
    width:max-content;
    padding:4px 7px;
    border:1px solid #44444a;
    border-radius:20px;
    color:#bbb;
    background:#242428;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}
.user-badge.gm {
    border-color:#5e4a83;
    background:#261d36;
    color:#d5c3ff;
}
.user-badge.player {
    border-color:#38536f;
    background:#172332;
    color:#a9ceef;
}
.user-badge.admin {
    border-color:#846626;
    background:#33280f;
    color:#f4d482;
}
.user-badge.locked {
    border-color:#713c47;
    background:#32171d;
    color:#ef9cab;
}
.user-management-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.user-management-stats span {
    display:grid;
    gap:3px;
    color:var(--faint);
    font-size:9px;
}
.user-management-stats strong {
    color:#d4d4d9;
    font-size:11px;
}
.user-management-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}
.user-management-actions form {
    margin:0;
}
.grant-access-form {
    display:flex;
    gap:6px;
}
.grant-access-form select {
    width:92px;
    padding:8px;
}
.button-danger-outline {
    border-color:#6a3b45;
    background:#251318;
    color:#e7a1af;
}
.user-more-actions {
    position:relative;
}
.user-more-actions>summary {
    list-style:none;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#19191c;
    color:var(--muted);
    font-size:11px;
    cursor:pointer;
}
.user-more-actions[open]>div {
    position:absolute;
    right:0;
    top:42px;
    z-index:5;
    display:grid;
    gap:6px;
    width:180px;
    padding:8px;
    border:1px solid #45404e;
    border-radius:9px;
    background:#111114;
    box-shadow:0 18px 45px #000b;
}
.user-more-actions button {
    width:100%;
}
.admin-empty-state {
    padding:60px;
    text-align:center;
}
.admin-empty-state p {
    color:var(--muted);
}
.admin-data-panel>header {
    display:flex;
    justify-content:space-between;
    padding:20px;
    border-bottom:1px solid var(--line);
}
.admin-data-panel>header h2 {
    margin:3px 0 0;
}
.admin-record-list article {
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(280px,1fr) auto auto;
    align-items:center;
    gap:16px;
    padding:17px 20px;
    border-bottom:1px solid var(--line);
}
.admin-record-list h3 {
    margin:0 0 5px;
}
.admin-record-list p {
    margin:0;
    color:var(--muted);
    font-size:10px;
}
.admin-record-list form {
    display:flex;
    gap:7px;
}
.admin-record-list.subscriptions article {
    grid-template-columns:minmax(240px,1fr) auto 180px auto;
}
@media(max-width:1100px) {
    .user-admin-hero {
        align-items:start;
        flex-direction:column;
    }
    .user-management-card {
        grid-template-columns:1fr;
    }
    .user-management-actions {
        justify-content:flex-start;
    }
    .user-admin-toolbar {
        grid-template-columns:1fr 180px auto;
    }
}
@media(max-width:700px) {
    .user-admin-summary {
        width:100%;
    }
    .user-admin-summary span {
        flex:1;
        padding:11px;
    }
    .user-admin-toolbar {
        grid-template-columns:1fr;
    }
    .user-management-actions {
        align-items:stretch;
        flex-direction:column;
    }
    .grant-access-form {
        display:grid;
        grid-template-columns:90px 1fr;
    }
    .user-more-actions[open]>div {
        position:static;
        width:100%;
        margin-top:6px;
    }
    .admin-record-list article,.admin-record-list.subscriptions article {
        grid-template-columns:1fr;
    }
}
/* Spacious primary navigation */ @media(min-width:761px) {
    .app-sidebar {
        width:292px;
        padding:26px 20px;
    }
    .app-frame {
        margin-left:292px;
    }
    .app-sidebar>.product-mark {
        padding:0 10px 30px;
        font-size:18px;
    }
    .app-sidebar .app-nav {
        gap:6px;
    }
    .app-sidebar .app-nav-link {
        min-height:44px;
        padding:11px 13px;
        border-radius:9px;
        font-size:13px;
    }
    .app-sidebar .app-nav-link span:first-child {
        display:grid;
        place-items:center;
        width:28px;
        height:28px;
        border-radius:7px;
        background:#1c1a22;
        color:#c8b4f2;
    }
    .app-sidebar .account-menu {
        align-items:flex-start;
        margin-top:20px;
        padding:18px 10px 2px;
    }
    .app-sidebar .account-avatar {
        flex:none;
        width:38px;
        height:38px;
    }
    .app-sidebar .account-copy {
        width:100%;
        gap:3px;
    }
    .app-sidebar .account-copy>a {
        display:grid;
        padding:5px 7px;
        border-radius:6px;
    }
    .app-sidebar .account-copy>a:hover {
        background:#1b1b1f;
    }
    .app-sidebar .account-copy strong {
        font-size:13px;
    }
    .app-sidebar .account-copy small {
        font-size:11px;
    }
    .app-sidebar .account-copy form {
        margin-top:5px;
        padding-top:8px;
        border-top:1px solid var(--line);
    }
    .app-sidebar .account-copy form button {
        width:100%;
        padding:7px;
        border:0;
        border-radius:6px;
        background:transparent;
        color:#b9a7dd;
        text-align:left;
        cursor:pointer;
    }
    .app-sidebar .account-copy form button:hover {
        background:#211a2b;
        color:#fff;
    }
}
.nav-icon svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.app-nav-link:hover .nav-icon,.app-nav-link.is-active .nav-icon {
    color:#dfd4fb;
    background:#292331;
}
/* Keep account actions inside the user row instead of clipping below the panel. */ .user-management-actions {
    align-items:flex-start;
}
.user-more-actions[open]>div {
    position:static;
    width:190px;
    margin-top:7px;
    box-shadow:none;
}
.user-management-card:has(.user-more-actions[open]) {
    align-items:start;
}
/* Authenticated member home */ .topbar-context {
    margin-right:auto;
    color:var(--muted);
    font-size:12px;
    letter-spacing:.04em;
}
.member-hero {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:34px;
    padding:40px;
    border:1px solid #3b3150;
    border-radius:16px;
    background:radial-gradient(circle at 85% 15%,#7351bb35,transparent 32%),linear-gradient(135deg,#17131f,#101013);
}
.member-hero h1 {
    margin:0 0 12px;
    font-size:clamp(38px,5vw,62px);
    letter-spacing:-.055em;
}
.member-hero p:last-child {
    max-width:720px;
    margin:0;
    color:var(--muted);
    line-height:1.65;
}
.member-plan {
    flex:none;
    padding:8px 12px;
    border:1px solid #45454b;
    border-radius:99px;
    color:#b7b7be;
    background:#17171a;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.member-plan.is-gm {
    border-color:#8268ba;
    color:#d9caff;
    background:#281f3a;
}
.member-stat-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:34px;
}
.member-stat-grid article {
    display:grid;
    gap:7px;
    padding:20px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--panel);
}
.member-stat-grid strong {
    font-size:24px;
}
.member-stat-grid span {
    color:var(--muted);
    font-size:11px;
}
.member-paths {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.member-path-card {
    display:grid;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:17px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--panel);
    transition:.16s;
}
.member-path-card:hover {
    transform:translateY(-2px);
    border-color:#665482;
    background:var(--panel2);
}
.member-path-card.member-path-featured {
    border-color:#594674;
    background:linear-gradient(135deg,#20182d,#131117);
}
.member-path-icon {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:11px;
    background:#2e2540;
    color:#d8c7ff;
    font-size:12px;
    font-weight:800;
}
.member-path-card small {
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:9px;
}
.member-path-card h2 {
    margin:5px 0 7px;
    font-size:18px;
}
.member-path-card p {
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}
.member-path-card>b {
    color:var(--accent);
    font-size:20px;
}
@media(max-width:760px) {
    .member-hero {
        align-items:flex-start;
        flex-direction:column;
        padding:27px;
    }
    .member-stat-grid {
        grid-template-columns:1fr;
    }
    .member-paths {
        grid-template-columns:1fr;
    }
    .member-path-card {
        padding:18px;
    }
}
.import-marker-panel {
    width:390px;
    overflow:auto;
}
.import-marker-panel input[type=file] {
    width:100%;
    padding:9px;
    border:1px dashed var(--line);
    border-radius:7px;
    background:#0d0d0f;
}
.coordinate-import-summary {
    padding:10px;
    border:1px solid #4f4268;
    border-radius:7px;
    background:#191326;
    color:#d9c6f4;
    font-size:11px;
    line-height:1.5;
}
.coordinate-import-preview {
    max-height:260px;
    overflow:auto;
    border:1px solid var(--line);
    border-radius:7px;
}
.coordinate-import-preview>div {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 9px;
    border-bottom:1px solid var(--line);
}
.coordinate-import-preview>div:last-of-type {
    border-bottom:0;
}
.coordinate-import-preview strong {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}
.coordinate-import-preview small {
    flex:none;
    color:var(--muted);
    font-size:9px;
}
.coordinate-import-preview p {
    margin:0;
    padding:8px;
    color:var(--muted);
    font-size:10px;
    text-align:center;
}
@media(max-width:760px) {
    .import-marker-panel {
        width:min(390px,calc(100vw - 72px));
    }
}
.hub-hero {
    max-width:760px;
    margin-bottom:42px;
}
.hub-hero h1 {
    font-size:clamp(34px,5vw,52px);
    letter-spacing:-.045em;
    margin:0 0 12px;
}
.hub-hero>p:last-child {
    color:var(--muted);
    line-height:1.7;
    margin:0;
}
.hub-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.hub-card {
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    min-height:126px;
    padding:20px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
    transition:.16s;
}
.hub-card:hover {
    transform:translateY(-2px);
    border-color:#4a405e;
    background:var(--panel2);
}
.hub-card-icon {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:11px;
    background:#282132;
    color:#d9c8fb;
    font-size:11px;
    font-weight:800;
}
.hub-card h2 {
    font-size:16px;
    margin:0 0 6px;
}
.hub-card p {
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
    margin:0;
}
.hub-card-arrow {
    color:var(--accent);
    font-size:18px;
}
.hub-card small,.status-pill {
    color:#bba5ef;
    border:1px solid #493c61;
    border-radius:20px;
    padding:5px 8px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.hub-card.is-coming {
    opacity:.8;
}
.hub-card.is-coming:hover {
    transform:none;
    border-color:var(--line);
    background:var(--panel);
}
.community-preview {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:30px;
    border:1px dashed #494052;
    border-radius:14px;
    background:linear-gradient(145deg,#15121b,#101012);
}
.community-preview>div {
    max-width:650px;
}
.community-preview h2 {
    font-size:21px;
    margin:18px 0 8px;
}
.community-preview p {
    color:var(--muted);
    line-height:1.65;
    margin:0;
}
@media(max-width:760px) {
    .hub-grid {
        grid-template-columns:1fr;
    }
    .hub-card {
        grid-template-columns:42px minmax(0,1fr) auto;
        padding:16px;
    }
    .hub-card-icon {
        width:42px;
        height:42px;
    }
    .community-preview {
        flex-direction:column;
    }
}

/* Centered authentication surface */
.auth-body {
    min-height: 100vh;
    margin: 0;
    background: #09090b;
}
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.auth-content {
    width: min(100%, 520px);
    padding: 0;
    background: transparent;
}
.auth-card {
    width: 100%;
    max-width: none;
    padding: clamp(28px, 5vw, 48px);
    border: 1px solid #ffffff14;
    border-radius: 16px;
    background: #11151d;
    box-shadow: 0 24px 80px #0009;
}
.auth-card-login {
    max-width: none;
}