*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[data-theme=dark]{
  --bg:#06060c;--surface:#10101a;--surface2:#1a1a28;--surface3:#242438;
  --border:#2c2c44;--border2:#3e3e5a;
  --text:#eaeaf4;--text2:#9090ac;--text3:#5e5e78;
  --accent:#7c6df0;--accent2:#a89bfc;--accent-glow:rgba(124,109,240,.15);
  --green:#00c9a0;--green2:#00ddb2;
  --red:#ef7a62;--orange:#fdcb6e;
  --shadow:0 8px 32px rgba(0,0,0,.5);
}
[data-theme=light]{
  --bg:#f0f2f5;--surface:#ffffff;--surface2:#f5f7fa;--surface3:#e9ecf2;
  --border:#dcdfe5;--border2:#c0c6d2;
  --text:#1a1a2e;--text2:#5a6072;--text3:#9098a8;
  --accent:#6c5ce7;--accent2:#5a4bd1;--accent-glow:rgba(108,92,231,.08);
  --green:#00b894;--green2:#00a884;
  --red:#e17055;--orange:#f0932b;
  --shadow:0 4px 16px rgba(0,0,0,.08);
}
:root{
  --radius:12px;--radius-sm:8px;--radius-lg:16px;
  --transition:all .25s cubic-bezier(.4,0,.2,1);
}

html,body{height:100%;overflow:hidden}
/* Selection */
::selection{background:rgba(124,109,240,.3);color:inherit}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;background:var(--bg);color:var(--text);transition:background .4s,color .4s}

/* Global Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-track:hover{background:var(--surface2)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent);border-radius:3px}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* ─── Layout ─── */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ─── Top Bar ─── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;padding-top:calc(12px + var(--safe-top, env(safe-area-inset-top, 0px)));
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  border-bottom:1px solid var(--border);
  flex-shrink:0;z-index:100;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-left h1{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;white-space:nowrap}
.topbar-left h1 span{font-size:20px}
.topbar-left .badge{font-size:10px;color:var(--accent2);background:var(--accent-glow);padding:2px 8px;border-radius:6px;font-weight:600}

/* ─── Stepper ─── */
.stepper{
  display:flex;align-items:center;justify-content:center;
  padding:8px 24px;background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}

/* ─── Steps ─── */
.steps{display:flex;align-items:center;position:relative;gap:0}
.step-tab{
  display:flex;align-items:center;gap:8px;padding:10px 20px;
  font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;
  transition:all .3s ease;position:relative;z-index:1;white-space:nowrap;
}
.step-tab:hover{color:var(--text2);background:var(--surface2);border-radius:8px}
.step-tab.active{color:var(--accent2)}
.step-num{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--surface2);border:2px solid var(--border);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.step-tab:hover .step-num{transform:scale(1.1);box-shadow:0 0 8px rgba(124,109,240,.2)}
.step-tab.active .step-num{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px rgba(124,109,240,.4)}
.step-tab.done .step-num{background:var(--green);border-color:var(--green);color:#fff}
.step-tab.done{color:var(--green)}
/* Progress connector between steps */
.step-tab::after{
  content:'';position:absolute;right:-16px;top:50%;width:32px;height:2px;
  background:var(--border);z-index:0;transition:background .4s ease;
}
.step-tab:last-child::after{display:none}
.step-tab.done::after{background:var(--green)}
.step-slider{
  position:absolute;bottom:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:2px;transition:left .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px var(--accent),0 0 2px var(--accent2);
}

/* ─── Content ─── */
.content{flex:1;overflow:hidden;position:relative}
.page{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.98);
  transition:opacity .4s ease,transform .4s cubic-bezier(.4,0,.2,1);
}
.page.active{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}


/* ─── Template Grid ─── */
.page-tpl{padding:16px 32px;overflow-y:auto}
.page-title{font-size:20px;font-weight:700;margin-bottom:2px}
.page-subtitle{font-size:12px;color:var(--text2);margin-bottom:12px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tpl-card{
  padding:18px 20px;border-radius:var(--radius);cursor:pointer;
  border:1.5px solid var(--border);background:var(--surface);
  transition:var(--transition);position:relative;overflow:hidden;
}
.tpl-card::before{
  content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-glow),transparent);
  opacity:0;transition:opacity .3s;
}
.tpl-card:hover{border-color:transparent;transform:translateY(-4px) scale(1.02);box-shadow:0 12px 40px rgba(124,109,240,.18),0 4px 12px rgba(0,0,0,.3)}
.tpl-card:hover::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,var(--accent),var(--accent2));z-index:-1;opacity:.8}
.tpl-card:hover::before{opacity:.6}
.tpl-card:active{transform:translateY(-1px) scale(.99)}
.tpl-card.active{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-glow),var(--surface));box-shadow:0 0 0 2px var(--accent),0 12px 36px rgba(124,109,240,.25);transform:translateY(-2px)}
.tpl-card.active::before{opacity:1}
.tpl-icon{font-size:32px;margin-bottom:10px;display:block;position:relative;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));transition:transform .3s ease}
.tpl-card:hover .tpl-icon{transform:scale(1.1) rotate(-3deg)}
.tpl-card-name{font-size:14px;font-weight:700;margin-bottom:4px;position:relative}
.tpl-card-desc{font-size:12px;color:var(--text2);line-height:1.4;position:relative}

/* ─── Template Thumbnails ─── */
.tpl-thumb{margin-bottom:10px;position:relative;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tpl-thumb-fallback{width:100%;height:64px;border-radius:6px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}

/* ─── Shimmer Skeleton for Thumbnails ─── */
.tpl-thumb-loading{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);
  background-size:200% 100%;animation:shimmer 1.5s ease infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Stagger animation for grid cards - only on first load */
.tpl-grid-initial .tpl-card:nth-child(1){animation-delay:.02s}
.tpl-grid-initial .tpl-card:nth-child(2){animation-delay:.04s}
.tpl-grid-initial .tpl-card:nth-child(3){animation-delay:.06s}
.tpl-grid-initial .tpl-card:nth-child(4){animation-delay:.08s}
.tpl-grid-initial .tpl-card:nth-child(5){animation-delay:.10s}
.tpl-grid-initial .tpl-card:nth-child(6){animation-delay:.12s}
.tpl-grid-initial .tpl-card{animation:card-pop .35s ease backwards}
@keyframes card-pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* ─── Config Page ─── */
.page-config{padding:28px 32px;overflow-y:auto}
.config-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);position:relative}
.config-header::after{content:'';position:absolute;bottom:-1px;left:0;width:60px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:1px}
.config-header .tpl-icon{font-size:32px}
.config-header h2{font-size:17px;font-weight:700}
.config-header p{font-size:12px;color:var(--text2);margin-top:2px}
.cfg-convert-btn{margin-left:auto;font-size:11px;padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--accent);cursor:pointer;white-space:nowrap;transition:var(--transition)}
.cfg-convert-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.config-section{margin-bottom:24px;max-height:2000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.config-section.collapsed{max-height:36px;opacity:.6}
.config-section.collapsed:hover{opacity:.85}
.config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}

/* ─── Fields ─── */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--text2);font-weight:500}
.field input[type=text],.field input[type=number],.field select,.field textarea{
  padding:9px 12px;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-size:12px;outline:none;transition:all .2s ease;font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow),0 4px 12px rgba(124,109,240,.1);transform:translateY(-2px)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border2)}
.field input[type=color]{
  height:40px;padding:4px;cursor:pointer;border-radius:var(--radius-sm);
  border:2px solid var(--border);transition:all .2s;
}
.field input[type=color]:hover{border-color:var(--accent);transform:scale(1.05)}
.field input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.field input[type=color]::-webkit-color-swatch{border-radius:4px;border:none}
.field input[type=range]{padding:0;background:transparent;border:none;height:36px}
.field .hint{font-size:10px;color:var(--text3)}
.field-color{flex-direction:row;align-items:center;gap:10px}
.field-color input[type=color]{width:40px;flex-shrink:0}
.field-color .color-val{font-size:12px;color:var(--text3);font-family:monospace}

/* ─── Element Toolbar ─── */
.el-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.el-btn{
  padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);
  display:flex;align-items:center;gap:6px;
}
.el-btn:hover{border-color:var(--accent);color:var(--accent2)}
.el-btn:active{transform:scale(.95)}
.el-btn .el-btn-icon{font-size:14px}

/* ─── Element List ─── */
.el-list{display:flex;flex-direction:column;gap:8px}
.el-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.el-item:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(124,109,240,.15);background:color-mix(in srgb, var(--surface2) 90%, var(--accent) 10%)}
.el-item.active{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 0 1px var(--accent),0 2px 12px rgba(124,109,240,.2)}
.el-badge{
  font-size:10px;font-weight:700;padding:4px 8px;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;
}
.el-item-name{flex:1;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el-item-del{
  background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;
  padding:4px 6px;border-radius:6px;transition:var(--transition);
}
.el-item-del:hover{color:var(--red);background:rgba(225,112,85,.1)}
/* Element item actions (layer-style within config panel) */
.el-item-actions{display:flex;gap:4px;flex-shrink:0;align-items:center}
.el-item:hover .el-item-actions{opacity:1}
.el-item-actions .layer-btn{opacity:.5}
.el-item:hover .el-item-actions .layer-btn{opacity:1}
.el-item .layer-icon{font-size:12px;flex-shrink:0}
.el-item .layer-drag-handle{font-size:12px;color:var(--text3);cursor:grab;opacity:.3;flex-shrink:0;user-select:none;transition:var(--transition)}
.el-item:hover .layer-drag-handle{opacity:.7}
.el-item.hidden-el{opacity:.45}
.el-z-btns{display:flex;gap:2px;flex-shrink:0}
.el-z-btn{
  width:22px;height:22px;border-radius:4px;border:1px solid var(--border);background:var(--surface);
  color:var(--text3);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
.el-z-btn:hover{border-color:var(--accent);color:var(--accent2)}

/* ─── Color Presets ─── */
.color-presets{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px;padding:8px;background:var(--surface);border-radius:8px}
.color-swatch{
  width:22px;height:22px;border-radius:4px;cursor:pointer;border:2px solid transparent;
  transition:var(--transition);flex-shrink:0;
}
.color-swatch:hover{transform:scale(1.3);border-color:var(--accent);box-shadow:0 2px 12px rgba(124,109,240,.3);z-index:1}
.color-swatch:active{transform:scale(.95)}

/* ─── Gradient Preview Bar ─── */
.gradient-preview-bar{
  width:100%;height:28px;border-radius:8px;margin-top:8px;
  border:1px solid var(--border);position:relative;overflow:hidden;
  transition:all .2s ease;cursor:pointer;
}
.gradient-preview-bar:hover{
  border-color:var(--accent);transform:scaleY(1.2);
  box-shadow:0 4px 16px rgba(124,109,240,.25);
}
.gradient-preview-bar::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.04) 4px,rgba(255,255,255,.04) 5px);
}

/* ─── Element Detail ─── */
.el-detail{
  margin-top:14px;padding:16px;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes el-slide-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}

/* ─── Element Editor Sections ─── */
.el-editor-section{
  margin-bottom:12px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.el-editor-section:last-child{margin-bottom:0}
.el-editor-section-title{
  font-size:12px;font-weight:700;color:var(--text2);
  margin-bottom:8px;display:flex;align-items:center;gap:4px;
}
/* Range slider value display */
.el-editor-section input[type=range]{padding:0;background:transparent;border:none;height:28px}
.el-editor-section .config-grid{gap:8px}

/* ─── Media Picker ─── */
.media-picker{
  display:flex;align-items:center;gap:12px;padding:12px;
  background:var(--surface);border:1.5px dashed var(--border);border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition);margin-bottom:12px;
}
.media-picker:hover{border-color:var(--accent);background:var(--accent-glow);transform:translateY(-2px);box-shadow:0 6px 16px rgba(124,109,240,.15)}
.media-picker.has-file{border-style:solid;border-color:var(--green);background:color-mix(in srgb, var(--green) 6%, var(--surface))}
.media-picker-icon{font-size:24px;flex-shrink:0}
.media-picker-info{flex:1;min-width:0}
.media-picker-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-picker-hint{font-size:10px;color:var(--text3);margin-top:2px}
.media-picker-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--surface3)}
.media-picker-change{
  padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);font-size:12px;cursor:pointer;transition:var(--transition);flex-shrink:0;
}
.media-picker-change:hover{border-color:var(--accent);color:var(--accent2)}
.media-picker-change[data-transcode-btn]{color:var(--orange);border-color:var(--orange)}
.media-picker-change[data-transcode-btn]:hover{background:rgba(253,203,110,.1)}

/* ─── Preview Page ─── */
.page-preview{padding:24px 32px;overflow-y:auto}
.preview-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;height:100%}
.preview-phone-wrap{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.preview-phone{
  width:420px;height:252px;border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:#111;border:2px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.04);
  transform:perspective(800px) rotateY(-2deg) rotateX(1deg);
  transition:transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s ease;
}
.preview-phone:hover{
  transform:perspective(800px) rotateY(0) rotateX(0);
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px var(--accent),inset 0 0 0 1px rgba(255,255,255,.08);
}
.preview-screen{width:100%;height:100%;position:relative;overflow:hidden}
.preview-camera{
  position:absolute;left:0;top:0;width:74px;height:100%;z-index:10;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.03) 4px,rgba(255,255,255,.03) 5px);
  border-right:1px dashed rgba(225,112,85,.3);
  box-shadow:inset -8px 0 16px -8px rgba(225,112,85,.08);
  display:flex;align-items:flex-start;justify-content:center;
  transition:width .3s ease;
}
.preview-camera::after{content:'📷';font-size:10px;margin-top:8px;opacity:.2}
.preview-camera.hidden{width:0!important}
.preview-content{position:absolute;inset:0}
.preview-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:var(--text3);gap:8px;
}
.preview-placeholder span{font-size:40px}
.preview-placeholder p{font-size:12px;opacity:.7}
.preview-device-label{font-size:12px;color:var(--text3);text-align:center}
.preview-side{display:flex;flex-direction:column;gap:16px}
.preview-side h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
/* ─── Code Editor ─── */
.code-editor{
  flex:1;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;max-height:420px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.1);
  font-family:'SF Mono',Monaco,'Cascadia Code','Fira Code',monospace;
}
.code-toolbar{
  display:flex;align-items:center;gap:8px;padding:6px 12px;
  background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0;
}
.code-lang{
  font-size:12px;color:var(--text3);background:var(--surface3);padding:2px 8px;
  border-radius:4px;font-weight:600;letter-spacing:0.5px;
}
.code-btn{
  font-size:12px;color:var(--text2);background:none;border:1px solid var(--border);
  border-radius:4px;padding:4px 8px;cursor:pointer;transition:var(--transition);
  font-family:inherit;
}
.code-btn:hover{color:var(--text);border-color:var(--accent);background:var(--accent-glow)}
.code-btn:active{transform:scale(.95)}
.code-body{
  flex:1;position:relative;overflow:auto;
}
.code-body::-webkit-scrollbar{width:6px;height:6px}
.code-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.code-body::-webkit-scrollbar-corner{background:transparent}
.code-gutter{
  position:absolute;left:0;top:0;width:44px;padding:12px 0;
  text-align:right;font-size:12px;line-height:1.65;color:var(--text3);
  user-select:none;pointer-events:none;z-index:2;
  background:var(--surface);border-right:1px solid var(--border);
}
.code-gutter span{display:block;padding-right:10px}
.code-highlight{
  position:absolute;left:44px;top:0;right:0;padding:12px 16px;
  font-size:12px;line-height:1.65;white-space:pre;color:var(--accent2);
  pointer-events:none;z-index:1;
}
.code-body textarea{
  position:relative;z-index:3;display:block;
  width:100%;min-height:200px;padding:12px 16px 12px 52px;
  font-size:12px;line-height:1.65;color:transparent;
  caret-color:var(--text);
  font-family:inherit;letter-spacing:0;
  background:transparent;border:none;outline:none;resize:vertical;
  tab-size:2;-moz-tab-size:2;
}
/* Syntax highlight colors */

.preview-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ─── Device Switch Animation ─── */
.preview-phone.device-switching{
  animation:device-swap .4s cubic-bezier(.4,0,.2,1);
}
@keyframes device-swap{
  0%{transform:perspective(800px) scale(.9) rotateY(4deg);opacity:.5}
  40%{transform:perspective(800px) scale(1.03) rotateY(-1deg)}
  100%{transform:perspective(800px) scale(1) rotateY(-2deg) rotateX(1deg);opacity:1}
}

/* ─── Export Success Animation ─── */
.btn-export-success{
  animation:export-pop .5s cubic-bezier(.34,1.56,.64,1);
  background:var(--green)!important;
  box-shadow:0 0 0 4px rgba(0,200,160,.2),0 6px 20px rgba(0,200,160,.3)!important;
}
/* Export loading spinner on button */
.btn-export-loading{
  pointer-events:none;opacity:.75;
  position:relative;
}
.btn-export-loading::after{
  content:'';display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:toast-spin .6s linear infinite;
  margin-left:6px;vertical-align:middle;
}
@keyframes export-pop{
  0%{transform:scale(1)}
  30%{transform:scale(.92)}
  60%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
/* Ripple on export */
.export-ripple{
  position:absolute;border-radius:50%;background:rgba(0,200,160,.3);
  transform:scale(0);animation:ripple-out .6s ease-out forwards;pointer-events:none;
}
@keyframes ripple-out{to{transform:scale(4);opacity:0}}

/* ─── Buttons ─── */
.btn{
  padding:10px 20px;border-radius:var(--radius-sm);border:none;font-size:12px;font-weight:600;
  cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:8px;font-family:inherit;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#8b7cf7);color:#fff}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent2),#9d8fff);box-shadow:0 6px 20px rgba(124,109,240,.35);transform:translateY(-1px)}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn-export{background:linear-gradient(135deg,var(--green),#00d9a7);color:#fff;position:relative;overflow:hidden}
.btn-export::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .3s}
.btn-export:hover::before{opacity:1}
.btn-export:hover{box-shadow:0 6px 20px rgba(0,200,160,.35),0 0 0 1px rgba(0,200,160,.2);transform:translateY(-2px)}
.btn-back{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-back:hover{border-color:var(--text2);color:var(--text)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn .btn-icon{font-size:14px}

/* ─── Bottom Bar ─── */
.bottombar button{transition:var(--transition)}
.bottombar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;padding-bottom:calc(12px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  border-top:1px solid var(--border);flex-shrink:0;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
}
.bottombar-left,.bottombar-right{display:flex;gap:10px}
.device-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.device-row label{font-size:12px;color:var(--text2);font-weight:500}
.device-row select{
  padding:6px 10px;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:12px;outline:none;
}
.device-row .check-label,.check-label{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer;
}
.check-label:active{opacity:.7}

/* ─── Focus Visible (keyboard a11y) ────────────────────────── */
*:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  border-radius:inherit;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible){
  outline:none;
}

/* ─── Toast (queue) ─── */
.toast{
  position:fixed;left:50%;bottom:70px;transform:translateX(-50%) translateY(10px);display:flex;flex-direction:column;align-items:center;
  padding:10px 24px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;
  opacity:0;transition:opacity .3s ease,transform .3s ease,bottom .3s ease;z-index:999;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--green);color:#fff}
.toast.error{background:var(--red);color:#fff}
.toast.info{background:var(--accent);color:#fff}
.toast.warning{background:var(--orange);color:#1a1a2e}
/* ─── Toast Items ───────────────────────────────────────────── */
.toast-item{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;
  margin-bottom:6px;white-space:nowrap;
  animation:toast-spring .4s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.toast-item.toast-success{background:var(--green);color:#fff}
.toast-item.toast-error{background:var(--red);color:#fff}
.toast-item.toast-info{background:var(--accent);color:#fff}
.toast-item.toast-warning{background:var(--orange);color:#1a1a2e}
.toast-item.fade-out{opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s}
@keyframes toast-spring{0%{opacity:0;transform:translateY(20px) scale(.9)}60%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ─── Theme Toggle ─── */
.theme-toggle{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
  flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:rotate(20deg) scale(1.15);box-shadow:0 0 16px rgba(124,109,240,.25)}
.theme-toggle:active{transform:scale(.95)}
a.theme-toggle{text-decoration:none}
.github-link{display:flex;align-items:center;justify-content:center}
.github-link svg{transition:var(--transition)}
.github-link:hover svg{transform:scale(1.15)}

/* ─── CDN Fallback ─── */
#cdnFallback{
  display:none;position:fixed;inset:0;background:var(--bg);color:var(--text);
  z-index:9999;align-items:center;justify-content:center;flex-direction:column;padding:32px;text-align:center;
}

/* ─── Modal ─── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:modalIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal{
  animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  width:420px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:var(--shadow);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.modal-header h3{font-size:14px;font-weight:700}
.modal-close{
  background:none;border:none;color:var(--text3);font-size:17px;cursor:pointer;
  padding:4px 8px;border-radius:6px;transition:var(--transition);
}
.modal-close:hover{color:var(--red);background:rgba(225,112,85,.1)}
.modal-body{padding:16px 20px}
.shortcut-list{display:flex;flex-direction:column;gap:8px}
.shortcut-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);font-size:12px;
  transition:all .15s ease;
}
.shortcut-item:hover{padding-left:4px}
.shortcut-item:last-child{border-bottom:none}
.shortcut-item span{color:var(--text2)}
kbd{
  display:inline-block;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:700;
  background:linear-gradient(180deg,var(--surface3),var(--surface2));border:1px solid var(--border);color:var(--text);
  font-family:'SF Mono',Monaco,monospace;line-height:1.4;
  box-shadow:0 2px 0 var(--border),0 3px 6px rgba(0,0,0,.15);
  min-width:22px;text-align:center;
}
.shortcut-tip{
  margin-top:12px;padding:12px 14px;background:var(--accent-glow);border-radius:var(--radius-sm);
  font-size:12px;color:var(--accent2);border:1px solid rgba(124,109,240,.2);
  line-height:1.5;
}
.shortcut-tip::before{content:'💡 ';font-size:14px}

/* ─── Config + Live Preview Split ─── */
.page-config-live{
  display:flex;flex-direction:row;overflow:hidden;
}
.config-live-left{
  flex:1;overflow-y:auto;min-width:0;
}
@media(min-width:901px){
  .config-live-left{padding:28px 24px;border-right:1px solid var(--border)}
}
.config-live-right{
  width:420px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 20px;gap:14px;
  background:var(--surface2);
}
.config-live-preview-label{
  font-size:12px;font-weight:700;color:var(--text2);
  display:flex;align-items:center;gap:6px;
}
.config-preview-phone{
  width:380px!important;height:228px!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05)!important;
  transform:perspective(800px) rotateY(-1.5deg) rotateX(1deg);
  transition:transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s ease!important;
}
.config-preview-phone:hover{
  transform:perspective(800px) rotateY(0) rotateX(0)!important;
}
.config-live-device-row{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;
}
.config-live-device-row label{font-size:12px;color:var(--text2);font-weight:500}
.config-live-device-row select{
  padding:6px 10px;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:12px;outline:none;
}
.config-live-export-row{
  display:flex;gap:8px;margin-top:4px;
}
.config-live-export-row .btn{font-size:12px;padding:8px 14px}

/* ─── Theme Presets ─── */
.theme-presets{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px;
  background:var(--surface);border-radius:8px;
}
.theme-preset{
  display:flex;align-items:center;gap:4px;padding:4px 8px;
  border-radius:6px;cursor:pointer;border:1px solid transparent;
  transition:var(--transition);background:var(--surface2);
}
.theme-preset:hover{border-color:var(--accent);background:var(--accent-glow)}
.theme-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.theme-name{font-size:10px;color:var(--text2);margin-left:4px;white-space:nowrap}

/* ─── Smart Guides ─── */
.smart-guide{
  position:absolute;z-index:50;pointer-events:none;
  background:var(--accent);opacity:0.7;
}
.smart-guide-h{height:1px;left:0;right:0}
.smart-guide-v{width:1px;top:0;bottom:0}

/* ─── Zoom Controls ─── */
.zoom-controls{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;font-size:12px;
}
.zoom-controls button{
  width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
}
.zoom-controls button:active{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(.9)}
.zoom-controls button:hover{border-color:var(--accent);color:var(--accent)}
.zoom-controls .zoom-label{color:var(--text2);min-width:36px;text-align:center}

/* ─── Batch Export ─── */

/* ─── Desktop ─── */
@media(min-width:1200px){
  .tpl-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:1200px;margin:0 auto}
  .page-preview{max-width:1400px;margin:0 auto}
  .config-grid{max-width:900px}
  .config-live-right{width:480px;padding:28px 24px}
  .config-preview-phone{width:420px!important;height:252px!important;border-radius:var(--radius-lg)!important}
}

/* ─── Responsive ─── */
@media(max-width:768px){
  .topbar{padding:10px 16px;padding-top:calc(10px + var(--safe-top, env(safe-area-inset-top, 0px)))}
  .topbar-left h1{font-size:14px}
  .stepper{padding:6px 12px}
  .step-tab{padding:6px 10px}
  .step-tab .step-label{display:none}
  .page-tpl,.page-preview{padding:20px 16px;padding-bottom:calc(80px + var(--safe-bottom, 0px))}
  .tpl-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .config-grid{grid-template-columns:1fr}
  .preview-layout{grid-template-columns:1fr}
  .preview-phone{width:320px;height:192px}
  .bottombar{padding:10px 16px;padding-bottom:calc(10px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)))}
  .page-config-live{flex-direction:column}
  .config-live-left{padding:16px;padding-bottom:80px;border-right:none;max-height:none;overflow-y:auto;flex:1}
  .config-live-right{display:none}
  /* Category tabs: horizontal scroll on mobile */
  .tpl-categories{flex-wrap:nowrap;overflow-x:auto;padding:0 16px 20px;gap:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tpl-categories::-webkit-scrollbar{display:none}
  .tpl-cat{flex-shrink:0}
}

/* ─── Template Search ─── */
.tpl-search { padding: 0 32px 10px; }
.tpl-search { position: relative; }
.tpl-search input { transition: var(--transition); }
.tpl-search input:hover { border-color: var(--border2); }

/* ─── Preview Element Interaction ─── */
.preview-content [data-el-idx]:hover{
  outline:1.5px dashed var(--accent)!important;
  outline-offset:2px;
  filter:brightness(1.08);
  transition:outline .15s ease,filter .15s ease;
}
.preview-content [data-el-idx]{transition:outline .15s ease,filter .15s ease,box-shadow .2s ease}
/* Active dragging cursor */
.preview-content.dragging [data-el-idx]{cursor:grabbing!important}
/* Duplicate flash effect */
.preview-content [data-el-idx].dup-flash{
  animation:dup-glow .4s ease-out;
}
@keyframes dup-glow{
  0%{box-shadow:0 0 0 0 rgba(124,109,240,.5);filter:brightness(1.3)}
  100%{box-shadow:0 0 0 8px rgba(124,109,240,0);filter:brightness(1)}
}
/* Search highlight in template cards */
.search-hl{background:rgba(124,109,240,.3);border-radius:2px;padding:0 1px;color:inherit}
.preview-grid-overlay {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 5;
  background-image:
    linear-gradient(rgba(108,92,231,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,0.12) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ─── Draft Recovery ─── */
.draft-recovery {
  position: fixed; top: calc(60px + var(--safe-top, 0px)); right: 16px;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 16px 20px; z-index: 200;
  box-shadow: var(--shadow); max-width: 320px;
  animation: fadeIn .3s ease;
}
.draft-recovery-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.draft-recovery-desc { font-size: 12px; color: var(--text2); margin-bottom: 12px; }
.draft-recovery-btns { display: flex; gap: 8px; }
.draft-recovery-btns .btn { font-size: 12px; padding: 6px 14px; }

/* ─── Lock button in element list ─── */
.el-lock-btn {
  background: none; border: none; cursor: pointer; font-size: 14px;
  padding: 2px 4px; flex-shrink: 0;
}

/* ─── Color Swatches (inline) ─── */
.color-swatches{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;max-width:220px}
.color-dot{width:16px;height:16px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:var(--transition);flex-shrink:0}
.color-dot:hover{border-color:var(--accent);transform:scale(1.3)}

/* ─── Context Menu ─── */
.context-menu{
  position:fixed;z-index:10000;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 0;min-width:160px;box-shadow:0 8px 30px rgba(0,0,0,.4);
  transform-origin:top left;animation:ctx-open .18s cubic-bezier(.34,1.56,.64,1);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
@keyframes ctx-open{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.ctx-item{padding:8px 16px;font-size:12px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:8px;border-radius:4px;margin:0 4px}
.ctx-item:hover{background:var(--accent-glow);color:var(--accent);transform:translateX(2px)}
.ctx-divider{height:1px;background:var(--border);margin:4px 8px}

/* ─── Element drag sort ─── */

.el-item:active{cursor:grabbing;opacity:0.7}
.el-item.drag-over{border-top:2px solid var(--accent)}

/* ─── Size label ─── */
.size-label{pointer-events:none;font-family:'SF Mono',Monaco,monospace}

/* ─── Template favorite ─── */

.tpl-fav{position:absolute;top:6px;right:6px;background:none;border:none;font-size:14px;cursor:pointer;z-index:2;opacity:0.4;transition:var(--transition);padding:4px;line-height:1}
.tpl-fav:hover,.tpl-fav.active{opacity:1}
.tpl-info-btn{position:absolute;top:6px;right:32px;background:none;border:none;font-size:14px;cursor:pointer;z-index:2;opacity:0.3;transition:var(--transition);padding:4px;line-height:1;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.tpl-info-btn:hover{opacity:1;background:rgba(124,109,240,.15)}

/* ─── Lottie element ─── */
.el-badge[data-type="lottie"]{background:#9b59b6}

/* ─── Toggle Switch ─── */
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--surface3);border-radius:var(--radius);transition:var(--transition)}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--transition)}
.toggle-switch input:checked+.toggle-slider{background:var(--accent)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(18px)}

/* ─── Auto-save Toast ─── */
.autosave-indicator{
  position:fixed;bottom:16px;right:16px;padding:6px 14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:12px;color:var(--text2);
  box-shadow:var(--shadow);z-index:9999;
  opacity:0;transform:translateY(10px);
  transition:opacity .3s,transform .3s;pointer-events:none;
}
.autosave-indicator.show{opacity:1;transform:translateY(0)}

/* ─── Background Upload Button ─── */
.bg-upload-btn{
  width:32px;height:32px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;
}
.bg-upload-btn:hover{border-color:var(--accent);background:var(--accent-glow)}

/* ─── Changelog ─── */
.changelog-version{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.changelog-version:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.changelog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.changelog-ver{font-size:14px;font-weight:700;color:var(--accent)}
.changelog-date{font-size:12px;color:var(--text3)}
.changelog-items{list-style:none;padding:0;margin:0}
.changelog-items li{padding:4px 0;font-size:12px;color:var(--text2);line-height:1.5;position:relative;padding-left:8px}
.changelog-items li::before{content:'';position:absolute;left:0;top:11px;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0.5}

/* ─── Toast Undo Button ─── */
.toast-undo{
  background:none;border:1px solid rgba(255,255,255,0.3);color:inherit;
  font-size:12px;padding:2px 8px;border-radius:4px;cursor:pointer;
  margin-left:8px;opacity:0.8;transition:var(--transition);font-family:inherit;
}
.toast-undo:hover{opacity:1;background:rgba(255,255,255,0.15)}

/* ─── Config Section Collapse ─── */
.config-section{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:12px;
  transition:all .3s ease;
}
.config-section:hover{border-color:var(--border2)}
.config-section-title{
  cursor:pointer;user-select:none;
  transition:color .2s ease;
}
.config-section-title:hover{color:var(--accent)}
.config-section-title::after{
  content:'▾';float:right;font-size:10px;transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.config-section-title.collapsed::after{transform:rotate(-90deg)}
.config-section .config-grid,
.config-section .el-toolbar,
.config-section .el-list,
.config-section .el-detail,
.config-section .color-presets,
.config-section .theme-presets,
.config-section .font-preview-item,
.config-section .field,
.config-section .field-color {
  overflow:hidden;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease,transform .25s ease;
  max-height:600px;opacity:1;transform:translateY(0);
}
.config-section.collapsed > :not(.config-section-title) {
  max-height:0!important;opacity:0;transform:translateY(-8px);
  pointer-events:none;
}

/* ─── Bottom Bar Undo/Redo ─── */
.bottombar-center {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ─── Step Progress Bar ─── */
.step-progress-bar{
  width:80px;height:4px;background:var(--surface3);border-radius:2px;overflow:hidden;
}
.step-progress-fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 6px rgba(124,109,240,.4);
}
.bottombar-undo-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.bottombar-undo-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.bottombar-undo-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ─── More Elements Dropdown ─── */
.el-toolbar-more-wrap {
  position: relative;
}
.el-toolbar-more-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.el-toolbar-more-menu .el-btn {
  width: 100%;
  justify-content: flex-start;
  border: none;
  background: none;
  border-radius: 6px;
  padding: 8px 12px;
}
.el-toolbar-more-menu .el-btn:hover {
  background: var(--accent-glow);
}

/* ─── Element List Drag Reorder ─── */
.el-item.drag-over-top {
  border-top: 2px solid var(--accent);
  box-shadow:0 -4px 12px rgba(124,109,240,.15);
}
.el-item.drag-over-bottom {
  border-bottom: 2px solid var(--accent);
  box-shadow:0 4px 12px rgba(124,109,240,.15);
}
.el-item.dragging-el {
  opacity: 0.35;
  transform:scale(.96);
  transition:all .2s ease;
}

/* ─── Config Section Collapse ─── */

/* ─── Smart Alignment Guide Lines ─── */
/* (styles defined later in file, with animation and glow) */
.align-guide-equal{
  background:var(--green)!important;opacity:0.8;
  box-shadow:0 0 6px rgba(0,201,160,0.4);
}
.align-guide-equal::after{
  content:attr(data-label);position:absolute;
  font-size:9px;color:var(--green);background:rgba(0,0,0,.7);
  padding:1px 5px;border-radius:3px;top:-12px;left:50%;transform:translateX(-50%);
  white-space:nowrap;
}

/* ─── Ruler: 标尺 + 坐标 + 十字准线 ─── */
.ruler-tooltip{
  position:absolute;z-index:30;pointer-events:none;
  padding:3px 8px;border-radius:5px;font-size:11px;font-weight:600;
  font-family:'SF Mono',Monaco,monospace;
  background:rgba(124,109,240,0.9);color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  white-space:nowrap;letter-spacing:0.3px;
  transition:opacity .1s;display:none;
}
.ruler-coord-sep{opacity:0.5;margin:0 1px}
.ruler-crosshair{
  position:absolute;z-index:22;pointer-events:none;
  display:none;
}
.ruler-crosshair-h{
  left:0;right:0;height:1px;
  background:rgba(124,109,240,0.3);
  border-top:1px dashed rgba(124,109,240,0.25);
}
.ruler-crosshair-v{
  top:0;bottom:0;width:1px;
  background:rgba(124,109,240,0.3);
  border-left:1px dashed rgba(124,109,240,0.25);
}
.ruler-bar{
  position:absolute;z-index:21;pointer-events:none;
  display:none;
}
.ruler-bar-h{
  top:0;left:0;right:0;height:18px;
  border-bottom:1px solid var(--border);
}
.ruler-bar-v{
  top:0;left:0;bottom:0;width:18px;
  border-right:1px solid var(--border);
}

/* ─── Position Nudge Buttons (+/-) ─── */
.el-nudge-wrap{
  display:flex;align-items:center;gap:2px;
}
.el-nudge-wrap input[type="number"]{
  text-align:center;min-width:48px;
}
.el-nudge-btn{
  width:24px;height:28px;border-radius:4px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);user-select:none;
  font-family:inherit;line-height:1;
}
.el-nudge-btn:hover{
  border-color:var(--accent);color:var(--accent);background:var(--accent-glow);
}
.el-nudge-btn:active{
  transform:scale(0.9);background:var(--accent);color:#fff;
}

/* ─── Eyedropper Button ─── */
.eyedropper-btn{
  width:26px;height:26px;border-radius:4px;
  border:1px solid var(--border);background:var(--surface2);
  cursor:pointer;font-size:12px;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);flex-shrink:0;
}
.eyedropper-btn:hover{
  border-color:var(--accent);background:var(--accent-glow);
  transform:scale(1.1);
}
.eyedropper-btn:active{transform:scale(0.9)}

/* ─── Multi-Device Preview Grid (Auto Mode) ─── */
.multi-device-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow:auto;padding:16px;
}
.multi-device-wrap .preview-phone{display:none}
.multi-device-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:700px;width:100%;
}
.multi-device-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.multi-device-card .preview-phone{
  transform:none!important;
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
  transition:transform .3s ease,box-shadow .3s ease;
}
.multi-device-card .preview-phone:hover{
  transform:scale(1.02)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px var(--accent);
}
.multi-device-label{
  font-size:11px;color:var(--text2);font-weight:600;
}
.multi-device-label small{
  color:var(--text3);font-weight:400;
}

/* ─── Template Category Tabs ─── */
.tpl-categories{
  display:flex;gap:6px;
}
@media(min-width:769px){
  .tpl-categories{padding:0 20px 12px;flex-wrap:wrap}
}
.tpl-cat{
  padding:6px 14px;font-size:12px;border-radius:var(--radius-lg);cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);transition:var(--transition);white-space:nowrap;
}
.tpl-cat:hover{border-color:var(--accent);color:var(--text)}
.tpl-cat.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ─── Element count badge ─── */
.el-count-badge{
  display:inline-block;min-width:20px;height:20px;line-height:20px;
  text-align:center;font-size:12px;font-weight:700;color:var(--accent);
  background:var(--accent-glow);border-radius:var(--radius-sm);padding:0 6px;margin-left:6px;
}

/* ─── Config page zoom controls ─── */
.cfg-zoom-controls{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  justify-content:center;padding:4px 0;
}
.cfg-zoom-btn{
  width:28px;height:28px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
}
.cfg-zoom-btn:hover{border-color:var(--accent);background:var(--accent-glow)}
.cfg-zoom-label{font-size:12px;color:var(--text2);min-width:36px;text-align:center}


/* ═══ 响应式 ═══ */
@media (max-width: 900px) {
  .config-live-left,
  .config-live-right {
    width: 100% !important;
  }
  .config-live-left {
    flex: 1 1 0%;
    min-height: 0;
  }
  .page-config-live {
    flex-direction: column !important;
  }
  .config-live-right {
    order: -1;
    padding: 12px;
  }
  .config-preview-phone {
    max-width: 300px;
    margin: 0 auto;
  }
  .preview-layout {
    flex-direction: column !important;
  }
  .preview-side {
    width: 100% !important;
  }
  .preview-phone-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
}

@media (max-width: 600px) {
  .topbar h1 { font-size: 14px; }
  .step-label { display: none; }
  .step-num { margin-right: 0; }
  .steps { justify-content: center; gap: 4px; }
  .tpl-card { padding: 8px; }
  .tpl-thumb { height: 60px; }
  .config-grid { gap: 6px; }
  .device-row { flex-wrap: wrap; gap: 6px; }
  .zoom-controls { display: none; }
  .preview-actions { flex-wrap: wrap; }
  .preview-actions .btn { font-size: 12px; padding: 6px 10px; }
  .code-body { max-height: 200px; }
  .el-toolbar { flex-wrap: wrap; }
  .modal { margin: 8px; max-height: 90vh; }
}

/* Toast Spinner */
.toast-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: toast-spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes toast-spin { to { transform: rotate(360deg); } }

/* Offline Indicator */
.offline-indicator {
  position: fixed;
  top: calc(var(--safe-top, 0px) + 8px);
  right: 8px;
  background: rgba(255, 152, 0, 0.9);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 10000;
  animation: slide-down 0.3s ease;
}

/* Color Hex Input */
.color-hex-input {
  width: 80px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text);
  font-family: monospace;
  font-size: 12px;
  text-transform: lowercase;
}
.color-hex-input:focus {
  border-color: var(--accent);
  outline: none;
}

/* ─── Empty State ─── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;color:var(--text3);gap:12px;
}
.empty-state-icon{font-size:48px}
.empty-state-text{font-size:14px;line-height:1.5;max-width:240px}

/* ─── Mock Data Toggle ─── */
.mock-toggle{
  display:flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:8px;border:1px solid var(--border);background:var(--surface2);
  font-size:12px;color:var(--text2);cursor:pointer;transition:var(--transition);
  font-family:inherit;white-space:nowrap;
}
.mock-toggle:hover{border-color:var(--accent);color:var(--accent)}
.mock-toggle.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent2)}
.mock-toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);transition:all .2s ease}
.mock-toggle.active .mock-toggle-dot{background:var(--green);box-shadow:0 0 6px var(--green)}

/* ─── Expression Debugger ─── */
.expr-debug-modal{max-width:520px}
.expr-debug-field{display:flex;flex-direction:column;gap:6px}
.expr-debug-field label{font-size:12px;color:var(--text2);font-weight:600}
.expr-var-chips{display:flex;flex-wrap:wrap;gap:4px}
.expr-var-chip{
  padding:4px 8px;border-radius:6px;font-size:12px;font-family:monospace;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  cursor:pointer;transition:var(--transition);
}
.expr-var-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}

/* ─── Performance Dashboard ─── */
.perf-score-ring{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:0 auto 20px;width:100px;height:100px;border-radius:50%;
  border:3px solid var(--border);position:relative;
}
.perf-score-value{font-size:32px;font-weight:800}
.perf-score-label{font-size:12px;color:var(--text2);margin-top:2px}
.perf-excellent .perf-score-value{color:var(--green)}
.perf-good .perf-score-value{color:#74b9ff}
.perf-fair .perf-score-value{color:var(--orange)}
.perf-poor .perf-score-value{color:var(--red)}
.perf-excellent{border-color:var(--green)}
.perf-good{border-color:#74b9ff}
.perf-fair{border-color:var(--orange)}
.perf-poor{border-color:var(--red)}
.perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.perf-stat{
  text-align:center;padding:10px 4px;border-radius:8px;
  background:var(--surface2);border:1px solid var(--border);
}
.perf-stat-value{font-size:17px;font-weight:700;color:var(--accent2)}
.perf-stat-label{font-size:10px;color:var(--text3);margin-top:2px}
.perf-warnings{display:flex;flex-direction:column;gap:6px}
.perf-warn-item{
  padding:8px 12px;border-radius:8px;font-size:12px;
  background:rgba(253,203,110,.08);border:1px solid rgba(253,203,110,.2);
  color:var(--orange);
}

/* ─── Template Compare Overlay ─── */
.template-compare-overlay{
  position:absolute;inset:0;z-index:50;background:var(--bg);
  display:flex;flex-direction:column;animation:fadeIn .25s ease;
}
.template-compare-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
  font-size:12px;font-weight:600;
}
.template-compare-label-left{color:var(--accent);font-weight:700}
.template-compare-label-right{color:var(--green);font-weight:700}
.template-compare-body{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:20px;flex:1;overflow-y:auto;
}
.template-compare-pane{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;
  background:var(--surface);
}
.compare-tpl-list{display:flex;flex-direction:column;gap:6px}
.compare-tpl-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:8px;border:1px solid var(--border);cursor:pointer;
  transition:var(--transition);
}
.compare-tpl-item:hover{border-color:var(--accent);background:var(--accent-glow)}

/* ─── Dev Tools Toolbar ─── */
.dev-tools-bar{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:8px 0;
}
.dev-tools-bar .btn{font-size:12px;padding:6px 10px;border-radius:6px}

.align-guide {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  animation: guide-appear 0.15s ease;
}
.align-guide-h {
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--accent);
  opacity: 0.85;
  box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(124,109,240,.3);
}
.align-guide-v {
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--accent);
  opacity: 0.85;
  box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(124,109,240,.3);
}
@keyframes guide-appear {
  from { opacity: 0; transform: scaleY(.8); }
  to { opacity: 0.7; }
}

/* ─── Theme Compare ─── */
.theme-compare-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 8px;
}
.theme-compare-phone {
  transform: scale(0.45);
  transform-origin: top center;
  margin-bottom: -200px;
}
.theme-compare-label {
  font-size: 12px;
  text-align: center;
  color: var(--text3);
  margin-bottom: 4px;
}


/* ─── Command Palette ─── */
.cmd-item:hover,
.cmd-item.selected {
  background: var(--surface3);
}

/* ─── Font Preview Items ─── */
.font-preview-item:hover {
  border-color: var(--accent) !important;
  background: var(--accent-glow) !important;
}

/* ─── Design Tool Tab ─── */
.design-tool-tab:hover {
  color: var(--text) !important;
}

/* ─── Gradient Preset ─── */
.grad-preset:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ─── Palette Swatch ─── */
.palette-swatch:hover {
  transform: scale(1.03);
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* ─── Syntax Highlighting ─── */
.code-highlight .xml-tag {
  color: #61afef;
  font-weight:600;
}
.code-highlight .xml-attr {
  color: #e5c07b;
}
.code-highlight .xml-val {
  color: #98c379;
}
.code-highlight .xml-comment {
  color: #5c6370;
  font-style: italic;
}
.code-highlight .xml-bracket {
  color: #c678dd;
}
.code-highlight .punctuation {
  color: #abb2bf;
}


/* ─── i18n ─── */
.lang-switch {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  transition: var(--transition);
}
.lang-switch:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ─── Card Library ─── */
.card-library-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-lib-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
  cursor: default;
}
.card-lib-item:hover {
  background: var(--surface3);
  border-color: var(--border2);
}
.card-lib-item.disabled {
  opacity: 0.5;
}
.card-lib-item.disabled .card-lib-name {
  text-decoration: line-through;
}
.card-lib-drag-handle {
  cursor: grab;
  color: var(--text3);
  font-size: 14px;
  user-select: none;
  padding: 2px 4px;
  border-radius: 4px;
}
.card-lib-drag-handle:hover {
  background: var(--border);
  color: var(--text);
}
.card-lib-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.card-lib-info {
  flex: 1;
  min-width: 0;
}
.card-lib-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-lib-meta {
  font-size: 12px;
  color: var(--text3);
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.card-lib-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.card-lib-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: var(--transition);
  opacity: 0.6;
}
.card-lib-btn:hover {
  background: var(--border);
  opacity: 1;
}

/* ─── Layer Panel ─────────────────────────────────────────────── */
.layer-panel {
  position: fixed;
  right: -280px;
  top: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 90;
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
}
.layer-panel.show {
  right: 0;
}
.layer-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.layer-panel-header span { font-size: 14px; }
.layer-panel-close {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}
.layer-panel-close:hover { background: var(--surface2); color: var(--text); }

#layerPanelList {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.layer-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.6;
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  user-select: none;
}
.layer-item:hover { background: var(--surface2); }
.layer-item.selected {
  background: var(--accent-glow);
  border-left-color: var(--accent);
}
.layer-item.hidden-el { opacity: 0.45; }
.layer-item.dragging { opacity: 0.3; }
.layer-item.drag-over-top { border-top: 2px solid var(--accent); }
.layer-item.drag-over-bottom { border-bottom: 2px solid var(--accent); }

.layer-drag-handle {
  color: var(--text3);
  font-size: 12px;
  cursor: grab;
  padding: 0 2px;
  opacity: 0.4;
  flex-shrink: 0;
}
.layer-item:hover .layer-drag-handle { opacity: 1; }

.layer-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.layer-label {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.layer-item:hover .layer-actions,
.layer-item.selected .layer-actions { opacity: 1; }

.layer-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  opacity: 0.6;
}
.layer-btn:hover { opacity: 1; background: var(--surface2); }
.layer-btn.active { opacity: 1; }
.layer-del-btn:hover { background: rgba(255,0,0,0.15); }

/* Layer panel toggle button */
.layer-panel-toggle {
  position: relative;
}
.layer-panel-toggle.active {
  color: var(--accent) !important;
  background: var(--accent-glow) !important;
}

/* ─── Simple Mode ────────────────────────────────────────────────── */
/* 简洁模式: 手机端精简按钮，展开按钮 + 更多区域 */

/* 简洁模式切换按钮 */
.mode-toggle-btn { display: none; }

/* 手机端: 简洁模式下预览操作行 */
@media (max-width: 768px) {
  
  
}

/* ─── Toolbar Responsive ──────────────────────────────────────── */
.desktop-only { display: flex; }
.mobile-only { display: none; }

@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
  .topbar-right { gap: 4px; }
  .topbar-right .theme-toggle { width: 32px; height: 32px; font-size: 14px; }
}

/* More Menu Dropdown */
.more-menu-wrap { position: relative; }
.more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.more-menu button,
.more-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.more-menu button:hover,
.more-menu a:hover { background: var(--surface2); }

/* ─── Advanced Tools (details/summary) ─── */
.advanced-tools {
  margin-top: 8px;
}
.advanced-tools-toggle {
  font-size: 12px;
  color: var(--text3);
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
  list-style: none;
}
.advanced-tools-toggle::-webkit-details-marker { display: none; }
.advanced-tools-toggle::before { content: '▸ '; }
.advanced-tools[open] > .advanced-tools-toggle::before { content: '▾ '; }
.advanced-tools-toggle:hover { color: var(--accent); }
.advanced-tools-body {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ─── Custom Select Arrow ─── */
.device-row select,.config-live-device-row select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239090ac'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
  cursor:pointer;
}


/* ─── Custom Range Slider ─── */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  height:6px;background:var(--surface3);border-radius:3px;outline:none;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
  box-shadow:0 1px 6px rgba(0,0,0,.3),0 0 0 1px var(--accent);
  cursor:pointer;transition:all .15s ease;
}
input[type=range]::-webkit-slider-thumb:hover{
  transform:scale(1.25);
  box-shadow:0 2px 10px rgba(124,109,240,.4),0 0 0 2px var(--accent);
}
input[type=range]::-webkit-slider-thumb:active{
  transform:scale(1.1);
  background:var(--accent2);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
  box-shadow:0 1px 6px rgba(0,0,0,.3);cursor:pointer;
}
input[type=range]::-moz-range-track{
  height:6px;background:var(--surface3);border-radius:3px;border:none;
}


/* ─── Template Search Input ─── */
.tpl-search input{
  width:100%;padding:10px 16px 10px 40px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-size:13px;
  transition:all .25s ease;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239090ac'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 10-1.397 1.398h-.001l3.85 3.85a1 1 0 001.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 110-10 5 5 0 010 10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center;
}
.tpl-search input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);
  background-color:var(--surface2);
}
.tpl-search input::placeholder{color:var(--text3);font-size:12px}


/* ─── Drag & Drop Feedback ─── */
.dragging-el{
  opacity:.5!important;transform:scale(.96)!important;
  box-shadow:0 8px 24px rgba(124,109,240,.3)!important;
}
.drag-over-top{border-top:2px solid var(--accent)!important}
.drag-over-bottom{border-bottom:2px solid var(--accent)!important}
/* Drop zone highlight on content area */
.content.drag-over::after{
  content:'📥 释放以上传文件';position:absolute;inset:0;
  background:rgba(124,109,240,.08);border:2px dashed var(--accent);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--accent2);z-index:100;
  animation:fadeIn .15s ease;pointer-events:none;
}

/* ─── Recent Template Badge ─── */
.tpl-recent-badge{
  position:absolute;top:8px;right:8px;z-index:2;
  font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;
  background:var(--accent);color:#fff;opacity:.8;
  animation:fadeIn .3s ease;
}


/* ─── Code Editor Enhancements ─── */
.code-body textarea::selection{background:rgba(124,109,240,.3)}
.code-body textarea::-moz-selection{background:rgba(124,109,240,.3)}
/* Active line number highlight */
.code-gutter span{transition:color .1s}
.code-highlight{min-height:100%}

/* ─── Code Editor Hint ─── */
.code-hint{
  font-size:10px;color:var(--text3);margin-left:auto;
  white-space:nowrap;opacity:.6;
}

/* ─── Simple Mode ─── */
.simple-mode .dev-tools-bar{display:none!important}
.simple-mode .advanced-tools{display:none!important}
.simple-mode .config-section[data-section="quickOps"]{display:none!important}
.simple-mode .batch-export-bar{display:none!important}
.simple-mode .cfg-zoom-controls{display:none!important}
.simple-mode .el-toolbar .el-btn:nth-child(n+4){display:none!important}

/* ─── Animation Editor ─── */
.anim-timeline{padding:12px;background:var(--surface2);border-radius:var(--radius-sm);margin-top:8px}
.anim-timeline-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.anim-timeline-header h4{font-size:12px;font-weight:600;color:var(--text2);margin:0}
.anim-track{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding:6px 8px;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border)}
.anim-track-label{font-size:11px;color:var(--text2);width:60px;flex-shrink:0}
.anim-track-bar{flex:1;height:20px;background:var(--surface2);border-radius:4px;position:relative;cursor:pointer;overflow:hidden}
.anim-track-fill{height:100%;background:var(--accent);border-radius:4px;opacity:.6;transition:width .2s}
.anim-track-keyframe{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--accent);border:2px solid #fff;border-radius:50%;cursor:grab;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.anim-track-keyframe:hover{transform:translate(-50%,-50%) scale(1.3)}
.anim-track-time{font-size:9px;color:var(--text3);position:absolute;bottom:2px;right:4px}
.anim-ease-select{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--surface);border:1px solid var(--border);color:var(--text2)}
.anim-preview-btn{font-size:10px;padding:3px 10px;border-radius:4px;border:1px solid var(--accent);color:var(--accent);background:transparent;cursor:pointer;transition:all .15s}
.anim-preview-btn:hover{background:var(--accent);color:#fff}
.anim-preview-btn.playing{background:var(--accent);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ─── Binding Wizard ─── */
.binding-wizard{padding:16px}
.binding-source-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.binding-source-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:all .15s}
.binding-source-item:hover{border-color:var(--accent);background:var(--accent-glow)}
.binding-source-item.active{border-color:var(--accent);background:var(--accent-glow)}
.binding-source-icon{font-size:16px}
.binding-source-name{font-size:12px;font-weight:600}
.binding-source-desc{font-size:10px;color:var(--text3)}
.binding-target-preview{padding:10px;background:var(--surface2);border-radius:var(--radius-sm);font-size:11px;color:var(--text2);margin-top:10px;font-family:monospace}

/* ─── Drag Select ─── */
.drag-select-box{position:absolute;border:1.5px dashed var(--accent);background:rgba(124,109,240,.08);pointer-events:none;z-index:100;border-radius:2px}
.preview-content.drag-selecting{cursor:crosshair!important}

/* ─── Multi-select ─── */
.preview-content [data-el-idx].multi-selected{outline:2px solid #ffd700!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(255,215,0,.2)!important}

/* ── RearStore ──────────────────────────────────────────────── */
.rs-widget-list { display: flex; flex-direction: column; gap: 12px; }
.rs-widget-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rs-widget-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(108,92,231,0.1);
}
.rs-widget-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rs-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.rs-avatar-placeholder {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.rs-widget-info { flex: 1; min-width: 0; }
.rs-widget-name { font-weight: 600; font-size: 14px; }
.rs-widget-meta { font-size: 12px; color: var(--text3); margin-top: 2px; }
.rs-widget-desc {
  font-size: 12px; color: var(--text2); line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-widget-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── RearStore Tabs ─────────────────────────────────────────── */
.rs-tab {
  transition: color 0.15s, border-color 0.15s;
  position: relative;
}
.rs-tab:hover {
  color: var(--text) !important;
}
.rs-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}