.ring-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; isolation: isolate;
  min-height: min(485px, 66dvh); padding: 32px 20px; border-radius: 22px; color: #f9f7e8;
  background: radial-gradient(ellipse at 50% 20%, #44684c 0%, #284b38 46%, #173a2e 92%);
}
.ring-art {
  display: grid; place-items: center; width: 92px; height: 92px; margin: 14px 0 21px; border-radius: 50%;
  border: 1px solid #dce8ce2b; background: #cee4b813; box-shadow: 0 0 0 9px #d9ecc609, 0 0 0 10px #d9ecc617;
}
.ring-art img { width: 61px; height: 61px; border-radius: 16px; }
#ring-title { margin: 0; color: #dce5ce; font-size: 14px; }
#ring-peer { margin: 9px 0 0; max-width: 100%; overflow-wrap: anywhere; color: #fffcef; font-size: clamp(25px, 4vw, 37px); }
#ring-detail { margin: 11px 0 0; color: #d5e1cb; font-size: 14px; line-height: 1.5; }
.ring-actions { display: flex; gap: 32px; align-items: flex-start; justify-content: center; margin-top: 29px; }
.ring-btn { flex-direction: column; min-width: 68px; background: transparent; color: #f4f5e7; font-size: 13px; }
.ring-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.ring-accept .ring-icon { background: #dce9c7; color: #1e4a35; }
.ring-end .ring-icon { background: #bf563e; color: #fff7eb; }
.live-notice { margin: 13px 0 0; }
.live-app .room-number strong { letter-spacing: -.02em; overflow-wrap: anywhere; }

:root { --honey:#ffb48a; --deep:#193d31; --line:#d9ded3; --card:#fffef9; --nav-h:64px; }
.live-app { background: #f8f7f2; }
.live-app .shell { width: min(100% - 46px, 884px); }
.live-app .head-inner { height: 62px; }
.site-head { border-color: #e4e6dc; }
.wordmark { font-size: 25px; }
.head-meta { display:flex; align-items:center; gap:12px; font-size:12px; }
#demo-chip,.topic-tag { padding:4px 8px; border-radius:5px; color:#745039; background:#f6e4cc; font-size:12px; font-weight:650; }
#enter-live { padding:0 8px; min-height:44px; background:transparent; color:var(--ink); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.connection,.host-status { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; }
.connection::before,.host-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#a99d80; }
.connection[data-state="online"]::before,.host-status:not(.busy)::before { background:#77b58c; }
.live-lobby { padding-block:22px calc(var(--nav-h) + 34px + env(safe-area-inset-bottom)); }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.section-heading h1,.profile-header h1,.studio-top h1 { font-size:clamp(32px,5.8vw,46px); letter-spacing:-.065em; line-height:1.15; }
.quiet,.section-lead,.footnote,.field-help,.studio-top p,.terms p { color:#647064; font-size:13px; line-height:1.6; }
.quiet { font-variant-numeric:tabular-nums; }
.section-lead { margin:8px 0 22px; }
.filters { display:flex; gap:7px; overflow-x:auto; padding:16px 1px 17px; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.filters button { flex:none; min-height:37px; padding:0 17px; border:1px solid var(--line); border-radius:24px; background:transparent; color:#566354; font-weight:620; font-size:13px; }
.filters button[aria-pressed="true"] { background:var(--deep); border-color:var(--deep); color:#f5f7e9; }
.host-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 13px; }
.host-card { margin:0; min-width:0; }
.host-card:first-child { grid-column:1/-1; }
.profile-link { position:relative; display:block; width:100%; min-width:0; padding:0; border:0; background:transparent; text-align:left; }
.portrait { position:relative; isolation:isolate; display:block; overflow:hidden; background-color:#d3d9bc; }
.portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
.portrait:not(:has(img)),.empty-art {
  background:radial-gradient(ellipse at 40% 66%,transparent 13%,#507056 13.7%,#284a38 18%,transparent 18.8%,transparent 21%,#638368 21.8%,#345440 26%,transparent 26.5%),
    radial-gradient(ellipse at 70% 26%,#eac79e 11%,#fdefcb 12%,#c3a67f 16%,transparent 17%,#f3e2b8 18%,#fcebc5 25%,transparent 26%),
    linear-gradient(135deg,#c9cbb2,#e4aa7e);
}
.card-photo { aspect-ratio:1.32; border-radius:15px; }
.card-status { position:absolute; left:9px; top:9px; z-index:1; color:white; background:#122a20bf; font-size:11px; border-radius:18px; padding:4px 7px; }
.feature-copy { display:none; }
.host-info { display:flex; align-items:start; justify-content:space-between; gap:8px; padding:8px 1px 0; }
.host-name { display:block; margin:0; font-size:clamp(17px,2vw,21px); font-weight:740; letter-spacing:-.035em; overflow-wrap:anywhere; }
.host-topic { margin-top:3px; display:block; font-size:11px; color:#697366; }
.host-rate { white-space:nowrap; font-size:13px; font-weight:730; color:#235139; font-variant-numeric:tabular-nums; }
.rate-unit { font-size:10px; font-weight:500; }
.host-card:first-child .card-photo { aspect-ratio:2.8; border-radius:20px; }
.host-card:first-child .card-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#11241cef 0%,#17231e8a 20%,transparent 65%); }
.host-card:first-child .card-status { left:15px; top:15px; }
.host-card:first-child .host-info { position:absolute; inset:auto 15px 17px; align-items:end; color:#fff; padding:0; }
.host-card:first-child .host-name { font-size:35px; line-height:1.12; text-shadow:0 1px 6px #060e0b55; }
.host-card:first-child .host-topic { display:none; }
.host-card:first-child .feature-copy { display:block; margin-top:6px; color:#fcf8e7; font-size:13px; line-height:1.4; font-weight:500; max-width:30em; }
.host-card:first-child .host-rate { padding:8px 10px; background:#ffbd96; border-radius:10px; color:#3e352c; }
.footnote { margin:21px 0 4px; font-size:12px; }
.tabs,.action-dock {
  position:fixed; z-index:9; bottom:0; inset-inline:0; width:min(100%,960px); margin-inline:auto;
  padding:6px max(14px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-bottom));
  border-top:1px solid #dce0d6; background:#f8f8f1f5;
}
.tabs { display:grid; grid-template-columns:repeat(3,1fr); }
.tabs button { flex-direction:column; gap:3px; min-height:50px; padding:4px 0; border-radius:10px; font-size:11px; color:#727b70; background:transparent; }
.tabs button .icon { width:23px; height:23px; }
.tabs [aria-current="page"] { color:#194c34; font-weight:750; }
.tabs [aria-current="page"] .icon { fill:#dbe8cf; stroke-width:2; }
.subhead { display:flex; align-items:center; min-height:47px; gap:8px; margin:-11px 0 10px; font-size:15px; font-weight:650; }
.back { width:44px; height:44px; margin-left:-10px; background:transparent; border-radius:50%; }
.back .icon { width:18px; }
.subpage,.ring-panel { max-width:660px; margin-inline:auto; }
.profile-image { width:100%; height:clamp(230px,40dvh,385px); border-radius:18px; }
.profile-header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 0 15px; border-bottom:1px solid var(--line); }
.profile-header h1 { margin:4px 0 0; overflow-wrap:anywhere; }
.eyebrow,.identity-sub { display:block; color:#57705d; font-size:12px; line-height:1.55; }
.topic-tag { flex:none; }
.bio-section,.terms { padding:14px 0 11px; }
.bio-section h2,.terms h2 { margin:0; font-size:18px; letter-spacing:-.025em; }
.bio-section p,.terms p { margin:8px 0 4px; line-height:1.65; overflow-wrap:anywhere; white-space:pre-wrap; }
.terms { border-top:1px solid var(--line); }
.action-dock { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 20px max(12px,env(safe-area-inset-bottom)); }
.action-dock small { color:var(--muted); font-size:11px; }
.action-dock strong { font-size:25px; line-height:1.2; font-variant-numeric:tabular-nums; letter-spacing:-.05em; }
.action-dock > div span { font-size:12px; color:var(--muted); }
.primary,.soft-btn { min-height:45px; border-radius:13px; padding:0 19px; font-size:14px; }
.primary { color:#fffdf3; background:var(--deep); }
.primary .icon { width:18px; }
.soft-btn { display:inline-flex; align-items:center; justify-content:center; color:var(--deep); background:#e6ecdd; font-weight:650; }
.primary:hover { background:#2c5841; }
.action-dock .primary { min-width:45%; }
.empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding:35px 18px; border-radius:17px; background:#f1f0e7; }
.empty-state h2 { margin:16px 0 0; font-size:20px; }
.empty-state p { margin:7px 0 14px; font-size:14px; color:var(--muted); }
.empty-art,.empty-symbol { width:76px; height:68px; border-radius:22px; }
.empty-symbol,.menu-icon { display:grid; place-items:center; color:#365b45; background:#e2e9d7; }
.history-row,.menu-row { display:flex; width:100%; text-align:left; justify-content:start; padding:14px 1px; gap:13px; border-bottom:1px solid var(--line); background:transparent; }
.history-row:last-child,.menu-row:last-child { border-bottom:0; }
.receipt-avatar,.identity-avatar { display:grid; place-items:center; flex:none; width:43px; height:43px; border-radius:15px; color:#416344; background:#e4ead9; font-size:18px; font-weight:730; }
.receipt-info,.menu-text { flex:1; min-width:0; }
.receipt-info strong,.menu-text strong { display:block; font-size:16px; overflow-wrap:anywhere; }
.receipt-info small,.menu-text small { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:500; }
.receipt-amount { text-align:right; color:var(--ink); font-size:15px; }
.receipt-amount small { display:block; margin-top:3px; color:var(--muted); font-size:11px; font-weight:500; }
.receipt-amount .missed { color:#975337; }
.amount-block { padding:32px 20px; text-align:center; border-radius:20px; background:#ecede1; }
.amount-block h1 { margin:5px 0 4px; font-size:48px; font-variant-numeric:tabular-nums; }
.amount-block p { margin:0; font-size:14px; }
.bill-details { margin:14px 0 0; }
.bill-details div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.bill-details dt { color:var(--muted); }
.bill-details dd { margin:0; font-weight:600; }
.identity { display:flex; align-items:center; gap:16px; margin:19px 0 17px; padding:24px 20px; border-radius:18px; background:linear-gradient(112deg,#e8ecdb,#efdbc4); }
.identity-avatar { width:60px; height:60px; border-radius:20px; background:#254e39; color:#f8edcc; font-size:26px; }
.identity h2 { margin:2px 0 0; font-size:24px; overflow-wrap:anywhere; }
.menu-icon { width:41px; height:41px; border-radius:13px; }
.menu-row > .icon { width:16px; margin-right:3px; }
.studio-top { margin:8px 0 18px; }
.studio-top h1 { margin:5px 0; font-size:30px; }
.studio-top p { margin:6px 0; }
.studio-form label:not(.file-button) { display:block; margin:17px 0 7px; font-size:14px; font-weight:650; }
.studio-form input:not([type=file]),.studio-form select,.studio-form textarea { display:block; width:100%; min-height:46px; padding:10px 12px; border:1px solid #cbd3c6; border-radius:10px; background:#fffef9; color:var(--ink); font:inherit; font-size:16px; }
.studio-form textarea { resize:vertical; }
.upload-row { display:flex; align-items:center; gap:16px; }
.upload-preview { width:92px; height:76px; border-radius:12px; background-size:cover; background-position:center; }
#host-cover { display:block; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }
.upload-row:focus-within .file-button { outline:2px solid var(--ink); }
.file-button { cursor:pointer; }
.text-btn { margin-left:5px; padding:3px; background:transparent; font-size:13px; }
.field-help { margin:6px 0 18px; }
.studio-form > button { width:100%; }
.test-access { max-width:440px; margin:16px 0; }
.test-access > button { margin-top:10px; }
#host-message { color:var(--muted); font-size:13px; }
.live-notice { margin:15px 0 0; padding:8px 11px; border-radius:8px; background:#f2eade; }
.live-notice:empty { display:none; }
#call-billing { color:var(--muted); font-size:12px; }
@media(min-width:690px) {
  .tabs,.action-dock { border:1px solid #dce0d6; border-radius:17px 17px 0 0; }
  .tabs { width:340px; }
  .action-dock { width:min(100%,700px); }
  #history,#mine { max-width:660px; margin-inline:auto; }
}
@media(max-width:650px) {
  .live-app .shell { width:calc(100% - 32px); }
  .live-app .head-inner { height:53px; }
  .wordmark img { width:31px; height:31px; border-radius:9px; }
  .wordmark { font-size:22px; }
  .head-meta { gap:9px; }
  .live-lobby { padding-top:17px; }
  .host-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 11px; }
  .host-card:first-child .card-photo { aspect-ratio:1.46; }
  .card-photo { aspect-ratio:1.22; border-radius:13px; }
  .host-card:first-child .host-name { font-size:30px; }
  .host-card:first-child .feature-copy { font-size:12px; max-width:17em; }
  .host-card:first-child .host-rate { font-size:13px; }
  .host-info { flex-wrap:wrap; gap:3px 9px; }
  .host-card:first-child .host-info { flex-wrap:nowrap; }
  .host-card:first-child .host-info > div { min-width:0; }
  .filters { gap:6px; padding-block:12px 13px; }
  .filters button { padding:0 15px; }
  .ring-panel { min-height:clamp(320px,67dvh,600px); }
}
@media(max-width:350px) {
  .filters button { padding-inline:11px; }
  .host-card:first-child .feature-copy { display:none; }
}
#remote-placeholder.demo-stage { display:flex; justify-content:center; align-items:flex-end; color:white; padding:18px; background-size:cover; background-position:center 35%; font-size:13px; text-shadow:0 1px 4px #172a20; }
#remote-placeholder.demo-stage::before { display:none; }
.self-off { font-size:11px; }
.host-caption { min-width:0; }
.feature-copy { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }