/* ============ Admin shell ============ */
body.admin{ background:var(--paper); }

.admin-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(10px);
}
.admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 60px); }

.admin-sidebar{
  border-inline-end:1px solid var(--line); padding:18px 12px; position:sticky; top:60px; align-self:start;
  height:calc(100vh - 60px); overflow-y:auto;
}
.admin-nav button{
  width:100%; text-align:start; padding:11px 14px; border-radius:10px; border:0;
  background:transparent; color:var(--text-dim); font-weight:600; font-size:.88rem;
  display:flex; align-items:center; gap:10px; margin-bottom:2px;
}
.admin-nav button.active{ background:var(--ink); color:var(--paper); }
.admin-nav button:hover:not(.active){ background:color-mix(in srgb, var(--text) 6%, transparent); }
.admin-nav .badge{
  margin-inline-start:auto; font-size:.68rem; background:color-mix(in srgb, var(--accent) 20%, transparent);
  color:var(--accent-ink); padding:1px 7px; border-radius:999px; font-weight:800;
}
.admin-nav button.active .badge{ background:color-mix(in srgb, var(--paper) 20%, transparent); color:var(--paper); }

.admin-main{ padding:26px; max-width:980px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.panel-head h2{ font-size:1.3rem; }
.panel-head p{ margin-top:4px; font-size:.85rem; }

.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:18px; margin-bottom:14px;
}
.row-item{
  display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:10px; background:var(--paper-raised);
}
.row-item .grip{ color:var(--text-dim); font-size:.7rem; flex:none; width:44px; text-align:center;
  font-family:'Poppins',sans-serif; font-weight:800; background:color-mix(in srgb, var(--teal) 14%, transparent); color:var(--teal-ink); border-radius:8px; padding:4px 0;}
.row-item .content{ flex:1; min-width:0; }
.row-item .content strong{ display:block; font-size:.92rem; }
.row-item .content span{ font-size:.8rem; color:var(--text-dim); display:block; margin-top:2px; }
.row-item .actions{ display:flex; gap:6px; flex:none; }

.btn-icon{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.btn-icon:hover{ background:color-mix(in srgb, var(--text) 8%, transparent); }
.btn-icon.danger:hover{ background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger); }

.switch{ position:relative; display:inline-block; width:42px; height:24px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:.2s; cursor:pointer; }
.switch .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .slider{ background:var(--teal); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
[dir="rtl"] .switch input:checked + .slider::before{ transform:translateX(-18px); }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.78rem; font-weight:700; margin-bottom:6px; color:var(--text-dim); }
.field input[type="text"], .field textarea, .field select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); color:var(--text); font-family:inherit; font-size:.88rem;
}
.field textarea{ min-height:70px; resize:vertical; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lang-block{ border:1px dashed var(--line); border-radius:12px; padding:14px; }
.lang-block h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-bottom:10px; }

.btn-sm{ padding:9px 16px; border-radius:10px; font-size:.82rem; font-weight:700; border:1px solid var(--line); background:transparent; color:var(--text); }
.btn-sm.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-sm.accent{ background:var(--accent); color:#20120A; border-color:var(--accent); }
.btn-sm.danger{ background:transparent; color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, var(--line)); }

.toolbar{ display:flex; gap:8px; flex-wrap:wrap; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--text-dim); font-size:.88rem; }

.toast-msg{
  position:fixed; bottom:20px; inset-inline-end:20px; background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:12px; font-size:.85rem; font-weight:600; box-shadow:var(--shadow);
  transform:translateY(140%); transition:.3s; z-index:100;
}
.toast-msg.show{ transform:translateY(0); }

/* ---- login screen ---- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background: radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--paper);
}
.login-card{
  width:100%; max-width:380px; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:32px 28px; box-shadow:var(--shadow);
}
.login-card h1{ font-size:1.25rem; margin-bottom:6px; }
.login-card p.sub{ font-size:.85rem; margin-bottom:22px; }
.login-hint{ margin-top:16px; font-size:.75rem; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--teal) 12%, transparent); color:var(--teal-ink); }

/* responsive */
@media (max-width: 860px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{
    position:static; height:auto; border-inline-end:0; border-bottom:1px solid var(--line);
    display:flex; overflow-x:auto; gap:4px; padding:10px 12px;
  }
  .admin-nav{ display:flex; gap:4px; }
  .admin-nav button{ white-space:nowrap; width:auto; }
  .admin-main{ padding:18px 16px; }
  .two-col{ grid-template-columns:1fr; }
}