/* poster.css — Win Poster studio (leader/admin module).
 * EVERY selector is scoped under .poster-studio so the template's generic class
 * names (.card, .head, .foot, .logo, .price…) can NEVER clobber app.css. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

.poster-studio{
  --exsim:#00B3A6; --exsim-d:#053B3A;
  --project:#2E7CF6; --project-d:#0A2A5E;
  --sale:#22C55E; --sale-d:#0A3A1F;
  --rental:#FF7A18; --rental-d:#5A2600;
  --gold:#FFC53D;
  display:flex;flex-direction:column;gap:22px;align-items:center;
  color:#0A1128;font-family:Inter,system-ui,sans-serif;padding:4px 0 28px;
}
.poster-studio *{box-sizing:border-box}

/* ---------- PANEL ---------- */
.poster-studio .panel{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:390px;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.poster-studio .panel h1{font-family:Anton;font-size:24px;letter-spacing:.01em;color:#0A1128}
.poster-studio .panel .sub{font-size:12px;color:#5a6072;margin:4px 0 16px}
.poster-studio label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5a6072;margin:14px 0 5px}
.poster-studio input,.poster-studio select,.poster-studio textarea{width:100%;padding:10px 12px;border:1px solid #d7d9e0;border-radius:9px;font-family:Inter;font-size:15px;color:#0A1128;background:#fff}
.poster-studio .row{display:flex;gap:10px}.poster-studio .row>div{flex:1}
.poster-studio .seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.poster-studio .sbtn{padding:10px 8px;border:1.5px solid #d7d9e0;border-radius:10px;background:#fff;font-family:Oswald;font-weight:600;font-size:13px;letter-spacing:.03em;cursor:pointer;text-align:center;transition:.15s;color:#0A1128}
.poster-studio .sbtn.active{color:#fff;border-color:transparent}
.poster-studio .sbtn[data-t="EXSIM"].active{background:var(--exsim)}
.poster-studio .sbtn[data-t="PROJECT"].active{background:var(--project)}
.poster-studio .sbtn[data-t="SUBSALE_SALE"].active{background:var(--sale)}
.poster-studio .sbtn[data-t="SUBSALE_RENTAL"].active{background:var(--rental)}
.poster-studio .sbtn[data-n="MY"].active{background:#CC0001}
.poster-studio .sbtn[data-n="ID"].active{background:#C8102E}

.poster-studio .wishwrap{margin-top:8px}
.poster-studio .wish{border:1.5px solid #e2e4ea;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45;color:#0A1128;cursor:pointer;margin-bottom:8px;transition:.12s}
.poster-studio .wish:hover{border-color:#b7bcc9}
.poster-studio .wish.sel{border-color:#0A1128;background:#0A1128;color:#fff;font-weight:500}
.poster-studio .minibtn{font-size:12px;font-weight:700;background:#fff;border:1px solid #d7d9e0;border-radius:8px;padding:8px 11px;cursor:pointer;color:#0A1128}
.poster-studio .aibar{display:flex;gap:8px;align-items:center;margin:6px 0 2px}
.poster-studio .aibar .tag{font-size:10px;font-weight:700;letter-spacing:.08em;color:#00B3A6;text-transform:uppercase}

.poster-studio .btns{display:flex;gap:10px;margin-top:18px}
.poster-studio .go{flex:1;padding:12px;border:none;border-radius:10px;background:#0A1128;color:var(--gold);font-family:Oswald;font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer}
.poster-studio .go.alt{background:var(--gold);color:#0A1128}
.poster-studio .savedrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.poster-studio .chip{font-size:12px;background:#f1f2f6;border:1px solid #e2e4ea;border-radius:20px;padding:6px 11px;cursor:pointer;color:#0A1128}
.poster-studio .chip:hover{background:#e7e9f0}
.poster-studio .payload{margin-top:14px;background:#f6f7f9;border-radius:10px;padding:12px}

/* ---------- POSTER (fixed 540x675 for a crisp 1080x1350 PNG export) ---------- */
.poster-studio .poster-frame{width:100%;max-width:390px;overflow:hidden}
.poster-studio .poster-scale{transform-origin:top left}
.poster-studio .poster{
  width:540px;height:675px;position:relative;overflow:hidden;border-radius:8px;
  background:#0A1128;color:#fff;box-shadow:0 25px 70px rgba(0,0,0,.35);
  --acc:var(--exsim);--accd:var(--exsim-d);
  display:flex;flex-direction:column;
}
.poster-studio .bg{position:absolute;inset:0;background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb,var(--acc) 55%, transparent), transparent 60%),
    linear-gradient(160deg,var(--accd) 0%, #05070f 78%);}
.poster-studio .rays{position:absolute;top:-140px;right:-140px;width:520px;height:520px;opacity:.16;
    background:repeating-conic-gradient(from 0deg at 50% 50%, var(--acc) 0deg 6deg, transparent 6deg 14deg);
    border-radius:50%;filter:blur(.3px)}
.poster-studio .slash{position:absolute;left:-10%;bottom:20%;width:130%;height:120px;background:var(--acc);
    transform:rotate(-8deg);opacity:.14}
.poster-studio .grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
    background-image:radial-gradient(#fff 1px,transparent 1px);background-size:4px 4px}
.poster-studio .inner{position:relative;z-index:3;display:flex;flex-direction:column;height:100%;padding:26px 30px}

.poster-studio .head{display:flex;justify-content:space-between;align-items:flex-start}
.poster-studio .logos{display:flex;gap:10px;align-items:center}
.poster-studio .logo{height:72px;display:flex;align-items:center;justify-content:center;
      font-family:Oswald;font-weight:700;font-size:13px;letter-spacing:.04em;color:#fff;
      filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
.poster-studio .logo img{height:72px;max-width:150px;object-fit:contain;display:block}
.poster-studio .divider{width:1px;height:44px;background:rgba(255,255,255,.28)}
.poster-studio .nationtag{font-family:Oswald;font-weight:700;font-size:11px;letter-spacing:.14em;
      background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:6px 12px;border-radius:20px}

/* stage = the flexible middle: text copy on the left, agent cutout on the right */
.poster-studio .stage{position:relative;flex:1 1 auto;min-height:0;margin-top:16px}
.poster-studio .copy{position:relative;z-index:3;width:56%;display:flex;flex-direction:column}

.poster-studio .impact{display:flex;align-items:center;gap:12px}
.poster-studio .impact .tro{font-size:40px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.poster-studio .impact .eye{font-family:Oswald;font-weight:700;font-size:14px;letter-spacing:.26em;color:var(--gold)}

.poster-studio .headline{width:100%;font-family:Anton;font-size:56px;line-height:.92;letter-spacing:.005em;margin-top:10px;
      text-transform:uppercase;text-shadow:0 6px 24px rgba(0,0,0,.35);white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
.poster-studio .headline .pop{color:var(--gold);display:inline-block;transform:skewX(-6deg)}
.poster-studio .headline .out{-webkit-text-stroke:2px var(--gold);color:transparent}

.poster-studio .agentmeta{margin-top:18px}
.poster-studio .agentmeta .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.poster-studio .agentmeta .nm{font-family:Anton;font-size:34px;line-height:1;margin-top:4px;text-shadow:0 3px 12px rgba(0,0,0,.55)}
.poster-studio .agentmeta .pod{display:inline-block;margin-top:8px;font-family:Oswald;font-weight:600;font-size:13px;letter-spacing:.06em;
      background:var(--acc);color:#04121a;padding:5px 12px;border-radius:6px}

/* agent cutout — transparent portrait, bottom-right, standing behind the price card */
.poster-studio .cutout{position:absolute;right:-8px;bottom:-24px;width:47%;height:116%;z-index:2;
      display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.poster-studio .cutout img{max-width:100%;max-height:100%;object-fit:contain;object-position:bottom;
      filter:drop-shadow(0 12px 26px rgba(0,0,0,.55))}
.poster-studio .cutout .cut-init{align-self:center;width:120px;height:120px;border-radius:50%;
      border:3px solid var(--gold);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
      font-family:Anton;font-size:44px;color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.4)}

.poster-studio .poster .card{position:relative;z-index:4;background:rgba(8,13,30,.68);border:1px solid rgba(255,255,255,.14);
      border-left:5px solid var(--acc);border-radius:14px;padding:16px 18px;backdrop-filter:blur(4px)}
.poster-studio .poster .card .dl{display:inline-block;font-family:Oswald;font-weight:700;font-size:10px;letter-spacing:.1em;
      background:var(--acc);color:#04121a;padding:3px 9px;border-radius:5px;margin-bottom:9px}
.poster-studio .poster .card .pn{font-family:Oswald;font-weight:600;font-size:22px;line-height:1.08}
.poster-studio .poster .card .pr{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px;gap:12px}
.poster-studio .poster .card .price{font-family:Anton;font-size:34px;color:var(--gold);line-height:.9;white-space:nowrap}
.poster-studio .plogo{height:34px;max-width:120px;object-fit:contain;opacity:.95;flex:none}
.poster-studio .plogo-ph{font-family:Oswald;font-weight:700;font-size:12px;color:rgba(255,255,255,.4);
      border:1.4px dashed rgba(255,255,255,.3);border-radius:6px;padding:6px 10px;flex:none}

.poster-studio .poster .foot{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.poster-studio .poster .foot .motto{font-family:Oswald;font-weight:600;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.85)}
.poster-studio .poster .foot .date{font-size:11px;color:rgba(255,255,255,.5)}

@keyframes poster-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.poster-studio .poster.live .tro{animation:poster-pulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.poster-studio .poster.live .tro{animation:none}}

/* ---- Win Poster launch button (home screen) --------------------------------
 * A celebratory "poster studio" identity — deliberately NOT the Tim Elit army
 * crest (that gold-on-olive look is reserved for the elite team). Vibrant
 * violet→pink→amber sweep, glossy trophy chip, crisp SVG icons. Defined here so
 * it ships with poster.css (which index.html loads app-wide). */
.poster-launch{
  --pl-1:#7C3AED; --pl-2:#DB2777; --pl-3:#F59E0B;
  position:relative; width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  margin:4px 0 14px; padding:14px 16px; border:none; border-radius:16px; cursor:pointer;
  color:#fff; overflow:hidden; font-family:inherit;
  background:linear-gradient(120deg,var(--pl-1) 0%, var(--pl-2) 55%, var(--pl-3) 100%);
  box-shadow:0 10px 26px rgba(124,58,237,.38);
  transition:box-shadow .2s ease, filter .2s ease, transform .12s ease;
}
.poster-launch:hover{ filter:brightness(1.06); box-shadow:0 14px 32px rgba(219,39,119,.44); }
.poster-launch:active{ transform:translateY(1px); }
.poster-launch:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
/* confetti speckle — purely decorative */
.poster-launch::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 78%, rgba(255,255,255,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 68%, rgba(255,255,255,.32) 0 1.5px, transparent 3px);
}
.poster-launch__badge{
  flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); position:relative; z-index:1;
}
.poster-launch__badge svg{ width:24px; height:24px; display:block; color:#FFD86B }
.poster-launch__txt{ display:flex; flex-direction:column; min-width:0; flex:1; position:relative; z-index:1 }
.poster-launch__txt b{ font-size:1rem; font-weight:800; letter-spacing:.01em; line-height:1.15 }
.poster-launch__txt span{ color:rgba(255,255,255,.9); font-size:.8rem; margin-top:2px }
.poster-launch__arrow{ flex:none; position:relative; z-index:1; color:#fff }
.poster-launch__arrow svg{ width:20px; height:20px; display:block }
@media(prefers-reduced-motion:reduce){ .poster-launch{ transition:none } }

/* Small celebratory accent on the studio title (ties the identity together) */
.poster-studio .panel h1{
  background:linear-gradient(120deg,#7C3AED,#DB2777 60%,#F59E0B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}