:root{--bg:#0f0f0e;--panel:#181714;--text:#eee9e2;--muted:#aaa39a;--line:#34302c;--accent:#c29884;--danger:#b85353}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}input,select,textarea,button{font:inherit}
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px;border-right:1px solid var(--line);background:#121210}.sidebar img{width:70px;margin-bottom:28px}.sidebar nav{display:flex;flex-direction:column;gap:8px}.sidebar nav a{padding:10px 12px;color:var(--muted);border-radius:8px}.sidebar nav a.active,.sidebar nav a:hover{background:#211f1b;color:#fff}.sidebar .logout{margin-top:30px;color:#d58a8a}.admin-main{padding:38px;max-width:1400px;width:100%}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:30px}.topbar h1{margin:0;font-family:Georgia,serif;font-weight:400;font-size:2.5rem}.badge{padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.8rem}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:var(--panel);border:1px solid var(--line);padding:22px}.stat strong{font-size:2rem;display:block}.panel{background:var(--panel);border:1px solid var(--line);padding:24px;margin-top:18px}.panel h2{margin-top:0;font-family:Georgia,serif;font-weight:400}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:16px}.field label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;background:#0e0e0d;color:#fff;border:1px solid var(--line);padding:11px 12px}.field textarea{min-height:120px}.btn{display:inline-block;border:0;background:var(--accent);color:#171310;padding:10px 14px;cursor:pointer}.btn.secondary{background:transparent;color:#fff;border:1px solid var(--line)}.btn.danger{background:var(--danger);color:#fff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-weight:500}.actions{display:flex;gap:7px;flex-wrap:wrap}.thumb{width:80px;height:80px;object-fit:cover}.flash{padding:12px 14px;background:#24432d;border:1px solid #356241;margin-bottom:18px}.flash.error{background:#472525;border-color:#683333}.storage{height:12px;background:#0d0d0c;border:1px solid var(--line);overflow:hidden}.storage span{display:block;height:100%;background:var(--accent)}.photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.photo-card{background:#111;border:1px solid var(--line)}.photo-card img{width:100%;aspect-ratio:1/1;object-fit:cover}.photo-card .meta{padding:10px}.mini{font-size:.78rem;color:var(--muted)}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-box{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);padding:30px}.login-box img{width:86px;margin:auto auto 20px}
@media(max-width:950px){.admin-layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar nav{flex-direction:row;overflow:auto}.admin-main{padding:20px}.cards{grid-template-columns:repeat(2,1fr)}.photo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cards,.grid2{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,1fr)}}

/* =====================================================
   PICFLOW-STYLE DESIGNER COMPONENT (V2.0.13)
   ===================================================== */
.picflow-panel {
  background: #11100f;
  border: 1px solid #23201d;
  border-radius: 12px;
  padding: 0;
  position: relative;
  min-height: 650px;
  display: flex;
  flex-direction: column;
}
.picflow-header {
  padding: 20px 24px;
  border-bottom: 1px solid #23201d;
  display: flex;
  align-items: center;
  height: 72px;
}
.picflow-header h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
  flex: 1;
}
.pf-back-btn {
  background: transparent;
  border: none;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0;
  transition: color 0.2s;
}
.pf-back-btn:hover { color: #fff; }

.pf-view-container {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.pf-view {
  display: none;
  padding: 24px;
  animation: pfSlideIn 0.25s ease forwards;
}
.pf-view.active {
  display: block;
}
@keyframes pfSlideIn {
  from { opacity: 0; transform: translateX(15px); }
  to { opacity: 1; transform: translateX(0); }
}

.pf-section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.pf-theme-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: #181714;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.pf-theme-sample {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  display: grid;
  place-items: center;
}
.pf-sample-aa { font-size: 1.6rem; font-style: italic; color: #fff; }
.pf-theme-card-text h3 { margin: 0 0 4px 0; font-size: 1.15rem; color: #fff; }
.pf-theme-card-text p { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.6); }

.pf-menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #eee;
  font-size: 0.95rem;
  transition: all 0.2s;
}
.pf-menu-item:hover {
  background: #1a1816;
  border-color: #2a2723;
}
.pf-menu-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-icon {
  width: 32px;
  height: 32px;
  background: #23201d;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #ccc;
}
.pf-color-wheel-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  box-shadow: 0 0 0 2px #333;
}
.pf-arrow { color: #666; font-size: 1.1rem; }

.pf-view .field { margin-bottom: 20px; }
.pf-view .field label { font-size: 0.82rem; color: var(--muted); margin-bottom: 8px; display: block; }

.pf-visual-select { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-visual-option {
  border: 1px solid #333; border-radius: 8px; padding: 14px 10px;
  text-align: center; cursor: pointer; background: #141312;
  transition: all 0.2s; font-size: 0.85rem; font-weight: 500;
}
.pf-visual-option input { display: none; }
.pf-visual-option.selected {
  border-color: var(--accent); background: rgba(194,152,132,0.1); color: var(--accent);
}

.pf-switch-label {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  cursor: pointer; border-bottom: 1px solid #222; font-size: 0.9rem;
}
.pf-toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.pf-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.pf-toggle-switch .slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #333; transition: .2s; border-radius: 22px;
}
.pf-toggle-switch .slider:before {
  position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background-color: white; transition: .2s; border-radius: 50%;
}
.pf-toggle-switch input:checked + .slider { background-color: var(--accent); }
.pf-toggle-switch input:checked + .slider:before { transform: translateX(18px); }

.pf-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-color-picker-box {
  background: #141311; border: 1px solid #2d2925; border-radius: 8px; padding: 12px;
}
.pf-color-picker-box label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: block; }
.pf-color-field { display: flex; align-items: center; gap: 10px; }
.pf-color-field input[type="color"] {
  -webkit-appearance: none; border: none; width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; background: none; padding: 0;
}
.pf-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pf-color-field input[type="color"]::-webkit-color-swatch { border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; }
.pf-hex-val { font-size: 0.85rem; font-family: monospace; color: #eee; }

.pf-save-btn { width: 100%; background: var(--accent); color: #111; font-weight: 600; padding: 14px; border-radius: 8px; font-size: 1rem; margin-top: 10px;}
.pf-save-btn:hover { filter: brightness(1.1); }

.pf-floating-toolbar {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #ffffff; border-radius: 999px; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 100;
}
.pf-floating-toolbar button {
  background: transparent; border: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #444; transition: all 0.2s ease;
}
.pf-floating-toolbar button:hover { background: #f0f0f0; transform: scale(1.1); color: #000; }
.pf-floating-toolbar .pf-color-wheel-icon { box-shadow: none; width: 20px; height: 20px; }

/* PICFLOW COUVERTURE UI */
.pf-section-heading { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 24px 0 16px; letter-spacing: -0.01em; }
.pf-cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pf-cover-card {
  position: relative; height: 90px; border-radius: 8px; overflow: hidden;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; border: 2px solid transparent; transition: all 0.2s;
}
.pf-cover-card img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.pf-cover-card span { position: relative; z-index: 2; color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; }
.pf-cover-card input { display: none; }
.pf-cover-card.selected { border-color: #5c7cfa; box-shadow: 0 0 0 2px rgba(92,124,250,0.3); }
.pf-cover-card.selected img.bg { opacity: 0.3; }

.pf-cover-cadre::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,0.8); z-index: 1; pointer-events: none; }
.pf-cover-rayures::after { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.8); z-index: 1; pointer-events: none; }

.pf-remove-design { display: block; text-align: center; color: #ff4d4f; font-weight: 600; font-size: 0.9rem; cursor: pointer; background: none; border: none; width: 100%; padding: 10px 0; }
.pf-remove-design:hover { text-decoration: underline; }

.pf-option-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pf-option-row:last-child { border-bottom: none; }
.pf-option-left { display: flex; align-items: center; gap: 12px; color: #eee; font-size: 0.9rem; }
.pf-icon-small { width: 28px; height: 28px; background: #23201d; border-radius: 50%; display: grid; place-items: center; color: #aaa; flex-shrink: 0;}

.pf-sml-toggles { display: flex; background: #23201d; border-radius: 20px; padding: 3px; }
.pf-sml-toggles label { padding: 4px 14px; border-radius: 16px; font-size: 0.85rem; font-weight: 600; color: #888; cursor: pointer; transition: all 0.2s; }
.pf-sml-toggles label.active { background: #eef1f6; color: #111; }
.pf-sml-toggles input { display: none; }

.pf-clean-select { background: transparent; border: none; color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; outline: none; text-align: right; }
.pf-clean-select option { background: #111; }

.pf-overlay-picker { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #555; background: repeating-conic-gradient(#444 0% 25%, transparent 0% 50%) 50% / 8px 8px; cursor: pointer; position: relative; overflow: hidden; }

.pf-text-accordion { background: #1a1816; border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: 1px solid transparent; transition: all 0.2s; }
.pf-text-accordion:hover { border-color: #333; }
.pf-text-accordion-title-1 { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.4rem; color: #fff; }
.pf-text-accordion-title-2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; }