/* DJ Contract Signing App — black & gold, mobile-first */
:root{
  --bg:#0c0c0e; --bg2:#141417; --card:#1a1a1f; --line:#2a2a31;
  --gold:#d4af37; --gold2:#f3d27a; --text:#f2f2f2; --muted:#a7a7b3;
  --green:#35c26e; --red:#e5484d; --blue:#4aa8ff; --pink:#e5639e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45; -webkit-text-size-adjust:100%;
}
#app{max-width:760px;margin:0 auto;padding:16px 14px 90px}
.loading{text-align:center;color:var(--muted);padding:60px 0}

/* header */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{font-weight:800;letter-spacing:.5px;font-size:18px}
.brand .gold{color:var(--gold)}
.installbtn{background:rgba(212,175,55,.12);border:1px solid var(--gold);color:var(--gold2);border-radius:8px;
  padding:5px 12px;font-size:13px;font-weight:700;cursor:pointer;margin-left:10px;vertical-align:middle;white-space:nowrap}
.installbtn[hidden]{display:none}
.freebanner{text-align:center;border:2px solid var(--gold);border-radius:12px;padding:14px 10px;margin:12px 0;background:rgba(212,175,55,.08)}
.freebanner-big{font-size:clamp(22px,5.2vw,40px);font-weight:900;letter-spacing:1px;color:var(--gold);line-height:1.15}
.freebanner-sub{margin-top:8px;color:var(--muted);font-size:14px}
.topbar .who{font-size:13px;color:var(--muted);text-align:right}
.topbar .who b{color:var(--text)}
.country-pick{position:relative}
.country-badge{font-size:24px;line-height:1;cursor:pointer;background:none;border:none;padding:4px}
.country-drop{position:absolute;right:0;top:110%;background:var(--card);border:1px solid var(--line);
  border-radius:12px;min-width:230px;max-width:300px;z-index:50;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.lang-list{max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.lang-search{width:calc(100% - 20px);margin:8px 10px 4px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#1a1a20;color:var(--text);font-size:14px;font-family:inherit}
.country-opt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text);
  padding:10px 14px;font-size:15px;cursor:pointer;text-align:left;font-family:inherit}
.country-opt:hover{background:#24242b}
.country-opt.soon{opacity:.45;cursor:default}
.country-opt em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted)}
.country-sect{padding:8px 14px 4px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.tier-pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;padding:3px 10px;border-radius:20px;margin-top:3px}
.tier-starter{background:#2a2a31;color:#cfcfcf}
.tier-pro{background:#3a2f10;color:var(--gold2);border:1px solid var(--gold)}
.tier-elite{background:linear-gradient(90deg,#6a1fb0,#1b6ec2);color:#fff}

/* nav */
.nav{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.nav a{flex:1;min-width:100px;text-align:center;text-decoration:none;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 6px;font-size:14px;font-weight:600}
.nav a.active{border-color:var(--gold);color:var(--gold2)}

/* cards & forms */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.card h2{margin:0 0 10px;font-size:19px}
.card h3{margin:14px 0 8px;font-size:15px;color:var(--gold2)}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px;font-weight:600}
input,select,textarea{width:100%;background:#101014;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:11px 12px;font-size:16px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:70px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:520px){.row3{grid-template-columns:1fr 1fr}}

/* buttons */
.btn{display:inline-block;border:none;border-radius:12px;padding:13px 18px;font-size:16px;font-weight:700;
  cursor:pointer;text-decoration:none;text-align:center;font-family:inherit}
.btn-gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#191305;width:100%;margin-top:12px}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);width:100%;margin-top:10px}
.btn-sm{width:auto;padding:9px 14px;font-size:14px;margin:4px 6px 4px 0}
.btn-green{background:var(--green);color:#06130b}
.btn-red{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn-blue{background:var(--blue);color:#06121f}
.btn-row{display:flex;flex-wrap:wrap;margin-top:10px}
a.btn-gold,a.btn-ghost{display:block}

/* contract list */
.contract{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.contract .t{font-weight:700}
.contract .s{font-size:13px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 9px;border-radius:20px}
.b-draft{background:#2a2a31;color:#bbb}
.b-sent{background:#12395e;color:#9ed0ff}
.b-client_signed{background:#3a2f10;color:var(--gold2)}
.b-complete{background:#0f3d24;color:#7fe0a8}
.empty{text-align:center;color:var(--muted);padding:34px 10px}
.empty .big{font-size:40px}

/* paper contract */
.paper{background:#fff;color:#1c1c1e;border-radius:8px;padding:26px 22px;margin:6px 0 14px;
  box-shadow:0 6px 30px rgba(0,0,0,.5)}
.paper h1{margin:0 0 2px;font-size:21px;letter-spacing:.4px}
.paper .sub{font-size:12px;color:#666;margin-bottom:14px}
.paper .sec{background:#8e1f3f;color:#fff;font-weight:800;font-size:13px;letter-spacing:.6px;
  padding:7px 10px;border-radius:4px;margin:16px 0 8px}
.paper table{width:100%;border-collapse:collapse;font-size:13px}
.paper td{border:1px solid #e3c2cd;padding:6px 8px;vertical-align:top}
.paper td.k{width:38%;font-weight:700;background:#fdf3f6}
.paper .clause{margin:0 0 10px;font-size:13px}
.paper .clause b{display:block;font-size:12.5px;margin-bottom:2px}
.paper .sigline{border-bottom:2px solid #333;height:44px;margin:6px 0 2px;position:relative}
.paper .sigimg{max-height:44px;max-width:230px}
.paper .sigmeta{font-size:12px;color:#555}
.paper .flowerbar,.paper .pridebar{height:14px;border-radius:3px;margin-bottom:12px}
.paper .flowerbar{background:repeating-linear-gradient(90deg,#f3c6d8 0 26px,#fbe9f1 26px 52px)}
.paper .pridebar{background:linear-gradient(90deg,#e94848,#e98a2b,#e8c92b,#3fae5a,#2b7de9,#7a3fd1)}

/* signature pad */
.sigpad{width:100%;height:170px;background:#fff;border:2px dashed var(--gold);border-radius:12px;touch-action:none;cursor:crosshair}
.sig-hint{font-size:13px;color:var(--muted);margin:6px 0 10px}
.consent{display:flex;gap:10px;align-items:flex-start;background:#101014;border:1px solid var(--line);
  border-radius:10px;padding:12px;margin:12px 0}
.consent input{width:22px;height:22px;margin-top:2px;flex:none}
.consent span{font-size:14px}

/* tiers */
.tiercard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;position:relative}
.tiercard.pro{border:2px solid var(--gold)}
.tiercard .p{font-size:26px;font-weight:800;color:var(--gold2);margin:4px 0 10px}
.tiercard ul{margin:0 0 6px;padding-left:20px;font-size:14px}
.tiercard li{margin:5px 0}
.flag{position:absolute;top:-11px;right:14px;background:var(--gold);color:#191305;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}

/* misc */
.muted{color:var(--muted);font-size:14px}
.small{font-size:13px}
.linkbox{background:#101014;border:1px dashed var(--gold);border-radius:10px;padding:12px;
  word-break:break-all;font-size:14px;margin:10px 0}
.copybtn{margin-top:8px}
.alert{background:#3a1414;border:1px solid var(--red);color:#ffb4b8;border-radius:10px;padding:12px;margin-bottom:12px;font-size:14px}
.ok{background:#0f3d24;border:1px solid var(--green);color:#a9ecc4;border-radius:10px;padding:12px;margin-bottom:12px;font-size:14px}
.notice{background:#2a230f;border:1px solid var(--gold);color:#f3e3b3;border-radius:10px;padding:12px;margin:10px 0;font-size:13.5px;line-height:1.5}
.dj-dot{width:22px;height:22px;border-radius:50%;background:var(--gold);border:3px solid #fff;animation:djpulse 1.6s infinite}
@keyframes djpulse{0%{box-shadow:0 0 0 4px rgba(212,175,55,.45)}70%{box-shadow:0 0 0 14px rgba(212,175,55,0)}100%{box-shadow:0 0 0 4px rgba(212,175,55,0)}}
.steps{margin:8px 0;padding-left:20px;font-size:14px}
.steps li{margin:8px 0}
code{background:#101014;padding:2px 6px;border-radius:6px;font-size:13px}
details.sql{background:#101014;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:10px;font-size:13px}
details.sql summary{cursor:pointer;font-weight:700}
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:26px}
.footer a{color:var(--muted)}
.fineprint{font-size:11.5px;line-height:1.55;color:#bdbdbd}
.fineprint h3{font-size:12.5px;color:#e8e8e8;margin:14px 0 4px}
.fineprint p{margin:4px 0}

/* public DJ page watermark — faint controller + crowd behind the content */
.djpage{position:relative}
.djpage::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('dj-watermark-bg.jpg') center 30%/cover no-repeat;
  opacity:.24;
}
.djpage > *{position:relative; z-index:1}
.djpage .dj-hero{background:rgba(26,26,31,.78)}

/* photo drop zone (My Page) */
.dropzone{border:2px dashed var(--line);border-radius:14px;padding:22px 14px;text-align:center;
  cursor:pointer;background:#101014;margin-bottom:8px;color:var(--muted)}
.dropzone.over{border-color:var(--gold);background:#191910;color:var(--text)}
.dropzone img{width:110px;height:110px;border-radius:60px;object-fit:cover;border:2px solid var(--gold)}
.dz-big{font-size:40px;margin-bottom:6px}

/* photo frame schemes (Elite DJ webpage) */
.fr-gold{border:3px solid var(--gold)!important;box-shadow:0 0 18px rgba(212,175,55,.55)}
.fr-royal{border:3px solid #8b5cf6!important;box-shadow:0 0 18px rgba(139,92,246,.65)}
.fr-double{border:2px solid var(--gold)!important;outline:2px solid var(--gold);outline-offset:5px}
.fr-spot{border:3px solid #fff!important;box-shadow:0 0 22px rgba(255,255,255,.5)}
.framepick{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.frameopt{border:2px solid var(--line);border-radius:12px;padding:8px 6px;cursor:pointer;text-align:center;
  background:#101014;min-width:76px}
.frameopt.sel{border-color:var(--gold)}
.frameopt img{width:52px;height:52px;border-radius:30px;object-fit:cover;display:block;margin:0 auto 4px}
.frameopt .fn{font-size:11px;color:var(--muted)}
.frameopt.sel .fn{color:var(--gold2)}

/* client checklist — checked items light up green */
.chk{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);border-radius:12px;
  padding:12px;margin:8px 0;background:#101014;cursor:pointer;transition:background .2s,border-color .2s}
.chk input{width:22px;height:22px;margin-top:2px;flex:none;cursor:pointer}
.chk .ct{font-weight:700}
.chk .cs{font-size:12px;color:var(--muted)}
.chk.done{background:#0d2818;border-color:var(--green);box-shadow:0 0 10px rgba(34,197,94,.35)}
.chk.done .ct{color:#86efac}
.chk.auto{cursor:default}

/* Text-alerts ON/OFF toggle (client tracker page) */
.tswitch{position:relative;display:inline-block;width:54px;height:30px;vertical-align:middle}
.tswitch input{opacity:0;width:0;height:0}
.tslider{position:absolute;cursor:pointer;inset:0;background:#4b5563;border-radius:30px;transition:.2s}
.tslider:before{position:absolute;content:"";height:24px;width:24px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.tswitch input:checked + .tslider{background:#1db954}
.tswitch input:checked + .tslider:before{transform:translateX(24px)}

/* Guided tour — green means "tap here", red flash means "wrong tap" */
#tourBanner{position:sticky;top:0;left:0;right:0;z-index:9999;background:#052e16;color:#fff;
  padding:10px 14px;display:flex;gap:10px;align-items:center;border-bottom:3px solid #22c55e;
  font-size:15px;line-height:1.35}
#tourBanner .btn{flex:none}
#tourHint{color:#fca5a5;font-weight:700}
.tour-glow{outline:3px solid #22c55e !important;outline-offset:3px;
  box-shadow:0 0 0 8px rgba(34,197,94,.25) !important;
  animation:tourPulse 1.4s ease-in-out infinite;position:relative;z-index:9998}
@keyframes tourPulse{50%{box-shadow:0 0 0 14px rgba(34,197,94,.10) !important}}
.tour-no{outline:3px solid #ef4444 !important;outline-offset:2px;animation:tourShake .45s}
@keyframes tourShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
/* Hamburger help menu (top right) */
.menuwrap{position:relative;display:inline-block;margin-right:10px;vertical-align:middle}
.menubtn{background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font-size:20px;line-height:1;cursor:pointer;padding:5px 10px}
.menubtn:hover{border-color:var(--gold)}
.menudrop{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);
  border:1px solid var(--line);border-radius:10px;min-width:230px;z-index:1200;
  box-shadow:0 10px 28px rgba(0,0,0,.5);padding:6px;text-align:left}
.menudrop a{display:block;padding:11px 12px;border-radius:8px;color:var(--text);
  text-decoration:none;font-size:15px}
.menudrop a:hover{background:rgba(255,255,255,.07)}
/* Always-visible attorney notice on the contract paper */
.attorneynotice{border:2px solid #d4af37;background:#fff8e1;color:#5c4a00;border-radius:8px;
  padding:10px 12px;margin:10px 0;font-size:13px;line-height:1.45}
/* Instruction manual */
.helpsteps li{margin-bottom:10px}
/* Contract "what happens next" line + 4-step progress tracker */
.nextstep{font-size:13px;color:var(--muted);margin-top:4px}
.tracksteps{display:flex;align-items:flex-start;margin:8px 0}
.step{display:flex;flex-direction:column;align-items:center;min-width:62px}
.step .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.step.done .dot{border-color:#22c55e;background:#22c55e;color:#06280f;font-weight:700}
.step.now .dot{border-color:var(--gold);color:#ffd34d;box-shadow:0 0 0 4px rgba(212,175,55,.15)}
.step .lbl{font-size:11px;color:var(--muted);margin-top:4px;text-align:center}
.step.now .lbl{color:var(--text);font-weight:700}
.stepbar{flex:1;height:2px;background:var(--line);margin-top:14px}

/* ---------- 2026-10-01 feature pack ---------- */
/* Ask-my-business chat */
.asklog{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;margin:10px 0}
.ask-u{align-self:flex-end;background:#2a2a31;border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:8px 12px;max-width:88%}
.ask-a{align-self:flex-start;background:#141417;border:1px solid var(--gold);border-radius:14px 14px 14px 4px;padding:8px 12px;max-width:94%}
/* Visual quote client gallery */
.qphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:8px 0}
.qphotos img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* ===== UI theme system ===== */
.themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:6px 0}
.themecell{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);border:2px solid var(--line);border-radius:10px;padding:8px 4px;cursor:pointer;color:var(--text);font-size:11px;font-family:inherit;position:relative}
.themecell.on{border-color:var(--gold)}
.themecell.locked{opacity:.55}
.themecell em{font-style:normal;font-size:10px;color:var(--muted)}
.themecell .sw{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
body.no-anim *,body.no-anim *::before,body.no-anim *::after{animation:none!important;transition:none!important}

/* ===== signature methods ===== */
.sigmethods{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.sigmethod{flex:1;min-width:100px;background:var(--card);border:2px solid var(--line);border-radius:10px;padding:10px 6px;cursor:pointer;color:var(--text);font-size:13px;font-weight:600;font-family:inherit;text-align:center}
.sigmethod.on{border-color:var(--gold)}
.sigmethod small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:2px}
#psTyped{width:100%;font-size:22px;padding:12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#111;font-family:"Brush Script MT","Segoe Script",cursive}

/* ===== admin DJ map ===== */
#djMap{height:420px;border-radius:12px;border:1px solid var(--line);z-index:1}
.map-legend{display:flex;gap:16px;margin:8px 0;font-size:13px;color:var(--muted)}
.map-legend .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px}
.map-pop{text-align:center;max-width:210px}
.map-pop img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.map-pop b{display:block;margin:4px 0}
.map-pop .bio{font-size:12px;color:#555;margin:4px 0;max-height:60px;overflow:hidden}

/* ===== system alerts ===== */
.alert-row{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:10px;margin:8px 0;cursor:pointer}
.alert-row.read{opacity:.6;border-left-color:var(--line)}
.alert-row .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--red)}
.alert-row.read .k{color:var(--muted)}
.alert-badge{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:12px;padding:2px 9px;margin-left:6px}

/* ===== gift shop / lead pool ===== */
.giftlog{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.giftlog th,.giftlog td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.giftlog th{background:var(--bg2)}
.leadrow{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0}

/* voice input mic button pulse (hold-to-talk) */
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}70%{box-shadow:0 0 0 12px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
#chatMic{touch-action:none;user-select:none;-webkit-user-select:none}

/* genre picker: big toggles, GREEN=on, BLACK=off */
.genregrid{display:flex;flex-wrap:wrap;gap:8px}
.genrebtn{background:#111;color:#fff;border:2px solid #444;border-radius:12px;
 padding:12px 16px;font-size:16px;font-weight:600;cursor:pointer;min-height:48px}
.genrebtn.on{background:#22c55e;border-color:#22c55e;color:#052e12}