/* ============================================================
   Transfer - core.css (critical path, loaded synchronously)
   - Design tokens are inlined in index.html <head> (see <style>)
   - Reset & typography / page skeleton / functional area / card stage
   - Toast, WebRTC-unsupported banner, entry animations
   - Responsive layer (incl. first-screen content-visibility optimization)
   Below-the-fold promo carousel lives in css/lazy.css (async).
   ============================================================ */

/* ---------- RESET & 全局排版 ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--bg-base);
  overflow-x:hidden;
  font-size:16px;
  line-height:1.6;
  transition:background-color .35s ease,color .35s ease;
}
/* 网格 + 光晕背景独立为 fixed 合成层，避免滚动时整页重绘（移动端性能关键） */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(900px 500px at 82% -8%, rgba(0,163,163,.10), transparent 60%),
    radial-gradient(800px 480px at 0% 0%, rgba(0,82,217,.10), transparent 55%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:auto,auto,34px 34px,34px 34px;
}
/* 断点契约（单一事实来源）：
   ≥1280px  → 桌面双栏，锁定 1280 最小宽度
   ≤1279px  → 解除锁定并自适应，且由本文件自适应层统一切换为单栏
   两处断点必须严格互补，中间不得留真空区，否则 901~1279px（如 iPad 横屏 1024）
   会出现「双栏布局被压进窄容器」的断裂。 */
@media (min-width:1280px){
  body{min-width:var(--container-max);}
}
@media (max-width:1279px){
  body{min-width:0;}
  .page,.header-inner,.footer-inner{max-width:100%;}
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.18;}
p{margin:0;}
::selection{background:rgb(var(--rgb-primary)/.20);}

/* 表单元素统一重置：
   iOS Safari 会给 input/button/select 强制套系统圆角与内阴影，
   必须显式 -webkit-appearance:none 才能还原设计稿。 */
button,input,select,textarea{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}
button,input[type=submit],input[type=button],select{
  -webkit-appearance:none;
  appearance:none;
}
/* 去掉移动端点击时的灰色高亮块，避免与自定义 :active 态叠加 */
a,button,[role=button],input,select,textarea,summary{
  -webkit-tap-highlight-color:transparent;
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  box-shadow:0 1px 0 rgba(15,23,42,.02),0 6px 24px rgba(15,23,42,.05);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}

.header-inner{
  max-width:1280px;margin:0 auto;height:68px;
  display:flex;align-items:center;gap:28px;padding:0 24px;
}
.brand{display:inline-flex;align-items:center;gap:10px;position:relative;transition:transform .3s var(--ease);}
.brand-logo{display:inline-flex;filter:drop-shadow(0 4px 10px rgb(var(--rgb-primary)/.25));}
.brand-name{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--text);position:relative;display:inline-block;line-height:26px;}
.main-nav{display:flex;gap:4px;margin-left:8px;}
/* 移动端抽屉的外层裁切容器：桌面端透明（display:contents 不产生盒子，
   让 main-nav 仍是 header-inner 的直接 flex 子项）；仅移动端切换为固定抽屉。 */
.nav-drawer{display:contents;}
.main-nav a{
  position:relative;font-weight:500;font-size:15px;color:var(--text-2);
  padding:8px 14px;border-radius:10px;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.main-nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.main-nav a:hover{color:var(--text);background:rgb(var(--rgb-primary)/.07);}
.main-nav a:hover::after{transform:scaleX(1);}
.main-nav a:focus-visible{outline:none;color:var(--text);border-radius:10px;box-shadow:var(--ring);}
.main-nav a.is-active{color:var(--primary-text);font-weight:600;background:rgb(var(--rgb-primary)/.10);}
.main-nav a.is-active::after{transform:scaleX(1);}
.header-cta{margin-left:auto;}

/* ---------- 移动端汉堡菜单 & 导航遮罩 ---------- */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 101;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.hamburger svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.nav-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,6,18,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.nav-mask.is-show {
  display: block;
  opacity: 1;
}

/* ---------- WCAG AA 对比度合规覆盖 ---------- */
.dz-hint, .file-size, .show-desc-sm, .tm-k {
  color: #4b5563;
}
.panel-sub, .show-desc {
  color: #374151;
}

/* ---------- BRAND HOVER FX: shake + Windows-style file-copy animation ---------- */
/* FX scene is scoped to the .brand-name area only; logo stays visible. */
.brand-fx{
  position:absolute;top:-22px;bottom:-35px;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:space-between;padding:0 1px;
  opacity:0;pointer-events:none;z-index:5;background:transparent;
}
.brand.brand--fx{animation:brandShake .4s var(--ease);}      /* single right deflect, then upright */
.brand.brand--fx .brand-fx{animation:fxScene 1.5s var(--ease) .4s forwards;}
.brand.brand--fx .fx-file{animation:fxArc 1.05s ease-in-out .55s both;}
.brand.brand--fx .fx-file.fx-ghost{animation:fxArc 1.05s ease-in-out .73s both;}

.fx-folder{display:inline-flex;flex:0 0 auto;transform:translateY(-15px);}
.fx-file{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;filter:drop-shadow(0 3px 6px rgb(var(--rgb-primary)/.35));
}
.fx-file.fx-ghost{filter:drop-shadow(0 3px 6px rgb(var(--rgb-primary)/.2));opacity:.55;}

/* single right deflect, then RETURN UPRIGHT (no wobble) */
@keyframes brandShake{
  0%{transform:translateX(0) rotate(0);}
  45%{transform:translateX(5px) rotate(5deg);}
  100%{transform:translateX(0) rotate(0);}
}
@keyframes fxScene{
  0%{opacity:0;}
  12%{opacity:1;}
  82%{opacity:1;}
  100%{opacity:0;}
}
/* parabolic ARC: from bottom folders, up through text, peak = file bottom 5px below text top */
@keyframes fxArc{
  0%{transform:translate(calc(-50% - 55px),calc(-50% + 14px)) rotate(-12deg) scale(.8);opacity:0;}
  15%{opacity:1;}
  25%{transform:translate(calc(-50% - 29px),calc(-50% + 2px)) rotate(-6deg) scale(.92);}
  50%{transform:translate(-50%,calc(-50% - 25px)) rotate(0) scale(1);}
  75%{transform:translate(calc(-50% + 29px),calc(-50% + 2px)) rotate(6deg) scale(.92);}
  86%{opacity:1;}
  100%{transform:translate(calc(-50% + 55px),calc(-50% + 14px)) rotate(12deg) scale(.8);opacity:0;}
}

/* t-button: 真实 <button> 元素（可键盘激活，替代未定义的自定义元素） */
.t-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:42px;padding:0 22px;border:none;border-radius:10px;
  font-family:var(--font-sans);font-weight:600;font-size:15px;cursor:pointer;
  background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);
  transition:transform .15s,box-shadow .2s,background .2s;
}
.t-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--primary-strong);}
.t-button[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
.t-button:focus-visible{outline:none;box-shadow:var(--ring);border-radius:13px;}

/* ---------- PAGE / SECTIONS ---------- */
.page{max-width:1280px;margin:0 auto;padding:26px 24px 0;}

/* ---------- FOOTER ---------- */
.site-footer{
  margin-top:32px;width:100%;background:var(--footer-bg);
  border-top:1px solid var(--border);padding:26px 0 28px;
  position:relative;
  box-shadow:0 -1px 0 rgba(15,23,42,.02),0 -10px 30px rgba(15,23,42,.03);
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--teal),var(--green));
  opacity:.55;
}
.footer-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"brand social bottom";
  align-items:center;gap:24px 32px;
}
.footer-brand{grid-area:brand;display:flex;align-items:center;gap:8px;color:var(--text);}
.footer-brand .brand-name{font-weight:700;font-size:16px;color:var(--primary);letter-spacing:.01em}
.footer-tag{
  font-size:12.5px;color:var(--text-2);font-weight:500;margin:0 0 0 12px;
  padding-left:12px;border-left:1px solid var(--border);white-space:nowrap;
}
.footer-social{grid-area:social;display:flex;justify-content:flex-end;align-items:center;gap:15px;}
.footer-bottom{grid-area:bottom;display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap;}
.footer-row360{display:contents;}
.social-row{display:flex;gap:12px;}
.social-btn{
  width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  transition:transform .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.social-btn:hover{transform:translateY(-3px) scale(1.05);color:var(--primary-text);border-color:var(--primary);background:rgb(var(--rgb-primary)/.07);box-shadow:0 10px 22px rgb(var(--rgb-primary)/.18);}
.social-btn:focus-visible{outline:none;box-shadow:var(--ring);}
.footer-copy{font-size:12.5px;color:var(--text-3);white-space:nowrap;}
.footer-links{display:flex;align-items:center;gap:24px;}
.footer-links a,.footer-links .legal-link{font-size:12.5px;color:var(--text-2);transition:color .2s;position:relative;}
.footer-links a::after,.footer-links .legal-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.footer-links a:hover,.footer-links .legal-link:hover{color:var(--primary);}
.footer-links a:hover::after,.footer-links .legal-link:hover::after{transform:scaleX(1);}
.legal-tip{position:relative;}
.legal-link{cursor:help;}
.footer-links a.legal-link{cursor:pointer;}
.tip-pop{
  position:absolute;bottom:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(10px) scale(.9);
  width:262px;padding:18px 20px 20px;border-radius:18px;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--border);
  color:var(--text);font-size:12px;line-height:1.55;text-align:left;
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;visibility:hidden;pointer-events:none;z-index:120;
  transition:opacity .24s ease,transform .34s cubic-bezier(.34,1.56,.64,1),visibility .24s;
}
.legal-tip:hover .tip-pop,.legal-tip:focus-within .tip-pop,
.legal-tip.is-open .tip-pop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;
}
.tip-pop strong{display:block;margin-bottom:10px;font-size:13px;font-weight:800;color:var(--text);letter-spacing:.01em}
.tip-pop ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tip-pop li{position:relative;padding-left:17px;color:var(--text-2)}
.tip-pop li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgb(var(--rgb-teal)/.18)}

/* 深色模式：气泡改为深色玻璃 + 浅色文字，保证可读 */
@media (prefers-color-scheme: dark){
  .tip-pop{
    background:rgba(17,24,39,.82);
    border-color:var(--border);
    color:var(--text);
    box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .tip-pop strong{color:#F8FAFC;}
  .tip-pop li{color:var(--text-2);}
  .tip-pop li::before{background:var(--teal);box-shadow:0 0 0 3px rgb(var(--rgb-teal)/.2);}
}

/* ---------- FAQ DIALOG ---------- */
.faq-dialog{
  border:0;padding:0;border-radius:20px;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-xl);
  width:min(640px,calc(100vw - 36px));
  max-width:none;
  max-height:min(80vh,720px);
  overflow:hidden;
  margin:auto;
}
.faq-dialog::backdrop{
  background:rgba(10,16,32,.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.faq-dialog[open]{animation:faqIn .28s var(--ease-out) both;}
@keyframes faqIn{
  from{opacity:0;transform:translateY(16px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.faq-dialog-inner{display:flex;flex-direction:column;max-height:inherit;}
.faq-dialog-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px 14px;
  border-bottom:1px solid var(--border);
}
.faq-dialog-head h2{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;}
.faq-dialog-sub{margin:4px 0 0;font-size:var(--fs-sm);color:var(--text-3);}
.faq-dialog-close{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s,transform .2s,background .2s;
}
.faq-dialog-close:hover{color:var(--text);border-color:var(--border-strong);transform:rotate(90deg);}
.faq-dialog-close:focus-visible{outline:none;box-shadow:var(--ring);}
.faq-dialog-body{
  overflow-y:auto;overscroll-behavior:contain;
  padding:12px 24px 16px;
  -webkit-overflow-scrolling:touch;
}
.faq-item{border:1px solid var(--border);border-radius:14px;background:var(--surface);margin:0 0 10px;overflow:hidden;transition:border-color .2s;}
.faq-item[open]{border-color:var(--border-strong);}
.faq-item:last-child{margin-bottom:0;}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;font-size:var(--fs-sm);font-weight:600;color:var(--text);
  user-select:none;-webkit-user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";flex:0 0 auto;width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-2);
  font-size:16px;font-weight:700;line-height:1;
  transition:transform .25s var(--ease),background .2s,color .2s;
}
.faq-item[open] summary::after{content:"−";transform:rotate(180deg);background:var(--primary);color:#fff;}
.faq-item summary:hover{color:var(--primary);}
.faq-item summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:14px;}
.faq-item-body{padding:0 16px 14px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.65;}
.faq-item-body p{margin:0;}
.faq-dialog-foot{
  padding:12px 24px 20px;
  border-top:1px solid var(--border);
  text-align:center;
}

/* ============================================================
   BeamTransfer — 组件层 (css/components.css)
   - 功能区：左侧控制面板（房间 / 上传 / 按钮）
   - 右侧卡片舞台（promo / QR / transfer）
   - 促销轮播（features / steps / reviews）
   - Toast 与入场动画
   依赖：css/base.css 中定义的设计令牌
   ============================================================ */

/* ---------- FUNCTIONAL AREA ---------- */
.functional{margin-top:6px;}
.functional-inner{
  display:flex;gap:26px;align-items:stretch;
}
.panel-left{flex:1 1 auto;min-width:0;}
.panel-right{flex:0 0 528px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}

.card-panel{
  min-height:100%;background:var(--panel-left-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:26px 28px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  position:relative;
}
.card-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--card-sheen);
}
.panel-section{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.panel-section + .panel-section{border-top:1px solid var(--border);padding-top:20px;margin-top:4px;}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
/* 渐变标题通用类（供 .panel-title* / .show-title* 复用，避免重复声明） */
.grad-text{width:fit-content;background:linear-gradient(95deg,var(--primary),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;}
.panel-title{font-size:22px;font-weight:700;line-height:1.12;}
.panel-title-sm{font-size:17px;font-weight:600;}
.panel-sub{font-size:13.5px;color:var(--text);margin-top:-6px;line-height:1.3;}
.room-section{gap:7px;}
.enc-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;line-height:1;
  color:var(--green-text);background:rgb(var(--rgb-green)/.12);border:1px solid rgb(var(--rgb-green)/.24);
  height:30px;padding:0 12px;border-radius:999px;
}

/* connection-mode indicator (left panel ⇄ card 3 live sync) */
.head-right{display:flex;align-items:center;gap:20px;}
.conn-indicator{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;line-height:1;
  height:30px;padding:0 12px;border-radius:999px;-webkit-user-select:none;user-select:none;white-space:nowrap;
  color:var(--green-text);background:rgb(var(--conn-rgb)/.10);border:1px solid rgb(var(--conn-rgb)/.24);
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
/* 三态复用同一样式，仅切换颜色：Pending(灰) / Connecting(橙) / P2P Direct(绿) / Relay(橙) */
.conn-indicator.is-pending{--conn-dot:var(--gray);--conn-rgb:var(--rgb-gray);color:var(--text-3);}
.conn-indicator.is-connecting{--conn-dot:var(--primary);--conn-rgb:var(--rgb-primary);color:var(--primary-text);}
.conn-indicator.is-p2p{--conn-dot:var(--green);--conn-rgb:var(--rgb-green);color:var(--green-text);}
.conn-indicator.is-relay{--conn-dot:var(--orange);--conn-rgb:var(--rgb-orange);color:var(--orange-text);}
.conn-indicator[role="button"]{cursor:pointer;}
.conn-indicator[role="button"]:hover{background:rgb(var(--conn-rgb)/.16);}
.conn-indicator:focus-visible{outline:none;box-shadow:var(--ring);}
.conn-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--conn-dot);
  animation:connBlink 1.2s ease-in-out infinite;
}
@keyframes connBlink{
  0%,100%{box-shadow:0 0 0 0 rgb(var(--conn-rgb)/.55);opacity:1;}
  50%{box-shadow:0 0 0 5px rgb(var(--conn-rgb)/0);opacity:.4;}
}

/* room number — OTP-style cells + side actions */
.room-form{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:nowrap;}
.code-input{display:flex;gap:8px;}
.code-cell{
  width:40px;height:44px;text-align:center;font-family:var(--font-sans);
  font-size:19px;font-weight:700;color:var(--text);
  border:1.5px solid var(--border-strong);border-radius:12px;background:var(--surface);
  transition:border-color .2s,box-shadow .2s,transform .15s,background .2s;
}
.code-cell::placeholder{color:var(--text-3);}
.code-cell:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:var(--ring);transform:translateY(-1px);}

.room-actions{display:flex;gap:10px;margin-left:auto;}

/* buttons (shared) */
.btn{
  height:50px;padding:0 22px;border:1px solid transparent;border-radius:13px;
  font-family:var(--font-sans);font-weight:600;font-size:14.5px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 8px 18px rgb(var(--rgb-primary)/.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgb(var(--rgb-primary)/.38);}
.btn-primary:active{box-shadow:0 6px 14px rgb(var(--rgb-primary)/.30);}
.btn-ghost{background:var(--surface);color:var(--primary-text);border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{background:rgb(var(--rgb-primary)/.07);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-ghost:active{box-shadow:var(--shadow-sm);}
/* Connect & Pause: subtle primary-tinted background */
.btn-connect,.btn-pause{background:rgb(var(--rgb-primary)/.10);color:var(--primary-text);border-color:var(--primary);}
.btn-connect:hover,.btn-pause:hover{background:rgb(var(--rgb-primary)/.16);border-color:var(--primary-strong);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-connect:active,.btn-pause:active{box-shadow:var(--shadow-sm);}
/* 去掉 Connect 按钮按下时的下沉位移（按钮不再下移），不强行加宽 */
.btn-connect:active{transform:none;}
/* 固定最小宽度：三态（Connect/Connecting…/Connected）文字长度不同，预留宽度避免布局跳动与换行 */
.btn-connect{min-width:152px;}
/* Connect button state feedback: Connecting(深橙) / Connected(深绿) / Stop(深红)
   采用更深的渐变 + 文字阴影，确保白字在彩色背景上清晰、不模糊（对比度 ≥6:1） */
/* 注意：连接中/连接成功后按钮带 disabled 属性，会被 .btn[disabled]{opacity:.5} 整体淡化。
   关键: .btn[disabled] 与 .btn-connect.is-* 同为 (0,2,0) 且声明靠后, 会把实色渐变冲淡至 50%,
   导致"按钮颜色很淡"。故连接态选择器追加 [disabled] 提升为 (0,3,0), 强制 opacity:1 并保留光晕。 */
.btn-connect.is-connecting[disabled]{background:linear-gradient(135deg,#9A3412,#7C2D12);color:#fff;border-color:transparent;cursor:progress;opacity:1;animation:connectPulse 1.3s ease-in-out infinite;}
@keyframes connectPulse{
  0%,100%{box-shadow:0 0 0 0 rgb(154 82 18 / .55);}
  50%{box-shadow:0 0 0 9px rgb(154 82 18 / 0);}
}
.btn-connect.is-connected[disabled]{background:linear-gradient(135deg,#0E7C3A,#065723);color:#fff;border-color:transparent;text-shadow:0 1px 2px rgb(4 74 29 / .55);box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 8px 22px rgb(14 124 58 / .45);opacity:1;}
.btn-connect.is-connected[disabled]:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 14px 32px rgb(14 124 58 / .55);}
.btn-connect.is-stop{background:linear-gradient(135deg,#DC2626,#A81F1F);color:#fff;border-color:transparent;cursor:pointer;text-shadow:0 1px 2px rgb(127 29 29 / .45);box-shadow:0 8px 22px rgb(220 38 38 / .45);opacity:1;}
.btn-connect.is-stop:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgb(220 38 38 / .55);}


/* Create Room: sweeping shine effect */
#createRoomBtn{position:relative;overflow:hidden;isolation:isolate;}
#createRoomBtn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);
  transform:translateX(-100%);
  animation:roomShine 2.8s ease-in-out infinite;
}
@keyframes roomShine{0%{transform:translateX(-100%);}50%{transform:translateX(100%);}100%{transform:translateX(100%);}}

/* Send Files: bottom progress bar effect */
#sendBtn{position:relative;overflow:hidden;isolation:isolate;}
#sendBtn::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#7E9BF0,var(--primary));
  box-shadow:0 0 8px rgb(var(--rgb-primary)/.5);
  /* 用 transform 代替 width 动画：仅走合成器，不触发布局重排 */
  transform:scaleX(0);transform-origin:left;
  animation:sendBar 3.8s ease-in-out infinite;
}
@keyframes sendBar{0%{transform:scaleX(0);}65%{transform:scaleX(1);}100%{transform:scaleX(1);}}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn[disabled]:hover{transform:none;box-shadow:none;}

.room-status{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);margin-top:6px;line-height:1.3;}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);}
.status-dot.waiting{animation:pulse 1.3s infinite;}
.status-dot.ok{background:var(--green);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgb(var(--rgb-orange)/.5);}50%{box-shadow:0 0 0 6px rgb(var(--rgb-orange)/0);}}

/* upload */
.upload-section{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:2px;}
.dropzone{
  border:2px dashed var(--border-strong);border-radius:var(--radius-sm);
  background:var(--dropzone-bg);
  padding:18px;cursor:pointer;text-align:center;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.dropzone:hover{transform:translateY(-2px);border-color:var(--primary);background:rgb(var(--rgb-primary)/.05);box-shadow:var(--shadow-sm);}
.dropzone.drag{border-color:var(--teal);background:rgb(var(--rgb-teal)/.07);box-shadow:0 0 0 4px rgb(var(--rgb-teal)/.12);}
.dropzone-inner{display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;}
.dz-icon{color:var(--primary-text);opacity:.9;}
.dz-text{font-size:14px;color:var(--text);font-weight:500;}
.dz-link{color:var(--primary-text);font-weight:600;text-decoration:underline;}
.dz-hint{font-size:12px;color:var(--text-3);}

/* 全局拖放遮罩 */
.drop-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.drop-overlay.is-active{display:flex;animation:dropFade .15s ease both;}
@keyframes dropFade{from{opacity:0}to{opacity:1}}
.drop-overlay-inner{
  pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:42px 56px;border-radius:20px;
  border:3px dashed rgba(255,255,255,.85);
  background:rgba(51,80,196,.18);
  color:#fff;text-align:center;
  box-shadow:0 24px 60px rgba(8,15,35,.35);
}
.drop-overlay-icon{display:flex;color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));}
.drop-overlay-text{margin:0;font-size:18px;font-weight:700;letter-spacing:.01em;}

.file-list{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1;min-height:60px;overflow:auto;}
.file-list:empty{display:none;}
.file-item{
  display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:9px 11px;animation:popIn .25s var(--ease);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
/* 半透明文件项背景：仅在支持 color-mix 的浏览器上覆盖（Safari 16.2+/FF 113+） */
@supports (background-color: color-mix(in srgb, red 30%, transparent)) {
  .file-item{background:color-mix(in srgb, var(--surface) 30%, transparent);}
}
.file-item:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);}
/* 空状态占位: 与 .file-item 保持同一套圆角/内边距/字号, 仅弱化配色与去掉边框 */
.file-empty{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;padding:9px 11px;border-radius:12px;
  border:1px dashed var(--border);background:transparent;
  color:var(--text-3);font-size:12.5px;line-height:1.5;
}
.file-ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgb(var(--rgb-primary)/.14),rgb(var(--rgb-teal)/.14));color:var(--primary-text);
  box-shadow:inset 0 0 0 1px rgb(var(--rgb-primary)/.18);
}
/* 图标尺寸统一由 CSS 兜底: 即使内联 SVG 的 width/height 属性被改动, 渲染尺寸仍一致 */
.file-ic svg{display:block;width:18px;height:18px;}
/* 按类型换色调: 只改 background / color / 内描边(与文字同色系低透明度)三个属性,
   尺寸·圆角·渐变角度·透明度权重保持一致, 因此各类型视觉分量相同、不会互相抢注意力。
   内描边让色块在半透明文件项(color-mix 30% surface)上保持清晰轮廓。SVG 本身用 currentColor。 */
.file-ic.fi-image  {background:linear-gradient(135deg,rgb(var(--rgb-primary)/.16),rgb(var(--rgb-teal)/.16));color:var(--primary-text);box-shadow:inset 0 0 0 1px rgb(var(--rgb-primary)/.20);}
.file-ic.fi-video  {background:linear-gradient(135deg,rgb(var(--rgb-red)/.18),rgb(var(--rgb-orange)/.14));color:var(--red);box-shadow:inset 0 0 0 1px rgb(var(--rgb-red)/.22);}
.file-ic.fi-audio  {background:linear-gradient(135deg,rgb(var(--rgb-teal)/.18),rgb(var(--rgb-primary)/.12));color:var(--teal);box-shadow:inset 0 0 0 1px rgb(var(--rgb-teal)/.22);}
.file-ic.fi-pdf    {background:linear-gradient(135deg,rgb(var(--rgb-red)/.18),rgb(var(--rgb-gray)/.14));color:var(--red);box-shadow:inset 0 0 0 1px rgb(var(--rgb-red)/.22);}
.file-ic.fi-archive{background:linear-gradient(135deg,rgb(var(--rgb-orange)/.20),rgb(var(--rgb-gray)/.14));color:var(--orange-text);box-shadow:inset 0 0 0 1px rgb(var(--rgb-orange)/.24);}
.file-ic.fi-doc    {background:linear-gradient(135deg,rgb(var(--rgb-primary)/.18),rgb(var(--rgb-primary)/.10));color:var(--primary-text);box-shadow:inset 0 0 0 1px rgb(var(--rgb-primary)/.20);}
.file-ic.fi-sheet  {background:linear-gradient(135deg,rgb(var(--rgb-green)/.18),rgb(var(--rgb-teal)/.12));color:var(--green-text);box-shadow:inset 0 0 0 1px rgb(var(--rgb-green)/.22);}
.file-ic.fi-slide  {background:linear-gradient(135deg,rgb(var(--rgb-orange)/.18),rgb(var(--rgb-primary)/.12));color:var(--orange-text);box-shadow:inset 0 0 0 1px rgb(var(--rgb-orange)/.22);}
.file-ic.fi-code   {background:linear-gradient(135deg,rgb(var(--rgb-teal)/.18),rgb(var(--rgb-green)/.12));color:var(--teal);box-shadow:inset 0 0 0 1px rgb(var(--rgb-teal)/.22);}
.file-ic.fi-generic{background:linear-gradient(135deg,rgb(var(--rgb-gray)/.24),rgb(var(--rgb-gray)/.12));color:var(--text-3);box-shadow:inset 0 0 0 1px rgb(var(--rgb-gray)/.32);}
/* 图片缩略图（替代类型图标）：1px 边线避免浅色照片融进浅色背景, var(--border) 随暗色主题自动加深 */
.file-thumb{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:block;
  background:#eef2f7 center/cover no-repeat;background-color:rgb(var(--rgb-primary)/.08);
  box-shadow:inset 0 0 0 1px var(--border);
}
.file-info{flex:1;min-width:0;display:flex;align-items:baseline;gap:5px;}
.file-name{
  font-size:13.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}
.file-size{font-size:11.5px;color:var(--text-3);white-space:nowrap;flex:0 0 auto;}
.file-rm{
  border:none;background:transparent;color:var(--text-3);cursor:pointer;font-size:18px;line-height:1;
  width:26px;height:26px;border-radius:6px;transition:all .2s;
}
.file-rm:hover{color:var(--red);background:rgb(var(--rgb-red)/.1);}

.upload-actions{display:flex;gap:10px;margin-top:auto;}
.upload-actions .btn{flex:1;}

/* ---------- RIGHT CARD STAGE ---------- */
.card-stage{
  position:relative;width:520px;height:500px;margin:0 auto;
  perspective:1400px;
}
.show-card{
  position:absolute;top:0;left:0;right:0;margin:0 auto;width:500px;height:400px;
  background:var(--panel-right-bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:26px 28px;
  display:flex;flex-direction:column;
  transform-origin:center center;
  transition:transform .6s var(--ease-out),opacity .4s var(--ease);
}
/* 三张演示卡的静态错位堆叠（与 HTML 静态类一致）：promo 最前，room/transfer 作为背卡错位显示 */
.card-promo{z-index:30;}
.card-room{z-index:20;transform:translate(22px,26px) rotate(7deg) scale(.965);opacity:.97;}
.card-transfer{z-index:10;transform:translate(46px,54px) rotate(14deg) scale(.93);opacity:.94;}
/* 动态切换时各卡位的错位规则：任意卡均可位于 front，其余按偏移量成为背卡。
   无此规则时背卡只剩静态 z-index:30 且与 front 卡位置重合，会被完全盖住（只剩两张可见）。 */
.show-card.is-back-1{z-index:20;transform:translate(22px,26px) rotate(7deg) scale(.965);opacity:.97;}
.show-card.is-back-2{z-index:10;transform:translate(46px,54px) rotate(14deg) scale(.93);opacity:.94;}
.show-card.is-front{
  transform:none;
  z-index:30;opacity:1;box-shadow:var(--shadow-lg);
}
.show-card.is-front:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px) scale(1.01);}
.card-badge{position:absolute;top:18px;right:18px;}
.show-title{font-size:30px;line-height:1.12;font-weight:800;margin-top:6px;}
.show-title-sm{font-size:21px;font-weight:700;margin-top:2px;}
.show-desc{font-size:13.5px;color:var(--text-2);margin-top:10px;max-width:340px;}
.show-desc-sm{font-size:12.5px;color:var(--text-2);margin-top:10px;}
/* carousel dots (promo card ⇄ video) */
.promo-dots{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;gap:10px;z-index:3;
}
.promo-dot{
  width:9px;height:9px;border-radius:50%;
  border:none;padding:0;cursor:pointer;
  background:var(--border-strong);opacity:.5;transition:width .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease);
}
.promo-dot:hover{opacity:.8;}
.promo-dot.is-active{
  width:22px;border-radius:999px;opacity:1;
  background:var(--grad-primary);
}

/* Promo card: slogan ⇄ demo-video views */
.promo-view{
  position:absolute;left:28px;right:28px;top:62px;bottom:52px;
  display:flex;flex-direction:column;gap:10px;
  transition:opacity .55s ease;
}
.promo-slogan{opacity:1;}
.promo-video{opacity:0;pointer-events:none;}
.card-promo.show-video .promo-slogan{opacity:0;pointer-events:none;}
.card-promo.show-video .promo-video{opacity:1;pointer-events:auto;}

/* faux demo video frame */
.video-frame{
  position:relative;flex:1;border-radius:18px;overflow:hidden;
  background:var(--video-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.08);
}
.video-scene{display:flex;align-items:center;justify-content:center;gap:10px;}
.video-scene .demo-line{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 8px,transparent 8px 16px);
}
.video-scene .demo-packet{
  background:linear-gradient(90deg,var(--teal),#D9FFF8);
  box-shadow:0 0 8px rgba(0,0,0,.3);
}
.video-play{
  position:absolute;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.32);transition:transform .2s;
}
.video-play:hover{transform:scale(1.08);}
.video-bar{
  position:absolute;left:14px;right:14px;bottom:12px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.28);
}
.video-progress{
  display:block;height:100%;width:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--teal),#7EE0D6);
  /* 用 transform 代替 width 动画：仅走合成器，不触发布局重排 */
  transform:scaleX(0);transform-origin:left;
}
.video-frame.playing .video-progress{animation:vidFill 6s linear forwards;}
@keyframes vidFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.video-cap{margin-top:12px;font-size:13px;color:var(--text-2);text-align:center;}

/* Card 1 demo scene */
.demo-scene{
  margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;
  height:118px;position:relative;overflow:hidden;
  transform:translateZ(0);isolation:isolate;
}
.demo-dev{box-shadow:0 8px 16px rgb(var(--rgb-primary)/.18);transform:translateZ(0);border-radius:8px;}
/* promo 设备：透明描边线稿，颜色随主题适配（currentColor）
   - 浅色：柔和浅灰描边，无背景色块，与白色展示台协调
   - 深色：在深色展示台上清晰可见，避免浅色设备“撞色” */
.demo-laptop,.demo-phone{color:var(--demo-device);}
.demo-line{
  position:relative;flex:1;height:4px;border-radius:3px;overflow:hidden;
  background:rgb(var(--rgb-primary)/.18);
}
.demo-packet{
  position:absolute;top:0;left:0;width:42%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--teal));
  box-shadow:0 0 10px rgb(var(--rgb-primary)/.55);
  opacity:1;
}

/* 数据包描线动画：纯 CSS 实现（不依赖 JS）。
   slogan 视图始终可见并持续播放；video 视图默认隐藏，仅在 .show-video 时播放，
   不可见时以 animation-play-state:paused 暂停以省资源。
   动画无条件应用（确保首页数据包动画始终可见）。 */
.promo-slogan .demo-packet { animation: demoPacketFlow 2.2s ease-in-out infinite; }
.promo-video  .demo-packet { animation: demoPacketFlow 2.2s ease-in-out infinite; animation-play-state: paused; }
.card-promo.show-video .promo-video .demo-packet { animation-play-state: running; }

@keyframes demoPacketFlow {
  0%   { transform: translateX(-110%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(260%); opacity: 0; }
}

/* Card 2 QR (kept on white in both themes so codes stay scannable) */
.qr-show{
  margin:16px auto 6px;width:164px;height:164px;background:#fff;border-radius:16px;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:12px;
  box-shadow:var(--shadow-sm),inset 0 0 0 4px #fff;
}
.qr-show canvas,.qr-show img{display:block;width:140px;height:140px;}
.room-code-big{
  text-align:center;font-size:30px;font-weight:800;letter-spacing:.22em;color:var(--primary-text);
  font-variant-numeric:tabular-nums;margin-top:4px;
}
.share-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;position:relative;top:-15px;margin:14px auto 0;
  font-family:var(--font-sans);font-weight:600;font-size:13.5px;
  color:#fff;background:var(--grad-primary);
  border:1px solid transparent;border-radius:999px;
  padding:9px 22px;cursor:pointer;
  transition:top .2s var(--ease),padding .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.share-btn:hover{background:var(--primary-strong);color:#fff;box-shadow:0 12px 26px rgb(var(--rgb-primary)/.4);top:-19px;padding:12px 28px;}
.share-btn:active{top:-15px;padding:11px 26px;}
.share-btn:focus-visible{outline:none;box-shadow:var(--ring);}

/* Share link: pulsing ring effect (box-shadow halo), enabled only when card 2 (room) is active */
@keyframes sharePulse{
  0%{box-shadow:0 0 0 0 rgb(var(--rgb-primary)/.55);}
  70%{box-shadow:0 0 0 14px rgb(var(--rgb-primary)/0);}
  100%{box-shadow:0 0 0 0 rgb(var(--rgb-primary)/0);}
}
.card-room.is-front .share-btn:not(:hover){animation:sharePulse 1.6s ease-out infinite;}

/* Card 3 transfer */
.transfer-body{display:flex;align-items:center;gap:20px;margin-top:14px;}
.ring-wrap{position:relative;flex:0 0 auto;width:118px;height:118px;}
.ring{transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:var(--surface-2);stroke-width:11;}
.ring-fg{
  fill:none;stroke:var(--teal);stroke-width:11;stroke-linecap:round;
  stroke-dasharray:var(--ring-circ);stroke-dashoffset:var(--ring-circ);
  transition:stroke-dashoffset .25s linear;
}
.ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.ring-pct{font-size:26px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.transfer-meta{flex:1;display:flex;flex-direction:column;gap:6px;}
.tm-row{display:flex;justify-content:space-between;font-size:13px;}
.tm-k{color:var(--text-3);}
.tm-v{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
/* 彩色分割线 + 底部广告位 */
.card-divider{height:2px;margin:14px 0;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--teal),var(--green));}
.card-ad{
  flex:1;margin-top:2px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:14px 16px;border-radius:14px;border:1px dashed var(--border-strong);
  background:linear-gradient(135deg,rgb(var(--rgb-primary)/.08),rgb(var(--rgb-teal)/.08));
}
.ad-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.ad-title{font-size:15px;font-weight:700;color:var(--text);margin:0;}
.ad-sub{font-size:12px;color:var(--text-2);margin:0;}

/* t-tag: 真实 <span> 元素（theme 属性驱动配色，替代未定义的自定义元素） */
.t-tag{
  display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;
  background:rgb(var(--rgb-primary)/.12);color:var(--primary-text);font-size:12px;font-weight:600;font-family:var(--font-sans);
}
.t-tag[theme="success"]{background:rgb(var(--rgb-green)/.14);color:var(--green-text);}
.t-tag[theme="warning"]{background:rgb(var(--rgb-orange)/.16);color:var(--orange-text);}
.t-tag[theme="default"]{background:rgb(var(--rgb-gray)/.18);color:var(--text-3);}

/* ---------- 兼容性告警 BANNER（WebRTC 不支持等，常驻） ---------- */
.unsupported-banner{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb, var(--orange) 14%, var(--surface));
  border-bottom:1px solid var(--orange);
  color:var(--text);font-size:14px;font-weight:500;line-height:1.4;
  padding:12px 16px;box-shadow:var(--shadow-lg);
  animation:bannerIn .3s var(--ease);
}
.unsupported-banner .ub-ic{flex:none;color:var(--orange);display:inline-flex;}
.unsupported-banner .ub-text{flex:1;min-width:0;}
.unsupported-banner .ub-text a{color:var(--primary);text-decoration:underline;}
.unsupported-banner .ub-close{
  flex:none;cursor:pointer;border:none;background:transparent;color:var(--text-2);
  font-size:20px;line-height:1;padding:4px 6px;border-radius:8px;
}
.unsupported-banner .ub-close:hover{background:var(--border);}
@keyframes bannerIn{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:none;}}

/* ---------- TOAST ---------- */
.toast-host{position:fixed;top:84px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px;}
.toast{
  display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--primary);border-radius:12px;padding:13px 17px;
  box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;color:var(--text);
  animation:toastIn .35s var(--ease);min-width:220px;
}
.toast.ok{border-left-color:var(--green);}
.toast.warn{border-left-color:var(--orange);}
.toast .t-ic{display:inline-flex;}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}
.toast.out{animation:toastOut .3s ease forwards;}
@keyframes toastOut{to{opacity:0;transform:translateX(20px);}}

/* ---------- 入场动画 ---------- */
@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.card-panel{animation:riseIn .6s var(--ease-out) both;}
.card-stage{animation:riseIn .7s var(--ease-out) .08s both;}
/* ============================================================
   BeamTransfer — 自适应层 (本文件内)
   - 纯 CSS 媒体查询方案（替代原 js/responsive-css.js 动态注入）：
       · 视口宽度 ≤1279px（含竖屏 / 横屏窄屏与窄窗口）→ 应用移动端单栏布局（本文件）；
       · 横屏且宽度 ≥1280px → 保持桌面端双栏布局
         （base.css + components.css 原样生效，仅按视口等比缩放右侧卡片舞台）；
   - 静态 <link> 引入且置于 components.css 之后：同等优先级选择器
     依靠"后来居上"的层叠顺序覆盖桌面规则，无需类名前缀隔离；
   - 画布与分区（设计基准 390 × 844，扣除安全区）：
       · 头部（sticky）+ 底部（footer）；中间为单栏：
       · 上栏 = 首屏顶部：右侧三张演示卡（promo / room / transfer）
         以卡片堆叠方式呈现，宽度收窄，控制高度；
       · 下栏 = 操作区：创建房间 / 输入框 / 选择文档 / 发送（沿用现有控件）；
       · 第二屏 = 宣传区：content-visibility 跳过屏外渲染；
   - 安全区：通过 env(safe-area-inset-*) 适配刘海 / 灵动岛（≈44px）
     与 Home Indicator（≈34px），视口 viewport-fit=cover 已静态写入 HTML；
   - 不修改 base.css / components.css，仅在竖屏媒体查询内做覆盖。
   ============================================================ */

/* 设计规范：≤1279px（含竖屏、横屏窄屏/窄窗口）统一走移动端单栏；
   桌面双栏仅用于 ≥1280px 横屏。卡片区与轮播区均按移动端自适应。

   断点必须与 base.css 的 `@media (max-width:1279px)` 解锁点严格对齐：
   base.css 在 ≤1279px 解除 1280 最小宽度锁定，若本层仍停在 900px，
   则 901~1279px（iPad 横屏 1024、小尺寸笔电、分屏窗口）会落入真空区——
   桌面双栏未被替换，却被压进最窄 901px 的容器，导致布局断裂。 */
@media (orientation: portrait), (max-width: 1279px){

  /* ============ 首屏性能：宣传区屏外跳过渲染（纯 CSS，无 JS 依赖） ============ */
  .promo{
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }

  /* ============ 通用：解除桌面最小宽度锁定 ============ */
  body{
    min-width:0;
    overflow-x:hidden; /* 兜底：Safari 15 等不支持 overflow:clip 时至少隐藏 */
    background-color:var(--bg-base);
    background-image:
      radial-gradient(900px 500px at 82% -8%, rgba(0,163,163,.10), transparent 60%),
      radial-gradient(800px 480px at 0% 0%, rgba(0,82,217,.10), transparent 55%);
    background-size:auto,auto;
  }
  .header-inner,
  .page,
  .footer-inner{max-width:100%;}

  /* ============ Web App 壳层：内容撑满视口 + 页脚贴底，杜绝“网页”悬浮感 ============ */
  html,body{height:100%;}
  body{display:flex;flex-direction:column;overscroll-behavior-y:contain;}
  .page{flex:1 1 auto;}
  /* 触控体验：消除 300ms 延迟 / 双击缩放、点选文本高亮，贴近原生 App 手感 */
  .btn,.dropzone,.code-cell,.dz-text,.main-nav a,.footer-link,.promo-dot{
    touch-action:manipulation;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
  }

  /* ============ 安全区（刘海 / 灵动岛 / Home Indicator） ============ */
  .site-header{padding-top:env(safe-area-inset-top);}
  .header-inner{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
  }
  .page{
    padding-left:calc(18px + env(safe-area-inset-left));
    padding-right:calc(18px + env(safe-area-inset-right));
  }
  .footer-inner{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
  }
  .site-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom));}

  /* ============ HEADER：收紧，保证品牌 + 导航 + CTA 可放下 ============ */
  .header-inner{gap:12px;height:60px;}
  .brand-name{font-size:18px;}
  .brand-logo svg{width:30px;height:30px;}
  .main-nav{gap:14px;margin-left:2px;}
  .main-nav a{font-size:13px;padding:6px 2px;}
  .t-button{height:40px;padding:0 16px;font-size:14px;}
  .t-button svg{width:18px;height:18px;}

  /* 移动端汉堡菜单激活：抽屉容器定位 + 裁切，收起时不产生横向滚动 */
  .hamburger{display:block;}
  .nav-drawer{
    display:block;position:fixed;top:0;right:0;width:75%;max-width:280px;height:100dvh;
    overflow:hidden;z-index:100;
    pointer-events:none;
  }
  .main-nav{
    position:absolute;inset:0;width:100%;height:100%;margin-left:0;
    background:var(--surface);flex-direction:column;padding:72px 24px 24px;gap:20px;
    box-shadow:-4px 0 20px rgba(0,0,0,.08);
    /* 用 transform 滑入滑出：动画走合成器；外层 drawer overflow:hidden 裁切收起态 */
    transform:translateX(100%);visibility:hidden;pointer-events:none;
    transition:transform .3s var(--ease),visibility 0s .3s;
  }
  .main-nav.is-open{
    transform:translateX(0);visibility:visible;pointer-events:auto;
    transition:transform .3s var(--ease),visibility 0s;
  }
  .main-nav a{font-size:16px;padding:8px 0;}

  /* ============ PAGE / 功能区：左右双栏 → 上下单栏 ============ */
  .page{padding-top:12px;padding-bottom:0;}
  .functional{margin-top:4px;}
  .functional-inner{flex-direction:column;gap:15px;align-items:stretch;}
  .panel-left,
  .panel-right{flex:none;width:100%;}
  /* 首屏顶部 = 右侧三张演示卡（promo / room / transfer） */
  .panel-right{order:-1;}
  .card-panel{
    min-height:0;padding:12px 14px;gap:8px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;
  }
  .card-panel::before{display:none;}
  .panel-title{font-size:19px;}
  .panel-title-sm{font-size:16px;}
  .panel-sub{font-size:12.5px;}
  .panel-section + .panel-section{padding-top:12px;}
  .section-head{flex-wrap:wrap;gap:8px 10px;}
  .head-right{gap:8px;flex-wrap:wrap;justify-content:flex-start;}

  /* ---------- 右侧三张演示卡：置于首屏顶部（堆叠呈现，控高） ---------- */
  /* 卡片舞台宽度与操作区、宣传区统一（同页边距 18px、同自适应列宽） */
  .card-stage{
    position:relative;width:100%;max-width:none;
    height:clamp(216px,48vw,290px);margin:0 auto;
  }
  .show-card{
    position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
    border-radius:20px;padding:clamp(16px,4.4vw,20px);
    background:var(--surface);border:1px solid var(--border);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  /* 取消 3D / 转角：背卡仅做整数像素的平整微位移，避免 transform 缩放/旋转导致文字发虚 */
  .card-room{
    transform:translate(6px,8px);
    box-shadow:var(--shadow-md);
  }
  .card-transfer{
    transform:translate(10px,14px);
    box-shadow:var(--shadow-sm);
  }
  /* 未激活背卡：降低透明度形成“幽影叠层”，弱化下层信息抢占视线，突出前卡 */
  .show-card:not(.is-front){opacity:.38;}
  /* 动态切换的背卡错位（与上方静态 .card-room/.card-transfer 的移动端位移一致） */
  .show-card.is-back-1{transform:translate(6px,8px);box-shadow:var(--shadow-md);z-index:20;}
  .show-card.is-back-2{transform:translate(10px,14px);box-shadow:var(--shadow-sm);z-index:10;}
  /* 修复渐变裁切标题在变换下发虚：改用实心品牌色 */
  .show-title,
  .show-title-sm{
    background:none;-webkit-background-clip:border-box;background-clip:border-box;
    color:var(--primary);
  }
  .show-card.is-front{transform:none;opacity:1;box-shadow:var(--shadow-lg);}
  /* 竖屏（触屏为主）关闭前卡桌面 hover 上浮效果 */
  .show-card.is-front:hover{transform:none;box-shadow:var(--shadow-lg);}
  .card-badge{top:14px;right:14px;}
  .show-title{font-size:clamp(20px,5.4vw,26px);}
  .show-title-sm{font-size:clamp(15px,4.2vw,19px);}
  .show-desc{font-size:clamp(12px,3.1vw,13px);max-width:none;}
  .show-desc-sm{font-size:clamp(11.5px,3vw,12px);}
  .demo-scene{height:clamp(64px,18vw,90px);}
  .qr-show{width:clamp(92px,26vw,104px);height:clamp(92px,26vw,104px);padding:8px;margin:8px auto 2px;}
  .qr-show canvas,
  .qr-show img{width:100%;height:100%;}
  .room-code-big{font-size:clamp(22px,6vw,28px);}
  /* 卡片2：二维码与房间号左右并排，压缩高度 */
  .room-qr-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0;}
  .room-qr-row .qr-show{margin:0;}
  .room-qr-row .room-code-big{margin:0;text-align:left;font-size:clamp(20px,5.6vw,26px);}
  .share-btn{top:0;font-size:12.5px;padding:7px 16px;margin:8px auto 0;}
  .share-btn svg{width:16px;height:16px;}
  .transfer-body{gap:12px;margin-top:8px;}
  .ring-wrap{width:clamp(72px,19vw,92px);height:clamp(72px,19vw,92px);}
  .ring{width:100%;height:100%;}
  .ring-pct{font-size:clamp(18px,5vw,23px);}
  .card-ad{padding:9px 12px;}
  .card-divider{margin:9px 0;}
  .card-transfer .show-title-sm{margin-top:0;}
  .ad-title{font-size:14px;}
  .ad-sub{font-size:11px;}
  .video-cap{font-size:12px;}
  /* 卡片1 视频窗口：撑满宽度、距卡片边缘 15px、高度自适应 */
  .promo-view{left:15px;right:15px;top:15px;bottom:0;justify-content:center;}
  .video-frame{
    flex:1;width:auto;height:auto;margin:0;aspect-ratio:auto;
  }

  /* ============ 功能按钮：触控友好、宽度自适应 ============ */
  .btn{font-size:15px;}
  .room-form{flex-wrap:wrap;row-gap:10px;margin-top:4px;}
  .code-input{width:100%;justify-content:space-between;gap:6px;}
  .code-cell{flex:1;width:auto;min-width:0;height:42px;font-size:18px;}
  .room-actions{width:100%;margin-left:0;flex-direction:row;gap:10px;}
  .room-actions .btn{flex:1;min-width:0;height:44px;font-size:14.5px;padding:0 12px;}
  .btn-connect{min-width:0;}
  .upload-actions{gap:10px;flex-direction:row;}
  .upload-actions .btn{flex:1;min-width:0;height:44px;font-size:14.5px;padding:0 12px;}

  /* ============ 选择文件上传框（移动端重新设计，紧凑控高） ============ */
  /* 更明确的点按区：渐变主图标 + 虚线描边（激活转实 + 光晕）；
     控高 52px，保证可点又不高，使操作区整体落在首屏内 */
  .upload-section{gap:6px;}
  .dropzone{
    position:relative;
    display:flex;flex-direction:row;align-items:center;
    width:100%;height:52px;min-height:52px;
    padding:0 14px;
    text-align:left;
    border:2px dashed var(--border-strong);
    border-radius:14px;
    background:var(--dropzone-bg);
    cursor:pointer;
    transition:border-color .2s var(--ease),background .25s var(--ease),
               box-shadow .25s var(--ease),transform .15s var(--ease);
  }
  .dropzone:active{
    transform:scale(.99);
    border-style:solid;
    border-color:var(--primary);
    background:rgb(var(--rgb-primary)/.06);
    box-shadow:0 0 0 4px rgb(var(--rgb-primary)/.12);
  }
  /* 左右布局：图标居左，文字 + 提示堆叠于右侧两行 */
  .dropzone-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:12px;row-gap:1px;
    align-items:center;width:100%;
    text-align:left;pointer-events:none;
  }
  .dz-icon{
    grid-column:1;grid-row:1 / span 2;
    width:34px;height:34px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;background:var(--grad-primary);
    box-shadow:0 8px 16px rgb(var(--rgb-primary)/.28);
  }
  .dz-icon svg{width:18px;height:18px;}
  .dz-text{grid-column:2;grid-row:1;font-size:13.5px;font-weight:600;color:var(--text);}
  .dz-link{color:var(--primary-text);text-decoration:underline;}
  .dz-hint{grid-column:2;grid-row:2;font-size:10.5px;color:var(--text-3);line-height:1.2;}

  /* 文件列表与发送 / 暂停按钮 */
  /* 移除桌面端 30px 底部留白：竖屏 card-panel 为内容高度，该留白会变成按钮与面板底的不协调空隙 */
  .upload-actions{margin-top:5px;margin-bottom:2px;gap:10px;}
  .file-list{min-height:20px;gap:10px;margin-top:3px;}
  .file-item{
    padding:6px 10px;border-radius:10px;
    display:flex;align-items:center;gap:9px;
    background:var(--surface);border:1px solid var(--border);
  }
  .file-ic{
    width:28px;height:28px;border-radius:8px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
  }
  .file-ic svg{width:17px;height:17px;}
  .file-thumb{width:28px;height:28px;border-radius:8px;}
  .file-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .file-size{font-size:11px;color:var(--text-3);}
  .file-rm{
    width:32px;height:32px;flex:0 0 auto;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface);border:1px solid var(--border);color:var(--text-3);
  }
  .file-rm svg{width:15px;height:15px;}
  .file-rm:hover,.file-rm:active{
    color:var(--red);border-color:rgb(var(--rgb-red)/.45);background:rgb(var(--rgb-red)/.10);
  }


  /* ============ FOOTER：两行（360/390 兼容） ============ */
  /* 行1：左栏 3 块(logo/品牌/标语)竖排 | 右栏 社媒；行2：版权+隐私+条款+反馈 单行不换行 */
  .site-footer{padding-top:22px;margin-top:22px;}
  .footer-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"left right" "bottom bottom";
    column-gap:10px;row-gap:3px;
    align-items:start;
  }
  /* —— 行1 左栏：左 logo（跨两行），右 上 brand / 下 slogan，区域内不换行 —— */
  .footer-brand{
    grid-area:left;display:grid;
    grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:10px;row-gap:3px;align-items:center;
    max-width:180px;min-width:0;
  }
  .footer-brand .brand-logo{grid-column:1;grid-row:1 / span 2;display:flex;}
  .footer-brand .brand-logo svg{width:31px;height:31px;}
  .footer-brand .brand-name{grid-column:2;grid-row:1;font-size:15px;font-weight:700;color:var(--primary);line-height:1.2;white-space:nowrap;}
  .footer-brand .footer-tag{
    grid-column:2;grid-row:2;margin:0;padding:0;border-left:0;white-space:nowrap;
    font-size:11px;color:var(--text-2);
  }
  /* —— 行1 右栏：社媒，靠右垂直居中；缩小图标以兼容 360px —— */
  .footer-social{
    grid-area:right;display:flex;justify-content:flex-end;align-items:center;
    max-width:180px;margin-left:auto;
  }
  .social-row{display:flex;gap:8px;}
  .social-btn{width:32px;height:32px;border-radius:10px;}
  .social-btn svg{width:18px;height:18px;}
  .social-btn:active{transform:scale(.92);}
  /* —— 行2：版权 + 隐私 / 条款 / Feedback 居中，空间不足自动换行 —— */
  .footer-bottom{
    grid-area:bottom;display:flex;justify-content:center;width:100%;
    margin-top:4px;
  }
  /* 行2：版权 + 链接组居中，空间不足时链接整体换行（不再横向滚动） */
  .footer-row360{
    width:100%;max-width:100%;margin:0 auto;
    display:flex;justify-content:center;align-items:center;
    flex-wrap:wrap;gap:7px 16px;
  }
  .footer-copy{font-size:12px;color:var(--text-2);white-space:nowrap;}
  /* 链接组：竖屏作为真实弹性容器，居中换行；Feedback（JS 注入）自然并入 */
  .footer-links{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;
  }
  .footer-links .legal-link{
    font-size:12.5px;white-space:nowrap;cursor:pointer;color:var(--primary);
    display:inline-flex;align-items:center;min-height:34px;padding:0 2px;
    -webkit-tap-highlight-color:transparent;
  }
  /* 竖屏隐藏 Reviews（桌面保留）；Feedback 为普通链接不受影响 */
  .footer-links .legal-tip:not(.tip-left):not(.tip-right){display:none;}
  /* 链接之间加“·”分隔，随链接一起换行、避免孤点 */
  .footer-links .legal-tip + .legal-tip::before,
  .footer-links .fb-wrap::before{
    content:"·";margin:0 9px;color:var(--text-3);font-size:12.5px;
  }
  /* 触靶放大 + 按压反馈（含 Feedback 容器） */
  .footer-links .legal-tip,
  .footer-links .fb-wrap{display:inline-flex;align-items:center;min-height:34px;}
  .footer-links a:active,
  .footer-links .legal-link:active,
  .footer-links .fb-wrap:active{transform:scale(.94);opacity:.65;}
  /* 竖屏以 .is-open（JS 点击切换）为唯一开合来源，屏蔽触屏 sticky hover / 失焦残留 */
  .legal-tip .tip-pop{
    display:block;width:min(264px,calc(100vw - 32px));
    opacity:0;visibility:hidden;pointer-events:none;
  }
  .legal-tip:hover .tip-pop,
  .legal-tip:focus-within .tip-pop{opacity:0;visibility:hidden;pointer-events:none;}
  .legal-tip.is-open .tip-pop{opacity:1;visibility:visible;pointer-events:auto;}
  .legal-tip.tip-left.is-open .tip-pop{transform:translateX(-50%) translateY(0) scale(1);}
  .legal-tip.tip-right .tip-pop{left:auto;right:0;transform:translateY(10px) scale(.9);}
  .legal-tip.tip-right.is-open .tip-pop{transform:translateY(0) scale(1);}

  /* ============ TOAST：底部居中，避免窄屏溢出 ============ */
  .toast-host{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));right:12px;left:12px;max-width:none;}
  .toast{max-width:none;min-width:0;width:100%;}

  /* ============ FAQ 弹窗：贴边全宽，贴近底部呈现 ============ */
  .faq-dialog{
    width:calc(100vw - 24px);
    max-height:calc(88vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-top:auto;margin-bottom:auto;
    border-radius:18px;
  }
  .faq-dialog-head{padding:18px 18px 12px;}
  .faq-dialog-body{padding:10px 14px 14px;}
  .faq-dialog-foot{padding:10px 18px 16px;}
}

/* ============================================================
   细分断点：竖屏极窄屏（≤600px）隐藏顶部文字导航，保留品牌 + CTA
   （页面为单屏营销页，功能区 CTA 与页脚链接已提供可达入口）
   ============================================================ */
@media (max-width:600px){
  /* 保留主导航可达性：改为整宽、可横向滚动的条带，
     避免移动端完全失去 Security / Help / Reviews 快速跳转入口 */
  .header-inner{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;gap:8px 12px;}
  .main-nav{
    display:flex;order:3;width:100%;margin-left:0;
    overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-top:1px solid var(--border);padding-top:8px;
  }
  .main-nav::-webkit-scrollbar{display:none;}
}

/* ============================================================
   超窄屏（≤360px，如 iPhone SE 一代 / 折叠屏外屏 / 320px 视口）：
   头部与页脚双侧 14px 内边距会吃掉约 28px，320px 下内容区仅剩 ~292px，
   房间码与按钮同行时过于拥挤，故收窄内边距并压缩控件尺寸。
   ============================================================ */
@media (max-width:360px){
  .header-inner,
  .footer-inner{
    padding-left:calc(10px + env(safe-area-inset-left));
    padding-right:calc(10px + env(safe-area-inset-right));
  }
  /* 数字框在 320px 下优先收缩，保证 6 位房间码不换行 */
  .code-cell{flex:0 1 34px;min-width:26px;height:40px;font-size:15px;}
  .code-input{gap:4px;}
  .room-actions .btn,
  .upload-actions .btn{min-width:0;padding:0 8px;font-size:13px;gap:6px;}
  .room-actions .btn svg,
  .upload-actions .btn svg{width:18px;height:18px;flex:0 0 auto;}
}

/* ============================================================
   平板竖屏增强（768–1024 竖屏）：仍走单栏，但放宽容器与字号，
   避免在大屏平板上出现“放大的手机”观感——断点阶梯中的精细一档。
   ============================================================ */
@media (orientation:portrait) and (min-width:768px){
  .page{padding-left:calc(18px + env(safe-area-inset-left));padding-right:calc(18px + env(safe-area-inset-right));}
  .functional-inner{gap:15px;}
  .card-stage{max-width:none;height:clamp(300px,52vw,430px);}
  .panel-title{font-size:22px;}
  .show-title{font-size:clamp(24px,4.6vw,30px);}
  .show-title-sm{font-size:clamp(18px,3.4vw,22px);}
}

/* ============================================================
   横屏桌面（≥1280px）：双栏 + 流式卡片舞台。
   替代原 transform:scale + 负外边距方案——后者会导致文字发虚、指针命中错位
   以及脆弱的缩放数学；改用 clamp() 让舞台随视口平滑收放，矢量内容始终清晰。

   起点必须为 1280px：若下探到 901px，会与上方 ≤1279px 的单栏层重叠，
   在 901~1279px 重新把双栏塞回窄容器，等于复现已修复的断裂缺陷。
   ============================================================ */
@media (orientation:landscape) and (min-width:1280px){
  .functional-inner{flex-direction:row;align-items:stretch;gap:clamp(20px,2.4vw,28px);}
  .panel-left{flex:1 1 auto;min-width:0;width:auto;}
  .panel-right{flex:0 0 auto;width:auto;order:0;}
  .card-stage{
    width:clamp(360px,42vw,520px);height:500px;margin:0 auto;
    transform:none;margin-right:0;margin-bottom:0;animation:none;
  }
  .card-panel{min-height:100%;}
  /* 横屏：数字框与 Connect / Create 按钮同处一行。
     数字框 cells 设为可弹性收缩（flex:0 1 40px，min-width:30px），
     当左侧面板空间不足时优先压缩数字框宽度而非换行；
     仅在极窄（连压缩后都放不下）时才由 flex-wrap 换行，换行后按钮占满整行。 */
  .room-form{flex-wrap:wrap;gap:12px;}
  .code-input{flex:0 1 auto;min-width:0;gap:6px;}
  .code-cell{flex:0 1 40px;min-width:30px;height:42px;font-size:17px;}
  .room-actions{flex:0 0 auto;margin-left:auto;gap:8px;}
  .room-actions .btn{flex:0 1 auto;min-width:120px;height:46px;padding:0 20px;font-size:14px;}
}

/* ============================================================
   图标样式 — 通用文件图标（mask + currentColor 方案）
   ============================================================ */
:root{
  --svg-generic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}


