:root {
  --bg: #0c0e12;
  --card: #121521;
  --muted: #9aa3b2;
  --text: #e9edf5;
  --border: rgba(255,255,255,.08);
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(120,90,255,.10), transparent 60%),
              radial-gradient(1200px 800px at 90% 20%, rgba(255,70,120,.08), transparent 60%),
              var(--bg);
  color: var(--text);
}

.wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(12,14,18,.7);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 2;
}

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

.grid {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 18px;
  padding: 18px;
}

@media (max-width: 960px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: rgba(18,21,33,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

h1, h2 { margin: 0 0 10px; }
p { margin: 0 0 12px; }

label {
  display: block;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 13px;
}

input, textarea, select {
  width: 100%;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
}

.platforms{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}

.plat{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
}

.plat input{width:18px;height:18px;accent-color:rgba(120,90,255,.95)}
.plat.off{opacity:.55;background:rgba(255,255,255,.03)}

textarea { resize: vertical; }

.row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

button, .btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover, .btn:hover { background: rgba(255,255,255,.12); }

button.secondary, .btn.secondary { background: rgba(120,90,255,.14); }
button.secondary:hover, .btn.secondary:hover { background: rgba(120,90,255,.22); }

button.danger, .btn.danger { background: rgba(255,70,120,.14); }
button.danger:hover, .btn.danger:hover { background: rgba(255,70,120,.22); }

.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.msg { margin-top: 10px; min-height: 18px; }
.msg.ok { color: #77f2b4; }
.msg.bad { color: #ff90a8; }

.table-wrap { overflow: auto; border-radius: 12px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
th { color: var(--muted); font-weight: 600; background: rgba(0,0,0,.18); }
tr:hover td { background: rgba(255,255,255,.04); }

.preview {
  margin-top: 10px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.14);
}
.preview img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* ---------- Login redesign ---------- */
.login-bg{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
}

.login-shell{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}

@media (max-width: 860px){
  .login-shell{ grid-template-columns: 1fr; }
}

.login-brand{
  background: rgba(18,21,33,.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display:flex;
  gap:12px;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.login-brand:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 360px at 20% 20%, rgba(120,90,255,.18), transparent 60%),
              radial-gradient(500px 340px at 80% 30%, rgba(255,70,120,.14), transparent 60%);
  pointer-events:none;
}

.brand-mark{
  width:46px;
  height:46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(120,90,255,.9), rgba(255,70,120,.75));
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  position:relative;
  z-index:1;
}

.brand-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  position:relative;
  z-index:1;
}

.brand-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
  position:relative;
  z-index:1;
}

.login-card{
  background: rgba(18,21,33,.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.login-head h1{
  font-size: 22px;
  margin: 0 0 6px;
}

.login-head p{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.login-form .field{ margin-bottom: 12px; }
.login-form input{ padding: 12px 12px; border-radius: 14px; }

.alert{
  border: 1px solid rgba(255,70,120,.25);
  background: rgba(255,70,120,.08);
  color: #ffb3c2;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 10px 0 14px;
}

.cta{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(120,90,255,.22);
  border: 1px solid rgba(120,90,255,.35);
  font-weight: 700;
}

.cta:hover{ background: rgba(120,90,255,.30); }

.login-foot{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}

.pill{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  padding: 6px 10px;
  border-radius: 999px;
}

.login-meta{
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  padding: 6px 4px 0;
}

/* ---------- Admin polish ---------- */
.title-cell .title-main{ font-weight: 700; }
.title-cell .title-sub{ margin-top: 3px; font-size: 12px; color: var(--muted); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--muted);
}
.chip.ok{
  border-color: rgba(119,242,180,.25);
  background: rgba(119,242,180,.08);
  color: #bfffe0;
}
.chip.off{
  border-color: rgba(255,144,168,.22);
  background: rgba(255,144,168,.08);
  color: #ffb3c2;
}

/* Editor panel hidden by default */
.editor{
  position: sticky;
  top: 86px;
  height: fit-content;
  display: none;
}
.editor.open{
  display: block;
  animation: popIn .14s ease-out;
}

@keyframes popIn{
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.editor-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}

button.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
button.ghost:hover{ background: rgba(255,255,255,.10); }

/* ---------- Mobile admin improvements ---------- */
@media (max-width: 960px){
  .topbar{
    gap: 10px;
    flex-wrap: wrap;
  }
  .topbar-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .grid{
    padding: 12px;
    gap: 12px;
  }
  .card{
    padding: 14px;
  }

  /* Make the editor a full-screen sheet on mobile */
  .editor{
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    top: auto;
    z-index: 50;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
    overflow: auto;
    display: none;
  }
  .editor.open{ display: block; }

  /* Table: keep it scrollable */
  .table-wrap{
    border-radius: 14px;
  }
  table{
    min-width: 820px;
  }
}