/* Account area, based on the dashboard reference supplied by the user. */
.dashboard-mode { background: #0c0c0c; }
.dashboard-mode .site-header { background: linear-gradient(180deg,#1b1b1b,#141414); }
.dashboard-mode .site-footer { display: none; }
.dashboard-mode .nav-container { max-width: 1280px; }
.account-menu { position: relative; margin-left: auto; flex: none; }
.account-trigger { display: flex; gap: 9px; align-items: center; max-width: 230px; padding: 6px 12px; border: 1px solid #737373; background: #181818; border-radius: 10px; font-size: 14px; }
.account-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger .avatar { width: 32px; height: 32px; font-size: 12px; }
.account-trigger .chevron { width: 14px; height: 14px; transition: transform .2s; }
.account-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 55; width: 192px; padding: 8px; border: 1px solid #232323; border-radius: 12px; background: #111; box-shadow: 0 16px 32px #0006; }
.account-dropdown a { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 6px; font-size: 14px; }
.account-dropdown a:hover { background: #202020; }
.account-dropdown .icon { width: 16px; height: 16px; }
.account-dropdown .leave-preview { color: #f87171; }
.avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: #fff; background: #306387; clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); font-size: 18px; font-weight: 800; letter-spacing: -.7px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.auth-feedback { color: #fbbf24 !important; font-size: 13px; margin: 16px 0 0 !important; }
.dashboard-view { min-height: calc(100vh - 64px); background: radial-gradient(circle at top right,#94a3b814,transparent 22%),radial-gradient(circle at top left,#7373731a,transparent 26%),linear-gradient(180deg,#161616,#101010 48%,#0a0a0a); }
.dashboard-sidebar { position: fixed; top: 64px; bottom: 0; left: 0; width: 256px; z-index: 30; background: #0b0b0b66; padding: 40px 16px; border-right: 1px solid #ffffff03; }
.sidebar-person { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #262626; border-radius: 8px; margin-bottom: 24px; min-width: 0; }
.sidebar-person > div:last-child { min-width: 0; }
.sidebar-person strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.sidebar-person small { display: block; color: #a3a3a3; font-size: 12px; }
.sidebar-caption { padding: 0 12px; margin-bottom: 8px; color: #737373; font-size: 12px; text-transform: uppercase; font-weight: 600; }
.dashboard-nav { display: grid; gap: 4px; }
.dashboard-nav a { display: flex; align-items: center; gap: 12px; color: #a3a3a3; padding: 11px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; }
.dashboard-nav a.active { color: #e5e5e5; background: #ffffff08; border-color: #333; }
.dashboard-nav a:hover { color: #fff; background: #ffffff06; }
.dashboard-nav .icon { width: 18px; height: 18px; }
.dashboard-main { margin-left: 256px; min-width: 0; padding: 20px 32px 32px; }
.dashboard-content { max-width: 1280px; margin-inline: auto; }
.preview-note { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-bottom: 10px; color: #989898; font-size: 11px; }
.preview-note i { width: 5px; height: 5px; background: #8bccfa; border-radius: 50%; }
.dash-card { border: 1px solid #262626; border-radius: 8px; background: #161616a3; }
.dashboard-welcome { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: 24px; padding: 28px; min-height: 276px; }
.welcome-main { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; }
.welcome-heading { display: flex; align-items: flex-start; gap: 14px; }
.welcome-avatar { padding: 0; border: 1px solid #383838; border-radius: 9px; flex: none; }
.welcome-avatar .avatar { width: 72px; height: 72px; font-size: 32px; }
.welcome-heading p:first-child { font-size: 14px; color: #d4d4d4; font-weight: 500; margin-bottom: 3px; }
.welcome-heading h1 { font-size: clamp(26px,2.05vw,36px); line-height: 1.15; letter-spacing: -.65px; font-weight: 700; margin-bottom: 8px; overflow-wrap: anywhere; }
.welcome-heading .welcome-subtitle { color: #a3a3a3; font-size: 14px; }
.dash-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.dash-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; background: #1c1c1c; color: #e5e5e5; border: 1px solid transparent; border-radius: 8px; min-height: 44px; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.dash-button:hover { background: #282828; }
.dash-button.primary { background: #525252; }.dash-button.primary:hover { background: #626262; }
.dash-button .icon { width: 16px; height: 16px; }
.live-server { padding: 20px; background: #0a0a0acc; border: 1px solid #242424; border-radius: 8px; }
.live-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dash-label { color: #818181; text-transform: uppercase; font-size: 12px; }
.live-heading strong { display: block; font-size: 24px; line-height: 32px; margin-top: 3px; }
.dash-online { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; }
.capacity-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #a3a3a3; }
.capacity-track { height: 8px; background: #1c1c1c; border-radius: 99px; margin: 8px 0 20px; overflow: hidden; }
.capacity-track span { display: block; width: 0; height: 100%; background: #4ade80; }
.live-counts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.live-counts > div { padding: 8px 12px; border-radius: 8px; background: #121212; }
.live-counts span { display: block; color: #818181; font-size: 12px; }.live-counts strong { display: block; font-size: 14px; line-height: 20px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.dashboard-stat { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 102px; padding: 16px; background: #10101066; }
.dashboard-stat strong { display: block; font-size: 20px; line-height: 28px; font-weight: 600; margin: 3px 0; }
.dashboard-stat small { color: #94a3b8; display: block; font-size: 12px; }
.dash-icon-box { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: #ffffff05; border: 1px solid #2c2c2c; border-radius: 8px; color: #bdbdbd; }
.dash-icon-box .icon { width: 20px; height: 20px; }
.dashboard-stat .dash-icon-box { border-color: transparent; }
.dashboard-stat .green,.green { color: #4ade80; }.dashboard-stat .blue { color: #60a5fa; }
.dashboard-details { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 24px; margin-bottom: 24px; }
.dashboard-panel { padding: 24px; min-width: 0; }
.panel-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-heading > div:not(.dash-icon-box) { min-width: 0; }
.panel-heading h2 { font-size: 18px; line-height: 28px; font-weight: 600; }
.panel-heading p { color: #a3a3a3; font-size: 14px; line-height: 20px; }
.panel-heading .dash-button,.panel-heading .offline-tag { margin-left: auto; flex: none; }
.panel-heading .dash-button { min-height: 36px; padding: 6px 14px; }
.profile-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; }
.profile-fields > div { padding: 12px 16px; border: 1px solid #292929; border-radius: 8px; min-width: 0; }
.profile-fields dt { color: #818181; font-size: 12px; margin-bottom: 4px; }
.profile-fields dd { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.empty-panel { border: 1px solid #292929; border-radius: 8px; padding: 20px; color: #a3a3a3; font-size: 14px; }
.character-panel .empty-panel { text-align: center; padding: 32px 20px; }
.offline-tag { color: #a3a3a3; background: #1b1b1b; font-size: 12px; font-weight: 500; border-radius: 8px; padding: 6px 12px; }
.offline-tag.connected { color: #86efac; background: #22c55e17; }
.character-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.character-list > .empty-panel { grid-column: 1 / -1; }
.character-list .empty-panel strong,.character-list .empty-panel span { display: block; }
.character-list .empty-panel strong { color: #d4d4d4; margin-bottom: 6px; }
.character-list .empty-panel span { max-width: 580px; margin-inline: auto; font-size: 12px; }
.character-card { overflow: hidden; border: 1px solid #2b2b2b; border-radius: 10px; background: linear-gradient(145deg,#171717,#111); }
.character-card header { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #252525; }
.character-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 10px; color: #d6edfe; background: #5cb6f620; font-size: 14px; font-weight: 750; }
.character-card h3 { font-size: 16px; line-height: 22px; }
.character-card header p { color: #737373; font-size: 11px; }
.character-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0; background: #252525; }
.character-card dl > div { min-width: 0; padding: 11px 14px; background: #141414; }
.character-card dt,.character-finances span { color: #737373; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.character-card dd { overflow: hidden; margin: 2px 0 0; color: #d4d4d4; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.character-finances { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 14px; }
.character-finances > div { min-width: 0; padding: 10px; border-radius: 7px; background: #0d0d0d; }
.character-finances strong { display: block; overflow: hidden; margin-top: 3px; color: #e5e5e5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.character-card footer { padding: 0 14px 13px; color: #666; font-size: 10px; }
.dashboard-loading { animation: dashboard-pulse 1.4s ease-in-out infinite; }
@keyframes dashboard-pulse { 50% { color: #e5e5e5; border-color: #3b3b3b; } }
.dashboard-page-title { margin: 12px 0 28px; }.dashboard-page-title h1 { font-size: 30px; line-height: 38px; margin-bottom: 8px; }.dashboard-page-title p { color: #a3a3a3; font-size: 14px; }
.profile-editor-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 24px; align-items: start; }
.dashboard-form { margin: 0; }.dashboard-form input,.dashboard-form textarea,.dashboard-form select { background: #101010; }
.dashboard-form .dash-button { justify-self: start; }
.field-note { color: #858585; font-size: 12px; line-height: 18px; }
.form-feedback { font-size: 13px; color: #4ade80; }
.app-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.app-type { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.app-type h2 { font-size: 18px; }.app-type p { color: #a3a3a3; font-size: 14px; flex: 1; }
.draft-list { display: grid; gap: 12px; }.draft-item { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid #292929; border-radius: 8px; }.draft-item > div { flex: 1; min-width: 0; }.draft-item h3 { font-size: 15px; }.draft-item p { color: #a3a3a3; font-size: 12px; margin-top: 4px; }.draft-tag { color: #b5dffd; font-size: 12px; border-radius: 6px; background: #5cb6f614; padding: 4px 8px; }
.dashboard-dialog { width: min(600px,calc(100% - 32px)); text-align: left; }
.dashboard-dialog > p { font-size: 14px; }
.dashboard-dialog form { margin: 24px 0 0; }
.dashboard-dialog .form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dashboard-dialog textarea { max-height: 35vh; }
.dashboard-login-link,.dashboard-dialog-actions { margin-top: 16px; }
.dashboard-dialog-actions { margin-top: 20px; }
.preview-entry { display: block; text-align: center; margin-top: 20px; color: #d4d4d4; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
@media(min-width:1900px) { .dashboard-main { padding-top: 20px; }.welcome-heading h1 { font-size: 36px; } }
@media(max-width:1279px) {
  .dashboard-sidebar { width: 224px; }.dashboard-main { margin-left: 224px; padding: 20px 24px 32px; }
  .dashboard-welcome { grid-template-columns: 1fr; }.welcome-main { gap: 28px; }.live-server { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }.live-heading { grid-row: span 2; margin: 0; }.live-counts { grid-column: 1 / -1; margin-top: 16px; }
  .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-details,.profile-editor-grid { grid-template-columns: 1fr; }
  .app-types { grid-template-columns: 1fr; }.app-type { gap: 10px; }
}
@media(max-width:1023px) {
  .dashboard-sidebar { position: static; width: auto; padding: 16px 24px 0; background: transparent; border: 0; }
  .sidebar-person,.sidebar-caption { display: none; }.dashboard-nav { display: flex; gap: 8px; }.dashboard-nav a { padding: 10px 14px; }
  .dashboard-main { margin-left: 0; }.account-trigger { max-width: 150px; }.dashboard-mode .nav-container { gap: 8px; }.dashboard-mode .main-nav a { padding-inline: 6px; font-size: 12px; }
  .character-list { grid-template-columns: 1fr; }
}
@media(max-width:639px) {
  .account-trigger > span { display: none; }.account-trigger { padding: 4px 6px; border-color: #444; gap: 4px; }.account-trigger .avatar { width: 28px; height: 28px; }
  .dashboard-sidebar { padding: 16px 12px 0; }.dashboard-nav { gap: 4px; }.dashboard-nav a { flex: 1; justify-content: center; gap: 6px; padding: 10px 7px; font-size: 12px; }.dashboard-nav .icon { width: 16px; height: 16px; }
  .dashboard-main { padding: 14px 12px 24px; }.preview-note { justify-content: flex-start; font-size: 10px; }
  .dashboard-welcome { padding: 18px; gap: 20px; }.welcome-heading { gap: 10px; }.welcome-avatar .avatar { width: 48px; height: 48px; font-size: 23px; }.welcome-heading h1 { font-size: 23px; letter-spacing: -.4px; }.welcome-heading .welcome-subtitle { font-size: 12px; }
  .dash-actions { gap: 6px; }.dash-actions .dash-button { font-size: 11px; padding: 10px 5px; gap: 5px; }.dash-actions .icon { width: 14px; height: 14px; }
  .live-server { padding: 16px; display: block; }.live-heading { margin-bottom: 16px; }.live-counts { margin-top: 0; }
  .dashboard-stats { gap: 10px; margin-block: 16px; }.dashboard-stat { padding: 12px; gap: 4px; position: relative; }.dashboard-stat strong { font-size: 17px; }.dashboard-stat .dash-icon-box { width: 26px; height: 26px; }.dashboard-stat .icon { width: 16px; height: 16px; }.dashboard-stat .dash-label { font-size: 10px; }
  .dashboard-panel { padding: 16px; }.dashboard-details { gap: 16px; margin-bottom: 16px; }.panel-heading { gap: 10px; flex-wrap: wrap; }.panel-heading h2 { font-size: 16px; }.panel-heading p { font-size: 12px; }.panel-heading .dash-button { font-size: 12px; padding-inline: 10px; }
  .profile-fields { gap: 8px; }.profile-fields > div { padding: 10px; }.profile-fields dd { font-size: 13px; }.profile-fields dt { font-size: 11px; }
  .character-finances { grid-template-columns: 1fr; }.character-card dl { grid-template-columns: 1fr 1fr; }
  .dashboard-page-title h1 { font-size: 26px; }.draft-item { flex-wrap: wrap; gap: 10px; }.draft-item .dash-button { font-size: 12px; }
  .dashboard-dialog { padding: 24px 18px; }
}