/* ===========================================================
   Image Studio — brand tokens
   Change these values to re-skin the whole tool.
   =========================================================== */
:root{
  --brand:      #c8963e;   /* accent / buttons   */
  --brand-ink:  #1b1408;   /* text ON the accent */
  --ink:        #12151a;   /* main text          */
  --radius:     14px;

  --bg:         #f5f6f8;
  --surface:    #ffffff;
  --line:       #e3e6eb;
  --muted:      #6b7280;
  --danger:     #c0392b;
  --shadow:     0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.07);
}

*,*::before,*::after{box-sizing:border-box}

/* Must come before any rule that sets `display` on a class.
   A class selector and [hidden] have equal specificity, so without
   !important the later class rule wins and hidden panels stay on screen. */
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  display:flex; flex-direction:column;
}
h1,h2,h3{margin:0; line-height:1.25; font-weight:650}
button{font:inherit; cursor:pointer}
input{font:inherit; color:inherit}
.muted{color:var(--muted)}
.tiny{font-size:13px; color:var(--muted)}
.hint{margin:8px 0 0; font-size:13px; color:var(--muted)}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:var(--brand); position:relative;
}
.logo::after{
  content:""; position:absolute; inset:9px; border:2.4px solid #fff; border-radius:3px;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-text strong{font-size:16px}
.brand-text small{color:var(--muted); font-size:12px}

/* ---------- buttons ---------- */
.primary,.secondary,.ghost,.stage-tools button{
  border-radius:10px; border:1px solid var(--line); background:var(--surface);
  padding:10px 14px; color:var(--ink); font-weight:550;
  transition:background .15s, border-color .15s, transform .05s;
}
.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.primary:hover{filter:brightness(1.06)}
.secondary{background:var(--ink); border-color:var(--ink); color:#fff}
.ghost{background:transparent}
.ghost:hover,.stage-tools button:hover{background:#eef0f4}
.danger{color:var(--danger)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45; cursor:not-allowed}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px}

/* ---------- tool switcher ---------- */
.tools{
  display:flex; gap:4px; justify-content:center; padding:10px 20px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.tools button{
  border:0; background:transparent; border-radius:9px; padding:8px 18px;
  font-size:14.5px; font-weight:600; color:var(--muted);
  transition:background .15s, color .15s;
}
.tools button:hover{background:#eef0f4; color:var(--ink)}
.tools button.on{background:var(--brand); color:var(--brand-ink)}

/* ---------- layout ---------- */
main{flex:1; padding:20px; max-width:1320px; width:100%; margin:0 auto}
footer{
  padding:16px 20px; text-align:center; font-size:13px; color:var(--muted);
  border-top:1px solid var(--line); background:var(--surface);
}

/* ---------- dropzone ---------- */
.dropzone{
  border:2px dashed var(--line); border-radius:var(--radius); background:var(--surface);
  min-height:min(60vh,460px); display:grid; place-items:center; text-align:center;
  padding:40px 24px; cursor:pointer; transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone.over{border-color:var(--brand); background:#fffdf8}
.dz-icon{color:var(--brand); width:64px; margin:0 auto 14px}
.dz-icon svg{width:100%; display:block}
.dropzone h1{font-size:clamp(20px,3.2vw,26px)}
.dropzone p{margin:8px 0 0; color:var(--muted)}
.link{color:var(--brand); text-decoration:underline; font-weight:600}

/* ---------- editor ---------- */
.editor{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:20px; align-items:start}
.stage{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
       padding:14px; box-shadow:var(--shadow); min-width:0}
.stage-head{display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:2px 4px 10px}
.stage-head .name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.canvas-wrap{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:min(58vh,560px); border-radius:10px; overflow:hidden; touch-action:none;
  background-color:#2b2f36;
  background-image:
    linear-gradient(45deg,transparent 25%,rgba(255,255,255,.05) 25% 75%,transparent 75%),
    linear-gradient(45deg,transparent 25%,rgba(255,255,255,.05) 25% 75%,transparent 75%);
  background-size:20px 20px,20px 20px;
  background-position:0 0,10px 10px;
}
#preview{display:block; max-width:100%; max-height:100%}

/* crop frame */
.cropbox{
  position:absolute; box-sizing:border-box;
  border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 9999px rgba(0,0,0,.55);
  cursor:move; touch-action:none;
}
.cropbox .thirds{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.4) 33.33%, rgba(255,255,255,.4) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to right, transparent 66.66%, rgba(255,255,255,.4) 66.66%, rgba(255,255,255,.4) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom,transparent 33.33%, rgba(255,255,255,.4) 33.33%, rgba(255,255,255,.4) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to bottom,transparent 66.66%, rgba(255,255,255,.4) 66.66%, rgba(255,255,255,.4) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
.cropbox i{position:absolute; width:22px; height:22px; touch-action:none}
.cropbox i::after{
  content:""; position:absolute; inset:6px; background:#fff; border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.cropbox i[data-handle="nw"]{left:-11px;  top:-11px;    cursor:nwse-resize}
.cropbox i[data-handle="ne"]{right:-11px; top:-11px;    cursor:nesw-resize}
.cropbox i[data-handle="sw"]{left:-11px;  bottom:-11px; cursor:nesw-resize}
.cropbox i[data-handle="se"]{right:-11px; bottom:-11px; cursor:nwse-resize}
.cropbox i[data-handle="n"] {left:50%;    top:-11px;    margin-left:-11px; cursor:ns-resize}
.cropbox i[data-handle="s"] {left:50%;    bottom:-11px; margin-left:-11px; cursor:ns-resize}
.cropbox i[data-handle="w"] {top:50%;     left:-11px;   margin-top:-11px;  cursor:ew-resize}
.cropbox i[data-handle="e"] {top:50%;     right:-11px;  margin-top:-11px;  cursor:ew-resize}

.stage-tools{display:flex; flex-wrap:wrap; gap:8px; padding-top:12px}
.stage-tools button{padding:8px 12px; font-size:14px}
.stage-tools .danger{margin-left:auto}

/* filmstrip */
.filmstrip{display:flex; gap:8px; overflow-x:auto; padding:12px 2px 2px; margin-top:6px;
           border-top:1px solid var(--line)}
.thumb{position:relative; flex:none; width:70px; height:70px; border-radius:8px; overflow:hidden;
       border:2px solid transparent; background:#2b2f36; padding:0; cursor:pointer}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.on{border-color:var(--brand)}
.thumb b{position:absolute; right:2px; top:2px; width:18px; height:18px; border-radius:50%;
         background:rgba(0,0,0,.65); color:#fff; font-size:12px; line-height:18px; text-align:center}

/* ---------- panel ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
       padding:18px; box-shadow:var(--shadow); position:sticky; top:20px}
.step{padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line)}
.step h3{display:flex; align-items:center; gap:9px; font-size:15px; margin-bottom:12px}
.num{width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--brand-ink);
     font-size:12px; display:grid; place-items:center; flex:none}
.step.off{opacity:.45; pointer-events:none}

.chips{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.chip{text-align:left; padding:9px 11px; border:1px solid var(--line); border-radius:10px;
      background:var(--surface); line-height:1.25; transition:border-color .15s, background .15s}
.chip:hover{border-color:#c9ced6}
.chip.on{border-color:var(--brand); background:#fffaf0; box-shadow:inset 0 0 0 1px var(--brand)}
.chip span{display:block; font-weight:600; font-size:13.5px}
.chip small{display:block; color:var(--muted); font-size:11.5px}

.row{display:flex; align-items:flex-end; gap:8px; margin-top:12px}
.row .x{padding-bottom:9px; color:var(--muted)}
.row label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); flex:1}
.row label.wide{flex-direction:row; align-items:center; gap:8px; font-size:13px; color:var(--ink)}
.row input[type=number]{width:100%; padding:8px 10px; border:1px solid var(--line);
                        border-radius:9px; background:var(--surface)}
.row label.wide input[type=number]{width:90px}
input[type=color]{width:44px; height:34px; padding:2px; border:1px solid var(--line);
                  border-radius:8px; background:var(--surface); cursor:pointer}

.seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{flex:1; border:0; background:var(--surface); padding:9px 6px; font-size:13.5px; font-weight:550}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--brand); color:var(--brand-ink)}

.slider{display:block; margin-top:14px; font-size:13px}
.slider span{display:flex; justify-content:space-between}
.slider input{width:100%; margin-top:6px; accent-color:var(--brand)}
.check{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px}
.check input[type=number]{width:70px; padding:5px 7px; border:1px solid var(--line); border-radius:7px}
.check input[type=checkbox]{width:17px; height:17px; accent-color:var(--brand); flex:none}

/* ---------- batch rename ---------- */
.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.field input[type=text]{
  padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); font-size:15px; color:var(--ink);
}
.field input[type=text]:focus{border-color:var(--brand)}
select{
  padding:8px 10px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink); width:100%; cursor:pointer;
}
.row label.wide select{flex:1}

.rn-list{display:flex; flex-direction:column; gap:8px; max-height:min(64vh,620px); overflow-y:auto; padding-right:2px}
.rn-row{
  display:flex; align-items:center; gap:12px; padding:8px 10px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface);
}
.rn-row>img{width:46px; height:46px; flex:none; object-fit:cover; border-radius:7px; background:#2b2f36}
.rn-seq{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--bg);
  color:var(--muted); font-size:12px; font-weight:650; display:grid; place-items:center;
  font-variant-numeric:tabular-nums;
}
.rn-names{flex:1; min-width:0}
.rn-new{font-weight:640; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rn-old{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rn-acts{display:flex; gap:4px; flex:none}
.rn-acts button{
  width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--muted); font-size:13px; line-height:1;
}
.rn-acts button:hover:not(:disabled){background:#eef0f4; color:var(--ink)}
.rn-acts .rm:hover{color:var(--danger); border-color:var(--danger)}

.result{background:var(--bg); border-radius:10px; padding:12px 14px; font-size:13.5px; margin-bottom:16px}
.result>div{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.result b{font-variant-numeric:tabular-nums}
.saving{display:block; margin-top:6px; padding-top:8px; border-top:1px solid var(--line);
        color:#1a7f4b; font-weight:600; text-align:center}

.actions{display:grid; gap:8px}
.actions button{width:100%}

/* ---------- toast + dialog ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:10px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50; max-width:90vw;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

dialog{
  border:0; border-radius:var(--radius); padding:26px; max-width:560px; width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(16,24,40,.28); color:var(--ink);
}
dialog::backdrop{background:rgba(10,14,20,.55)}
dialog h2{font-size:20px; margin-bottom:14px}
dialog h3{font-size:15px; margin:20px 0 8px}
dialog ol,dialog ul{margin:0; padding-left:20px; font-size:14.5px}
dialog li{margin-bottom:8px}
dialog form{margin-top:22px; text-align:right}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .editor{grid-template-columns:1fr}
  .panel{position:static}
  .canvas-wrap{height:min(48vh,420px)}
}
@media (max-width:480px){
  main{padding:12px}
  .topbar{padding:12px 14px}
  .stage,.panel{padding:12px; border-radius:12px}
  .chips{grid-template-columns:1fr}
  .stage-tools .danger{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}