@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

:root {
  --bg: #0f172a;
  --bg-soft: #f5f7fb;
  --card: #ffffff;
  --line: #dde4ef;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #8b5cf6;
  --accent-2: #f97316;
  --success: #0f9d58;
  --danger: #dc2626;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(249,115,22,.12), transparent 28%),
    linear-gradient(180deg, #f8fafc, #eef2ff);
}
a { color: inherit; }
.shell { min-height: 100vh; }
.container { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 10px 0; }
.brand { display:flex; flex-direction:column; gap:2px; }
.admin-topbar { display:grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items:center; }
.admin-topbar .topbar-actions { justify-self:end; display:flex; gap:10px; flex-wrap:wrap; }
.admin-status-center { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.admin-status-pill { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 8px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.92); font-size:.85rem; font-weight:700; color: var(--text); box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.admin-status-chip { min-width: 0; }
.admin-status-icon { width: 16px; height: 16px; display:inline-flex; align-items:center; justify-content:center; flex: 0 0 16px; color: currentColor; }
.admin-status-icon svg { width: 16px; height: 16px; display:block; }
.admin-status-value { line-height: 1; white-space: nowrap; }
.admin-status-pill.ok { background:#dcfce7; border-color:#86efac; color:#166534; }
.admin-status-pill.err { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.admin-status-pill:not(.ok):not(.err) { background: rgba(255,255,255,.92); }
.brand strong { font-size: 1.15rem; letter-spacing: .02em; }
.brand span { color: var(--muted); font-size: .92rem; }
.hero { padding: 14px 0 10px; display:grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items: stretch; }
.card {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(221,228,239,.9);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15,23,42,.08);
  backdrop-filter: blur(14px);
}
.card-pad { padding: 12px; }
.headline { font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.0; margin: 0 0 8px; letter-spacing: -.03em; }
.lede { color: var(--muted); font-size: 0.98rem; line-height: 1.4; margin: 0 0 10px; }
.pill { display:inline-flex; gap:8px; align-items:center; padding: 10px 14px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-weight: 700; font-size: .85rem; }
.grid-2 { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }

.grid-4 { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.badge-order { font-family: 'Manrope',sans-serif; display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:28px; padding:4px 8px; border-radius:999px; font-weight:800; color:#fff; background:linear-gradient(180deg,#10b981,#059669); box-shadow:0 6px 20px rgba(16,185,129,.12); }
.metric { padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid var(--line); }
.metric strong { display:block; font-size: 1.15rem; }
.metric span { color: var(--muted); font-size: .88rem; }
.form-row { display:grid; grid-template-columns: 1fr auto; gap: 12px; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #cbd5e1; background: #fff;
}
button, .btn {
  display:inline-flex; justify-content:center; align-items:center; gap:8px; border:none; border-radius: 12px; padding: 10px 14px; background: linear-gradient(135deg, var(--accent), #4f46e5); color:#fff; font-weight:700; cursor:pointer; text-decoration:none;
}
.btn-secondary { background: #e2e8f0; color: #0f172a; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.section { margin: 12px 0; }
.section h2 { margin: 0 0 8px; font-size: 1.05rem; }
.notice { padding: 14px 16px; border-radius: 16px; margin-bottom: 16px; }
.notice.ok { background: #dcfce7; color: #14532d; }
.notice.err { background: #fee2e2; color: #7f1d1d; }
.list { display:grid; gap: 12px; }
.project-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.8); }
.muted { color: var(--muted); }
.preview { display:grid; gap: 14px; }
.page-preview { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; overflow: hidden; }
.page-preview .canvas { border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; position: relative; overflow: hidden; }
.frame-box { position:absolute; border: 2px solid rgba(139,92,246,.55); border-radius: 12px; overflow:hidden; background:#fff; }
.frame-box img { width:100%; height:100%; object-fit:cover; display:block; }
.strip { position:absolute; right:0; top:0; width: 5mm; height: 100%; background: #f59e0b; opacity:.92; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-size: .88rem; }
.footer { padding: 12px 0 18px; color: var(--muted); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .grid-2, .form-row { grid-template-columns: 1fr; }
  .admin-topbar { grid-template-columns: 1fr; }
  .admin-topbar .topbar-actions { justify-self:start; }
  .admin-status-center { justify-content:flex-start; }
}