@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&display=swap');
:root{--bg:#f8f6f1;--fg:#12312f;--card:#fff;--muted:#637270;--border:#d9e2df;--primary:#128079;--primary2:#2ab89d;--accent:#f8a72b;--danger:#dc2626;--success:#16a34a;--shadow:0 12px 40px -14px rgba(14,77,72,.22);--radius:20px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 0 0,rgba(42,184,157,.18),transparent 38%),radial-gradient(circle at 100% 100%,rgba(248,167,43,.18),transparent 36%),var(--bg);font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--fg)}a{color:inherit;text-decoration:none}.admin-layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{background:rgba(255,255,255,.88);border-right:1px solid var(--border);backdrop-filter:blur(16px);padding:22px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:10px;align-items:center;font-family:'Fraunces',serif;font-weight:800;font-size:22px}.brand-mark{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:grid;place-items:center;color:white}.brand small{display:block;font:600 11px 'Plus Jakarta Sans';color:var(--muted);margin-top:2px}.sidebar nav{display:grid;gap:6px;margin-top:24px}.sidebar nav a{padding:11px 12px;border-radius:14px;color:#334b48;font-weight:700;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:#eaf7f4;color:var(--primary)}.main{padding:28px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}.topbar h1{font-family:'Fraunces',serif;font-size:34px;margin:0}.topbar p{margin:5px 0 0;color:var(--muted)}.top-actions{display:flex;gap:10px;flex-wrap:wrap}.card{background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}.grid{display:grid;gap:18px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat{background:linear-gradient(135deg,#fff,#eef9f6);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:var(--shadow)}.stat b{font-family:'Fraunces',serif;font-size:32px}.stat span{display:block;color:var(--muted);font-weight:700;font-size:13px}.btn{border:0;border-radius:14px;padding:10px 14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.btn.soft{background:#eaf7f4;color:var(--primary)}.btn.warn{background:#fff4df;color:#9a5b00}.btn.danger{background:#ffe7e7;color:#b91c1c}.btn.gray{background:#eef2f1;color:#344}.btn.small{padding:7px 10px;font-size:12px}.btn.block{width:100%;justify-content:center}.flash{padding:12px 14px;border-radius:14px;margin-bottom:16px;font-weight:700}.flash.success{background:#e9f9ef;color:#166534}.flash.error{background:#ffe7e7;color:#b91c1c}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.table td{font-size:14px}.thumb{width:88px;height:62px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#f2f5f4}.status{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef2f1;color:#50625f;font-weight:800;font-size:12px}.status.active{background:#e9f9ef;color:#166534}.status.inactive{background:#ffe7e7;color:#b91c1c}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-group{display:grid;gap:7px;margin-bottom:13px}.form-group label{font-weight:800;font-size:13px}.help{margin:0;color:var(--muted);font-size:12px}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:14px;padding:11px 12px;background:#fff;color:var(--fg);font:inherit}textarea{min-height:110px;resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid rgba(18,128,121,.16);border-color:var(--primary)}.check-row{display:flex;gap:14px;flex-wrap:wrap}.check-row label{display:flex;gap:8px;align-items:center;background:#f5f8f7;border:1px solid var(--border);padding:9px 11px;border-radius:12px}.check-row input{width:auto}.image-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 8px}.image-preview-grid>div{border:1px dashed var(--border);background:#f9fbfa;border-radius:16px;padding:10px;min-height:130px}.image-preview-grid span{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-bottom:8px}.image-preview-grid img{width:100%;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#fff}.empty-preview{height:150px;border-radius:12px;background:#eef2f1;display:grid;place-items:center;color:var(--muted);font-weight:700}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(440px,100%);background:white;border:1px solid var(--border);border-radius:28px;padding:28px;box-shadow:var(--shadow)}.login-card h1{font-family:'Fraunces',serif;margin:10px 0 4px}.login-card p{color:var(--muted)}.section-title{font-family:'Fraunces',serif;font-size:24px;margin:0 0 12px}.badge{display:inline-block;border-radius:999px;padding:4px 8px;background:#fff4df;color:#9a5b00;font-size:12px;font-weight:800}.actions-cell{display:flex;gap:7px;flex-wrap:wrap}.code{font-family:ui-monospace,monospace;background:#f3f5f4;padding:2px 6px;border-radius:8px;color:#50625f}@media(max-width:1050px){.admin-layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.main{padding:16px}.form-grid,.grid.cols-2,.grid.cols-3,.stats{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.image-preview-grid{grid-template-columns:1fr}.sidebar nav{grid-template-columns:1fr}}


/* Smart gallery admin */
.gallery-admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.gallery-admin-card {
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery-admin-card.is-muted { opacity: .6; }
.gallery-admin-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef2f1;
}
.gallery-admin-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-admin-image.row-span-2,
.gallery-admin-image.span-tall { aspect-ratio: 3 / 4; }
.gallery-admin-image.span-2 { aspect-ratio: 16 / 9; }
.gallery-admin-status {
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255,255,255,.88);
  color: #50625f;
}
.gallery-admin-status.active { color: var(--success); }
.gallery-admin-status.inactive { color: var(--danger); }
.gallery-admin-body { padding: 14px; }
.gallery-admin-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.gallery-admin-body p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}
@media(max-width:700px){
  .gallery-admin-grid{grid-template-columns:1fr}
}

.brand-image{
  width:46px;
  height:46px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(14,77,72,.10);
  flex:none;
}
.brand-image img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.login-card .brand{
  margin-bottom:8px;
}

.flash.warning{background:#fff4df;color:#9a5b00}
.demo-version-badge{
  position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:99999;
  background:#f97316;color:#fff;border-radius:999px;padding:8px 16px;
  font-size:12px;font-weight:900;letter-spacing:.03em;box-shadow:0 12px 30px rgba(249,115,22,.32);
  text-align:center;white-space:nowrap;
}
.demo-panel-notice{
  background:#fff4df;color:#8a4a00;border:1px solid #ffd79a;border-radius:16px;
  padding:12px 14px;font-weight:800;margin-bottom:16px;
}
.demo-mode input:not([type="hidden"]),.demo-mode select,.demo-mode textarea{
  background:#f6f7f6;color:#50625f;cursor:not-allowed;
}
.demo-mode .btn.demo-frozen,.demo-mode button.demo-frozen{
  opacity:.58;cursor:not-allowed;filter:grayscale(.2);
}
.demo-admin-toast{
  position:fixed;right:18px;bottom:58px;z-index:99998;max-width:min(360px,calc(100vw - 32px));
  background:#12312f;color:#fff;border-radius:18px;padding:13px 15px;font-weight:800;
  box-shadow:0 18px 45px rgba(18,49,47,.25);animation:demoToastIn .22s ease both;
}
@keyframes demoToastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.demo-login-shortcuts{margin:16px 0 8px;display:grid;gap:8px}.demo-login-shortcuts>strong{font-size:13px;color:var(--fg)}
.demo-login-card{width:100%;border:1px solid var(--border);border-radius:16px;background:#fff8ed;padding:11px;text-align:left;display:grid;gap:3px;cursor:pointer;color:var(--fg)}
.demo-login-card:hover{border-color:#f97316;box-shadow:0 10px 26px rgba(249,115,22,.12)}
.demo-login-card span{font-weight:900;color:#9a5b00}.demo-login-card code{font-family:ui-monospace,monospace;color:#12312f}.demo-login-card small{color:#6b7280;font-weight:700}
@media(max-width:600px){.demo-version-badge{font-size:10px;bottom:8px;padding:7px 12px}.demo-admin-toast{right:10px;left:10px;bottom:52px;max-width:none}}