/* ═══════════════════════════════════════════════════
   PALMIRA BUILDER — CSS
   Thème cosmique violet/indigo
   ═══════════════════════════════════════════════════ */
:root {
  --pb-bg: #0a0415;
  --pb-bg2: #120828;
  --pb-bg3: #1a0e35;
  --pb-violet: #982ABC;
  --pb-violet2: #7a1fa0;
  --pb-lavender: #c87de0;
  --pb-text: #ece4ff;
  --pb-text2: #a896c0;
  --pb-text3: #6b5a80;
  --pb-border: rgba(152,42,188,0.15);
  --pb-glow: rgba(152,42,188,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Outfit',sans-serif; background:var(--pb-bg); color:var(--pb-text); min-height:100vh; overflow:hidden; }
#app { display:flex; height:100vh; }

/* ── Auth screen ── */
.pb-auth { display:flex; align-items:center; justify-content:center; width:100%; height:100vh; position:relative; }
.pb-auth-bg { position:absolute; inset:0; overflow:hidden; }
.pb-auth-orb { position:absolute; border-radius:50%; filter:blur(80px); animation:orbFloat 12s ease-in-out infinite; }
.pb-auth-orb-1 { width:400px; height:400px; background:rgba(152,42,188,0.12); top:10%; left:20%; }
.pb-auth-orb-2 { width:300px; height:300px; background:rgba(100,20,160,0.08); bottom:20%; right:15%; animation-delay:-6s; }
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }
.pb-auth-card { background:linear-gradient(145deg,var(--pb-bg2),var(--pb-bg3)); border:1px solid var(--pb-border); border-radius:24px; padding:48px 40px; max-width:420px; width:90%; position:relative; z-index:2; text-align:center; box-shadow:0 25px 60px rgba(0,0,0,0.4); }
.pb-auth-card h1 { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--pb-lavender); margin-bottom:6px; font-weight:400; }
.pb-auth-card h1 span { color:var(--pb-violet); }
.pb-auth-sub { color:var(--pb-text2); font-size:0.9rem; margin-bottom:32px; }
.pb-field { text-align:left; margin-bottom:18px; }
.pb-field label { display:block; font-size:0.78rem; color:var(--pb-text3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.pb-field input, .pb-field textarea, .pb-field select { width:100%; background:var(--pb-bg); border:1px solid var(--pb-border); border-radius:10px; padding:12px 14px; color:var(--pb-text); font-size:0.95rem; font-family:'Outfit',sans-serif; transition:border-color 0.2s; }
.pb-field input:focus, .pb-field textarea:focus, .pb-field select:focus { outline:none; border-color:var(--pb-violet); box-shadow:0 0 0 3px rgba(152,42,188,0.1); }
.pb-btn { padding:14px 28px; border-radius:50px; border:none; cursor:pointer; font-size:0.95rem; font-weight:600; font-family:'Outfit',sans-serif; transition:all 0.2s; display:inline-flex; align-items:center; gap:8px; }
.pb-btn-primary { background:linear-gradient(135deg,var(--pb-violet),var(--pb-violet2)); color:white; width:100%; justify-content:center; }
.pb-btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(152,42,188,0.35); }

/* ── Sidebar ── */
.pb-sidebar { width:240px; min-width:240px; background:var(--pb-bg2); border-right:1px solid var(--pb-border); display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.pb-sb-head { padding:20px; border-bottom:1px solid var(--pb-border); }
.pb-sb-head h2 { font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--pb-lavender); font-weight:400; }
.pb-sb-head span { font-size:0.78rem; color:var(--pb-text3); }
.pb-sb-nav { flex:1; overflow-y:auto; padding:12px 10px; }
.pb-nav-btn { width:100%; display:flex; align-items:center; gap:10px; padding:10px 14px; border:none; background:none; color:var(--pb-text2); font-size:0.88rem; font-family:'Outfit',sans-serif; cursor:pointer; border-radius:10px; transition:all 0.15s; text-align:left; }
.pb-nav-btn:hover { background:var(--pb-glow); color:var(--pb-text); }
.pb-nav-btn.active { background:rgba(152,42,188,0.12); color:var(--pb-lavender); font-weight:500; }
.pb-nav-emoji { font-size:1.1rem; width:24px; text-align:center; }
.pb-nav-arrow { margin-left:auto; opacity:0; transition:opacity 0.15s; font-size:1.1rem; }
.pb-nav-btn.active .pb-nav-arrow, .pb-nav-btn:hover .pb-nav-arrow { opacity:1; }
.pb-sb-bottom { padding:14px; border-top:1px solid var(--pb-border); }
.pb-sb-action { width:100%; padding:10px; background:none; border:1px solid var(--pb-border); color:var(--pb-text2); border-radius:10px; cursor:pointer; font-size:0.82rem; font-family:'Outfit',sans-serif; margin-bottom:8px; transition:all 0.15s; }
.pb-sb-action:hover { border-color:var(--pb-violet); color:var(--pb-lavender); }
.pb-sb-publish { background:linear-gradient(135deg,var(--pb-violet),var(--pb-violet2)); color:white; border:none; font-weight:600; }
.pb-sb-publish:hover { box-shadow:0 4px 16px rgba(152,42,188,0.3); }
.pb-sb-logout { width:100%; padding:8px; background:none; border:none; color:var(--pb-text3); cursor:pointer; font-size:0.78rem; font-family:'Outfit',sans-serif; }
.pb-sb-logout:hover { color:var(--pb-lavender); }

/* ── Main Split ── */
.pb-main { flex:1; display:flex; overflow:hidden; }
.pb-editor { flex:0 0 45%; max-width:45%; display:flex; flex-direction:column; border-right:1px solid var(--pb-border); }
.pb-editor-head { padding:16px 24px; border-bottom:1px solid var(--pb-border); display:flex; align-items:center; justify-content:space-between; background:var(--pb-bg2); }
.pb-editor-title { display:flex; align-items:center; gap:10px; }
.pb-editor-title h2 { font-size:1rem; font-weight:500; }
.pb-editor-title .section-emoji { font-size:1.2rem; }
.pb-btn-save { padding:8px 18px; border-radius:8px; background:var(--pb-bg3); border:1px solid var(--pb-border); color:var(--pb-text2); cursor:pointer; font-size:0.82rem; font-family:'Outfit',sans-serif; display:flex; align-items:center; gap:6px; transition:all 0.15s; }
.pb-btn-save:hover { border-color:var(--pb-violet); color:var(--pb-lavender); }
.pb-editor-body { flex:1; overflow-y:auto; padding:24px; }
.pb-preview { flex:1; display:flex; flex-direction:column; background:var(--pb-bg); }
.pb-preview-bar { padding:8px 16px; background:var(--pb-bg2); border-bottom:1px solid var(--pb-border); display:flex; align-items:center; gap:12px; }
.pb-preview-dots { display:flex; gap:6px; }
.pb-preview-dots span { width:10px; height:10px; border-radius:50%; }
.pb-preview-dots span:nth-child(1) { background:#f56565; }
.pb-preview-dots span:nth-child(2) { background:#fbbf24; }
.pb-preview-dots span:nth-child(3) { background:#48bb78; }
.pb-preview-url { flex:1; text-align:center; font-size:0.78rem; color:var(--pb-text3); font-family:monospace; }
.pb-preview-refresh { background:none; border:none; color:var(--pb-text3); cursor:pointer; font-size:1.1rem; padding:4px; }
.pb-preview-refresh:hover { color:var(--pb-lavender); }
.pb-preview iframe { flex:1; border:none; width:100%; background:white; }

/* ── Editor components ── */
.pb-hint { background:var(--pb-glow); border:1px solid var(--pb-border); border-radius:12px; padding:14px 18px; margin-bottom:20px; font-size:0.88rem; color:var(--pb-text2); line-height:1.5; }
.pb-subtitle { font-size:0.82rem; color:var(--pb-lavender); text-transform:uppercase; letter-spacing:1px; margin:24px 0 12px; font-weight:500; }
.pb-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pb-card { background:var(--pb-bg2); border:1px solid var(--pb-border); border-radius:12px; padding:18px; margin-bottom:12px; position:relative; }
.pb-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pb-card-head strong { color:var(--pb-lavender); font-size:0.9rem; }
.pb-btn-x { width:28px; height:28px; border-radius:50%; background:rgba(245,101,101,0.1); border:1px solid rgba(245,101,101,0.2); color:#f56565; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.pb-btn-x:hover { background:rgba(245,101,101,0.2); }
.pb-btn-add { padding:10px 20px; background:var(--pb-bg3); border:1px dashed var(--pb-border); border-radius:10px; color:var(--pb-text2); cursor:pointer; font-size:0.85rem; font-family:'Outfit',sans-serif; transition:all 0.15s; margin-bottom:16px; }
.pb-btn-add:hover { border-color:var(--pb-violet); color:var(--pb-lavender); }

/* Upload */
.pb-upload { margin-bottom:16px; }
.pb-upload-area { border:2px dashed var(--pb-border); border-radius:12px; padding:24px; text-align:center; cursor:pointer; transition:all 0.2s; }
.pb-upload-area:hover { border-color:var(--pb-violet); background:var(--pb-glow); }
.pb-upload-preview { max-width:200px; max-height:150px; border-radius:8px; object-fit:cover; }
.pb-upload-empty { color:var(--pb-text3); font-size:0.88rem; }
.pb-upload-icon { font-size:2rem; display:block; margin-bottom:8px; }

/* Toast */
.pb-toast { position:fixed; bottom:24px; right:24px; padding:14px 24px; border-radius:12px; font-size:0.88rem; font-family:'Outfit',sans-serif; z-index:10000; transform:translateY(20px); opacity:0; transition:all 0.3s; box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.pb-toast.show { transform:translateY(0); opacity:1; }
.pb-toast-ok { background:linear-gradient(135deg,#2d6a4f,#1b4332); color:#a7f3d0; border:1px solid rgba(167,243,208,0.2); }
.pb-toast-err { background:linear-gradient(135deg,#7f1d1d,#991b1b); color:#fca5a5; border:1px solid rgba(252,165,165,0.2); }
.pb-toast-info { background:linear-gradient(135deg,var(--pb-bg3),var(--pb-bg2)); color:var(--pb-lavender); border:1px solid var(--pb-border); }

/* Drag & Drop */
.pb-drag-handle { cursor:grab; color:var(--pb-text3); font-size:1.1rem; padding:4px; user-select:none; }
.pb-card.dragging { opacity:0.4; }
.pb-card.drag-over { border-color:var(--pb-violet); }

/* Responsive */
@media (max-width:1100px) {
  .pb-editor { flex:0 0 100%; max-width:100%; }
  .pb-preview { display:none; }
}
@media (max-width:768px) {
  .pb-sidebar { width:60px; min-width:60px; }
  .pb-nav-label, .pb-sb-head span, .pb-nav-arrow { display:none; }
  .pb-sb-head h2 { font-size:1rem; }
  .pb-nav-btn { justify-content:center; padding:12px; }
  .pb-nav-emoji { width:auto; }
}

/* ── STATS ── */
.pb-stats-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.pb-stats-kpi { background:var(--pb-bg2); border:1px solid var(--pb-border); border-radius:14px; padding:18px 16px; text-align:center; }
.pb-stats-kpi-main { background:linear-gradient(135deg,rgba(124,92,191,.15),rgba(159,122,234,.1)); border-color:rgba(124,92,191,.4); }
.pb-stats-kpi-val { font-size:2rem; font-weight:700; color:var(--pb-violet); line-height:1.1; }
.pb-stats-kpi-label { font-size:.75rem; color:var(--pb-text3); margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.pb-stats-chart { display:flex; align-items:flex-end; gap:3px; height:100px; background:var(--pb-bg2); border:1px solid var(--pb-border); border-radius:14px; padding:12px 10px 0; margin-bottom:8px; }
.pb-stats-bar-wrap { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end; }
.pb-stats-bar { background:rgba(124,92,191,.4); border-radius:3px 3px 0 0; width:100%; min-height:4px; transition:background .2s; }
.pb-stats-bar:hover,.pb-stats-bar-today { background:linear-gradient(180deg,var(--pb-violet),var(--pb-violet2)); }
.pb-stats-bar-lbl { font-size:.55rem; color:var(--pb-text3); margin-top:4px; white-space:nowrap; }
.pb-stats-page { margin-bottom:10px; }
.pb-stats-page-info { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.pb-stats-page-name { font-size:.85rem; color:var(--pb-text); font-family:monospace; }
.pb-stats-page-count { font-size:.75rem; color:var(--pb-lavender); font-weight:600; }
.pb-stats-page-bar { height:6px; background:var(--pb-bg3); border-radius:4px; overflow:hidden; }
.pb-stats-devices { display:flex; flex-direction:column; gap:10px; }
.pb-stats-device { display:flex; align-items:center; gap:12px; background:var(--pb-bg2); border:1px solid var(--pb-border); border-radius:12px; padding:12px 16px; }
.pb-stats-device-icon { font-size:1.4rem; }
.pb-stats-device-info { min-width:60px; }
.pb-stats-device-pct { font-size:1.1rem; font-weight:700; color:var(--pb-text); }
.pb-stats-device-bar { background:var(--pb-bg3); border-radius:4px; height:8px; overflow:hidden; }