/* Artwork Studio — scoped under .artwork-studio so site header/footer stay untouched */
.artwork-studio{
  --ease:cubic-bezier(.22,.61,.36,1);
}
.artwork-studio [hidden]{display:none!important}
.artwork-studio img,.artwork-studio svg{max-width:100%;display:block}
.artwork-studio button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.artwork-studio h1,.artwork-studio h2,.artwork-studio h3{font-family:var(--font-display);font-weight:800;line-height:1.05;letter-spacing:-.02em}

.artwork-studio .container{width:100%;max-width:1400px;margin-inline:auto;padding-inline:clamp(16px,3vw,36px)}

.artwork-studio .pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:100px;
  background:var(--surface-2);border:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--muted)}
.artwork-studio .pill.brand{background:var(--brand-soft);border-color:rgba(232,88,32,.3);color:var(--brand-hi)}
.artwork-studio .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

.artwork-studio .hero{padding:clamp(30px,5vw,58px) 0 clamp(20px,3vw,30px);
  background:radial-gradient(120% 130% at 82% -20%,rgba(232,88,32,.16),transparent 55%)}
.artwork-studio .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand)}
.artwork-studio .eyebrow::before{content:"";width:26px;height:2px;background:var(--brand)}
.artwork-studio .hero h1{font-size:clamp(2rem,4.4vw,3.4rem);margin:.8rem 0}
.artwork-studio .hero p{color:var(--muted);max-width:66ch;font-size:clamp(.98rem,1.2vw,1.1rem)}
.artwork-studio .hero .stats{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}

.artwork-studio .work{display:grid;grid-template-columns:310px 1fr 330px;gap:18px;align-items:start;padding-bottom:clamp(40px,6vw,80px)}
.artwork-studio .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.artwork-studio .panel-hd{padding:1rem 1.2rem;border-bottom:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.artwork-studio .panel-hd h3{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-family:var(--font-body);font-weight:700;color:var(--muted-2)}
.artwork-studio .panel-bd{padding:1.2rem}
.artwork-studio .sticky{position:sticky;top:calc(var(--header-h) + 48px)}

.artwork-studio .drop{border:2px dashed var(--line-2);border-radius:var(--radius);padding:1.6rem 1rem;text-align:center;
  cursor:pointer;transition:.22s;background:var(--bg-2)}
.artwork-studio .drop:hover,.artwork-studio .drop.over{border-color:var(--brand);background:var(--brand-soft)}
.artwork-studio .drop .ic{font-size:1.9rem;margin-bottom:.5rem}
.artwork-studio .drop b{display:block;font-size:.96rem}
.artwork-studio .drop small{color:var(--muted-2);font-size:.78rem}

.artwork-studio .samples{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.9rem}
.artwork-studio .samples button{background:#fff;border:2px solid var(--line);border-radius:11px;padding:5px;overflow:hidden;transition:.2s}
.artwork-studio .samples button:hover{border-color:var(--brand);transform:translateY(-2px)}
.artwork-studio .samples img{aspect-ratio:1;object-fit:contain;width:100%}
.artwork-studio .samples-lbl{font-size:.72rem;color:var(--muted-2);margin-top:.8rem;display:block}

.artwork-studio .ctrl{margin-top:1.3rem}
.artwork-studio .ctrl-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.artwork-studio .ctrl-hd label{font-size:.85rem;font-weight:600}
.artwork-studio .ctrl-hd .val{font-size:.8rem;color:var(--brand-hi);font-weight:700;font-variant-numeric:tabular-nums}
.artwork-studio input[type=range]{width:100%;accent-color:var(--brand);height:20px}
.artwork-studio .hint{font-size:.74rem;color:var(--muted-2);margin-top:.35rem;line-height:1.45}

.artwork-studio .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;font-size:.95rem;
  padding:.9rem 1.5rem;border-radius:100px;background:var(--brand);color:#fff;transition:.24s var(--ease);width:100%}
.artwork-studio .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(232,88,32,.6)}
.artwork-studio .btn:disabled{opacity:.45;cursor:not-allowed}
.artwork-studio .btn.ghost{background:transparent;border:1.5px solid var(--line-2);color:var(--text)}
.artwork-studio .btn.ghost:hover{border-color:var(--brand);box-shadow:none}
.artwork-studio .btn.sm{padding:.6rem 1rem;font-size:.84rem}

.artwork-studio .stage-wrap{position:relative}
.artwork-studio .compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.artwork-studio .face{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column}
.artwork-studio .face .cap{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line);min-height:44px;
  font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted-2);
  white-space:nowrap}
.artwork-studio .face .cap>span{overflow:hidden;text-overflow:ellipsis}
.artwork-studio .face .cap .b{color:var(--brand-hi)}
.artwork-studio .canvasbox{aspect-ratio:1;display:grid;place-items:center;padding:8%;position:relative;
  background:conic-gradient(from 0deg,#f7f7f8 0 25%,#ececed 0 50%,#f7f7f8 0 75%,#ececed 0) 0 0/22px 22px}
.artwork-studio .canvasbox.plain{background:#fff}
.artwork-studio .canvasbox img{max-width:100%;max-height:100%;object-fit:contain}
.artwork-studio .canvasbox svg{width:100%;height:100%;max-width:100%;max-height:100%}
.artwork-studio .canvasbox .empty{color:#a9a9ae;text-align:center;font-size:.85rem}
.artwork-studio .canvasbox .empty .ic{font-size:2rem;display:block;margin-bottom:.4rem;opacity:.5}

.artwork-studio .proc{position:absolute;inset:0;background:rgba(12,12,14,.92);backdrop-filter:blur(6px);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:10;
  opacity:0;visibility:hidden;transition:.3s}
.artwork-studio .proc.on{opacity:1;visibility:visible}
.artwork-studio .proc .ring{width:54px;height:54px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--brand);animation:studio-spin .8s linear infinite}
.artwork-studio .proc .step{font-weight:700;font-size:1rem}
.artwork-studio .proc .bar{width:min(280px,70%);height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.artwork-studio .proc .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-hi));transition:width .3s}
.artwork-studio .proc .sub{font-size:.78rem;color:var(--muted-2)}

.artwork-studio .resbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:14px}

.artwork-studio .mock{margin-top:14px}
.artwork-studio .mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.artwork-studio .mock-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;aspect-ratio:1}
.artwork-studio .mock-item .gm{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.artwork-studio .mock-item .lg{position:absolute;transform:translate(-50%,-50%);line-height:0;display:block}
.artwork-studio .mock-item .lg img{width:100%;display:block}
.artwork-studio .mock-item .tagx{position:absolute;bottom:6px;left:6px;background:rgba(18,18,22,.78);color:#fff;font-size:.62rem;
  font-weight:700;padding:2px 7px;border-radius:100px}

.artwork-studio .thread-row{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.artwork-studio .thread-row:last-child{border-bottom:none}
.artwork-studio .sw{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.artwork-studio .thread-row .info{flex:1;min-width:0}
.artwork-studio .thread-row .nm{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artwork-studio .thread-row .cd{font-size:.74rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.artwork-studio .thread-row .pc{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}

.artwork-studio .empty-note{color:var(--muted-2);font-size:.85rem;text-align:center;padding:1.6rem .5rem}

.artwork-studio .value{border-top:1px solid var(--line);background:var(--bg-2)}
.artwork-studio .value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:clamp(32px,5vw,58px) 0}
.artwork-studio .vcard .ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-hi);
  display:grid;place-items:center;font-size:1.2rem;margin-bottom:.8rem}
.artwork-studio .vcard h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.35rem}
.artwork-studio .vcard p{color:var(--muted);font-size:.9rem}

.artwork-studio .footnote{border-top:1px solid var(--line);padding:1.2rem 0 2.4rem;color:var(--muted-2);font-size:.8rem}

.artwork-studio #toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px}
.artwork-studio .toast{background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--brand);border-radius:12px;
  padding:.8rem 1.1rem;font-size:.9rem;box-shadow:var(--shadow);animation:studio-tin .25s var(--ease)}
.artwork-studio .toast.ok{border-left-color:var(--ok)}

@keyframes studio-spin{to{transform:rotate(360deg)}}
@keyframes studio-tin{from{opacity:0;transform:translateY(12px)}}

@media (max-width:1180px){
  .artwork-studio .work{grid-template-columns:280px 1fr}
  .artwork-studio .side-threads{grid-column:1/-1}
  .artwork-studio .sticky{position:static}
  .artwork-studio .value-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .artwork-studio .work{grid-template-columns:1fr}
  .artwork-studio .compare{grid-template-columns:1fr}
}
@media (max-width:560px){
  .artwork-studio .value-grid{grid-template-columns:1fr}
  .artwork-studio .mock-grid{grid-template-columns:1fr 1fr}
}

.artwork-studio .modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.artwork-studio .mode-card{display:flex;align-items:flex-start;gap:.9rem;text-align:left;padding:1.1rem 1.2rem;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);transition:.22s var(--ease);position:relative}
.artwork-studio .mode-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.artwork-studio .mode-card.active{border-color:var(--brand);background:linear-gradient(160deg,rgba(232,88,32,.12),var(--surface) 60%)}
.artwork-studio .mode-card .mc-ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:1.2rem;
  background:var(--surface-2);color:var(--muted)}
.artwork-studio .mode-card.active .mc-ic{background:var(--brand);color:#fff}
.artwork-studio .mode-card .mc-txt{display:flex;flex-direction:column;gap:.2rem;padding-right:3.6rem}
.artwork-studio .mode-card .mc-txt b{font-family:var(--font-display);font-size:1.02rem}
.artwork-studio .mode-card .mc-txt span{font-size:.82rem;color:var(--muted);line-height:1.45}
.artwork-studio .mode-card .mc-tag{position:absolute;top:1.1rem;right:1.1rem;font-size:.7rem;font-weight:800;
  padding:.22rem .6rem;border-radius:100px;letter-spacing:.03em}
.artwork-studio .mode-card .mc-tag.free{background:rgba(56,201,138,.16);color:var(--ok)}
.artwork-studio .mode-card .mc-tag.paid{background:var(--brand-soft);color:var(--brand-hi)}

.artwork-studio .fld{margin-bottom:1.1rem}
.artwork-studio .fld label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.45rem}
.artwork-studio .fld .req{color:var(--brand)}
.artwork-studio .fld .opt{color:var(--muted-2);font-weight:500;font-size:.78rem}
.artwork-studio .fld input[type=text],.artwork-studio .fld input[type=email],.artwork-studio .fld input[type=tel],.artwork-studio .fld input[type=date],.artwork-studio .fld input:not([type]),.artwork-studio .fld textarea{
  width:100%;background:var(--bg-2);border:1.5px solid var(--line);border-radius:11px;padding:.8rem .95rem;
  color:var(--text);font-size:.95rem;transition:border-color .2s,background .2s}
.artwork-studio .fld input:focus,.artwork-studio .fld textarea:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.artwork-studio .fld textarea{min-height:96px;resize:vertical}
.artwork-studio .fld .err{display:none;color:#ef5350;font-size:.78rem;margin-top:.35rem}
.artwork-studio .fld.bad input,.artwork-studio .fld.bad textarea{border-color:#ef5350}
.artwork-studio .fld.bad .err{display:block}
.artwork-studio .f-row.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.artwork-studio .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.artwork-studio .chips label{cursor:pointer;margin:0}
.artwork-studio .chips input{position:absolute;opacity:0;pointer-events:none}
.artwork-studio .chips span{display:inline-block;padding:.5rem .95rem;border-radius:100px;border:1.5px solid var(--line);
  font-size:.86rem;font-weight:600;color:var(--muted);transition:.18s}
.artwork-studio .chips label:hover span{border-color:var(--line-2);color:var(--text)}
.artwork-studio .chips input:checked + span{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-hi)}

.artwork-studio .brief-wrap{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start;padding-bottom:clamp(40px,6vw,80px)}
.artwork-studio .brief-intro{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem}
.artwork-studio .brief-side{position:sticky;top:calc(var(--header-h) + 48px)}

.artwork-studio .pkg-grid{display:grid;gap:.6rem}
.artwork-studio .pkg{position:relative;display:block;cursor:pointer}
.artwork-studio .pkg input{position:absolute;opacity:0;pointer-events:none}
.artwork-studio .pkg .body{display:block;border:1.5px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;background:var(--bg-2);transition:.2s}
.artwork-studio .pkg:hover .body{border-color:var(--line-2)}
.artwork-studio .pkg input:checked + .body{border-color:var(--brand);background:linear-gradient(160deg,rgba(232,88,32,.1),var(--bg-2) 60%)}
.artwork-studio .pkg .top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.artwork-studio .pkg .nm{font-family:var(--font-display);font-weight:800;font-size:1.02rem}
.artwork-studio .pkg .pr{font-family:var(--font-display);font-weight:800;color:var(--brand);font-size:1.1rem;white-space:nowrap}
.artwork-studio .pkg .bl{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.artwork-studio .pkg .inc{list-style:none;padding:0;margin:.7rem 0 0;display:grid;gap:.3rem}
.artwork-studio .pkg .inc li{font-size:.8rem;color:var(--muted);display:flex;gap:.45rem;align-items:flex-start;line-height:1.45}
.artwork-studio .pkg .inc i{color:var(--brand);font-size:.85rem}
.artwork-studio .pkg .best{position:absolute;top:-8px;right:12px;background:var(--brand);color:#fff;font-size:.62rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:100px;z-index:2}

.artwork-studio .bs-line{display:flex;justify-content:space-between;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.86rem}
.artwork-studio .bs-line:last-of-type{border-bottom:none}
.artwork-studio .bs-line span:first-child{color:var(--muted);flex:none}
.artwork-studio .bs-line span:last-child{text-align:right;font-weight:600}
.artwork-studio .bs-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-2)}
.artwork-studio .bs-total .big{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--brand)}
.artwork-studio .bs-empty{color:var(--muted-2);font-size:.86rem}

.artwork-studio .modal-scrim{position:fixed;inset:0;z-index:1200;background:rgba(8,8,10,.78);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.28s}
.artwork-studio .modal-scrim.open{opacity:1;visibility:visible}
.artwork-studio .modal-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:.28s}
.artwork-studio .modal-scrim.open .modal-card{transform:none}
.artwork-studio .modal-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.4rem;border-bottom:1px solid var(--line)}
.artwork-studio .modal-hd h3{font-size:1.15rem}
.artwork-studio .icon-x{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);flex:none}
.artwork-studio .icon-x:hover{background:var(--surface-2);color:var(--text)}
.artwork-studio .modal-bd{padding:1.4rem}
.artwork-studio .lead-note{color:var(--muted);font-size:.9rem;margin-bottom:1.3rem}

.artwork-studio .done-box{text-align:center;padding:1rem 0}
.artwork-studio .done-box .tick{width:66px;height:66px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:2rem;margin:0 auto 1.1rem}
.artwork-studio .done-box h3{font-size:1.3rem;margin-bottom:.5rem}
.artwork-studio .done-box p{color:var(--muted);font-size:.92rem;max-width:44ch;margin:0 auto}
.artwork-studio .ref-chip{display:inline-block;margin-top:1rem;font-family:var(--font-display);font-weight:800;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.5rem .9rem;letter-spacing:.04em}

@media (max-width:1080px){
  .artwork-studio .brief-wrap{grid-template-columns:1fr}
  .artwork-studio .brief-side{position:static}
}
@media (max-width:760px){
  .artwork-studio .modes{grid-template-columns:1fr}
  .artwork-studio .f-row.two{grid-template-columns:1fr}
  .artwork-studio .mode-card .mc-txt{padding-right:0}
  .artwork-studio .mode-card .mc-tag{position:static;align-self:flex-start;margin-top:.3rem}
}