:root {
  --bg: #f7f3ee;
  --paper: #fffdf9;
  --ink: #231f1b;
  --muted: #786f68;
  --line: #e4dcd4;
  --accent: #db6d5f;
  --accent-soft: #f1d5cb;
  --dark: #27211d;
  --shadow: 0 26px 80px rgba(47,34,25,.12);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; color:var(--ink); font-family:"DM Sans",sans-serif;
  background:
    radial-gradient(circle at 10% 5%, rgba(224,137,103,.13), transparent 28%),
    radial-gradient(circle at 90% 30%, rgba(201,100,91,.09), transparent 26%),
    var(--bg);
}
button,input { font:inherit; }
button { cursor:pointer; }
a { text-decoration:none; color:inherit; }
.shell { width:min(1180px,calc(100% - 40px)); margin:auto; }
.topbar { height:80px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:10px; align-items:center; font-weight:700; }
.brand-mark { width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--dark);color:#fff;font-family:"Playfair Display",serif;font-size:20px; }
.top-pill { border:1px solid var(--line); background:rgba(255,255,255,.45); color:#827a73; border-radius:999px; padding:9px 13px; font-size:10px; letter-spacing:.12em; font-weight:700; }

.screen { display:none; min-height:calc(100vh - 130px); padding:58px 0 70px; }
.screen.active { display:block; }

.landing { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:80px; }
.eyebrow { font-size:10px; letter-spacing:.17em; font-weight:700; color:#948980; }
h1,h2 { font-family:"Playfair Display",Georgia,serif; letter-spacing:-.045em; line-height:.96; }
h1 { font-size:clamp(55px,7vw,88px); margin:18px 0; }
h2 { font-size:clamp(40px,5vw,61px); margin:16px 0; }
em { color:var(--accent); font-style:normal; }
.landing-copy p,.result-copy p { max-width:590px; color:var(--muted); font-size:17px; line-height:1.75; }

.entry-card,.waiting-card {
  padding:26px; border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,253,249,.8); box-shadow:var(--shadow);
}
.entry-tabs { display:grid; grid-template-columns:1fr 1fr; background:#eee7df; border-radius:12px; padding:4px; gap:4px; margin-bottom:24px; }
.entry-tab { border:0; border-radius:9px; padding:10px; background:transparent; color:#857b74; }
.entry-tab.active { background:#fffdf9; color:var(--ink); box-shadow:0 3px 12px rgba(0,0,0,.06); font-weight:600; }
.entry-pane { display:none; }
.entry-pane.active { display:block; }
label { display:block; color:#70675f; font-size:12px; margin:0 0 7px; }
input {
  width:100%; border:1px solid var(--line); background:#fbf8f3; border-radius:12px;
  padding:12px; outline:none; margin-bottom:14px; text-transform:none;
}
input:focus { border-color:#9b8e83; }
#joinCode { text-transform:uppercase; letter-spacing:.12em; }
.primary-btn,.secondary-btn {
  border-radius:999px; padding:12px 17px; display:inline-flex; justify-content:center; align-items:center;
  gap:9px; font-weight:600; border:1px solid transparent; transition:.2s;
}
.primary-btn { border-color:var(--dark); background:var(--dark); color:white; }
.primary-btn:hover:not(:disabled),.capture-main:hover { transform:translateY(-1px); box-shadow:0 12px 25px rgba(39,33,29,.17); }
.primary-btn:disabled { opacity:.4; cursor:not-allowed; }
.secondary-btn { border-color:var(--line); background:rgba(255,255,255,.48); color:var(--ink); }
.large { padding:15px 21px; }
.full { width:100%; }
.entry-error { min-height:20px; color:#b45149; font-size:12px; margin-top:10px; }

.room-header,.booth-top { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:26px; }
.room-header h2,.booth-top h2 { margin-bottom:0; }
.room-code-box { border:1px solid var(--line); background:rgba(255,255,255,.45); border-radius:17px; padding:12px 14px; min-width:150px; }
.room-code-box span { display:block; color:#9c9188; font-size:9px; font-weight:700; letter-spacing:.15em; }
.room-code-box strong { display:block; margin:3px 0 8px; letter-spacing:.14em; font-size:23px; }
.room-code-box button { padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:10px; }

.waiting-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.waiting-card { min-height:285px; }
.waiting-icon { font-size:42px; }
.waiting-card h3 { font-size:22px; margin:18px 0 8px; }
.waiting-card p { color:var(--muted); line-height:1.6; font-size:14px; max-width:430px; }
.invite-url { margin-top:22px; padding:12px; border-radius:12px; background:#f0eae3; font-size:11px; color:#766c64; word-break:break-all; }
.camera-check-card { display:flex; flex-direction:column; justify-content:space-between; }
.mini-video-wrap { position:relative; min-height:200px; border-radius:16px; overflow:hidden; background:#2c2723; }
.mini-video-wrap video { width:100%;height:100%;min-height:200px;object-fit:cover;display:block;transform:scaleX(-1); }
.video-placeholder { position:absolute;inset:0;display:grid;place-items:center;color:#d9d2cb;font-size:13px;background:#2c2723; }
.video-placeholder.hidden { display:none; }
.camera-check-actions { display:flex; gap:10px; margin-top:13px; }
.camera-check-actions > * { flex:1; }
.people-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.person-chip { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:rgba(255,255,255,.38); padding:10px 13px; border-radius:999px; font-size:12px; color:#786f67; }
.person-dot { width:7px;height:7px;border-radius:50%;background:#c5bcb4; }
.person-chip.online .person-dot { background:#66a576; }

.room-chip { border:1px solid var(--line); padding:9px 12px; border-radius:999px; color:#81766d; font-size:10px; letter-spacing:.1em; font-weight:700; }
.dual-camera { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.camera-card { position:relative; background:#28231f; border-radius:20px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); }
.camera-card video { width:100%;height:100%;display:block;object-fit:cover; }
#boothLocalVideo { transform:scaleX(-1); }
.camera-card-label { position:absolute;z-index:2;left:14px;top:14px;color:#fff;background:rgba(30,25,22,.48);backdrop-filter:blur(8px);padding:7px 10px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.13em; }
.camera-card-placeholder { position:absolute;inset:0;display:grid;place-items:center;color:#cfc7c0;font-size:13px;background:linear-gradient(145deg,#2b2622,#403831); }
.camera-card-placeholder.hidden { display:none; }
.countdown-overlay { position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;background:rgba(20,17,15,.1); }
.countdown-overlay span { font-size:120px; font-weight:700; color:white; text-shadow:0 12px 40px rgba(0,0,0,.35); }
.booth-actions { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:18px; }
.shot-copy span { font-weight:700; font-size:13px; }
.shot-copy p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.capture-main { border:0; border-radius:999px; padding:17px 24px; background:var(--dark); color:white; font-weight:700; transition:.2s; }
.capture-main:disabled { opacity:.45; cursor:not-allowed; }
.shot-dots { display:flex; justify-content:center; gap:7px; margin-top:20px; }
.shot-dots span { width:40px; height:4px; background:#ddd4cb; border-radius:999px; }
.shot-dots span.active { background:var(--dark); }

.result { display:grid; grid-template-columns:1fr 400px; gap:70px; align-items:center; }
.result-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:25px; }
.result-frame { background:#fff; padding:16px; box-shadow:var(--shadow); transform:rotate(2deg); }
.result-frame img { width:100%; display:block; }

footer { border-top:1px solid var(--line); padding:25px 0 38px; display:flex; justify-content:space-between; gap:20px; color:#938980; font-size:11px; }

@media (max-width: 900px) {
  .landing,.result { grid-template-columns:1fr; gap:35px; }
  .waiting-grid { grid-template-columns:1fr; }
  .result-frame { width:min(400px,100%); margin:auto; }
}
@media (max-width: 640px) {
  .shell { width:min(100% - 24px,1180px); }
  .top-pill { display:none; }
  .screen { padding-top:35px; }
  .landing { min-height:auto; }
  h1 { font-size:51px; }
  h2 { font-size:41px; }
  .dual-camera { grid-template-columns:1fr; }
  .booth-actions,.room-header,.booth-top { align-items:flex-start; flex-direction:column; }
  .capture-main { width:100%; }
  .camera-check-actions { flex-direction:column; }
  footer { flex-direction:column; }
}