/* ==========================================
   GachaLink v3 — ダーク/ライトモード対応
   ========================================== */

:root {
  --bg:       #0a0a0f;
  --bg2:      #111118;
  --card:     #1a1a2e;
  --card2:    #16213e;
  --border:   #2a2a4a;
  --purple:   #7c3aed;
  --purple-l: #a855f7;
  --cyan:     #06d6a0;
  --pink:     #f72585;
  --yellow:   #ffd60a;
  --text:     #e8e8f0;
  --text-sub: #888899;
  --text-dim: #555566;
  --r:  10px; --rl: 16px;
  --t:  all 0.2s ease;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg:       #f0f0f8;
  --bg2:      #e4e4f0;
  --card:     #ffffff;
  --card2:    #f8f8ff;
  --border:   #d0d0e8;
  --purple:   #7c3aed;
  --purple-l: #6d28d9;
  --cyan:     #059669;
  --pink:     #e11d78;
  --yellow:   #d97706;
  --text:     #1a1a2e;
  --text-sub: #555577;
  --text-dim: #9999bb;
  --shadow:   0 4px 20px rgba(0,0,0,0.1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-text-size-adjust:100%; }
body { font-family:'Noto Sans JP',sans-serif; background:var(--bg); color:var(--text); min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background 0.3s,color 0.3s; }

[data-visible="false"] { display:none !important; }

/* LOADING */
#loading-screen { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:9999; }
.loading-inner { text-align:center; }
.loading-logo { font-size:4rem; color:var(--purple-l); animation:pulse-glow 1.5s ease-in-out infinite; display:block; margin-bottom:0.5rem; }
.loading-text { font-family:'Space Grotesk',sans-serif; font-size:1.6rem; font-weight:700; margin-bottom:1.5rem; }
.loading-bar { width:200px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin:0 auto 0.8rem; }
.loading-bar-fill { height:100%; background:var(--purple); animation:loading-progress 1.5s ease-in-out infinite; }
@keyframes loading-progress { 0%{width:0%} 50%{width:70%} 100%{width:100%} }
.loading-msg { font-size:0.85rem; color:var(--text-sub); }
@keyframes pulse-glow { 0%,100%{text-shadow:0 0 20px rgba(168,85,247,0.6)} 50%{text-shadow:0 0 50px rgba(168,85,247,1)} }

/* MAINTENANCE */
#maintenance-overlay { position:fixed; inset:0; z-index:9000; background:rgba(10,10,15,0.97); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.maintenance-box { text-align:center; padding:3rem 2rem; }
.maintenance-icon { font-size:4rem; margin-bottom:1rem; display:block; }
.maintenance-box h2 { font-size:1.6rem; margin-bottom:0.8rem; color:#fff; }
.maintenance-box p  { color:#aaa; line-height:1.7; }

/* AUTH */
#screen-auth { display:flex; flex-direction:column; min-height:100dvh; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--bg); }
.auth-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 40% at 25% 20%,rgba(124,58,237,0.2) 0%,transparent 60%),radial-gradient(ellipse 40% 60% at 80% 80%,rgba(247,37,133,0.1) 0%,transparent 60%); pointer-events:none; }
.auth-container { position:relative; width:100%; max-width:420px; padding:2rem 1.25rem 2.5rem; z-index:1; }
.logo-block { text-align:center; margin-bottom:2rem; }
.logo-mark { font-size:3rem; color:var(--purple-l); display:block; animation:pulse-glow 3s ease-in-out infinite; }
.logo-text { font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700; margin-top:0.4rem; }
.logo-sub  { color:var(--text-sub); font-size:0.85rem; margin-top:0.3rem; }
.auth-card { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; box-shadow:var(--shadow); }
.tab-switcher { display:flex; padding:6px; gap:4px; background:var(--bg2); border-bottom:1px solid var(--border); }
.tab-btn { flex:1; padding:0.65rem; border:none; background:transparent; color:var(--text-sub); border-radius:var(--r); cursor:pointer; font-size:0.9rem; font-family:'Noto Sans JP',sans-serif; font-weight:500; transition:var(--t); }
.tab-btn.active { background:var(--purple); color:#fff; }
.auth-form { padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.auth-hint { font-size:0.8rem; color:var(--text-dim); text-align:center; }

/* FORM */
.field-group { display:flex; flex-direction:column; gap:0.35rem; }
.field-group label { font-size:0.83rem; color:var(--text-sub); font-weight:500; display:flex; align-items:center; gap:0.4rem; }
.req { font-size:0.7rem; background:rgba(247,37,133,0.15); color:var(--pink); padding:0.1rem 0.4rem; border-radius:4px; }
.field-hint { font-size:0.75rem; color:var(--text-dim); }
input[type="text"],input[type="password"],input[type="number"],select,textarea { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r); color:var(--text); padding:0.72rem 0.9rem; font-size:0.95rem; font-family:'Noto Sans JP',sans-serif; outline:none; transition:var(--t); width:100%; -webkit-appearance:none; }
input:focus,select:focus,textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,58,237,0.15); background:var(--card); }
input::placeholder { color:var(--text-dim); }
select { cursor:pointer; }
textarea { resize:vertical; min-height:80px; }
.pass-row { position:relative; display:flex; }
.pass-row input { padding-right:3rem; }
.pass-toggle { position:absolute; right:0.6rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.1rem; color:var(--text-dim); padding:0.3rem; }
.input-row { display:flex; gap:0.5rem; align-items:center; }
.input-row input { flex:1; }
.input-prefix { color:var(--text-sub); font-size:1rem; flex-shrink:0; }
.terms-block { margin:0.2rem 0; }
.checkbox-label { display:flex; align-items:center; gap:0.6rem; cursor:pointer; font-size:0.9rem; user-select:none; }
.checkbox-label input[type="checkbox"] { width:1.15rem; height:1.15rem; accent-color:var(--purple); cursor:pointer; flex-shrink:0; }
.checkbox-label a { color:var(--purple-l); text-decoration:none; }

/* BUTTONS */
.btn-primary { background:var(--purple); color:#fff; border:none; border-radius:var(--r); padding:0.8rem 1.4rem; font-size:0.95rem; font-family:'Noto Sans JP',sans-serif; font-weight:700; cursor:pointer; transition:var(--t); width:100%; display:flex; align-items:center; justify-content:center; gap:0.4rem; }
.btn-primary:hover:not(:disabled) { background:var(--purple-l); transform:translateY(-1px); box-shadow:0 4px 15px rgba(124,58,237,0.4); }
.btn-primary:active { transform:scale(0.98); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary.sm { width:auto; padding:0.5rem 1rem; font-size:0.85rem; }
.btn-secondary { background:var(--card2); color:var(--text); border:1.5px solid var(--border); border-radius:var(--r); padding:0.65rem 1.2rem; font-size:0.9rem; font-family:'Noto Sans JP',sans-serif; cursor:pointer; transition:var(--t); display:inline-flex; align-items:center; gap:0.3rem; }
.btn-secondary:hover { border-color:var(--purple); color:var(--purple-l); }
.btn-secondary.sm { padding:0.45rem 0.9rem; font-size:0.82rem; }
.btn-ghost { background:transparent; color:var(--text-sub); border:1.5px solid var(--border); border-radius:var(--r); padding:0.65rem 1.2rem; font-size:0.9rem; font-family:'Noto Sans JP',sans-serif; cursor:pointer; transition:var(--t); }
.btn-ghost:hover { color:var(--text); border-color:var(--text-sub); }
.btn-ghost.sm { padding:0.45rem 0.9rem; font-size:0.82rem; }
.btn-danger { background:transparent; border:1.5px solid rgba(247,37,133,0.4); color:var(--pink); border-radius:6px; padding:0.38rem 0.7rem; cursor:pointer; font-size:0.82rem; font-family:'Noto Sans JP',sans-serif; transition:var(--t); flex-shrink:0; }
.btn-danger:hover { background:rgba(247,37,133,0.15); }
.btn-danger-full { background:rgba(247,37,133,0.15); border:1.5px solid rgba(247,37,133,0.4); color:var(--pink); border-radius:var(--r); padding:0.65rem 1.2rem; font-size:0.9rem; font-family:'Noto Sans JP',sans-serif; cursor:pointer; transition:var(--t); }
.btn-danger-full:hover { background:rgba(247,37,133,0.3); }
.btn-danger-full.sm { padding:0.45rem 0.9rem; font-size:0.82rem; }
.btn-icon { font-size:1rem; }
.icon-btn { background:transparent; border:none; color:var(--text-sub); font-size:1.1rem; cursor:pointer; padding:0.5rem; border-radius:8px; transition:var(--t); line-height:1; }
.icon-btn:hover { color:var(--pink); background:rgba(247,37,133,0.1); }
#btn-theme-toggle { font-size:1.3rem; }

/* ADMIN */
.admin-panel { background:rgba(247,37,133,0.06); border:1.5px solid rgba(247,37,133,0.25); border-radius:var(--rl); padding:1rem; margin:1rem 0; }
.admin-title { font-size:0.88rem; font-weight:700; color:var(--pink); margin-bottom:0.6rem; }
.maintenance-status-badge { font-size:0.85rem; font-weight:600; margin-bottom:0.8rem; }
.admin-buttons { display:flex; gap:0.6rem; flex-wrap:wrap; }
.btn-maintenance-on  { background:rgba(247,37,133,0.15); border:1.5px solid rgba(247,37,133,0.4); color:var(--pink); border-radius:var(--r); padding:0.6rem 1rem; font-size:0.88rem; font-family:'Noto Sans JP',sans-serif; cursor:pointer; transition:var(--t); font-weight:600; }
.btn-maintenance-on:hover  { background:rgba(247,37,133,0.3); }
.btn-maintenance-off { background:rgba(6,214,160,0.1); border:1.5px solid rgba(6,214,160,0.3); color:var(--cyan); border-radius:var(--r); padding:0.6rem 1rem; font-size:0.88rem; font-family:'Noto Sans JP',sans-serif; cursor:pointer; transition:var(--t); font-weight:600; }
.btn-maintenance-off:hover { background:rgba(6,214,160,0.2); }

/* APP */
#screen-app { display:flex; flex-direction:column; min-height:100dvh; background:var(--bg); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; background:var(--bg2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; flex-shrink:0; }
.topbar-logo { font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--purple-l); font-size:1rem; }
.topbar-right { display:flex; align-items:center; gap:0.5rem; }
#topbar-username { font-size:0.8rem; color:var(--text-sub); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-container { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:72px; }
.page { padding:1rem; }
.page-header { display:flex; align-items:center; gap:0.8rem; margin-bottom:1rem; padding-bottom:0.8rem; border-bottom:1px solid var(--border); }
.page-title { font-size:1.1rem; font-weight:700; flex:1; }
.back-btn { background:transparent; border:none; color:var(--purple-l); cursor:pointer; font-size:1.1rem; font-family:'Noto Sans JP',sans-serif; padding:0.3rem 0.5rem; border-radius:6px; transition:var(--t); flex-shrink:0; }
.back-btn:hover { background:rgba(168,85,247,0.1); }

/* HOME */
.home-hero { text-align:center; padding:1.5rem 1rem 1rem; }
.hero-icon { font-size:4rem; display:block; animation:float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero-name { font-size:1.4rem; font-weight:700; margin-top:0.6rem; }
.hero-sub  { color:var(--text-sub); font-size:0.85rem; margin-top:0.3rem; }
.guide-banner { display:flex; align-items:flex-start; gap:0.8rem; background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.2); border-radius:var(--r); padding:0.9rem 1rem; margin:1rem 0; font-size:0.85rem; }
.guide-banner>span { font-size:1.3rem; flex-shrink:0; }
.guide-title { font-weight:700; color:var(--purple-l); margin-bottom:0.3rem; font-size:0.9rem; }
.guide-desc  { color:var(--text-sub); line-height:1.6; }
.mode-cards { display:flex; flex-direction:column; gap:0.75rem; margin:0.5rem 0 1rem; }
.mode-card { display:flex; align-items:center; gap:1rem; background:var(--card); border:1.5px solid var(--border); border-radius:var(--rl); padding:1.2rem; cursor:pointer; text-align:left; transition:var(--t); font-family:'Noto Sans JP',sans-serif; color:var(--text); width:100%; -webkit-tap-highlight-color:transparent; box-shadow:var(--shadow); }
.mode-card:hover { border-color:var(--purple); background:var(--card2); transform:translateY(-2px); box-shadow:0 6px 24px rgba(124,58,237,0.2); }
.mode-card:active { transform:scale(0.98); }
.mode-icon { font-size:2.2rem; flex-shrink:0; }
.mode-info { flex:1; min-width:0; }
.mode-title { font-size:1rem; font-weight:700; }
.mode-desc  { font-size:0.8rem; color:var(--text-sub); margin-top:0.2rem; }
.mode-tags  { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.5rem; }
.tag { font-size:0.7rem; background:rgba(124,58,237,0.15); color:var(--purple-l); padding:0.15rem 0.5rem; border-radius:100px; border:1px solid rgba(124,58,237,0.2); }
.mode-arrow { color:var(--purple-l); font-size:1.5rem; flex-shrink:0; }
.home-notice { background:rgba(255,214,10,0.06); border:1px solid rgba(255,214,10,0.25); border-radius:var(--r); padding:1rem; margin-top:0.5rem; }
.notice-label { font-size:0.82rem; color:var(--yellow); font-weight:700; margin-bottom:0.4rem; }

/* INFO BANNER */
.info-banner { display:flex; align-items:flex-start; gap:0.5rem; background:rgba(6,214,160,0.06); border:1px solid rgba(6,214,160,0.2); border-radius:var(--r); padding:0.7rem 0.9rem; font-size:0.82rem; color:var(--text-sub); margin-bottom:0.8rem; line-height:1.5; }

/* CARDS */
.card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--rl); padding:1.1rem; box-shadow:var(--shadow); }
.card-list { display:flex; flex-direction:column; gap:0.6rem; }
.empty-state { text-align:center; color:var(--text-dim); padding:2.5rem 1rem; font-size:0.88rem; background:var(--card); border:1px dashed var(--border); border-radius:var(--r); }
.empty-state-icon { font-size:2rem; display:block; margin-bottom:0.5rem; }
.loading-placeholder { text-align:center; color:var(--text-dim); padding:1.5rem; font-size:0.85rem; animation:blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
.list-item { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); padding:0.9rem 1rem; display:flex; align-items:center; gap:0.8rem; transition:var(--t); }
.list-item.clickable { cursor:pointer; }
.list-item.clickable:hover { border-color:var(--purple); background:var(--card2); }
.list-item-icon { font-size:1.5rem; flex-shrink:0; }
.list-item-info { flex:1; min-width:0; }
.list-item-name { font-size:0.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item-sub  { font-size:0.78rem; color:var(--text-sub); margin-top:0.2rem; }
.list-item-actions { display:flex; gap:0.4rem; flex-shrink:0; }
.badge { display:inline-flex; align-items:center; background:rgba(124,58,237,0.2); color:var(--purple-l); border:1px solid rgba(124,58,237,0.3); font-size:0.72rem; padding:0.15rem 0.55rem; border-radius:100px; font-family:'Space Grotesk',sans-serif; }

/* SUB TABS */
.sub-tabs { display:flex; gap:3px; background:var(--bg2); border-radius:var(--r); padding:4px; margin-bottom:1rem; border:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.sub-tabs::-webkit-scrollbar { display:none; }
.sub-tab { flex:1; min-width:fit-content; padding:0.5rem 0.65rem; border:none; background:transparent; color:var(--text-sub); border-radius:7px; cursor:pointer; font-size:0.8rem; font-family:'Noto Sans JP',sans-serif; transition:var(--t); white-space:nowrap; }
.sub-tab.active { background:var(--purple); color:#fff; font-weight:600; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
.section-header h3,.section-header h4 { font-size:0.95rem; font-weight:700; }

/* TICKET */
.ticket-form { display:flex; flex-direction:column; gap:0.9rem; margin-bottom:1rem; }
.ticket-balance-card { display:flex; align-items:center; gap:0.6rem; background:rgba(6,214,160,0.07); border:1.5px solid rgba(6,214,160,0.2); border-radius:var(--r); padding:0.8rem 1rem; margin-bottom:1rem; }
.tb-label { font-size:0.9rem; color:var(--text-sub); flex:1; }
.tb-count { font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:700; color:var(--cyan); line-height:1; }
.tb-unit  { font-size:0.85rem; color:var(--text-sub); }

/* STEP */
.step-indicator { display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.step { display:flex; flex-direction:column; align-items:center; font-family:'Space Grotesk',sans-serif; font-size:0.8rem; color:var(--text-dim); width:2rem; height:2rem; border-radius:50%; background:var(--border); justify-content:center; position:relative; flex-shrink:0; }
.step span { position:absolute; bottom:-1.3rem; font-size:0.65rem; white-space:nowrap; color:var(--text-dim); font-family:'Noto Sans JP',sans-serif; }
.step.active { background:var(--purple); color:#fff; }
.step.active span { color:var(--purple-l); }
.step.done { background:var(--cyan); color:#000; font-size:0.7rem; }
.step.done span { color:var(--cyan); }
.step-line { flex:1; height:2px; background:var(--border); max-width:60px; }
.step-line.active { background:var(--purple); }
.step-label { font-size:0.92rem; font-weight:600; color:var(--text-sub); margin:1.5rem 0 0.8rem; }
.selected-bar { background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.2); border-radius:var(--r); padding:0.6rem 0.9rem; font-size:0.85rem; color:var(--purple-l); margin-bottom:0.8rem; }

/* DRAW */
.draw-section { margin-bottom:1rem; }
.draw-label { font-size:0.85rem; color:var(--text-sub); margin-bottom:0.7rem; font-weight:500; }
.draw-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; margin-bottom:0.7rem; }
.btn-draw { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); color:var(--text); padding:0.9rem 0.3rem; cursor:pointer; transition:var(--t); display:flex; flex-direction:column; align-items:center; gap:0.1rem; -webkit-tap-highlight-color:transparent; }
.btn-draw:hover { border-color:var(--purple); color:var(--purple-l); background:rgba(124,58,237,0.1); }
.btn-draw:active { transform:scale(0.95); }
.btn-draw-custom { border-color:rgba(6,214,160,0.3); color:var(--cyan); }
.btn-draw-custom:hover { background:rgba(6,214,160,0.1); }
.draw-num  { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; }
.draw-unit { font-size:0.7rem; color:var(--text-sub); }
.custom-draw { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.8rem; }
.custom-draw input { flex:1; }

/* GACHA ANIMATION */
.gacha-animation { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.5rem 1rem; }
.gacha-orb { position:relative; width:130px; height:130px; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; }
.orb-inner { font-size:3.2rem; color:var(--purple-l); z-index:2; animation:orb-spin 0.8s linear infinite; }
@keyframes orb-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.orb-ring { position:absolute; border-radius:50%; border:2px solid transparent; animation:ring-spin 1s linear infinite; }
.r1{border-top-color:var(--purple);animation-duration:1.5s;inset:-12px}
.r2{border-right-color:var(--cyan);animation-duration:2.2s;inset:-24px;animation-direction:reverse}
.r3{border-bottom-color:var(--pink);animation-duration:3s;inset:-36px}
@keyframes ring-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.gacha-status-text { color:var(--text-sub); font-size:0.9rem; margin-bottom:1rem; animation:blink 1s ease-in-out infinite; }
.gacha-progress { width:200px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.gacha-progress-bar { height:100%; background:linear-gradient(90deg,var(--purple),var(--cyan)); border-radius:2px; transition:width 0.3s ease; }

/* RESULTS */
.gacha-results { margin-top:0.5rem; }
.results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; padding:0.8rem 1rem; background:rgba(6,214,160,0.07); border:1px solid rgba(6,214,160,0.2); border-radius:var(--r); }
.results-header h3 { font-size:1rem; font-weight:700; }
.results-summary { font-family:'Space Grotesk',sans-serif; font-size:0.8rem; color:var(--text-sub); }
.results-list { display:flex; flex-direction:column; gap:0.4rem; max-height:380px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.result-item { display:flex; align-items:center; gap:0.8rem; padding:0.65rem 0.9rem; border-radius:var(--r); background:var(--card); border:1px solid var(--border); animation:result-in 0.2s ease; }
@keyframes result-in { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.result-rank   { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; color:var(--text-dim); min-width:2.2rem; }
.result-name   { flex:1; font-size:0.9rem; }
.result-rarity { font-size:0.72rem; padding:0.15rem 0.5rem; border-radius:100px; font-weight:600; white-space:nowrap; }
.rarity-lv5 { background:rgba(255,214,10,0.25); color:var(--yellow); border:1px solid rgba(255,214,10,0.5); }
.rarity-lv4 { background:rgba(247,37,133,0.2);  color:var(--pink);   border:1px solid rgba(247,37,133,0.4); }
.rarity-lv3 { background:rgba(168,85,247,0.2);  color:var(--purple-l);border:1px solid rgba(168,85,247,0.4); }
.rarity-lv2 { background:rgba(6,214,160,0.15);  color:var(--cyan);   border:1px solid rgba(6,214,160,0.3); }
.rarity-lv1 { background:rgba(136,136,153,0.1); color:var(--text-sub);border:1px solid var(--border); }

/* GACHA INFO */
.gacha-info-card { margin-bottom:1rem; }
.gacha-info-card h3 { font-size:1rem; font-weight:700; margin-bottom:0.3rem; }
.gacha-info-card p  { font-size:0.82rem; color:var(--text-sub); }
.gacha-info-badge { display:inline-block; font-size:0.72rem; padding:0.15rem 0.5rem; border-radius:100px; margin-left:0.5rem; }
.gacha-active   { background:rgba(6,214,160,0.15);  color:var(--cyan); }
.gacha-inactive { background:rgba(136,136,153,0.1); color:var(--text-sub); }

/* PROFILE */
.profile-card { display:flex; flex-direction:column; gap:1.2rem; }
.profile-icon-area { text-align:center; }
.profile-icon-display { font-size:4rem; display:block; margin-bottom:0.3rem; }
.profile-x-link { display:inline-flex; align-items:center; gap:0.4rem; background:var(--bg2); border:1px solid var(--border); border-radius:100px; padding:0.4rem 0.9rem; color:var(--text); text-decoration:none; font-size:0.85rem; margin-top:0.5rem; transition:var(--t); }
.profile-x-link:hover { background:var(--card2); border-color:var(--purple-l); }
.x-icon { font-weight:700; font-size:1rem; }
.emoji-picker { display:flex; flex-wrap:wrap; gap:0.4rem; justify-content:center; padding:0.8rem; background:var(--bg2); border-radius:var(--r); border:1px solid var(--border); margin-top:0.6rem; }
.emoji-option { font-size:1.7rem; cursor:pointer; padding:0.3rem; border-radius:8px; transition:var(--t); line-height:1; -webkit-tap-highlight-color:transparent; }
.emoji-option:hover    { background:rgba(124,58,237,0.2); transform:scale(1.1); }
.emoji-option.selected { background:rgba(124,58,237,0.3); outline:2px solid var(--purple); }
.profile-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.pi-item  { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:0.7rem; }
.pi-label { font-size:0.72rem; color:var(--text-dim); margin-bottom:0.2rem; }
.pi-value { font-size:0.9rem; font-weight:500; word-break:break-all; }

/* RARITIES EDITOR */
.rarities-section { margin-top:0.5rem; }
#rarities-editor { display:flex; flex-direction:column; gap:0.8rem; margin-bottom:0.8rem; }
.rarity-row { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r); padding:0.9rem; display:flex; flex-direction:column; gap:0.6rem; }
.rarity-row-header { display:flex; align-items:center; gap:0.5rem; }
.rarity-row-header input { flex:1; }
.rarity-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.rate-total-bar { font-size:0.85rem; color:var(--text-sub); padding:0.6rem 0.8rem; background:var(--bg2); border-radius:var(--r); border:1px solid var(--border); }
.rate-total-bar strong { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; }
.rate-warning { color:var(--yellow); font-size:0.8rem; margin-left:0.5rem; }
.rate-ok      { color:var(--cyan);   font-size:0.8rem; margin-left:0.5rem; }
.rarity-level-stars { display:flex; gap:0.2rem; margin-top:0.3rem; }
.star { font-size:1rem; color:var(--border); cursor:pointer; transition:var(--t); }
.star.active { color:var(--yellow); }

/* LOG */
.log-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:0.75rem 0.9rem; }
.log-item-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.35rem; }
.log-icon    { font-size:1.2rem; }
.log-who     { font-size:0.88rem; font-weight:600; }
.log-userid  { font-size:0.72rem; color:var(--text-dim); }
.log-when    { font-size:0.72rem; color:var(--text-dim); font-family:'Space Grotesk',sans-serif; }
.log-what    { font-size:0.82rem; color:var(--text-sub); }
.log-count-badge { display:inline-flex; align-items:center; background:rgba(124,58,237,0.15); color:var(--purple-l); border:1px solid rgba(124,58,237,0.25); border-radius:100px; padding:0.15rem 0.6rem; font-size:0.8rem; font-family:'Space Grotesk',sans-serif; font-weight:600; white-space:nowrap; }

/* HOWTO */
.howto-content { display:flex; flex-direction:column; gap:0.8rem; }
.howto-section { display:flex; align-items:flex-start; gap:1rem; }
.howto-num  { font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700; color:var(--purple); opacity:0.6; flex-shrink:0; line-height:1.1; min-width:2.5rem; }
.howto-body h3 { font-size:0.95rem; margin-bottom:0.4rem; }
.howto-body p  { font-size:0.83rem; color:var(--text-sub); line-height:1.7; }

/* FRIEND ADD */
.friend-add-form { margin-bottom:1rem; }

/* BOTTOM NAV */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--bg2); border-top:1px solid var(--border); display:flex; z-index:100; padding-bottom:env(safe-area-inset-bottom); backdrop-filter:blur(10px); }
.nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:0.2rem; padding:0.6rem 0.3rem 0.5rem; background:transparent; border:none; cursor:pointer; transition:var(--t); color:var(--text-dim); -webkit-tap-highlight-color:transparent; }
.nav-btn.active { color:var(--purple-l); }
.nav-btn:hover  { color:var(--text); }
.nav-icon  { font-size:1.25rem; line-height:1; }
.nav-label { font-size:0.62rem; font-family:'Noto Sans JP',sans-serif; }

/* MODAL */
.modal { position:fixed; inset:0; z-index:500; display:flex; align-items:flex-end; justify-content:center; }
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); }
.modal-box { position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--rl) var(--rl) 0 0; width:100%; max-width:600px; max-height:92dvh; display:flex; flex-direction:column; animation:slide-up 0.22s ease; z-index:1; box-shadow:var(--shadow); }
.modal-box.large { max-height:96dvh; }
.modal-box.small { max-height:50dvh; max-width:380px; border-radius:var(--rl); margin:auto; }
@keyframes slide-up { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.2rem 0.7rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-header h3 { font-size:1rem; font-weight:700; }
.modal-close { background:transparent; border:none; color:var(--text-sub); font-size:1.1rem; cursor:pointer; padding:0.3rem; border-radius:6px; }
.modal-close:hover { color:var(--pink); }
.modal-body { padding:1rem 1.2rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:0.8rem; -webkit-overflow-scrolling:touch; }
.modal-footer { padding:0.8rem 1.2rem 1.2rem; display:flex; gap:0.6rem; border-top:1px solid var(--border); flex-shrink:0; }
.terms-text { gap:0; }
.terms-text h4 { font-size:0.9rem; color:var(--purple-l); margin:1rem 0 0.4rem; }
.terms-text h4:first-child { margin-top:0; }
.terms-text p  { font-size:0.83rem; color:var(--text-sub); line-height:1.8; }

/* TOAST */
#toast-container { position:fixed; top:0.8rem; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:0.5rem; width:calc(100vw - 2rem); max-width:380px; pointer-events:none; }
.toast { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem 1rem; font-size:0.88rem; display:flex; align-items:center; gap:0.6rem; animation:toast-in 0.22s ease; pointer-events:auto; box-shadow:0 8px 30px rgba(0,0,0,0.4); line-height:1.4; }
.toast.success { border-left:4px solid var(--cyan); }
.toast.error   { border-left:4px solid var(--pink); }
.toast.warn    { border-left:4px solid var(--yellow); }
.toast.info    { border-left:4px solid var(--purple-l); }
.toast-icon { font-size:1.1rem; flex-shrink:0; }
.toast-msg  { flex:1; }
@keyframes toast-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* RESPONSIVE */
@media (min-width:480px) { .mode-cards{flex-direction:row} .rarity-grid{grid-template-columns:1fr 1fr 1fr} }
@media (min-width:600px) { .modal-box{border-radius:var(--rl);margin:auto} .modal{align-items:center} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important} }

/* ===== v4 追加スタイル ===== */

/* 統計 */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; margin-bottom:1rem; }
.stat-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); padding:0.9rem; text-align:center; }
.stat-value { font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:700; color:var(--purple-l); }
.stat-label { font-size:0.72rem; color:var(--text-sub); margin-top:0.2rem; }

/* バーチャート */
.chart-container { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem; min-height:80px; margin-bottom:0.5rem; }
.bar-chart { display:flex; flex-direction:column; gap:0.5rem; }
.bar-item { display:flex; align-items:center; gap:0.6rem; }
.bar-label { font-size:0.78rem; color:var(--text-sub); min-width:80px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { flex:1; background:var(--border); border-radius:4px; height:18px; position:relative; display:flex; align-items:center; }
.bar-fill  { height:100%; border-radius:4px; transition:width 0.5s ease; }
.bar-value { position:absolute; right:6px; font-size:0.72rem; font-family:'Space Grotesk',sans-serif; color:var(--text); font-weight:600; }

/* プロフィールタブ */
.profile-tabs { display:flex; gap:3px; background:var(--bg2); border-radius:var(--r); padding:4px; margin-bottom:0.8rem; border:1px solid var(--border); }
.profile-tab { flex:1; padding:0.5rem; border:none; background:transparent; color:var(--text-sub); border-radius:7px; cursor:pointer; font-size:0.82rem; font-family:'Noto Sans JP',sans-serif; transition:var(--t); }
.profile-tab.active { background:var(--purple); color:#fff; font-weight:600; }
.profile-tab-content { margin-top:0; }

/* 危険ゾーン */
.danger-zone { border-color:rgba(247,37,133,0.3) !important; }
.danger-zone h4 { color:var(--pink); font-size:0.95rem; margin-bottom:0.3rem; }

/* スクラッチ演出 */
.scratch-card { position:relative; width:200px; height:200px; margin:0 auto 1rem; border-radius:var(--r); overflow:hidden; }
.scratch-overlay { position:absolute; inset:0; background:linear-gradient(135deg,var(--purple),var(--pink)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.9rem; font-weight:700; text-align:center; padding:1rem; z-index:2; cursor:pointer; border-radius:var(--r); }
.scratch-result { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--card2); border:2px solid var(--purple); border-radius:var(--r); }
.scratch-reveal { text-align:center; font-size:1.1rem; font-weight:700; }

/* ルーレット演出 */
.roulette-wheel { position:relative; width:240px; margin:0 auto 1rem; }
.roulette-pointer { text-align:center; font-size:1.5rem; color:var(--pink); margin-bottom:0.3rem; }
.roulette-items { display:flex; overflow:hidden; border:2px solid var(--purple); border-radius:var(--r); background:var(--card); }
.roulette-item { min-width:80px; padding:0.8rem 0.5rem; text-align:center; font-size:0.82rem; font-weight:600; flex-shrink:0; }

/* Xシェアボタン */
.results-actions { display:flex; gap:0.6rem; margin-top:0.8rem; }
.results-actions button { flex:1; }

/* 支援ボタン */
.support-section { text-align:center; margin:1rem 0; }
.btn-support { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,107,107,0.1); border:1.5px solid rgba(255,107,107,0.3); color:#ff6b6b; border-radius:100px; padding:0.65rem 1.5rem; font-size:0.9rem; font-family:'Noto Sans JP',sans-serif; font-weight:600; text-decoration:none; transition:var(--t); }
.btn-support:hover { background:rgba(255,107,107,0.2); transform:translateY(-1px); }

/* ===== v5 追加スタイル ===== */

/* 機能バッジ */
.feature-badge { display:inline-block; font-size:0.68rem; padding:0.1rem 0.45rem; border-radius:100px; margin-left:0.3rem; font-weight:600; }
.feature-badge.pity     { background:rgba(255,214,10,0.15); color:var(--yellow); border:1px solid rgba(255,214,10,0.3); }
.feature-badge.pickup   { background:rgba(247,37,133,0.15); color:var(--pink);   border:1px solid rgba(247,37,133,0.3); }
.feature-badge.discount { background:rgba(6,214,160,0.12);  color:var(--cyan);   border:1px solid rgba(6,214,160,0.25); }

/* 天井カウンター */
#pity-counter-display { background:rgba(255,214,10,0.08); border:1px solid rgba(255,214,10,0.2); border-radius:var(--r); padding:0.5rem 0.9rem; font-size:0.85rem; color:var(--yellow); font-weight:600; text-align:center; margin-bottom:0.8rem; }

/* 天井確定結果 */
.result-pity { border-color:rgba(255,214,10,0.4) !important; background:rgba(255,214,10,0.05) !important; }
.pity-badge { font-size:0.7rem; background:rgba(255,214,10,0.2); color:var(--yellow); padding:0.1rem 0.4rem; border-radius:100px; margin-left:0.3rem; }

/* ガチャ設定セクション */
.gacha-feature-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:0.9rem; display:flex; flex-direction:column; gap:0.7rem; margin-top:0.5rem; }
.feature-toggle-row { display:flex; align-items:center; gap:0.8rem; }
.feature-toggle-row label { font-size:0.88rem; font-weight:600; flex:1; }
.toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:100px; transition:var(--t); }
.toggle-slider:before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:var(--t); }
.toggle-switch input:checked + .toggle-slider { background:var(--purple); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); }

/* 発送管理 */
.shipping-item.shipped { opacity:0.6; }
.shipping-badge { font-size:0.75rem; padding:0.2rem 0.6rem; border-radius:100px; font-weight:600; }
.shipped-badge { background:rgba(6,214,160,0.15); color:var(--cyan); border:1px solid rgba(6,214,160,0.3); }

/* 過去配信者一覧 */
.past-streamers-section-header { font-size:0.82rem; color:var(--text-dim); font-weight:600; margin:1.2rem 0 0.5rem; padding-bottom:0.4rem; border-bottom:1px solid var(--border); }
.past-streamer-section { margin-bottom:1rem; }
.past-streamer-header { display:flex; align-items:center; gap:0.5rem; font-size:0.88rem; font-weight:600; margin-bottom:0.4rem; color:var(--text-sub); }
.past-streamer-icon { font-size:1.2rem; }
.past-streamer-name { }
.past-gacha-list { display:flex; flex-wrap:wrap; gap:0.4rem; }
.past-gacha-btn { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); padding:0.4rem 0.8rem; font-size:0.82rem; font-family:'Noto Sans JP',sans-serif; color:var(--text); cursor:pointer; transition:var(--t); }
.past-gacha-btn:hover { border-color:var(--purple); color:var(--purple-l); }

/* PWA インストールバナー */
#pwa-install-banner { display:flex; align-items:center; gap:0.8rem; background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.25); border-radius:var(--r); padding:0.8rem 1rem; margin:0.5rem 0; }
#pwa-install-banner p { flex:1; font-size:0.82rem; color:var(--text-sub); }

/* 統計 */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; margin-bottom:1rem; }
.stat-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); padding:0.9rem; text-align:center; }
.stat-value { font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:700; color:var(--purple-l); }
.stat-label { font-size:0.72rem; color:var(--text-sub); margin-top:0.2rem; }
.chart-container { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem; min-height:80px; margin-bottom:0.5rem; }
.bar-chart { display:flex; flex-direction:column; gap:0.5rem; }
.bar-item { display:flex; align-items:center; gap:0.6rem; }
.bar-label { font-size:0.78rem; color:var(--text-sub); min-width:80px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { flex:1; background:var(--border); border-radius:4px; height:18px; position:relative; display:flex; align-items:center; }
.bar-fill { height:100%; border-radius:4px; transition:width 0.5s ease; }
.bar-value { position:absolute; right:6px; font-size:0.72rem; font-family:'Space Grotesk',sans-serif; color:var(--text); font-weight:600; }

/* 支援ボタン */
.support-section { text-align:center; margin:1rem 0; }
.btn-support { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,107,107,0.1); border:1.5px solid rgba(255,107,107,0.3); color:#ff6b6b; border-radius:100px; padding:0.65rem 1.5rem; font-size:0.9rem; font-family:'Noto Sans JP',sans-serif; font-weight:600; text-decoration:none; transition:var(--t); }
.btn-support:hover { background:rgba(255,107,107,0.2); transform:translateY(-1px); }

/* ===== v7 追加スタイル ===== */
.x-badge { display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:rgba(255,255,255,0.1);color:var(--text);text-decoration:none;font-size:0.78rem;font-weight:700;margin-left:0.3rem;transition:var(--t); }
.x-badge:hover { background:rgba(255,255,255,0.2); }
.list-item-icon img { width:2rem;height:2rem;border-radius:50%;object-fit:cover; }
.profile-icon-area { text-align:center;margin-bottom:1rem; }
#btn-upload-icon { margin:0 auto 0.5rem;display:block; }
.stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:0.6rem;margin-bottom:1rem; }
.stat-card { background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:0.9rem;text-align:center; }
.stat-value { font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;color:var(--purple-l); }
.stat-label { font-size:0.72rem;color:var(--text-sub);margin-top:0.2rem; }
.chart-container { background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:0.8rem;min-height:80px;margin-bottom:0.5rem; }
.bar-chart { display:flex;flex-direction:column;gap:0.5rem; }
.bar-item { display:flex;align-items:center;gap:0.6rem; }
.bar-label { font-size:0.78rem;color:var(--text-sub);min-width:80px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.bar-track { flex:1;background:var(--border);border-radius:4px;height:18px;position:relative;display:flex;align-items:center; }
.bar-fill { height:100%;border-radius:4px;transition:width 0.5s ease; }
.bar-value { position:absolute;right:6px;font-size:0.72rem;font-family:'Space Grotesk',sans-serif;color:var(--text);font-weight:600; }
.shipped-item { opacity:0.65; }
.shipped-badge { font-size:0.72rem;background:rgba(6,214,160,0.15);color:var(--cyan);padding:0.15rem 0.55rem;border-radius:100px;border:1px solid rgba(6,214,160,0.3); }
.support-section { text-align:center;margin:1rem 0; }
.btn-support { display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,107,107,0.1);border:1.5px solid rgba(255,107,107,0.3);color:#ff6b6b;border-radius:100px;padding:0.65rem 1.5rem;font-size:0.9rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;text-decoration:none;transition:var(--t); }
.btn-support:hover { background:rgba(255,107,107,0.2);transform:translateY(-1px); }
.profile-tabs { display:flex;gap:3px;background:var(--bg2);border-radius:var(--r);padding:4px;margin-bottom:0.8rem;border:1px solid var(--border); }
.profile-tab { flex:1;padding:0.5rem;border:none;background:transparent;color:var(--text-sub);border-radius:7px;cursor:pointer;font-size:0.82rem;font-family:'Noto Sans JP',sans-serif;transition:var(--t); }
.profile-tab.active { background:var(--purple);color:#fff;font-weight:600; }
.past-streamers-section-header { font-size:0.82rem;color:var(--text-dim);font-weight:600;margin:1.2rem 0 0.5rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border); }
.past-streamer-section { margin-bottom:1rem; }
.past-streamer-header { display:flex;align-items:center;gap:0.5rem;font-size:0.88rem;font-weight:600;margin-bottom:0.4rem;color:var(--text-sub); }
.past-gacha-list { display:flex;flex-wrap:wrap;gap:0.4rem; }
.past-gacha-btn { background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:0.4rem 0.8rem;font-size:0.82rem;font-family:'Noto Sans JP',sans-serif;color:var(--text);cursor:pointer;transition:var(--t); }
.past-gacha-btn:hover { border-color:var(--purple);color:var(--purple-l); }
.feature-badge { display:inline-block;font-size:0.68rem;padding:0.1rem 0.45rem;border-radius:100px;margin-left:0.3rem;font-weight:600; }
.feature-badge.pity { background:rgba(255,214,10,0.15);color:var(--yellow);border:1px solid rgba(255,214,10,0.3); }
.feature-badge.pickup { background:rgba(247,37,133,0.15);color:var(--pink);border:1px solid rgba(247,37,133,0.3); }
.feature-badge.discount { background:rgba(6,214,160,0.12);color:var(--cyan);border:1px solid rgba(6,214,160,0.25); }
.feature-badge.expire { background:rgba(124,58,237,0.12);color:var(--purple-l);border:1px solid rgba(124,58,237,0.25); }
.result-pity { border-color:rgba(255,214,10,0.4) !important;background:rgba(255,214,10,0.05) !important; }
.pity-badge { font-size:0.7rem;background:rgba(255,214,10,0.2);color:var(--yellow);padding:0.1rem 0.4rem;border-radius:100px;margin-left:0.3rem; }
.results-actions { display:flex;gap:0.6rem;margin-top:0.8rem; }
.results-actions button { flex:1; }
.gacha-feature-section { background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:0.9rem;display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.6rem; }
.feature-toggle-row { display:flex;align-items:center;gap:0.8rem; }
.feature-toggle-row label:first-child { font-size:0.88rem;font-weight:600;flex:1; }
.toggle-switch { position:relative;width:44px;height:24px;flex-shrink:0; }
.toggle-switch input { opacity:0;width:0;height:0; }
.toggle-slider { position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:100px;transition:var(--t); }
.toggle-slider:before { content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--t); }
.toggle-switch input:checked + .toggle-slider { background:var(--purple); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); }