@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=JetBrains+Mono:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@300;400;500&family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@400;700;800;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{overflow:hidden}
a{text-decoration:none}
button,input,textarea{font:inherit}

.cr-header{
  display:flex;align-items:center;height:56px;flex-shrink:0;
  background:linear-gradient(90deg,#09111f,#0d1826,#09111f);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cr-logo{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  min-width:220px;height:100%;padding:0 22px;white-space:nowrap;flex-shrink:0;
}
.cr-logo-name{
  font-family:'Montserrat',sans-serif;font-size:28px;font-weight:900;line-height:.94;letter-spacing:1.1px;
  background:linear-gradient(90deg,#00c9a7,#2dd4a8,#7ecf4a,#c8d840,#ffde59,#ffc33e,#ff8c00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cr-logo-tag{
  font-family:'Montserrat',sans-serif;font-size:8.5px;font-weight:500;letter-spacing:3.8px;
  text-transform:uppercase;color:rgba(225,215,195,.42);margin-top:2px;line-height:1;
}
.cr-tabs{display:flex;height:100%}
.cr-tab{
  display:flex;align-items:center;gap:7px;padding:0 18px;height:100%;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.42);
  border-right:1px solid rgba(255,255,255,.06);border-bottom:3px solid transparent;
  transition:all .15s;white-space:nowrap;
}
.cr-tab:hover{color:rgba(255,255,255,.82);background:rgba(255,255,255,.03)}
.cr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.d-art{background:radial-gradient(circle,#f8e050,#c89028)}
.d-imp{background:radial-gradient(circle,#60a8f0,#1858c0)}
.d-stip{background:radial-gradient(circle,#50e090,#18a858)}
.cr-tab.active-art{color:#f0d060;border-bottom-color:#f0d060}
.cr-tab.active-imp{color:#78b4e8;border-bottom-color:#4a8acd}
.cr-tab.active-stip{color:#60d890;border-bottom-color:#3aaa68}

.engine-page{
  height:100vh;display:flex;flex-direction:column;
  color:var(--text);background:var(--bg);
}
.engine-main{
  flex:1;min-height:0;display:grid;
  grid-template-columns:320px minmax(0,1fr) 360px;
  overflow:hidden;
}
.footer-bar{
  display:flex;align-items:center;justify-content:center;
  padding:4px 12px;background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;
}
.footer-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(77,150,255,.1),rgba(106,130,251,.06));
  color:rgba(230,232,238,.9);font-weight:600;font-size:10px;letter-spacing:.5px;
  padding:5px 14px;border-radius:6px;border:1px solid rgba(106,130,251,.15);
  font-family:'Inter',system-ui,sans-serif;
}
.footer-badge a{color:#f2f4f8;text-decoration:none;transition:color .2s}
.footer-badge a:hover{color:#ffd93d}
.footer-badge .sep{opacity:.3;margin:0 2px}
.footer-badge .powered{color:var(--accent);font-weight:700}

.side{
  min-width:0;background:var(--panel);
  min-height:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;
}
.right-side{
  border-right:none;border-left:1px solid var(--border);
  min-height:0;background:linear-gradient(180deg,var(--panel),rgba(0,0,0,.15) 120%);
}
.side-scroll{
  flex:1;min-height:0;overflow-y:auto;padding:16px 16px 26px;display:flex;flex-direction:column;gap:14px;
  overscroll-behavior:contain;
}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}

.panel-card{
  background:rgba(255,255,255,.03);border:1px solid var(--border-2);
  border-radius:16px;padding:14px 14px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.hero-title{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft);
  margin-bottom:8px;font-weight:600;
}
.hero-copy{font-size:13px;line-height:1.7;color:var(--text-soft)}

.st,.sh{
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent-soft);padding-bottom:7px;border-bottom:1px solid var(--border);
  margin-bottom:10px;
}

.hero-drop{
  border:1px dashed rgba(255,255,255,.16);border-radius:14px;padding:14px 12px;
  background:rgba(255,255,255,.025);cursor:pointer;transition:all .16s;
}
.hero-drop:hover{border-color:var(--accent);background:rgba(255,255,255,.05)}
#b_tw,#c_tw{
  width:100%;aspect-ratio:4/3;display:none;overflow:hidden;border-radius:12px;
  border:1px solid var(--border);background:rgba(0,0,0,.18);
}
#b_ti,#c_ti{width:100%;height:100%;object-fit:cover;display:block}

.action-stack{display:flex;flex-direction:column;gap:10px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 12px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;transition:all .14s;
  border-radius:12px;text-transform:none;font-size:14px;
}
.btn:hover{border-color:var(--accent);color:var(--text)}
.btn:disabled{opacity:.22;cursor:not-allowed}
.btn.go{
  background:var(--go-bg);border-color:var(--go-border);color:var(--go-text);
  font-size:17px;font-weight:600;min-height:52px;
}
.btn.go:hover{filter:brightness(1.07)}
.btn.go:disabled{background:var(--border);border-color:var(--border);color:var(--muted)}
.btn-secondary{border-color:var(--border-2);color:var(--text-soft)}
.btn-inline-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-teal{border-color:#2ab8a8;color:#2ab8a8}
.btn-gold{border-color:#d8b866;color:#d8b866}
.btn-blue{border-color:#6da7ff;color:#6da7ff}
.btn-red{border-color:#df6248;color:#df6248}
.btn-teal:hover{background:#2ab8a8;color:#00110d}
.btn-gold:hover{background:#d8b866;color:#1d1606}
.btn-blue:hover{background:#6da7ff;color:#06111f}
.btn-red:hover{background:#df6248;color:#fff}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.mb{
  min-height:42px;padding:9px 6px;border:1px solid var(--border);background:transparent;color:var(--muted);
  text-align:center;text-transform:uppercase;cursor:pointer;transition:all .14s;border-radius:12px;font-size:12px;
}
.mb:hover{border-color:var(--accent);color:var(--text)}

.ctrl{display:flex;flex-direction:column;gap:7px}
.cl,.cr{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;color:var(--text-soft);gap:12px;
}
.cl em,.cv{font-style:normal;color:var(--accent-2);font-weight:700;min-width:38px;text-align:right}
input[type=range]{width:100%;-webkit-appearance:none;height:5px;background:var(--border);border-radius:999px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--thumb);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--thumb-ring);
}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--text-soft)}
.field input,.field textarea,.srvf input{
  background:rgba(0,0,0,.18);border:1px solid var(--border-2);color:var(--text);
  border-radius:12px;padding:10px 12px;outline:none;font-size:14px;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus,.srvf input:focus{border-color:var(--accent)}

.crow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crow label{font-size:13px;color:var(--text-soft);min-width:42px}
input[type=color]{
  width:38px;height:30px;border:1px solid var(--border-2);background:none;border-radius:8px;padding:2px;cursor:pointer;
}

.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lbtn{
  min-height:38px;border:1px solid var(--border-2);background:transparent;color:var(--text-soft);
  border-radius:10px;cursor:pointer;transition:all .13s;font-size:13px;padding:6px;
}
.lbtn:hover{border-color:var(--accent);color:var(--text)}
.lbtn.on{border-color:var(--accent-2);background:rgba(255,255,255,.06);color:var(--accent-2)}

.step-shell{
  display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;
}
.step-bar{
  display:flex;background:rgba(0,0,0,.22);border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;padding:0 6px;
}
.cr-step{
  flex:1;text-align:center;font-size:12px;font-weight:600;padding:13px 4px;cursor:pointer;
  color:rgba(255,255,255,.34);border-bottom:2px solid transparent;transition:all .15s;border-radius:10px 10px 0 0;
}
.cr-step:hover{color:rgba(255,255,255,.72);background:rgba(255,255,255,.03)}
.cr-step.active{color:rgba(255,255,255,.92);border-bottom-color:rgba(255,255,255,.62)}
.cr-step.done{color:rgba(60,200,120,.78);border-bottom-color:rgba(60,200,120,.42)}

.step-body{
  flex:1;min-height:0;overflow-y:auto;padding:16px 16px 28px;display:flex;flex-direction:column;gap:14px;
  overscroll-behavior:contain;
}
.step-body::-webkit-scrollbar{width:6px}
.step-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}

.status-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--border-2);font-size:12px;color:var(--text-soft);
}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px currentColor}

.srvf{display:flex;flex-direction:column;gap:4px}
.srvf label{font-size:11px;color:var(--muted)}
.stmsg{font-size:13px;text-align:center;min-height:18px}
.stmsg.ok{color:#45d095}
.stmsg.err{color:#f26c5f}
.shr{display:none;flex-direction:column;gap:8px}
.surl{
  background:rgba(0,0,0,.18);border:1px solid var(--accent);color:var(--accent);
  font-size:12px;padding:10px 12px;border-radius:12px;cursor:pointer;word-break:break-all;text-align:center;
}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sbtn{
  min-height:40px;border:1px solid var(--border-2);background:transparent;color:var(--text-soft);
  font-size:13px;border-radius:10px;cursor:pointer;transition:all .13s;
}
.sbtn:hover{border-color:var(--accent);color:var(--accent)}
.sbtn.wa{border-color:#25D366;color:#25D366}
.sbtn.wa:hover{background:#25D366;color:#00150a}
.sbtn.tg{border-color:#2AABEE;color:#2AABEE}
.sbtn.tg:hover{background:#2AABEE;color:#00131e}
.sbtn.em{border-color:#6da7ff;color:#6da7ff}
.sbtn.em:hover{background:#6da7ff;color:#08131d}
.sbtn.cp{border-color:#d8b866;color:#d8b866}
.sbtn.cp:hover{background:#d8b866;color:#1d1606}

.canvas-zone{
  position:relative;min-width:0;min-height:0;overflow:auto;display:grid;place-items:center;padding:26px;
  background:
    radial-gradient(ellipse at 28% 24%,rgba(255,255,255,.05),transparent 52%),
    radial-gradient(ellipse at 72% 76%,rgba(255,255,255,.04),transparent 48%),
    var(--bg);
}
.canvas-placeholder{
  text-align:center;color:var(--dim);font-size:30px;line-height:1.6;user-select:none;
}
.page-imp .canvas-placeholder{font-family:'Playfair Display',serif;font-style:italic}
.page-stip .canvas-placeholder{font-family:'DM Serif Display',serif;font-style:italic}

#b_cardWrap,#c_cardWrap{
  position:relative;display:none;flex-shrink:0;line-height:0;padding:14px;border-radius:12px;margin:auto;
  background:repeating-linear-gradient(45deg,#d33 0 8px,#f6f2ea 8px 16px,#23479f 16px 24px,#f6f2ea 24px 32px);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
#b_mc,#c_mc{
  position:relative;z-index:1;display:none;max-width:100%;max-height:calc(100vh - 140px);background:#fff;
}
#b_recBadge,#c_recBadge{
  display:none;position:absolute;top:12px;right:14px;background:#c02020;color:#fff;
  padding:5px 10px;border-radius:999px;font-size:11px;
}
#b_fpsBadge,#c_fpsBadge{
  position:absolute;bottom:10px;right:10px;font-size:11px;color:var(--accent);
  background:rgba(0,0,0,.55);padding:4px 9px;border-radius:999px;
}

.page-imp{
  --bg:#060c16;--panel:#0a1120;--border:#182438;--border-2:#1f3150;
  --accent:#7ab8d4;--accent-2:#4a8fb5;--accent-soft:#86bbd4;--thumb:#5fa8d8;--thumb-ring:#4a8fb5;
  --text:#d8e6f2;--text-soft:#aec6d8;--muted:#718ba1;--dim:#1a2a3a;
  --go-bg:linear-gradient(90deg,#18304d,#10253d,#18304d);--go-border:#4a8fb5;--go-text:#dcefff;
  font-family:'JetBrains Mono',monospace;
}
.page-imp .mb.A{border-color:#d8b866;background:rgba(216,184,102,.14);color:#d8b866}
.page-imp .mb.B{border-color:#2ab8a8;background:rgba(42,184,168,.14);color:#2ab8a8}
.page-imp .mb.C{border-color:#7ab8d4;background:rgba(122,184,212,.1);color:#7ab8d4}
.page-imp .btn.aon{border-color:#2ab8a8;color:#2ab8a8;background:rgba(42,184,168,.1)}

.page-stip{
  --bg:#141210;--panel:#171412;--border:#2a231d;--border-2:#3a3129;
  --accent:#f1d36c;--accent-2:#f1d36c;--accent-soft:#d6b861;--thumb:#efe0ae;--thumb-ring:#e5be54;
  --text:#f0ebe2;--text-soft:#d8cdbd;--muted:#9a8f83;--dim:#2b2622;
  --go-bg:linear-gradient(90deg,#4c150f,#7b2517,#4c150f);--go-border:#c94834;--go-text:#fff4ef;
  font-family:'DM Mono',monospace;
}
.page-stip .mb.active{border-color:#f1d36c;background:rgba(241,211,108,.14);color:#f1d36c}
.page-stip .mb.active-blue{border-color:#68a8ff;background:rgba(104,168,255,.14);color:#68a8ff}
.page-stip .mb.active-green{border-color:#54d786;background:rgba(84,215,134,.14);color:#54d786}
.page-stip .btn.anim-on{border-color:#68a8ff;color:#68a8ff;background:rgba(104,168,255,.1)}

@media (max-width: 1280px){
  .engine-main{grid-template-columns:300px minmax(0,1fr) 330px}
}
@media (max-width: 1100px){
  .engine-main{grid-template-columns:1fr}
  .side,.right-side{border-left:none;border-right:none;border-bottom:1px solid var(--border)}
  .canvas-zone{min-height:38vh}
}