/**
 * Zamai Logo Poster — frontend CSS (v2)
 * Scoped under #zlp-app. Dark gold luxury theme matching zamaipropertypartners.com
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#zlp-app *, #zlp-app *::before, #zlp-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

body#zlp-body { background: #0d0d0d !important; margin: 0 !important; }

#zlp-app {
    --bg:#0d0d0d; --surface:#161616; --surface2:#1e1e1e; --border:#2a2a2a;
    --gold:#c9a84c; --gold-l:#e2c97e; --text:#f0f0f0; --muted:#888;
    --ok:#3ecf8e; --err:#f87171; --radius:10px;
    font-family:'Inter',-apple-system,sans-serif;
    background:var(--bg); color:var(--text); min-height:100vh; line-height:1.5;
}

/* Header */
#zlp-app .zlp-header { background:#111; border-bottom:1px solid var(--border); height:58px; display:flex; align-items:center; padding:0 24px; position:sticky; top:0; z-index:100; }
#zlp-app .zlp-header-inner { width:100%; max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
#zlp-app .zlp-brand { font-size:16px; font-weight:500; }
#zlp-app .zlp-brand strong { color:var(--gold); }
#zlp-app .zlp-dot { color:var(--gold); font-size:10px; margin-right:8px; }
#zlp-app .zlp-head-meta { display:flex; align-items:center; gap:14px; }
#zlp-app .zlp-link { color:var(--muted); font-size:13px; text-decoration:none; transition:color .2s; }
#zlp-app .zlp-link:hover { color:var(--gold); }

/* Badges */
#zlp-app .zlp-badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; background:rgba(201,168,76,.15); color:var(--gold); border:1px solid rgba(201,168,76,.3); }

/* Login wall */
#zlp-app .zlp-wall { min-height:calc(100vh - 58px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
#zlp-app .zlp-wall-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:48px 40px; text-align:center; max-width:380px; width:100%; }
#zlp-app .zlp-wall-icon { font-size:48px; margin-bottom:20px; }
#zlp-app .zlp-wall-box h2 { font-size:22px; margin-bottom:10px; }
#zlp-app .zlp-wall-box p { color:var(--muted); font-size:14px; margin-bottom:28px; }

/* Main */
#zlp-app .zlp-main { max-width:1100px; margin:0 auto; padding:28px 24px 60px; }

/* Cards */
#zlp-app .zlp-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px; }
#zlp-app .zlp-card-head { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--border); }
#zlp-app .zlp-step { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--gold); color:#0d0d0d; font-size:13px; font-weight:700; }

/* Logo row */
#zlp-app .zlp-logo-row { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
#zlp-app .zlp-logo-preview { width:140px; height:90px; flex-shrink:0; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; background:repeating-conic-gradient(#1a1a1a 0% 25%,#222 0% 50%) 0 0/12px 12px; overflow:hidden; }
#zlp-app .zlp-logo-preview img { max-width:100%; max-height:100%; object-fit:contain; }
#zlp-app .zlp-logo-empty { font-size:12px; color:var(--muted); padding:8px; text-align:center; }
#zlp-app .zlp-logo-actions { display:flex; flex-direction:column; gap:10px; flex:1; min-width:220px; }

/* Dropzone */
#zlp-app .zlp-dropzone { border:2px dashed var(--border); border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:all .2s; }
#zlp-app .zlp-dropzone:hover, #zlp-app .zlp-dropzone.dragging { border-color:var(--gold); background:rgba(201,168,76,.04); }
#zlp-app .zlp-dz-icon { font-size:40px; display:block; margin-bottom:12px; }
#zlp-app .zlp-dz-inner p { font-size:14px; margin-bottom:6px; }
#zlp-app .zlp-dz-inner strong { color:var(--gold); }
#zlp-app .zlp-dz-inner small { font-size:12px; color:var(--muted); }
#zlp-app .zlp-img-count { margin-top:14px; font-size:13px; color:var(--muted); }
#zlp-app .zlp-img-count strong { color:var(--ok); }
#zlp-app .zlp-link-btn { background:none; border:none; color:var(--err); cursor:pointer; font:inherit; text-decoration:underline; margin-left:8px; }
#zlp-app #zlp-reset-pos { color:var(--gold); margin-left:0; font-size:12px; }

/* Adjust grid */
#zlp-app .zlp-adjust-grid { display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start; }
@media (max-width:820px){ #zlp-app .zlp-adjust-grid { grid-template-columns:1fr; } }

/* Fields */
#zlp-app .zlp-field { margin-bottom:20px; }
#zlp-app .zlp-label { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:10px; gap:8px; }
#zlp-app .zlp-val { background:rgba(201,168,76,.15); color:var(--gold); font-size:11px; font-weight:700; padding:2px 9px; border-radius:12px; min-width:48px; text-align:center; }
#zlp-app .zlp-muted-sm { color:var(--muted); font-weight:400; font-size:12px; }

/* Range */
#zlp-app .zlp-range { width:100%; -webkit-appearance:none; height:5px; border-radius:3px; background:var(--border); outline:none; cursor:pointer; }
#zlp-app .zlp-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--gold); cursor:pointer; box-shadow:0 0 0 3px rgba(201,168,76,.2); transition:transform .15s; }
#zlp-app .zlp-range::-webkit-slider-thumb:hover { transform:scale(1.2); }
#zlp-app .zlp-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--gold); border:none; cursor:pointer; }

/* Position grid */
#zlp-app .zlp-pos-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
#zlp-app .zlp-pos { display:flex; align-items:center; justify-content:center; padding:12px 0; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:18px; color:var(--muted); transition:all .2s; }
#zlp-app .zlp-pos:hover { border-color:var(--gold); color:var(--gold); }
#zlp-app .zlp-pos.active { border-color:var(--gold); background:rgba(201,168,76,.12); color:var(--gold); }
#zlp-app .zlp-pos input { display:none; }

/* Preview canvas */
#zlp-app .zlp-preview-wrap { display:flex; flex-direction:column; }
#zlp-app .zlp-canvas-box { background:repeating-conic-gradient(#1a1a1a 0% 25%,#222 0% 50%) 0 0/16px 16px; border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; align-items:center; justify-content:center; min-height:240px; }
#zlp-app .zlp-canvas-box canvas { max-width:100%; max-height:480px; height:auto; border-radius:4px; display:block; }
#zlp-app .zlp-canvas-box canvas.zlp-grab { cursor:grab; }
#zlp-app .zlp-canvas-box canvas.zlp-grabbing { cursor:grabbing; }
#zlp-app .zlp-preview-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; font-size:13px; color:var(--muted); }
#zlp-app .zlp-drag-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; flex-wrap:wrap; }

/* Buttons */
#zlp-app .zlp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border:none; border-radius:8px; font:600 13px/1 'Inter',sans-serif; cursor:pointer; transition:all .2s; text-decoration:none; }
#zlp-app .zlp-btn:disabled { opacity:.5; cursor:not-allowed; }
#zlp-app .zlp-btn-primary { background:linear-gradient(135deg,var(--gold),#a8843a); color:#0d0d0d; box-shadow:0 4px 14px rgba(201,168,76,.3); }
#zlp-app .zlp-btn-primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 20px rgba(201,168,76,.4); }
#zlp-app .zlp-btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
#zlp-app .zlp-btn-outline:hover { border-color:var(--gold); color:var(--gold); }
#zlp-app .zlp-btn-gold { background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.3); color:var(--gold); }
#zlp-app .zlp-btn-gold:hover:not(:disabled){ background:rgba(201,168,76,.2); }
#zlp-app .zlp-full { width:100%; }
#zlp-app .zlp-sm { padding:7px 14px; font-size:12px; }

/* Progress */
#zlp-app .zlp-progress { margin-top:18px; }
#zlp-app .zlp-pbar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:12px; }
#zlp-app .zlp-pfill { height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-l)); border-radius:3px; transition:width .3s; }
#zlp-app .zlp-plog { max-height:160px; overflow-y:auto; font:12px/1.9 monospace; background:#0a0a0a; color:#555; border-radius:8px; padding:12px; }
#zlp-app .zlp-plog .ok { color:var(--ok); }
#zlp-app .zlp-plog .err { color:var(--err); }

/* Hints */
#zlp-app .zlp-hint { font-size:12px; color:var(--muted); line-height:1.5; }