/* ===== Admin no estilo "Control Center" ===== */
body.admin-page { background: #09090c; color: #e8e8f0; }
body.admin-page #app { min-height: 100vh; }
.adm { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.adm-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #0d0d12; border-right: 1px solid #ffffff0d; padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 900; font-size: 1.05rem; }
.adm-brand img { height: 34px; }
.adm-sec { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6f6f80; padding: 16px 12px 6px; }
.adm-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #c9c9d6; text-decoration: none; font-weight: 600; font-size: .9rem; border-left: 2px solid transparent; }
.adm-link i { font-style: normal; width: 18px; text-align: center; opacity: .8; }
.adm-link:hover { background: #ffffff08; color: #fff; }
.adm-link.on { background: linear-gradient(90deg, #a855f71f, transparent); color: #fff; border-left-color: #a855f7; }
.adm-link.on i { color: #c084fc; opacity: 1; }
.adm-link.back { margin-top: auto; color: #8a8a99; }
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: #09090cee; backdrop-filter: blur(8px); border-bottom: 1px solid #ffffff0d; }
.adm-top b { font-size: 1.1rem; }
.adm-burger { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #ffffff1a; background: #ffffff08; color: #fff; cursor: pointer; font-size: 1rem; }
.adm-exit { border: 1px solid #ffffff22; background: transparent; color: #fff; border-radius: 99px; padding: 7px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.adm-content { padding: 22px; }
.adm-box { background: #111117; border: 1px solid #ffffff0d; border-radius: 18px; padding: 22px; }
.adm-box h1 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.adm-sub { color: #9a9aab; font-size: .88rem; margin: 6px 0 16px; }
.adm-note { color: #9a9aab; font-size: .8rem; margin: 10px 2px 0; }

/* barra de abas (igual ao original) */
.adm-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 6px; background: #0b0b10; border: 1px solid #ffffff0a; border-radius: 12px; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tab { flex: 1 0 auto; font: inherit; font-size: .8rem; font-weight: 700; color: #b9b9c8; background: none; border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.adm-tab:hover { color: #fff; }
.adm-tab.on { background: linear-gradient(135deg, #a855f7, #8b3dff); color: #fff; box-shadow: 0 6px 20px #a855f755; }

/* cards em duas colunas */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.adm-card { background: #0e0e14; border: 1px solid #ffffff0d; border-radius: 14px; padding: 18px; }
.adm-card + .adm-card { margin-top: 0; }
.adm-box > .adm-card { margin-top: 14px; }
.adm-card-title { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.adm-card-title i { width: 7px; height: 7px; border-radius: 50%; background: #a855f7; box-shadow: 0 0 10px #a855f7; }

.cfg-field { margin-bottom: 14px; }
.cfg-field > label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a99; margin: 0 0 6px; }
.cfg-field input, .cfg-field select, .adm-card select { width: 100%; background: #16161d; border: 1px solid #ffffff12; border-radius: 9px; color: #fff; padding: 11px 12px; font: inherit; font-size: .9rem; }
.cfg-field input:focus, .cfg-field select:focus { outline: 1px solid #a855f7; border-color: transparent; }
.cfg-hint { margin-top: 6px; font-size: .72rem; color: #8a8a99; background: #ffffff05; border: 1px solid #ffffff0a; border-radius: 8px; padding: 7px 10px; }
.cfg-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; margin-bottom: 8px; background: #13131a; border: 1px solid #ffffff0a; border-radius: 10px; }
.cfg-toggle b { font-size: .82rem; }
.cfg-toggle .hint { font-size: .72rem; }
body.admin-page .switch input:checked + span { background: #a855f7; }
.adm-savebar { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 18px; }
.adm-savebar .err { margin: 0; }
.adm-save { box-shadow: 0 10px 30px #a855f766; background: linear-gradient(135deg, #a855f7, #8b3dff); }

.list-editor .le-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr auto; gap: 8px; align-items: end; padding: 10px; margin-bottom: 8px; background: #13131a; border: 1px solid #ffffff0a; border-radius: 10px; }
.le-cell small { display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; color: #8a8a99; margin-bottom: 4px; }
.le-cell input, .le-cell select { width: 100%; background: #16161d; border: 1px solid #ffffff12; border-radius: 8px; color: #fff; padding: 9px; font: inherit; font-size: .85rem; }
.le-del { background: none; border: 0; color: #ff5470; font-size: 1.3rem; cursor: pointer; padding: 6px; }
.url-in { display: flex; gap: 10px; align-items: center; }
.url-in img { width: 64px; height: 44px; object-fit: contain; border-radius: 8px; background: #16161d; border: 1px solid #ffffff12; }
.readonly { display: flex; gap: 8px; }

/* tabelas e stats */
.adm-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.adm-table th { text-align: left; color: #8a8a99; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 8px; border-bottom: 1px solid #ffffff12; }
.adm-table td { padding: 10px 8px; border-bottom: 1px solid #ffffff08; vertical-align: top; }
.adm-table tr:hover td { background: #ffffff04; }
.nowrap { white-space: nowrap; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.adm-stat { background: #0e0e14; border: 1px solid #ffffff0d; border-radius: 14px; padding: 14px; }
.adm-stat small { display: block; color: #8a8a99; font-size: .74rem; margin-bottom: 4px; }
.adm-stat b { font-size: 1.3rem; }
.adm-stat.g b { color: #00e5a8; }
.adm-stat.w b { color: #ffb547; }
.adm-box .filters { margin: 14px 0 0; }

/* mobile: menu lateral vira gaveta */
@media (max-width: 900px) {
  .adm { grid-template-columns: 1fr; }
  .adm-side { position: fixed; left: 0; top: 0; bottom: 0; width: 250px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  body.adm-open .adm-side { transform: none; box-shadow: 0 0 60px #000; }
  .adm-content { padding: 12px; }
  .adm-box { padding: 14px; }
  .adm-grid { grid-template-columns: 1fr; }
  .list-editor .le-row { grid-template-columns: 1fr 1fr auto; }
}
@media (min-width: 901px) { .adm-burger { display: none; } }

/* mini player de musica do admin */
.mp { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: #13131acc; backdrop-filter: blur(8px); border: 1px solid #ffffff1a; border-radius: 14px; padding: 6px; box-shadow: 0 10px 30px #000a; }
.mp-frame { width: 1px; height: 1px; overflow: hidden; opacity: .01; }
.mp.show .mp-frame { width: 260px; height: 146px; opacity: 1; border-radius: 10px; margin-bottom: 6px; }
.mp-frame iframe { width: 100%; height: 100%; border: 0; }
.mp-ctrl { display: flex; align-items: center; gap: 4px; }
.mp-ctrl button { width: 34px; height: 30px; border-radius: 8px; border: 0; background: #ffffff10; color: #fff; cursor: pointer; }
.mp-ctrl button:hover { background: #a855f7; }
.mp-note { color: #c084fc; padding: 0 6px; animation: mpbeat 1s ease-in-out infinite; }
.mp.off .mp-note { animation: none; opacity: .4; }
@keyframes mpbeat { 50% { transform: scale(1.3); } }
.adm-savebar { padding-right: 190px; }
.readonly .btn { flex: 0 0 auto; white-space: nowrap; letter-spacing: 0; }
@media (max-width: 900px) { .adm-savebar { padding-right: 0; bottom: 70px; } }

/* guia rapido (aba Jogo) */
.adm-col { display: flex; flex-direction: column; gap: 16px; }
.guide-row { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ffffff0a; font-size: .82rem; line-height: 1.45; }
.guide-row:last-child { border-bottom: 0; }
.guide-k { font-weight: 800; color: #e8e8f0; }
.guide-v { color: #a9a9ba; }
.guide-v b { color: #c084fc; }