/* ============================================================
   Vapih Studio — Cartoon UI
   ============================================================ */
:root{
  --ink:#211f3a;
  --text:#211f3a;
  --bg:#faf3ff;
  --bg2:#fff;
  --panel:#ffffff;
  --soft:#f3edff;
  --muted:#8b86a8;
  --grape:#7c5cff;
  --grape-d:#5b3ae0;
  --pink:#ff5ca8;
  --sky:#38bdf8;
  --yellow:#ffd23f;
  --mint:#2fe0a0;
  --coral:#ff7a59;
  --orange:#ff9f1c;
  --line:#211f3a;
  --radius:18px;
  --shadow:3px 3px 0 var(--ink);
  --shadow-lg:5px 6px 0 var(--ink);
  --bw:2.5px;
  --font:"Baloo 2",system-ui,sans-serif;
  --font-head:"Fredoka",system-ui,sans-serif;
}
[data-theme="dark"]{
  --ink:#0c0a18;
  --text:#f1edff;
  --bg:#1c1830;
  --bg2:#332e52;
  --panel:#2a2547;
  --soft:#3a3460;
  --muted:#bdb6dd;
  --line:#0c0a18;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:var(--font);
  background:
    radial-gradient(circle at 12% 12%, rgba(124,92,255,.16), transparent 40%),
    radial-gradient(circle at 88% 18%, rgba(255,92,168,.14), transparent 40%),
    radial-gradient(circle at 70% 90%, rgba(56,189,248,.13), transparent 45%),
    var(--bg);
  color:var(--text);
  font-weight:600;
  -webkit-font-smoothing:antialiased;
}
button{font-family:var(--font);font-weight:700;cursor:pointer;color:var(--text);}
input,select,textarea{color:var(--text);}
::placeholder{color:var(--muted);opacity:1;}
#app{display:flex;flex-direction:column;height:100vh;}

/* ---- TOP BAR ---- */
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;background:var(--panel);
  border-bottom:var(--bw) solid var(--line);
  box-shadow:0 4px 0 rgba(33,31,58,.08);
  z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-logo{height:40px;width:auto;display:block;}
.logo-dark{display:none;}
[data-theme="dark"] .logo-light{display:none;}
[data-theme="dark"] .logo-dark{display:block;}
.free-pill{
  font-size:10px;font-weight:800;background:var(--mint);color:#08381f;
  padding:3px 8px;border-radius:99px;border:2px solid var(--line);letter-spacing:.5px;
  transform:rotate(3deg);
}
.topbar-props{
  flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:42px;
  padding:0 8px;overflow-x:auto;
}
.muted{color:var(--muted);font-weight:600;}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.divider{width:var(--bw);height:26px;background:var(--soft);border-radius:2px;}

.ico-btn{
  width:40px;height:40px;border-radius:13px;background:var(--bg2);
  border:var(--bw) solid var(--line);box-shadow:var(--shadow);font-size:18px;
  display:grid;place-items:center;transition:transform .08s,box-shadow .08s;
}
.ico-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:var(--shadow-lg);}
.ico-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.ico-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:1px 1px 0 var(--ink);}

.pill-btn{
  height:40px;padding:0 16px;border-radius:13px;background:var(--bg2);
  border:var(--bw) solid var(--line);box-shadow:var(--shadow);font-size:14px;
  display:inline-flex;align-items:center;gap:6px;transition:transform .08s,box-shadow .08s;white-space:nowrap;
}
.pill-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-lg);}
.pill-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.pill-btn.primary{background:var(--grape);color:#fff;}
.pill-btn.sm{height:34px;padding:0 12px;font-size:13px;}
.pill-btn.block{width:100%;justify-content:center;height:46px;font-size:16px;margin-top:6px;}

.menu-wrap{position:relative;}
.menu{
  position:absolute;top:48px;right:0;min-width:230px;background:var(--panel);
  border:var(--bw) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:8px;display:none;flex-direction:column;gap:3px;z-index:50;
}
.menu.open{display:flex;animation:popmenu .14s ease;}
.menu button{
  text-align:left;padding:10px 12px;border-radius:11px;background:transparent;border:none;font-size:14px;
}
.menu button:hover{background:var(--soft);}
.menu-sep{height:2px;background:var(--soft);margin:4px 2px;border-radius:2px;}

/* ---- WORKSPACE ---- */
.workspace{flex:1;display:flex;min-height:0;}

/* ---- TOOLBAR ---- */
.toolbar{
  width:64px;background:var(--panel);border-right:var(--bw) solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;
}
.tool{
  width:44px;height:44px;border-radius:13px;background:var(--bg2);
  border:var(--bw) solid var(--line);box-shadow:var(--shadow);font-size:20px;
  display:grid;place-items:center;transition:transform .08s,box-shadow .08s,background .1s;
}
.tool:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-lg);}
.tool:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.tool.active{background:var(--grape);box-shadow:var(--shadow-lg);}
.tool-spacer{flex:1;}

/* ---- STAGE ---- */
.stage{flex:1;position:relative;overflow:hidden;display:grid;place-items:center;}
#main-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;}

/* welcome */
.welcome{text-align:center;max-width:760px;padding:24px;z-index:2;}
.welcome h1{font-family:var(--font-head);font-size:clamp(32px,5vw,52px);font-weight:600;line-height:1.05;}
.rainbow{background:linear-gradient(90deg,var(--grape),var(--pink),var(--orange),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent;}
.welcome .sub{color:var(--muted);font-size:17px;margin:12px 0 28px;}
.studio-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.scard{
  width:200px;background:var(--panel);border:var(--bw) solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-lg);padding:22px 18px;text-align:center;transition:transform .12s;
}
.scard:hover{transform:translateY(-6px) rotate(-1deg);}
.scard-emoji{font-size:44px;margin-bottom:8px;}
.scard h3{font-family:var(--font-head);font-size:22px;margin-bottom:4px;}
.scard p{color:var(--muted);font-size:13px;font-weight:600;}
.blank-row{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.blank-row>span{color:var(--muted);font-size:13px;}
.preset-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.preset-chips button{
  padding:8px 14px;border-radius:99px;background:var(--bg2);border:var(--bw) solid var(--line);
  box-shadow:var(--shadow);font-size:13px;transition:transform .08s;
}
.preset-chips button:hover{transform:translate(-1px,-1px);}
.blank-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
.blank-custom input[type=number]{
  width:78px;height:38px;border:var(--bw) solid var(--line);border-radius:11px;
  text-align:center;font-weight:700;font-family:var(--font);background:var(--bg2);color:var(--text);
}
.blank-custom input[type=color]{width:42px;height:38px;border:var(--bw) solid var(--line);border-radius:11px;background:var(--bg2);cursor:pointer;padding:3px;}

/* tool options + zoom */
.tool-options{
  position:absolute;top:14px;left:14px;z-index:8;background:var(--panel);
  border:var(--bw) solid var(--line);border-radius:15px;box-shadow:var(--shadow-lg);
  padding:8px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:calc(100% - 28px);
}
.tool-options label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.tool-options input[type=range]{width:90px;}
.tool-options input[type=color]{width:34px;height:30px;border:var(--bw) solid var(--line);border-radius:9px;padding:2px;background:var(--bg2);cursor:pointer;}

.zoombar{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:4px;background:var(--panel);
  border:var(--bw) solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:4px;
}
.zoombar button{width:32px;height:32px;border-radius:9px;border:none;background:transparent;font-size:18px;}
.zoombar button:hover{background:var(--soft);}
.zoombar span{min-width:52px;text-align:center;font-size:13px;}

.timeline{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:9;width:min(640px,90%);
  display:flex;align-items:center;gap:12px;background:var(--panel);
  border:var(--bw) solid var(--line);border-radius:15px;box-shadow:var(--shadow-lg);padding:8px 14px;
}
.timeline .time{font-family:monospace;font-weight:700;min-width:48px;}
.timeline input[type=range]{flex:1;}

/* ---- SIDEBAR ---- */
.sidebar{
  width:284px;background:var(--panel);border-left:var(--bw) solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.side-tabs{display:flex;gap:6px;padding:10px;border-bottom:var(--bw) solid var(--soft);}
.side-tab{
  flex:1;height:38px;border-radius:11px;background:var(--bg2);border:var(--bw) solid var(--line);
  box-shadow:var(--shadow);font-size:13px;
}
.side-tab.active{background:var(--yellow);}
.tab-pane{display:none;flex-direction:column;overflow-y:auto;flex:1;padding:12px;gap:10px;}
.tab-pane.active{display:flex;}
.panel-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-head);font-size:15px;margin-top:4px;}
.mini-actions{display:flex;gap:4px;}
.mini-actions button{
  width:30px;height:30px;border-radius:9px;background:var(--bg2);border:2px solid var(--line);
  box-shadow:2px 2px 0 var(--ink);font-size:14px;
}
.mini-actions button:hover{background:var(--soft);}
.reset-link{background:none;border:none;color:var(--grape);font-size:12px;text-decoration:underline;}

.layer-list{display:flex;flex-direction:column;gap:7px;}
.layer-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:13px;
  background:var(--bg2);border:2px solid var(--line);box-shadow:2px 2px 0 var(--ink);cursor:pointer;
}
.layer-item.active{background:var(--soft);box-shadow:3px 3px 0 var(--grape);border-color:var(--grape);}
.layer-thumb{
  width:34px;height:34px;border-radius:9px;background:var(--grape);color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-size:11px;font-weight:800;border:2px solid var(--line);overflow:hidden;
}
.layer-thumb img{width:100%;height:100%;object-fit:cover;}
.layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.layer-name input{width:100%;border:none;background:transparent;font:inherit;color:inherit;}
.layer-btns{display:flex;gap:3px;}
.layer-btns span{cursor:pointer;font-size:14px;opacity:.8;width:22px;text-align:center;}
.layer-btns span:hover{opacity:1;}

.filter-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.filter-presets button{
  padding:9px;border-radius:11px;background:var(--bg2);border:2px solid var(--line);
  box-shadow:2px 2px 0 var(--ink);font-size:12px;
}
.filter-presets button:hover{background:var(--soft);transform:translate(-1px,-1px);}

.cartoon-select,.cartoon-input{
  width:100%;height:40px;border:var(--bw) solid var(--line);border-radius:12px;background:var(--bg2);
  color:var(--text);font-family:var(--font);font-weight:700;padding:0 12px;font-size:14px;
}
.cartoon-input{margin-bottom:6px;}

.sliders{display:flex;flex-direction:column;gap:11px;}
.slider-row label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:3px;}
.slider-row label b{color:var(--text);}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;
  background:var(--soft);border:2px solid var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--grape);
  border:2px solid var(--line);cursor:pointer;box-shadow:1px 1px 0 var(--ink);
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--grape);border:2px solid var(--line);cursor:pointer;}

/* top contextual props */
.prop{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);background:var(--soft);border:2px solid var(--line);border-radius:11px;padding:4px 8px;}
.prop input,.prop select{
  border:none;background:var(--bg2);border-radius:7px;height:28px;padding:0 6px;font:inherit;
  font-size:13px;color:var(--text);font-weight:700;
}
.prop input[type=number]{width:62px;}
.prop input[type=text]{width:130px;}
.prop input[type=color]{width:30px;padding:2px;cursor:pointer;}
.prop-btn{height:32px;padding:0 10px;border-radius:9px;background:var(--bg2);border:2px solid var(--line);box-shadow:2px 2px 0 var(--ink);font-size:13px;}
.prop-btn:hover{background:var(--soft);}

/* ---- MODALS ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,16,40,.45);backdrop-filter:blur(3px);z-index:90;}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;
  width:min(460px,92vw);max-height:86vh;overflow-y:auto;background:var(--panel);
  border:var(--bw) solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:18px;
  animation:pop .16s ease;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.modal-head h3{font-family:var(--font-head);font-size:22px;}
.modal-x{width:34px;height:34px;border-radius:10px;background:var(--bg2);border:2px solid var(--line);box-shadow:2px 2px 0 var(--ink);font-size:15px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px;}
.field>span{display:flex;justify-content:space-between;color:var(--muted);}
.field>span b{color:var(--text);}
.export-dims{text-align:center;color:var(--muted);font-size:13px;margin-bottom:6px;}
.sticker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.sticker-grid button{font-size:26px;background:transparent;border:none;border-radius:10px;padding:5px;transition:transform .08s;}
.sticker-grid button:hover{background:var(--soft);transform:scale(1.2);}
.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.shape-grid button{aspect-ratio:1;font-size:34px;background:var(--bg2);border:var(--bw) solid var(--line);border-radius:15px;box-shadow:var(--shadow);color:var(--grape);}
.shape-grid button:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-lg);}

/* ---- TOASTS ---- */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px;}
.toast{
  background:var(--panel);border:var(--bw) solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);
  padding:11px 16px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;animation:slidein .2s ease;
}
.toast.ok{border-left:7px solid var(--mint);}
.toast.err{border-left:7px solid var(--coral);}
.toast.info{border-left:7px solid var(--sky);}

@keyframes pop{from{transform:translate(-50%,-50%) scale(.9);opacity:0;}to{opacity:1;}}
@keyframes popmenu{from{transform:translateY(-6px);opacity:0;}}
@keyframes slidein{from{transform:translateX(40px);opacity:0;}}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--grape);border-radius:99px;border:2px solid var(--panel);}
::-webkit-scrollbar-track{background:transparent;}

/* ════ v2 additions ════ */

/* mode pill */
.mode-pill{
  font-size:11px;font-weight:800;background:var(--sky);color:#04293c;
  padding:3px 10px;border-radius:99px;border:2px solid var(--line);letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:4px;
}

/* welcome extras */
.resume-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;}
.muted-inline{opacity:.75;font-size:.85em;margin-left:4px;}
.drop-hint{color:var(--muted);font-size:12.5px;margin-top:6px;}

/* inline text editor */
.text-editor{
  position:fixed;z-index:60;transform:translate(-50%,-50%);
  background:var(--panel);color:var(--text);
  border:var(--bw) solid var(--grape);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:10px 14px;font-weight:700;resize:none;outline:none;line-height:1.18;
  text-align:center;overflow:hidden;
}
[data-theme="dark"] .text-editor{color:#efeaff;}

/* switch toggle */
.switch{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer;}
.switch input{opacity:0;width:0;height:0;}
.switch span{
  position:absolute;inset:0;background:var(--soft);border:2px solid var(--line);
  border-radius:99px;transition:background .15s;
}
.switch span::before{
  content:"";position:absolute;left:2px;top:1.5px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--line);transition:transform .15s;
}
.switch input:checked + span{background:var(--mint);}
.switch input:checked + span::before{transform:translateX(18px);}

/* FX panel bits */
.fx-block{display:flex;flex-direction:column;gap:9px;padding:4px 2px 8px;}
.fx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.fx-row input[type=color]{width:36px;height:30px;border:2px solid var(--line);border-radius:9px;padding:2px;background:var(--bg2);cursor:pointer;}
.fx-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}
.fx-quick button{
  flex:1;min-width:96px;padding:8px 6px;border-radius:11px;background:var(--bg2);
  border:2px solid var(--line);box-shadow:2px 2px 0 var(--ink);font-size:12px;
}
.fx-quick button:hover{background:var(--soft);transform:translate(-1px,-1px);}
.align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.align-grid button{
  height:36px;border-radius:10px;background:var(--bg2);border:2px solid var(--line);
  box-shadow:2px 2px 0 var(--ink);font-size:16px;
}
.align-grid button:hover{background:var(--soft);transform:translate(-1px,-1px);}
.pane-hint{color:var(--muted);font-size:11.5px;font-weight:600;line-height:1.45;}
.mo-num{
  width:64px;height:34px;border:2px solid var(--line);border-radius:9px;background:var(--bg2);
  color:var(--text);font-family:var(--font);font-weight:700;text-align:center;font-size:13px;
}
[data-theme="dark"] .mo-num{color:#efeaff;}
.cartoon-select.slim{flex:1;height:36px;font-size:13px;}

/* layer extras */
.layer-item.dragging{opacity:.5;}
.layer-item.drop-target{border-color:var(--pink);box-shadow:3px 3px 0 var(--pink);}
.motion-dot{font-size:10px;}

/* tool options extras */
.opt-hint{font-size:12px;color:var(--muted);font-weight:700;}
.aspect-chips{display:flex;gap:5px;}
.aspect-chips button{
  padding:6px 10px;border-radius:99px;background:var(--bg2);border:2px solid var(--line);
  font-size:12px;box-shadow:2px 2px 0 var(--ink);
}
.aspect-chips button.on{background:var(--yellow);}
.tool-options select{
  height:32px;border:2px solid var(--line);border-radius:9px;background:var(--bg2);
  color:var(--text);font-family:var(--font);font-weight:700;font-size:12.5px;padding:0 6px;
}
[data-theme="dark"] .tool-options select{color:#efeaff;}

/* timeline extras */
.tl-field{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);}
.tl-field input{
  width:56px;height:32px;border:2px solid var(--line);border-radius:9px;background:var(--bg2);
  color:var(--text);font-family:var(--font);font-weight:700;text-align:center;font-size:13px;
}
[data-theme="dark"] .tl-field input{color:#efeaff;}
.tl-select{
  height:34px;border:2px solid var(--line);border-radius:10px;background:var(--bg2);
  color:var(--text);font-family:var(--font);font-weight:700;font-size:12.5px;padding:0 6px;
}
[data-theme="dark"] .tl-select{color:#efeaff;}
.tl-btn{
  width:34px;height:34px;border-radius:10px;background:var(--bg2);border:2px solid var(--line);
  box-shadow:2px 2px 0 var(--ink);font-size:14px;display:grid;place-items:center;
}
.tl-btn:hover{background:var(--soft);transform:translate(-1px,-1px);}

/* property mini buttons */
.prop-mini{
  width:28px;height:28px;border-radius:8px;background:var(--bg2);border:2px solid var(--line);
  font-size:13px;display:inline-grid;place-items:center;
}
.prop-mini.on{background:var(--yellow);}

/* shortcuts modal */
.kbd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;font-size:12.5px;color:var(--muted);}
.kbd-grid b{
  display:inline-block;background:var(--soft);border:2px solid var(--line);border-radius:7px;
  padding:1px 7px;margin-right:5px;color:var(--text);font-size:11.5px;box-shadow:1.5px 1.5px 0 var(--ink);
}
[data-theme="dark"] .kbd-grid b{color:#efeaff;}

/* grid button active state */
.tool#btn-grid.active{background:var(--yellow);}

/* side tabs (icon style) */
.side-tab{font-size:17px;}

/* dark-theme input fixes */
[data-theme="dark"] .blank-custom input[type=number],
[data-theme="dark"] .prop input,[data-theme="dark"] .prop select,
[data-theme="dark"] .cartoon-select,[data-theme="dark"] .cartoon-input{color:#efeaff;}

/* responsive */
@media (max-width:820px){
  .sidebar{width:230px;}
  .topbar-props{display:none;}
}
/* ═══════════════════════════════════════════════════════════════
   ✦ VAPIH LEGENDARY THEME TOGGLE ✦  (shared sun⇄moon sky switch)
   Palette-agnostic · keyed off [data-theme="dark"] on <html>
═══════════════════════════════════════════════════════════════ */
.vp-toggle{position:relative;width:64px;height:32px;border-radius:100px;border:2.5px solid var(--line,#221d3a);background:linear-gradient(160deg,#8fd6ff,#5fb8ff 55%,#3a93f0);cursor:pointer;padding:0;flex:0 0 auto;overflow:hidden;box-shadow:inset 0 2px 5px rgba(255,255,255,.45),2px 2px 0 var(--line,#221d3a);transition:background .5s ease,transform .15s ease,box-shadow .15s ease;vertical-align:middle;}
.vp-toggle:hover{transform:translateY(-2px) scale(1.03);}
.vp-toggle:active{transform:scale(.95);}
[data-theme="dark"] .vp-toggle{background:linear-gradient(160deg,#1b1d3a,#2b1d52 60%,#3a2068);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),2px 2px 0 var(--line,#0c0a18);}
.vp-toggle::before{content:"";position:absolute;top:8px;left:9px;width:2.5px;height:2.5px;border-radius:50%;background:#fff;box-shadow:7px 5px 0 -.5px rgba(255,255,255,.85),15px -3px 0 -1px rgba(255,255,255,.7),21px 7px 0 -1px rgba(255,255,255,.6),12px 12px 0 -1px rgba(255,255,255,.55);opacity:0;transition:opacity .4s ease;pointer-events:none;}
[data-theme="dark"] .vp-toggle::before{opacity:1;}
.vp-toggle .vp-tt-thumb{position:absolute;top:50%;left:4px;width:23px;height:23px;transform:translate(32px,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d6,#ffd24d 60%,#ffb02e);box-shadow:0 0 10px 2px rgba(255,200,70,.7),inset -2px -2px 3px rgba(180,120,0,.3);transition:transform .5s cubic-bezier(.34,1.7,.5,1),background .5s ease,box-shadow .5s ease;pointer-events:none;}
.vp-toggle .vp-tt-thumb::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,transparent 62%,#ffd24d 62%,#ffd24d 70%,transparent 71%);-webkit-mask:repeating-conic-gradient(#000 0 18deg,transparent 18deg 36deg);mask:repeating-conic-gradient(#000 0 18deg,transparent 18deg 36deg);opacity:.9;animation:vpSun 9s linear infinite;}
@keyframes vpSun{to{transform:rotate(360deg);}}
[data-theme="dark"] .vp-toggle .vp-tt-thumb{transform:translate(0,-50%);background:radial-gradient(circle at 35% 30%,#fdfbf0,#dfe3ef 65%,#c3c9dd);box-shadow:inset -5px -3px 0 -1px rgba(150,160,190,.55),0 0 8px 1px rgba(220,230,255,.4);}
[data-theme="dark"] .vp-toggle .vp-tt-thumb::before{opacity:0;}
@media (prefers-reduced-motion: reduce){.vp-toggle .vp-tt-thumb::before{animation:none;}.vp-toggle,.vp-toggle .vp-tt-thumb{transition-duration:.05ms;}}