/* Toast — ensure it renders above overlays */
#toast{z-index:9999 !important;}
input,textarea,select,button{text-shadow:none;}
/* Keyboard focus visibility */
:focus-visible{outline:2px solid rgba(255,255,255,0.4);outline-offset:2px;border-radius:4px;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:rgba(255,255,255,0.2);}
button:focus-visible{outline:2px solid rgba(255,255,255,0.4);outline-offset:2px;border-radius:8px;}
/* Hide focus ring for mouse users, show only for keyboard */
:focus:not(:focus-visible){outline:none;}
/* Kill browser autofill overlay */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 0 9999px transparent !important;
}
.liquid-glass{background:rgba(255,255,255,0.01);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:none;box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);position:relative;overflow:hidden;}
.liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,0.45)0%,rgba(255,255,255,0.15)20%,rgba(255,255,255,0)40%,rgba(255,255,255,0)60%,rgba(255,255,255,0.15)80%,rgba(255,255,255,0.45)100%);-webkit-mask:linear-gradient(#fff 0 0)content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.page{display:none}
.page.active{display:block;animation:fadeIn 0.25s ease-out}
/* Force appRoot into its own compositing layer to prevent Safari backdrop-filter hit-testing bug */
#appRoot{isolation:isolate;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.tab-active{color:#fff !important;border-bottom:2px solid #fff;margin-bottom:-1px;}
.scrollbar-none::-webkit-scrollbar{display:none;}
.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.animate-spin{animation:spin 1s linear infinite;}
.text-readable{background:rgba(0,0,0,0.5);border-radius:8px;padding:4px 10px;display:inline-block;}
.readability-mask{background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:4px 8px;display:inline-block;}
/* upload tags */
.tag-btn.active,.mood-btn.active,.inst-btn.active,.genre-btn.active{color:#fff !important;background:rgba(255,255,255,0.12) !important;}
.tag-btn.active::before,.mood-btn.active::before,.inst-btn.active::before,.genre-btn.active::before{display:none;}
/* personal center - better readability */
.me-tab{text-shadow:0 1px 3px rgba(0,0,0,0.6);}
.me-tab.text-white\/30{color:rgba(255,255,255,0.55) !important;}
#meTabContent .text-white\/15{color:rgba(255,255,255,0.35) !important;}
#meTabContent .text-white\/30{color:rgba(255,255,255,0.65) !important;}
#meTabContent .text-white\/60{color:rgba(255,255,255,0.8) !important;}
/* time picker scroll */
.time-item{display:flex;align-items:center;justify-content:center;height:40px;scroll-snap-align:center;font-size:24px;font-weight:700;color:rgba(255,255,255,0.25);transition:color 0.15s;cursor:pointer;font-variant-numeric:tabular-nums;font-family:'SF Mono',Monaco,'Courier New',monospace;}
.time-item.active{color:#fff;}
/* legal fullscreen */
#settingsModal.legal-fullscreen{background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
#settingsModal.legal-fullscreen #settingsModalInner{border-radius:0;max-width:none;}
.legal-scroll::-webkit-scrollbar{width:5px;}
.legal-scroll::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px;}
.legal-scroll::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px;}
.legal-scroll::-webkit-scrollbar-thumb:hover{background:#a1a1a1;}

/* market tabs */
.market-tab{color:rgba(255,255,255,0.45);background:transparent;}
.market-tab:hover{color:rgba(255,255,255,0.75);}
.market-tab-active{color:#fff !important;background:rgba(255,255,255,0.1) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

/* beat list row */
.beat-row{transition:background 0.15s;}
.beat-row:hover{background:rgba(255,255,255,0.03);}

/* download button pulse */
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(245,158,11,0.4)}70%{box-shadow:0 0 0 10px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}
.btn-pulse{animation:pulse-ring 2s ease-in-out infinite;}

/* ── Inbox / Messages ────────────────────────── */
.inbox-section-title{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.2);padding:14px 18px 6px;}
.inbox-conv-item{position:relative;transition:background 0.12s ease;cursor:pointer;padding:12px 18px;margin:1px 8px;border-radius:12px;display:flex;align-items:center;gap:14px;}
.inbox-conv-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;border-radius:0 3px 3px 0;background:rgba(14,165,233,0.8);transition:height 0.2s ease;}
.inbox-conv-item:hover{background:rgba(255,255,255,0.04);}
.inbox-conv-item:hover::before{height:28px;}
.inbox-conv-active{background:rgba(14,165,233,0.1) !important;}
.inbox-conv-active::before{height:42px !important;background:rgba(14,165,233,0.8) !important;}
.inbox-conv-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,rgba(99,102,241,0.7),rgba(79,70,229,0.9));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;font-weight:600;color:#fff;position:relative;}
.inbox-conv-meta{flex:1;min-width:0;}
.inbox-conv-name{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px;display:flex;align-items:center;gap:6px;}
.inbox-conv-preview{font-size:11px;color:rgba(255,255,255,0.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.inbox-conv-time{font-size:10px;color:rgba(255,255,255,0.25);flex-shrink:0;margin-left:8px;align-self:flex-start;margin-top:3px;}
.inbox-badge{min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;line-height:1;}
.msg-bubble{max-width:70%;word-break:break-word;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.2);animation:msgIn 0.3s ease-out;padding:12px 16px;}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (min-width: 768px) { .msg-bubble { max-width: 56%; } }
.msg-sent{background:linear-gradient(135deg,rgba(14,165,233,0.22),rgba(56,189,248,0.18));border-radius:22px 22px 6px 22px;margin-left:auto;border:1px solid rgba(14,165,233,0.1);}
.msg-received{background:rgba(255,255,255,0.04);border-radius:22px 22px 22px 6px;border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.msg-date-divider{display:flex;align-items:center;gap:12px;padding:10px 0;}
.msg-date-divider::before,.msg-date-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.05);}
.msg-date-label{font-size:10px;color:rgba(255,255,255,0.25);font-weight:500;white-space:nowrap;letter-spacing:0.04em;}
.msg-time{font-size:10px;color:rgba(255,255,255,0.3);}
.msg-sent .msg-time{color:rgba(255,255,255,0.38);}
.msg-read-check{font-size:10px;color:rgba(255,255,255,0.22);}
.msg-read-check.read{color:rgba(52,199,89,0.7);}
.inbox-empty-icon{font-size:64px;color:rgba(255,255,255,0.08);display:block;margin-bottom:16px;animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.inbox-empty-title{font-size:16px;color:rgba(255,255,255,0.45);font-weight:600;font-family:Georgia,serif;letter-spacing:0.04em;margin-bottom:4px;}
.inbox-empty-sub{font-size:12px;color:rgba(255,255,255,0.25);}
.inbox-input-wrap{border-top:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.inbox-input{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:24px;transition:border-color 0.2s,background 0.2s;}
.inbox-input:focus{border-color:rgba(14,165,233,0.3);background:rgba(255,255,255,0.08);outline:none;}
.inbox-send-btn{background:#2563eb !important;color:#fff !important;border:none !important;transition:all 0.2s ease;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.inbox-send-btn i{color:#fff;}
.inbox-send-btn:hover{background:#1d4ed8 !important;box-shadow:0 0 18px rgba(37,99,235,0.35) !important;}
.chat-header-wrap{background:rgba(0,0,0,0.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.chat-online{font-size:10px;color:#34c759;margin-top:1px;}

/* ── Inbox Sidebar (C layout + A-style UI) ────── */
.inbox-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,0.55);}
.inbox-sidebar{position:fixed;top:0;left:0;height:100vh;width:100%;max-width:960px;z-index:60;background:rgba(12,12,26,0.98);border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;}
.inbox-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.05);flex-shrink:0;}
.inbox-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:70;background:transparent;transition:background 0.15s;}
.inbox-resize-handle:hover,.inbox-resize-handle.dragging{background:rgba(14,165,233,0.3);}
@media (max-width: 767px) {
  .inbox-sidebar{max-width:100%;}
  .inbox-resize-handle{display:none;}
}

/* ── Notification Sidebar (Right slide, below nav) ─ */
.notif-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,0.55);}
.notif-sidebar{position:fixed;top:64px;right:16px;width:400px;max-height:calc(100vh - 80px);z-index:60;background:rgba(15,15,28,0.98);border:1px solid rgba(255,255,255,0.08);border-radius:16px;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,0.5);}
.notif-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.05);flex-shrink:0;}
@media (max-width: 767px) {
  .notif-sidebar{top:56px;right:4px;left:4px;width:auto;max-height:calc(100vh - 64px);border-radius:14px;}
}


/* ── Vinyl Record Player on Beat Detail ────────── */
@keyframes vinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.vinyl-player {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.vinyl-disc {
  position: absolute; inset: 0;
  border-radius: 50%; overflow: hidden;
  box-shadow:
    0 0 0 4px #1a1a1a,
    0 0 0 6px #0d0d0d,
    0 8px 32px rgba(0,0,0,0.5);
}
.vinyl-disc.spinning {
  animation: vinylSpin 2s linear infinite;
}
.vinyl-disc.paused {
  animation-play-state: paused;
}

.vinyl-cover-img {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
}
.vinyl-cover-img img {
  width: 100%; height: 100%; object-fit: cover;
}

.vinyl-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle at center,
    transparent 0%, transparent 14.5%,
    rgba(0,0,0,0.18) 15%, rgba(0,0,0,0.04) 15.5%,
    rgba(0,0,0,0.22) 16.5%, rgba(0,0,0,0.03) 17%,
    rgba(0,0,0,0.16) 18%, rgba(0,0,0,0.05) 18.5%,
    rgba(0,0,0,0.25) 20%, rgba(0,0,0,0.03) 20.5%,
    rgba(0,0,0,0.18) 22%, rgba(0,0,0,0.05) 22.5%,
    rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.03) 25.5%,
    rgba(0,0,0,0.17) 28%, rgba(0,0,0,0.05) 28.5%,
    rgba(0,0,0,0.24) 32%, rgba(0,0,0,0.03) 32.5%,
    rgba(0,0,0,0.16) 36%, rgba(0,0,0,0.06) 36.5%,
    rgba(0,0,0,0.22) 41%, rgba(0,0,0,0.03) 41.5%,
    rgba(0,0,0,0.18) 46%, rgba(0,0,0,0.05) 46.5%,
    rgba(0,0,0,0.20) 52%, rgba(0,0,0,0.03) 52.5%,
    rgba(0,0,0,0.17) 58%, rgba(0,0,0,0.06) 58.5%,
    rgba(0,0,0,0.24) 65%, rgba(0,0,0,0.03) 65.5%,
    rgba(0,0,0,0.16) 72%, rgba(0,0,0,0.05) 72.5%,
    rgba(0,0,0,0.22) 80%, rgba(0,0,0,0.03) 80.5%,
    rgba(0,0,0,0.18) 88%, rgba(0,0,0,0.06) 88.5%,
    rgba(0,0,0,0.25) 95%, rgba(0,0,0,0.04) 95.5%,
    rgba(0,0,0,0.15) 98%, rgba(0,0,0,0.03) 98.5%
  );
}
.vinyl-shine {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.06) 0%, transparent 40%,
    transparent 60%, rgba(0,0,0,0.15) 100%
  );
}

/* Tonearm */
.vinyl-tonearm {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  top: 8px; right: 20px;
  width: 130px; height: 150px;
  transform-origin: 106px 24px;
  transform: rotate(6deg);
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.vinyl-tonearm.playing {
  transform: rotate(44deg);
}
.vinyl-tonearm .ta-pivot {
  position: absolute; top: 16px; left: 98px;
  width: 18px; height: 18px; border-radius: 50%; z-index: 20;
  background: linear-gradient(135deg, #777, #444 40%, #222 70%, #555);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.vinyl-tonearm .ta-cw {
  position: absolute; top: 8px; left: 118px;
  width: 16px; height: 16px; border-radius: 50%; z-index: 19;
  background: linear-gradient(135deg, #888, #555 30%, #333 60%, #666);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.vinyl-tonearm .ta-arm {
  position: absolute; top: 20px; left: -2px;
  width: 108px; height: 7px; z-index: 18; border-radius: 3.5px;
  background: linear-gradient(180deg,
    rgba(200,200,210,0.9) 0%,
    rgba(180,180,190,0.85) 15%,
    rgba(140,140,150,0.8) 40%,
    rgba(100,100,110,0.75) 60%,
    rgba(60,60,70,0.7) 100%
  );
  transform: rotate(-4deg); transform-origin: right center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}
.vinyl-tonearm .ta-headshell {
  position: absolute; top: -1px; left: -16px;
  width: 20px; height: 28px; z-index: 17;
  background: linear-gradient(160deg, #999 0%, #777 20%, #555 50%, #666 100%);
  border-radius: 2px 4px 3px 2px;
  transform: rotate(22deg); transform-origin: right center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.vinyl-tonearm .ta-cart {
  position: absolute; top: 22px; left: -10px;
  width: 14px; height: 9px; z-index: 16;
  background: linear-gradient(180deg, #555, #333 40%, #222);
  border-radius: 1px 1px 2px 2px;
  transform: rotate(18deg); transform-origin: left top;
}
.vinyl-tonearm .ta-stylus {
  position: absolute; top: 30px; left: -2px;
  width: 3px; height: 10px; z-index: 15;
  background: linear-gradient(180deg, #ddd, #ccc 40%, #bbb);
  border-radius: 1px;
  transform: rotate(5deg); transform-origin: center top;
  box-shadow: 0 0 1px rgba(255,255,255,0.3);
}

#pg-verify input[type="text"]{visibility:visible!important;opacity:1!important;pointer-events:auto!important;-webkit-appearance:none!important;appearance:none!important;}
#verifyNameInput::placeholder,#verifyIdInput::placeholder{color:rgba(255,255,255,0.3);}

/* Ensure buttons are clickable */
button, .genre-btn, [onclick] { position: relative; z-index: 1; }
.liquid-glass button, button.liquid-glass { overflow: visible; }

/* Force pointer events on upload action buttons */
#pg-upload button[onclick] { pointer-events: auto !important; }
#pg-upload [onclick] { pointer-events: auto !important; }
#btnPublishBeat, #btnOpenTimePicker, #notifBtn { pointer-events: auto !important; position: relative; z-index: 2; }
#notifBtn.liquid-glass::before { pointer-events: none; }

/* ── Notifications ────────────────────────────── */
.notif-panel{max-width:420px;width:100%;}
.notif-header{background:rgba(20,20,30,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.notif-header h3{font-family:Georgia,serif;letter-spacing:0.04em;}
.notif-item{transition:background 0.15s;position:relative;}
.notif-item:hover{background:rgba(255,255,255,0.03);}
.notif-item.unread{background:rgba(14,165,233,0.06);}
.notif-item.unread::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:rgba(14,165,233,0.7);}
.notif-icon-circle{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}
.notif-icon-circle.sale{background:rgba(34,197,94,0.12);color:#34c759;}
.notif-icon-circle.withdraw{background:rgba(245,158,11,0.12);color:#f59e0b;}
.notif-icon-circle.system{background:rgba(99,102,241,0.12);color:#818cf8;}
.notif-icon-circle.mix_completed{background:rgba(34,197,94,0.12);color:#34c759;}
.notif-icon-circle.mix_failed{background:rgba(239,68,68,0.12);color:#ef4444;}
.notif-icon-circle.mix_spend{background:rgba(168,85,247,0.12);color:#a855f7;}
.notif-empty{text-align:center;padding:32px 20px;}
.notif-empty i{font-size:48px;color:rgba(255,255,255,0.06);margin-bottom:12px;display:block;}
.notif-empty p{font-size:13px;color:rgba(255,255,255,0.3);}
.notif-actions{display:flex;gap:8px;}
.notif-action-btn{font-size:11px;padding:4px 10px;border-radius:6px;transition:all 0.15s;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.45);border:none;cursor:pointer;}
.notif-action-btn:hover{background:rgba(255,255,255,0.08);color:#fff;}
.notif-action-btn.danger{color:rgba(239,68,68,0.6);}
.notif-action-btn.danger:hover{background:rgba(239,68,68,0.1);color:#ef4444;}
.notif-delete-btn{opacity:0;transition:opacity 0.15s;background:none;border:none;color:rgba(255,255,255,0.25);cursor:pointer;padding:4px;border-radius:6px;}
.notif-delete-btn:hover{color:#ef4444;background:rgba(239,68,68,0.08);}
.notif-item:hover .notif-delete-btn{opacity:1;}
.notif-body{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5;}
.notif-time{font-size:10px;color:rgba(255,255,255,0.28);}

/* ── Legal / Agreement Modal ────────────────────────── */
.legal-overlay{background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.legal-sidebar{width:200px;flex-shrink:0;background:rgba(0,0,0,0.3);border-right:1px solid rgba(255,255,255,0.04);overflow-y:auto;}
.legal-toc-item{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;font-size:12px;color:rgba(255,255,255,0.45);cursor:pointer;transition:all 0.2s;margin-bottom:2px;background:none;border:none;}
.legal-toc-item:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.04);}
.legal-toc-item.active{color:#34c759;background:rgba(52,199,89,0.1);font-weight:600;}
.legal-progress{height:2px;background:rgba(255,255,255,0.05);}
.legal-progress-bar{height:100%;background:#34c759;width:0;transition:width 0.15s linear;}
.legal-content h2{font-size:15px;font-weight:600;color:#fff;margin-bottom:12px;letter-spacing:0.02em;}
.legal-content h3{font-size:13px;font-weight:600;color:rgba(255,255,255,0.7);margin:18px 0 8px;}
.legal-content h4{font-size:12px;font-weight:500;color:rgba(255,255,255,0.55);margin:12px 0 6px;}
.legal-content p{font-size:12px;line-height:1.8;color:rgba(255,255,255,0.5);margin-bottom:8px;}
.legal-highlight{background:rgba(52,199,89,0.06);border:1px solid rgba(52,199,89,0.15);border-radius:10px;padding:12px 16px;margin:14px 0;}
.legal-highlight .hl-label{font-size:10px;color:#34c759;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;}
.legal-highlight p{color:rgba(255,255,255,0.65) !important;font-size:11px !important;}
.legal-sign-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:18px 20px;margin-bottom:14px;transition:border-color 0.2s;}
.legal-sign-card:hover{border-color:rgba(255,255,255,0.12);}
.legal-sign-card .step-num{width:30px;height:30px;border-radius:50%;background:rgba(52,199,89,0.12);color:#34c759;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.legal-sign-card .step-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.legal-sign-card .step-header h4{font-size:13px;color:#fff;font-weight:600;margin:0;}
.legal-sign-card .step-check{margin-top:10px;display:flex;align-items:center;gap:6px;}
.legal-sign-card .step-check input[type=checkbox]{accent-color:#34c759;width:15px;height:15px;cursor:pointer;}
.legal-sign-card .step-check label{font-size:11px;color:rgba(255,255,255,0.45);cursor:pointer;user-select:none;}
.legal-footer{border-top:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.4);}
.legal-footer input[type=checkbox]{accent-color:#34c759;width:16px;height:16px;cursor:pointer;}
.legal-footer label{font-size:12px;color:rgba(255,255,255,0.6);cursor:pointer;}
.legal-footer label strong{color:#fff;}
.legal-footer .btn-agree{padding:8px 28px;border-radius:10px;font-size:13px;font-weight:600;transition:all 0.2s;border:none;cursor:pointer;}
.legal-footer .btn-agree:disabled{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.3);cursor:not-allowed;}
.legal-footer .btn-agree:not(:disabled){background:#34c759;color:#fff;}
.legal-footer .btn-agree:not(:disabled):hover{background:#2db84e;}
.legal-scroll-dark::-webkit-scrollbar{width:4px;}
.legal-scroll-dark::-webkit-scrollbar-track{background:transparent;}
.legal-scroll-dark::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}
.legal-scroll-dark::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18);}