/* Preview-only visual bridge. Existing form IDs, scripts and API calls stay unchanged. */
.experience-bridge{
  --paper:#fff;
  --cream:#fffdf9;
  --sand:#e6ebff;
  --sand2:#f0f4ff;
  --coffee:#2449a2;
  --navy:#09277b;
  --body:#17346f;
  --muted:#53698f;
  --line:#e2e7f8;
  --pink:#f43c9c;
  --pink2:#8357e6;
  --blue:#f4f7ff;
  --lav:#faf3ff;
  --shadow:0 8px 25px rgba(25,42,104,.09);
  background:#fffdf9;
  color:var(--body);
}
.experience-bridge .wrap{width:min(1100px,calc(100% - 34px))}
.experience-bridge .bridge-header{background:#fff;box-shadow:0 1px 10px #182c6311}
.experience-bridge .bridge-header .nav{height:72px;gap:18px}
.experience-bridge .brand{gap:10px;min-width:0;white-space:nowrap}
.experience-bridge .brand b{font-size:22px;font-weight:950}
.experience-bridge .brand small{font-size:12px;letter-spacing:0;color:var(--navy);font-weight:700}
.experience-bridge .brand img{width:48px;height:48px;flex:none;object-fit:cover;object-position:center 18%;border:2px solid #ffe8da;background:#fff}
.experience-bridge .navlinks{gap:25px}
.experience-bridge .navlinks a{font-size:14px}
.experience-bridge .navlinks a[aria-current]{color:#073ab5;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:11px}
.experience-bridge .line-pill{min-height:42px;padding:8px 13px;background:#00b65b;box-shadow:none;font-size:12px}
.experience-bridge .bridge-intro{margin-top:24px;min-height:170px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 34px;border:1px solid #e2e7f8;border-radius:20px;background:linear-gradient(110deg,#f4f7ff 0%,#fff 53%,#fff3f9 100%);box-shadow:var(--shadow)}
.experience-bridge .bridge-eyebrow{color:#5266ff;font-size:11px;font-weight:950;letter-spacing:.16em}
.experience-bridge .bridge-intro h1{margin:6px 0 7px;font-size:clamp(26px,3vw,36px);line-height:1.25;color:#09277b}
.experience-bridge .bridge-intro p{margin:0;color:var(--muted);font-size:14px;font-weight:750}
.experience-bridge .bridge-theme{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin-top:14px;padding:6px 12px 6px 6px;border:1px solid #e2e7f8;border-radius:14px;background:#fff}
.experience-bridge .bridge-theme[hidden]{display:none}
.experience-bridge .bridge-theme img{width:56px;height:56px;flex:none;object-fit:contain;border-radius:10px;background:#f5f7ff}
.experience-bridge .bridge-theme strong,.experience-bridge .bridge-theme small{display:block}
.experience-bridge .bridge-theme strong{color:#09277b;font-size:13px}
.experience-bridge .bridge-theme small{color:var(--muted);font-size:11px;font-weight:700}
.experience-bridge .bridge-back{flex:none;color:#143ab3;text-decoration:none;font-weight:900;font-size:14px}
.experience-bridge .bridge-back:hover{text-decoration:underline}
.experience-bridge .flow-strip{margin:14px 0 0;padding:14px 19px;border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.experience-bridge .flow-strip strong{background:#eef2ff;color:#143ab3}
.experience-bridge #play{margin-top:26px;scroll-margin-top:16px}
.experience-bridge #play>.section-head{display:none}
.experience-bridge .section-head h2{color:#09277b;font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;font-weight:950}
.experience-bridge .kicker{color:#5266ff}
.experience-bridge .flow-shell,.experience-bridge .step-card,.experience-bridge .extension-card{border-color:#e2e7f8;background:#fff}
.experience-bridge .step-number{background:linear-gradient(100deg,#f23c99,#8357e6 65%,#3d79fa)}
.experience-bridge .upload{border-color:#b7c8ed;background:linear-gradient(145deg,#f7f9ff,#eef3ff)}
.experience-bridge .preview,.experience-bridge .gate{background:linear-gradient(145deg,#f4f7ff,#faf3ff)}
.experience-bridge .btn-primary{background:linear-gradient(100deg,#f23c99,#8357e6 65%,#3d79fa);box-shadow:0 5px 12px #122b7230}
.experience-bridge .btn-coffee{background:#2449a2}
.experience-bridge .choice.selected{border-color:#8357e6;background:#f7f4ff}
.experience-bridge .person-row button.selected{background:#09277b}
.experience-bridge .wall{background:#f7f9ff;border-color:#e2e7f8}
.experience-bridge .join-card{background:#f3fbf5;border-color:#d8ebdf}
.experience-bridge .footer{margin-top:48px;padding:28px 15px;background:#30231e;color:#fff;border:0}
@media(max-width:1050px){.experience-bridge .navlinks{display:flex;gap:12px}.experience-bridge .navlinks a{font-size:12px}}
@media(max-width:800px){
  .experience-bridge .wrap{width:calc(100% - 22px)}
  .experience-bridge .bridge-header .nav{height:auto;min-height:62px;padding:8px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .experience-bridge .brand b{font-size:16px}.experience-bridge .brand small{display:block;font-size:10px}
  .experience-bridge .brand img{width:38px;height:38px}
  .experience-bridge .line-pill{min-height:34px;padding:5px 9px;font-size:11px}
  .experience-bridge .navlinks{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:8px;padding:5px 0 2px}
  .experience-bridge .navlinks a{font-size:11px}
  .experience-bridge .bridge-intro{margin-top:12px;min-height:0;padding:20px;align-items:flex-start;flex-direction:column;gap:12px}
  .experience-bridge .bridge-intro h1{font-size:clamp(24px,6vw,30px)}
  .experience-bridge .bridge-theme{width:100%;margin-top:12px}
  .experience-bridge .flow-strip{margin:10px 0 0}
  .experience-bridge #play{margin-top:20px}
}
@media(max-width:520px){
  .experience-bridge .bridge-intro{padding:17px;border-radius:16px}
  .experience-bridge .bridge-intro p{font-size:13px}
  .experience-bridge .flow-strip{padding:11px;gap:7px}
  .experience-bridge .flow-strip div{font-size:12px}
  .experience-bridge .section-head h2{white-space:normal}
}