.switch-slider { position:absolute; inset:0; border-radius:20px; background:#b9c3d0; transition:background var(--ease); cursor:pointer; }
.switch-slider::before { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; border-radius:50%; background:white; transition:transform var(--ease); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .switch-slider { background:#2d78e6; }
.switch input:checked + .switch-slider::before { transform:translateX(14px); }
.markdown-tools { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 6px; }
.markdown-tool { border:1px solid #d7dfe9; background:#fff; color:#576679; min-width:28px; height:27px; border-radius:5px; font-size:10px; font-weight:700; padding:0 7px; }
.markdown-tool:hover { background:#f0f5fb; border-color:#bccbdd; }
.inspector-card { border:1px solid #d9e1eb; border-radius:9px; background:#fbfcfe; padding:11px; margin-bottom:12px; }
.inspector-card-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.inspector-card-head strong { flex:1; font-size:10px; }
.inspector-card-head .mini-action { width:24px; height:24px; }
.inline-list { display:flex; flex-direction:column; gap:8px; }
.add-inline-btn { width:100%; height:32px; border:1px dashed #c6d1de; color:#607189; background:#f9fbfd; border-radius:6px; font-size:10px; font-weight:700; }
.add-inline-btn:hover { color:#1f64cc; border-color:#92b8e6; background:#f3f8ff; }
.danger-zone { margin-top:22px; padding-top:14px; border-top:1px solid #e2e7ee; }
.danger-button { width:100%; height:36px; border:1px solid #efc5c9; color:#b73542; background:#fff7f7; border-radius:7px; font-size:10px; font-weight:750; }
.danger-button:hover { background:#fff0f1; }
.char-meter { height:4px; background:#edf1f6; border-radius:4px; overflow:hidden; margin-top:6px; }
.char-meter span { display:block; height:100%; background:#6b9ce0; width:0; transition:width var(--ease), background var(--ease); }
.char-meter span.warn { background:#d5a23c; }
.char-meter span.danger { background:#d2535d; }
.validation-box { border:1px solid #e4d09c; background:#fffaf0; border-radius:7px; padding:9px; color:#73591e; font-size:9px; line-height:1.45; margin-bottom:12px; }
.validation-box.ok { border-color:#b9dec9; background:#f3fbf6; color:#287147; }
.validation-box strong { display:block; margin-bottom:3px; font-size:10px; }

/* ---------- Component picker ---------- */
.picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.picker-item { border:1px solid #d6dfe9; background:white; border-radius:9px; padding:12px; text-align:left; min-height:86px; transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.picker-item:hover { border-color:#8fb6e8; box-shadow:0 5px 14px rgba(36,91,158,.09); transform:translateY(-1px); }
.picker-item .picker-icon { width:30px; height:30px; border-radius:7px; background:#eef5ff; color:#2d6fca; display:grid; place-items:center; margin-bottom:8px; }
.picker-item .picker-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.picker-item strong { display:block; color:#324258; font-size:10px; }
.picker-item span { display:block; margin-top:3px; color:#8290a2; font-size:8px; line-height:1.35; }

/* ---------- Modal / toasts ---------- */
.modal-backdrop { position:fixed; inset:0; z-index:1000; background:rgba(3,10,20,.52); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; }
.modal { width:min(680px,100%); max-height:min(760px, calc(100dvh - 40px)); display:flex; flex-direction:column; background:white; border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid rgba(255,255,255,.5); }
.modal.narrow { width:min(520px,100%); }
.modal-header { min-height:58px; flex:0 0 auto; border-bottom:1px solid #e0e6ee; padding:0 18px; display:flex; align-items:center; gap:12px; }
.modal-header h2 { margin:0; flex:1; font-size:15px; letter-spacing:-.015em; }
.modal-close { width:32px; height:32px; border:0; border-radius:7px; background:#f3f5f8; color:#607086; display:grid; place-items:center; font-size:18px; }
.modal-body { padding:18px; overflow:auto; min-height:0; }
.modal-footer { min-height:58px; flex:0 0 auto; border-top:1px solid #e0e6ee; padding:10px 18px; display:flex; align-items:center; justify-content:flex-end; gap:8px; background:#fbfcfe; }
.btn { min-height:36px; border:1px solid #cbd5e1; background:white; color:#425166; border-radius:7px; padding:0 13px; font-size:10px; font-weight:750; }
.btn:hover { background:#f5f7fa; }
.btn.primary { color:white; background:#2d78e6; border-color:#2d78e6; }
.btn.primary:hover { background:#236bcf; }
.btn.danger { color:#b73542; border-color:#efc5c9; background:#fff7f7; }
.code-output { width:100%; min-height:410px; resize:vertical; border:1px solid #ccd5e1; border-radius:8px; background:#101923; color:#d9e7f8; padding:13px; font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; tab-size:2; }
.toast-stack { position:fixed; z-index:2000; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { min-width:250px; max-width:360px; border-radius:9px; background:#122139; color:white; padding:11px 13px; box-shadow:0 14px 34px rgba(0,0,0,.2); display:flex; gap:9px; align-items:flex-start; font-size:10px; line-height:1.45; animation:toast-in 180ms ease-out; }
.toast.success { border-left:4px solid #5ecb8e; }
.toast.warn { border-left:4px solid #e6b652; }
.toast.error { border-left:4px solid #e36b75; }
@keyframes toast-in { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }

/* ---------- Mobile ---------- */
.mobile-tabs { display:none; }
@media (max-width: 1180px) {
  :root { --sidebar: 278px; --inspector: 322px; }
  .studio-grid { grid-template-columns:var(--sidebar) minmax(390px,1fr) var(--inspector); }
  .preview-stage { padding:28px 20px; }
}
@media (max-width: 940px) {
  .login-shell { grid-template-columns:1fr; }
  .login-hero { min-height:auto; padding:38px 28px 30px; }
  .login-copy { margin:54px 0 24px; }
  .login-copy h1 { font-size:50px; }
  .login-points { display:none; }
  .login-footer { display:none; }
  .login-panel-wrap { min-height:auto; padding:24px 24px 48px; border-left:0; border-top:1px solid rgba(255,255,255,.06); }
  .studio-shell { grid-template-rows:var(--header-h) var(--mobile-tabs-h) minmax(0,1fr); }
  .studio-grid { display:block; min-height:0; position:relative; }
  .mobile-tabs { display:flex; height:var(--mobile-tabs-h); background:white; border-bottom:1px solid var(--line); z-index:45; }
  .mobile-tabs button { flex:1; border:0; border-right:1px solid #e4e9ef; background:white; color:#778598; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; }
  .mobile-tabs button:last-child { border-right:0; }
  .mobile-tabs button.active { color:#1f64cc; box-shadow:inset 0 -2px 0 #2d78e6; background:#f8fbff; }
  .panel { display:none; height:100%; }
  .panel.mobile-active { display:flex; }
  .structure-panel, .inspector-panel { border:0; width:100%; }
  .preview-panel.mobile-active { display:flex; }
  .preview-stage { padding:20px 10px; justify-content:flex-start; }
  .discord-frame { margin:0 auto; }
  .user-copy, .topbar-separator, .save-state { display:none; }
  .topbar { gap:8px; padding:0 10px; }
  .topbar-title span { display:none; }
  .topbar .toolbar-btn span.label { display:none; }
  .topbar .toolbar-btn { width:34px; padding:0; }
}
@media (max-width: 560px) {
  .login-hero { padding:28px 20px 22px; }
  .login-copy { margin:42px 0 14px; }
  .login-copy h1 { font-size:40px; }
  .login-copy p { font-size:14px; }
  .login-panel-wrap { padding:18px 14px 34px; }
  .login-panel { padding:24px 18px; }
  .topbar-title { display:none; }
  .preview-meta { display:none; }
  .discord-frame, .discord-frame.mobile { width:100%; min-width:0; border-radius:8px; padding:20px 12px 28px; }
  .discord-message { grid-template-columns:34px minmax(0,1fr); gap:10px; }
  .dc-avatar { width:34px; height:34px; }
  .dc-container { width:100%; }
  .picker-grid { grid-template-columns:1fr; }
  .modal-backdrop { padding:8px; }
  .modal { max-height:calc(100dvh - 16px); border-radius:10px; }
}

/* Discord select menu */