
:root { --admin-side: 280px; }
.admin-page { background: #eef3ff; min-height: 100vh; }
.admin-root { min-height: 100vh; }
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 20% 20%, rgba(59,130,246,.18), transparent 30%), linear-gradient(135deg, #f8fafc 0%, #eaf1ff 100%); }
.admin-login__card { width: min(460px, 100%); background: rgba(255,255,255,.92); border: 1px solid rgba(148,163,184,.3); border-radius: 32px; padding: 28px; box-shadow: 0 30px 80px -35px rgba(11,58,168,.45); backdrop-filter: blur(14px); }
.admin-logo { width: fit-content; padding: 8px 13px; border-radius: 99px; background: var(--brand-tint); color: var(--brand); font-weight: 800; direction: ltr; margin-bottom: 18px; }
.admin-login h1 { margin: 0 0 8px; font-size: 28px; }
.admin-login p { margin: 0 0 22px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.9; }
.admin-form { display: grid; gap: 14px; }
.admin-form label, .admin-field { display: grid; gap: 7px; }
.admin-form span, .admin-field span { color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.admin-form input, .admin-form textarea, .admin-form select, .admin-field input, .admin-field textarea, .admin-field select { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 11px 12px; font: inherit; font-size: 13px; color: var(--ink); outline: none; }
.admin-form textarea, .admin-field textarea { min-height: 86px; resize: vertical; line-height: 1.8; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus, .admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { border-color: rgba(11,58,168,.45); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.admin-note { min-height: 22px; color: #b91c1c; font-size: 12px; }
.admin-note--hint { color: var(--ink-soft); background: #f8fafc; border: 1px dashed var(--line); border-radius: 14px; padding: 10px 12px; line-height: 1.8; }
.admin-note--hint bdi { direction: ltr; unicode-bidi: embed; color: var(--brand); font-weight: 800; }
.admin-shell { display: grid; grid-template-columns: var(--admin-side) minmax(0,1fr); min-height: 100vh; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 18px; background: #071a43; color: #fff; display: flex; flex-direction: column; gap: 18px; }
.admin-brand { display: grid; gap: 4px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.08); color: #fff; }
.admin-brand span { font-weight: 900; direction: ltr; font-size: 20px; }
.admin-brand small { color: rgba(255,255,255,.68); }
.admin-tabs { display: grid; gap: 8px; }
.admin-tabs button, .admin-logout { text-align: right; border-radius: 16px; padding: 12px 13px; color: rgba(255,255,255,.78); background: transparent; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-tabs button:hover, .admin-tabs button.is-active { background: rgba(255,255,255,.1); color: #fff; }
.admin-tabs button.is-active { box-shadow: inset 3px 0 0 #38bdf8; }
.admin-logout { margin-top: auto; background: rgba(239,68,68,.14); color: #fecaca; }
.admin-main { padding: 26px; min-width: 0; }
.admin-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.admin-header h1 { margin: 4px 0 7px; font-size: clamp(24px,3vw,38px); }
.admin-header p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-status { min-height: 24px; margin-bottom: 12px; font-size: 13px; font-weight: 800; color: var(--brand); }
.admin-panel { display: grid; gap: 18px; }
.admin-toolbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--line-soft); border-radius: 22px; box-shadow: var(--shadow-sm); }
.admin-toolbar p { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.admin-toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-grid { display: grid; gap: 14px; grid-template-columns: repeat(1,minmax(0,1fr)); }
.admin-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-sm); }
.admin-card__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); background: #fbfdff; }
.admin-card__head strong { color: var(--ink); font-size: 14px; }
.admin-card__head small { color: var(--ink-mute); direction: ltr; }
.admin-card__body { padding: 16px; display: grid; gap: 13px; }
.admin-cols { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.admin-cols.admin-cols--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.admin-switch { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.admin-switch input { width: auto; }
.admin-danger { color: #b91c1c; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 12px; padding: 9px 12px; font-weight: 800; }
.admin-danger:hover { background: #ffe4e6; }
.admin-upload { display: flex; gap: 8px; align-items: center; }
.admin-upload input[type="text"] { flex: 1; min-width: 0; }
.admin-upload input[type="file"] { display: none; }
.admin-mini { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.admin-preview { width: 96px; height: 72px; border-radius: 14px; border: 1px solid var(--line-soft); object-fit: cover; background: #f8fafc; display: block; }
video.admin-preview { background: #000; }
.admin-json { width: 100%; min-height: 460px; direction: ltr; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.admin-empty { padding: 26px; background: #fff; border: 1px dashed var(--line); border-radius: 22px; color: var(--ink-soft); text-align: center; }
@media (max-width: 920px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; } .admin-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-header { flex-direction: column; } .admin-actions { justify-content: flex-start; } }
@media (max-width: 680px) { .admin-main { padding: 16px; } .admin-cols, .admin-cols.admin-cols--3 { grid-template-columns: 1fr; } .admin-toolbar { align-items: flex-start; flex-direction: column; } .admin-mini { grid-template-columns: 1fr; } }

.admin-open-note{margin:12px 14px 0;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.78);font-size:12px;line-height:1.7}
.admin-stepper{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center}
.admin-stepper input{text-align:center}
.admin-stepper__btn{height:44px;border-radius:14px;background:#eef2ff;color:var(--brand);font-size:22px;font-weight:900;border:1px solid rgba(11,58,168,.12)}
.admin-stepper__btn:hover{background:#dbeafe}

/* ===== Modal-driven admin editor ===== */
.admin-brand{align-items:center;grid-template-columns:44px 1fr;display:grid}
.admin-brand img{width:44px;height:44px;border-radius:14px;object-fit:contain;background:rgba(255,255,255,.08);padding:4px}
.admin-summary-card__body{padding:14px;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:center}
.admin-summary-copy{display:grid;gap:6px;min-width:0}
.admin-summary-copy strong{font-size:15px;color:var(--ink)}
.admin-summary-copy small{direction:ltr;color:var(--ink-mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-summary-copy span{width:max-content;max-width:100%;border-radius:99px;background:var(--brand-tint);color:var(--brand);padding:5px 9px;font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-summary-copy p{margin:0;color:var(--ink-soft);font-size:12px;line-height:1.8}
.admin-card-actions,.admin-inline-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.admin-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;animation:adminFade .18s ease both}
.admin-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(10px)}
.admin-modal__dialog{position:relative;z-index:1;width:min(1080px,100%);max-height:min(90vh,860px);display:flex;flex-direction:column;background:#fff;border:1px solid rgba(148,163,184,.25);border-radius:28px;box-shadow:0 30px 90px -30px rgba(2,6,23,.72);overflow:hidden}
.admin-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:#fbfdff;border-bottom:1px solid var(--line-soft)}
.admin-modal__head strong{font-size:16px;color:var(--ink)}
.admin-modal__head button{width:38px;height:38px;border-radius:50%;background:#f1f5f9;font-size:25px;color:var(--ink)}
.admin-modal__body{padding:18px;overflow:auto;display:grid;gap:16px}
.admin-modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line-soft);background:#fbfdff}
.admin-editor{display:grid;gap:16px}
.admin-upload-field{gap:10px!important}
.admin-upload-preview{display:flex;align-items:center;gap:10px}
.admin-upload-preview .admin-preview{width:120px;height:84px}
.admin-upload-large-preview{width:100%;max-height:420px;border-radius:22px;object-fit:contain;background:#020617;border:1px solid var(--line-soft)}
.admin-upload-confirm{display:grid;gap:16px}
.admin-upload-confirm p{margin:0;color:var(--ink-soft);font-size:12.5px;line-height:1.9;background:#f8fafc;border:1px dashed var(--line);border-radius:16px;padding:12px}
.admin-subsection{display:grid;gap:12px;padding:14px;border:1px dashed var(--line);border-radius:22px;background:#f8fafc}
.admin-subsection__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.admin-subsection__head strong{display:block;color:var(--ink)}
.admin-subsection__head small{display:block;color:var(--ink-soft);font-size:12px;line-height:1.8;margin-top:3px}
.admin-story-items{display:grid;gap:12px}
.admin-story-item{background:#fff;border:1px solid var(--line-soft);border-radius:20px;padding:14px;display:grid;gap:12px;box-shadow:var(--shadow-sm)}
.admin-story-item .admin-preview{width:96px;height:132px}
.admin-open-note{margin-top:auto}
@keyframes adminFade{from{opacity:0}to{opacity:1}}
@media (max-width:760px){.admin-summary-card__body{grid-template-columns:80px 1fr}.admin-card-actions{grid-column:1/-1;justify-content:flex-start}.admin-modal{padding:8px}.admin-modal__dialog{max-height:96vh;border-radius:20px}.admin-modal__body{padding:12px}.admin-subsection__head{align-items:flex-start;flex-direction:column}.admin-story-item .admin-mini{grid-template-columns:1fr}.admin-story-item .admin-preview{width:100%;height:220px}}
.admin-brand img{grid-row:1/3}.admin-brand span,.admin-brand small{grid-column:2}

/* ===== Cleaner upload previews + visual cropper ===== */
.admin-upload-preview{
  width:132px;
  height:94px;
  border-radius:18px;
  border:1px solid var(--line-soft);
  background:linear-gradient(135deg,#f8fafc,#eef6ff);
  overflow:hidden;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.admin-upload-preview .admin-preview,
.admin-upload-preview img.admin-preview,
.admin-upload-preview video.admin-preview{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  border:0;
  border-radius:0;
  object-fit:cover;
}
.admin-upload-field{min-width:0;overflow:hidden}
.admin-upload{min-width:0}
.admin-upload .btn{white-space:nowrap}
.admin-crop-modal .admin-modal__dialog{width:min(1120px,100%)}
.admin-crop-workspace{gap:14px;align-items:stretch}
.admin-crop-hint{display:grid;gap:6px;padding:12px 14px;border-radius:18px;background:#f8fafc;border:1px dashed var(--line);color:var(--ink-soft);line-height:1.8}
.admin-crop-hint strong{color:var(--ink);font-size:14px}
.admin-crop-hint span{font-size:12.5px}
.admin-crop-presets{display:flex;gap:8px;flex-wrap:wrap}
.admin-crop-preset{border:1px solid var(--line-soft);background:#fff;border-radius:999px;padding:9px 13px;color:var(--ink-soft);font-weight:900;font-size:12px;box-shadow:var(--shadow-sm)}
.admin-crop-preset:hover,.admin-crop-preset.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.admin-crop-stage-wrap{display:grid;place-items:center;padding:12px;border-radius:24px;background:radial-gradient(circle at 50% 0%, rgba(59,130,246,.10), transparent 34%), #0f172a;overflow:hidden;min-height:280px}
.admin-cropper{position:relative;overflow:hidden;background:#020617;border-radius:18px;box-shadow:0 18px 50px -30px rgba(0,0,0,.9);touch-action:none;user-select:none;max-width:100%}
.admin-crop-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#020617}
.admin-crop-shade{position:absolute;inset:0;background:rgba(2,6,23,.45);pointer-events:none}
.admin-crop-box{position:absolute;border:2px solid #fff;border-radius:14px;box-shadow:0 0 0 9999px rgba(2,6,23,.42),0 14px 40px rgba(0,0,0,.35);cursor:move;touch-action:none;background:linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:33.333% 33.333%}
.admin-crop-box::after{content:'کادر برش';position:absolute;right:10px;top:8px;padding:4px 8px;border-radius:999px;background:rgba(2,6,23,.6);color:#fff;font-size:10px;font-weight:900;backdrop-filter:blur(8px)}
.admin-crop-handle{position:absolute;width:18px;height:18px;border-radius:50%;background:#38bdf8;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.admin-crop-handle--nw{top:-9px;left:-9px;cursor:nwse-resize}
.admin-crop-handle--ne{top:-9px;right:-9px;cursor:nesw-resize}
.admin-crop-handle--sw{bottom:-9px;left:-9px;cursor:nesw-resize}
.admin-crop-handle--se{bottom:-9px;right:-9px;cursor:nwse-resize}
.admin-crop-info{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(2,6,23,.62);color:#fff;font-size:11px;font-weight:900;backdrop-filter:blur(8px);pointer-events:none;direction:ltr}
@media (max-width:760px){.admin-upload-preview{width:100%;height:170px}.admin-upload{flex-direction:column;align-items:stretch}.admin-crop-stage-wrap{padding:8px;min-height:240px}.admin-crop-info{font-size:10px}}

/* ===== Secure admin login + order inbox ===== */
[hidden]{display:none!important}
.admin-login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,rgba(59,130,246,.18),transparent 32%),linear-gradient(135deg,#071a43,#0f172a);}
.admin-login__card{width:min(460px,100%);display:grid;gap:16px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.34);border-radius:28px;padding:24px;box-shadow:0 30px 90px -35px rgba(0,0,0,.85);}
.admin-login__brand{display:flex;align-items:center;gap:10px;color:var(--brand);font-weight:900;font-size:20px;}
.admin-login__brand img{width:54px;height:54px;object-fit:contain;border-radius:16px;background:#f8fafc;padding:5px;}
.admin-login__copy h1{margin:4px 0 8px;color:var(--ink);font-size:clamp(24px,5vw,34px);}
.admin-login__copy p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.9;}
.admin-login__copy code{direction:ltr;display:inline-block;background:#eef2ff;color:var(--brand);border-radius:8px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
.admin-login__status{min-height:22px;font-size:13px;font-weight:800;line-height:1.8;}
.admin-order-card .admin-card__body{gap:14px;}
.admin-order-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:16px;background:var(--brand-tint);border:1px solid rgba(11,58,168,.12);}
.admin-order-meta span,.admin-order-line span{color:var(--ink-soft);font-size:12px;font-weight:800;}
.admin-order-meta strong{color:var(--brand);font-size:16px;direction:ltr;unicode-bidi:plaintext;}
.admin-order-line{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:14px;background:#fff;}
.admin-order-line b{color:var(--ink);font-size:13px;overflow-wrap:anywhere;}
.admin-order-line p{margin:0;color:var(--ink-soft);line-height:1.9;font-size:13px;overflow-wrap:anywhere;}
.admin-orders-grid{align-items:start;}

/* ============================================================
   ADMIN UX RESPONSIVE POLISH V4
   ============================================================ */
.admin-page,
.admin-root,
.admin-shell,
.admin-main,
.admin-panel,
.admin-card,
.admin-modal__dialog {
  max-width: 100%;
  min-width: 0;
}

.admin-page {
  overflow-x: hidden;
}

.admin-brand,
.admin-summary-copy,
.admin-card__head,
.admin-toolbar,
.admin-actions,
.admin-card-actions,
.admin-inline-actions,
.admin-upload,
.admin-field,
.admin-form,
.admin-cols,
.admin-editor {
  min-width: 0;
}

.admin-field input,
.admin-field select,
.admin-field textarea,
.admin-form input,
.admin-form select,
.admin-form textarea {
  min-height: 44px;
}

.admin-card__head,
.admin-toolbar,
.admin-header,
.admin-summary-card__body {
  overflow-wrap: anywhere;
}

.admin-tabs button,
.admin-actions .btn,
.admin-toolbar__actions .btn,
.admin-card-actions .btn,
.admin-inline-actions .btn,
.admin-modal__foot .btn {
  min-height: 40px;
}

.admin-login__card {
  margin-inline: auto;
}

@media (max-width: 920px) {
  .admin-shell {
    display: block !important;
  }

  .admin-sidebar {
    position: relative !important;
    height: auto !important;
    min-height: 0;
    padding: 14px !important;
    gap: 12px;
  }

  .admin-brand {
    border-radius: 18px;
    padding: 12px;
  }

  .admin-tabs {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-tabs button {
    flex: 0 0 auto;
    min-width: 132px;
    justify-content: center;
    text-align: center;
    scroll-snap-align: start;
  }

  .admin-open-note {
    margin-top: 0 !important;
  }

  .admin-main {
    padding: 18px !important;
  }

  .admin-header {
    align-items: stretch !important;
  }

  .admin-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 680px) {
  .admin-login {
    padding: 14px !important;
  }

  .admin-login__card {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .admin-main {
    padding: 14px !important;
  }

  .admin-header h1 {
    font-size: 26px;
  }

  .admin-actions,
  .admin-toolbar__actions,
  .admin-card-actions,
  .admin-inline-actions,
  .admin-modal__foot {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
  }

  .admin-actions .btn,
  .admin-toolbar__actions .btn,
  .admin-card-actions .btn,
  .admin-inline-actions .btn,
  .admin-modal__foot .btn {
    width: 100%;
    justify-content: center;
  }

  .admin-summary-card__body {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .admin-summary-card__body .admin-preview,
  .admin-upload-preview,
  .admin-upload-preview .admin-preview {
    width: 100% !important;
    height: 180px !important;
  }

  .admin-summary-copy span {
    margin-inline: auto;
  }

  .admin-card__head {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .admin-upload {
    flex-direction: column;
    align-items: stretch !important;
  }

  .admin-modal {
    padding: 6px !important;
    place-items: end center !important;
  }

  .admin-modal__dialog {
    width: 100% !important;
    max-height: 96vh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .admin-modal__head,
  .admin-modal__body,
  .admin-modal__foot {
    padding-inline: 12px !important;
  }

  .admin-json {
    min-height: 340px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .admin-tabs button {
    min-width: 116px;
    font-size: 12px;
  }

  .admin-login__copy h1 {
    font-size: 24px;
  }
}

/* ============================================================
   v11 — projects, page builder, code editor, credentials
   ============================================================ */
.admin-subhead { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--ink, #0f172a); }
.admin-hint { margin: 0 0 14px; font-size: 12.5px; color: #64748b; line-height: 1.7; }

/* Code editor field (LTR, monospace) */
.admin-field--code textarea.admin-code-input {
  direction: ltr; text-align: left;
  font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: 13px; line-height: 1.7; tab-size: 2;
  background: #0b1120; color: #e2e8f0; border-color: #1e293b;
  border-radius: 12px; padding: 12px; min-height: 170px; white-space: pre;
}
.admin-field--code textarea.admin-code-input::placeholder { color: #64748b; }

/* Page builder */
.builder-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.builder-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e6e9f2; border-radius: 14px;
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.builder-row:hover { border-color: #c7d2fe; box-shadow: 0 6px 16px -10px rgba(11,58,168,.4); }
.builder-row.is-hidden { opacity: .55; background: #f8fafc; border-style: dashed; }
.builder-row__grip { color: #94a3b8; font-size: 18px; cursor: grab; user-select: none; }
.builder-row__title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.builder-row__title strong { font-size: 14.5px; font-weight: 700; color: #0f172a; }
.builder-row__title small { font-size: 11px; color: #94a3b8; direction: ltr; }
.builder-row__moves { display: flex; gap: 6px; }
.builder-btn {
  width: 34px; height: 34px; border-radius: 10px; background: #eef1f8; color: #334155;
  font-size: 12px; display: grid; place-items: center; transition: background .15s, transform .1s;
}
.builder-btn:hover:not(:disabled) { background: #0b3aa8; color: #fff; }
.builder-btn:active:not(:disabled) { transform: scale(.92); }
.builder-btn:disabled { opacity: .35; cursor: not-allowed; }
.builder-row__vis { flex: none; }

/* Credentials form */
.admin-card--cred { border: 1px solid #fde68a; background: #fffdf5; }
.admin-cred-form { display: grid; gap: 12px; max-width: 460px; }
.admin-cred-form .btn { justify-self: start; }
.admin-cred-msg { font-size: 13px; font-weight: 600; min-height: 18px; }

/* ============================================================
   v14 — collapsible admin sidebar + full-page builder preview
   ============================================================ */
.admin-shell {
  grid-template-columns: var(--admin-side) minmax(0, 1fr);
  transition: grid-template-columns .22s ease;
}
.admin-sidebar {
  overflow: hidden;
  min-height: 100vh;
}
.admin-sidebar-toggle {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-grid;
  place-items: center;
  gap: 4px;
  align-self: flex-start;
  color: #fff;
  box-shadow: 0 14px 28px -20px rgba(0,0,0,.65);
}
.admin-sidebar-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.admin-sidebar-toggle.is-collapsed span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.admin-sidebar-toggle.is-collapsed span:nth-child(2) { opacity: 0; }
.admin-sidebar-toggle.is-collapsed span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.admin-tabs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-inline-end: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
}
.admin-tabs::-webkit-scrollbar { width: 7px; }
.admin-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 999px; }
.admin-open-note { display: none !important; }
.admin-shell.sidebar-collapsed {
  --admin-side: 82px;
}
.admin-shell.sidebar-collapsed .admin-sidebar {
  padding-inline: 12px;
  align-items: center;
}
.admin-shell.sidebar-collapsed .admin-brand {
  width: 54px;
  height: 54px;
  padding: 8px;
  display: grid;
  place-items: center;
  border-radius: 18px;
}
.admin-shell.sidebar-collapsed .admin-brand img {
  width: 38px;
  height: 38px;
  grid-row: auto;
}
.admin-shell.sidebar-collapsed .admin-brand span,
.admin-shell.sidebar-collapsed .admin-brand small,
.admin-shell.sidebar-collapsed .admin-tabs button span {
  display: none !important;
}
.admin-shell.sidebar-collapsed .admin-tabs {
  width: 100%;
  align-items: stretch;
}
.admin-shell.sidebar-collapsed .admin-tabs button {
  width: 54px;
  min-height: 48px;
  padding: 8px;
  justify-content: center;
  text-align: center;
}
.admin-shell.sidebar-collapsed .admin-tabs button small {
  margin: 0;
  min-width: 30px;
}

.builder-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.builder-preview {
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,#f8fbff);
  box-shadow: 0 18px 38px -32px rgba(15,23,42,.36);
}
.builder-preview.is-hidden { opacity: .62; border-style: dashed; }
.builder-preview__media {
  min-height: 108px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 40% 10%, rgba(59,130,246,.18), transparent 34%), #eef4ff;
  border: 1px solid #e2e8f0;
}
.builder-preview__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.builder-preview__body { min-width: 0; display: grid; align-content: start; gap: 7px; }
.builder-preview__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.builder-preview__meta span {
  color: var(--brand, #0b3aa8);
  background: var(--brand-tint, #eff6ff);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
}
.builder-preview__meta small { color: #94a3b8; font-size: 11px; }
.builder-preview__body strong { color: #0f172a; font-size: 15px; line-height: 1.65; }
.builder-preview__body p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.builder-preview__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.builder-preview__stats b {
  font-size: 11px;
  color: #0f766e;
  background: #ecfdf5;
  border: 1px solid #ccfbf1;
  border-radius: 999px;
  padding: 3px 8px;
}
.builder-preview__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
.builder-preview__actions .admin-danger,
.builder-preview__toggle {
  min-height: 36px;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 12px;
}
.builder-preview__toggle {
  background: #eef2ff;
  color: #0b3aa8;
  border: 1px solid #dbeafe;
}

@media (max-width: 920px) {
  .admin-shell.sidebar-collapsed { --admin-side: 280px; }
  .admin-shell.sidebar-collapsed .admin-sidebar { align-items: stretch; }
  .admin-shell.sidebar-collapsed .admin-brand { width: auto; height: auto; display: grid; place-items: initial; }
  .admin-shell.sidebar-collapsed .admin-brand span,
  .admin-shell.sidebar-collapsed .admin-brand small,
  .admin-shell.sidebar-collapsed .admin-tabs button span { display: inline !important; }
  .admin-shell.sidebar-collapsed .admin-tabs { display: none !important; }
  .admin-shell.sidebar-collapsed .admin-tabs button { width: auto; }
}
@media (max-width: 760px) {
  .builder-preview-grid { grid-template-columns: 1fr; }
  .builder-preview { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 18px; }
  .builder-preview__media { min-height: 92px; }
  .builder-preview__actions { display: grid; grid-template-columns: 1fr; }
  .builder-preview__actions .btn,
  .builder-preview__actions .admin-danger,
  .builder-preview__toggle { width: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 520px) {
  .builder-row { display: grid; grid-template-columns: auto 1fr; }
  .builder-row__moves,
  .builder-row__vis { grid-column: 1 / -1; width: 100%; justify-content: stretch; }
  .builder-row__moves .builder-btn { flex: 1; width: auto; }
}
