@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface2: #1e1e1e;
  --border: #2a2a2a;
  --accent: #d63031;
  --accent2: #e74c3c;
  --accent-glow: rgba(214,48,49,.2);
  --gradient: linear-gradient(135deg, #d63031, #e74c3c);
  --text: #f0f0f0;
  --text-secondary: #bbb;
  --muted: #666;
  --success: #10b981;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family:'Zen Kaku Gothic New',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; overflow-x:hidden;
}

.screen { display:none; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

.glass-card {
  background:rgba(20,20,20,.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(214,48,49,.15);
  border-radius:20px; padding:2rem;
}

.btn-primary {
  width:100%; border:none; border-radius:12px; padding:1rem;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:1rem; font-weight:700;
  cursor:pointer; transition:all .2s; color:white;
  background:var(--gradient);
  box-shadow:0 4px 16px var(--accent-glow);
}
.btn-primary:active { transform:scale(.97); opacity:.9; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }

.form-group { margin-bottom:1.25rem; }
.form-label { font-size:.75rem; color:var(--muted); letter-spacing:.05em; margin-bottom:.4rem; display:block; }
.form-input, .form-textarea {
  width:100%; background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:.85rem 1rem; color:var(--text);
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:1rem;
  transition:border-color .2s; outline:none;
}
.form-textarea { resize:vertical; min-height:80px; line-height:1.6; }
.form-input:focus, .form-textarea:focus { border-color:var(--accent); }
.form-hint { font-size:.7rem; color:var(--muted); margin-top:.3rem; }

.lang-toggle { display:flex; gap:.3rem; }
.lang-btn {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:.25rem .55rem;
  font-size:.72rem; font-weight:700; cursor:pointer;
  color:var(--muted); font-family:'Space Mono',monospace; transition:all .15s;
}
.lang-btn.active { background:var(--accent); border-color:var(--accent); color:white; }

/* ── Registration ── */
#screen-register {
  align-items:center; justify-content:center; padding:2rem;
  position:relative; overflow:hidden;
}
#screen-register::before {
  content:''; position:absolute; width:500px; height:500px;
  background:radial-gradient(circle,rgba(214,48,49,.1) 0%,transparent 70%);
  top:-150px; left:-150px; pointer-events:none;
}
#screen-register::after {
  content:''; position:absolute; width:400px; height:400px;
  background:radial-gradient(circle,rgba(231,76,60,.06) 0%,transparent 70%);
  bottom:-100px; right:-100px; pointer-events:none;
}
.register-card { width:100%; max-width:420px; position:relative; z-index:1; }

.logo-block { text-align:center; margin-bottom:2rem; }
.logo-tag {
  font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.2em;
  background:rgba(214,48,49,.1); border:1px solid rgba(214,48,49,.25);
  padding:.25rem .75rem; border-radius:100px; display:inline-block;
  margin-bottom:.75rem; color:var(--accent);
}
.logo-title { font-size:2.2rem; font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--accent); }
.logo-sub { font-size:.8rem; color:var(--muted); margin-top:.5rem; }

.sns-prefix {
  display:flex; align-items:center; background:var(--surface2);
  border:1px solid var(--border); border-radius:10px; padding:.5rem .75rem; gap:.75rem;
}
.sns-icon {
  width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:900; color:white; flex-shrink:0;
  font-family:'Space Mono',monospace;
}
.sns-ig { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.sns-li { background:#0a66c2; }
.sns-x { background:#000; border:1px solid #333; }
.sns-fb { background:#1877f2; }
.sns-prefix input {
  background:none; border:none; padding:.5rem 0; color:var(--text);
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:.85rem; outline:none;
  flex:1; min-width:0;
}

/* ── My Profile ── */
#screen-myprofile { padding:0; }
.profile-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:1rem 1.25rem; position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
}
.profile-header-title { font-size:.95rem; font-weight:900; }

.profile-body {
  padding:1.5rem 1.25rem; display:flex; flex-direction:column;
  align-items:center; gap:1.5rem; flex:1;
}
.profile-card-wrapper {
  width:100%; max-width:360px;
  background:rgba(214,48,49,.04); border:1px solid rgba(214,48,49,.15);
  border-radius:20px; padding:1.5rem; text-align:center;
  position:relative; overflow:hidden;
}
.profile-card-wrapper::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient);
}
.profile-name { font-size:1.4rem; font-weight:900; position:relative; margin-top:.5rem; margin-bottom:.25rem; }
.profile-affiliation { font-size:.82rem; color:var(--muted); position:relative; }
.profile-comment { font-size:.85rem; color:var(--text-secondary); position:relative; margin-top:.75rem; font-style:italic; opacity:.8; }

.qr-display {
  background:white; border-radius:16px; padding:1rem;
  display:inline-block; margin-top:1rem; position:relative;
}

.scan-btn-area { width:100%; max-width:360px; }

.connection-badge {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:1rem; text-align:center; width:100%; max-width:360px;
  cursor:pointer; transition:border-color .2s;
}
.connection-badge:hover { border-color:var(--accent); }
.connection-count {
  font-family:'Space Mono',monospace; font-size:2.5rem;
  font-weight:700; color:var(--accent);
}

/* ── Connections ── */
#screen-connections { padding:0; }
.conn-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:1rem 1.25rem; position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.75rem;
}
.back-btn { background:none; border:none; color:var(--text); font-size:1.2rem; cursor:pointer; padding:.25rem; }
.conn-body { padding:1rem 1.25rem; flex:1; }

.conn-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:1rem; margin-bottom:.75rem;
  cursor:pointer; transition:all .2s; position:relative; overflow:hidden;
}
.conn-card:active { transform:scale(.98); }
.conn-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gradient); border-radius:14px 0 0 14px;
}
.conn-card-name { font-size:.95rem; font-weight:700; margin-bottom:.15rem; padding-left:.75rem; }
.conn-card-affil { font-size:.78rem; color:var(--muted); padding-left:.75rem; }
.conn-card-interests { font-size:.75rem; color:var(--accent); margin-top:.5rem; padding-left:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-empty { text-align:center; color:var(--muted); font-size:.85rem; padding:3rem 1rem; }

/* ── Detail ── */
#screen-detail { padding:0; }
.detail-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:1rem 1.25rem; position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.75rem;
}
.detail-body { padding:1.5rem 1.25rem; }
.detail-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:1.5rem; margin-bottom:1rem;
}
.detail-name { font-size:1.3rem; font-weight:900; margin-bottom:.25rem; }
.detail-affil { font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
.detail-section-title { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem; margin-top:1rem; }
.detail-text { font-size:.88rem; line-height:1.7; }
.detail-comment { font-size:.88rem; font-style:italic; color:var(--text-secondary); margin-top:.5rem; padding:.75rem; background:var(--surface2); border-radius:8px; line-height:1.6; }

.common-interests {
  background:rgba(214,48,49,.06); border:1px solid rgba(214,48,49,.15);
  border-radius:12px; padding:1rem; margin-bottom:1rem;
}
.common-interests-title { font-size:.75rem; font-weight:700; color:var(--accent); margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }

.sns-links { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.sns-link {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1rem; border-radius:100px;
  font-size:.85rem; font-weight:700; text-decoration:none;
  transition:all .2s; color:white;
}
.sns-link:active { transform:scale(.95); }
.sns-link.instagram { background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.sns-link.x { background:#000; border:1px solid #333; }
.sns-link.linkedin { background:#0a66c2; }
.sns-link.facebook { background:#1877f2; }

/* ── Nav ── */
.nav-tab {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--surface); border-top:1px solid var(--border);
  display:none; z-index:20;
}
.nav-tab.visible { display:flex; }
.nav-btn {
  flex:1; padding:.75rem .5rem; background:none; border:none; color:var(--muted);
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:.68rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.2rem; transition:color .2s;
}
.nav-btn.active { color:var(--accent); }
.nav-btn .nav-icon { font-size:1.2rem; }
.has-nav { padding-bottom:70px; }

/* ── Edit ── */
#screen-edit { padding:0; }
.edit-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:1rem 1.25rem; position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.75rem;
}
.edit-body { padding:1.5rem 1.25rem; max-width:420px; margin:0 auto; width:100%; }

/* ── Scanner ── */
.scanner-overlay {
  display:none; position:fixed; inset:0; background:#000; z-index:200;
  flex-direction:column; align-items:center; justify-content:center;
}
.scanner-overlay.open { display:flex; }
.scanner-header {
  position:absolute; top:0; left:0; right:0; padding:1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, rgba(0,0,0,.8), transparent); z-index:10;
}
.scanner-title { font-size:.9rem; font-weight:700; color:white; }
.scanner-close {
  background:rgba(255,255,255,.15); border:none; border-radius:50%;
  width:36px; height:36px; color:white; font-size:1.1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.scanner-viewport { position:relative; width:100%; max-width:400px; }
#scanner-video { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.scanner-frame { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.scanner-box { width:65%; aspect-ratio:1; position:relative; }
.scanner-box::before, .scanner-box::after, .scanner-box .c3, .scanner-box .c4 {
  content:''; position:absolute; width:24px; height:24px; border-color:var(--accent); border-style:solid;
}
.scanner-box::before { top:0; left:0; border-width:3px 0 0 3px; border-radius:4px 0 0 0; }
.scanner-box::after  { top:0; right:0; border-width:3px 3px 0 0; border-radius:0 4px 0 0; }
.scanner-box .c3 { bottom:0; left:0; border-width:0 0 3px 3px; border-radius:0 0 0 4px; }
.scanner-box .c4 { bottom:0; right:0; border-width:0 3px 3px 0; border-radius:0 0 4px 0; }
.scanner-line {
  position:absolute; left:17.5%; right:17.5%; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:scanLine 2s ease-in-out infinite; top:17.5%;
}
@keyframes scanLine { 0%{top:17.5%;opacity:1} 90%{top:82.5%;opacity:1} 100%{top:17.5%;opacity:0} }
.scanner-hint { position:absolute; bottom:0; left:0; right:0; padding:1.5rem 1.25rem 2rem; background:linear-gradient(to top, rgba(0,0,0,.8), transparent); text-align:center; }
.scanner-hint p { font-size:.85rem; color:rgba(255,255,255,.7); }

/* ── Modal ── */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:100;
  align-items:flex-end; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal-sheet {
  background:var(--surface); border-radius:20px 20px 0 0; padding:1.5rem;
  width:100%; max-width:480px; border-top:1px solid var(--border); animation:slideUp .25s ease;
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width:36px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 1.25rem; }

.exchange-success { text-align:center; padding:.5rem 0 1rem; }
.exchange-icon { font-size:3rem; margin-bottom:.5rem; }
.exchange-title { font-size:1.1rem; font-weight:900; margin-bottom:.75rem; }
.exchange-profile { background:var(--surface2); border-radius:12px; padding:1rem; text-align:left; margin-bottom:1rem; }
.exchange-name { font-size:1rem; font-weight:700; margin-bottom:.15rem; }
.exchange-affil { font-size:.8rem; color:var(--muted); }
.exchange-interests { font-size:.8rem; color:var(--accent); margin-top:.5rem; }

/* ── Toast ── */
.toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--accent); color:white; padding:.6rem 1.25rem; border-radius:100px;
  font-size:.85rem; font-weight:700; opacity:0; transition:all .3s; pointer-events:none;
  white-space:nowrap; z-index:300;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.particle {
  position:fixed; pointer-events:none; z-index:150;
  width:8px; height:8px; border-radius:50%;
  animation:particleFly 1s ease-out forwards;
}
@keyframes particleFly { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.animate-in { animation:fadeInUp .4s ease forwards; }