:root {
    color-scheme: dark;
    --ice: #b8deed;
    --text: #e0e8ee;
    --muted: #a2b3c1;
    --line: #385365;
    --red: #8b2935;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    color: var(--text);
    background: radial-gradient(ellipse at 50% 0, #203b50 0, #0b1724 48%, #060b12 100%);
    font: 1rem/1.6 "Segoe UI", Arial, sans-serif;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #06101a33, #060c16b3 65%, #060b12f2), url("frozen-citadel.webp") center top / cover no-repeat;
    pointer-events: none;
}
a { color: var(--ice); text-underline-offset: 4px; }
nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 18px max(24px, calc((100vw - 1200px) / 2));
    background: linear-gradient(180deg, #080e17f5, #0b1420ed);
    border-top: 3px solid #8b2935;
    border-bottom: 1px solid #456172;
    box-shadow: 0 8px 30px #0005;
}
.brand { margin-right: auto; line-height: 1.25; }
.brand-name { display: block; font: 600 clamp(1.25rem, 3vw, 1.65rem)/1.3 Georgia, serif; color: #edf1e8; letter-spacing: .035em; }
.brand-subtitle { display: block; margin-top: 5px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #9cb8ca; }
nav a, .nav-button { font-size: .875rem; color: #c4d3df; text-decoration: none; }
nav a:hover { color: white; }
nav form { margin: 0; }
.nav-button { background: transparent; border: 1px solid #344859; padding: 7px 14px; box-shadow: none; }
.admin-header-clocks { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.admin-header-clock { color: #a9bfce; font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-header-clock-utc { color: #8299a9; font-size: .75rem; }
.container { width: min(1200px, 100%); margin: 42px auto 64px; padding: 0 24px; }
.admin-dashboard-page .container { width: min(1440px, 100%); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.25; }
h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: #e4eff4; margin: 0 0 30px; text-shadow: 0 2px 16px #000; }
h2 { font-size: 1.5rem; color: var(--ice); margin: 0 0 24px; }
h3 { font-size: 1.125rem; color: #c8d8e4; margin: 0 0 18px; }
.card {
    position: relative;
    background: linear-gradient(145deg, #152333f5, #0a131ef7);
    border: 1px solid var(--line);
    border-top-color: #73909c;
    border-radius: 3px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: inset 0 0 0 3px #07101b80, 0 15px 40px #0004;
    min-width: 0;
    overflow-x: auto;
}
.card h2::after { content: ""; display: block; width: 50px; height: 2px; margin-top: 14px; background: #993946; }
.muted { color: var(--muted); }
label { display: block; margin: 18px 0 7px; color: #d1dfe9; font-size: .875rem; font-weight: 600; }
input, select, textarea {
    max-width: 100%; width: 100%; padding: 12px 14px;
    border: 1px solid #3f5668; border-radius: 2px;
    background: #060f1bcc; color: #f1f5f8; font: inherit;
    box-shadow: inset 0 2px 6px #0004;
}
button, .button {
    display: inline-block; padding: 11px 18px;
    border: 1px solid #577b90; border-radius: 2px;
    background: linear-gradient(#29495f, #192e42);
    color: #e5f2fa; font: 600 .875rem/1.5 "Segoe UI", Arial, sans-serif;
    cursor: pointer; text-decoration: none; text-align: center;
    box-shadow: inset 0 1px #c4e5ff15, 0 2px 5px #0003;
    transition: background .15s, border-color .15s;
}
button:hover, .button:hover { background: #315772; border-color: #9dcadc; }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid #b9e9ff; outline-offset: 4px; }
.danger { background: linear-gradient(#622631, #3c1b27); border-color: #955363; color: #ffe0e4; }
.danger:hover { background: #7b2b3d; border-color: #db8595; }
.message { margin-bottom: 20px; padding: 14px 18px; background: #44202d; border-left: 3px solid #dd8292; border-radius: 2px; }
.success { background: #163b37; border-color: #76c7ac; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.stat { min-width: 0; overflow-wrap: anywhere; padding: 18px; background: #080f1a8c; border: 1px solid #2b4052; border-radius: 2px; }
.stat strong { display: block; margin-bottom: 8px; color: #a8c0d0; font-size: .875rem; font-weight: 500; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid #2e4354; vertical-align: middle; }
th { color: #a8c5d7; font-weight: 600; background: #09131c80; }
td { overflow-wrap: anywhere; }
tbody tr:hover { background: #23415630; }
.status-good { color: #88d8b8; }
.status-bad { color: #f49daa; }
.status-pending { color: var(--gold); }
.code { font-family: Consolas, monospace; font-size: .9375rem; color: #cee9f4; }
.actions, .tab-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.security-table-actions { align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.security-table-actions form { margin: 0; }
.invite-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; }
.invite-actions form { margin: 0; }
#invite-email-dialog { width: min(560px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; padding: 26px; color: var(--text); background: #101d2b; border: 1px solid #73909c; border-radius: 4px; }
#invite-email-dialog::backdrop { background: #020810b8; }
#invite-email-dialog [hidden] { display: none !important; }
.playerbot-save-dialog { position: relative; width: min(620px, calc(100vw - 32px)); box-sizing: border-box; padding: 26px; color: var(--text); background: #101d2b; border: 1px solid #73909c; border-radius: 4px; }
.playerbot-save-dialog::backdrop { background: #020810c9; }
.playerbot-save-dialog .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 52px; }
.playerbot-save-dialog .dialog-heading h2 { margin: 0; }
.playerbot-save-dialog .dialog-close { position: absolute; top: 14px; right: 14px; min-width: 42px; width: 42px; margin: 0; padding: 7px; }
.tab-buttons { margin-bottom: 24px; border-bottom: 1px solid #385365; padding-bottom: 12px; }
.tab-button { background: #101d2b; border-color: #334f62; color: #adbfcd; }
.tab-button.active { background: #294658; color: #ecf8ff; border-color: #81aabc; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.auth-page .container { margin-top: clamp(38px, 8vh, 90px); }
.auth-page .card { padding: 36px; border-top: 2px solid #9ebfcf; }
.auth-page h1 { font-size: 2rem; margin-bottom: 12px; }
.auth-page form > button[type="submit"] { background: linear-gradient(#973847, #651f2b); border-color: #c06b73; letter-spacing: .07em; }
.auth-page form > button[type="submit"]:hover { background: #a13d4e; }
.site-footer { text-align: center; padding: 0 24px 30px; color: #99adbd; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.preview-bar { background: #172c3e; padding: 8px 20px; font-size: .875rem; text-align: center; border-bottom: 1px solid #496b7e; }
.preview-bar a { display: inline-block; margin: 0 8px; }
@media (max-width: 700px) {
    nav { gap: 16px; padding: 16px 20px; }
    .brand { flex-basis: 100%; }
    .container { margin-top: 28px; padding: 0 16px; }
    .card, .auth-page .card { padding: 22px 18px; }
    .actions > button { flex: 1 1 180px; }
    th, td { padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Compact admin overview, independent of service and maintenance cards. */
.card.admin-summary { padding: 12px; }
.admin-summary .grid { grid-template-columns: minmax(85px, .6fr) minmax(120px, .8fr) minmax(0, 1.4fr) minmax(125px, .8fr); gap: 8px; }
.admin-summary .stat { padding: 9px 12px; font-size: .9375rem; line-height: 1.4; }
.admin-summary .stat strong { margin-bottom: 3px; }
.account-count-link { display: inline-block; font-weight: 600; text-decoration: underline; text-decoration-color: #81aabc; }
.account-count-link:hover { color: #fff; text-decoration-thickness: 2px; }

.admin-dashboard-heading { padding: 12px 0 36px; }
.admin-dashboard-heading h1 { margin: 0; }
.admin-dashboard-nav {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.admin-dashboard-nav .button,
.admin-dashboard-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 54px;
    margin: 0;
    padding: 12px 18px;
    white-space: nowrap;
}
.admin-dashboard-nav .active {
    color: #fff4cf;
    border-color: #b79646;
    background: linear-gradient(#36556a, #22384a);
    box-shadow: inset 0 0 0 1px #d6bb6b33, 0 0 14px #b48b3133;
}
.admin-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    min-height: 27px;
    padding: 1px 7px;
    border: 1px solid #577487;
    border-radius: 999px;
    color: #d9edf7;
    background: #0c1b28aa;
    font-size: .8125rem;
}
.playerbot-page-actions { margin: -8px 0 18px; }
@media (max-width: 700px) {
    .admin-dashboard-heading { padding-bottom: 22px; }
    .admin-dashboard-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-dashboard-nav .button, .admin-dashboard-nav button { min-width: 0; white-space: normal; }
}

.server-health-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.server-health-heading h2 { margin: 0; }
.server-health-heading .muted, .server-health-heading .status-bad { font-size: .8125rem; }
.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.health-stat { min-width: 0; padding: 13px 15px; background: #080f1a8c; border: 1px solid #2b4052; border-radius: 2px; }
.health-title { display: block; min-height: 0; margin: 0 0 5px; padding: 0; color: #a8c5d7; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: .8125rem; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: #56798d; text-underline-offset: 3px; }
.health-title:hover { color: #fff; background: transparent; border: 0; box-shadow: none; text-decoration-color: #a8c5d7; }
.health-stat span { color: #dcebf3; font-size: .9375rem; overflow-wrap: anywhere; }
#health-cpu { white-space: pre-line; }
.health-storage { grid-column: span 1; }
.health-network { grid-column: span 1; }
.health-unavailable .health-stat span { color: var(--muted); }
@media (max-width: 850px) { .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .health-grid { grid-template-columns: minmax(0, 1fr); } .server-health-heading { align-items: flex-start; flex-direction: column; gap: 4px; } }
#health-dialog { width: min(560px, calc(100vw - 32px)); max-height: 90vh; box-sizing: border-box; overflow: auto; padding: 26px; color: var(--text); background: #101d2b; border: 1px solid #73909c; border-radius: 4px; }
#health-dialog::backdrop { background: #020810b8; }
.health-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.health-dialog-heading h2 { margin: 0; }
.health-dialog-heading button { min-width: 44px; padding: 5px 10px; font-size: 1.5rem; line-height: 1; }
.health-detail-grid { display: grid; gap: 9px; margin-top: 18px; }
.health-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 15px; background: #080f1a8c; border: 1px solid #2b4052; }
.health-detail-row strong { color: #a8c5d7; font-size: .875rem; }
.health-detail-row span { color: #dcebf3; text-align: right; }
.health-history-graph-row { position: relative; isolation: isolate; overflow: hidden; }
.health-history-graph-row strong, .health-history-graph-row span { position: relative; z-index: 1; text-shadow: 0 1px 3px #020810; }
.health-history-graph { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .48; pointer-events: none; }
@media (max-width: 700px) {
    .admin-summary .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    .admin-summary .grid { grid-template-columns: minmax(0, 1fr); }
}

.admin-realm-name { margin: 0 0 6px; font-size: .9375rem; line-height: 1.4; color: var(--text); }
.game-settings-card { width: 100%; max-width: none; }
.ai-link-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; max-width: none; margin-top: 22px; }
.ai-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; max-width: none; margin-top: 22px; }
.ai-create-form label { display: block; }
.ai-create-form input, .ai-create-form select, .ai-create-form textarea { width: 100%; box-sizing: border-box; }
.ai-create-form > button { justify-self: start; margin: 0; }
.ai-link-form label { display: block; }
.ai-link-form select, .ai-link-form textarea, .ai-profile-edit-form textarea { width: 100%; box-sizing: border-box; }
.ai-link-form button { margin: 0; white-space: nowrap; }
.ai-link-form > button { justify-self: start; }
.ai-profile-field { align-self: stretch; }
.ai-profile-list { display: grid; gap: 16px; }
.ai-profile-card { padding: 18px 20px; border: 1px solid var(--border); background: rgba(4, 14, 25, .5); }
.ai-linked-companion-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.ai-linked-companion-details h3 { margin: 0; color: #c4deea; font-family: Georgia, serif; font-size: 1.35rem; }
.ai-linked-companion-details > p { margin: 6px 0 0; }
.ai-companion-status { font-size: .95rem; }
.ai-companion-actions { justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.ai-companion-actions button { margin: 0; white-space: nowrap; }
.ai-profile-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.ai-profile-heading h3 { margin: 0; color: #c4deea; font-family: Georgia, serif; font-size: 1.35rem; }
.ai-profile-heading p { margin: 6px 0 0; }
.ai-profile-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 14px; align-items: end; max-width: none; margin: 18px 0; }
.ai-profile-edit-form button { margin: 0; white-space: nowrap; }
.ai-status-card .server-health-heading h2 { margin-bottom: 0; }
.ai-page-actions { display: flex; justify-content: flex-start; margin: 0 0 18px; }
.ai-page-actions button { margin: 0; }
.ai-server-settings-dialog { width: min(720px, calc(100vw - 32px)); }
.ai-server-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: none; }
.ai-server-settings-form label { display: block; }
.ai-server-settings-form input { width: 100%; box-sizing: border-box; }
.ai-settings-wide { grid-column: 1 / -1; }
@media (max-width: 650px) { .ai-server-settings-form { grid-template-columns: 1fr; } .ai-settings-wide { grid-column: auto; } }
.inline-form { display: inline; margin: 0; }
@media (max-width: 850px) { .ai-create-form, .ai-link-form, .ai-profile-edit-form { grid-template-columns: 1fr; } .ai-create-form button, .ai-link-form button, .ai-profile-edit-form button { justify-self: start; } .ai-profile-heading { flex-direction: column; } .ai-linked-companion-card { grid-template-columns: 1fr; } .ai-companion-actions { justify-content: flex-start; } }
.game-settings-form { max-width: 520px; }
.game-settings-form .muted { margin: 9px 0 0; font-size: .875rem; }
.game-rates-form { display: grid; gap: 14px; width: 100%; max-width: none; }
.motd-settings-form { display: grid; gap: 14px; width: 100%; max-width: none; }
.motd-editor { grid-column: 2; grid-row: 1 / span 2; width: min(480px, 42vw); align-self: center; }
.motd-editor textarea { width: 100%; min-height: 92px; margin: 0; box-sizing: border-box; resize: vertical; }
.limitless-settings-form { display: grid; gap: 14px; width: 100%; max-width: none; }
.limitless-settings-form > button { justify-self: start; }
.game-rate-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 24px; row-gap: 6px; padding: 18px 20px; border: 1px solid var(--border); background: rgba(4, 14, 25, .5); }
.game-rate-heading { display: contents; }
.game-rate-heading label { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.05rem; }
.game-rate-label { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.05rem; font-weight: 700; }
.game-rate-field > .muted { grid-column: 1; grid-row: 2; margin: 0; }
.rate-input { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; align-self: center; justify-content: flex-end; gap: 10px; width: 150px; }
.rate-input input { width: 110px; margin: 0; text-align: right; }
.rate-input.printer-ip-input { width: 190px; }
.rate-input.printer-ip-input input { width: 170px; }
.rate-input select { width: 110px; margin: 0; }
.rate-input span { font-size: 1.15rem; }
.dual-rate-input { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: flex-end; gap: 14px; align-self: center; }
.dual-rate-input label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .78rem; color: var(--muted); }
.dual-rate-input input { width: 88px; margin: 0; text-align: right; }
.playerbot-toggle { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; align-self: center; margin: 0; cursor: pointer; }
.playerbot-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold); }
.playerbot-toggle span { min-width: 68px; }
.playerbot-subheading { margin: 16px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.playerbot-map-options { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 9px 18px; align-self: center; }
.playerbot-map-options label { grid-column: auto; grid-row: auto; display: flex; align-items: center; gap: 7px; margin: 0; font-size: .9rem; white-space: nowrap; }
.playerbot-map-options input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.game-settings-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.game-settings-form input.default-setting-value,
.game-settings-form select.default-setting-value,
.game-settings-form label.default-setting-value,
.game-settings-form label.default-setting-value span { color: #70d99b; }
.game-settings-form input.changed-setting-value,
.game-settings-form select.changed-setting-value,
.game-settings-form label.changed-setting-value,
.game-settings-form label.changed-setting-value span { color: #ef7777; }
.online-player-section { margin-top: 26px; }
.online-player-section + .online-player-section { padding-top: 26px; border-top: 1px solid var(--border); }
.online-player-section h2 { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 16px; }
.card .online-player-section h2::after { position: absolute; bottom: 0; left: 0; margin-top: 0; }
.online-group-count { display: inline-flex; min-width: 28px; height: 28px; padding: 0 8px; align-items: center; justify-content: center; border: 1px solid #557589; border-radius: 999px; color: var(--gold); font-family: Arial, sans-serif; font-size: .8rem; font-weight: 700; }
.online-player-group summary, .online-playerbots-section summary { position: relative; display: flex; align-items: center; gap: 10px; width: fit-content; padding-bottom: 16px; color: var(--ice); font-family: Georgia, serif; font-size: 1.65rem; font-weight: 700; cursor: pointer; list-style: none; }
.online-player-group summary::-webkit-details-marker, .online-playerbots-section summary::-webkit-details-marker { display: none; }
.online-player-group summary::after, .online-playerbots-section summary::after { content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background: #993946; }
.online-player-group-arrow { display: inline-block; color: #d9b95b; font-family: Arial, sans-serif; font-size: .72rem; line-height: 1; transition: transform .16s ease; }
.online-player-section[open] .online-player-group-arrow { transform: rotate(90deg); }
.online-player-section-content { margin-top: 14px; }
.setting-history-details { margin-top: 0; }
.login-history-card { position: relative; }
.login-history-card .setting-history-details > summary { width: 100%; padding-right: 125px; }
.login-history-clear { position: absolute; z-index: 2; top: 28px; right: 28px; }
.login-history-clear form { margin: 0; }
@media (max-width: 560px) {
    .login-history-card { padding-top: 22px; }
    .login-history-card .setting-history-details > summary { padding-right: 0; }
    .login-history-clear { position: static; display: flex; justify-content: flex-end; margin-bottom: 18px; }
}
.speech-filter-form, .speech-add-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 14px; align-items: end; }
.speech-filter-form label, .speech-add-form label { margin: 0; }
.speech-phrase-list { display: grid; gap: 12px; }
.speech-phrase-card { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--border); background: rgba(4,14,25,.5); }
.speech-phrase-meta { display: grid; gap: 6px; color: var(--muted); }
.speech-phrase-meta select, .speech-phrase-text { margin: 0; }
.speech-phrase-card .game-settings-actions { flex-wrap: nowrap; }
.speech-phrase-card button { padding: 9px 12px; }
@media(max-width:760px) { .speech-filter-form, .speech-add-form, .speech-phrase-card { grid-template-columns: 1fr; } .speech-phrase-card .game-settings-actions { flex-wrap: wrap; } }
@media (max-width: 560px) {
  .game-rate-field { column-gap: 12px; }
  .motd-editor { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 8px; }
  .game-rate-field:has(.motd-editor) > .muted { grid-row: 2; }
  .rate-input { width: 125px; }
  .rate-input input { width: 88px; }
  .rate-input.printer-ip-input { width: 170px; }
  .rate-input.printer-ip-input input { width: 150px; }
  .dual-rate-input { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin-top: 8px; }
  .game-rate-field:has(.dual-rate-input) > .muted { grid-row: 3; }
  .playerbot-map-options { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr; margin-top: 8px; }
  .playerbot-map-field > .muted { grid-row: 3; }
}

.home-hero { max-width: 740px; padding: 36px 0 48px; }
.home-eyebrow { color: #bdd6e4; font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 20px; }
.home-hero h1 { font-size: clamp(3.5rem, 8vw, 6rem); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 24px; }
.home-welcome { max-width: 480px; font-size: 1.125rem; color: #c6d7e4; }
.home-actions { margin-top: 28px; }
.home-actions .button { min-width: 150px; padding: 13px 24px; }
.home-primary { background: linear-gradient(#973847, #651f2b); border-color: #c06b73; }
.home-primary:hover { background: #a13d4e; }
.home-invite { font-size: .875rem; margin-top: 14px; }
.connection-steps { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 32px; list-style-position: inside; padding: 0; margin: 0; }
.connection-steps li { min-width: 0; color: #a7cadd; }
.connection-steps h3 { display: inline; margin-left: 5px; }
.connection-steps p { color: #adbecb; font-size: .9375rem; margin: 12px 0; }
.connection-steps code { overflow-wrap: anywhere; color: #d2e6f0; }
.realm-command { display: block; padding: 10px 12px; border: 1px solid #385365; background: #08121e; font-size: .875rem; }
@media (max-width: 800px) { .connection-steps { grid-template-columns: 1fr; gap: 24px; } .home-hero { padding-top: 20px; } }

.service-list { display: flex; flex-direction: column; gap: 12px; }
.service-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 18px; background: #080f1a8c; border: 1px solid #2b4052; border-radius: 2px; }
.service-status { min-width: 180px; font-size: .9375rem; }
.service-status > strong { display: block; color: #c8dce9; margin-bottom: 4px; font-weight: 600; }
.service-port { margin-top: 4px; font-size: .875rem; color: var(--muted); }
.service-actions { justify-content: flex-end; }
@media (max-width: 800px) {
    .service-row { align-items: stretch; flex-direction: column; gap: 14px; }
    .service-actions { justify-content: flex-start; }
}

.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.account-heading h1 { margin: 0; }
.account-verification { display: block; margin-top: 5px; font-size: .8125rem; }
.profile-notice { padding: 10px 12px; border: 1px solid currentColor; background: #09131f; }
.profile-characters { display: grid; gap: 14px; }
.profile-character { padding: 18px; border: 1px solid #2b4052; background: #080f1a8c; }
.profile-character-heading, .profile-download { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.profile-character-heading h3, .profile-character-heading p, .profile-download h2 { margin: 0; }
.profile-character-title { display: flex; align-items: center; gap: 7px; }
.profile-equipment-open { min-width: 0; padding: 2px; border: 0; background: transparent; box-shadow: none; color: var(--ice); font-size: .9rem; line-height: 1; }
.profile-equipment-open:hover { border: 0; background: transparent; box-shadow: none; color: #fff; transform: scale(1.12); }
.profile-character-heading p { margin-top: 4px; }
.profile-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.profile-detail-grid div { min-width: 0; }
.profile-detail-grid strong, .profile-professions > strong { display: block; color: #a8c0d0; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.profile-detail-grid span { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.profile-professions { margin-bottom: 16px; line-height: 1.7; }
.profile-achievements { margin-bottom: 16px; }
.profile-achievements > strong { display: block; margin-bottom: 7px; color: #a8c0d0; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.profile-achievement-list { display: grid; gap: 1px; border-left: 2px solid #6f9eb7; background: #20384a; }
.profile-achievement-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 11px; background: #0b1623; }
.profile-achievement-list time { flex: 0 0 auto; color: #93a8b8; font-size: .9rem; }
.profile-achievement-name { position: relative; cursor: help; text-decoration: underline dotted #7193a8; text-underline-offset: 4px; }
.profile-achievement-name::after { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 9px); width: max-content; max-width: min(320px, 72vw); padding: 9px 11px; border: 1px solid #638aa3; border-radius: 3px; background: #07111d; box-shadow: 0 7px 22px #000b; color: #dce8ef; content: attr(data-tooltip); font-size: .86rem; font-weight: 400; line-height: 1.4; opacity: 0; overflow-wrap: anywhere; pointer-events: none; text-decoration: none; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.profile-achievement-name:hover::after, .profile-achievement-name:focus-visible::after { opacity: 1; transform: translateY(0); }
.profile-equipment-dialog { position: relative; width: min(1152px, calc(100vw - 48px)); max-width: none; max-height: none; box-sizing: border-box; overflow: visible; margin: 24px auto; padding: 20px; color: var(--text); background: #10100f; border: 1px solid #d8e4e9; }
.profile-equipment-dialog::backdrop { background: #020810c9; }
.profile-equipment-dialog > .dialog-heading { position: relative; min-height: 96px; padding-right: 0; }
.profile-equipment-navigation { position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; gap: 8px; transform: translateX(-50%); }
.profile-equipment-navigation button { width: auto; min-width: 46px; margin: 0; padding: 8px 13px; }
.profile-equipment-navigation .dialog-close { min-width: 84px; }
.profile-paper-doll { display: grid; grid-template-columns: 84px minmax(420px, 1fr) 84px; gap: 14px; align-items: stretch; }
.profile-equipment-column { display: grid; gap: 7px; align-content: start; }
.profile-equipment-slot { position: relative; display: grid; justify-items: center; min-width: 0; min-height: 62px; padding: 5px; border: 1px solid #31495b; background: #09131f; }
.profile-equipment-column .profile-equipment-slot { width: 84px; height: 84px; min-height: 0; box-sizing: border-box; }
.profile-equipment-slot small { display: block; width: 100%; margin-bottom: 3px; color: #8fa6b6; font-size: .62rem; letter-spacing: .055em; text-align: center; text-transform: uppercase; }
.profile-equipment-icon-frame { position: relative; display: block; width: 42px; height: 42px; overflow: hidden; border: 2px solid #fff; border-radius: 4px; background: radial-gradient(circle, #294252, #07111d 72%); box-shadow: inset 0 0 7px #000, 0 1px 4px #000b; }
.profile-equipment-icon { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-equipment-icon-fallback { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: #b7cad5; font: 600 1.2rem/1 Georgia, serif; }
.profile-equipment-empty { display: grid; width: 42px; height: 42px; place-items: center; border: 1px dashed #334b5b; border-radius: 4px; color: #708695; font-size: .64rem; }
.profile-equipment-icon-frame.quality-0 { border-color: #9d9d9d; }.profile-equipment-icon-frame.quality-1 { border-color: #fff; }.profile-equipment-icon-frame.quality-2 { border-color: #1eff00; }.profile-equipment-icon-frame.quality-3 { border-color: #39f; }.profile-equipment-icon-frame.quality-4 { border-color: #a335ee; }.profile-equipment-icon-frame.quality-5 { border-color: #ff8000; }.profile-equipment-icon-frame.quality-6 { border-color: #e6cc80; }.profile-equipment-icon-frame.quality-7 { border-color: #0cf; }
.profile-item-tooltip { position: absolute; z-index: 40; left: calc(100% + 8px); top: -8px; display: none; width: min(310px, 68vw); padding: 12px 14px; border: 1px solid #6c7d91; border-radius: 3px; background: #05080f; box-shadow: 0 9px 28px #000d; color: #fff; font-size: .84rem; line-height: 1.35; text-align: left; }
.profile-equipment-column:last-child .profile-item-tooltip { right: calc(100% + 8px); left: auto; }
.profile-equipment-slot:hover .profile-item-tooltip, .profile-equipment-slot:focus-visible .profile-item-tooltip { display: block; }
.profile-item-tooltip > strong, .profile-item-tooltip > span { display: block; color: #fff; }
.profile-item-tooltip > strong { margin-bottom: 3px; font-size: 1rem; }.profile-item-tooltip span em { float: right; color: inherit; font-style: normal; }
.profile-item-tooltip .quality-0 { color: #9d9d9d; }.profile-item-tooltip .quality-1 { color: #fff; }.profile-item-tooltip .quality-2 { color: #1eff00; }.profile-item-tooltip .quality-3 { color: #39f; }.profile-item-tooltip .quality-4 { color: #a335ee; }.profile-item-tooltip .quality-5 { color: #ff8000; }.profile-item-tooltip .quality-6 { color: #e6cc80; }.profile-item-tooltip .quality-7 { color: #0cf; }
.profile-item-tooltip .item-stat, .profile-item-tooltip .item-sockets { color: #1eff00; }.profile-item-tooltip .item-description { margin-top: 5px; color: #ffd100; }
.profile-character-silhouette { display: flex; min-height: 390px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #345269; background: radial-gradient(circle at 50% 35%, #274861 0, #0b1927 42%, #07101a 75%); text-align: center; }
.profile-character-visual { position: relative; min-width: 0; min-height: 812px; height: 812px; }
.profile-character-visual > .profile-character-viewer, .profile-character-visual > .profile-character-silhouette { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; box-sizing: border-box; }
.profile-character-viewer { overflow: hidden; border: 1px solid #345269; background: radial-gradient(circle at 50% 35%, #274861 0, #0b1927 42%, #07101a 75%); }
.profile-character-viewer canvas { display: block; width: 100%; height: 100%; min-height: 0; }
.profile-character-viewer { position: relative; }
.profile-character-viewer-controls { position: absolute; z-index: 2; right: 10px; bottom: 10px; left: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid #345269; background: #06101ad9; color: #9eb4c3; font-size: .75rem; pointer-events: none; }
.profile-character-viewer-controls button { width: auto; min-width: 0; margin: 0; padding: 5px 8px; font-size: .72rem; pointer-events: auto; }
@media (max-width: 620px) { .profile-character-viewer-controls span { display: none; } .profile-character-viewer-controls { justify-content: flex-end; } }
.profile-character-silhouette > span { display: grid; width: 92px; height: 92px; place-items: center; margin-bottom: 13px; border: 2px solid #bd9a43; border-radius: 50%; box-shadow: 0 0 28px #568daf55; color: #f0d580; font-family: Georgia, serif; font-size: 3rem; }
.profile-character-silhouette strong { font-family: Georgia, serif; font-size: 1.25rem; }.profile-character-silhouette small { margin-top: 4px; color: #9eb4c3; }
.profile-equipment-weapons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.profile-character-stats { margin-top: 20px; padding-top: 16px; border-top: 1px solid #30485a; }.profile-character-stats h3 { margin: 0 0 12px; }
.profile-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }.profile-stats-grid > div { padding: 8px 10px; border: 1px solid #2c4253; background: #09131f; }.profile-stats-grid small, .profile-stats-grid strong { display: block; }.profile-stats-grid small { color: #91a9b9; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }.profile-stats-grid strong { margin-top: 3px; color: #fff; }
.profile-privacy-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.profile-privacy-heading h2, .profile-privacy-heading p { margin-top: 0; }
.profile-settings-card { padding: 20px; border: 1px solid #30495b; background: #08121eaa; box-shadow: inset 0 1px 0 #ffffff08; }
.profile-privacy-form { max-width: none; }.profile-privacy-options { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 10px 24px; margin: 20px 0; padding: 18px; border: 1px solid #30495b; background: #07111b80; }.profile-privacy-options legend { padding: 0 7px; color: #b9cfdb; }.profile-privacy-options label { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 400; }.profile-privacy-options input { width: auto; margin: 0; }.profile-account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }.profile-password-card, .profile-email-card { min-width: 0; }.profile-password-card form, .profile-email-card form { max-width: none; }.profile-email-card input[readonly] { color: #a9c2d2; background: #07111b; }
.profile-public-preview-dialog { width: min(880px, calc(100vw - 28px)); }.profile-public-card + .profile-public-card { margin-top: 12px; }.profile-public-visible { display: inline-block; margin: 0 12px 14px 0; padding: 5px 9px; border: 1px solid #37546a; color: #a9c2d2; font-size: .82rem; }
.profile-character form { margin: 0; }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.profile-section-heading h1, .profile-section-heading h2 { margin: 0; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-tab { min-width: 112px; margin: 0; }
.profile-tab.is-active { border-color: #d6b36a; color: #f4dda3; box-shadow: inset 0 0 0 1px #d6b36a55, 0 0 14px #d6b36a22; }
[data-profile-panel][hidden] { display: none; }
.profile-guilds { display: grid; gap: 14px; }
.profile-guild { padding: 18px; border: 1px solid #2b4052; background: #080f1a8c; }
.profile-guild.is-focused { border-color: #d6b36a; box-shadow: 0 0 18px #d6b36a2b; }
.profile-guild-link { display: inline; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ice); font: inherit; line-height: inherit; text-align: left; vertical-align: baseline; text-decoration: underline; text-underline-offset: 3px; }
.profile-guild-link:hover { border: 0; background: transparent; box-shadow: none; color: #fff; }
.profile-currency-link { display: inline; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: #a8c0d0; font: inherit; text-transform: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 3px; }
.profile-currency-link:hover { border: 0; background: transparent; box-shadow: none; color: #fff; }
.profile-currency-dialog { width: min(600px, calc(100vw - 32px)); max-height: 90vh; box-sizing: border-box; overflow-y: auto; padding: 26px; color: var(--text); background: #101d2b; border: 1px solid #73909c; border-radius: 4px; }
.profile-currency-dialog::backdrop { background: #020810c9; }
.profile-currency-dialog .dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-currency-dialog .dialog-heading h2 { margin: 3px 0 18px; }
.profile-currency-dialog .dialog-close { min-width: 42px; width: 42px; margin: 0; padding: 7px; }
.profile-currency-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #2b4052; border: 1px solid #2b4052; }
.profile-currency-list div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 12px; background: #0b1622; }
.profile-currency-list span { color: #b7c9d5; }
.profile-currency-list strong { color: #f4dda3; white-space: nowrap; }
.profile-currency-group + .profile-currency-group { margin-top: 20px; }
.profile-currency-group h3 { margin: 0 0 8px; color: #d7e4eb; font-size: 1rem; }
.profile-guild-message { margin-top: 16px; padding: 14px; border-left: 3px solid #8aa9bf; background: #101c29aa; }
.profile-guild-message p { margin: 6px 0 0; white-space: pre-wrap; }
.profile-guild-membership { display: grid; grid-template-columns: minmax(130px, .4fr) 1fr; gap: 12px; margin-top: 16px; }
.profile-guild-actions { display: flex; align-items: center; gap: 12px; }
.profile-guild-actions button { width: auto; margin: 0; }
.profile-roster-wrap { margin-top: 18px; overflow-x: auto; }
.profile-roster { width: 100%; min-width: 620px; }
.profile-roster th, .profile-roster td { text-align: left; }
.profile-character-link { display: inline; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ice); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.profile-character-link:hover { border: 0; background: transparent; box-shadow: none; color: #fff; }
.profile-roster-view { display: inline-block; margin-left: 6px; color: var(--ice); font-size: .78rem; text-decoration: none; }.profile-roster-view:hover { color: #fff; transform: scale(1.12); }
.public-profile-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid #30495b; }.public-profile-section h2 { margin-top: 0; }
.profile-roster-dialog { width: min(1040px, calc(100vw - 24px)); height: min(860px, calc(100vh - 24px)); padding: 0; overflow: hidden; border: 1px solid #6b8799; background: #07111b; }.profile-roster-dialog[open] { display: flex; flex-direction: column; }.profile-roster-dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: 64px; padding: 10px 14px 10px 22px; border-bottom: 1px solid #385365; background: #0a1622; }.profile-roster-dialog-header strong { color: #c9dce7; font-family: Georgia, serif; font-size: 1.1rem; }.profile-roster-dialog iframe { width: 100%; min-height: 0; flex: 1 1 auto; border: 0; background: #07111b; }.profile-roster-dialog-close { position: static; margin: 0; }
.profile-unread-dot { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: #d6b36a; vertical-align: middle; }
.profile-message-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profile-message-columns h3 { margin-top: 0; }
.profile-message-list { display: grid; gap: 10px; }
.profile-message { border: 1px solid #2b4052; background: #080f1a8c; }
.profile-message.is-unread { border-color: #7c6a3d; }
.profile-message summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; cursor: pointer; }
.profile-message summary small { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; }
.profile-message > p { margin: 0; padding: 0 13px 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-message form { padding: 0 13px 13px; }
.profile-message form button { width: auto; margin: 0; }
.profile-new { color: #f4dda3; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; }
.profile-message-dialog { width: min(560px, calc(100vw - 32px)); max-height: 90vh; box-sizing: border-box; overflow-y: auto; padding: 26px; color: var(--text); background: #101d2b; border: 1px solid #73909c; border-radius: 4px; }
.profile-message-dialog::backdrop { background: #020810c9; }
.profile-message-dialog .dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-message-dialog .dialog-heading h2 { margin: 3px 0 18px; }
.profile-message-dialog .dialog-close { min-width: 42px; width: 42px; margin: 0; padding: 7px; }
.profile-message-dialog textarea { width: 100%; resize: vertical; }
.profile-settings { width: 100%; }
.profile-settings h2 { margin-top: 0; }
.profile-settings button { margin-top: 18px; }
.profile-download p { margin-bottom: 0; }
.profile-download .button { flex: 0 0 auto; }
.profile-downloads-heading { margin: 4px 0 22px; }
.profile-downloads-heading h2, .profile-addon-heading { margin-bottom: 8px; }
.profile-downloads-heading p { margin: 0; }
.profile-addon-heading { margin-top: 30px; }
.profile-download-list { display: grid; gap: 14px; }
.profile-download-card { padding: 20px 22px; border: 1px solid #30495b; background: #07111dcc; box-shadow: inset 0 1px 0 #ffffff08; }
.profile-download-current { border-color: #8f793b; box-shadow: inset 3px 0 #b99a43, inset 0 1px 0 #ffffff08; }
.profile-download-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.profile-download-title h3 { margin: 5px 0 0; color: var(--ice); }
.profile-download-title .button { flex: 0 0 auto; }
.profile-download-card p { max-width: 780px; margin: 13px 0 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 620px) {
    .profile-equipment-dialog { width: calc(100vw - 28px); max-height: none; margin: 14px auto; padding: 14px; }
    .profile-equipment-dialog > .dialog-heading { min-height: 142px; padding-top: 50px; }
    .profile-character-heading, .profile-download, .profile-section-heading { align-items: stretch; flex-direction: column; }
    .profile-achievement-list > div { align-items: flex-start; flex-direction: column; gap: 2px; }
    .profile-paper-doll { grid-template-columns: 1fr 1fr; }.profile-character-visual { grid-column: 1 / -1; grid-row: 1; min-height: 420px; height: 420px; }.profile-equipment-column .profile-equipment-slot { width: 100%; height: auto; min-height: 68px; }.profile-equipment-weapons { grid-template-columns: repeat(3, 1fr); }
    .profile-item-tooltip, .profile-equipment-column:last-child .profile-item-tooltip { position: fixed; top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); }
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-privacy-heading { align-items: stretch; flex-direction: column; }.profile-privacy-options { grid-template-columns: 1fr; }
    .profile-tabs { width: 100%; }
    .profile-tab { flex: 1; min-width: 0; }
    .profile-message-columns { grid-template-columns: 1fr; }
    .profile-account-settings-grid { grid-template-columns: 1fr; }
    .profile-guild-actions { align-items: stretch; flex-direction: column; }
    .profile-currency-list { grid-template-columns: 1fr; }
    .profile-download .button { text-align: center; }
}
.account-settings { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #385365; border-radius: 3px; background: #101d2bcc; color: var(--ice); text-decoration: none; font: 1.75rem/1 "Segoe UI Symbol", "Segoe UI", sans-serif; }
.account-settings:hover { color: #fff; background: #294658; border-color: #81aabc; }

.backup-actions { display: flex; flex-direction: column; gap: 10px; margin-left: auto; }
.backup-standard > button { flex: 1; }
.backup-secondary > button { flex: 1; }
.backup-standard > .backup-stop { flex: 0 0 46px; padding: 8px; font-size: 1.375rem; line-height: 1; }
@media (max-width: 800px) { .backup-actions { margin-left: 0; } }

#mail-dialog, #email-dialog { width: min(540px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; padding: 26px; color: var(--text); background: #101d2b; border: 1px solid #73909c; border-radius: 4px; }
#mail-dialog::backdrop, #email-dialog::backdrop { background: #020810b8; }
.mail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mail-heading h2 { margin: 0; }
.mail-hint { font-size: .875rem; }
#mail-dialog [hidden], #email-dialog [hidden] { display: none !important; }

.character-mail { min-width: 44px; min-height: 44px; padding: 8px 12px; font: 1.5rem/1 "Segoe UI Symbol", "Segoe UI", sans-serif; }

.character-mail { background: transparent; border: 0; box-shadow: none; color: var(--ice); }
.character-mail:hover { background: transparent; border: 0; box-shadow: none; color: #fff; }
.admin-character-message { display: inline; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ice); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.admin-character-message:hover { border: 0; background: transparent; box-shadow: none; color: #fff; }
.admin-character-view { display: inline-block; margin-left: 7px; color: var(--ice); font-size: .8rem; text-decoration: none; }.admin-character-view:hover { color: #fff; transform: scale(1.12); }
#mail-body { width: 100%; resize: vertical; }

.mail-currency { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.account-action-buttons form { margin: 0; }

.home-online { display: inline-block; min-width: 150px; padding: 12px 18px; margin-top: 12px; }

#email-body { width:100%; box-sizing:border-box; padding:12px; color:var(--text); background:#101d2b; border:1px solid #73909c; margin-bottom:16px; font:inherit; }

.admin-page-heading { flex-wrap:wrap; }
.admin-page-links { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.security-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.security-section-heading h2 { margin:0; }
#blocked-ips-dialog { width:min(1100px,calc(100vw - 32px)); max-height:90vh; box-sizing:border-box; overflow:auto; padding:26px; color:var(--text); background:#101d2b; border:1px solid #73909c; border-radius:4px; }
#blocked-ips-dialog::backdrop { background:#020810b8; }
#blocked-ips-dialog .account-heading { flex-wrap:wrap; }
.blocked-ips-popup-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; }
.blocked-ips-popup-heading h1 { margin:0; }
.blocked-ips-popup-heading .dialog-close { flex:0 0 44px; width:44px; min-width:44px; margin:0; padding:7px; font-size:1.5rem; line-height:1; }
@media(max-width:600px) { .admin-page-links { margin-left:0; } #blocked-ips-dialog { padding:16px; } }

.calendar-card { width:100%; max-width:none; }
.calendar-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.calendar-toolbar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-bottom:14px; }
.calendar-toolbar h2 { margin:0; text-align:center; }
.calendar-toolbar h2::after { display:none; }
.calendar-toolbar button { min-width:48px; padding:8px 12px; }
.event-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid #385365; border-left:1px solid #385365; background:#081522; }
.calendar-weekday { padding:10px 6px; border-right:1px solid #385365; border-bottom:1px solid #385365; color:#a9c2d2; font-weight:700; text-align:center; }
.calendar-day { min-height:120px; padding:8px; border-right:1px solid #385365; border-bottom:1px solid #385365; overflow:hidden; }
.calendar-day.outside { background:#050d15; }
.calendar-day.today { box-shadow:inset 0 0 0 2px #b89036; }
.calendar-day-number { display:block; margin-bottom:6px; color:#c9dce7; font-weight:700; }
.calendar-event { display:block; margin:4px 0; padding:5px 7px; border-left:3px solid #65bde5; background:#17364a; color:#e5f1f7; font-size:.78rem; line-height:1.25; overflow-wrap:anywhere; }
.calendar-event.active { border-color:#70d99b; background:#174534; }
.calendar-event.completed { border-color:#718596; background:#26323d; opacity:.8; }
.calendar-event.error { border-color:#ef7777; background:#512631; }
.calendar-dialog { width:min(720px,calc(100vw - 32px)); }
.calendar-event-form { display:grid; gap:14px; margin-top:20px; }
.calendar-event-form label { display:grid; gap:6px; font-weight:700; }
.calendar-event-form textarea { width:100%; resize:vertical; }
.calendar-setting-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; margin:0; padding:14px; border:1px solid #385365; }
.calendar-setting-options legend { padding:0 7px; color:#c9dce7; font-weight:700; }
.calendar-setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; padding:7px 9px; background:#091624; }
.calendar-setting-options label { display:flex; grid-template-columns:none; align-items:center; gap:9px; min-width:0; padding:0; font-weight:400; }
.calendar-setting-options input[type="checkbox"] { flex:0 0 auto; width:18px; min-width:18px; height:18px; margin:0; }
.calendar-setting-options label span { min-width:0; }
.calendar-setting-multiplier { display:flex; align-items:center; gap:6px; }
.calendar-setting-multiplier input { width:78px; min-width:0; padding:7px 9px; text-align:right; }
.calendar-setting-multiplier span { color:#a9c2d2; }
.calendar-event-form input.default-setting-value { color:#70d99b; }
.calendar-event-form input.changed-setting-value { color:#ef7777; }
.calendar-date-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.calendar-all-day { display:flex !important; grid-template-columns:none !important; align-items:center; gap:9px !important; }
.calendar-all-day input { width:18px; height:18px; margin:0; }
.calendar-event-list { display:grid; gap:10px; margin-top:20px; }
.calendar-event-list article { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px; border:1px solid #385365; background:#091624; }
.calendar-event-list article p { margin:5px 0 0; color:#a9b9c7; }
.event-status { margin-left:10px; color:#a9c2d2; font-size:.8rem; }
.event-status.active { color:#70d99b; }
@media(max-width:760px) { .calendar-day { min-height:82px; padding:5px; } .calendar-weekday { font-size:.75rem; } .calendar-event { font-size:.68rem; padding:3px; } .calendar-date-fields,.calendar-setting-options { grid-template-columns:1fr; } .calendar-event-list article { align-items:flex-start; flex-direction:column; } }