/* ============================================================
   components.css — Modal + Toast
   ============================================================ */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;visibility:hidden}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,40,25,.42);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s}
.modal-panel{
  position:relative;z-index:1;width:100%;max-width:480px;background:var(--surface);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(22px) scale(.97);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.modal.is-open{visibility:visible}
.modal.is-open .modal-backdrop{opacity:1}
.modal.is-open .modal-panel{opacity:1;transform:none}
.modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s}
.modal-close:hover{background:var(--surface-3);color:var(--ink)}
.modal-close svg{width:18px;height:18px}

/* language modal */
.lang-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;text-align:center;letter-spacing:-.02em}
.lang-sub{text-align:center;color:var(--muted);font-size:14.5px;margin:8px 0 30px}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lang-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:30px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s,background .22s;
}
.lang-btn:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-md);background:#fff}
.lang-btn .lang-flag{font-family:'Manrope',sans-serif;font-weight:700;font-size:19px;color:var(--ink)}
.lang-btn .lang-hint{font-size:12px;color:var(--muted)}
.lang-btn .lang-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-strong)}
.lang-btn .lang-ic svg{width:22px;height:22px}

/* video modal */
.video-modal-panel{max-width:920px;padding:0;overflow:hidden;background:var(--ink)}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame video{width:100%;height:100%;object-fit:contain;background:#000}

/* toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:300;
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:500;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}