.admin-body {
  background:#f5f6fa
}

.admin-login {
  min-height:100vh;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  padding:40px 20px;
  background:radial-gradient(ellipse at 80% 0,#e6e6f6,transparent 60%),#f4f5fa
}

.login-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
  margin-bottom:34px
}

.login-brand>span {
  font-size:12px;
  letter-spacing:2px;
  color:#969bad
}

.login-card {
  width:400px;
  max-width:100%;
  padding:35px;
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 12px 50px #25295006
}

.login-card h1 {
  font-size:33px;
  margin:0 0 12px
}

.login-card .button {
  margin-top:8px
}

.login-note {
  text-align:center;
  font-size:12px;
  color:#a1a7b5;
  margin:23px 0 0
}

.login-back {
  font-size:12px;
  margin-top:27px;
  color:var(--muted)
}

.admin-shell {
  min-height:100vh;
  display:flex
}

.admin-sidebar {
  width:232px;
  background:#19202f;
  color:#e1e5ee;
  position:fixed;
  inset:0 auto 0 0;
  padding:30px 22px 20px;
  display:flex;
  flex-direction:column;
  z-index:10
}

.admin-sidebar .brand {
  font-size:25px;
  padding-left:8px
}

.admin-sidebar .brand-mark {
  background:#f1f2f7;
  color:#202739
}

.admin-sidebar .brand-mark span {
  color:#6765d7
}

.sidebar-caption {
  font-size:12px;
  letter-spacing:2px;
  color:#717d95;
  padding:35px 13px 18px
}

.admin-sidebar nav {
  display:flex;
  flex-direction:column;
  gap:8px
}

.admin-sidebar nav a {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:9px;
  padding:13px 12px;
  font-size:13px;
  color:#a4afc4
}

.admin-sidebar nav a.active {
  background:#353851;
  color:#ffffff;
  box-shadow:inset 3px 0 #9b96f2
}

.admin-sidebar nav a:hover {
  background:#ffffff09;
  color:#fff
}

.nav-icon {
  width:17px;
  font-size:19px;
  font-weight:400
}

.nav-count {
  margin-left:auto;
  background:#ffffff0c;
  padding:1px 6px;
  border-radius:5px;
  font-size:12px
}

.sidebar-bottom {
  margin-top:auto
}

.sidebar-bottom>a {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  padding:18px 11px;
  color:#a4afc4
}

.admin-identity {
  border-top:1px solid #ffffff12;
  padding:21px 3px 0;
  display:flex;
  gap:10px;
  align-items:center
}

.avatar {
  width:33px;
  height:33px;
  border-radius:9px;
  background:#46536d;
  display:grid;
  place-items:center;
  font-size:12px
}

.admin-identity strong {
  font-size:12px;
  display:block;
  max-width:110px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap
}

.admin-identity small {
  display:block;
  font-size:12px;
  color:#7887a1;
  margin-top:5px
}

.admin-identity button {
  margin-left:auto;
  border:0;
  background:transparent;
  color:#99a7bd;
  font-size:21px
}

.admin-workspace {
  margin-left:232px;
  min-width:0;
  width:calc(100% - 232px);
  display:flex;
  flex-direction:column
}

.admin-topbar {
  height:68px;
  border-bottom:1px solid #e6e9f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px;
  background:#ffffff9e;
  font-size:12px;
  color:#8a94a5
}

.local-pill {
  display:flex;
  align-items:center;
  gap:7px;
  color:#778397;
  font-size:12px
}

.local-pill i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#75a88d
}

#admin-main {
  max-width:1400px;
  width:100%;
  padding:35px 38px;
  margin:0 auto;
  flex:1
}

.admin-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  margin-bottom:29px
}

.admin-heading h1 {
  font-size:29px;
  line-height:1.3;
  margin:0 0 9px
}

.admin-heading p {
  font-size:13px;
  color:#778297;
  margin:0
}

.admin-heading>.button {
  flex-shrink:0
}

.metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:27px
}

.metric {
  background:white;
  border:1px solid var(--line);
  border-radius:13px;
  padding:20px 23px;
  display:flex;
  align-items:center;
  gap:17px
}

.metric-symbol {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:12px;
  background:#f0f0fc;
  color:#7775bd;
  font-size:20px
}

.metric:nth-child(2) .metric-symbol {
  background:#edf5f0;
  color:#70a18b
}

.metric:nth-child(3) .metric-symbol {
  background:#f8f2e7;
  color:#baa270
}

.metric small {
  display:block;
  font-size:12px;
  color:#8992a3;
  margin-bottom:4px
}

.metric strong {
  font-size:26px;
  font-weight:650;
  letter-spacing:-1px
}

.table-card {
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden
}

.table-toolbar {
  padding:19px 22px;
  display:flex;
  gap:18px;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)
}

.table-toolbar input {
  max-width:280px;
  font-size:12px;
  background:#fafbfe;
  padding:10px 12px
}

.table-toolbar select {
  font-size:12px;
  padding:9px 12px
}

.table-scroll {
  overflow:auto
}

.data-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap
}

.data-table th {
  font-size:12px;
  letter-spacing:.5px;
  color:#8b94a5;
  background:#fafbfe;
  font-weight:600;
  padding:14px 20px;
  border-bottom:1px solid var(--line)
}

.data-table td {
  font-size:13px;
  padding:20px;
  border-bottom:1px solid #edf0f6;
  color:#6e798d
}

.data-table tr:last-child td {
  border:0
}

.table-game {
  display:flex;
  align-items:center;
  gap:13px;
  max-width:300px
}

.table-cover {
  width:54px;
  height:43px;
  background:#e9eaf3;
  border-radius:7px;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:22px;
  color:#9d9dbd;
  font-weight:700
}

.table-cover img {
  width:100%;
  height:100%;
  object-fit:cover
}

.table-game strong {
  font-size:14px;
  color:#293349;
  display:block;
  margin-bottom:6px;
  max-width:215px;
  overflow:hidden;
  text-overflow:ellipsis
}

.table-game small {
  font-size:12px;
  color:#929bad;
  max-width:215px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block
}

.status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  border-radius:5px;
  background:#f2f3f7;
  color:#8a93a5
}

.status:before {
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor
}

.status-published {
  background:#edf7f0;
  color:#56856d
}

.status-draft {
  background:#f8f3e8;
  color:#a38b54
}

.status-archived,.status-unpublished {
  background:#f1f2f6;
  color:#969eae
}

.row-actions {
  display:flex;
  gap:8px
}

.row-actions button {
  border:1px solid #dfe2ee;
  padding:6px 10px;
  border-radius:6px;
  background:white;
  font-size:12px;
  color:var(--primary)
}

.row-actions button.muted-action {
  color:#6b7588;
  border-color:transparent
}

.row-actions button:hover {
  background:#f1f1fc;
  border-color:#d5d3ef
}

.row-actions button.delete-action {
  color:#b46e77
}
.resource-cleanup { margin:18px 0; padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:12px }
.resource-cleanup-heading { display:flex; align-items:center; justify-content:space-between; gap:12px }
.resource-cleanup-heading h2 { margin:0; font-size:15px }
.resource-cleanup-heading h2 span { margin-left:6px; color:var(--muted); font-weight:400 }
.resource-cleanup-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line) }
.resource-cleanup-row:first-of-type { margin-top:12px }
.resource-cleanup-row>div { flex:1; min-width:0 }
.resource-cleanup-row code { display:block; overflow-wrap:anywhere; font-size:12px }
.resource-cleanup-count { display:block; margin-top:5px; font-size:12px; color:var(--muted) }
.resource-cleanup-status { font-size:12px; color:#8a6029; white-space:nowrap }
@media(max-width:540px) { .resource-cleanup { padding:14px } .resource-cleanup-row { flex-wrap:wrap; gap:10px } .resource-cleanup-row>div { flex-basis:100% } .resource-cleanup-row>button { margin-left:auto } }
.editor-actions .game-delete-button {
  margin-right:auto;
  color:#ad3745;
  border-color:#dfb5bc
}
.confirm-name-field label {
  display:block;
  margin:20px 0 8px;
  font-size:13px;
  font-weight:600
}
.confirm-name-field input {
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:8px
}

.table-footer {
  padding:16px 22px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:#939bab;
  display:flex;
  justify-content:space-between
}

.admin-footer {
  padding:22px 38px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:#9ba3b2;
  display:flex;
  justify-content:space-between
}

.wide-dialog {
  max-width:900px;
  width:calc(100% - 30px);
  padding:0;
  max-height:calc(100vh - 40px)
}

.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:25px 30px;
  position:sticky;
  top:0;
  background:#fff;
  z-index:2
}

.modal-head .dialog-kicker {
  font-size:12px;
  margin-bottom:8px
}

.modal-head h2 {
  margin:0;
  font-size:22px
}

.modal-head .dialog-close {
  position:static;
  font-size:27px
}

.editor-body {
  padding:5px 30px 10px
}

.editor-section {
  padding:15px 0;
  border-bottom:1px solid #edf0f6
}

.editor-section:last-child {
  border:0
}

.editor-section h3 {
  font-size:16px;
  margin:8px 0 18px;
  display:flex;
  align-items:center;
  gap:10px
}

.editor-section h3:before {
  content:"";
  width:3px;
  height:17px;
  border-radius:3px;
  background:#7773d5
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 22px
}

.form-grid .full {
  grid-column:1/-1
}

.editor-body label,.config-form label,.announcement-form label {
  margin:8px 0 13px;
  font-size:13px;
  color:#4e5c73
}

.editor-body input,.editor-body textarea,.editor-body select,.config-form input,.config-form textarea,.config-form select,.announcement-form input,.announcement-form textarea,.announcement-form select {
  font-size:14px;
  padding:11px 12px
}

.editor-body textarea,.config-form textarea,.announcement-form textarea {
  resize:vertical;
  min-height:83px;
  line-height:1.7
}

.field-help {
  font-size:12px;
  color:#717c8f;
  margin-top:6px;
  line-height:1.6;
  font-weight:400;
  display:block
}

.upload-box {
  border:1px dashed #ced5e4;
  border-radius:9px;
  padding:17px;
  background:#fafbfe;
  margin-top:10px
}

.upload-box p {
  margin:0 0 12px;
  font-size:12px;
  color:#707d92
}

.upload-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.upload-row input[type=file] {
  padding:5px;
  max-width:100%;
  border:0;
  background:transparent;
  font-size:12px
}

.upload-progress {
  width:100%;
  height:8px;
  accent-color:var(--primary);
  margin-top:10px
}

.upload-message {
  font-size:12px;
  margin-top:9px;
  color:#8a94a5;
  overflow-wrap:anywhere
}

.preview-strip {
  display:flex;
  gap:9px;
  overflow:auto;
  margin:12px 0 0
}

.preview-strip img {
  height:65px;
  width:95px;
  object-fit:cover;
  border-radius:7px;
  border:1px solid var(--line)
}

.editor-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
  padding:20px 30px;
  border-top:1px solid var(--line);
  background:#fafbfe;
  position:sticky;
  bottom:0;
  z-index:2
}

.editor-actions .hint {
  margin-right:auto;
  color:#929bad;
  font-size:12px
}

.checkbox-label {
  display:flex!important;
  gap:9px;
  align-items:center;
  font-size:12px!important
}

.checkbox-label input {
  width:15px!important;
  margin:0!important;
  accent-color:var(--primary)
}

.announcement-layout {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:23px
}

.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:13px;
  padding:25px
}

.panel h2 {
  font-size:17px;
  margin:0 0 18px
}

.announcement-item {
  padding:19px 0;
  border-bottom:1px solid var(--line)
}

.announcement-item:first-of-type {
  padding-top:0
}

.announcement-item:last-child {
  border:0
}

.announcement-item h3 {
  font-size:14px;
  margin:11px 0 8px
}

.announcement-item p {
  font-size:12px;
  color:#8a94a6;
  line-height:1.7;
  white-space:pre-line;
  max-height:75px;
  overflow:hidden
}

.announcement-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#778295
}

.config-layout {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:23px
}

.config-form .panel {
  margin-bottom:22px
}

.panel-description {
  font-size:12px;
  line-height:1.7;
  color:#778295;
  margin-top:-7px;
  margin-bottom:23px
}

.config-aside .panel {
  position:sticky;
  top:25px
}

.config-aside p {
  font-size:12px;
  color:#8d96a7;
  line-height:1.9
}

.config-aside h3 {
  font-size:16px
}

.config-actions {
  display:flex;
  gap:12px;
  align-items:center
}

.confirm-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:25px
}

.danger-note {
  font-size:12px;
  color:#ac7c40;
  background:#fcf5e9;
  padding:12px 15px;
  border-radius:8px;
  line-height:1.8
}

.info-note {
  font-size:12px;
  color:#797ca2;
  background:#f2f1fb;
  padding:12px 15px;
  border-radius:8px;
  line-height:1.8
}

.readonly {
  background:#f5f6fa!important;
  color:#637089!important
}

.code-value {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px
}

.admin-loading {
  padding:70px;
  text-align:center;
  color:var(--muted)
}

@media(min-width:1550px) {
  #admin-main {
    padding-top:45px
  }

}

@media(max-width:1150px) {
  .admin-sidebar {
    width:200px;
    padding-left:16px;
    padding-right:16px
  }

  .admin-workspace {
    margin-left:200px;
    width:calc(100% - 200px)
  }

  #admin-main {
    padding:28px 25px
  }

  .admin-topbar {
    padding:0 25px
  }

  .config-layout {
    grid-template-columns:1fr
  }

  .config-aside {
    display:none
  }

  .announcement-layout {
    grid-template-columns:1fr
  }

  .metrics {
    gap:12px
  }

  .metric {
    padding:18px 15px;
    gap:10px
  }

  .metric-symbol {
    width:33px;
    height:33px;
    font-size:17px
  }

}

@media(max-width:760px) {
  .admin-shell {
    display:block
  }

  .admin-sidebar {
    position:relative;
    width:100%;
    padding:20px;
    display:block
  }

  .admin-sidebar .brand {
    font-size:21px;
    padding:0
  }

  .admin-sidebar .brand-mark {
    width:30px;
    height:30px;
    font-size:24px
  }

  .sidebar-caption,.sidebar-bottom {
    display:none
  }

  .admin-sidebar nav {
    flex-direction:row;
    margin-top:18px;
    gap:8px
  }

  .admin-sidebar nav a {
    font-size:14px;
    padding:11px 12px;
    gap:7px
  }

  .nav-icon {
    font-size:16px
  }

  .admin-workspace {
    margin:0;
    width:100%
  }

  .admin-topbar {
    height:55px;
    padding:0 20px
  }

  .admin-heading {
    gap:12px
  }

  .admin-heading h1 {
    font-size:25px
  }

  .admin-heading p {
    font-size:12px
  }

  .admin-heading .button {
    font-size:12px;
    padding:10px 13px
  }

  #admin-main {
    padding:24px 20px
  }

  .metrics {
    gap:8px;
    margin-bottom:22px
  }

  .metric {
    padding:15px 10px;
    display:block
  }

  .metric-symbol {
    display:none
  }

  .metric small {
    font-size:12px
  }

  .metric strong {
    font-size:23px
  }

  .table-toolbar {
    padding:13px;
    gap:9px
  }

  .table-toolbar input {
    max-width:100%;
    width:100%;
    min-width:0
  }

  .table-toolbar select {
    max-width:100px
  }

  .table-footer {
    padding:14px;
    font-size:12px
  }

  .admin-footer {
    padding:20px
  }

  .admin-footer span {
    display:none
  }

  .wide-dialog {
    max-height:calc(100vh - 25px);
    width:calc(100% - 20px)
  }

  .modal-head {
    padding:20px
  }

  .editor-body {
    padding:0 20px
  }

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

  .editor-actions {
    padding:16px 20px
  }

  .editor-actions .hint {
    display:none
  }

  .panel {
    padding:21px
  }

  .login-card {
    padding:28px
  }

  .config-actions {
    position:sticky;
    bottom:0;
    padding:15px 0;
    background:#f5f6faf5
  }

}

.topbar-actions {
  display:flex;
  align-items:center;
  gap:14px
}

.mobile-admin-logout {
  display:none;
  background:none;
  border:0;
  font:inherit;
  color:#596477;
  cursor:pointer
}

@media(max-width:760px) {
  .mobile-admin-logout {
    display:block;
    font-size:12px
  }

  .topbar-actions .local-pill {
    display:none
  }

  .upload-message {
    overflow-wrap:anywhere
  }

}

/* Upload phases share the server's real status, never synthetic progress. */
.upload-heading {
  display:flex;
  align-items:center;
  gap:9px;
  color:#586784;
  font-size:13px;
  margin-bottom:9px
}

.upload-box {
  transition:border-color .15s,background .15s
}

.upload-box[data-state="uploading"],.upload-box[data-state="validating"] {
  border-color:#9d99e1;
  background:#f7f6ff
}

.upload-box[data-state="success"] {
  border-color:#99c8b4;
  background:#f5faf7
}

.upload-box[data-state="success"] .upload-message {
  color:#39765a
}

.upload-box[data-state="success"] progress {
  accent-color:#438d6b
}

.upload-box[data-state="error"] {
  border-color:#dca5ac;
  background:#fff8f8
}

.upload-box[data-state="error"] .upload-message {
  color:#a23d4e
}

.upload-row input[type=file]::file-selector-button {
  border:1px solid #ccd3e1;
  border-radius:6px;
  background:white;
  padding:8px 12px;
  font:inherit;
  margin-right:12px;
  color:#43526c;
  cursor:pointer
}

.upload-message {
  line-height:1.8
}

.build-number {
  display:block;
  font-size:11px;
  color:#7c879b;
  margin-top:4px
}

.admin-topbar {
  position:sticky;
  top:0;
  z-index:5;
  backdrop-filter:blur(12px)
}

.table-game strong {
  line-height:1.5
}

.data-table tbody tr:hover {
  background:#fcfcff
}

.editor-section {
  padding:24px 0
}

.form-grid {
  gap:6px 24px
}

.editor-body label,.config-form label,.announcement-form label {
  margin:8px 0 17px
}

.editor-body input,.editor-body select,.config-form input,.config-form select {
  min-height:43px
}

.field-help {
  line-height:1.8
}

.panel-description {
  font-size:13px
}

.admin-footer {
  font-size:12px
}

.admin-heading h1 {
  letter-spacing:-.02em
}

.metrics strong {
  font-variant-numeric:tabular-nums
}

.upload-progress::-webkit-progress-bar {
  background:#e7e9f2;
  border-radius:8px
}

.upload-progress::-webkit-progress-value {
  background:#7872d9;
  border-radius:8px
}

.upload-box[data-state="success"] .upload-progress::-webkit-progress-value {
  background:#438d6b
}

.nav-icon .ui-icon {
  width:18px;
  height:18px
}

.table-toolbar input {
  min-height:41px;
  font-size:13px
}

.table-toolbar select {
  min-height:41px;
  font-size:13px
}

@media(max-width:760px) {
  .admin-topbar {
    position:static
  }

  .admin-sidebar nav {
    overflow-x:auto;
    white-space:nowrap
  }

  .admin-sidebar nav a {
    font-size:12px;
    padding:11px 12px
  }

  .admin-heading {
    align-items:flex-start
  }

  .admin-heading h1 {
    font-size:26px
  }

  .admin-heading p {
    font-size:12px
  }

  .table-footer>span:last-child {
    display:none
  }

  .table-toolbar input {
    font-size:13px
  }

  .metrics .metric small {
    font-size:11px
  }

  .metric strong {
    font-size:25px
  }

  .editor-body input,.editor-body textarea,.editor-body select,.config-form input,.config-form textarea,.config-form select,.announcement-form input,.announcement-form textarea,.announcement-form select {
    font-size:16px
  }

  .editor-body label,.config-form label,.announcement-form label {
    font-size:13px
  }

  .form-grid {
    gap:0
  }

  .editor-section {
    padding:20px 0
  }

  .editor-actions {
    padding-bottom:max(16px,env(safe-area-inset-bottom))
  }

  .config-actions .button {
    font-size:12px;
    padding:11px 13px
  }

  .upload-box {
    padding:14px
  }

  .upload-message {
    font-size:12px
  }

  .config-layout {
    gap:0
  }

  .panel-description {
    font-size:12px
  }

  .wide-dialog {
    max-height:calc(100dvh - 20px)
  }

  .data-table td {
    padding:16px
  }

  .data-table th {
    padding:13px 16px
  }

}

/* Content editing: the upload actions stay visible beside the processed preview. */
.editor-jump-links {
  display:flex;
  gap:8px;
  padding:15px 30px;
  border-bottom:1px solid var(--line);
  background:#fafbfe
}
.editor-jump-links button {
  border:1px solid #dfe3ef;
  border-radius:8px;
  padding:8px 13px;
  background:#fff;
  color:#52617b;
  font:inherit;
  font-size:12px
}
.editor-jump-links button:hover,.editor-jump-links button:focus-visible {
  color:#5a51ad;
  border-color:#a7a0d8;
  background:#f5f2ff
}
.editor-section { scroll-margin-top:100px }
.image-editor-grid {
  display:grid;
  grid-template-columns:minmax(230px,.85fr) minmax(290px,1.15fr);
  gap:16px;
  align-items:start
}
.image-editor {
  min-width:0;
  border:1px solid #e1e5ef;
  border-radius:12px;
  padding:17px;
  background:#fff;
  margin:0 0 16px
}
.image-editor-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.image-editor-heading h4 { margin:0; font-size:14px; color:#31405a }
.image-editor-heading>span {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:#77779d;
  background:#f2f1fa;
  padding:4px 7px;
  border-radius:5px;
  white-space:nowrap
}
.image-editor>.field-help { min-height:43px; margin:9px 0 13px }
.image-preview-list { display:flex; gap:12px; overflow-x:auto; padding-bottom:5px }
.image-preview-item { margin:0; flex:0 0 auto; min-width:0; width:100% }
.image-preview-item>a {
  display:block;
  width:100%;
  height:164px;
  border:1px solid #e5e8f1;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(135deg,#f2f3f8,#e9edf5)
}
.image-preview-item img { width:100%; height:100%; object-fit:contain; display:block }
.image-editor-cover .image-preview-item>a { aspect-ratio:16/9; height:auto }
.image-editor-icon .image-preview-item>a { background:#f4f6fa }
.image-editor-icon .image-preview-item img { max-width:164px; margin:auto; padding:8px; border-radius:20px }
.image-preview-item figcaption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  padding-top:8px;
  color:#738199;
  font-size:11px
}
.image-preview-item figcaption>div { display:flex; gap:5px }
.image-preview-item button {
  border:1px solid #e1e4ed;
  border-radius:5px;
  background:#fff;
  color:#6a7286;
  font:inherit;
  padding:4px 7px;
  cursor:pointer
}
.image-preview-item button:disabled { opacity:.35; cursor:default }
.image-preview-item button[data-image-remove]:hover { color:#ad4d61; background:#fff6f7 }
.image-editor-screenshots .image-preview-item { width:220px }
.image-editor-screenshots .image-preview-item>a { height:150px }
.image-placeholder {
  min-height:164px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:#f5f6fa;
  border:1px dashed #dce1ed;
  border-radius:9px;
  color:#8c97ac;
  text-align:center;
  padding:18px 10px
}
.image-placeholder strong { color:#65738b; font-size:12px; font-weight:500 }
.image-placeholder small { font-size:11px; line-height:1.5 }
.image-editor .upload-box { margin-top:12px; padding:14px; border-style:solid; background:#f9faff }
.file-picker {
  display:inline-flex!important;
  position:relative;
  overflow:hidden;
  align-items:center;
  margin:0!important;
  padding:9px 14px;
  border-radius:8px;
  color:#fff!important;
  background:#6860b9;
  border:1px solid #6860b9;
  cursor:pointer;
  font-size:12px!important;
  font-weight:600
}
.file-picker input[type=file] {
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  cursor:pointer
}
.file-picker:focus-within { outline:3px solid #c4bff0; outline-offset:3px }
.file-picker:has(input:disabled) { opacity:.5; cursor:wait }
.upload-source-hint { color:#7c879b; font-size:11px }
.image-import-row { display:flex; gap:7px; align-items:stretch; margin-top:12px }
.image-import-row input { min-width:0; flex:1; font-size:12px; min-height:36px; padding:8px 9px }
.image-import-row .button { padding:8px 10px; font-size:12px; white-space:nowrap }
.upload-box .image-import-help { font-size:11px; line-height:1.6; margin:8px 0 0; color:#8791a2 }
.update-policy-preview {
  border:1px solid #dce7e5;
  border-radius:10px;
  padding:16px 18px;
  margin:0 0 14px;
  background:#f4faf8;
  color:#3b6a60;
  font-size:13px;
  line-height:1.7
}
.update-policy-preview p { margin:6px 0 }
.update-policy-preview small { color:#7a8e88; font-size:12px }
.update-policy-preview[data-mode=minimum],.update-policy-preview[data-mode=latest] { border-color:#eadbc5; background:#fff9ef; color:#946d3a }
.update-policy-preview[data-mode=invalid] { border-color:#eed6dc; background:#fff7f8; color:#a45264 }
.publish-steps { padding-left:18px; font-size:12px; color:#788498; line-height:1.9 }
.publish-steps li { margin:9px 0 }
.table-cover { width:48px; height:48px; border-radius:10px }
@media(max-width:760px) {
  .image-editor-grid { grid-template-columns:minmax(0,1fr) }
  .image-editor { padding:14px }
  .image-editor>.field-help { min-height:0 }
  .editor-jump-links { padding:12px 20px; overflow-x:auto }
  .editor-jump-links button { white-space:nowrap; font-size:12px; padding:8px 10px }
  .image-import-row input { font-size:16px }
  .image-editor-heading { flex-wrap:wrap }
  .image-editor .upload-box { padding:12px }
  .image-editor-screenshots .image-preview-item { width:190px }
}
.admin-brand-art { background:transparent!important; overflow:hidden; border-radius:10px }
.admin-brand-art img { display:block; width:100%; height:100%; object-fit:cover }

/* Operations views share the content editor's quiet, readable surface. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.statistics-filter {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 22px;
  color:#69788d;
  font-size:12px
}
.statistics-filter label {
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:#44546d;
  font-size:13px
}
.statistics-filter input {
  width:160px;
  margin:0;
  padding:10px 12px;
  min-height:40px;
  background:#fff;
  color:#40506a;
  font-size:13px
}
.statistics-filter>.button { min-height:40px; padding:9px 15px }
.text-action { border:0; background:none; color:#655cae; font:inherit; padding:10px 4px; cursor:pointer }
.text-action:hover { text-decoration:underline }
.overview-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.overview-metrics .metric { padding:22px 18px; align-items:flex-start }
.overview-metrics .metric strong { display:block; margin:9px 0 7px; line-height:1.1 }
.metric-caption { display:block; font-size:11px; color:#8792a5; line-height:1.6 }
.overview-metrics .metric:nth-child(4) .metric-symbol { color:#a77788; background:#f7eff3 }
.overview-layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:22px; align-items:start }
.overview-aside { display:grid; gap:15px }
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px;
  border-bottom:1px solid var(--line)
}
.section-heading h2 { font-size:16px; margin:0 0 7px; color:#34415a }
.section-heading p { font-size:12px; line-height:1.7; color:#7d899d; margin:0 }
.section-tag { font-size:11px; color:#7a7796; background:#f2f1f9; padding:6px 9px; border-radius:6px; white-space:nowrap }
.statistics-title { font-size:13px; color:#34415a; font-weight:600; white-space:normal; overflow-wrap:anywhere; display:block; line-height:1.7 }
.number-cell { text-align:right; font-variant-numeric:tabular-nums }
.data-table td.number-cell { color:#3a4861; font-weight:600 }
.statistics-table td:first-child,.ratings-table td:first-child { min-width:170px; max-width:380px }
.statistics-definitions { margin:0; font-size:12px; line-height:1.8 }
.statistics-definitions dt { color:#4b5b72; font-weight:600; margin:18px 0 4px }
.statistics-definitions dt:first-child { margin-top:0 }
.statistics-definitions dd { margin:0; color:#7c879b }
.overview-shortcut {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid #dedaef;
  background:#f1effb;
  color:#686092;
  border-radius:12px;
  padding:19px 22px
}
.overview-shortcut:hover { background:#eae6f9 }
.overview-shortcut strong { display:block; font-size:13px; margin-bottom:7px }
.overview-shortcut small { display:block; font-size:11px; color:#8e87ab }
.overview-shortcut>span:last-child { font-size:19px }
.statistics-panel { min-width:0 }
.statistics-panel .admin-heading>.button { display:inline-flex; gap:8px; align-items:center }
.statistics-panel .statistics-retention { margin-left:auto; font-size:12px; color:#8a94a6 }
.statistics-panel .overview-metrics { margin-bottom:24px }
.statistics-panel .metric-symbol { flex-shrink:0; width:38px; height:38px; border-radius:11px }
.statistics-panel .overview-metrics .metric { gap:13px; padding:20px 18px }
.statistics-panel .overview-metrics .metric strong { font-size:29px; letter-spacing:-.7px }
.statistics-panel .statistics-table { width:100%; min-width:650px }
.statistics-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line) }
.statistics-period { font-size:12px; color:#8c96a8; white-space:nowrap; font-variant-numeric:tabular-nums }
.statistics-member-filter { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:17px 22px; background:#fbfcfe; border-bottom:1px solid var(--line) }
.statistics-member-filter[hidden] { display:none }
.statistics-member-filter label { display:flex; align-items:center; gap:12px; margin:0; font-size:12px; color:#718096 }
.statistics-member-filter input { width:165px; min-height:37px; margin:0; padding:8px 11px; font-size:13px; background:white }
.statistics-member-filter .button { min-height:37px; padding:8px 15px; font-size:12px }
.statistics-game-filter { display:inline-flex; align-items:center; gap:10px; padding:7px 10px 7px 13px; margin-left:auto; color:#6c619b; border:1px solid #e5dff3; border-radius:7px; font-size:12px; background:#f3f0fa }
.statistics-game-filter[hidden] { display:none }
.statistics-game-filter>span { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.statistics-game-filter>button { display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; background:transparent; color:inherit; font-size:19px; cursor:pointer }
.statistics-panel .statistics-table td:first-child { min-width:110px; max-width:360px }
.statistics-panel .statistics-table td { height:69px }
.statistics-member-id { display:inline-block; min-width:36px; color:#5f558f; background:#f3f1f9; padding:5px 9px; font-weight:600; border-radius:6px; font-size:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.statistics-time { color:#8a95a7; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums }
.statistics-row-action { text-align:right; width:116px }
.statistics-row-action .text-action { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:8px 0; font-size:12px }
.statistics-error { margin:17px 22px; padding:12px 15px; color:#a54957; font-size:13px; line-height:1.7; border:1px solid #f1dfe3; border-radius:9px; background:#fff6f7 }
.statistics-empty { padding:54px 20px }
.statistics-legacy { padding:12px 22px; color:#948460; font-size:12px; background:#fcfaf4; border-top:1px solid #f1edde }
.statistics-pagination { display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); padding:16px 22px; font-size:12px; color:#8b95a7 }
.statistics-pagination>div { display:flex; align-items:center; gap:14px }
.statistics-pagination>div>span { min-width:41px; text-align:center; font-variant-numeric:tabular-nums }
.statistics-pagination .button { min-height:34px; padding:7px 12px; font-size:12px }
.statistics-pagination .button:disabled { cursor:default; opacity:.4; box-shadow:none }
.statistics-bottom { display:flex; justify-content:space-between; gap:16px; margin-top:17px; padding:0 2px; color:#929aaa; font-size:11px }
.statistics-bottom a { display:inline-flex; align-items:center; gap:7px; color:#807696; white-space:nowrap }
.statistics-panel[aria-busy=true] .statistics-table { opacity:.6 }
.statistics-panel button:focus-visible { outline:3px solid #b3aae4; outline-offset:3px }
@media(max-width:760px) {
  .statistics-panel .statistics-retention { margin-left:0; flex-basis:100%; font-size:11px }
  .statistics-panel .overview-metrics .metric { padding:17px 14px; gap:10px }
  .statistics-panel .overview-metrics .metric strong { font-size:27px }
  .statistics-panel .metric-symbol { width:32px; height:32px; border-radius:10px }
  .statistics-card-top { padding:16px; flex-wrap:wrap; gap:12px }
  .statistics-card-top .segmented-control { width:auto }
  .statistics-card-top .segmented-control button { padding:10px 17px }
  .statistics-member-filter { padding:15px 16px; gap:10px }
  .statistics-member-filter input { width:150px; font-size:16px }
  .statistics-game-filter { margin-left:0; max-width:100% }
  .statistics-game-filter>span { max-width:240px }
  .statistics-pagination { padding:15px 16px; align-items:flex-start; flex-direction:column; gap:13px }
  .statistics-pagination>div { width:100%; justify-content:space-between }
  .statistics-bottom { flex-wrap:wrap; line-height:1.7; font-size:11px; gap:8px }
}
.compact-empty { padding:36px 15px; text-align:center; white-space:normal; line-height:1.8 }
.compact-empty strong { font-size:14px; color:#64728a; font-weight:500 }
.compact-empty p { font-size:12px; color:#8b95a6; margin:8px 0 0 }
.rating-summary { display:inline-flex; align-items:center; gap:9px; font-variant-numeric:tabular-nums }
.rating-summary strong { font-size:20px; font-weight:650; color:#43516b }
.rating-summary>span:last-child { font-size:12px; color:#9ba3b2 }
.rating-star { color:#c3924c; font-size:20px }
.feedback-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 17px }
.feedback-toolbar>span { font-size:12px; color:#8792a5 }
.segmented-control { display:inline-flex; padding:4px; gap:3px; border:1px solid #e0e3ec; background:#edf0f6; border-radius:10px }
.segmented-control button { border:0; border-radius:7px; background:transparent; padding:9px 17px; color:#78849a; font:inherit; font-size:12px; cursor:pointer }
.segmented-control button[aria-pressed=true] { background:white; color:#5e55a0; box-shadow:0 1px 4px #1826470c; font-weight:600 }
.segmented-control button:hover { color:#4b456c }
.feedback-privacy-note { margin:0 0 22px; color:#8a94a5; font-size:12px; line-height:1.8 }
.feedback-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start }
.feedback-card { min-width:0; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden }
.feedback-card-head { padding:22px 24px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.feedback-card-head>div { min-width:0 }
.feedback-card-head strong { display:block; color:#3e4d65; font-size:14px; line-height:1.5; overflow-wrap:anywhere }
.feedback-card-head time { display:block; margin-top:5px; font-size:11px; color:#949dae }
.feedback-card-head .status { flex-shrink:0 }
.feedback-status-pending { color:#ac824a; background:#faf3e7 }
.feedback-status-replied { color:#58846d; background:#eef7f1 }
.feedback-status-closed { color:#8790a1; background:#f0f2f6 }
.feedback-game { font-size:11px; color:#959fb0; padding:15px 24px 0; overflow-wrap:anywhere }
.feedback-game>span { color:#717e96; margin-left:8px }
.feedback-message { margin:18px 24px; color:#4e5c72; font-size:13px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere }
.feedback-contact { margin:0 24px 22px; color:#929cae; font-size:11px; line-height:1.8; overflow-wrap:anywhere }
.feedback-contact>span { color:#68768e; margin-left:8px; user-select:all }
.feedback-reply-form { background:#fafbfe; padding:19px 24px 22px; border-top:1px solid #edf0f6 }
.feedback-reply-form label { font-size:12px; color:#7a869a; margin:0 }
.feedback-reply-form textarea { margin-top:8px; min-height:90px; font-size:13px; line-height:1.8; padding:11px 13px; resize:vertical; color:#43526c }
.feedback-reply-actions { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap }
.feedback-reply-actions label { display:flex; gap:9px; align-items:center; flex-shrink:0 }
.feedback-reply-actions select { font-size:12px; width:auto; padding:8px 10px; min-height:36px; margin:0 }
.feedback-reply-actions button { margin-left:auto; font-size:12px; padding:10px 13px }
.feedback-reply-time { font-size:10px; color:#96a0b2; flex:1 1 100%; order:2; line-height:1.6 }
.feedback-reply-time:empty { display:none }
.feedback-reply-form .form-error { margin:12px 0 0; font-size:12px }
.feedback-empty { grid-column:1/-1; padding:56px 24px }
.empty-symbol { display:grid; place-items:center; width:50px; height:50px; border-radius:15px; margin:0 auto 18px; color:#879c91; background:#edf4f0 }
.feedback-empty strong { display:block }
.admin-sidebar nav a:focus-visible,.segmented-control button:focus-visible,.text-action:focus-visible,.overview-shortcut:focus-visible { outline:3px solid #b3aae4; outline-offset:3px }
@media(max-width:1250px) {
  .overview-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .overview-layout { grid-template-columns:minmax(0,1fr) 250px }
  .feedback-list { grid-template-columns:minmax(0,1fr) }
}
@media(max-width:1000px) {
  .overview-layout { grid-template-columns:minmax(0,1fr) }
  .overview-aside { grid-template-columns:minmax(0,1fr) 230px; align-items:start }
  .statistics-definitions dt { margin-top:12px }
}
@media(max-width:760px) {
  .statistics-filter { gap:10px; margin-bottom:19px }
  .statistics-filter label { font-size:12px; gap:9px }
  .statistics-filter input { font-size:16px; width:158px; padding:8px 9px }
  .statistics-filter>span { flex-basis:100%; font-size:11px }
  .overview-metrics { gap:10px }
  .overview-metrics .metric { padding:17px 15px }
  .overview-metrics .metric strong { margin:10px 0 6px; font-size:26px }
  .metric-caption { font-size:10px }
  .overview-layout { gap:17px }
  .overview-aside { grid-template-columns:minmax(0,1fr) }
  .section-heading { padding:20px 17px; align-items:flex-start }
  .section-heading h2 { font-size:15px }
  .section-heading p { font-size:11px }
  .section-tag { font-size:10px; padding:5px 7px }
  .statistics-table td:first-child,.ratings-table td:first-child { min-width:140px }
  .statistics-table th,.ratings-table th { font-size:11px }
  .statistics-title { font-size:12px }
  .feedback-toolbar { align-items:flex-start; flex-direction:column; gap:12px }
  .segmented-control { width:100% }
  .segmented-control button { flex:1; padding:10px 12px }
  .feedback-toolbar>span { font-size:11px }
  .feedback-privacy-note { font-size:11px; margin-bottom:18px }
  .feedback-card-head { padding:19px 18px 0 }
  .feedback-game { padding:14px 18px 0 }
  .feedback-message { margin:17px 18px }
  .feedback-contact { margin:0 18px 19px }
  .feedback-reply-form { padding:17px 18px 19px }
  .feedback-reply-form textarea,.feedback-reply-actions select { font-size:16px }
  .feedback-reply-actions { gap:10px }
  .feedback-reply-actions label { gap:7px; font-size:11px }
  .feedback-reply-actions button { padding:11px 12px }
}
@media(prefers-reduced-motion:reduce) {
  .admin-body * { scroll-behavior:auto!important }
}

.featured-panel { margin:0 0 24px; padding:24px; border:1px solid var(--line); border-radius:15px; background:#fff }
.featured-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:19px }
.featured-panel-heading h2 { font-size:17px; color:#3e4d65; margin:0 0 7px }
.featured-panel-heading h2 span { font-size:12px; font-weight:500; color:#8b84ab; margin-left:10px; font-variant-numeric:tabular-nums }
.featured-panel-heading p,.featured-note { font-size:12px; color:#8a94a5; margin:0; line-height:1.7 }
.featured-note { text-align:right }
.featured-lineup { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; list-style:none; margin:0; padding:0 }
.featured-lineup li { min-width:0 }
.featured-lineup button { display:block; width:100%; text-align:left; padding:0; border:0; background:none; font:inherit; cursor:pointer }
.featured-lineup button:focus-visible { outline:3px solid #b3aae4; outline-offset:5px; border-radius:10px }
.featured-cover { position:relative; display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden; background:#f0edf8; color:#c1b8d9; font-size:28px; border-radius:10px; border:1px solid #ebe7f2 }
.featured-cover img { width:100%; height:100%; object-fit:cover; transition:transform .18s ease }
.featured-lineup button:hover .featured-cover img { transform:scale(1.04) }
.featured-cover b { position:absolute; left:7px; bottom:7px; display:grid; place-items:center; min-width:25px; height:25px; padding:0 4px; color:#fff; background:#253042bd; border:1px solid #ffffff4d; border-radius:7px; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums }
.featured-lineup strong { display:block; font-size:12px; line-height:1.5; color:#4c5870; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:10px 0 3px }
.featured-lineup small { display:block; font-size:10px; color:#98a0af }
.featured-empty { border:1px dashed #e2ddeb; padding:26px 18px; border-radius:10px; background:#fbfaff; color:#9690a7; font-size:12px; text-align:center; line-height:1.8 }
.featured-badge { display:inline-block; border-radius:4px; background:#f1eef9; color:#8a7dab; font-size:10px; padding:4px 6px; margin-top:7px; line-height:1.2 }
.featured-settings { display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid #e6e2ef; border-radius:12px; background:#fbfaff; padding:17px 19px }
.featured-switch { flex:1; gap:12px!important; margin:0!important }
.featured-switch input { width:18px!important; height:18px; flex-shrink:0 }
.featured-switch strong { display:block; color:#566078; font-size:13px; font-weight:600 }
.featured-switch small { display:block; color:#929aac; font-size:11px; font-weight:400; line-height:1.7; margin-top:7px }
.featured-order { flex:0 0 115px; margin:0!important; font-size:11px!important }
.featured-order input { padding:9px 11px; margin-top:6px }
.featured-order input:disabled { background:#f1eff5; color:#aaa4b5; cursor:not-allowed }
.featured-order .field-help { font-size:10px }
.announcement-meta { justify-content:flex-start; gap:9px; flex-wrap:wrap }
.announcement-meta time { margin-left:auto }
.announcement-type { font-size:11px; color:#738b82; background:#f0f6f2; border:1px solid #dfece3; border-radius:5px; padding:5px 8px; line-height:1 }
.announcement-type-news { color:#8d7ca8; background:#f4f0fa; border-color:#eae3f2 }
@media(max-width:1150px) {
  .featured-lineup { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px }
}
@media(max-width:760px) {
  .featured-panel { padding:19px 17px; margin-bottom:18px }
  .featured-panel-heading { display:block; margin-bottom:16px }
  .featured-panel-heading h2 { font-size:15px }
  .featured-panel-heading p,.featured-note { font-size:11px }
  .featured-note { display:block; text-align:left; margin-top:4px }
  .featured-lineup { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .featured-settings { flex-direction:column; align-items:stretch; padding:16px; gap:16px }
  .featured-order { flex-basis:auto; max-width:160px }
  .featured-order input { font-size:16px }
  .announcement-meta { font-size:11px; gap:6px }
}