:root{color-scheme:dark;font-family:Inter,"Noto Sans TC",system-ui,sans-serif;background:#111;color:#eee}*{box-sizing:border-box}body{margin:0;min-width:980px}.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #303033;background:#1b1b1d}.topbar strong{font-size:21px}.topbar span{color:#9e9ea4;font-size:12px;margin-left:8px}.actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}button,.button{border:1px solid #4a4a4e;background:#29292d;color:#eee;border-radius:7px;padding:9px 13px;font:inherit;font-size:13px;cursor:pointer;text-align:center}.button{display:inline-block}.primary{border-color:#d27630;background:#e78235;color:#17120e;font-weight:700}button:hover,.button:hover{filter:brightness(1.14)}main{display:grid;grid-template-columns:248px minmax(480px,1fr) 264px;height:calc(100vh - 66px)}.panel{overflow:auto;background:#1a1a1c;padding:17px;border-right:1px solid #303033}.controls{border-right:0;border-left:1px solid #303033}section{border-bottom:1px solid #333338;padding-bottom:16px;margin-bottom:16px}h2{font-size:13px;text-transform:uppercase;letter-spacing:.7px;margin:0 0 12px;color:#d6d6db}h2 span{float:right;color:#a6a6ac;font-weight:400;font-size:11px}.hint,.canvas-help{font-size:12px;line-height:1.55;color:#aaaab1;margin:0}.layer-list{display:grid;gap:8px;margin:12px 0}.layer{display:grid;grid-template-columns:48px 1fr 20px;gap:8px;align-items:center;border:1px solid #36363b;padding:5px;border-radius:7px;cursor:pointer;background:#232326}.layer.active{border-color:#e78235;background:#352a22}.layer img{width:48px;height:37px;object-fit:cover;border-radius:3px}.layer label{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer .remove{background:none;border:0;padding:0;color:#aaa;font-size:18px}.wide{width:100%;margin-top:7px}.ai{border-color:#9b74e8;background:#362959}.drop-note{background:#242326;border:1px dashed #505057;border-radius:7px;font-size:12px;line-height:1.6;color:#b8b8bf}.workspace{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;background:#121214;padding:20px}.canvas-wrap{width:min(100%,1000px);position:relative;box-shadow:0 18px 48px #0009;background:#171717;line-height:0}.canvas-wrap.dragover{outline:3px solid #e78235;outline-offset:5px}canvas{width:100%;height:auto;display:block;cursor:grab}.canvas-help{margin-top:14px}.empty-state{pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.6;color:#c7c7cb;font-size:19px}.empty-state small{font-size:13px;color:#888890}label{display:block;font-size:12px;color:#c4c4ca;margin:11px 0}label output{float:right;color:#f1a66a}input[type=range],select{width:100%;accent-color:#e78235;margin-top:6px}select{padding:8px;background:#27272b;border:1px solid #46464d;border-radius:6px;color:#eee}.check{display:flex;align-items:center;gap:8px}.check input{accent-color:#e78235}input[type=color]{float:right;width:44px;height:25px;border:0;background:none;padding:0}.disabled{opacity:.45;pointer-events:none}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,80px);opacity:0;background:#eee;color:#171717;padding:10px 14px;border-radius:7px;font-weight:600;transition:.2s}#toast.show{transform:translate(-50%,0);opacity:1}

#textContent{width:100%;margin-top:6px;background:#27272b;color:#eee;border:1px solid #46464d;border-radius:6px;padding:8px;resize:vertical;font:inherit}.text-thumb{width:48px;height:37px;border-radius:3px;background:#313136;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#f0f0f2}
.brush-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.brush-tools button.active{outline:2px solid #55e6a5;box-shadow:0 0 0 2px rgba(85,230,165,.15) inset}

/* v3.0.12 UI hotfix: keep the smart-blend style selector compact inside the top toolbar. */
.actions select{width:auto;min-width:76px;margin-top:0;padding:8px 10px;flex:0 0 auto}

/* v3.0.13 Responsive UI optimization
   Desktop: keep the toolbar visible at browser 100% without covering the preview.
   Mobile/tablet: stack the workspace and controls into a touch-friendly single column. */
html,body{height:100%;}
body{min-width:0;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);}
.topbar{height:auto;min-height:60px;padding:8px 14px;gap:12px;position:relative;z-index:20;}
.topbar>div:first-child{flex:0 0 auto;white-space:nowrap;}
.actions{min-width:0;align-items:center;gap:6px;flex-wrap:wrap;row-gap:6px;}
.actions button,.actions .button,.actions select{padding:7px 9px;font-size:12px;line-height:1.15;white-space:nowrap;}
.actions select{height:32px;}
main{height:auto;min-height:0;grid-template-columns:220px minmax(360px,1fr) 244px;}
.panel{padding:14px;min-height:0;}
.workspace{padding:14px;min-height:0;overflow:auto;}
.canvas-wrap{width:min(100%,920px);max-height:calc(100dvh - 118px);}
.canvas-help{margin-top:10px;}

@media (max-width:1440px){
  .topbar{padding:7px 10px;gap:9px;}
  .topbar strong{font-size:18px;}
  .topbar span{font-size:11px;margin-left:5px;}
  .actions{gap:4px;row-gap:4px;}
  .actions button,.actions .button,.actions select{padding:6px 7px;font-size:11px;border-radius:6px;}
  .actions select{min-width:66px;height:29px;}
  main{grid-template-columns:205px minmax(330px,1fr) 226px;}
  .panel{padding:11px;}
  section{padding-bottom:12px;margin-bottom:12px;}
  .workspace{padding:10px;}
  .canvas-wrap{width:min(100%,860px);max-height:calc(100dvh - 104px);}
  label{margin:8px 0;}
}

@media (max-width:1100px) and (min-width:769px){
  body{overflow:hidden;}
  .topbar{align-items:flex-start;}
  .topbar>div:first-child{padding-top:5px;}
  .actions{max-height:66px;overflow-y:auto;padding-right:2px;}
  main{grid-template-columns:185px minmax(300px,1fr) 210px;}
  .panel{padding:9px;}
  button,.button{padding:7px 9px;}
  .workspace{padding:8px;}
  .canvas-help{font-size:11px;}
}

/* Tablet / phone */
@media (max-width:768px){
  body{height:auto;min-height:100dvh;overflow:auto;display:block;background:#121214;}
  .topbar{position:sticky;top:0;z-index:50;display:block;padding:8px 10px 7px;background:#1b1b1df5;backdrop-filter:blur(10px);border-bottom:1px solid #343439;}
  .topbar>div:first-child{display:flex;align-items:baseline;margin-bottom:7px;}
  .topbar strong{font-size:18px;}
  .actions{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:6px;overflow-x:auto;overflow-y:hidden;padding:0 0 4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
  .actions::-webkit-scrollbar{height:4px;}
  .actions button,.actions .button,.actions select{flex:0 0 auto;min-height:38px;padding:8px 10px;font-size:12px;touch-action:manipulation;}
  .actions select{width:auto;min-width:74px;margin:0;}
  main{display:grid;height:auto;min-height:0;grid-template-columns:1fr;grid-template-areas:"workspace" "left" "controls";}
  .workspace{grid-area:workspace;justify-content:flex-start;padding:10px 8px 8px;overflow:visible;min-height:0;}
  .canvas-wrap{width:100%;max-height:none;box-shadow:0 8px 24px #0008;}
  .canvas-help{font-size:11px;text-align:center;margin:8px 4px 2px;line-height:1.45;}
  .left-panel{grid-area:left;}
  .controls{grid-area:controls;}
  .panel{overflow:visible;border:0;border-top:1px solid #303033;padding:12px 14px;background:#1a1a1c;}
  .controls{border-left:0;}
  section{padding-bottom:13px;margin-bottom:13px;}
  h2{font-size:12px;}
  .layer-list{grid-template-columns:1fr;}
  .layer{min-height:52px;}
  .wide,button,.button,select,input[type=range],textarea{touch-action:manipulation;}
  .wide{min-height:42px;}
  label{font-size:13px;margin:12px 0;}
  input[type=range]{height:28px;}
  select,#textContent{font-size:16px;min-height:42px;}
  .brush-tools button{min-height:42px;}
  #toast{bottom:14px;max-width:calc(100vw - 24px);text-align:center;}
}

@media (max-width:420px){
  .topbar{padding-left:8px;padding-right:8px;}
  .topbar span{display:none;}
  .actions button,.actions .button,.actions select{font-size:11px;padding:8px 9px;}
  .workspace{padding:8px 5px 6px;}
  .panel{padding:11px 12px;}
  .empty-state{font-size:16px;padding:16px;}
  .empty-state small{font-size:11px;}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:900px){
  .topbar>div:first-child{display:none;}
  .topbar{padding:5px 7px;}
  .actions{padding-bottom:2px;}
  .actions button,.actions .button,.actions select{min-height:32px;padding:6px 8px;}
  .workspace{padding-top:6px;}
}

/* v3.0.15 layer operation tools */
.layer-quick-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px}.layer-quick-tools button{padding:7px 5px;font-size:11px}.layer-quick-tools #flipXBtn{grid-column:1/-1}.layer.is-hidden{opacity:.48}.layer.is-locked label::after{content:"  🔒"}.layer-actions{display:flex;gap:2px;align-items:center}.layer .mini{background:none;border:0;padding:2px;color:#bbb;font-size:14px;line-height:1;min-width:18px}.layer{grid-template-columns:48px 1fr auto}.layer.hidden-layer img,.layer.hidden-layer .text-thumb{opacity:.35}

/* v3.1 stable professional file I/O + mask view */
.export-dims{display:grid;grid-template-columns:1fr 1fr;gap:8px}.export-dims label{margin:6px 0}.export-dims input{box-sizing:border-box;width:100%;margin-top:6px;padding:8px;background:#27272b;color:#eee;border:1px solid #46464d;border-radius:6px}.mask-view-active{outline:2px solid #ff6b6b!important;box-shadow:0 0 0 2px rgba(255,107,107,.15) inset}.export-section .hint{margin-top:8px}
.export-crop-controls{display:grid;grid-template-columns:1fr 86px;gap:7px;margin:8px 0 13px}.export-crop-controls #exportCropBtn{border-color:#d5a54a;background:#3b2f1d;color:#ffe6a5;font-weight:800}.export-crop-controls #exportCropStatus{grid-column:1/-1;margin:0;color:#c9b77f}
@media(max-width:768px){.export-dims input{font-size:16px;min-height:42px}}

/* v3.2 Art Director */
#artDirectorMode{min-width:102px}.actions #autoLayoutBtn{font-weight:700}

/* v3.5 Art Director multi-proposal preview */
.actions .preview-btn{border-color:#7f63ff;background:#2b2354;color:#fff;font-weight:700}
.proposal-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(5px)}
.proposal-modal[hidden]{display:none}
.proposal-dialog{width:min(1180px,96vw);max-height:92vh;overflow:auto;background:#17171a;border:1px solid #414148;border-radius:14px;box-shadow:0 24px 70px #000c;padding:16px}
.proposal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.proposal-head strong{display:block;font-size:18px}.proposal-head small{display:block;color:#aaa;margin-top:5px;line-height:1.45}.proposal-head button{font-size:24px;line-height:1;width:38px;height:38px;padding:0;border-radius:50%}
.proposal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.proposal-card{display:grid;text-align:left;grid-template-columns:1fr;background:#222227;border:1px solid #3b3b43;border-radius:11px;padding:10px;overflow:hidden;color:#eee;transition:.16s transform,.16s border-color,.16s box-shadow}.proposal-card:hover{transform:translateY(-2px);border-color:#8d79ff;box-shadow:0 8px 25px #0008}.proposal-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#0d0d0f;border-radius:7px}.proposal-title{font-weight:800;font-size:14px;margin-top:9px}.proposal-card small{color:#aaa;line-height:1.4;margin-top:3px}.proposal-card b{justify-self:start;margin-top:8px;font-size:12px;color:#bcb2ff}
@media(max-width:760px){.proposal-modal{padding:8px;align-items:flex-start}.proposal-dialog{width:100%;max-height:96vh;padding:11px}.proposal-grid{grid-template-columns:1fr;gap:10px}.proposal-head strong{font-size:16px}.proposal-card{padding:8px}.proposal-card img{aspect-ratio:16/10}}

/* v3.5.1 proposal scoring */
.proposal-image-wrap{position:relative}.recommend-badge{position:absolute;top:9px;right:9px;background:#ece8ff;color:#251c59;border-radius:999px;padding:5px 9px;font-style:normal;font-size:11px;font-weight:900;box-shadow:0 3px 12px #0008}.proposal-card.recommended{border-color:#a996ff;box-shadow:0 0 0 1px #7560e655,0 10px 28px #0008}.proposal-rating{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.proposal-rating strong{font-size:18px}.proposal-rating span{letter-spacing:1px;color:#d5ccff;font-size:13px}.proposal-score-detail{opacity:.75}.proposal-card.recommended .proposal-title:after{content:' · 推薦';color:#b9acff;font-size:11px}


/* v3.5.2 regenerate proposals */
.proposal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 0 7px;padding:10px 0;border-top:1px solid #303037;border-bottom:1px solid #303037}.proposal-toolbar>div>strong{font-size:13px;color:#e6e2ff}.proposal-round-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.round-tab{padding:5px 9px;font-size:11px;border-radius:999px}.round-tab.active{border-color:#9f8cff;background:#342b62;color:#fff}.proposal-regenerate{border-color:#7f63ff;background:#2b2354;font-weight:800;white-space:nowrap}.proposal-memory-note{font-size:11px;color:#85858d;margin:0 0 10px;line-height:1.45}@media(max-width:760px){.proposal-toolbar{align-items:stretch;flex-direction:column}.proposal-regenerate{width:100%}}

/* v3.5.4 non-destructive refinement comparison */
.refinement-modal{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(6px)}.refinement-modal[hidden]{display:none}.refinement-dialog{width:min(1050px,96vw);max-height:94vh;overflow:auto;background:#17171a;border:1px solid #44444c;border-radius:15px;box-shadow:0 24px 80px #000d;padding:16px}.refinement-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.refinement-head strong{display:block;font-size:18px}.refinement-head small{display:block;color:#aaa;margin-top:5px}.refinement-head>button{width:38px;height:38px;padding:0;border-radius:50%;font-size:24px}.refine-mode-bar{display:flex;gap:8px;margin:14px 0 10px}.refine-mode-btn.active{background:#3a2d70;border-color:#9e89ff;color:#fff}.refinement-compare{position:relative;width:100%;aspect-ratio:16/10;background:#0c0c0e;border-radius:10px;overflow:hidden;border:1px solid #34343b}.refinement-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0c0c0e}.refine-after-wrap{position:absolute;inset:0 auto 0 0;width:50%;overflow:hidden}.refine-after-wrap img{width:1000%;max-width:none;height:100%;object-fit:fill}.refinement-compare .refine-after-wrap img{width:var(--compare-width,100%);min-width:100%;object-fit:contain}.refine-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff9;pointer-events:none;box-shadow:0 0 0 1px #0008}.refinement-compare[data-mode="before"] .refine-divider,.refinement-compare[data-mode="after"] .refine-divider{display:none}.refine-split{width:100%;margin:10px 0 5px}.refine-info{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#ddd}.refine-info small{color:#96969e}.refine-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}@media(max-width:760px){.refinement-modal{padding:7px;align-items:flex-start}.refinement-dialog{width:100%;padding:11px}.refinement-head strong{font-size:16px}.refine-info{align-items:flex-start;flex-direction:column}.refine-actions button{flex:1}}

/* Art Director composition style selector */
#artDirectorStyle{min-width:112px;border-color:#6658a8;background:#25203b;color:#f1edff;font-weight:700}
@media(max-width:768px){#artDirectorStyle{min-width:106px}}

/* Smart Hero: selected image remains the Art Director focal subject. */
.preflight-modal{position:fixed;inset:0;z-index:1200;background:rgba(5,8,12,.82);display:grid;place-items:center;padding:24px}.preflight-modal[hidden]{display:none}.preflight-dialog{width:min(980px,96vw);max-height:90vh;overflow:auto;background:#171d26;border:1px solid #40506a;border-radius:16px;padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.55)}.preflight-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.preflight-head strong{font-size:20px}.preflight-head small{display:block;color:#9eabba;margin-top:5px}.preflight-summary{margin:14px 0;padding:11px 13px;background:#111720;border-radius:9px;color:#b8c5d5}.preflight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.preflight-card{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid #344154;border-radius:10px;background:#111720}.preflight-card img{width:58px;height:58px;object-fit:contain;border-radius:7px;background:#fff}.preflight-card strong,.preflight-card small{display:block}.preflight-card small{color:#9eabba;margin-top:3px}.preflight-role{color:#70c8ff;font-weight:700}.preflight-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.preflight-head>button{min-width:72px;color:#ffd7d7;border-color:#8b4b55;background:#3c242a;font-weight:800}.preflight-controls{display:flex;gap:12px;align-items:end;margin:14px 0}.preflight-controls label{flex:1;color:#b8c5d5;font-size:12px}.preflight-controls select{display:block;width:100%;margin-top:5px}.preflight-preview{position:relative;width:min(720px,100%);margin:0 auto;aspect-ratio:16/10;border:1px solid #40506a;border-radius:11px;overflow:hidden;background:#090d12}.preflight-preview img{display:block;width:100%;height:100%;object-fit:contain}.preflight-preview>div{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,10,15,.76);color:#d8e7f8;font-weight:700}.preflight-preview>div[hidden]{display:none}.preflight-dialog details{margin-top:10px}.preflight-dialog summary{cursor:pointer;color:#a9bad0;font-size:13px}.preflight-dialog details .preflight-grid{margin-top:10px}@media(max-width:680px){.preflight-modal{padding:7px;align-items:start}.preflight-dialog{width:100%;padding:12px}.preflight-controls{flex-direction:column;align-items:stretch}.preflight-actions button{flex:1}}
.layer.is-hero{border-color:#f2b84b;background:linear-gradient(135deg,#3b3020,#29251f);box-shadow:0 0 0 1px #f2b84b55}
.layer.is-hero label{color:#ffe29b;font-weight:800}
.layer-actions .hero{color:#f2b84b;font-size:17px;font-weight:900}

/* Frame Composer v1 — isolated modal; final result returns as a normal layer. */
.frame-button{border-color:#d5a54a;background:#3b2f1d;color:#ffe6a5;font-weight:800}.frame-modal{position:fixed;inset:0;z-index:1300;background:rgba(3,5,8,.86);display:grid;place-items:center;padding:18px;backdrop-filter:blur(6px)}.frame-modal[hidden]{display:none}.frame-dialog{width:min(1120px,97vw);max-height:95vh;overflow:auto;background:#171d26;border:1px solid #4a5668;border-radius:16px;padding:16px;box-shadow:0 26px 90px #000d}.frame-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:13px}.frame-head strong{display:block;font-size:19px}.frame-head small{display:block;color:#aab5c5;margin-top:5px}.frame-head>button{color:#ffd7d7;border-color:#8b4b55;background:#3c242a;font-weight:800}.frame-work{display:grid;grid-template-columns:minmax(320px,720px) minmax(220px,1fr);gap:16px;align-items:start}.frame-stage{background:#0b0e13;border:1px solid #3a4658;border-radius:12px;padding:10px;display:grid;place-items:center}.frame-stage canvas{display:block;width:auto;max-width:100%;height:min(68vh,720px);max-height:68vh;aspect-ratio:4/5;background:#eee;box-shadow:0 8px 30px #000b;touch-action:none}.frame-work aside{display:grid;gap:12px}.frame-work aside label:not(.frame-load){display:grid;gap:5px;color:#b9c5d5;font-size:12px}.frame-work aside input[type=range]{width:100%}.frame-load{display:block;text-align:center;padding:10px 12px;border:1px solid #56657b;border-radius:8px;background:#253044;color:#eef5ff;font-weight:750;cursor:pointer}.frame-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.frame-actions .primary{background:#346d51;border-color:#54ae7f}.frame-work #frameStatus{color:#9fb1c7;line-height:1.5}@media(max-width:760px){.frame-modal{padding:5px;align-items:start}.frame-dialog{width:100%;padding:10px}.frame-work{grid-template-columns:1fr}.frame-stage canvas{height:auto;max-height:55vh}.frame-actions button{flex:1}}
.frame-work aside label.check{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #425167;border-radius:8px;background:#202a38;color:#e3ecf8}.frame-work aside label.check input{width:18px;height:18px;accent-color:#e78235}
#frameSharpOuterMainLabel[hidden],#frameMainControlHint[hidden]{display:none!important}
.layer.is-hero .hero{background:#f2b84b;color:#241b0b;border-color:#ffd87a}

/* v4.0 Color Atmosphere */
.atmosphere-section{border:1px solid #3d4655;border-radius:10px;padding:12px;background:linear-gradient(180deg,#202632,#191c23);margin-bottom:16px}.atmosphere-section h2{color:#a9d5ff}.atmosphere-section .hint{margin-bottom:9px}.atmosphere-section label{margin:8px 0}.atmosphere-section output{color:#8fd0ff}.atmosphere-section input[type=range]{accent-color:#62b7ef}.atmosphere-advanced{border-top:1px solid #394352;margin-top:10px;padding-top:8px}.atmosphere-advanced summary{cursor:pointer;color:#b9c9da;font-size:12px}.atmosphere-preset-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:end;margin-top:10px}.atmosphere-preset-row select{margin:0}.atmosphere-preset-row button{padding:8px}.atmosphere-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.atmosphere-actions button{padding:7px 5px;font-size:11px}.atmosphere-actions button:last-child:nth-child(odd){grid-column:1/-1}.atmosphere-section.disabled{opacity:.45;pointer-events:none}.smart-atmosphere-box{border:1px solid #597aa0;background:linear-gradient(135deg,#203751,#25233d);border-radius:9px;padding:10px;margin:9px 0 13px}.smart-atmosphere-box strong{display:block;color:#d9efff;font-size:13px}.smart-atmosphere-box small{display:block;color:#aebfd2;font-size:11px;line-height:1.5;margin-top:4px}.smart-atmosphere-box .atmosphere-preset-row{margin-top:8px}.smart-atmosphere-box .ai{border-color:#8677d8;background:#41356f;color:#fff;font-weight:750}
.layout-protect{border-color:#65758b;background:#242c38;color:#c8d4e5;font-weight:800}.layout-protect.active{border-color:#56bb86;background:#244535;color:#bff4d4;box-shadow:0 0 0 1px #56bb8644}
.frame-template-bar{display:grid;grid-template-columns:repeat(8,minmax(88px,1fr));gap:7px;margin:10px 0}.frame-template-bar button{min-height:42px;padding:7px 5px;font-size:11px;line-height:1.25}.frame-template-bar button.active{border-color:#f0bd59;background:#4a371c;color:#ffe7ae;box-shadow:0 0 0 1px #f0bd5944}.frame-preview-modes{display:flex;gap:7px;margin-bottom:10px}.frame-preview-modes button{flex:1}.frame-preview-modes button.active{border-color:#74bfff;background:#203e5a;color:#d9efff}@media(max-width:900px){.frame-template-bar{grid-template-columns:repeat(4,1fr)}}@media(max-width:560px){.frame-template-bar{grid-template-columns:repeat(2,1fr)}}
.background-atmosphere{border-color:#6c5c3e;background:linear-gradient(180deg,#2c271f,#1e1c18)}.background-atmosphere h2{color:#ffe1a8}.background-atmosphere input[type=range]{accent-color:#e6aa52}.background-atmosphere output{color:#ffc979}
.split-preview-btn{border-color:#5aa8c7;background:#203b48;color:#d9f6ff;font-weight:750}.split-preview-btn.active{background:#255d72;border-color:#7edaff}.color-split-overlay{position:absolute;inset:0;z-index:18;overflow:hidden;line-height:normal;touch-action:none}.color-split-overlay[hidden]{display:none}.color-split-overlay canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.color-split-overlay input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}.color-split-divider{position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 0 1px #0008,0 0 12px #000b;transform:translateX(-1px);pointer-events:none;z-index:4}.color-split-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f5f5f5;color:#222;border:2px solid #333;font-weight:900}.color-split-label{position:absolute;top:12px;z-index:4;padding:5px 9px;border-radius:6px;background:#000a;color:#fff;font-size:12px;font-weight:800;pointer-events:none}.color-split-label.before{left:12px}.color-split-label.after{right:12px}