/* ============================================================
   MEMORINA Stylesheet
   分割元: index.html v1.0 (13,131行版)
   分割日: 2026-04-22
   
   このファイルは元々index.html内の2つの<style>ブロックを
   統合したものです。動作は完全に同一です。
   ============================================================ */

/* ============================================================
   [SECTION 1] メインスタイル（元: index.html 行9〜1133）
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;}
html{touch-action:manipulation;overscroll-behavior:none;-ms-touch-action:manipulation;}
:root{
  --bg:#F0EEFF;
  --gacha-offset:0px;
  --fab-offset:0px;
  --bg2:#E8E4FF;
  --card:#FFFFFF;
  --card2:#F8F6FF;
  --brand:#6C63FF;
  --brand-m:#8B84FF;
  --brand-l:#A89CFF;
  --brand-ll:rgba(108,99,255,0.10);
  --pink:#FF6B9D;
  --teal:#4ECDC4;
  --text:#2D2D3A;
  --sub:#9090A8;
  --border:#E4E2F5;
  --success:#52C77D;
  --gold:#FFD93D;
  /* ─── カスタムフォントパック用変数（デフォルトは既存と同じ） ─── */
  --memo-font:'Hiragino Kaku Gothic ProN','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;
}
body{
  background:linear-gradient(135deg,#C9C3FF 0%,#E8D5FF 50%,#C9E8FF 100%);
  min-height:100vh;display:flex;justify-content:center;align-items:center;
  font-family:'Hiragino Kaku Gothic ProN','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;
}
#frame{
  width:390px;height:844px;
  background:var(--bg);border-radius:50px;
  box-shadow:0 40px 100px rgba(108,99,255,0.3),0 0 0 10px #1a1a2e,0 0 0 12px #2D2D5A;
  overflow:hidden;position:relative;
}
.sb{height:50px;display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px 0;font-size:11px;font-weight:700;color:var(--text);position:relative;z-index:200;}
.sb-icons{display:flex;gap:5px;align-items:center;}
.sb-icons svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}

.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;}
.screen.active{display:flex;overflow:hidden;}

/* ==================== LOADING ==================== */
#loadingScreen{position:absolute;inset:0;z-index:900;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0a0120,#1a0533,#2D1B69);overflow:hidden;}
#loadingScreen.active{display:flex;}
#loadingScreen .loading-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
#loadingScreen .loading-text{font-size:14px;font-weight:700;color:rgba(220,210,255,0.8);
  letter-spacing:3px;margin-top:24px;animation:loadPulse 1.5s ease-in-out infinite;}
@keyframes loadPulse{0%,100%{opacity:0.5;}50%{opacity:1;}}
#loadingScreen .loading-spinner{width:40px;height:40px;border:3px solid rgba(168,156,255,0.2);
  border-top-color:#A89CFF;border-radius:50%;animation:loadSpin 0.8s linear infinite;}
@keyframes loadSpin{to{transform:rotate(360deg);}}

/* ==================== SPLASH ==================== */
#splash{
  background:linear-gradient(160deg,#1a0533 0%,#2D1B69 40%,#4A2088 70%,#7B4FD4 100%);
  align-items:center;justify-content:center;
}
.splash-bg{position:absolute;inset:0;overflow:hidden;}
.splash-orb{position:absolute;border-radius:50%;filter:blur(40px);will-change:transform;animation:orbFloat 4s ease-in-out infinite;contain:strict;}
.orb1{width:200px;height:200px;background:rgba(108,99,255,0.4);top:-50px;left:-50px;animation-delay:0s;}
.orb2{width:150px;height:150px;background:rgba(255,107,157,0.3);bottom:100px;right:-30px;animation-delay:0s;}
.orb3{width:120px;height:120px;background:rgba(78,205,196,0.3);top:200px;right:50px;animation-delay:0s;}
@keyframes orbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-20px);}}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.splash-content{position:relative;z-index:1;text-align:center;animation:splashIn 0.8s ease-out;}
@keyframes splashIn{from{opacity:0;transform:scale(0.8) translateY(20px);}to{opacity:1;transform:none;}}
.splash-logo{font-size:42px;font-weight:900;color:white;letter-spacing:3px;
  text-shadow:0 0 30px rgba(168,156,255,0.8);}
.splash-sub{font-size:15px;color:rgba(255,255,255,0.7);margin-top:4px;letter-spacing:2px;}
.splash-tagline{margin-top:24px;text-align:center;}
.splash-tagline-main{font-size:15px;font-weight:400;color:rgba(255,255,255,0.88);line-height:1.6;letter-spacing:0.5px;}
.splash-tagline-sub{font-size:12px;color:rgba(255,255,255,0.5);margin-top:8px;line-height:1.6;letter-spacing:0.3px;}
.splash-tagline-whisper{font-size:12px;color:rgba(255,255,255,0.5);margin-top:10px;line-height:1.5;letter-spacing:0.8px;font-style:italic;}
.splash-btn{margin-top:48px;background:linear-gradient(135deg,#6C63FF,#A855F7);
  color:white;font-size:17px;font-weight:700;padding:18px 60px;border-radius:50px;
  border:none;cursor:pointer;box-shadow:0 8px 25px rgba(108,99,255,0.5);
  transition:all 0.3s;letter-spacing:1px;width:220px;}
.splash-btn:active{transform:scale(0.96);}
.splash-btn-sub{margin-top:48px;background:rgba(255,255,255,0.15);
  color:white;font-size:13px;font-weight:500;padding:10px 0;border-radius:50px;
  border:1px solid rgba(255,255,255,0.3);cursor:pointer;
  transition:all 0.3s;letter-spacing:0.5px;width:220px;backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);}
.splash-btn-sub:active{transform:scale(0.96);}
.splash-stars{position:absolute;inset:0;pointer-events:none;}
.star{position:absolute;opacity:0.8;animation:twinkle 2s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:0.2;transform:scale(1);}50%{opacity:1;transform:scale(1.2);}}

/* ==================== CELEBRATION OVERLAY ==================== */
#celebrationOverlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  background: linear-gradient(160deg, #0d0120 0%, #1a0533 30%, #2D1B69 60%, #5A2FA0 100%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}
#celebrationOverlay.active { pointer-events: all; }

.celeb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}
.celeb-orb1 { width:220px;height:220px;background:rgba(108,99,255,0.35);top:-60px;left:-60px; }
.celeb-orb2 { width:180px;height:180px;background:rgba(255,107,157,0.25);bottom:80px;right:-40px; }
.celeb-orb3 { width:140px;height:140px;background:rgba(78,205,196,0.25);top:180px;right:30px; }

#celebTwinWrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#celebTwinChar {
  filter: drop-shadow(0 0 0px rgba(168,156,255,0));
  transition: filter 0.5s;
}
#celebTwinChar.glow {
  filter: drop-shadow(0 0 30px rgba(168,156,255,0.9)) drop-shadow(0 0 60px rgba(108,99,255,0.6));
}

#celebMsg {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}
#celebMsg.show { opacity: 1; transform: translateY(0); }

/* Stars layer behind everything */
#celebStars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Sparkle particles raining down */
.celeb-spark {
  position: absolute;
  top: -20px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: celebSparkDrop var(--dur, 1.2s) var(--delay, 0s) ease-in forwards;
  will-change: transform, opacity;
}
@keyframes celebSparkDrop {
  0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)   scale(1); }
  10%  { opacity: 1; }
  80%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateY(var(--fall, 500px)) rotate(var(--rot, 360deg)) scale(0.4); }
}

/* Twin shake animation */
@keyframes celebShake {
  0%,100% { transform: rotate(0deg); }
  15%  { transform: rotate(-10deg) scale(1.05); }
  30%  { transform: rotate( 10deg) scale(1.08); }
  45%  { transform: rotate(-8deg)  scale(1.05); }
  60%  { transform: rotate( 8deg)  scale(1.08); }
  75%  { transform: rotate(-4deg)  scale(1.04); }
  88%  { transform: rotate( 4deg)  scale(1.02); }
}
#celebTwinChar.shake {
  animation: celebShake 0.8s ease-in-out;
}

/* Fade in / out for the whole overlay */
@keyframes celebFadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes celebFadeOut { from { opacity:1; } to { opacity:0; } }
#celebrationOverlay.fade-in  { animation: celebFadeIn  0.4s ease-out forwards; }
#celebrationOverlay.fade-out { animation: celebFadeOut 0.5s ease-in  forwards; }

/* Background ambient pulse */
@keyframes celebPulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.celeb-orb { animation: celebPulse 2s ease-in-out infinite; }

/* Celebration white circle + flare */
#celebCircleOuter {
  position: relative;
  animation: celebFloatLoop 2.2s ease-in-out infinite;
}
@keyframes celebFloatLoop { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

#celebFlare {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  animation: celebFlarePulse 2.2s ease-in-out infinite;
  z-index: 1;
}
@keyframes celebFlarePulse { 0%,100%{opacity:0.45;transform:scale(1);} 50%{opacity:0.8;transform:scale(1.1);} }

#celebCircle {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 50%;
  padding: 22px;
  box-shadow: 0 6px 32px rgba(108,99,255,0.22), 0 2px 12px rgba(255,255,255,0.15);
}
@keyframes celebCirclePulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.13); }
  55%  { transform: scale(1.07); }
  80%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}
#celebCircle.pulse { animation: celebCirclePulse 0.85s ease-in-out; }


/* ── MBTI64 Diagnosis ── */
.mbti-diag-btns{padding:0 20px 8px;display:flex;flex-direction:column;gap:8px;}
.mbti-diag-btn{
  width:100%;padding:14px 16px;border-radius:16px;font-size:13px;font-weight:700;
  font-family:inherit;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all 0.15s;
}
.mbti-diag-btn:active{transform:scale(0.97);}
.mbti-diag-btn-start{
  background:var(--card);color:var(--brand);border:1.5px solid var(--border);
}
.mbti-diag-btn-result{
  background:var(--brand-ll);color:var(--brand);border:1.5px solid rgba(108,99,255,0.2);
}
.mbti-diag-btn svg{flex-shrink:0;}
.mbti-diag-btn .mbti-btn-sub{font-size:10px;font-weight:500;color:var(--sub);margin-left:auto;}
.mbti-lock-label{font-size:10px;color:var(--sub);margin-left:auto;font-weight:500;}

#mbtiDiagScreen{position:absolute;inset:0;z-index:340;display:none;flex-direction:column;overflow:hidden;background:linear-gradient(160deg,#1a0533 0%,#2D1B69 50%,#4A2088 100%);}
#mbtiDiagScreen.active{display:flex;}
#mbtiDiagIntro{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1a0533 0%,#2D1B69 40%,#4A2088 70%,#7B4FD4 100%);
}
.mbti-intro-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.mbti-intro-orb{position:absolute;border-radius:50%;filter:blur(40px);animation:orbFloat 4s ease-in-out infinite;}
.mbti-q-header{padding:0 20px;padding-top:max(16px, calc(env(safe-area-inset-top, 0px) + 8px));display:flex;align-items:center;gap:10px;background:linear-gradient(160deg,#1a0533,#2D1B69);z-index:10;}
.mbti-q-header-title{font-size:14px;font-weight:700;color:rgba(220,210,255,0.9);letter-spacing:1px;}
.mbti-q-header-back{font-size:20px;cursor:pointer;color:rgba(255,255,255,0.7);background:none;border:none;padding:4px 8px;font-family:inherit;}
.mbti-progress-wrap{padding:10px 20px 8px;background:linear-gradient(160deg,#2D1B69,#1a0533);}
.mbti-progress-bar{width:100%;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.mbti-progress-fill{height:100%;border-radius:3px;transition:width 0.6s cubic-bezier(0.4,0,0.2,1);background:linear-gradient(90deg,var(--brand),var(--pink));}
.mbti-progress-label{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--sub);}
.mbti-q-scroll{flex:1;overflow-y:auto;padding:12px 20px 110px;-webkit-overflow-scrolling:touch;}
.mbti-q-card{background:var(--card);border-radius:20px;padding:22px 20px;margin-bottom:14px;border:1px solid var(--border);box-shadow:0 2px 12px rgba(108,99,255,0.06);animation:cardIn 0.3s ease-out both;}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mbti-q-num{font-size:11px;color:var(--brand);font-weight:700;letter-spacing:1.5px;margin-bottom:8px;}
.mbti-q-text{font-size:15px;font-weight:700;line-height:1.65;color:var(--text);margin-bottom:18px;}
.mbti-likert{display:flex;flex-direction:column;gap:7px;}
.mbti-likert-opt{display:flex;align-items:center;gap:12px;background:var(--card2);border:2px solid transparent;border-radius:14px;padding:13px 16px;cursor:pointer;transition:all 0.2s;user-select:none;-webkit-user-select:none;}
.mbti-likert-opt:active{transform:scale(0.97);}
.mbti-likert-opt.selected{border-color:var(--brand);background:var(--brand-ll);}
.mbti-likert-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.mbti-likert-opt.selected .mbti-likert-dot{border-color:var(--brand);background:var(--brand);}
.mbti-likert-opt.selected .mbti-likert-dot::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff;}
.mbti-likert-label{font-size:13px;font-weight:500;color:var(--text);}
.mbti-q-nav{position:absolute;bottom:0;left:0;right:0;padding:16px 20px 24px;background:linear-gradient(transparent,var(--bg) 30%);display:flex;gap:12px;z-index:5;}
.mbti-btn-nav{flex:1;padding:14px;border-radius:16px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:all 0.15s;}
.mbti-btn-prev{background:var(--card);color:var(--sub);border:1px solid var(--border);}
.mbti-btn-next{background:linear-gradient(135deg,var(--brand),#A855F7);color:#fff;box-shadow:0 4px 16px rgba(108,99,255,0.3);}
.mbti-btn-next:disabled{opacity:0.35;cursor:not-allowed;box-shadow:none;}
.mbti-btn-next:active:not(:disabled){transform:scale(0.96);}
.mbti-result-type-card{background:linear-gradient(135deg,#2D1B69,#4A2088);border-radius:24px;padding:32px 24px;text-align:center;box-shadow:0 8px 32px rgba(108,99,255,0.25);margin-bottom:20px;position:relative;overflow:hidden;}
.mbti-result-type-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(108,99,255,0.3),transparent 60%),radial-gradient(circle at 80% 80%,rgba(255,107,157,0.15),transparent 50%);pointer-events:none;}
.mbti-result-code{position:relative;font-size:30px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 0 30px rgba(168,156,255,0.8);}
.mbti-result-title{position:relative;font-size:15px;color:var(--gold);font-weight:700;margin-top:8px;}
.mbti-result-desc{position:relative;font-size:12px;color:rgba(255,255,255,0.6);line-height:1.7;margin-top:12px;}
.mbti-subtype-row{display:flex;gap:8px;margin-top:16px;justify-content:center;position:relative;}
.mbti-subtype-chip{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:10px;padding:6px 14px;font-size:11px;font-weight:600;color:rgba(255,255,255,0.4);}
.mbti-subtype-chip.active{border-color:var(--brand-l);color:#fff;background:rgba(108,99,255,0.3);}
.mbti-axis-row{background:var(--card);border-radius:16px;padding:16px;margin-bottom:10px;border:1px solid var(--border);}
.mbti-axis-labels{display:flex;justify-content:space-between;margin-bottom:8px;}
.mbti-axis-label{font-size:12px;font-weight:700;}
.mbti-axis-label.active{color:var(--brand);}
.mbti-axis-label.inactive{color:var(--sub);opacity:0.45;}
.mbti-axis-bar-bg{height:8px;background:var(--border);border-radius:4px;overflow:hidden;}
.mbti-axis-bar-fill{height:100%;border-radius:4px;transition:width 1s ease-out;}
.mbti-detail-card{background:var(--card);border-radius:16px;padding:18px;margin-bottom:10px;border:1px solid var(--border);}
.mbti-detail-card h4{font-size:13px;font-weight:700;color:var(--brand);margin-bottom:6px;}
.mbti-detail-card p{font-size:12px;color:var(--sub);line-height:1.7;}

#quiz{background:var(--bg);;contain:paint;}
.quiz-header{padding:60px 24px 20px;text-align:center;}
.quiz-progress-bar{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin:0 0 12px;}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--pink));border-radius:3px;transition:width 0.5s cubic-bezier(0.4,0,0.2,1);}
.quiz-step{font-size:12px;color:var(--sub);font-weight:600;letter-spacing:1px;}
.quiz-body{flex:1;padding:0 20px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;}
.quiz-question-card{background:var(--card);border-radius:24px;padding:28px 24px;width:100%;box-shadow:0 4px 20px rgba(108,99,255,0.12);margin-bottom:20px;}
.quiz-q-emoji{font-size:40px;display:block;margin-bottom:12px;text-align:center;height:40px;display:flex;align-items:center;justify-content:center;}
.quiz-q-text{font-size:18px;font-weight:700;color:var(--text);text-align:center;line-height:1.5;}
.quiz-options{contain:layout;width:100%;display:flex;flex-direction:column;gap:12px;padding:0 0 20px;}
.quiz-opt{background:var(--card);border:2px solid var(--border);border-radius:20px;padding:18px 20px;
  cursor:pointer;transition:border-color 0.15s,background 0.15s,transform 0.1s;display:flex;align-items:center;gap:14px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;will-change:auto;}
.quiz-opt:active{transform:scale(0.97);border-color:var(--brand);background:var(--brand-ll);}
.quiz-opt.selected{border-color:var(--brand);background:var(--brand-ll);}
.quiz-opt-icon{font-size:24px;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--brand);}
.quiz-opt-label{font-size:15px;font-weight:700;color:var(--text);}
.quiz-opt-desc{font-size:12px;color:var(--sub);margin-top:2px;}
.quiz-opt:hover{border-color:var(--brand-l);background:var(--brand-ll);}

/* ==================== GENERATING ==================== */
#generating{
  background:linear-gradient(160deg,#1a0533 0%,#2D1B69 50%,#6B3FA0 100%);
  align-items:center;justify-content:center;
}
.gen-content{text-align:center;position:relative;z-index:1;}
.gen-orb-wrap{position:relative;width:180px;height:180px;margin:0 auto 32px;}
.gen-orb{width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--brand-l),var(--brand));
  animation:genPulse 1.5s ease-in-out infinite;
  box-shadow:0 0 60px rgba(108,99,255,0.8),0 0 120px rgba(108,99,255,0.4);}
@keyframes genPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.gen-ring{position:absolute;inset:-20px;border-radius:50%;
  border:3px solid rgba(168,156,255,0.4);animation:genRing 2s linear infinite;}
.gen-ring2{position:absolute;inset:-40px;border-radius:50%;
  border:2px solid rgba(168,156,255,0.2);animation:genRing 2.5s linear infinite reverse;}
@keyframes genRing{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.gen-title{font-size:22px;font-weight:800;color:white;margin-bottom:8px;}
.gen-sub{font-size:14px;color:rgba(255,255,255,0.6);}
.gen-dots{display:flex;gap:6px;justify-content:center;margin-top:16px;}
.gen-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);animation:dotBounce 1.2s ease-in-out infinite;}
.gen-dot:nth-child(2){animation-delay:0.2s;}
.gen-dot:nth-child(3){animation-delay:0.4s;}
@keyframes dotBounce{0%,100%{transform:scale(1);opacity:0.3;}50%{transform:scale(1.4);opacity:1;background:white;}}

/* ==================== REVEAL ==================== */
#reveal{
  background:linear-gradient(160deg,#1a0533 0%,#2D1B69 50%,#6B3FA0 100%);
  align-items:center;justify-content:center;
}
.reveal-card{background:white;backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.2);border-radius:28px;padding:24px 20px;
  text-align:center;width:340px;max-height:88vh;overflow-y:auto;animation:revealIn 0.6s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes revealIn{from{opacity:0;transform:scale(0.5);}to{opacity:1;transform:scale(1);}}
.reveal-tag{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--brand);margin-bottom:8px;}
.reveal-char{margin:4px auto 12px;width:120px;height:120px;}
.reveal-name{font-size:26px;font-weight:900;color:var(--text);margin-bottom:3px;}
.reveal-type{font-size:12px;color:var(--sub);margin-bottom:6px;}
.reveal-desc{font-size:12px;color:var(--sub);line-height:1.5;margin-bottom:12px;}
.reveal-btn{background:linear-gradient(135deg,var(--brand),#A855F7);color:white;
  font-size:15px;font-weight:700;padding:14px 32px;border-radius:50px;border:none;cursor:pointer;
  width:100%;box-shadow:0 8px 25px rgba(108,99,255,0.4);transition:all 0.3s;}
.reveal-btn:active{transform:scale(0.97);}

/* ==================== HOME ==================== */
#home{display:none;}
#home.active{display:flex;flex-direction:column;}
.top-bar{padding:calc(env(safe-area-inset-top, 0px) + 6px) 20px 6px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:10;overflow:visible;}
.top-bar-left{display:flex;flex-direction:column;justify-content:center;}
.tab-title{font-size:13px;font-weight:600;color:var(--sub);}
.top-level{background:linear-gradient(135deg,var(--brand),#A855F7);color:white;
  font-size:11px;font-weight:700;padding:6px 12px;border-radius:20px;letter-spacing:1px;}
/* Settings gear - absolutely positioned inside twin-room */
.settings-abs-btn{position:absolute;top:12px;right:12px;z-index:200;
  background:rgba(255,255,255,0.2);border:none;color:rgba(255,255,255,0.8);cursor:pointer;padding:6px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;}
.settings-abs-btn:hover{background:rgba(255,255,255,0.35);color:white;}
.tab-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;min-height:0;}
.tab-panel{display:none;padding:0 0 calc(80px + env(safe-area-inset-bottom, 0px));}
.tab-panel.active{display:block;}

/* Bottom nav */
.bottom-nav{
  height:auto;flex-shrink:0;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-around;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index:100;
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;padding:8px 16px;border-radius:16px;transition:all 0.25s;flex:1;min-width:0;}
.nav-item.active{background:var(--brand-ll);}
.nav-icon{font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;}
.nav-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;}
.nav-label{font-size:10px;font-weight:700;color:var(--sub);letter-spacing:0.5px;white-space:nowrap;}
.nav-item.active .nav-label{color:var(--brand);}
.nav-item.active .nav-icon{color:var(--brand);}

/* ==================== MEMO TAB ==================== */
.memo-header{padding:0 20px 8px;}
.ai-rec-card{background:linear-gradient(135deg,#F0EEFF,#FFE8F5);border:1px solid var(--border);
  border-radius:20px;padding:16px 18px;margin:0 20px 10px;position:relative;overflow:hidden;}
.ai-rec-card::before{content:'';position:absolute;right:-20px;top:-20px;
  width:80px;height:80px;background:radial-gradient(circle,rgba(108,99,255,0.15),transparent);border-radius:50%;}
.ai-rec-label{font-size:10px;font-weight:700;color:var(--brand);letter-spacing:1px;margin-bottom:4px;}
.ai-rec-label.loading{animation:labelPulse 1.2s ease-in-out infinite;}
@keyframes labelPulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.ai-rec-text{font-size:13px;color:var(--text);line-height:1.5;font-weight:500;transition:opacity 0.3s;}
.ai-rec-sub{font-size:11px;color:var(--sub);margin-top:4px;}
.section-title{font-size:16px;font-weight:800;color:var(--text);padding:0 20px;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;}
.section-badge{background:var(--brand);color:white;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:10px;}
.memo-list{padding:0 24px;display:flex;flex-direction:column;gap:10px;}
.memo-card{background:var(--card);border-radius:18px;padding:16px 18px;
  box-shadow:0 2px 8px rgba(108,99,255,0.1);cursor:pointer;transition:all 0.2s;border-left:4px solid transparent;}
.memo-card:active{transform:scale(0.98);}
.memo-card.type-idea{border-left-color:var(--brand);}
.memo-card.type-feel{border-left-color:var(--pink);}
.memo-card.type-learn{border-left-color:var(--teal);}
.memo-card.type-memo{border-left-color:#64B5F6;}
.memo-card.type-daily{border-left-color:var(--gold);}
.memo-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px;}
.memo-tags{display:flex;gap:5px;flex-wrap:wrap;}
.memo-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;}
.memo-tag.idea{background:#EEEEFF;color:var(--brand);}
.memo-tag.feel{background:#FFE8F0;color:var(--pink);}
.memo-tag.learn{background:#E8FAF9;color:var(--teal);}
.memo-tag.memo{background:#E3F2FD;color:#64B5F6;}
.memo-tag.daily{background:#FFF8E1;color:#F9A825;}
.memo-date{font-size:10px;color:var(--sub);}
.memo-text{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:6px;font-family:var(--memo-font);}
.memo-pts{font-size:11px;color:var(--success);font-weight:700;}
/* ==================== MEMO BOTTOM BAR ==================== */
.memo-bottom-bar{position:absolute;bottom:calc(70px + env(safe-area-inset-bottom, 0px));left:0;right:0;
  display:flex;gap:8px;padding:15px 24px;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);z-index:140;align-items:center;}
.memo-bottom-btn{flex:1;padding:11px 8px;border-radius:14px;border:1.5px solid var(--border);
  background:var(--card);font-size:12px;font-weight:700;color:var(--brand);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;transition:all 0.2s;}
.memo-bottom-btn:active{transform:scale(0.96);}
.memo-bottom-btn-sub{color:var(--sub);}
.fab{position:absolute;bottom:calc(140px + var(--fab-offset));right:20px;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),#A855F7);color:white;
  display:none;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 25px rgba(108,99,255,0.5);transition:all 0.3s;border:none;z-index:150;}
.fab:active{transform:scale(0.9);}

/* ==================== MEMO MODAL ==================== */
.modal-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.5);
  z-index:300;display:none;align-items:flex-end;
}
.modal-overlay.active{display:flex;}
.modal-sheet{background:var(--bg);border-radius:28px 28px 0 0;width:100%;
  padding:20px 20px calc(40px + env(safe-area-inset-bottom, 0px));animation:slideUp 0.35s cubic-bezier(0.4,0,0.2,1);
  /* FIX: 上部切れ防止 — 画面の最大92%までにし、内部スクロールを許可 */
  max-height:92%;overflow-y:auto;-webkit-overflow-scrolling:touch;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:none;}}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px;}
.modal-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:16px;}
.modal-textarea{width:100%;height:250px;background:var(--card);border:2px solid var(--border);
  border-radius:16px;padding:14px 16px;font-size:14px;color:var(--text);
  resize:none;outline:none;font-family:var(--memo-font);line-height:1.6;}
.modal-textarea:focus{border-color:var(--brand);}
.modal-section{margin-top:14px;}
.modal-label{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:1px;margin-bottom:8px;}
.type-pills{display:flex;gap:8px;flex-wrap:wrap;}
.type-pill{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:700;
  cursor:pointer;border:2px solid var(--border);background:var(--card);color:var(--sub);transition:all 0.2s;}
.type-pill.active{color:#fff;}
.type-pill.active[data-type="idea"]{background:var(--brand);border-color:var(--brand);}
.type-pill.active[data-type="feel"]{background:var(--pink);border-color:var(--pink);}
.type-pill.active[data-type="learn"]{background:var(--teal);border-color:var(--teal);}
.type-pill.active[data-type="daily"]{background:#F9A825;border-color:#F9A825;}
.type-pill.active[data-type="memo"]{background:#64B5F6;border-color:#64B5F6;}
.modal-actions{display:flex;gap:10px;margin-top:18px;}
.btn-cancel{flex:1;padding:14px;border-radius:14px;border:2px solid var(--border);
  background:transparent;font-size:14px;font-weight:700;color:var(--sub);cursor:pointer;}
.btn-save{flex:2;padding:14px;border-radius:14px;
  background:linear-gradient(135deg,var(--brand),#A855F7);color:white;
  font-size:14px;font-weight:700;border:none;cursor:pointer;
  box-shadow:0 4px 15px rgba(108,99,255,0.4);}
.btn-save:active{transform:scale(0.97);}
.xp-toast{position:absolute;top:78px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#FF6FAD,#E91E8C);color:white;
  font-size:13px;font-weight:700;padding:12px 20px;border-radius:24px;
  box-shadow:0 6px 20px rgba(233,30,140,0.45);z-index:9999;display:none;
  white-space:normal;text-align:center;max-width:calc(100% - 32px);width:max-content;
  animation:toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(0.9);}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}

/* ==================== TWIN TAB ==================== */
.twin-room{margin:0 20px 12px;border-radius:28px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#E8E3FF 0%,#F5E8FF 50%,#E8F5FF 100%);
  padding:40px 20px 14px;display:flex;flex-direction:column;align-items:center;}
.twin-room-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.room-deco{position:absolute;opacity:0.35;pointer-events:none;}
.room-deco1{top:10px;right:20px;}
.room-deco2{bottom:20px;left:15px;}
.room-deco3{top:30px;left:30px;}
/* outer: handles float animation & positions glow behind the white circle */
.twin-char-outer{position:relative;z-index:1;margin:12px 0 24px;
  animation:twinFloat 3s ease-in-out infinite;}
.twin-char-wrap{position:relative;z-index:2;
  background:white;border-radius:50%;padding:14px;
  box-shadow:0 4px 24px rgba(108,99,255,0.18);}
@keyframes twinFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
/* glow sits BEHIND white circle (z-index 1 < twin-char-wrap z-index 2) */
.twin-glow{position:absolute;inset:-20px;border-radius:50%;
  animation:glowPulse 2s ease-in-out infinite;z-index:1;}
@keyframes glowPulse{0%,100%{opacity:0.4;transform:scale(1);}50%{opacity:0.7;transform:scale(1.05);}}
.twin-char-wrap svg{position:relative;z-index:1;width:130px;height:130px;
  filter:drop-shadow(0 8px 20px rgba(108,99,255,0.3));}
.twin-name{font-size:18px;font-weight:900;color:var(--text);margin-bottom:2px;margin-top:4px;}
.twin-type-badge{background:rgba(108,99,255,0.15);color:var(--brand);
  font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px;
  position:absolute;top:16px;left:20px;z-index:3;}
.twin-xp-section{width:100%;max-width:280px;}
.xp-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.xp-label{font-size:11px;color:var(--sub);font-weight:600;}
.xp-pts{font-size:11px;color:var(--brand);font-weight:700;}
.xp-bar{height:6px;background:rgba(108,99,255,0.15);border-radius:4px;overflow:hidden;}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--pink));
  border-radius:4px;transition:width 1s cubic-bezier(0.4,0,0.2,1);}
.twin-stats{display:flex;gap:8px;margin:10px 0 0;width:100%;}
.twin-stat{flex:1;background:rgba(255,255,255,0.6);border-radius:12px;padding:6px;text-align:center;}
.twin-stat-num{font-size:16px;font-weight:900;color:var(--text);}
.twin-stat-label{font-size:8px;color:var(--sub);font-weight:600;margin-top:0;letter-spacing:0.5px;}
.twin-actions{padding:0 20px;display:flex;gap:10px;margin-bottom:12px;}
.action-btn{flex:1;padding:14px;border-radius:16px;font-size:13px;font-weight:700;
  cursor:pointer;transition:all 0.25s;display:flex;align-items:center;justify-content:center;gap:6px;}
.action-btn:active{transform:scale(0.96);}
.action-btn-primary{background:linear-gradient(135deg,var(--brand),#A855F7);color:white;
  border:none;box-shadow:0 4px 15px rgba(108,99,255,0.35);}
.action-btn-sec{background:var(--card);color:var(--brand);
  border:2px solid var(--border);}
.twin-insight{margin:0 20px 16px;background:var(--card);border-radius:18px;padding:16px 18px;
  box-shadow:0 2px 8px rgba(108,99,255,0.1);}
.insight-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.insight-icon{font-size:20px;}
.insight-title{font-size:14px;font-weight:700;color:var(--text);}
.insight-text{font-size:12px;color:var(--sub);line-height:1.7;}

/* 成長一覧 */
.growth-section{margin:0 20px 24px;}
.growth-section-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.growth-section-title svg{flex-shrink:0;}
.growth-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}
.growth-scroll::-webkit-scrollbar{display:none;}
.growth-card{flex:0 0 110px;background:var(--card);border-radius:16px;padding:12px 8px 10px;
  text-align:center;border:2px solid var(--border);cursor:default;
  transition:transform 0.2s,box-shadow 0.2s;}
.growth-card.active{border-color:var(--brand);box-shadow:0 4px 16px rgba(108,99,255,0.2);}
.growth-card.locked{background:linear-gradient(135deg,#ECECEC,#DEDEDE);border-color:rgba(160,150,180,0.25);}
.growth-card.locked .growth-stage-name{color:rgba(110,100,130,0.8);}
.growth-card.locked .growth-lv{color:rgba(130,120,150,0.75);}
.growth-card.locked .growth-desc{color:rgba(140,130,160,0.65);}
.growth-card.locked .growth-char-wrap{opacity:0.85;}
.growth-char-wrap{width:72px;height:72px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;}
.growth-stage-name{font-size:12px;font-weight:800;color:var(--text);margin-bottom:2px;}
.growth-lv{font-size:10px;color:var(--brand);font-weight:700;margin-bottom:4px;}
.growth-desc{font-size:9.5px;color:var(--sub);line-height:1.5;text-align:left;padding:0 2px;}

/* ツイン入れ替え */
.twin-swap-section{margin:0 20px 24px;}
.twin-swap-btn{width:100%;padding:14px;border-radius:16px;border:1.5px dashed rgba(108,99,255,0.45);background:var(--brand-ll);color:var(--brand);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s;}
.twin-swap-btn:active{transform:scale(0.97);}
.twin-swap-btn svg{flex-shrink:0;}
#twinSwapOverlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:700;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
#twinSwapOverlay.active{display:flex;}
.swap-sheet{background:linear-gradient(180deg,#f5f0ff,#ede5ff);border-radius:24px 24px 0 0;width:100%;max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));animation:slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);}
.swap-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:relative;}
.swap-header-back{font-size:22px;cursor:pointer;color:var(--text);background:none;border:none;padding:4px 8px;font-family:inherit;}
.swap-header-title{font-size:16px;font-weight:800;color:var(--text);}
.swap-body{overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch;}
.swap-desc{font-size:12px;color:var(--sub);line-height:1.6;margin-bottom:14px;text-align:center;}
.swap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.swap-card{background:var(--card);border-radius:16px;padding:12px 10px;text-align:center;border:2px solid var(--border);cursor:pointer;transition:all 0.2s;position:relative;}
.swap-card:active{transform:scale(0.97);}
.swap-card.current{border-color:var(--brand);opacity:0.5;pointer-events:none;}
.swap-card-char{width:64px;height:64px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;}
.swap-card-name{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px;}
.swap-card-type{font-size:10px;color:var(--sub);font-weight:600;margin-bottom:4px;}
.swap-card-lv{font-size:10px;color:var(--brand);font-weight:700;background:var(--brand-ll);border-radius:8px;padding:2px 8px;display:inline-block;}
.swap-card-badge{position:absolute;top:6px;right:6px;font-size:9px;font-weight:700;color:white;background:var(--brand);border-radius:6px;padding:2px 7px;}
.swap-confirm-overlay{position:fixed;inset:0;z-index:370;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px;}
.swap-confirm-card{background:var(--card);border-radius:24px;padding:28px 24px;max-width:320px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);}
.swap-confirm-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:12px;}
.swap-confirm-desc{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:20px;}
.swap-confirm-btns{display:flex;gap:10px;}
.swap-confirm-btns button{flex:1;padding:12px;border-radius:14px;font-size:14px;font-weight:700;border:none;cursor:pointer;}
.swap-confirm-cancel{background:var(--sub-bg);color:var(--text);}
.swap-confirm-ok{background:linear-gradient(135deg,var(--brand),#A855F7);color:white;}

/* Chat modal */
.chat-modal{position:fixed;inset:0;background:var(--bg);z-index:350;
  display:none;flex-direction:column;overflow:hidden;}
.chat-modal.active{display:flex;}
.chat-top{padding:16px 20px;padding-top:max(16px, env(safe-area-inset-top, 16px));display:flex;align-items:center;gap:14px;
  background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;z-index:2;}
.chat-back{font-size:22px;cursor:pointer;color:var(--text);}
.chat-twin-mini{width:40px;height:40px;}
.chat-twin-info{}
.chat-twin-name{font-size:16px;font-weight:800;color:var(--text);}
.chat-twin-status{font-size:11px;color:var(--success);font-weight:600;}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;
  min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.chat-msg{max-width:75%;padding:12px 16px;border-radius:18px;font-size:13px;line-height:1.6;word-break:break-word;}
.chat-msg.twin{background:var(--card);color:var(--text);border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(108,99,255,0.1);align-self:flex-start;max-width:100%;}
.chat-msg.user{background:linear-gradient(135deg,var(--brand),#A855F7);color:white;
  border-bottom-right-radius:4px;align-self:flex-end;}
.chat-typing{display:flex;gap:4px;align-items:center;padding:12px 16px;
  background:var(--card);border-radius:18px;border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(108,99,255,0.1);align-self:flex-start;width:60px;}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--sub);
  animation:typingBounce 1s ease-in-out infinite;}
.typing-dot:nth-child(2){animation-delay:0.15s;}
.typing-dot:nth-child(3){animation-delay:0.3s;}
@keyframes typingBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.chat-input-row{padding:12px 16px;padding-bottom:max(12px, env(safe-area-inset-bottom, 12px));
  background:var(--card);display:flex;gap:10px;
  border-top:1px solid var(--border);flex-shrink:0;z-index:2;}
.chat-input{flex:1;background:var(--bg);border:1.5px solid var(--border);
  border-radius:22px;padding:10px 16px;font-size:13px;color:var(--text);
  outline:none;font-family:inherit;}
.chat-input:focus{border-color:var(--brand);}
.chat-send{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#A855F7);
  color:white;font-size:18px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.chat-top-actions{margin-left:auto;display:flex;gap:8px;}
.chat-top-btn{width:32px;height:32px;border-radius:50%;background:var(--bg);border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sub);}
.chat-top-btn:active{transform:scale(0.9);}
.chat-history-panel{position:fixed;inset:0;z-index:10001;background:var(--bg);display:none;flex-direction:column;}
.chat-history-panel.active{display:flex;}
.chat-history-header{padding:16px 20px;padding-top:max(16px, calc(env(safe-area-inset-top, 0px) + 12px));display:flex;align-items:center;gap:14px;
  background:var(--card);border-bottom:1px solid var(--border);}
.chat-history-title{font-size:16px;font-weight:800;color:var(--text);flex:1;}
.chat-history-list{flex:1;overflow-y:auto;padding:12px 16px;}
.chat-history-item{padding:14px 16px;background:var(--card);border-radius:14px;margin-bottom:8px;
  cursor:pointer;border:1px solid var(--border);transition:all 0.15s;}
.chat-history-item:active{transform:scale(0.98);}
.chat-history-item.current{border-color:var(--brand);background:rgba(108,99,255,0.05);}
.chat-history-item-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-history-item-meta{font-size:11px;color:var(--sub);}
.chat-history-empty{text-align:center;padding:40px 20px;color:var(--sub);font-size:13px;}

/* ==================== ALBUM TAB ==================== */
.album-header{padding:0 0 16px;}
.album-stats-row{display:flex;gap:10px;padding:0 20px 20px;}
.album-stat{flex:1;background:var(--card);border-radius:16px;padding:14px;
  text-align:center;box-shadow:0 2px 8px rgba(108,99,255,0.1);}
.album-stat-num{font-size:22px;font-weight:900;color:var(--brand);}
.album-stat-label{font-size:10px;color:var(--sub);font-weight:600;letter-spacing:0.5px;}
.evolution-timeline{padding:0 20px;}
.evo-item{display:flex;gap:14px;margin-bottom:20px;position:relative;}
.evo-item::before{content:'';position:absolute;left:20px;top:44px;
  width:2px;height:calc(100% - 20px);background:var(--border);}
.evo-item:last-child::before{display:none;}
.evo-dot{width:44px;height:44px;border-radius:50%;background:var(--brand-ll);
  border:3px solid var(--brand);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--brand);}
.evo-dot.current{background:linear-gradient(135deg,var(--brand),var(--pink));border-color:var(--pink);color:white;}
.evo-info{flex:1;padding:8px 0;}
.evo-level{font-size:12px;font-weight:700;color:var(--brand);margin-bottom:2px;}
.evo-date{font-size:11px;color:var(--sub);}
.evo-desc{font-size:13px;color:var(--text);margin-top:4px;font-weight:500;}
.evo-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.album-grid-title{font-size:16px;font-weight:800;color:var(--text);padding:0 20px;margin:4px 0 12px;}
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 20px 20px;}
.album-cell{aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-ll),#FFE8F5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;cursor:pointer;}
.album-cell.unlocked{box-shadow:0 2px 8px rgba(108,99,255,0.15);}
.album-cell.locked{background:var(--border);opacity:0.5;}
.album-cell-char{width:42px;height:42px;}
.album-cell-lv{position:absolute;bottom:4px;right:4px;
  background:rgba(108,99,255,0.7);color:white;font-size:9px;font-weight:700;
  padding:2px 5px;border-radius:6px;}
.rarity-badge{position:absolute;top:3px;left:3px;font-size:8px;font-weight:800;color:white;padding:1px 5px;border-radius:5px;z-index:2;letter-spacing:0.5px;}
.rarity-badge.n{background:rgba(160,160,170,0.8);}
.rarity-badge.r{background:rgba(78,205,196,0.85);}
.rarity-badge.sr{background:rgba(255,170,0,0.9);}
.rarity-badge.ssr{background:linear-gradient(135deg,#FF6B9D,#FF3D7F);}
.album-cell-lock{width:24px;height:24px;color:var(--sub);}


/* ==================== PLAN MODAL ==================== */
#planModal{position:absolute;inset:0;z-index:700;
  background:linear-gradient(160deg,#0a0120 0%,#1a0533 30%,#2D1B69 60%,#5A2FA0 100%);
  display:none;flex-direction:column;overflow:hidden;}
#planModal.open{display:flex;}
.plan-modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 0;flex-shrink:0;}
.plan-modal-title{font-size:22px;font-weight:900;color:white;letter-spacing:1.5px;
  text-shadow:0 0 20px rgba(168,156,255,0.7);}
.plan-modal-close{background:rgba(255,255,255,0.15);border:none;color:rgba(255,255,255,0.7);
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:18px;}

.plan-scroll{flex:1;overflow-y:auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom, 0px));}
.plan-scroll::-webkit-scrollbar{display:none;}

/* ▼ FEAT(2026-04-28): 月額/年額トグル(#1) */
.billing-toggle-wrap{display:flex;justify-content:center;margin-bottom:8px;}
.billing-toggle{display:inline-flex;background:rgba(255,255,255,0.08);border-radius:22px;padding:4px;}
.billing-tab{background:transparent;border:none;color:rgba(255,255,255,0.55);font-size:12px;font-weight:600;
  padding:7px 16px;border-radius:18px;cursor:pointer;transition:all 0.2s;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;}
.billing-tab:active{transform:scale(0.96);}
.billing-tab.active{background:#fff;color:#2D1B69;}
.billing-tab-badge{font-size:9px;background:rgba(78,205,196,0.85);color:#fff;padding:2px 6px;border-radius:10px;font-weight:700;letter-spacing:0.3px;}
.billing-tab.active .billing-tab-badge{background:#4ECDC4;color:#fff;}
.plan-yearly-saving{display:inline-block;font-size:10px;color:#4ECDC4;font-weight:700;margin-left:4px;}

/* プラン比較カード */
.plan-card-wrap{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.plan-card-item{border-radius:20px;padding:18px 16px;position:relative;overflow:hidden;cursor:pointer;
  transition:transform 0.15s;}
.plan-card-item:active{transform:scale(0.98);}
.plan-card-item.plan-free{background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.15);}
.plan-card-item.plan-regular{background:linear-gradient(135deg,rgba(78,205,196,0.15),rgba(43,143,133,0.2));border:1.5px solid rgba(78,205,196,0.35);}
.plan-card-item.plan-pro{background:linear-gradient(135deg,rgba(108,99,255,0.2),rgba(138,78,255,0.25));border:1.5px solid rgba(108,99,255,0.5);}
.plan-card-item.plan-premium{background:linear-gradient(135deg,rgba(255,107,157,0.2),rgba(168,85,247,0.25));border:1.5px solid rgba(255,107,157,0.5);}
.plan-card-item.plan-ultra{background:linear-gradient(135deg,rgba(255,217,61,0.15),rgba(255,149,0,0.2));border:1.5px solid rgba(255,217,61,0.5);}
.plan-card-item.plan-ultra::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 85% 20%,rgba(255,217,61,0.15),transparent 50%);pointer-events:none;}
.plan-card-item.selected-plan{box-shadow:0 0 0 2px white, 0 0 20px rgba(255,255,255,0.2);}

.plan-name-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.plan-name{font-size:17px;font-weight:900;color:white;letter-spacing:0.5px;}
.plan-price{font-size:13px;font-weight:700;color:rgba(255,255,255,0.6);}
.plan-price strong{font-size:18px;font-weight:900;color:white;}
.plan-badge-current{background:rgba(255,255,255,0.25);color:white;font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:20px;letter-spacing:0.5px;}
.plan-badge-popular{background:linear-gradient(135deg,#FFD93D,#FF9500);color:#1a0533;font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:20px;letter-spacing:0.5px;}

.plan-features{display:flex;flex-direction:column;gap:5px;margin-top:10px;}
.plan-feature-row{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,0.8);}
.plan-feature-row .feat-icon{width:16px;height:16px;flex-shrink:0;}
.plan-feature-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.4);flex-shrink:0;}
.plan-select-btn{width:100%;margin-top:12px;padding:11px;border-radius:14px;border:none;
  font-size:13px;font-weight:800;cursor:pointer;letter-spacing:0.5px;}
.plan-free .plan-select-btn{background:rgba(255,255,255,0.15);color:white;}
.plan-regular .plan-select-btn{background:linear-gradient(135deg,#4ECDC4,#2D9CDB);color:white;}
.plan-pro .plan-select-btn{background:linear-gradient(135deg,var(--brand),#A855F7);color:white;}
.plan-premium .plan-select-btn{background:linear-gradient(135deg,#FF6B9D,#A855F7);color:white;}
.plan-ultra .plan-select-btn{background:linear-gradient(135deg,#FFD93D,#FF9500);color:#1a0533;}

/* 機能比較表 */
.plan-compare-table{background:rgba(255,255,255,0.06);border-radius:18px;overflow:hidden;margin-top:8px;}
.plan-table-header{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:0;
  background:rgba(255,255,255,0.1);padding:10px 4px;}
.plan-table-header div{font-size:9px;font-weight:800;color:rgba(255,255,255,0.7);
  text-align:center;letter-spacing:0.3px;}
.plan-table-header div:first-child{text-align:left;padding-left:10px;}
.plan-table-row{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:0;
  padding:9px 4px;border-top:1px solid rgba(255,255,255,0.06);}
.plan-table-row div{font-size:10px;color:rgba(255,255,255,0.65);text-align:center;
  display:flex;align-items:center;justify-content:center;}
.plan-table-row div:first-child{font-size:11px;font-weight:600;color:rgba(255,255,255,0.85);
  text-align:left;justify-content:flex-start;padding-left:10px;}
.feat-check{color:#4ECDC4;font-size:14px;font-weight:900;}
.feat-dash{color:rgba(255,255,255,0.2);font-size:16px;}
.feat-val{font-size:10px;color:rgba(255,255,255,0.7);font-weight:700;}

/* bg stars */
.plan-modal-stars{position:absolute;inset:0;z-index:0;pointer-events:none;}
.plan-modal-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;}

/* ==================== NOTIFICATIONS & REQUEST FLOW ==================== */
.notif-banner{margin:0 20px 14px;border-radius:16px;overflow:hidden;}
.notif-item{background:linear-gradient(135deg,#FFF0F8,#F0F0FF);border:1.5px solid rgba(168,85,247,0.2);
  border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;}
.notif-dot{width:10px;height:10px;border-radius:50%;background:var(--pink);flex-shrink:0;
  box-shadow:0 0 6px rgba(255,107,157,0.6);animation:dotPulse 1.5s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:0.7;}}
.notif-text{flex:1;font-size:13px;font-weight:600;color:var(--text);line-height:1.4;}
.notif-sub{font-size:11px;color:var(--sub);margin-top:1px;}
.notif-badge{background:var(--pink);color:white;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:10px;flex-shrink:0;}

/* フレンズタブ 通知バッジ */
.nav-badge{position:absolute;top:-2px;right:-2px;background:var(--pink);color:white;
  font-size:9px;font-weight:800;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center;}

/* ステップ表示 */
.step-row{display:flex;align-items:center;gap:0;margin-bottom:20px;padding:0 8px;}
.step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;}
.step-circle.done{background:var(--brand);color:white;}
.step-circle.active{background:linear-gradient(135deg,var(--brand),#A855F7);color:white;
  box-shadow:0 0 10px rgba(108,99,255,0.4);}
.step-circle.wait{background:var(--border);color:var(--sub);}
.step-line{flex:1;height:2px;}
.step-line.done{background:var(--brand);}
.step-line.wait{background:var(--border);}
.step-label{font-size:10px;color:var(--sub);text-align:center;margin-top:3px;}

/* Exchange offer card */
.offer-card{background:linear-gradient(135deg,var(--brand-ll),rgba(255,107,157,0.08));
  border-radius:16px;padding:16px;text-align:center;border:1.5px solid rgba(108,99,255,0.15);}
.offer-sticker-wrap{width:64px;height:64px;border-radius:50%;background:white;
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px;
  box-shadow:0 4px 14px rgba(108,99,255,0.15);}
.offer-name{font-size:13px;font-weight:700;color:var(--text);}
.offer-rarity{font-size:11px;color:var(--brand);font-weight:600;}
.offer-arrow{font-size:22px;color:var(--sub);line-height:1;}

/* Inbox overlay (simulating the other side) */
.inbox-overlay{position:absolute;inset:0;background:rgba(13,1,32,0.75);z-index:900;
  display:flex;flex-direction:column;justify-content:flex-end;
  animation:fadeInUp 0.3s ease-out;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.inbox-sheet{background:white;border-radius:28px 28px 0 0;padding:24px 20px calc(40px + env(safe-area-inset-bottom, 0px));max-height:78%;}
.inbox-pill{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px;}
.inbox-perspective{font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--sub);margin-bottom:12px;text-align:center;}

/* ==================== GACHA CARD (Twin Tab) ==================== */
@keyframes flare{0%,100%{opacity:0.6;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
.gacha-machine-clip{
  clip-path: path('M 8,158 C 2,155 0,148 0,140 L 0,85 C 0,80 2,76 6,74 L 6,50 C 6,22 28,0 56,0 C 84,0 106,22 106,50 L 106,74 C 110,76 112,80 112,85 L 112,140 C 112,148 110,155 104,158 Z');
  width:112px;height:160px;
}
.gacha-card{margin:0 24px 16px;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,#1a0533,#2D1B69,#5A2FA0);
  padding:20px 18px;position:relative;cursor:pointer;}
.gacha-card::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 30%,rgba(255,107,157,0.2),transparent 60%),
             radial-gradient(circle at 20% 70%,rgba(108,99,255,0.3),transparent 55%);
  pointer-events:none;}
.gacha-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.gacha-title{font-size:15px;font-weight:800;color:white;letter-spacing:1px;
  text-shadow:0 0 12px rgba(168,156,255,0.8);}
.orb-badge{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.15);
  border-radius:20px;padding:5px 10px;}
.orb-icon{width:16px;height:16px;}
.orb-count{font-size:13px;font-weight:800;color:#FFD93D;}
.gacha-desc{font-size:12px;color:rgba(255,255,255,0.7);line-height:1.5;margin-bottom:14px;}
.gacha-machine-row{display:flex;align-items:center;gap:12px;}
.gacha-machine-svg{flex-shrink:0;}
.gacha-recent-stickers{display:flex;gap:6px;flex-wrap:wrap;}
.gacha-recent-item{width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;}
.gacha-btn{position:absolute;bottom:16px;right:16px;
  background:linear-gradient(135deg,#FFD93D,#FF9500);
  color:#1a0533;font-size:12px;font-weight:800;padding:8px 16px;
  border-radius:20px;border:none;cursor:pointer;
  box-shadow:0 4px 14px rgba(255,217,61,0.5);letter-spacing:0.5px;}
.gacha-btn:disabled{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.4);
  box-shadow:none;cursor:not-allowed;}

/* ==================== STICKER BOOK (Album Tab) ==================== */
.sticker-book-section{margin:0 24px 20px;cursor:pointer;}
.sticker-book-card{background:linear-gradient(135deg,#FFF8F0,#FFF0F5,#F0F0FF);
  border-radius:20px;padding:16px;position:relative;overflow:hidden;
  border:2px solid rgba(255,150,100,0.2);
  box-shadow:0 4px 16px rgba(255,107,157,0.12);}
.sticker-book-card::before{content:'✦';position:absolute;top:10px;right:14px;
  font-size:18px;opacity:0.3;color:var(--brand);}
.sticker-book-title{font-size:14px;font-weight:800;color:var(--text);
  margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.sticker-book-subtitle{font-size:11px;color:var(--sub);margin-bottom:12px;}
.sticker-preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.sticker-preview-cell{aspect-ratio:1;border-radius:10px;
  background:rgba(108,99,255,0.08);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;overflow:hidden;}
.sticker-preview-cell.empty{border:1.5px dashed rgba(108,99,255,0.2);
  background:transparent;}
.sticker-book-locked{background:linear-gradient(135deg,var(--card2),var(--bg2));
  border-radius:20px;padding:16px 18px;text-align:center;
  border:2px dashed var(--border);}
.sticker-book-locked-icon{font-size:28px;margin-bottom:8px;}
.sticker-book-locked-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
.sticker-book-locked-desc{font-size:11px;color:var(--sub);line-height:1.5;}
.sticker-book-locked-plan{display:inline-block;margin-top:10px;
  background:linear-gradient(135deg,var(--brand),#A855F7);
  color:white;font-size:11px;font-weight:700;padding:6px 16px;
  border-radius:20px;cursor:pointer;}


/* ==================== RING NOTEBOOK EDITOR ==================== */
#stickerBookModal .modal-sheet{padding:0;border-radius:28px 28px 0 0;overflow:hidden;max-height:94%;}
.sb-editor-wrap{display:flex;flex-direction:column;height:100%;max-height:94vh;}
.sb-editor-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;flex-shrink:0;border-bottom:1px solid var(--border);}
.sb-page-nav{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub);}
.sb-page-nav button{background:var(--card);border:1.5px solid var(--border);border-radius:8px;
  padding:4px 10px;font-size:11px;font-weight:700;color:var(--text);cursor:pointer;}
.sb-pages-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  flex-shrink:0;padding:16px 16px 12px;gap:12px;
  scrollbar-width:none;}
.sb-pages-scroll::-webkit-scrollbar{display:none;}
#sbPreviewScroll::-webkit-scrollbar{display:none;}
.sb-notebook-page{flex-shrink:0;scroll-snap-align:start;
  display:flex;width:calc(100vw - 32px);max-width:340px;
  height:260px;border-radius:4px 16px 16px 4px;
  box-shadow:4px 4px 16px rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.sb-rings{width:28px;flex-shrink:0;background:linear-gradient(180deg,#e8e0d0,#d4c8b8);
  display:flex;flex-direction:column;align-items:center;justify-content:space-around;
  padding:10px 0;border-radius:4px 0 0 4px;
  box-shadow:inset -3px 0 6px rgba(0,0,0,0.1);}
.sb-ring{width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#c8c0b0,#a09080);
  border:2px solid #888;box-shadow:0 1px 3px rgba(0,0,0,0.2);
  position:relative;}
.sb-ring::after{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;
  border-radius:50%;background:linear-gradient(135deg,#f0e8d8,#e0d0c0);}
.sb-page-canvas{flex:1;position:relative;overflow:hidden;
  background:#FFFDF5;}
.sb-sticker-item{position:absolute;cursor:grab;touch-action:none;user-select:none;
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;transition:transform 0.1s;}
.sb-sticker-item:active{cursor:grabbing;}
.sb-sticker-item.dragging{opacity:0.85;transform:scale(1.12);z-index:100;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  transition:none;will-change:transform;-webkit-backface-visibility:hidden;}
.sb-sticker-delete{position:absolute;top:-8px;right:-8px;width:18px;height:18px;
  border-radius:50%;background:#ff4466;color:white;border:none;cursor:pointer;
  font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;
  line-height:1;z-index:10;}
.sb-sticker-item:hover .sb-sticker-delete{display:flex;}
.sb-inventory-area{flex:1;overflow-y:auto;padding:0 16px 16px;}
.sb-inventory-area::-webkit-scrollbar{display:none;}
.sb-inv-label{font-size:12px;font-weight:700;color:var(--sub);margin:10px 0 8px;}
#stickerInventoryGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;}
.sb-inv-cell{aspect-ratio:1;border-radius:12px;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;border:1.5px solid var(--border);position:relative;
  transition:transform 0.1s;}
.sb-inv-cell:active{transform:scale(0.92);}
.sb-inv-badge{position:absolute;bottom:3px;right:3px;background:var(--brand);
  color:white;font-size:8px;font-weight:700;padding:1px 4px;border-radius:5px;}
/* シール帳プレビュー（プロフィール用）*/
.sb-profile-preview{border-radius:14px;overflow:hidden;margin-top:10px;
  border:1.5px solid var(--border);}
.sb-profile-page{display:flex;height:160px;}
.sb-profile-rings{width:16px;background:linear-gradient(180deg,#e8e0d0,#d4c8b8);
  display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:8px 0;}
.sb-profile-ring{width:10px;height:10px;border-radius:50%;
  background:#b0a090;border:1.5px solid #888;}
.sb-profile-canvas{flex:1;position:relative;
  background:#FFFDF5;}
.sb-profile-sticker{position:absolute;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;}
/* ==================== EXCHANGE BUTTON ==================== */
.exchange-btn{background:linear-gradient(135deg,#A855F7,var(--brand));color:white;
  font-size:12px;font-weight:700;padding:7px 11px;border-radius:12px;
  border:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 3px 10px rgba(168,85,247,0.35);flex-shrink:0;}
.exchange-btn:active{transform:scale(0.94);}
.exchange-btn.done{background:var(--border);color:var(--sub);box-shadow:none;}

/* ==================== GACHA OVERLAY ==================== */
#gachaOverlay{position:absolute;inset:0;z-index:600;display:none;background:transparent;overflow:hidden;}
#gachaOverlay.open{display:block;}
.gacha-overlay-stars{position:absolute;inset:0;pointer-events:none;z-index:0;}
.gacha-overlay-orbs{position:absolute;inset:0;pointer-events:none;}
.gacha-orb-bg{position:absolute;border-radius:50%;filter:blur(50px);}
.gacha-orb-bg1{width:200px;height:200px;background:rgba(108,99,255,0.4);top:-60px;left:-50px;}
.gacha-orb-bg2{width:160px;height:160px;background:rgba(255,107,157,0.3);bottom:60px;right:-40px;}
.gacha-orb-bg3{width:120px;height:120px;background:rgba(78,205,196,0.25);top:160px;right:20px;}
.gacha-content{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:20px;width:100%;padding:0 24px;}
.gacha-machine-wrap{position:relative;}
.gacha-turn-btn{background:linear-gradient(135deg,#FFD93D,#FF9500);
  color:#1a0533;font-size:16px;font-weight:800;padding:16px 48px;
  border-radius:50px;border:none;cursor:pointer;
  box-shadow:0 8px 28px rgba(255,217,61,0.5);letter-spacing:1px;
  transition:all 0.2s;}
.gacha-turn-btn:active{transform:scale(0.96);}
.gacha-turn-btn:disabled{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.4);
  box-shadow:none;cursor:not-allowed;}
.gacha-orb-count-row{display:flex;align-items:center;gap:8px;}
.gacha-orb-count-label{font-size:12px;color:rgba(255,255,255,0.6);}
.gacha-orb-count-num{font-size:20px;font-weight:900;color:#FFD93D;}
.gacha-orb-count-icon{width:20px;height:20px;}
.gacha-close-btn{position:absolute;top:16px;right:16px;z-index:10;
  background:rgba(255,255,255,0.15);border:none;color:rgba(255,255,255,0.7);
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:18px;}

/* Ball roll + reveal animation */
@keyframes ballDrop{0%{transform:translateY(-80px) scale(0.5);opacity:0;}
  60%{transform:translateY(6px) scale(1.1);}100%{transform:translateY(0) scale(1);opacity:1;}}
@keyframes ballShine{0%,100%{filter:brightness(1);}50%{filter:brightness(1.6) saturate(1.3);}}
@keyframes stickerReveal{0%{transform:scale(0) rotate(-20deg);opacity:0;}
  60%{transform:scale(1.15) rotate(4deg);opacity:1;}
  80%{transform:scale(0.95) rotate(-2deg);}
  100%{transform:scale(1) rotate(0deg);opacity:1;}}
.gacha-ball{width:100px;height:100px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.6),transparent 50%),
             linear-gradient(135deg,var(--ball-c1,#A89CFF),var(--ball-c2,#6C63FF));
  box-shadow:0 8px 30px rgba(108,99,255,0.6),inset 0 -4px 12px rgba(0,0,0,0.2);
  animation:ballDrop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards,
            ballShine 1.5s ease-in-out 0.8s infinite;
  display:flex;align-items:center;justify-content:center;position:relative;}
.gacha-sticker-reveal{animation:stickerReveal 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;
  display:flex;flex-direction:column;align-items:center;gap:10px;}
.gacha-sticker-svg-wrap{width:130px;height:130px;background:white;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(255,255,255,0.4),0 8px 32px rgba(0,0,0,0.25);}
.gacha-sticker-name{font-size:16px;font-weight:800;color:white;letter-spacing:1px;}
.gacha-sticker-rarity{font-size:12px;color:#FFD93D;font-weight:600;}
/* ガチャエッグ */
.gacha-egg-wrap{position:relative;width:180px;height:180px;margin:0 auto;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.gacha-egg-wrap svg{filter:drop-shadow(0 12px 32px rgba(0,0,0,0.4));transition:transform 0.15s;}
.gacha-egg-wrap:hover svg{transform:scale(1.06);}
@keyframes eggShake{0%,100%{transform:rotate(0deg) scale(1)}20%{transform:rotate(-12deg) scale(1.05)}40%{transform:rotate(12deg) scale(1.05)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}
.egg-shaking svg{animation:eggShake 0.5s ease-in-out;}
@keyframes eggPop{0%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(0.85)}100%{transform:scale(0) rotate(180deg);opacity:0;}}
.egg-popping svg{animation:eggPop 0.45s cubic-bezier(0.36,0.07,0.19,0.97) forwards;}
.gacha-add-btn{background:rgba(255,255,255,0.2);color:white;border:1.5px solid rgba(255,255,255,0.4);
  font-size:14px;font-weight:700;padding:12px 32px;border-radius:30px;cursor:pointer;
  margin-top:8px;transition:all 0.2s;}
.gacha-add-btn:hover{background:rgba(255,255,255,0.3);}

/* ==================== SOCIAL TAB ==================== */
.social-hero{margin:0 20px 16px;background:linear-gradient(135deg,var(--brand),#A855F7);
  border-radius:24px;padding:20px;color:white;text-align:center;position:relative;overflow:hidden;}
.social-hero-title{font-size:18px;font-weight:800;margin-bottom:4px;}
.social-hero-sub{font-size:12px;opacity:0.8;}
.social-hero-btn{background:rgba(255,255,255,0.25);color:white;border:1.5px solid rgba(255,255,255,0.4);
  font-size:12px;font-weight:700;padding:8px 20px;border-radius:20px;cursor:pointer;
  display:inline-block;margin-top:12px;letter-spacing:0.5px;}
.friends-list{padding:0 20px;display:flex;flex-direction:column;gap:10px;}
.friend-card{background:var(--card);border-radius:18px;padding:14px 16px;
  box-shadow:0 2px 8px rgba(108,99,255,0.1);display:flex;align-items:center;gap:14px;}
.friend-twin-mini{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-ll),#FFE8F5);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.friend-twin-mini svg{width:46px;height:46px;}
.friend-info{flex:1;}
.friend-name{font-size:15px;font-weight:700;color:var(--text);}
.friend-twin-name{font-size:12px;color:var(--sub);}
.friend-level{font-size:11px;color:var(--brand);font-weight:600;margin-top:2px;}
.heart-btn{background:linear-gradient(135deg,var(--pink),#FF4B7F);color:white;
  font-size:13px;font-weight:700;padding:8px 14px;border-radius:14px;
  border:none;cursor:pointer;white-space:nowrap;box-shadow:0 3px 10px rgba(255,107,157,0.35);}
.heart-btn:active{transform:scale(0.94);}
.heart-btn.sent{background:var(--border);color:var(--sub);box-shadow:none;}
.sns-section{margin:16px 20px;background:var(--card);border-radius:18px;padding:16px 18px;
  box-shadow:0 2px 8px rgba(108,99,255,0.1);}
.sns-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;}
.sns-desc{font-size:12px;color:var(--sub);line-height:1.5;margin-bottom:12px;}
.sns-actions{display:flex;gap:8px;}
.sns-btn{flex:1;padding:10px 0;border-radius:12px;font-size:12px;font-weight:700;
  cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:5px;}
.sns-x{background:#1a1a1a;color:white;}
.sns-ig{background:linear-gradient(135deg,#833AB4,#FD1D1D,#FCB045);color:white;}
.sns-tk{background:#000;color:white;}

/* Level up modal */
.levelup-overlay{position:absolute;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0d0120 0%,#1a0533 30%,#2D1B69 60%,#4A2088 100%);}
.levelup-overlay.active{display:flex;}
/* 通常 card */
.levelup-card{position:relative;text-align:center;width:290px;z-index:2;animation:levelUpPop 0.5s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes levelUpPop{from{opacity:0;transform:scale(0.6);}to{opacity:1;transform:none;}}
/* スペシャル card */
.levelup-card-special{position:relative;text-align:center;width:310px;z-index:2;animation:levelUpPop 0.6s cubic-bezier(0.34,1.56,0.64,1);}
/* 星空レイヤー */
.levelup-stars{position:absolute;inset:0;pointer-events:none;z-index:1;}
/* キャラ白丸 */
.levelup-char-outer{position:relative;display:inline-block;margin-bottom:20px;}
.levelup-char-flare{position:absolute;inset:-24px;border-radius:50%;animation:celebFlarePulse 2s ease-in-out infinite;z-index:1;}
.levelup-char-circle{position:relative;z-index:2;background:white;border-radius:50%;padding:20px;
  box-shadow:0 6px 32px rgba(108,99,255,0.28),0 2px 12px rgba(255,255,255,0.15);}
/* フレア片 */
.levelup-flare-wrap{position:absolute;inset:-60px;pointer-events:none;z-index:0;}
.levelup-lv{font-size:13px;font-weight:800;color:#FF6FAD;letter-spacing:2px;margin-bottom:8px;}
.levelup-msg{font-size:20px;font-weight:900;color:white;margin-bottom:24px;line-height:1.4;
  text-shadow:0 0 20px rgba(168,156,255,0.6);}
.levelup-btn-pink{width:100%;padding:15px;border-radius:50px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#FF6FAD,#E91E8C);color:white;
  font-size:16px;font-weight:800;box-shadow:0 6px 20px rgba(233,30,140,0.4);letter-spacing:0.5px;}
/* キラキラ */
@keyframes luFlicker{0%,100%{opacity:0;transform:scale(0.5);}50%{opacity:1;transform:scale(1.2);}}

/* Settings Modal */
.settings-modal{position:absolute;inset:0;background:rgba(0,0,0,0.6);z-index:400;
  display:none;align-items:flex-end;}
.settings-modal.active{display:flex;}
.settings-sheet{background:var(--bg);border-radius:28px 28px 0 0;width:100%;
  padding:20px 20px calc(40px + env(safe-area-inset-bottom, 0px));animation:slideUp 0.35s cubic-bezier(0.4,0,0.2,1);}
.settings-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px;}
.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.settings-title{font-size:20px;font-weight:800;color:var(--text);}
.settings-close{background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;}
.settings-section{margin-bottom:24px;}
.settings-section-title{font-size:13px;font-weight:700;color:var(--brand);letter-spacing:1px;margin-bottom:12px;text-transform:uppercase;}
.settings-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}
.settings-item:last-child{border-bottom:none;}
.settings-item-label{font-size:14px;color:var(--text);font-weight:600;}
.settings-item-value{font-size:13px;color:var(--sub);}
.settings-radio-group{display:flex;flex-direction:column;gap:10px;}
.settings-radio{display:flex;align-items:center;gap:10px;cursor:pointer;}
.settings-radio input{cursor:pointer;}
.settings-radio-label{font-size:13px;color:var(--text);cursor:pointer;}
.settings-logout-btn{width:100%;background:var(--card);border:2px solid var(--border);
  color:var(--text);font-size:14px;font-weight:700;padding:14px;border-radius:14px;
  cursor:pointer;margin-top:20px;}

@media(max-width:500px){
  body{align-items:flex-start;overflow:hidden;height:100vh;height:100dvh;}
  #frame{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none;position:fixed;inset:0;}
}
@media(display-mode:standalone){
  :root{--gacha-offset:20px;--fab-offset:24px;}
  #frame{position:fixed;inset:0;width:100%;height:100%;}
  .screen{position:absolute;inset:0;}
}
.tab-content::-webkit-scrollbar,.chat-messages::-webkit-scrollbar{width:3px;}
.tab-content::-webkit-scrollbar-thumb,.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
/* A2HS Install Banner */
#a2hsBanner{position:absolute;bottom:80px;left:16px;right:16px;z-index:9999;
  background:linear-gradient(135deg,#6C63FF,#A855F7);color:#fff;border-radius:18px;
  padding:16px 18px;display:none;align-items:center;gap:14px;
  box-shadow:0 8px 30px rgba(108,99,255,0.4);animation:a2hsSlide 0.4s ease-out;}
@keyframes a2hsSlide{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
#a2hsBanner .a2hs-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;}
#a2hsBanner .a2hs-body{flex:1;min-width:0;}
#a2hsBanner .a2hs-title{font-size:14px;font-weight:800;letter-spacing:0.5px;}
#a2hsBanner .a2hs-desc{font-size:11px;opacity:0.85;margin-top:2px;line-height:1.4;}
#a2hsBanner .a2hs-btn{background:#fff;color:#6C63FF;font-size:12px;font-weight:800;
  border:none;border-radius:50px;padding:8px 16px;cursor:pointer;flex-shrink:0;white-space:nowrap;}
#a2hsBanner .a2hs-close{position:absolute;top:8px;right:10px;background:none;border:none;
  color:rgba(255,255,255,0.6);font-size:18px;cursor:pointer;line-height:1;}


/* ============================================================
   [SECTION 2] チュートリアルオーバーレイ（元: index.html 行2921〜3094）
   ============================================================ */

  #tutorialOverlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    display: none;
  }
  #tutorialOverlay.active { display: block; }
  /* タップブロッカー：対象要素以外へのタップを吸収する透明レイヤー
     対象要素の上下左右に4枚配置することで、穴の位置だけタップが通る仕組み */
  .tut-tap-blocker {
    position: fixed;
    background: transparent;
    pointer-events: auto;
    z-index: 9002;
  }
  /* SVGマスク暗幕：画面全体を覆い、対象形状でくり抜く（視覚のみ） */
  .tut-svg-mask {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9001;
  }
  /* ハイライトリング（デフォルト：正円） */
  /* transition は削除：ステップ間で位置が滑らかに動くサーチライト効果を止めるため
     現在のステップの対象位置に瞬間的に配置される（パルスアニメは維持） */
  .tut-highlight-ring {
    position: fixed;
    border: 3px solid var(--brand, #6C63FF);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.3), 0 0 24px rgba(108, 99, 255, 0.6);
    pointer-events: none;
    z-index: 9002;
    animation: tutPulse 1.8s ease-in-out infinite;
  }
  /* 角丸四角モード（ボタン向け） */
  .tut-highlight-ring.rounded-rect {
    border-radius: 16px;
  }
  @keyframes tutPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.3), 0 0 24px rgba(108, 99, 255, 0.6); }
    50%       { box-shadow: 0 0 0 10px rgba(108, 99, 255, 0.15), 0 0 32px rgba(108, 99, 255, 0.8); }
  }
  .tut-bubble {
    position: fixed;
    z-index: 9003;
    background: #fff;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    max-width: 280px;
    animation: tutFadeIn 0.4s ease-out;
  }
  @keyframes tutFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tut-bubble-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text, #1a1a1a);
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .tut-bubble-sub {
    font-size: 13px;
    color: var(--sub, #666);
    line-height: 1.6;
  }
  .tut-bubble-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand, #6C63FF), #A855F7);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    width: 100%;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3);
  }
  .tut-bubble-step {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand, #6C63FF);
    background: rgba(108, 99, 255, 0.12);
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .tut-bubble.arrow-down::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
  }
  .tut-bubble.arrow-up::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
  }
  #tutorialComplete {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  #tutorialComplete.active { display: flex; }
  .tut-complete-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px 24px 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    animation: tutFadeIn 0.4s ease-out;
  }
  .tut-complete-emoji {
    font-size: 56px;
    margin-bottom: 12px;
    display: inline-block;
    animation: tutBounce 1.2s ease-in-out infinite;
  }
  @keyframes tutBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .tut-complete-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text, #1a1a1a);
    margin-bottom: 8px;
  }
  .tut-complete-text {
    font-size: 14px;
    color: var(--sub, #666);
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .tut-complete-btn {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand, #6C63FF), #A855F7);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
  }

/* ============================================================
   7日オンボーディングワークショップ
   FEAT(2026-05): Day 7継続率改善のためのコア機能
   ============================================================ */
.workshop-card {
  margin: 16px 20px 8px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F5FF 100%);
  border: 1.5px solid rgba(108, 99, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.08);
  animation: workshopCardIn 0.4s ease;
}
@keyframes workshopCardIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   段階2: Day 7達成体験
   FEAT(2026-05): 紙吹雪・達成モーダル・仮シールSVG
   ============================================================ */

/* Day 7達成モーダル本体 */
#workshopDay7Modal.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 50, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
#workshopDay7Modal.modal-overlay.active {
  display: flex;
}

.workshop-day7-card {
  background: linear-gradient(160deg, #FFFFFF 0%, #F8F5FF 100%);
  border-radius: 24px;
  padding: 28px 22px 22px;
  max-width: 380px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(108, 99, 255, 0.35);
  position: relative;
  z-index: 1;
  animation: workshopDay7CardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes workshopDay7CardIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 労いメッセージ部 */
.workshop-day7-greeting {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(108, 99, 255, 0.2);
  margin-bottom: 18px;
}

/* ローディング表示 */
.workshop-day7-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}
.workshop-day7-loading-dots {
  display: flex;
  gap: 8px;
}
.workshop-day7-loading-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  animation: workshopLoadingDot 1.4s infinite ease-in-out;
}
.workshop-day7-loading-dots span:nth-child(1) { animation-delay: 0s; }
.workshop-day7-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.workshop-day7-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes workshopLoadingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1.0); opacity: 1; }
}

/* スペシャル分析テキスト */
.workshop-day7-analysis {
  display: none;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 8px 4px;
  animation: workshopFadeIn 0.6s ease;
}
@keyframes workshopFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 限定シール表示部 */
.workshop-day7-sticker {
  display: none;
  text-align: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(108, 99, 255, 0.2);
  animation: workshopStickerIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes workshopStickerIn {
  from { opacity: 0; transform: scale(0.7) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* 限定シール画像（本番版） */
.workshop-sticker-svg {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 4px 12px rgba(108, 99, 255, 0.25));
}

/* 閉じるボタン */
.workshop-day7-close-btn {
  display: none;
  margin: 18px auto 0;
  background: linear-gradient(135deg, var(--brand), #A855F7);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 12px 36px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(108, 99, 255, 0.3);
  transition: transform 0.2s;
}
.workshop-day7-close-btn:active {
  transform: scale(0.96);
}

/* 紙吹雪コンテナ */
.workshop-confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.workshop-confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation: workshopConfettiFall linear forwards;
  opacity: 0.9;
}
@keyframes workshopConfettiFall {
  0% {
    top: -20px;
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 0.3;
  }
}

/* ───────────────────────────────────────────── */
/* カスタムフォントパック：フォント選択モーダル用 */
/* ───────────────────────────────────────────── */
.fp-subtitle{font-size:12px;color:var(--text-muted,#9090A8);margin:-8px 0 16px;}

.fp-lock-banner{
  background:#FFF3E0;border:1px solid #FFD8A8;border-radius:12px;
  padding:10px 12px;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.fp-lock-banner-icon{font-size:14px;flex-shrink:0;}
.fp-lock-banner-text{font-size:11px;color:#B86B00;flex:1;line-height:1.4;}
.fp-buy-btn{
  background:var(--brand);color:#fff;font-size:11px;font-weight:700;
  padding:6px 12px;border-radius:100px;border:none;white-space:nowrap;
  cursor:pointer;font-family:inherit;
}
.fp-buy-btn:active{transform:scale(0.96);}

.fp-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.fp-row{
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  padding:12px 14px;cursor:pointer;transition:all 0.15s;
  position:relative;
}
.fp-row:active{transform:scale(0.99);}
.fp-row.fp-selected{border-color:var(--brand);background:#F8F6FF;}
.fp-row.fp-locked .fp-row-sample{opacity:0.5;}

.fp-row-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;
}
.fp-row-name{font-size:11px;color:var(--text-muted,#9090A8);font-weight:500;}
.fp-row-status{font-size:11px;display:flex;align-items:center;gap:4px;}
.fp-row-status .fp-pill-current{
  background:var(--brand);color:#fff;padding:2px 8px;border-radius:100px;
  font-size:10px;font-weight:700;
}
.fp-row-status .fp-lock-mark{color:var(--text-muted,#9090A8);font-size:11px;}
.fp-row-sample{font-size:17px;color:var(--text);line-height:1.5;}

.fp-footer{display:flex;justify-content:center;padding-top:4px;}

/* ───────────────────────────────────────────── */
/* メモタブの「タグ/カレンダー/リスト」切替ボタン  */
/* ───────────────────────────────────────────── */
.view-toggle-btn{
  outline:none !important;
  -webkit-tap-highlight-color:transparent !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-user-select:none;
  user-select:none;
  transition:all 0.2s ease;
}
.view-toggle-btn:focus,
.view-toggle-btn:focus-visible,
.view-toggle-btn:focus-within,
.view-toggle-btn:active{
  outline:none !important;
  outline-offset:0 !important;
  box-shadow:none !important;
}
/* タップ瞬間の縮小フィードバックは選択中スタイルを上書きしないように */
.view-toggle-btn:active{transform:scale(0.97);}
.view-toggle-btn.active{
  box-shadow:0 2px 8px rgba(108,99,255,0.18) !important;
  font-weight:700 !important;
  border-width:2px !important;
}