/* ============================================================
   Photobooth AI — Admin / Customer CMS  (Light theme, modern)
   ============================================================ */
:root{
  --bg:#eef2fb;
  --bg-grad:radial-gradient(1200px 600px at 80% -10%, #e7edff 0%, #eef2fb 45%, #f3f5fb 100%);
  --surface:#ffffff;
  --surface-2:#f5f7fc;
  --text:#1e2433;
  --text-soft:#5b6478;
  --muted:#8a93a8;
  --border:#e6e9f2;
  --border-strong:#d6dbe8;
  --primary:#4f7cff;
  --primary-d:#3a63e0;
  --grad:linear-gradient(135deg,#5b8cff 0%,#7b6cff 100%);
  --grad-soft:linear-gradient(135deg,#eef3ff,#f3eeff);
  --ok:#10b981; --ok-bg:#e7f9f1;
  --warn:#f59e0b; --warn-bg:#fff4e2;
  --bad:#ef4444; --bad-bg:#fdecec;
  --shadow-sm:0 1px 2px rgba(30,40,80,.06), 0 1px 3px rgba(30,40,80,.05);
  --shadow:0 6px 18px rgba(40,55,110,.08), 0 2px 6px rgba(40,55,110,.05);
  --shadow-lg:0 18px 50px rgba(40,55,110,.16);
  --radius:16px;
  --radius-sm:11px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100vh;
  font-family:'Inter','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg); background-image:var(--bg-grad); color:var(--text);
  font-size:14px; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
.hidden{ display:none !important; }
::selection{ background:#cfe0ff; }

/* scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#cdd4e6; border-radius:20px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#b6bfd8; background-clip:content-box; }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  gap:56px; padding:24px; }
.login-hero{ max-width:520px; max-height:78vh; border-radius:22px; box-shadow:var(--shadow-lg); display:none; }
@media (min-width:1100px){ .login-hero{ display:block; } }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:38px 34px; width:392px; max-width:92vw; box-shadow:var(--shadow-lg);
  animation:pop .4s cubic-bezier(.2,.9,.3,1.2); }
.login-card h2{ margin:2px 0 20px; font-weight:600; font-size:20px; color:var(--text); }
.login-card input{ width:100%; padding:13px 15px; margin:7px 0; border-radius:12px;
  border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); font-size:15px;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.login-card input:focus{ outline:none; border-color:var(--primary); background:#fff;
  box-shadow:0 0 0 4px rgba(79,124,255,.14); }
.login-card button{ width:100%; padding:14px; margin-top:14px; border:0; border-radius:12px;
  background:var(--grad); color:#fff; font-weight:600; font-size:15px; cursor:pointer;
  box-shadow:0 8px 22px rgba(91,140,255,.35); transition:transform .12s, filter .15s, box-shadow .15s; }
.login-card button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.login-card button:active{ transform:translateY(0); }
.login-err{ color:var(--bad); min-height:18px; margin-top:12px; font-size:13px; }
.hint{ color:var(--muted); font-size:12px; margin-top:18px; text-align:center; }

/* ---------- Brand ---------- */
.brand{ font-size:22px; letter-spacing:3px; color:var(--primary); text-align:center; margin-bottom:6px; font-weight:600; }
.brand b{ color:var(--text); }
.brand.small{ font-size:15px; text-align:left; padding:22px 22px 20px; letter-spacing:2px;
  border-bottom:1px solid var(--border); }
.brand.small i{ color:var(--muted); font-style:normal; display:block; margin-top:3px; font-size:11px; letter-spacing:1px; }

/* ---------- Layout ---------- */
#main-view{ display:flex; min-height:100vh; }
.sidebar{ width:248px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; box-shadow:var(--shadow-sm); }
.sidebar nav{ flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:3px; }
.sidebar nav a{ padding:11px 14px; border-radius:11px; cursor:pointer; color:var(--text-soft);
  font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px;
  transition:background .15s, color .15s, transform .12s; }
.sidebar nav a:hover{ background:var(--surface-2); color:var(--text); transform:translateX(2px); }
.sidebar nav a.active{ background:var(--grad-soft); color:var(--primary-d); font-weight:600;
  box-shadow:inset 3px 0 0 var(--primary); }
.user-box{ padding:16px 18px; border-top:1px solid var(--border); font-size:13px; color:var(--text-soft); }
#me-name{ font-weight:600; color:var(--text); margin-bottom:8px; }

.content{ flex:1; padding:30px 38px; overflow-y:auto; max-height:100vh; }
.tab{ display:none; }
.tab.active{ display:block; animation:fade .28s ease; }
h1{ font-size:25px; margin:0 0 22px; color:var(--text); font-weight:700; letter-spacing:-.3px; }
h3{ color:var(--text); font-weight:600; margin:0 0 14px; font-size:16px; }
.muted{ color:var(--muted); font-size:13px; line-height:1.55; }
.row-between{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }

/* ---------- Buttons ---------- */
button{ padding:10px 16px; border-radius:11px; border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; font-weight:500;
  font-family:inherit; transition:background .15s, border-color .15s, transform .12s, box-shadow .15s; }
button:hover{ background:var(--surface-2); border-color:#c2c9da; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
button:active{ transform:translateY(0); }
button.primary{ background:var(--grad); color:#fff; border:0; font-weight:600;
  box-shadow:0 6px 16px rgba(91,140,255,.3); }
button.primary:hover{ filter:brightness(1.05); }
button.danger{ background:var(--bad-bg); border-color:#f6c6c6; color:#c92a2a; }
button.danger:hover{ background:#fbdcdc; }
button.small{ padding:6px 11px; font-size:12px; border-radius:9px; }

/* ---------- Stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:26px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .15s, box-shadow .15s; }
.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.stat::before{ content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px;
  border-radius:50%; background:var(--grad-soft); }
.stat .label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.stat .value{ color:var(--text); font-size:30px; font-weight:700; margin-top:8px; letter-spacing:-.5px; position:relative; }

/* ---------- Card ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:20px; box-shadow:var(--shadow); }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse:separate; border-spacing:0; }
th,td{ padding:13px 14px; text-align:left; font-size:13.5px; }
th{ color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.6px;
  border-bottom:2px solid var(--border); }
td{ border-bottom:1px solid var(--border); color:var(--text-soft); }
tbody tr{ transition:background .12s; }
tbody tr:hover td{ background:var(--surface-2); }
td code,.muted code{ background:var(--surface-2); padding:2px 7px; border-radius:6px; font-size:12px; color:var(--primary-d); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1 / -1; }
label{ display:block; font-size:12.5px; color:var(--text-soft); margin-bottom:5px; font-weight:500; }
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],select,textarea{ width:100%; padding:11px 13px; border-radius:11px;
  border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); font-size:14px;
  font-family:inherit; transition:border-color .15s, box-shadow .15s, background .15s; }
textarea{ min-height:92px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); background:#fff;
  box-shadow:0 0 0 4px rgba(79,124,255,.13); }
input[readonly]{ background:#eef1f8; color:var(--text-soft); }

.filter-row{ display:flex; gap:14px; align-items:end; margin-bottom:22px; flex-wrap:wrap;
  background:var(--surface); padding:16px 18px; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.filter-row label{ margin-bottom:0; }
.filter-row input,.filter-row select{ min-width:150px; }

/* ---------- Prompt grid ---------- */
.prompt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.prompt-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.prompt-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.prompt-card .thumb{ aspect-ratio:3/4; background:var(--surface-2) center/cover no-repeat; }
.prompt-card .body{ padding:13px 15px; }
.prompt-card .name{ font-weight:600; color:var(--text); }
.prompt-card .price{ color:var(--primary-d); font-size:13px; margin-top:4px; font-weight:600; }
.prompt-card .actions{ padding:0 15px 15px; display:flex; gap:7px; }

/* ---------- Photo grid ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.photo-grid .item{ aspect-ratio:3/4; background:var(--surface-2) center/cover no-repeat;
  border-radius:13px; border:1px solid var(--border); cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s; }
.photo-grid .item:hover{ transform:scale(1.03); box-shadow:var(--shadow); }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; background:rgba(30,40,80,.42); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px; animation:fade .2s ease; }
.modal-card{ background:var(--surface); border:1px solid var(--border); border-radius:22px;
  padding:30px 32px; width:580px; max-width:100%; max-height:88vh; overflow-y:auto; position:relative;
  box-shadow:var(--shadow-lg); animation:pop .32s cubic-bezier(.2,.9,.3,1.2); }
.modal-card .close{ position:absolute; top:14px; right:16px; background:var(--surface-2); border:1px solid var(--border);
  width:34px; height:34px; border-radius:50%; color:var(--text-soft); font-size:20px; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; }
.modal-card .close:hover{ background:#fbdcdc; color:#c92a2a; border-color:#f6c6c6; }
.modal-card h2{ margin:0 0 18px; color:var(--text); font-size:20px; font-weight:700; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

/* ---------- Badges ---------- */
.badge{ display:inline-block; padding:4px 11px; border-radius:20px; font-size:11px;
  font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.badge.active{ background:var(--ok-bg); color:#0a8f63; }
.badge.inactive{ background:var(--bad-bg); color:#d12f2f; }
.badge.expired{ background:var(--warn-bg); color:#c97a05; }

/* ---------- Bank picker ---------- */
.bank-picker{ position:relative; }
.bank-trigger{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 13px;
  border-radius:11px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text);
  font-size:14px; cursor:pointer; min-height:42px; transition:border-color .15s; }
.bank-trigger:hover{ border-color:var(--primary); }
.bank-trigger img{ width:34px; height:22px; object-fit:contain; background:#fff; border-radius:4px; padding:1px; border:1px solid var(--border); }
.bank-trigger .ph{ color:var(--muted); }
.bank-trigger .caret{ margin-left:auto; color:var(--muted); }
.bank-dropdown{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50;
  background:var(--surface); border:1px solid var(--border); border-radius:13px; overflow:hidden; box-shadow:var(--shadow-lg); }
.bank-dropdown input{ border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--surface-2); }
.bank-options{ max-height:260px; overflow-y:auto; }
.bank-option{ display:flex; align-items:center; gap:11px; padding:9px 13px; cursor:pointer; transition:background .12s; }
.bank-option:hover{ background:var(--grad-soft); }
.bank-option img{ width:40px; height:25px; object-fit:contain; background:#fff; border-radius:4px; padding:1px; border:1px solid var(--border); }
.bank-option .bn{ font-size:13px; color:var(--text); font-weight:500; }
.bank-option .bc{ font-size:11px; color:var(--muted); }

/* ---------- Animations ---------- */
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }