/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* 哆啦A梦经典配色 —— 主体蓝 #03ADF0，阴影 #016FAD，高光 #6EDCFF */
  --dora-blue:#03ADF0;        /* 主体蓝（哆啦A梦身体）*/
  --dora-deep:#016FAD;        /* 阴影蓝（深色描边、按钮 hover、阴影）*/
  --dora-highlight:#6EDCFF;   /* 高光蓝（按钮内反光、SVG 高光）*/
  --dora-light:#BFE7FA;       /* 软淡蓝（边框、分割线）*/
  --dora-yellow:#F5C518;      /* 金色铃铛 */
  --dora-red:#E53935;         /* 红色铃铛绳 */
  --dora-white:#FFFFFF;
  --dora-cream:#FFF8E1;       /* 暖米色（铃铛邻近的软底）*/
  /* 映射到现有变量 */
  --brand:var(--dora-blue);
  --primary:var(--dora-blue);
  --brand-soft:#E0F4FE;
  --bg:#FFFFFF;
  --white:#FFFFFF;
  --border:var(--dora-light);
  --text:#2D3A4A;
  --text2:#666;
  --text3:#999;
  --radius:50px;
  --shadow:0 2px 8px rgba(3,173,240,0.15);
  --accent:var(--dora-yellow);
}
html{font-size:14px}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;background:var(--bg);color:var(--text);min-width:768px;height:100vh;display:flex;flex-direction:column;overflow:hidden;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 2L3 15L6 12L9 17.5L11 16.5L8 11L12 11Z' fill='%2303ADF0' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,default}
button,a,.nav-btn,.nav-btn-icon,.tb-btn,.tb-btn-text,.pocket-btn,.pocket-item,.more-dropdown-item,.hr-option,.align-option,.sd-card,.edit-mode-chip,.color-chip,.tab-btn,.img-insert-btn,.btn-primary,.btn-secondary,.mode-card,.color-preset,.bg-option,.dora-avatar{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 2L3 15L6 12L9 17.5L11 16.5L8 11L12 11Z' fill='%23F5C518' stroke='%23016FAD' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,pointer}
input[type=text],input[type=number],input[type=email],textarea{cursor:text}
.editor,[contenteditable]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M18 1L21 4L19 6L16 3Z' fill='%23E57373'/%3E%3Cpath d='M16 3L19 6L7 18L4 15Z' fill='%23F5C518' stroke='%23016FAD' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpath d='M4 15L7 18L4 21L2 20Z' fill='%23BDBDBD'/%3E%3Cpath d='M2 20L4 21L3 22L1 21Z' fill='%23424242'/%3E%3C/svg%3E") 1 21,text}
select{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 2L3 15L6 12L9 17.5L11 16.5L8 11L12 11Z' fill='%23F5C518' stroke='%23016FAD' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,pointer}
button{font-family:inherit;border:none;background:none;font-size:inherit;color:#fff}
input,select,textarea{font-family:inherit;font-size:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--dora-cream);border-radius:4px}
::-webkit-scrollbar-thumb{background:linear-gradient(145deg,var(--dora-light),var(--dora-blue));border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(145deg,var(--dora-yellow),var(--dora-deep))}

/* ===== Background Decorations ===== */
body::before{
  content:'🔔 🚪 🪄 🍙 🛎️ ☁️ ✨ 🌟 💫 🎈';
  position:fixed;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:0;opacity:0.12;
  font-size:24px;line-height:1.8;
  overflow:hidden;display:flex;flex-wrap:wrap;align-content:flex-start;
  padding:20px;
  animation:float-deco 12s ease-in-out infinite;
  will-change:transform;
}
@keyframes float-deco{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ===== Top Nav ===== */
.top-nav{
  display:flex;align-items:center;height:60px;
  background:linear-gradient(135deg,var(--dora-blue) 0%,var(--dora-deep) 100%);
  border-bottom:3px solid var(--dora-yellow);
  padding:0 28px;flex-shrink:0;z-index:100;
  box-shadow:0 3px 12px rgba(1,111,173,0.2);
  position:relative;
}
/* 顶部导航斜向高光带（机甲反光） */
.top-nav::before{
  content:'';position:absolute;
  top:-50%;left:-3%;
  width:106%;height:60%;
  background:linear-gradient(105deg,transparent 30%,rgba(110,220,255,0.18) 45%,rgba(255,255,255,0.32) 50%,rgba(110,220,255,0.18) 55%,transparent 70%);
  pointer-events:none;
  transform:rotate(-2deg);
}
.dora-avatar{
  width:42px;height:42px;
  background:radial-gradient(circle at 30% 25%,var(--dora-highlight) 0%,var(--dora-blue) 38%,var(--dora-deep) 100%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-right:12px;
  box-shadow:0 3px 8px rgba(1,111,173,0.3),inset 0 -2px 6px rgba(1,111,173,0.25);
  border:2px solid var(--dora-yellow);
  animation:dora-breathe 4s ease-in-out infinite;
  flex-shrink:0;
  position:relative;
  cursor:pointer;
  z-index:2;
}
/* 只动 transform 让 GPU 合成，避免 box-shadow 触发重绘 */
@keyframes dora-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
.take-copter{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:2;
}
.take-copter .propeller{
  transform-origin:30px 18px;
  animation:take-copter-spin 1.8s linear infinite;
}
.dora-avatar:hover .take-copter .propeller{
  animation-duration:0.35s;
}
@keyframes take-copter-spin{
  to{transform:rotate(360deg)}
}
/* 道具弹出飘走：emoji + 名字凭空出现，转一下，停 0.5s，往上飘走淡出（无边框无背景） */
.dora-gadget-bubble{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:2px;
  pointer-events:none;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  animation:dora-pop 1.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.dora-gadget-bubble.special{
  animation:dora-pop-special 2.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.dora-gadget-bubble.special .dora-gadget-icon{
  font-size:56px;
}
.dora-gadget-icon{
  font-size:48px;
  line-height:1;
}
.dora-gadget-name{
  font-size:12px;
  font-weight:800;
  color:#F5C518;
  letter-spacing:1px;
  white-space:nowrap;
}
/* 头像在左上角：道具往「右下方」飘进编辑区，全程在画面里 */
@keyframes dora-pop{
  0%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(0.3) rotate(-20deg)}
  25%{opacity:1;transform:translateX(-42%) translateY(12px) scale(1.12) rotate(8deg)}
  45%{transform:translateX(-34%) translateY(22px) scale(1) rotate(0deg)}
  65%{opacity:1;transform:translateX(-20%) translateY(30px) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translateX(34px) translateY(86px) scale(0.6) rotate(12deg)}
}
@keyframes dora-pop-special{
  0%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(0.3) rotate(-20deg)}
  20%{opacity:1;transform:translateX(-42%) translateY(12px) scale(1.22) rotate(8deg)}
  38%{transform:translateX(-34%) translateY(24px) scale(1) rotate(0deg)}
  68%{opacity:1;transform:translateX(-20%) translateY(34px) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translateX(46px) translateY(108px) scale(0.5) rotate(16deg)}
}
.dora-avatar.shake{animation:dora-shake 0.5s ease-in-out}
@keyframes dora-shake{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-8deg)}
  75%{transform:rotate(8deg)}
}
/* 空闲提醒：头像跳一下 */
.dora-avatar.bounce{animation:dora-jump 0.7s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes dora-jump{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-10px) scale(1.08)}
  60%{transform:translateY(0) scale(0.96)}
  85%{transform:translateY(-3px) scale(1.02)}
}
/* 空闲提醒：屏幕正中央大字提醒 */
.dora-idle-bubble{
  position:fixed;
  top:50%;left:50%;
  background:linear-gradient(145deg,#FFFFFF,#FFF8E1);
  color:var(--dora-deep);
  padding:28px 56px;
  border-radius:28px;
  font-size:26px;font-weight:800;
  letter-spacing:0.04em;
  border:3px solid var(--dora-yellow);
  box-shadow:0 16px 48px rgba(1,111,173,0.35),0 0 0 8px rgba(245,197,24,0.18);
  white-space:nowrap;
  pointer-events:none;
  z-index:1500;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.4);
  animation:idle-center-pop 4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes idle-center-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.4) rotate(-8deg)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(3deg)}
  20%{transform:translate(-50%,-50%) scale(0.94) rotate(-2deg)}
  30%{transform:translate(-50%,-50%) scale(1.04) rotate(1deg)}
  40%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  85%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(0.95) rotate(0deg)}
}
.logo{font-size:24px;font-weight:800;color:var(--dora-white);margin-right:36px;white-space:nowrap;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,0.1)}
.logo span{font-size:13px;font-weight:500;color:var(--dora-yellow);opacity:1;margin-left:8px}
.nav-group{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:nowrap;overflow:visible}
.nav-btn{
  padding:8px 16px;border-radius:20px;font-size:13px;
  background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);
  color:#fff;transition:all .25s cubic-bezier(0.4,0,0.2,1);white-space:nowrap;font-weight:500;
  backdrop-filter:blur(4px);
}
.nav-btn:hover{
  background:var(--dora-yellow);color:var(--dora-deep);
  transform:translateY(-2px);box-shadow:0 4px 12px rgba(245,197,24,0.4);
}
.nav-btn.active{
  background:var(--dora-red);border-color:var(--dora-red);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.4);
}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.nav-right .nav-btn{font-size:13px}
.quick-style-group{display:flex;align-items:center;gap:4px;padding:3px;border-radius:22px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);backdrop-filter:blur(4px)}
.quick-style-btn{padding:7px 12px;border-radius:18px;font-size:12px;font-weight:800;line-height:1;color:#fff;background:transparent;border:0;white-space:nowrap;transition:all .2s ease}
.quick-style-btn:hover{background:rgba(255,255,255,0.18);transform:translateY(-1px)}
.quick-style-btn.active{background:#fff;color:#059669;box-shadow:0 4px 12px rgba(1,111,173,0.18)}
/* ===== 口袋扇形样式设置 ===== */
.pocket-wrap{position:relative}
.pocket-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;font-size:13px;background:var(--dora-yellow);border:1px solid rgba(245,197,24,0.4);color:var(--dora-deep);font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(0.4,0,0.2,1);white-space:nowrap;box-shadow:0 2px 8px rgba(245,197,24,0.25)}
.pocket-btn:hover,.pocket-btn.open{transform:translateY(-2px);box-shadow:0 4px 14px rgba(245,197,24,0.5)}
.shizuka-note{display:inline-block;animation:shizuka-note 2s ease-in-out infinite;font-style:normal;font-size:11px;opacity:0.9}
@keyframes shizuka-note{0%,100%{transform:translateY(0) rotate(-15deg)}50%{transform:translateY(-4px) rotate(15deg)}}
.shizuka-note-float{position:absolute;top:-10px;right:-8px;font-size:14px;animation:shizuka-note 1.8s ease-in-out infinite;pointer-events:none}
.pocket-arrow{font-size:10px;transition:transform .2s;display:inline-block}
.pocket-btn.open .pocket-arrow{transform:rotate(180deg)}
.pocket-fan{position:absolute;top:calc(100% + 8px);left:50%;width:0;height:0;z-index:200;pointer-events:none}
.pocket-item{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;background:var(--white);border:2px solid var(--dora-light);border-radius:18px;font-size:11px;font-weight:700;color:var(--dora-deep);cursor:pointer;box-shadow:0 6px 20px rgba(1,111,173,0.18);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(0.34,1.56,0.64,1),opacity .2s ease;white-space:nowrap;min-width:54px;text-align:center}
.pocket-item:hover{background:var(--dora-cream);border-color:var(--dora-yellow);box-shadow:0 8px 24px rgba(245,197,24,0.35)}
.pocket-item .pi-emoji{font-size:22px;line-height:1}
.pocket-fan.open .pocket-item{opacity:1;pointer-events:auto}
/* 四个项对称扇形：外侧一对在上、内侧一对在下，中心向外依次绽放 */
.pocket-fan.open .pocket-item:nth-child(1){transform:translate(calc(-50% - 102px),calc(-50% + 34px)) scale(1);transition-delay:70ms}
.pocket-fan.open .pocket-item:nth-child(2){transform:translate(calc(-50% - 46px),calc(-50% + 76px)) scale(1);transition-delay:0ms}
.pocket-fan.open .pocket-item:nth-child(3){transform:translate(calc(-50% + 46px),calc(-50% + 76px)) scale(1);transition-delay:0ms}
.pocket-fan.open .pocket-item:nth-child(4){transform:translate(calc(-50% + 102px),calc(-50% + 34px)) scale(1);transition-delay:70ms}
/* 任意门 toast */
.teleport-toast{position:fixed;top:80px;left:50%;background:linear-gradient(145deg,#FFC1DA,#FF8FBF);color:#5A1E3A;padding:12px 24px;border-radius:24px;font-size:14px;font-weight:700;box-shadow:0 8px 32px rgba(255,143,191,0.5);z-index:1000;border:2px solid #FFFFFF;pointer-events:none;opacity:0;transform:translateX(-50%) scale(0.6);transition:all .35s cubic-bezier(0.4,0,0.2,1)}
.teleport-toast.show{opacity:1;transform:translateX(-50%) scale(1)}
/* 黄金长度成就 toast：金色变体 */
.teleport-toast.golden{background:linear-gradient(145deg,#FFE082,#FFB74D);color:#5D2D00;border-color:#F5C518;box-shadow:0 8px 32px rgba(245,197,24,0.55)}

/* 黄金长度时光机：从右往左慢飞过编辑器底部，4.5 秒 */
.time-machine-mini{
  position:fixed;bottom:80px;right:0;
  width:160px;height:140px;
  z-index:999;pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.25));
  animation:tm-drift 4.5s linear forwards;
}
@keyframes tm-drift{
  0%{transform:translateX(220px) rotate(-3deg);opacity:0}
  10%{transform:translateX(0) rotate(-2deg);opacity:1}
  50%{transform:translateX(-50vw) rotate(2deg);opacity:1}
  90%{transform:translateX(-95vw) rotate(-1deg);opacity:1}
  100%{transform:translateX(calc(-100vw - 220px)) rotate(-3deg);opacity:0}
}
.time-machine-mini .paddle{transform-origin:70px 40px;animation:paddle-spin 4.5s linear}
/* paddle 动画（黄金长度时光机用）*/
@keyframes paddle-spin{from{transform:rotate(0)}to{transform:rotate(540deg)}}

/* ===== Main Layout ===== */
.main{display:flex;flex:1;overflow:hidden;position:relative;z-index:1}
.panel{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.panel-left{width:45%;min-width:300px;border-right:none}
.panel-right{width:55%;min-width:350px;background:linear-gradient(180deg,#F0F1F3 0%,#E8F4FD 100%)}
.divider{width:8px;background:linear-gradient(to bottom,var(--dora-light) 0%,var(--dora-blue) 50%,var(--dora-light) 100%);cursor:col-resize;flex-shrink:0;position:relative;z-index:10;transition:all .3s;border-radius:4px}
.divider:hover,.divider.active{background:linear-gradient(to bottom,var(--dora-yellow) 0%,var(--dora-deep) 50%,var(--dora-yellow) 100%);width:10px;box-shadow:0 0 10px rgba(245,197,24,0.5)}

/* ===== Editor Toolbar ===== */
.editor-toolbar{display:flex;align-items:center;gap:6px;padding:10px 16px;background:linear-gradient(180deg,#FFFEF7 0%,var(--white) 100%);border-bottom:2px solid var(--dora-light);flex-wrap:wrap;flex-shrink:0;position:relative;z-index:10}
/* 轻量层：高频小操作按钮（白底蓝字）*/
.tb-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;color:var(--dora-deep);background:#fff;border:1.5px solid var(--dora-light);transition:all .2s;font-weight:600;box-shadow:0 1px 3px rgba(1,111,173,0.08);position:relative;overflow:hidden}
.tb-btn:hover{transform:translateY(-1px);border-color:var(--dora-yellow);background:#FFFCF0;box-shadow:0 3px 10px rgba(245,197,24,0.28)}
.tb-btn:active{transform:translateY(0) scale(0.96)}
.tb-btn.active{background:linear-gradient(145deg,var(--dora-blue),var(--dora-deep));color:#fff;border-color:var(--dora-yellow);box-shadow:0 2px 8px rgba(1,111,173,0.32)}
.tb-btn b{font-size:15px}
/* 中层：功能动作按钮（蓝色 pill，带 top-fade 高光）*/
.tb-btn-text{height:36px;display:flex;align-items:center;justify-content:center;border-radius:18px;font-size:12px;color:#fff;background:linear-gradient(180deg,rgba(110,220,255,0.28) 0%,rgba(110,220,255,0) 50%),linear-gradient(145deg,var(--dora-blue),var(--dora-deep));transition:all .25s;font-weight:600;box-shadow:0 2px 8px rgba(1,111,173,0.22),inset 0 1px 0 rgba(255,255,255,0.25);position:relative;overflow:hidden;padding:0 14px;letter-spacing:0.02em}
.tb-btn-text:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(110,220,255,0.4) 0%,rgba(110,220,255,0) 55%),linear-gradient(145deg,var(--dora-deep),var(--dora-blue));box-shadow:0 5px 16px rgba(245,197,24,0.32),inset 0 1px 0 rgba(255,255,255,0.35)}
.tb-btn-text:active{transform:translateY(0) scale(0.97)}
/* 重量层：哆啦A梦的口袋（黄色，唯一开 dropdown 的入口）*/
.tb-btn-text.pocket{background:linear-gradient(145deg,#FFE082,var(--dora-yellow));color:#5D2D00;border:1.5px solid #E5B800;box-shadow:0 2px 8px rgba(245,197,24,0.42)}
.tb-btn-text.pocket:hover{background:linear-gradient(145deg,#FFEDA0,#FFCB1F);transform:translateY(-1px) rotate(-2deg);box-shadow:0 5px 18px rgba(245,197,24,0.55)}
.tb-btn-text.pocket::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.5),transparent 60%);pointer-events:none}
.tb-sep{width:1px;height:18px;background:var(--dora-light);margin:0 6px;opacity:0.7}
.tb-select{padding:6px 10px;border:2px solid var(--dora-light);border-radius:20px;font-size:12px;color:#fff;background:var(--dora-blue);outline:none;cursor:pointer}
.tb-select:focus{border-color:var(--dora-yellow)}
.tb-select option{background:#fff;color:#333}
.tb-heading-select{padding:0 28px 0 12px;border:1.5px solid var(--dora-light);border-radius:18px;font-size:12px;color:var(--dora-deep);background:#fff;outline:none;cursor:pointer;height:36px;box-shadow:0 1px 3px rgba(1,111,173,0.08);font-weight:600;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%231565C0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;transition:all .2s}
.tb-heading-select:hover{border-color:var(--dora-yellow);background-color:#FFFCF0}
.tb-heading-select:focus{border-color:var(--dora-yellow)}
.tb-heading-select option{background:#fff;color:#333}

/* ===== More Dropdown ===== */
.more-dropdown{position:absolute;top:100%;right:0;background:var(--white);border:2px solid var(--dora-light);border-radius:16px;box-shadow:0 8px 32px rgba(1,111,173,0.15);min-width:200px;max-height:300px;overflow-y:auto;z-index:260;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}
.more-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.more-dropdown-item{width:100%;padding:10px 14px;border-radius:12px;font-size:13px;color:var(--dora-deep);text-align:left;display:flex;align-items:center;gap:10px;transition:background .15s}
.more-dropdown-item:hover{background:var(--dora-cream)}
.more-dropdown-item .icon{width:24px;text-align:center}
.more-dropdown-sep{height:1px;background:var(--dora-light);margin:6px 0}

/* ===== Editor Area ===== */
.editor-wrap{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative}
.editor-float-stats{position:absolute;top:10px;right:12px;background:rgba(255,253,231,0.92);backdrop-filter:blur(4px);border:1px solid var(--dora-light);border-radius:20px;padding:4px 14px;font-size:11px;color:var(--text3);pointer-events:none;z-index:10;white-space:nowrap;box-shadow:0 1px 6px rgba(1,111,173,0.08)}
.editor{flex:1;padding:24px 28px;overflow-y:auto;outline:none;font-size:15px;line-height:1.8;color:var(--text);border-left:3px solid transparent;border-image:linear-gradient(to bottom,var(--dora-yellow),var(--dora-blue),var(--dora-yellow)) 1 0;background-color:#FFFDE7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 265'%3E%3Cpath d='M80 8 C115 25 140 90 125 160 C110 225 85 250 80 255 C75 250 50 225 35 160 C20 90 45 25 80 8Z' fill='%23B8860B' fill-opacity='0.18'/%3E%3Cpath d='M80 8 Q79 130 80 255' stroke='%23B8860B' stroke-width='2' fill='none' stroke-opacity='0.2'/%3E%3Cpath d='M80 70 Q58 95 38 108' stroke='%23B8860B' stroke-width='1.2' fill='none' stroke-opacity='0.15'/%3E%3Cpath d='M80 100 Q102 120 122 130' stroke='%23B8860B' stroke-width='1.2' fill='none' stroke-opacity='0.15'/%3E%3Cpath d='M80 140 Q60 162 42 175' stroke='%23B8860B' stroke-width='1' fill='none' stroke-opacity='0.12'/%3E%3Cpath d='M80 165 Q100 183 118 195' stroke='%23B8860B' stroke-width='1' fill='none' stroke-opacity='0.12'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cpath d='M60 5 C90 18 110 70 96 125 C82 175 65 195 60 200 C55 195 38 175 24 125 C10 70 30 18 60 5Z' fill='%23B8860B' fill-opacity='0.11'/%3E%3Cpath d='M60 5 Q59 100 60 200' stroke='%23B8860B' stroke-width='1.8' fill='none' stroke-opacity='0.13'/%3E%3Cpath d='M60 55 Q42 75 28 85' stroke='%23B8860B' stroke-width='1' fill='none' stroke-opacity='0.1'/%3E%3Cpath d='M60 85 Q78 100 94 108' stroke='%23B8860B' stroke-width='1' fill='none' stroke-opacity='0.1'/%3E%3Cpath d='M60 120 Q44 138 32 148' stroke='%23B8860B' stroke-width='0.8' fill='none' stroke-opacity='0.08'/%3E%3C/svg%3E"),linear-gradient(158deg,#FFFDE7 0%,#FFF3B0 100%);background-size:240px 340px,160px 240px,100% 100%;background-position:-40px bottom,calc(100% + 15px) 80px,0 0;background-repeat:no-repeat,no-repeat,no-repeat}
.editor:empty::before{content:attr(data-placeholder);color:#CCC;pointer-events:none}
.editor img{max-width:100%;height:auto;border-radius:12px;margin:8px 0;display:block}
.editor table[data-theme-component]{background-color:transparent}
/* ===== 品牌手册：编辑区内容样式提示，与右侧预览保持一致 ===== */
/* 标题左侧铃铛金竖线（3px），不堆渐变色块 */
.editor h1,.editor h2,.editor h3{border-left:3px solid #F5C518;padding-left:14px;color:#2B2B2B;font-weight:700;line-height:1.4;margin:1.1em 0 .55em;letter-spacing:.02em}
.editor h1{font-size:22px}
.editor h2{font-size:20px}
.editor h3{font-size:17px;font-weight:600}
/* 引用：淡蓝底 + 哆啦A梦蓝竖线 */
.editor blockquote{border-left:3px solid #03ADF0;background:#E0F4FE;color:#2B2B2B;padding:16px 16px 16px 20px;border-radius:4px;margin:1em 0}
/* 分割线：居中 40px 短金线 */
.editor hr{border:none;height:2px;width:40px;background:#F5C518;margin:16px auto}
.editor-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--white);border-top:1px solid var(--dora-light);font-size:12px;color:var(--text3);flex-shrink:0}

/* ===== Preview Area ===== */
.preview-toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--white);border-bottom:1px solid var(--dora-light);flex-shrink:0}
.preview-toolbar .label{font-size:13px;font-weight:600;color:var(--dora-deep)}
.preview-toolbar .spacer{flex:1}
.mobile-toggle{padding:6px 12px;border:2px solid var(--dora-light);border-radius:20px;font-size:12px;color:var(--dora-blue);transition:all .2s;background:#fff}
.mobile-toggle:hover{border-color:var(--dora-yellow);color:var(--dora-deep)}
.mobile-toggle.active{background:var(--dora-blue);color:#fff;border-color:var(--dora-blue)}
.preview-wrap{flex:1;overflow-y:auto;background:radial-gradient(circle at 10% 20%,rgba(187,222,251,0.2) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(245,197,24,0.1) 0%,transparent 35%),#F0F1F3;display:flex;justify-content:center;padding:16px}
.preview-frame{width:100%;max-width:100%;background:var(--white);box-shadow:0 4px 16px rgba(1,111,173,0.1),0 0 0 1px rgba(255,255,255,0.5) inset;transition:max-width .3s,box-shadow .3s;border-radius:16px;border:2px solid var(--dora-light)}
.preview-frame.mobile{max-width:375px;border-radius:12px;box-shadow:0 8px 32px rgba(1,111,173,0.15)}
.preview-content{padding:32px 24px;font-size:15px;line-height:1.75;color:#333;word-wrap:break-word;overflow-wrap:break-word}
.preview-content img{max-width:100%;height:auto;border-radius:12px}
.preview-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--white);border-top:1px solid var(--dora-light);font-size:12px;color:var(--text3);flex-shrink:0}

/* ===== Bottom Bar ===== */
.bottom-bar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:linear-gradient(to top,var(--dora-white),#FAFCFF);border-top:2px solid var(--dora-light);flex-shrink:0;box-shadow:0 -2px 12px rgba(1,111,173,0.08)}
.bottom-bar .spacer{flex:1}
.btn-primary{padding:12px 28px;border-radius:25px;background:linear-gradient(180deg,rgba(110,220,255,0.32) 0%,rgba(110,220,255,0) 55%),linear-gradient(145deg,var(--dora-blue),var(--dora-deep));color:#fff;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 4px 12px rgba(1,111,173,0.3),inset 0 1px 0 rgba(255,255,255,0.3);border:none;position:relative;overflow:hidden}
.btn-primary:hover{background:linear-gradient(145deg,var(--dora-yellow),#E5B800);color:var(--dora-deep);transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,197,24,0.4);text-shadow:0 0 10px rgba(255,255,255,0.5)}
.btn-primary.success{background:#4CAF50;color:#FFF;border-color:#4CAF50}
.btn-secondary{padding:10px 18px;border-radius:20px;background:var(--dora-white);border:2px solid var(--dora-light);color:var(--dora-deep);font-size:13px;transition:all .2s}
.btn-secondary:hover{border-color:var(--dora-yellow);background:var(--dora-cream);transform:translateY(-1px)}
.btn-secondary.success{background:#4CAF50;color:#FFF;border-color:#4CAF50}
.btn-save-style{background:var(--dora-blue);border-color:var(--dora-blue);color:#fff}
.btn-save-style:hover{background:var(--dora-deep);border-color:var(--dora-deep);color:#fff}
.btn-group-left,.btn-group-right{display:flex;align-items:center;gap:10px}
.dropdown-wrap{position:relative}
.dropdown-menu{display:none;position:absolute;bottom:calc(100% + 8px);left:0;min-width:168px;background:#fff;border:1.5px solid var(--dora-light);border-radius:14px;box-shadow:0 4px 20px rgba(1,111,173,0.14);padding:6px;z-index:300}
.dropdown-menu.open{display:block}
.dropdown-menu button{display:block;width:100%;text-align:left;padding:9px 14px;border:none;background:none;border-radius:9px;font-size:13px;color:var(--dora-deep);cursor:pointer;white-space:nowrap}
.dropdown-menu button:hover{background:var(--dora-cream)}
.btn-publish{padding:12px 44px;font-size:15px;font-weight:700;letter-spacing:0.3px;background:linear-gradient(180deg,rgba(110,220,255,0.32) 0%,rgba(110,220,255,0) 55%),linear-gradient(145deg,#016FAD,#003E6B);box-shadow:0 4px 16px rgba(0,62,107,0.35),inset 0 1px 0 rgba(255,255,255,0.3)}
.btn-publish:hover{background:linear-gradient(145deg,var(--dora-yellow),#E5B800);color:var(--dora-deep);box-shadow:0 6px 20px rgba(245,197,24,0.4)}

/* ===== Settings Panel (right side overlay) ===== */
.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);z-index:200;display:none;opacity:0;transition:opacity .2s}
.settings-overlay.show{display:flex;opacity:1}
.settings-panel{position:fixed;top:0;right:0;width:380px;height:100%;background:var(--white);box-shadow:-4px 0 24px rgba(0,0,0,.1);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease}
.settings-panel.show{transform:translateX(0)}
.sp-header{display:flex;align-items:center;padding:16px 20px;background:linear-gradient(135deg,var(--dora-blue),var(--dora-deep));border-bottom:3px solid var(--dora-yellow)}
.sp-header h3{font-size:16px;flex:1;color:#fff}
.sp-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:18px;color:var(--dora-deep);background:var(--dora-yellow);transition:all .3s}
.sp-close:hover{background:var(--dora-red);color:#fff;transform:rotate(90deg)}
.sp-body{flex:1;overflow-y:auto;padding:16px 20px}
.sp-section{margin-bottom:20px}
.sp-section h4{font-size:13px;font-weight:600;color:var(--dora-deep);margin-bottom:8px;border-left:3px solid var(--dora-yellow);padding-left:8px}
.sp-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sp-row label{font-size:12px;color:var(--text2);width:70px;flex-shrink:0}
.sp-row select,.sp-row input[type=text],.sp-row input[type=number]{flex:1;padding:8px 10px;border:2px solid var(--dora-light);border-radius:20px;font-size:12px;outline:none;background:#fff}
.sp-row select:focus,.sp-row input:focus{border-color:var(--dora-yellow)}
.sp-row input[type=color]{width:36px;height:36px;padding:2px;border:2px solid var(--dora-light);border-radius:50%;cursor:pointer}
.color-chip{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s;overflow:hidden;background:#fff;display:grid;grid-template-columns:1.35fr 1fr 1fr;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.color-chip span{display:block;min-width:0}
.color-chip:hover,.color-chip.active{border-color:var(--dora-blue);transform:scale(1.15)}
.color-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.custom-color-grid{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;margin-top:8px}
.custom-color-grid label{font-size:11px;color:var(--text3)}
.custom-color-grid input[type=text]{padding:6px 10px;border:2px solid var(--dora-light);border-radius:20px;font-size:11px;width:80px;background:#fff}
.custom-color-grid input[type=color]{width:32px;height:32px;border:2px solid var(--dora-light);border-radius:50%;padding:2px}

/* ===== Mode Cards ===== */
/* ===== Settings Tabs ===== */
.settings-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;border-bottom:2px solid var(--dora-light);padding-bottom:12px}
.settings-tab{padding:8px 14px;border-radius:20px;font-size:12px;color:var(--dora-blue);background:var(--dora-cream);border:1px solid var(--dora-light);transition:all .2s;font-weight:500}
.settings-tab:hover{background:var(--dora-light);color:var(--dora-deep)}
.settings-tab.active{background:var(--dora-blue);color:#fff;border-color:var(--dora-blue)}

.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{padding:12px;border:2px solid var(--dora-light);border-radius:16px;cursor:pointer;transition:all .2s;text-align:center;background:#fff}
.mode-card:hover{border-color:var(--dora-yellow);transform:translateY(-2px);box-shadow:0 4px 12px rgba(245,197,24,0.2)}
.mode-card.active{border-color:var(--dora-blue);background:linear-gradient(135deg,#E3F2FD,#BBDEFB)}
.mode-card .mc-name{font-size:12px;font-weight:600;color:var(--dora-deep)}
.mode-card .mc-desc{font-size:10px;color:var(--text3);margin-top:2px}

/* ===== Modal ===== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(1,111,173,.5);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal{background:var(--white);border-radius:20px;padding:24px;width:440px;max-width:90vw;max-height:80vh;overflow-y:auto;scrollbar-gutter:stable both-edges;box-shadow:0 20px 60px rgba(1,111,173,0.25),0 0 0 1px rgba(255,255,255,0.5) inset;border:2px solid var(--dora-light);position:relative}
.modal::before{content:'🔔';position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:36px}
.modal h3{font-size:18px;margin-bottom:16px;color:var(--dora-deep);font-weight:700}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal input[type=text]{width:100%;padding:10px 14px;border:2px solid var(--dora-light);border-radius:20px;font-size:13px;outline:none;background:#fff}
.modal input[type=text]:focus{border-color:var(--dora-yellow)}

/* ===== Saved Styles Dropdown ===== */
.styles-dropdown{position:absolute;top:100%;right:0;background:var(--white);border:2px solid var(--dora-light);border-radius:16px;box-shadow:0 8px 32px rgba(1,111,173,0.15);min-width:300px;max-height:420px;overflow-y:auto;z-index:150;display:none;flex-direction:column;gap:8px;padding:12px}
.styles-dropdown.show{display:flex}
.sd-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:2px solid var(--dora-light);background:#fff;opacity:0;transform:translateY(12px);transition:border-color .15s,box-shadow .15s}
.sd-card:hover{border-color:var(--dora-yellow);box-shadow:0 4px 12px rgba(245,197,24,0.18)}
.sd-card.pop-in{animation:pocket-pop .32s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes pocket-pop{from{opacity:0;transform:translateY(14px) scale(0.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.sd-card-colors{width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr 1fr;border:2px solid rgba(0,0,0,0.08)}
.sd-card-colors span{display:block}
.sd-card-body{flex:1;min-width:0;cursor:pointer}
.sd-card-name{font-size:13px;font-weight:600;color:var(--dora-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-card-meta{font-size:11px;color:var(--text3);margin-top:2px}
.sd-card-mode-tag{display:inline-block;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:600;color:#fff}
.sd-card-actions{display:flex;gap:4px;flex-shrink:0}
.sd-card-actions button{font-size:13px;padding:4px 8px;border-radius:20px;background:transparent;color:var(--dora-deep);border:none;cursor:pointer;transition:background .15s}
.sd-card-actions button:hover{background:var(--dora-cream)}
.sd-empty{padding:20px;text-align:center;color:var(--text3);font-size:13px}
.edit-mode-chip{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:12px;border:2px solid var(--dora-light);cursor:pointer;transition:all .15s;min-width:62px;text-align:center;background:#fff}
.edit-mode-chip:hover{transform:translateY(-2px)}
.edit-mode-chip span:first-child{font-size:18px}

/* Image Insert Panel */
.img-panel{position:absolute;top:100%;left:0;background:var(--white);border:2px solid var(--dora-light);border-radius:16px;box-shadow:0 8px 32px rgba(1,111,173,0.15);width:370px;padding:16px;z-index:250;display:none}
.img-panel.show{display:block}
.img-panel h4{font-size:14px;margin-bottom:10px;color:var(--dora-deep);font-weight:600}
.img-panel .tab-row{display:flex;gap:4px;margin-bottom:12px}
.img-panel .tab-btn{padding:6px 14px;border-radius:20px;font-size:12px;color:var(--dora-blue);border:2px solid var(--dora-light);background:#fff}
.img-panel .tab-btn.active{background:var(--dora-blue);color:#fff;border-color:var(--dora-blue)}
.img-panel input[type=text]{width:100%;padding:8px 12px;border:2px solid var(--dora-light);border-radius:12px;font-size:12px;margin-bottom:10px;background:#fff}
.img-panel .img-options{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.img-panel .img-options select,.img-panel .img-options input{padding:6px 10px;border:2px solid var(--dora-light);border-radius:20px;font-size:12px;background:#fff}
.img-panel .img-insert-btn{padding:10px 16px;background:linear-gradient(145deg,var(--dora-blue),var(--dora-deep));color:#fff;border:none;border-radius:25px;font-size:13px;width:100%;font-weight:600;box-shadow:0 4px 12px rgba(3,173,240,0.3);transition:all .2s}
.badge-preset{font-size:11px;padding:5px 14px;border:1.5px solid var(--dora-blue);background:#fff;color:var(--dora-blue);border-radius:14px;cursor:pointer;font-weight:700;transition:all .15s;letter-spacing:0.5px}
.badge-preset:hover{background:var(--dora-cream);border-color:var(--dora-deep);color:var(--dora-deep);transform:translateY(-1px);box-shadow:0 2px 6px rgba(3,173,240,0.2)}
.badge-preset.active{background:linear-gradient(145deg,var(--dora-blue),var(--dora-deep));color:#fff;border-color:var(--dora-deep);box-shadow:0 2px 8px rgba(1,111,173,0.3)}
.badge-preset.active:hover{transform:translateY(-1px)}
.img-panel .img-insert-btn:hover{background:linear-gradient(145deg,var(--dora-yellow),#E5B800);color:var(--dora-deep);transform:translateY(-1px)}
.img-upload-area{border:2px dashed var(--dora-light);border-radius:16px;padding:24px;text-align:center;color:var(--text3);font-size:12px;cursor:pointer;transition:all .2s;margin-bottom:10px;background:linear-gradient(135deg,#F8FCFF,#F0F7FF)}
.img-upload-area:hover{border-color:var(--dora-yellow);color:var(--dora-deep);background:var(--dora-cream)}
.img-upload-area input[type=file]{display:none}
.img-layout-note{font-size:11px;color:var(--text3);line-height:1.5;margin:-2px 0 10px}
.hr-panel{position:absolute;top:100%;left:0;background:var(--white);border:2px solid var(--dora-light);border-radius:16px;box-shadow:0 8px 32px rgba(1,111,173,0.15);width:220px;padding:12px;z-index:240;display:none}
.hr-panel.show{display:block}
.hr-option{width:100%;padding:10px 12px;border-radius:12px;color:var(--dora-deep);font-size:12px;text-align:left;display:block;transition:all .15s}
.hr-option:hover{background:var(--dora-cream)}
.hr-preview{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--text3)}
.hr-preview span{display:inline-block}
.align-panel{position:absolute;top:100%;left:0;background:var(--white);border:2px solid var(--dora-light);border-radius:16px;box-shadow:0 8px 32px rgba(1,111,173,0.15);width:140px;padding:8px;z-index:245;display:none}
.align-panel.show{display:block}
.align-option{width:100%;height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:12px;color:var(--dora-deep);font-size:12px;text-align:left;transition:all .15s}
.align-option:hover,.align-option.active{background:var(--dora-cream)}
.align-option .icon{width:20px;text-align:center;font-size:14px}

/* ===== Help Modal ===== */
.help-content{font-size:13px;line-height:1.8;color:var(--text2)}
.help-content h4{color:var(--dora-deep);margin:12px 0 4px;font-size:14px;font-weight:600}
.help-content kbd{padding:2px 8px;background:var(--dora-cream);border:1px solid var(--dora-light);border-radius:12px;font-size:12px;font-family:monospace}
.help-content ul{padding-left:16px;margin:4px 0}
/* 让帮助弹窗高度固定，避免切 tab 时铃铛位置漂 */
.modal:has(.help-tabs){min-height:640px;display:flex;flex-direction:column}
.modal:has(.help-tabs) .help-content,
.modal:has(.help-tabs) .help-contact{flex:1;min-height:0}
.help-tabs{display:flex;gap:6px;border-bottom:2px solid var(--dora-light);margin-bottom:16px;margin-top:12px;flex-shrink:0}
.help-tab{padding:10px 20px;background:none;border:none;cursor:pointer;font-size:14px;color:var(--text3);border-bottom:3px solid transparent;margin-bottom:-2px;font-weight:500;transition:all .2s}
.help-tab:hover{color:var(--dora-deep)}
.help-tab.active{color:var(--dora-deep);font-weight:700;border-bottom-color:var(--dora-deep)}
.help-contact{padding:20px 0;text-align:center;display:flex;align-items:center;justify-content:center}
.help-contact-card{display:inline-block;padding:24px 28px;background:linear-gradient(160deg,var(--dora-cream) 0%,#fff 100%);border:2px solid var(--dora-light);border-radius:24px;box-shadow:0 6px 24px rgba(1,111,173,0.08)}
.help-contact-title{font-size:18px;font-weight:700;color:var(--dora-deep);margin-bottom:6px}
.help-contact-sub{font-size:13px;color:var(--text3);margin-bottom:18px}
.help-contact img{width:300px;height:300px;object-fit:contain;border-radius:16px;background:#fff;display:block;margin:0 auto}
.help-contact-tagline{margin-top:14px;font-size:13px;color:var(--text2);font-weight:500}
.help-contact-hint{margin-top:6px;font-size:11px;color:var(--text3)}
.help-qr{margin-top:18px;padding-top:16px;border-top:2px solid var(--dora-light);text-align:center;border-radius:0 0 16px 16px}
.help-qr-title{font-size:14px;font-weight:700;color:var(--dora-deep);margin-bottom:10px}
.help-qr img{width:180px;height:180px;object-fit:contain;border-radius:16px;border:3px solid var(--dora-light);background:#fff}
.help-qr-note{font-size:12px;color:var(--text3);margin-top:8px}

/* ===== Responsive ===== */
@media(max-width:900px){
  .mode-cards{grid-template-columns:1fr}
  .settings-panel{width:320px}
}

/* ===== Brand promotion toast ===== */
.promote-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:14px 20px;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.08);display:flex;align-items:center;gap:12px;font-size:13px;z-index:1500;transition:opacity .3s ease,transform .3s ease;max-width:92vw}
.promote-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;animation:toastIn .45s cubic-bezier(.34,1.56,.64,1)}
.promote-toast .promote-icon{font-size:18px;flex-shrink:0}
.promote-toast .promote-text{flex:1;line-height:1.5;letter-spacing:0.3px}
.promote-toast .promote-close{background:transparent;border:none;color:rgba(255,255,255,0.65);font-size:13px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .2s;flex-shrink:0}
.promote-toast .promote-close:hover{background:rgba(255,255,255,0.15);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== Onboarding overlay ===== */
.onboarding-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;z-index:2000;animation:obFadeIn .3s ease}
.onboarding-overlay.show{display:flex}
.ob-card{background:#fff;border-radius:24px;padding:40px 36px 32px;width:440px;max-width:90vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.5) inset;animation:obSlideUp .45s cubic-bezier(.34,1.56,.64,1)}
.ob-icon{font-size:56px;margin-bottom:14px;line-height:1;animation:obSlideUp .55s cubic-bezier(.34,1.56,.64,1)}
.ob-step-num{display:inline-block;background:var(--dora-light);color:var(--dora-deep);font-size:11px;font-weight:800;padding:4px 14px;border-radius:14px;letter-spacing:1.5px;margin-bottom:14px}
.ob-title{font-size:22px;font-weight:800;color:var(--dora-deep);margin:0 0 12px;line-height:1.35}
.ob-desc{font-size:14px;color:var(--text2);line-height:1.75;margin:0 0 28px}
.ob-actions{display:flex;gap:12px;justify-content:center}
.ob-btn{padding:11px 28px;border:none;border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.ob-btn-primary{background:linear-gradient(180deg,rgba(110,220,255,0.32) 0%,rgba(110,220,255,0) 55%),linear-gradient(145deg,var(--dora-blue),var(--dora-deep));color:#fff;box-shadow:0 4px 14px rgba(1,111,173,0.3),inset 0 1px 0 rgba(255,255,255,0.3)}
.ob-btn-primary:hover{background:linear-gradient(145deg,var(--dora-yellow),#E5B800);color:var(--dora-deep);transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,197,24,0.4)}
.ob-btn-skip{background:transparent;color:var(--text3);border:2px solid transparent}
.ob-btn-skip:hover{color:var(--dora-deep);background:var(--dora-cream)}
@keyframes obFadeIn{from{opacity:0}to{opacity:1}}
@keyframes obSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#020617;
    --white:#0F172A;
    --border:#334155;
    --text:#E5E7EB;
    --text2:#CBD5E1;
    --text3:#94A3B8;
    --brand-soft:#0F2A3A;
    --shadow:0 2px 12px rgba(0,0,0,0.36);
  }
  body{
    background:#020617;
    color:#E5E7EB;
    color-scheme:dark;
  }
  body::before{opacity:0.05}
  .panel-left,.editor-wrap{
    background:#0F172A;
  }
  .panel-right{
    background:linear-gradient(180deg,#020617 0%,#0F172A 100%);
  }
  .editor-toolbar,.preview-toolbar,.editor-footer,.preview-footer,.bottom-bar{
    background:#0F172A;
    border-color:#1F2937;
  }
  .editor{
    color:#E5E7EB;
    border-left:3px solid #059669;
    border-image:none;
    background-color:#0B1120;
    background-image:linear-gradient(160deg,#0B1120 0%,#111827 100%);
  }
  .editor:empty::before{color:#64748B}
  .editor h1,.editor h2,.editor h3{
    color:#F9FAFB;
    border-left-color:#10B981;
  }
  .editor blockquote{
    background:#052E24;
    border-left-color:#10B981;
    color:#D1FAE5;
  }
  .editor hr{background:#10B981}
  .editor-float-stats{
    background:rgba(15,23,42,0.92);
    border-color:#334155;
    color:#94A3B8;
  }
  .preview-wrap{
    background:radial-gradient(circle at 10% 18%,rgba(16,185,129,0.14) 0%,transparent 38%),radial-gradient(circle at 90% 78%,rgba(3,173,240,0.10) 0%,transparent 34%),#020617;
  }
  .preview-frame{
    background:#FFFFFF;
    border-color:#1F2937;
    box-shadow:0 12px 34px rgba(0,0,0,0.42);
  }
  .preview-content{
    background:#FFFFFF !important;
    color:#374151;
    color-scheme:light;
  }
  .preview-toolbar .label{color:#E5E7EB}
  .mobile-toggle,.tb-btn,.tb-heading-select,.btn-secondary,.mode-card,.color-chip,.edit-mode-chip,.img-panel .tab-btn,.badge-preset{
    background:#111827;
    border-color:#334155;
    color:#E5E7EB;
  }
  .mobile-toggle.active,.btn-save-style{
    background:#059669;
    border-color:#059669;
    color:#FFFFFF;
  }
  .tb-btn:hover,.tb-heading-select:hover,.btn-secondary:hover,.mode-card:hover,.more-dropdown-item:hover,.hr-option:hover,.align-option:hover,.align-option.active,.dropdown-menu button:hover,.sd-card-actions button:hover{
    background:#1F2937;
    border-color:#10B981;
    color:#F9FAFB;
  }
  .more-dropdown,.dropdown-menu,.styles-dropdown,.img-panel,.hr-panel,.align-panel,.settings-panel,.modal,.ob-card,.help-contact-card{
    background:#0F172A;
    border-color:#334155;
    color:#E5E7EB;
    box-shadow:0 16px 42px rgba(0,0,0,0.45);
  }
  .more-dropdown-item,.dropdown-menu button,.hr-option,.align-option,.sd-card-name,.mode-card .mc-name,.img-panel h4,.modal h3,.help-content h4,.sp-section h4{
    color:#E5E7EB;
  }
  .sd-card,.mode-card,.edit-mode-chip,.help-content kbd,.modal input[type=text],.sp-row select,.sp-row input[type=text],.sp-row input[type=number],.custom-color-grid input[type=text],.img-panel input[type=text],.img-panel .img-options select,.img-panel .img-options input,.img-upload-area{
    background:#111827;
    border-color:#334155;
    color:#E5E7EB;
  }
  .mode-card.active{
    background:#052E24;
    border-color:#10B981;
  }
  .settings-tab{
    background:#111827;
    border-color:#334155;
    color:#A7F3D0;
  }
  .settings-tab.active{
    background:#059669;
    border-color:#059669;
    color:#FFFFFF;
  }
  .settings-overlay{background:rgba(2,6,23,0.72)}
  .promote-toast{background:linear-gradient(135deg,#020617,#111827)}
}