:root { color-scheme: dark; font-family: Arial, sans-serif; background: #111; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.shell { max-width: 1150px; padding: 48px 24px; margin: auto; }
header, .panel-heading, .actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 28px; font-weight: 700; color: #fff; text-decoration: none; }
h1 { font-size: 18px; font-weight: 400; color: #bbb; margin-top: 12px; }
h2 { font-size: 22px; margin: 0; }
h3 { font-size: 17px; }
button { background: #fff; color: #111; border: 0; border-radius: 8px; padding: 11px 16px; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.button { display: inline-block; background: #fff; color: #111; padding: 11px 16px; border-radius: 8px; text-decoration: none; font-weight: bold; }
input { background: #fff; color: #111; border: 0; border-radius: 8px; padding: 12px; font: inherit; width: 100%; box-sizing: border-box; }
label { display: block; margin-bottom: 8px; }
.user-list { display: grid; gap: 12px; margin: 24px 0; }
.user-search-form { display: flex; align-items: end; gap: 10px; margin: 22px 0 4px; }
.user-search-form label { flex: 1 1 auto; margin: 0; color: #c7c2d3; font-size: 13px; }
.user-search-form input { display: block; margin-top: 7px; }
.user-search-form button { flex: 0 0 auto; min-width: 100px; }
.user-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #333; padding: 16px; border-radius: 8px; flex-wrap: wrap; }
.user-card p { margin: 6px 0; color: #aaa; }
.secret { border: 1px solid #8aa7ff; padding: 20px; margin: 24px 0; border-radius: 8px; }
.secret code { display: block; font-size: 18px; overflow-wrap: anywhere; margin: 16px 0; user-select: all; }
form .actions { margin-top: 16px; }
textarea, select { background: #fff; color: #111; border: 0; border-radius: 8px; padding: 12px; font: inherit; width: 100%; box-sizing: border-box; }
textarea { resize: vertical; min-height: 130px; }
.field { margin: 16px 0; }
.announcement { border: 1px solid #6681b4; border-radius: 12px; padding: 20px; margin-top: 20px; background: #19202c; }
.announcement.maintenance { border-color: #b49559; background: #272117; }
.announcement.planned { border-color: #a08ac8; background: #211a2c; }
header { flex-wrap: wrap; }
.announcement p, .message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.tool-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tool-layout.inbox-only { grid-template-columns: 1fr; }
button[aria-pressed="true"] { outline: 2px solid #8aa7ff; outline-offset: 3px; }
.items { display: grid; gap: 16px; margin: 20px 0; }
.item, .message { border: 1px solid #333; padding: 16px; border-radius: 8px; overflow-wrap: anywhere; }
.item h3 { margin-top: 0; }
.message.owner-reply { border-color: #6681b4; }
.event { padding: 16px 0; border-bottom: 1px solid #333; overflow-wrap: anywhere; }
.event p { margin: 6px 0; color: #aaa; }
@media (max-width: 760px) { .tool-layout { grid-template-columns: 1fr; } }
button:focus-visible, a:focus-visible { outline: 3px solid #8aa7ff; outline-offset: 4px; }
.secondary { background: #303030; color: white; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.layout.owner { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
.panel { background: #191919; border: 1px solid #333; border-radius: 12px; padding: 24px; }
.muted, .coming p { color: #aaa; line-height: 1.5; }
.connection { border-bottom: 1px solid #333; padding-bottom: 24px; margin-bottom: 24px; }
.actions { justify-content: flex-start; flex-wrap: wrap; }
.servers { display: grid; gap: 12px; }
.server-list-views { display: inline-flex; gap: 8px; margin: 8px 0 16px; padding: 5px; border: 1px solid #3b304d; border-radius: 13px; background: #11101a; }
.server-list-views button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }
.server-list-views button[aria-pressed="true"] { background: linear-gradient(120deg, #b288ff, #8caeff); box-shadow: 0 0 18px #9b5cff28; }
.server-list-views button span { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #ffffff20; font-size: 12px; text-align: center; }
.server { background: #222; border: 1px solid #333; border-radius: 8px; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.server strong { overflow-wrap: anywhere; }
.server { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 16px; }
.server-icon { width: 56px; height: 56px; grid-column: 1; grid-row: 1 / 3; border-radius: 14px; object-fit: cover; background: #282238; }
.server-icon-fallback { display: grid; place-items: center; color: #e8dfff; border: 1px solid #574668; font-size: 22px; font-weight: 700; }
.server strong { grid-column: 2; grid-row: 1; align-self: end; }
.server .badge { grid-column: 2; grid-row: 2; justify-self: start; }
.server .button { grid-column: 3; grid-row: 1 / 3; }
.server-workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.server-navigation { display: grid; gap: 12px; padding: 16px; background: #191919; border: 1px solid #333; border-radius: 12px; }
.server-navigation button { width: 100%; text-align: left; }
@media (max-width: 760px) { .server-workspace { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .server { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; } .server-icon { width: 48px; height: 48px; } .server .button { grid-column: 2; grid-row: 3; justify-self: start; } }
.badge { color: #ccc; font-size: 12px; padding: 6px 8px; border: 1px solid #555; border-radius: 5px; }
.notification-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; margin-left: 6px; border-radius: 50%; background: #bd162f; color: #fff; font-size: 12px; font-weight: 700; }
.update-entry p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.update-publish { margin-bottom: 24px; }
#notice { line-height: 1.5; color: #c8d6ff; min-height: 24px; overflow-wrap: anywhere; }
dl { margin-top: 24px; } dt { color: #aaa; font-size: 13px; margin-top: 16px; } dd { margin: 6px 0 0; overflow-wrap: anywhere; }
.coming { border-top: 1px solid #333; margin-top: 24px; padding-top: 8px; }
.website-maintenance { margin-top: 20px; padding: 16px; border: 1px solid #493967; border-radius: 12px; background: linear-gradient(135deg, #241b35, #191722); }
.website-maintenance h4 { margin: 0 0 8px; color: #e8dcff; font-size: 16px; }
.website-maintenance p { margin: 8px 0 12px; }
.website-maintenance button { background: linear-gradient(120deg, #a855f7, #7658d8); color: #fff; }
.website-maintenance button[aria-pressed="true"] { background: #533a70; }
@media (max-width: 760px) { .layout.owner { grid-template-columns: 1fr; } .shell { padding: 24px 16px; } header { align-items: flex-start; } .panel { padding: 20px; } }

.access-controls { min-width: 180px; max-width: 100%; }
.access-controls input { width: 100%; box-sizing: border-box; }
.user-card { align-items: stretch; }
.user-card-details { flex: 1 1 240px; min-width: 0; }
.user-card-name { display: block; overflow-wrap: anywhere; font-size: 18px; }
.user-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.user-badge { display: inline-flex; align-items: center; min-height: 25px; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.user-badge.owner { background: #382750; border-color: #9d6be0; color: #eadbff; }
.user-badge.owner-friend { background: #302242; border-color: #8055b6; color: #e2caff; }
.user-badge.member { background: #1d2c49; border-color: #4d75b6; color: #cfe1ff; }
.user-badge.premium { background: #382750; border-color: #9d6be0; color: #eadbff; }
.user-badge.member-plan { background: #1d2c49; border-color: #4d75b6; color: #cfe1ff; }
.user-badge.viewer { background: #252530; border-color: #595967; color: #e0dfeb; }
.user-badge.suspended { background: #46212d; border-color: #a7475e; color: #ffd5dd; }
.user-badge.account-status { background: #20212b; border-color: #454551; color: #c7c4d3; }
.user-badge.active { background: #19362e; border-color: #397d65; color: #b8f3d8; }
.user-badge.discord-linked { background: #1b3041; border-color: #3e6e91; color: #c3e7ff; }
.user-badge.discord-unlinked { background: #252530; border-color: #595967; color: #c8c5d3; }
.user-card-details p { overflow-wrap: anywhere; }
.user-card-details .user-last-seen { margin-top: 12px; color: #aaa5b8; font-size: 13px; }
.user-action-groups { display: grid; grid-template-columns: repeat(3, minmax(145px, 1fr)); flex: 2 1 620px; gap: 10px; align-items: stretch; }
.user-action-group { min-width: 0; padding: 12px; border: 1px solid #393149; border-radius: 11px; background: #11111a80; }
.user-action-group h3 { margin: 0 0 10px; color: #c9b7eb; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.user-action-buttons { display: grid; align-content: start; gap: 8px; }
.user-action-buttons button { width: 100%; min-height: 38px; padding: 9px 10px; font-size: 13px; }
.user-action-buttons .access-controls { min-width: 0; }
.user-action-buttons .access-controls { display: flex; align-items: end; gap: 8px; }
.user-action-buttons .access-controls label { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1 1 auto; margin: 0; font-size: 12px; line-height: 1.4; color: #c7c2d3; }
.user-action-buttons .access-controls input { width: 64px; min-width: 54px; padding: 8px; margin: 0; }
.user-action-buttons .access-controls button { width: auto; flex: 0 0 auto; }
.user-action-buttons .custom-offer-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; padding: 10px; border: 1px solid #4a3c61; border-radius: 9px; background: #171420; }
.user-action-buttons .custom-offer-controls label { display: grid; gap: 5px; font-size: 11px; }
.user-action-buttons .custom-offer-controls label:first-child { grid-column: 1 / -1; }
.user-action-buttons .custom-offer-controls input { box-sizing: border-box; width: 100%; min-width: 0; }
.user-action-buttons .custom-offer-controls button { grid-column: 1 / -1; width: 100%; }
.user-row { align-items: center; }
.user-row .user-card-details { flex: 1 1 auto; }
.user-row .user-badges { margin-bottom: 0; }
.user-select { min-width: 112px; }
.user-select[aria-pressed="true"] { outline: 2px solid #bd9cff; outline-offset: 2px; }
.user-detail-panel { margin-top: 24px; }
.user-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #3b304d; }
.user-detail-heading h2 { overflow-wrap: anywhere; }
.user-detail-heading .user-badges { margin: 10px 0 0; }
.user-detail-heading .user-last-seen { margin: 10px 0 0; color: #b9b3ca; font-size: 13px; }
.user-workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; margin-top: 22px; align-items: start; }
.user-navigation { display: grid; gap: 9px; padding: 12px; border: 1px solid #3b304d; border-radius: 12px; background: #11101a; }
.user-navigation button { width: 100%; text-align: left; }
.user-navigation button[aria-pressed="true"] { background: linear-gradient(120deg, #ac85ff, #84adff); color: #141026; box-shadow: 0 0 18px #9b5cff28; }
.user-tab-content { min-width: 0; }
.user-tab-pane { display: grid; gap: 16px; }
.user-tab-pane > .muted { margin: 0; }
.user-tab-pane .user-action-group { background: #11111a80; }
.user-tab-pane .access-controls { max-width: 480px; }
.free-month-controls { display: grid; grid-template-columns: repeat(2, minmax(160px, 260px)); align-items: end; gap: 12px; padding: 18px; border: 1px solid #393149; border-radius: 12px; background: #11111a80; }
.free-month-controls label { margin: 0; color: #c7c2d3; }
.free-month-controls input, .free-month-controls select { margin-top: 8px; }
.free-month-controls button { min-height: 44px; grid-column: 1 / -1; }
.lifetime-tier-controls { display: grid; gap: 8px; padding: 10px; border: 1px solid #4a3c61; border-radius: 9px; background: #171420; }
.lifetime-tier-controls label { display: grid; gap: 6px; color: #c7c2d3; font-size: 12px; }
.lifetime-tier-controls select { width: 100%; }
.lifetime-tier-controls button { width: 100%; }
.datastore-folder-controls { display: grid; gap: 12px; max-width: 560px; padding: 18px; border: 1px solid #393149; border-radius: 12px; background: #11111a80; }
.datastore-folder-controls label { margin: 0; color: #c7c2d3; }
.datastore-folder-controls input { margin-top: 8px; }
.datastore-folder-controls button { min-height: 44px; }
.user-tab-pane .custom-offer-controls { max-width: 560px; }
@media (max-width: 760px) { .user-workspace { grid-template-columns: 1fr; } .user-navigation { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .user-navigation button { text-align: center; padding: 10px 7px; } }
@media (max-width: 520px) { .user-detail-heading { flex-direction: column; } .free-month-controls { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .user-action-groups { grid-template-columns: repeat(2, minmax(145px, 1fr)); } .user-action-group:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .user-action-groups { grid-template-columns: 1fr; flex-basis: 100%; } .user-action-group:last-child { grid-column: auto; } }
@media (max-width: 520px) { .user-search-form { align-items: stretch; flex-wrap: wrap; } .user-search-form label { flex-basis: 100%; } }
.check-label { display:flex; align-items:center; gap:10px; line-height:1.5; margin:18px 0; }
.check-label input { width:20px; height:20px; flex-shrink:0; }
.moderation-rule { display:grid; gap:10px; }
.moderation-rule h3 { margin:0 0 8px; }

/* TwistedHub's supplied artwork sets the colour palette. */
:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #090911; color: #f3f2ff; }
body { min-height: 100vh; background: radial-gradient(ellipse at 12% 0%, #40216955, transparent 48%), radial-gradient(ellipse at 100% 25%, #163d7350, transparent 44%), #090911; }
.shell { max-width: 1280px; padding-top: 32px; }
header { padding-bottom: 24px; border-bottom: 1px solid #302743; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 13px; letter-spacing: -.04em; font-size: 26px; }
.brand img { border-radius: 13px; border: 1px solid #9170dd; box-shadow: 0 0 22px #7b42cb40; object-fit: cover; }
h1 { color: #b8b2ca; font-weight: 500; }
h2, h3 { letter-spacing: -.025em; }
.panel, .server-navigation { background: linear-gradient(135deg, #1c172b, #131622); border-color: #3b304d; box-shadow: 0 10px 35px #00000025; border-radius: 16px; }
.server, .item, .message, .user-card { background: #171725; border-color: #36304b; border-radius: 12px; }
.server { padding: 20px; transition: border-color .18s, background .18s; }
.server:hover { border-color: #8265c3; background: #1e1b30; }
button, .button { background: linear-gradient(120deg, #ac85ff, #84adff); color: #141026; border-radius: 10px; padding: 11px 15px; transition: filter .18s; }
button:hover:not(:disabled), .button:hover { filter: brightness(1.12); }
.secondary { background: #292238; color: #eae3ff; border: 1px solid #493b61; }
.danger { background: linear-gradient(120deg, #8c2947, #70243d); color: #fff0f3; border: 1px solid #bb5570; }
.danger:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 16px #d3395b35; }
.muted, .coming p, dt { color: #b9b3ca; }
.badge { background: #282039; border-color: #584170; color: #dbcbff; border-radius: 7px; }
input, select, textarea { background: #0f101b; color: #f3f2ff; border: 1px solid #574668; }
.connection, .coming, .event { border-color: #3b304d; }
.brand-banner { height: clamp(150px, 24vw, 290px); overflow: hidden; border: 1px solid #3b304d; border-radius: 18px; margin-top: 24px; background: #080808; position: relative; }
.brand-banner img { position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dashboard-banner { height: clamp(128px, 19vw, 232px); margin-top: 20px; }
.dashboard-effects { position: relative; z-index: 1; }
.shell:not(.landing) { position: relative; z-index: 1; }
.dashboard-particles { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; }
.dashboard-actions { padding: 9px; border: 1px solid #3b304d; border-radius: 14px; background: #14111dcc; box-shadow: 0 8px 28px #0003; }
.dashboard-actions .button, .dashboard-actions button { min-height: 44px; }
.panel-heading #refresh { background: #292238; color: #eae3ff; border: 1px solid #493b61; }
.panel-heading #refresh:hover:not(:disabled) { border-color: #8068a8; background: #332947; }
.server .primary-action { background: linear-gradient(120deg, #c49aff, #a8baff); color: #17102a; border: 1px solid #d4b5ff; box-shadow: 0 4px 18px #a56aff35; }
.server .primary-action:hover { filter: brightness(1.12); box-shadow: 0 6px 23px #a56aff55; }
.discord-identity { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px solid #51406e; border-radius: 12px; background: #191626; }
.discord-icon { width: 28px; height: 28px; flex: 0 0 28px; color: #b9a0ff; }
.discord-identity-copy { display: grid; gap: 3px; min-width: 0; }
.discord-identity-copy > span { color: #aaa2bb; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.discord-identity-copy strong { overflow-wrap: anywhere; }
.discord-linked { margin-left: 8px; padding: 5px 9px; border-radius: 999px; background: #153425; color: #72e5a3; font-size: 11px; font-weight: 700; }
.plan-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: fit-content; max-width: 100%; margin-top: 18px; padding: 12px 16px; border: 1px solid #7552a3; border-radius: 12px; background: linear-gradient(105deg, #251a39, #171628); box-shadow: 0 0 22px #9b5cff20; }
.plan-name { color: #d7bcff; font-size: 13px; font-weight: 800; letter-spacing: .09em; }
.plan-name::before { content: "●"; margin-right: 8px; color: #bb8aff; text-shadow: 0 0 10px #bd85ff; }
.plan-details { color: #c8c1d6; font-size: 13px; }
.server { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.server:hover { transform: translateY(-3px); border-color: #a17be4; box-shadow: 0 9px 28px #9b5cff20; }
.server-info { min-width: 0; display: grid; gap: 8px; }
.server .server-info > strong { grid-column: auto; grid-row: auto; align-self: auto; font-size: 16px; }
.server-metadata, .server-details { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.server .server-metadata .badge { grid-column: auto; grid-row: auto; }
.server-details { color: #b9b3ca; font-size: 12px; }
.server-description { max-width: 100%; overflow-wrap: anywhere; }
.server-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.server-status::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.status-online { color: #72e5a3; }
.status-warning { color: #f2c46d; }
.status-setup { color: #bcb1d4; }
.account-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.account-card { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid #403450; border-radius: 12px; background: #171522; }
.account-card > span { color: #aaa2bb; font-size: 12px; }
.account-card strong { overflow-wrap: anywhere; }
.owner-role { width: fit-content; padding: 5px 9px; border: 1px solid #7952a5; border-radius: 999px; color: #e2caff; background: #38264d; font-size: 13px; }
.account-controls { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-left: auto; }
.locale-control { position: relative; }
.locale-toggle { width: 100%; font-size: 13px; }
.locale-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(470px, calc(100vw - 32px)); padding: 22px; background: #1b1728; border: 1px solid #79609c; border-radius: 15px; z-index: 20; box-shadow: 0 18px 65px #000a; }
.locale-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.locale-panel p { font-size: 13px; margin-bottom: 0; }
.currency-notice { color: #d8ccf6; padding: 16px; background: #241c36; border: 1px solid #584273; border-radius: 12px; line-height: 1.6; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #ae8cfa; outline-offset: 3px; }
@media (max-width: 760px) { header > .actions { width: 100%; } .brand-banner { height: 160px; } .dashboard-banner { height: 128px; } .dashboard-actions { padding: 7px; } .account-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .locale-panel { position: fixed; left: 16px; right: 16px; top: 150px; width: auto; max-height: calc(100dvh - 170px); overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }