/* ========== 共用元件（任何模組、任何外殼都能用） ========== */
@layer base {
  *, *::before, *::after { box-sizing:border-box; }
  html, body { height:100%; margin:0; }
  body { background:var(--pg); line-height:1.6; }
  button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  button:disabled { cursor:default; }
  [hidden] { display:none !important; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--acc); outline-offset:2px; }
  svg.i { width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  h1 { font-size:24px; font-weight:400; line-height:1.3; margin:0 0 4px; }
  h2 { font-size:12px; font-weight:400; margin:0; }
  .sub, .hint { color:var(--sub); margin:0 0 12px; }
  .note { margin:14px 4px 0; color:var(--sub); line-height:1.7; }
  .err { color:var(--red); min-height:1.6em; margin-top:6px; }

  /* 卡片、標頭、輸入框 */
  .card { background:#fff; border-radius:20px; padding:14px; box-shadow:var(--card-shadow); display:grid; gap:10px; }
  .phead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 4px 14px; position:relative; }
  .phead .logo { height:36px; width:auto; }
  .phead::after { content:""; position:absolute; right:84px; top:-4px; width:110px; height:24px; transform:rotate(-6deg); opacity:.9; pointer-events:none;
    background:var(--washi); clip-path:var(--washi-clip); }
  .room-sub { color:var(--acc2); background:#fff; border-radius:12px; padding:4px 10px; box-shadow:0 2px 0 var(--line); position:relative; z-index:1; }
  .field-label { color:var(--acc2); }
  input:not([type]), input[type=text] { font:inherit; width:100%; height:44px; padding:0 14px; border-radius:14px; border:1.5px solid var(--line); background:#fff; color:var(--ink); }
  input:not([type]):focus { border-color:var(--acc); outline:none; }

  /* 按鈕（沿用換裝室 .ib / .mbtn） */
  .ib { display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 9px; border-radius:14px; border:1.5px solid var(--line);
    background:#fff; color:var(--ink); gap:4px; grid-auto-flow:column; transition:transform .12s, background .12s, border-color .12s, box-shadow .12s; }
  .ib:hover:not(:disabled) { background:var(--tile); border-color:var(--lav); transform:translateY(-1px); }
  .ib[aria-pressed=true] { background:var(--acc2); border-color:transparent; color:#fff; box-shadow:0 5px 14px rgba(135,133,162,.35); }
  .ib.round { border-radius:50%; width:44px; padding:0; }
  .mbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 18px; border-radius:17px; border:0;
    background:#fff; color:var(--acc2); box-shadow:0 2px 0 var(--line); transition:transform .12s; }
  .mbtn:hover:not(:disabled) { transform:translateY(-2px); }
  .mbtn.pri { background:linear-gradient(135deg, #FF9494, #FFB0A8); color:#fff; box-shadow:0 6px 16px rgba(135,133,162,.4); }
  .mbtn.wide { width:100%; }
  .mbtn:disabled { opacity:.5; }
  .btn-cta { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:50px; padding:0 20px; border-radius:17px; border:0;
    background:linear-gradient(135deg, #FF9494, #FFB0A8); color:#fff; box-shadow:0 6px 16px rgba(135,133,162,.35);
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:transform .12s; }
  .btn-cta:not(:disabled):hover { transform:translateY(-2px); }
  .btn-cta:disabled { opacity:.5; box-shadow:none; }
  .btn-ghost { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 16px; border-radius:14px;
    border:1.5px solid var(--line); background:#fff; color:var(--acc2); }
  .btn-ghost:hover { background:var(--tile); }
  .btn-ghost.sm { height:36px; padding:0 12px; }
  .pill-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
  .pill { height:40px; padding:0 14px; border-radius:14px; border:1.5px solid var(--line); background:#fff; color:var(--ink); transition:transform .12s; }
  .pill:hover:not(:disabled) { transform:translateY(-1px); background:var(--tile); }
  .pill.pri { background:linear-gradient(135deg, #FF9494, #FFB0A8); border-color:transparent; color:#fff; box-shadow:0 5px 14px rgba(255,148,148,.4); }
  .pill[aria-pressed="true"] { background:var(--acc2); border-color:transparent; color:#fff; }
  .pill:disabled:not([aria-pressed="true"]) { opacity:.4; }

  /* 分頁、開關、頭像 */
  .tabs { display:grid; grid-template-columns:repeat(2, 1fr); gap:4px; background:var(--bg1); padding:5px; border-radius:18px; margin:14px 0 12px; }
  .tab { background:none; border:0; border-radius:14px; padding:9px 0; color:var(--sub); transition:background .15s, color .15s; }
  .tab:hover { color:var(--acc2); }
  .tab[aria-selected=true] { background:#fff; color:var(--acc2); box-shadow:0 3px 10px rgba(135,133,162,.18); }
  .tab.bump { animation:bump .6s cubic-bezier(.3,1.6,.5,1); }
  .switch { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
    padding:10px 12px; border:1.5px solid var(--line); background:#fff; border-radius:14px; }
  .switch b { display:block; font-weight:400; }
  .switch small { display:block; color:var(--sub); font-size:12px; line-height:1.5; }
  .switch .knob { width:44px; height:26px; flex:none; border-radius:999px; background:var(--lav); position:relative; transition:background .2s; }
  .switch .knob::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(135,133,162,.35); transition:transform .2s; }
  .switch[aria-checked=true] { border-color:var(--acc); }
  .switch[aria-checked=true] .knob { background:var(--acc); }
  .switch[aria-checked=true] .knob::after { transform:translateX(18px); }
  .av { width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; border:3px solid #fff;
    background:var(--av, var(--acc)); box-shadow:0 4px 12px rgba(135,133,162,.2); font-size:12px; }

  /* 提示泡泡（沿用換裝室 #tip） */
  #tip { position:fixed; z-index:100; pointer-events:none; background:var(--ink); color:#fff; line-height:1.5; padding:6px 11px; border-radius:10px;
    opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; white-space:nowrap; box-shadow:0 6px 18px rgba(78,75,102,.3); --ax:50%; }
  #tip.on { opacity:1; transform:none; }
  #tip::after { content:""; position:absolute; left:var(--ax); bottom:-5px; width:10px; height:10px; background:var(--ink); transform:translateX(-50%) rotate(45deg); border-radius:2px; }
  #tip.below::after { bottom:auto; top:-5px; }

  /* 對話框（沿用換裝室 .ovl / .ibox） */
  .sc3-backdrop { position:fixed; inset:0; z-index:40; background:rgba(78,75,102,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:grid; place-items:center; padding:12px; animation:fadeIn .18s ease-out; }
  .toy-panel { background:var(--pg); color:var(--ink); border-radius:28px; box-shadow:0 30px 80px rgba(78,75,102,.45); max-width:100%;
    animation:bagin .35s cubic-bezier(.2,1.2,.4,1); }

  /* 拍立得（<cm-pola>） */
  cm-pola { display:block; }
  .pola { margin:0; background:var(--paper); padding:10px 10px 0; border-radius:4px; box-shadow:var(--paper-shadow); transform:rotate(var(--tilt, -2deg)); position:relative; }
  .pola-photo { aspect-ratio:16/9; background:var(--tile); overflow:hidden; border-radius:1px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
  .pola-photo img { width:100%; height:100%; object-fit:cover; display:block; image-rendering:pixelated; }
  .pola-strip { min-height:62px; padding:8px 4px 10px; display:grid; align-content:start; gap:2px; }
  .hand { font-family:var(--hand); color:var(--ink); }
  .pola-note { margin:0; font-size:24px; line-height:1.3; overflow-wrap:anywhere; }
  .pola-sign { justify-self:end; color:var(--sub); margin-top:auto; }
  .pola.developing .pola-photo img { animation:develop 3.2s cubic-bezier(.4,.1,.3,1) both; }

  @keyframes fadeIn { from { opacity:0; } }
  @keyframes bagin { 0% { transform:translateY(40px) scale(.94); opacity:0; } 100% { transform:none; opacity:1; } }
  @keyframes bump { 0% { transform:scale(1); } 30% { transform:scale(1.2) rotate(-8deg); } 60% { transform:scale(.94) rotate(6deg); } 100% { transform:none; } }
  @keyframes develop { 0% { filter:brightness(.25) sepia(.6) contrast(.6); } 100% { filter:none; } }
  @keyframes spin { to { transform:rotate(360deg); } }
  @keyframes pop { 0% { transform:scale(1.7); opacity:0; } 35% { opacity:1; } 100% { transform:scale(.92); opacity:.95; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }
}