/* ============================================================
   Syn3Chat modal.css v1.1
   モーダル / シェアカードプレビュー / 汎用ダイアログ
   ============================================================ */

/* ================= 汎用モーダル ================= */
.modal-overlay{
  position:fixed;inset:0;z-index:800;
  background:rgba(15,23,42,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show{display:flex;animation:modalFade .2s ease}
@keyframes modalFade{from{opacity:0}to{opacity:1}}

.modal-card{
  background:#fff;border-radius:16px;max-width:480px;width:100%;
  max-height:90vh;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:modalIn .25s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

.modal-head{
  display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0;
}
.modal-title{flex:1;font:800 15px 'Sora',sans-serif;color:var(--txt)}
.modal-close{
  width:28px;height:28px;border-radius:7px;cursor:pointer;border:none;
  background:rgba(0,0,0,.06);color:var(--txt3);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:all .14s;
}
.modal-close:hover{background:rgba(185,28,28,.1);color:var(--err)}
.modal-body{flex:1;overflow-y:auto;padding:16px 18px;min-height:0}
.modal-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid rgba(0,0,0,.08);justify-content:flex-end;flex-shrink:0}

.modal-btn{padding:8px 16px;border-radius:8px;cursor:pointer;border:none;font:700 12px 'Sora',sans-serif;transition:all .14s}
.modal-btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 3px 10px rgba(14,165,233,.3)}
.modal-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(14,165,233,.45)}
.modal-btn-ghost{background:rgba(0,0,0,.05);color:var(--txt2)}
.modal-btn-ghost:hover{background:rgba(0,0,0,.1)}
.modal-btn-danger{background:rgba(185,28,28,.1);color:var(--err);border:1px solid rgba(185,28,28,.3)}
.modal-btn-danger:hover{background:rgba(185,28,28,.18)}

/* ================= Xシェアカードプレビュー ================= */
.share-preview{
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  border-radius:14px;padding:20px;color:#fff;
  position:relative;overflow:hidden;min-height:220px;
}
.share-preview::before{
  content:'';position:absolute;top:-30%;right:-20%;width:280px;height:280px;
  background:radial-gradient(circle,rgba(249,115,22,.25),transparent 70%);
  pointer-events:none;
}
.share-preview::after{
  content:'';position:absolute;bottom:-30%;left:-20%;width:280px;height:280px;
  background:radial-gradient(circle,rgba(139,92,246,.22),transparent 70%);
  pointer-events:none;
}
.share-logo-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:2}
.share-logo{
  width:32px;height:32px;border-radius:9px;background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;
  font:800 15px 'Sora',sans-serif;color:#fff;
}
.share-logo-text{font:800 16px 'Sora',sans-serif;letter-spacing:-.3px}
.share-logo-text .s3{color:var(--brand-sky)}
.share-logo-text em{color:var(--brand-orange);font-style:normal}
.share-topic{font:800 14px 'Sora',sans-serif;margin-bottom:10px;position:relative;z-index:2;line-height:1.4}
.share-quotes{display:flex;flex-direction:column;gap:6px;position:relative;z-index:2}
.share-quote{background:rgba(255,255,255,.08);border-radius:8px;padding:7px 10px;font-size:11.5px;line-height:1.5;backdrop-filter:blur(4px)}
.share-quote .sq-name{font:800 9px 'JetBrains Mono',monospace;margin-right:6px;letter-spacing:.4px}
.share-quote.sq-claude .sq-name{color:#fb923c}
.share-quote.sq-gpt .sq-name{color:#34d399}
.share-quote.sq-grok .sq-name{color:#a78bfa}
.share-hashtags{margin-top:10px;font:700 10px 'JetBrains Mono',monospace;color:rgba(255,255,255,.7);position:relative;z-index:2}

/* ================= パスワード変更モーダル ================= */
.pw-form-group{margin-bottom:10px}
.pw-form-group label{display:block;font:700 10px 'JetBrains Mono',monospace;color:var(--txt3);margin-bottom:4px}
.pw-form-input{width:100%;padding:8px 10px;border-radius:7px;border:1px solid rgba(0,0,0,.14);font-size:13px;color:var(--txt);outline:none}
.pw-form-input:focus{border-color:var(--brand-sky);box-shadow:0 0 0 3px rgba(14,165,233,.12)}