/* Workspace chrome only. The phone preview and image export retain their original styles. */
.workspace { --studio-green:#24785c; --studio-ink:#223b34; background:#f5f7f6; }
.workspace #wrapper { background:#f5f7f6; }
.workspace .navbar-static-top { background:#fff; border:0; min-height:76px; }
.workspace .navbar-header { height:76px; }
.workspace .top-logo { display:flex; align-items:center; gap:11px; width:290px; height:76px; padding:0 23px; background:none; text-indent:0; color:#223b34; font:700 20px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; text-decoration:none; }
.workspace .top-logo small { display:block; color:#86958e; font-size:8px; letter-spacing:1.8px; margin-top:4px; }
.brand-mark {  width: 35px; height: 35px; border-radius: 10px; object-fit: cover; display: block; }
.workspace .navbar-top-links { border:0; }
.workspace .sidebar { background:#fff; border-right:1px solid #e6ece8; }
.workspace .sidebar .sidebar-nav { padding:22px 14px; }
.workspace .sidebar-nav:before,
.workspace #side-menu .sidebar-article-heading { display:block; color:#9aa69f; font-size:11px; letter-spacing:2px; }
.workspace .sidebar-nav:before { content:'创作空间'; margin:0 14px 15px; }
.workspace #side-menu li { border:0; }
.workspace #side-menu a { border-radius:8px; color:#69786f; font-size:14px; padding:13px 14px; margin-bottom:5px; transition:background .18s,color .18s; }
.workspace #side-menu a:hover { background:#f2f6f3; color:#24785c; }
.workspace #side-menu a.active { background:#e9f3ec; color:#24785c; font-weight:600; }
.workspace #side-menu .iconfont2 { margin-right:11px; font-size:18px; }
.workspace #side-menu .nav-second-level { padding:3px 0 8px 17px; }
.workspace #side-menu .nav-second-level a { font-size:13px; padding:10px 12px 10px 30px; }
.workspace #side-menu .arrow { line-height:23px; color:#9ca9a1; }
.workspace .sidebar .fa.arrow:before { content:"\f105"; }
.workspace .sidebar .active>a>.fa.arrow:before { content:"\f107"; }
.workspace #page-wrapper { background:#f5f7f6; border:0; }
.workspace #btn-menu { background:#eef4ef; color:#24785c; text-indent:0; text-align:center; font-size:23px; border-radius:8px; width:38px; height:38px; top:19px; line-height:38px; text-decoration:none; }
.workspace a:focus-visible { outline:3px solid #78ac8d; outline-offset:4px; }
@media(min-width:768px) {
 .workspace .navbar-static-top { position:fixed; left:0; top:0; bottom:0; width:230px; z-index:100; }
 .workspace .navbar-header { float:none; }
 .workspace .sidebar { position:absolute; top:76px; bottom:0; width:230px; margin:0; overflow:auto; }
 .workspace .sidebar .sidebar-nav { display:block!important; }
 .workspace #page-wrapper { margin-left:230px; min-height:100vh; }
 .workspace #app_location { left:230px; }
 .workspace > .foot-bottom { margin-left:230px; }
}
/* Homepage */
.home-page { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--studio-ink); }
.home-page #page-wrapper { padding:0 40px 18px; }
.workspace-topline { max-width:1280px; margin:auto; height:82px; display:flex; align-items:center; justify-content:space-between; color:#8c9992; font-size:12px; }
.workspace-topline strong { color:#455a50; font-weight:500; }
.breadcrumb-divider { margin:0 13px; color:#c0cbc4; }
.online-status { color:#698371; font-size:11px; }
.online-status:before { content:''; display:inline-block; width:6px; height:6px; background:#68a57c; border-radius:50%; margin-right:7px; }
.welcome-banner { max-width:1280px; margin:auto; min-height:300px; background:#e9f1e8; border:1px solid #e0e9de; border-radius:16px; display:flex; overflow:hidden; position:relative; }
.welcome-copy { padding:33px 36px; position:relative; z-index:1; flex:1; }
.eyebrow { color:#6c8c76; font-size:11px; letter-spacing:2px; }
.welcome-copy h1 { font-size:35px; font-weight:650; line-height:1.42; letter-spacing:1px; margin:12px 0; }
.welcome-copy p { font-size:13px; color:#789080; margin:0 0 25px; }
.studio-button { display:inline-flex; align-items:center; gap:30px; padding:12px 19px; background:#24785c; color:#fff; border-radius:7px; font-size:12px; box-shadow:0 4px 9px #24785c12; }
.studio-button:hover,.studio-button:focus { background:#1a6048; color:#fff; text-decoration:none; }
.cta-group { display:flex; align-items:center; gap:15px; margin-bottom:0; }
.app-features-hint { font-size:11px; color:#7a9580; margin:0; }
.hero-art { width:40%; min-width:310px; position:relative; }
.art-window { width:268px; height:225px; position:absolute; top:52px; left:12px; background:#ffffffc9; border:1px solid #fff; border-radius:13px; transform:rotate(-5deg); box-shadow:0 18px 35px #54766015; padding:15px; }
.art-window-top { display:flex; justify-content:space-between; font-size:9px; color:#a4b5a9; border-bottom:1px solid #e7ede7; padding-bottom:13px; }
.art-avatar { width:24px; height:24px; border-radius:8px; background:#dbe7d9; margin-top:15px; }
.art-chat { border-radius:8px; padding:9px; position:absolute; font-size:10px; color:#789080; }
.chat-white { top:58px; left:48px; background:white; }
.chat-green { top:102px; right:15px; background:#cbe3b6; color:#54704a; }
.chat-short { top:143px; left:30px; background:white; }
.art-input { position:absolute; bottom:12px; left:15px; right:15px; display:flex; justify-content:space-between; font-size:9px; color:#b2bdb5; }
.art-input b { background:#75a187; color:white; border-radius:4px; padding:0 5px; }
.art-note { position:absolute; top:35px; right:30px; z-index:2; transform:rotate(7deg); padding:12px 17px; border:1px solid #fff; background:#f8fbf1; color:#8c9e66; border-radius:9px; font-size:11px; box-shadow:0 7px 12px #486d5510; }
.art-orbit { position:absolute; width:330px; height:330px; border:1px solid #d9e5d6; border-radius:50%; top:0; left:-10px; }
.orbit-two { width:400px; height:400px; top:-35px; left:-45px; }
.art-spark { position:absolute; bottom:17px; right:40px; font-size:50px; color:#86a77f; }
.studio-notice { max-width:1280px; margin:19px auto 31px; display:flex; align-items:center; gap:9px; color:#91998b; font-size:11px; }
.notice-icon { border:1px solid #a1ac94; border-radius:50%; width:14px; height:14px; text-align:center; line-height:13px; flex-shrink:0; }
.tools-section { max-width:1280px; margin:auto; scroll-margin-top:24px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:19px; }
.section-heading .eyebrow { color:#99a39b; font-size:10px; }
.section-heading h2 { font-size:21px; font-weight:600; margin:7px 0 0; }
.section-heading h2 span { font-size:11px; font-weight:400; color:#84958a; background:#e8eeea; padding:3px 7px; border-radius:5px; margin-left:8px; vertical-align:middle; }
.section-heading p { font-size:11px; color:#748278; margin:0 0 3px; }
.tool-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.tool-card { --accent:#388569; --tint:#eaf4ed; display:block; min-width:0; padding:22px 20px 15px; background:#fff; border:1px solid #e5eae6; border-radius:11px; color:#30463b; transition:transform .18s,box-shadow .18s,border-color .18s; }
.tool-card:hover { color:#30463b; text-decoration:none; transform:translateY(-4px); border-color:#bad0c1; box-shadow:0 9px 22px #203e3210; }
.tool-card.amber { --accent:#bd9654; --tint:#fbf3e5; }
.tool-card.rose { --accent:#cc7d7d; --tint:#fbeeee; }
.tool-card.sky { --accent:#6d94bb; --tint:#eef4fb; }
.tool-card.teal { --accent:#599e96; --tint:#eaf5f3; }
.tool-card.violet { --accent:#9380b7; --tint:#f2eef9; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.tool-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--accent); background:var(--tint); }
.tool-icon i { font-size:24px; line-height:1; transform:translate(-3.5px, -3.5px); }
.tool-tag { font-size:9px; color:#9ba79e; background:#f7f9f7; border-radius:4px; padding:3px 6px; }
.tool-card h3 { font-size:15px; font-weight:600; margin:19px 0 9px; }
.tool-card p { font-size:11px; color:#748278; line-height:1.8; min-height:38px; margin-bottom:15px; }
.card-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #eff2ef; padding-top:13px; font-size:10px; color:#6e8a78; }
.card-bottom small { color:#b1bab4; font-size:9px; }
.card-bottom > span > span { margin-left:10px; }
.app-download-card { max-width:1280px; margin:24px auto 0; padding:26px 30px; display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#e9f4ec 0%,#edf1ec 100%); border:2px solid #d4e4d7; border-radius:13px; box-shadow:0 6px 18px #24785c08; transition:transform .18s,box-shadow .18s; }
.app-download-card:hover { text-decoration:none; background:linear-gradient(135deg,#e3f0e6 0%,#e6eee4 100%); transform:translateY(-2px); box-shadow:0 8px 24px #24785c12; }
.download-icon { width:48px; height:48px; display:grid; place-items:center; background:#24785c; border-radius:12px; font-size:28px; color:#fff; box-shadow:0 4px 12px #24785c25; }
.app-download-card h3 { color:#2d5042; font-size:16px; font-weight:600; margin:0 0 8px; }
.app-download-card p { color:#7a8e7a; font-size:12px; margin:0; }
.download-action { margin-left:auto; padding:12px 20px; color:#fff; background:#24785c; border:0; border-radius:8px; font-size:12px; font-weight:500; white-space:nowrap; box-shadow:0 4px 10px #24785c20; transition:background .18s,box-shadow .18s; }
.download-action:hover { background:#1a6048; box-shadow:0 6px 14px #24785c30; }
.studio-footer { max-width:1280px; margin:28px auto 0; display:flex; justify-content:space-between; font-size:10px; color:#a4aea6; }
.studio-footer a { color:#8e9c92; }
.home-page > .foot-bottom { font-size:10px; color:#a4aea6; background:#f5f7f6; padding-bottom:20px; }
@media(min-width:1600px) { .home-page #page-wrapper { padding-left:65px; padding-right:65px; } }
@media(max-width:1200px) { .home-page #page-wrapper { padding-left:25px; padding-right:25px; } .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-art { min-width:270px; } .welcome-copy { padding:30px 26px; } .welcome-copy h1 { font-size:30px; } .art-note { right:10px; } }
@media(max-width:767px) {
 .workspace .navbar-static-top { min-height:76px; }
 .workspace .sidebar { margin:0; border-right:0; }
 .workspace .sidebar .sidebar-nav { max-height:65vh; overflow:auto; padding:14px; }
 .workspace .sidebar .sidebar-nav.is-open { display:block!important; }
 .workspace #page-wrapper { margin-left:0; }
 .workspace #btn-menu { display:block; }
 .home-page #page-wrapper { padding:0 18px 22px; }
 .workspace-topline { height:55px; }
 .welcome-copy { padding:28px 24px; }
 .welcome-copy h1 { font-size:29px; }
 .hero-art { display:none; }
 .welcome-banner { min-height:0; }
 .studio-notice { align-items:start; line-height:1.8; margin-bottom:26px; }
 .notice-icon { margin-top:3px; }
 .section-heading p { display:none; }
 .tool-grid { gap:11px; }
 .tool-card { padding:17px 14px 13px; }
 .tool-card h3 { margin-top:16px; }
 .tool-tag { font-size:8px; }
 .app-download-card { flex-wrap:wrap; padding:19px; gap:13px; }
 .app-download-card > div { flex:1; min-width:190px; }
 .app-download-card p { line-height:1.8; }
 .download-action { margin-left:53px; }
 .home-page > .foot-bottom { padding-bottom:75px; }
 .home-page .app-download-card { display:none; }
 .home-page #app_location { left:14px; right:14px; bottom:10px; height:94px; padding:8px 0; border:2px solid #dce9df; border-radius:20px; background:#fbfdfb; box-shadow:0 8px 24px #234b3820; }
 .home-page #app_location .guide_logo { width:68px; height:68px; margin:4px 18px 0 16px; border-radius:16px; }
 .home-page #app_location .txt { width:calc(100% - 210px); margin-left:0; padding-top:12px; white-space:normal; overflow:hidden; }
 .home-page #app_location .txt_11 { height:56px; margin:0; color:#496451; font-size:16px; line-height:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .home-page #app_location #app_lo { top:16px; right:16px; width:142px; height:68px; line-height:68px; border-radius:15px; background:#24785c; font-size:18px; font-weight:600; }
}
@media(prefers-reduced-motion:reduce) { .workspace #side-menu a,.tool-card { transition:none; } .tool-card:hover { transform:none; } }
/* Keep the existing mobile download action in the same visual language. */
.workspace #app_location { background:#f8fbf8; border-top:2px solid #d4e4d7; box-shadow:0 -4px 18px #203e3215; }
.workspace #app_lo { background:#24785c; border-radius:8px; right:12px; padding:10px 18px; font-weight:500; font-size:13px; box-shadow:0 3px 10px #24785c25; }
.workspace #app_location .txt { width:calc(100% - 155px); }
.workspace #app_location .txt_11 { font-family:inherit; font-size:12px; color:#4a654e; font-weight:500; }
.workspace #app_location .guide_logo { border-radius:11px; box-shadow:0 2px 8px #00000010; }
@media(max-width:767px) {
 .home-page #app_location { position:fixed; left:clamp(10px,2.1vw,14px); right:clamp(10px,2.1vw,14px); bottom:clamp(6px,1.5vw,10px); width:auto; height:clamp(68px,14vw,94px); box-sizing:border-box; padding:6px 0; border:2px solid #dce9df; border-radius:clamp(13px,3vw,20px); background:#fbfdfb; box-shadow:0 8px 24px #234b3820; }
 .home-page #app_location .guide_logo { display:block; flex:none; width:clamp(44px,10.2vw,68px); height:clamp(44px,10.2vw,68px); margin:4px clamp(10px,2.7vw,18px) 0 clamp(10px,2.4vw,16px); border-radius:clamp(10px,2.4vw,16px); }
 .home-page #app_location .txt { position:absolute; top:50%; left:clamp(64px,14vw,96px); right:clamp(108px,25vw,166px); width:auto; margin:0; padding:0; transform:translateY(-50%); white-space:normal; }
 .home-page #app_location .txt_11 { height:auto; margin:0; color:#496451; font-size:clamp(12px,2.4vw,16px); line-height:1.75; white-space:nowrap; }
 .home-page #app_location #app_lo { top:50%; right:clamp(8px,2.4vw,16px); width:clamp(92px,21.3vw,142px); height:clamp(44px,10.2vw,68px); box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:0; transform:translateY(-50%); border-radius:clamp(10px,2.4vw,15px); background:#24785c; font-size:clamp(13px,2.7vw,18px); line-height:normal; font-weight:600; }
}
.workspace #side-menu .sidebar-article-heading { padding:18px 14px 7px; }
.workspace #side-menu .sidebar-article-link { padding-top:9px; padding-bottom:9px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Editor workspace: keep the legacy generator intact while giving its chrome a
   calmer, more deliberate surface. */
.editor-page #page-wrapper {
 padding:0 34px 110px;
 background:
  radial-gradient(circle at 92% 8%,rgba(116,164,137,.12),transparent 28%),
  linear-gradient(145deg,#f7f9f7 0%,#f1f5f2 58%,#edf3ef 100%);
}
.editor-page .editor-header,
.editor-page .editor-canvas { max-width:1280px; margin-left:auto; margin-right:auto; }
.editor-page .editor-header .page-header {
 position:relative;
 margin:0;
 padding:31px 0 24px 18px;
 border:0;
 color:#243b32;
 font-size:24px;
 font-weight:650;
 letter-spacing:.2px;
}
.editor-page .editor-header .page-header:before {
 content:'';
 position:absolute;
 left:0;
 top:34px;
 width:5px;
 height:22px;
 border-radius:5px;
 background:linear-gradient(#2b8263,#78a889);
 box-shadow:0 4px 12px rgba(36,120,92,.18);
}
.editor-page .editor-header .clear-dialog {
 border:1px solid #d9e7df;
 border-radius:8px;
 background:#fff;
 color:#5d7368;
 box-shadow:0 2px 8px rgba(32,62,50,.05);
}
.editor-page .editor-header .clear-dialog:hover,
.editor-page .editor-header .clear-dialog:focus { background:#f4f8f5; color:#24785c; border-color:#bfd5c8; }
.editor-page .editor-canvas {
 padding:0!important;
 min-height:680px;
 border:1px solid #e0e9e3;
 border-radius:18px;
 background:rgba(255,255,255,.82);
 box-shadow:0 18px 45px rgba(39,71,56,.08),0 2px 8px rgba(39,71,56,.04);
 overflow:hidden;
}
.editor-page .panel-wx-tab {
 margin-right:420px;
 padding:0 28px 30px;
 background:#fff;
 border-right:1px solid #e8eee9;
 min-height:680px;
}
.editor-page .panel-wx-tab > .nav-tabs {
 position:relative;
 z-index:3;
 margin:0 -28px 24px;
 padding:15px 28px 0;
 border-bottom:1px solid #e7eee9;
 background:linear-gradient(180deg,#fbfcfb 0%,#f7faf8 100%);
}
.editor-page .panel-wx-tab > .nav-tabs > li > a {
 margin:0 5px 0 0;
 padding:12px 18px;
 border:0;
 border-radius:9px 9px 0 0;
 color:#718078;
 transition:background .18s,color .18s;
}
.editor-page .panel-wx-tab > .nav-tabs > li > a:hover { background:#edf4ef; color:#24785c; }
.editor-page .panel-wx-tab > .nav-tabs > li.active > a,
.editor-page .panel-wx-tab > .nav-tabs > li.active > a:hover,
.editor-page .panel-wx-tab > .nav-tabs > li.active > a:focus {
 border:0;
 background:#e8f2eb;
 color:#24785c;
 font-weight:600;
 box-shadow:inset 0 -2px #24785c;
}
.editor-page .setting { color:#34483e; }
.editor-page .setting p { margin-top:0; margin-bottom:18px; line-height:34px; }
/* User blocks are separated by a quiet divider instead of the legacy dotted rule. */
.editor-page .add-user {
 margin-top:22px;
 margin-bottom:24px;
 padding-bottom:24px;
 border-bottom:1px solid #e6eee9;
}
.editor-page .setting select,
.editor-page .setting input[type="text"] {
 min-height:34px;
 padding:5px 10px;
 border:1px solid #cfdad3;
 border-radius:7px;
 background:#fbfcfb;
 color:#35483f;
 box-shadow:inset 0 1px 2px rgba(38,62,51,.03);
 outline:none;
 transition:border-color .18s,box-shadow .18s,background .18s;
}
.editor-page .setting input[type="text"] { height:34px; min-height:34px; line-height:22px; }
.editor-page .setting select:focus,
.editor-page .setting input[type="text"]:focus {
 border-color:#6da086;
 background:#fff;
 box-shadow:0 0 0 3px rgba(54,131,96,.12);
}
/* Give the legacy editor actions one consistent, touch-friendly button treatment. */
.editor-page .setting input[type="button"],
.editor-page .setting .btn {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:40px;
 padding:0 17px;
 border:1px solid #c7d8ce;
 border-radius:9px;
 background:#f8fbf9;
 color:#315346;
 font-size:14px;
 font-weight:600;
 line-height:1.2;
 letter-spacing:.1px;
 box-shadow:0 2px 5px rgba(36,75,57,.08);
 transition:transform .18s,background-color .18s,border-color .18s,box-shadow .18s,color .18s;
}
.editor-page .setting input[type="button"]:hover,
.editor-page .setting .btn:hover,
.editor-page .setting input[type="button"]:focus-visible,
.editor-page .setting .btn:focus-visible {
 border-color:#8eb8a0;
 background:#eef7f1;
 color:#24785c;
 transform:translateY(-1px);
 box-shadow:0 5px 12px rgba(36,120,92,.14);
}
/* Keep the input-button border intact when the legacy control is hovered. */
.editor-page .setting input[type="button"]:hover,
.editor-page .setting input[type="button"]:focus-visible {
 border:1px solid #8eb8a0;
 transform:none;
}
.editor-page .setting input[type="button"]:active,
.editor-page .setting .btn:active { transform:translateY(0); box-shadow:0 2px 5px rgba(36,75,57,.08); }
.editor-page .setting input[type="button"]:focus,
.editor-page .setting .btn:focus { outline:0; }
.editor-page .setting #btn-trade { margin-left:7px; }
.editor-page .setting .btn-primary,
.editor-page .setting .btn-success { border-color:#24785c; background:#24785c; color:#fff; }
.editor-page .setting .btn-primary:hover,
.editor-page .setting .btn-primary:focus-visible,
.editor-page .setting .btn-success:hover,
.editor-page .setting .btn-success:focus-visible { border-color:#1d664d; background:#1d664d; color:#fff; }
.editor-page .setting .btn-warning { border-color:#d99435; background:#e5a043; color:#fff; }
.editor-page .setting .btn-warning:hover,
.editor-page .setting .btn-warning:focus-visible { border-color:#bd7a24; background:#d58d2f; color:#fff; }
.editor-page .setting .btn-danger { border-color:#c85d59; background:#c85d59; color:#fff; }
.editor-page .setting .btn-danger:hover,
.editor-page .setting .btn-danger:focus-visible { border-color:#ad4845; background:#ad4845; color:#fff; }
.editor-page .setting .a-u-dialog,
.editor-page .setting .a-u-dialog-pay,
.editor-page .setting .a-u-dialog-del,
.editor-page .setting .a-u-dialog-master,
.editor-page .setting .a-u-dialog-sedpacket,
.editor-page .setting .a-u-dialog-redpacket,
.editor-page .setting .a-u-dialog-voice,
.editor-page .setting .a-u-dialog-pic { margin-top:9px; margin-right:8px; }
.editor-page .a-u-name p {
 display:flex;
 flex-wrap:wrap;
 align-items:flex-start;
 gap:8px;
 margin-bottom:14px;
 overflow:visible;
}
.editor-page .a-u-name p > span {
 flex:0 0 115px;
 width:auto;
 padding-top:9px;
 color:#475c51;
 line-height:1.4;
}
.editor-page .a-u-name p > input[type="text"],
.editor-page .a-u-name p > textarea,
.editor-page .a-u-name p > .a-u-face { float:none; }
.editor-page .a-u-name p > .a-u-data-name,
.editor-page .a-u-name p > .a-u-data-redpacket {
 flex:0 1 260px;
 width:260px;
 min-width:0;
}
.editor-page .a-u-name p > textarea {
 flex:0 1 clamp(250px,32vw,480px);
 width:clamp(250px,32vw,480px);
 min-height:80px;
 height:80px;
 padding:10px 12px;
 border:1px solid #c7d8ce;
 border-radius:9px;
 background:#fbfcfb;
 color:#35483f;
 font-size:14px;
 line-height:1.6;
 outline:none;
 resize:vertical;
 box-shadow:inset 0 1px 2px rgba(38,62,51,.03);
 transition:border-color .18s,box-shadow .18s,background .18s;
}
.editor-page .a-u-name p > textarea:focus {
 border-color:#6da086;
 background:#fff;
 box-shadow:0 0 0 3px rgba(54,131,96,.12);
}
.editor-page .a-u-face {
 flex:0 0 36px;
 width:36px;
 height:36px;
 margin:4px 0 0 0;
 border:1px solid #c7d8ce;
 border-radius:10px;
 background-color:#f2f7f4;
 background-position:center;
 background-size:21px 22px;
 box-shadow:0 2px 5px rgba(36,75,57,.08);
 transition:transform .18s,background-color .18s,border-color .18s,box-shadow .18s;
}
.editor-page .a-u-face:hover,
.editor-page .a-u-face:focus-visible {
 border:1px solid #8eb8a0;
 background-color:#e8f4ec;
 transform:translateY(-1px);
 box-shadow:0 5px 12px rgba(36,120,92,.14);
}
.editor-page .a-u-face:focus { outline:0; }
.editor-page .emojiPanel {
 position:fixed;
 left:0;
 top:0;
 width:476px;
 height:270px;
 z-index:99999999;
 border-radius:12px;
 filter:drop-shadow(0 14px 24px rgba(31,65,50,.18));
}
.editor-page .emojiPanel .faceTab {
 position:absolute;
 top:0;
 left:0;
 bottom:auto;
 width:100%;
 height:40px;
 margin:0;
 padding:0 12px;
 box-sizing:border-box;
 border:1px solid #dce7e0;
 border-bottom:0;
 border-radius:12px 12px 0 0;
 background:#f7faf8;
 font:600 13px/40px -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
}
.editor-page .emojiPanel .faceTab li { height:40px; background:transparent; }
.editor-page .emojiPanel .faceTab a:link,
.editor-page .emojiPanel .faceTab a:visited {
 padding:0 14px;
 border:0;
 color:#60756b;
 line-height:40px;
 font-size:13px;
}
.editor-page .emojiPanel .faceTab a.chooseFaceTab {
 border:1px solid #dce7e0;
 border-bottom:0;
 border-radius:8px 8px 0 0;
 background:#fff;
 color:#24785c;
 font-weight:600;
}
.editor-page .emojiPanel .faceWrap {
 position:absolute;
 top:40px;
 left:0;
 bottom:auto;
 width:100%;
 height:230px;
 margin:0;
 padding:14px;
 box-sizing:border-box;
 overflow:auto;
 border:1px solid #dce7e0;
 border-radius:0 0 12px 12px;
 background:#fff;
 box-shadow:none;
}
.editor-page .emojiPanel .faceBox {
 width:435px;
 max-width:100%;
 margin:0 auto;
}
.editor-page .emojiPanel .faceBox a { transition:background-color .15s; }
.editor-page .emojiPanel .faceBox a:hover { background-color:#e8f4ec; }
.editor-page .setting label { margin-right:7px; font-weight:400; color:#475c51; }
.editor-page .setting input[type="radio"] { accent-color:#24785c; }
.editor-page .slider_bar { border-radius:99px; overflow:hidden; }
.editor-page .a-u-pic-bodybg {
 width:120px;
 height:120px;
 border-radius:12px;
 background-color:#f5f8f6;
 box-shadow:inset 0 0 0 1px #dce7e0;
}
.editor-page .a-u-pic-bodybg .a-u-pic-show,
.editor-page .a-u-pic-bodybg .a-u-pic-show input,
.editor-page .a-u-pic-bodybg .a-u-pic-show img { width:120px; height:120px; }
.editor-page .a-u-pic-bodybg .a-u-pic-show { background:transparent; }
.editor-page .a-u-pic-bodybg + div { padding-top:5px; color:#52665b; line-height:1.75; }
.editor-page .a-u-pic-bodybg + div span { color:#c85f5f!important; font-size:12px; }
.editor-page .body_bg_del { margin-top:10px; border:0; border-radius:7px; background:#f6e8e7; color:#b55450; }
.editor-page .body_bg_del:hover,
.editor-page .body_bg_del:focus { background:#eddbd9; color:#9c403d; }
.editor-page .btns { display:flex; align-items:center; gap:10px; }
.editor-page .btns .btn { flex:0 0 120px; width:120px; height:40px; padding:9px 14px; border-radius:8px; }
.editor-page .phone-wrap {
 top:82px;
 right:25px;
 z-index:1;
 border:0;
 border-radius:28px;
 box-shadow:0 20px 42px rgba(28,53,43,.18),0 0 0 9px #eff4f1;
}
.editor-page .my-btns {
 position:absolute;
 top:auto;
 right:20px;
 bottom:100px;
 left:auto;
 width:96px;
 height:96px;
 margin:0;
 padding:0;
 border:0;
 background:transparent;
 box-shadow:none;
 z-index:2300;
 overflow:visible;
}
.editor-page .my-btns .loading { position:absolute; right:112px; bottom:20px; width:310px; margin:0; padding:12px 16px; border-radius:10px; background:#253b32; color:#fff; font-size:20px; line-height:30px; text-indent:0; box-shadow:0 8px 20px rgba(24,48,37,.18); white-space:nowrap; }
.editor-page .save-launcher {
 position:relative;
 display:block;
 width:96px;
 height:96px;
 padding:0;
 border:0;
 border-radius:50%;
 background:#2cab4c;
 box-shadow:0 8px 18px rgba(30,91,48,.3);
 transition:transform .18s,background .18s,box-shadow .18s;
 cursor:pointer;
}
.editor-page .save-launcher:hover { background:#249c42; transform:translateY(-2px); box-shadow:0 11px 22px rgba(30,91,48,.34); }
.editor-page .save-launcher:focus { outline:0; box-shadow:0 0 0 4px rgba(44,171,76,.2),0 8px 18px rgba(30,91,48,.3); }
.editor-page .generate-camera-icon {
 position:absolute;
 left:27px;
 top:35px;
 width:42px;
 height:29px;
 border-radius:5px;
 background:#fff;
}
.editor-page .generate-camera-icon:before { content:''; position:absolute; left:8px; top:-8px; width:15px; height:9px; border-radius:3px 3px 0 0; background:#fff; }
.editor-page .generate-camera-icon:after { content:''; position:absolute; left:13px; top:7px; width:16px; height:16px; border:4px solid #2cab4c; border-radius:50%; background:#fff; }
.generate-modal:focus { outline:0; }
.generate-modal .modal-dialog { width:340px; max-width:calc(100% - 28px); margin:22vh auto 0; }
.generate-modal .modal-content { border:0; border-radius:10px; box-shadow:0 15px 36px rgba(0,0,0,.24); overflow:hidden; }
.generate-modal-main { display:flex; align-items:flex-start; gap:11px; padding:19px 22px 8px; }
.generate-warning-icon { display:grid; place-items:center; flex:0 0 27px; width:27px; height:27px; border:2px solid #f3a20a; border-radius:50%; color:#e79700; font-size:17px; font-weight:400; line-height:1; }
.generate-modal-main h4 { margin:0 0 8px; color:#252525; font-size:18px; font-weight:700; }
.generate-modal-main p { margin:0; color:#292929; font-size:13px; line-height:1.5; }
.generate-modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:0 22px 18px; }
.generate-modal-actions .btn { min-width:82px; padding:6px 12px; border-radius:6px; font-size:13px; line-height:20px; }
.generate-download-btn { border:1px solid #d7d7d7; background:#fff; color:#262626; }
.generate-download-btn:hover,.generate-download-btn:focus { border-color:#bfc9c2; background:#f7faf8; color:#24785c; }
.generate-confirm-btn { -webkit-appearance:none; appearance:none; border:1px solid #1976ed; outline:0!important; background:#1976ed; color:#fff; box-shadow:none!important; }
.generate-confirm-btn:hover,.generate-confirm-btn:focus,.generate-confirm-btn:active { border-color:#1169d9; outline:0!important; background:#1169d9; color:#fff; box-shadow:none!important; }
.editor-page #wrapper #app_location {
 left:330px;
 right:100px;
 bottom:16px;
 width:auto;
 max-width:1060px;
 height:64px;
 margin:0 auto;
 padding-left:0;
 border:1px solid #d9e6de;
 border-radius:14px;
 background:rgba(250,252,250,.96);
 box-shadow:0 12px 30px rgba(31,65,50,.14),0 0 0 1px rgba(255,255,255,.7);
 backdrop-filter:blur(14px);
}
.editor-page #app_location .guide_logo { width:42px; margin:10px 12px 0 12px; }
.editor-page #app_location .txt { width:calc(100% - 157px); margin-left:66px; padding-top:11px; }
.editor-page #app_location .txt_11 { height:42px; margin:0; line-height:20px; }
.editor-page #app_lo { top:11px; right:12px; width:92px; height:40px; line-height:20px; padding:10px 18px; }

@media(max-width:1000px) {
 .editor-page #page-wrapper { padding:0 18px 110px; }
 .editor-page .editor-header .page-header { padding-top:22px; }
 .editor-page .editor-header .page-header:before { top:25px; }
 .editor-page .editor-canvas { border-radius:14px; overflow:visible; }
 .editor-page .panel-wx-tab { margin-right:0; margin-top:675px; min-height:0; border-right:0; border-top:1px solid #e5ede7; border-radius:0 0 14px 14px; }
 .editor-page .panel-wx-tab .tab-content { padding-top:0; }
 .editor-page .phone-wrap { top:24px; left:50%; right:auto; transform-origin:top center; -webkit-transform-origin:top center; transform:translateX(-50%) scale(.465); -webkit-transform:translateX(-50%) scale(.465); }
}
@media(max-width:767px) {
 .editor-page #page-wrapper { padding:0 10px 95px; }
 .editor-page .editor-header .page-header { font-size:19px; padding-left:15px; }
 .editor-page .editor-header .page-header:before { width:4px; height:19px; }
 .editor-page .editor-header .clear-dialog { display:none; }
 .editor-page .panel-wx-tab { padding:0 16px 24px; margin-top:578px; }
 .editor-page.wx-editor-page .panel-wx-tab { margin-top:655px; }
 .editor-page .panel-wx-tab .tab-content { padding-top:0; }
 .editor-page .panel-wx-tab > .nav-tabs { margin-left:-16px; margin-right:-16px; padding-left:16px; }
 .editor-page .setting p { line-height:38px; margin-bottom:13px; }
 .editor-page .a-u-name p > span { flex-basis:100px; }
 .editor-page .a-u-name p > .a-u-data-name,
 .editor-page .a-u-name p > .a-u-data-redpacket { flex-basis:calc(100vw - 160px); width:calc(100vw - 160px); }
 .editor-page .a-u-name p > textarea { flex-basis:calc(100vw - 160px); width:calc(100vw - 160px); min-width:0; }
 .editor-page .btns .btn { flex:1 1 0; width:auto; min-width:0; }
 .editor-page #wrapper #app_location { left:18px; right:18px; bottom:10px; height:58px; padding-left:0; border-radius:12px; }
 .editor-page #app_location .guide_logo { width:38px; margin:9px 10px 0 9px; }
 .editor-page #app_location .txt { width:calc(100% - 142px); margin-left:56px; padding-top:9px; }
 .editor-page #app_location .txt_11 { font-size:10px; line-height:18px; }
 .editor-page #app_lo { top:9px; right:9px; width:80px; height:38px; padding:9px 12px; font-size:12px; }
 .editor-page .my-btns { right:18px; bottom:100px; width:96px; height:96px; margin:0; }
 .generate-modal .modal-dialog { margin:22vh auto 0; }
 .generate-modal-main { gap:10px; padding:18px 18px 8px; }
 .generate-modal-actions { padding:3px 18px 17px; }
 .generate-modal-actions .btn { min-width:0; flex:1; padding:6px 9px; font-size:13px; }
}