:root{
  --ground:#F6F4EF; --paper:#FBFAF7; --card:#FFFFFF; --line:#E2DED5; --line2:#D6D0C4;
  --ink:#1E1E1C; --ink2:#3E3B37; --mute:#5F5B53; --accent:#7A5220; --accentSoft:#F3E9DA;
  --blue:#2F5D8C; --red:#C23B22; --ok:#2E6B45; --warn:#9A4A12; --warnSoft:#F7EBDD;
  --serif:'Newsreader',Georgia,serif; --sans:'Work Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px}
button{font-family:inherit;cursor:pointer;color:inherit}
button:disabled{cursor:default}
input,textarea{font-family:inherit;font-size:16px}
h1,h2,h3{font-weight:400;margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.top{height:68px;display:flex;align-items:center;gap:28px;padding:0 28px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-family:var(--serif);font-size:26px;letter-spacing:.2px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.free{height:32px;line-height:32px;padding:0 14px;border-radius:16px;font-size:13px;font-weight:600;background:#EFE6D6;color:#5C3D17}
.free.out{background:var(--ink);color:var(--paper)}
.lib-btn{height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:var(--card);font-size:14px;font-weight:500}
.lib-btn[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* stepper: names only, a line with dots, no numbers */
.stepper{display:flex;align-items:center;gap:0}
.step{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:none;background:transparent;font-size:14px;color:var(--mute);border-radius:8px}
.step .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid #B8B0A0;background:var(--paper);flex-shrink:0}
.step.done .dot{background:var(--accent);border-color:var(--accent)}
.step.current{color:var(--ink);font-weight:600;background:#EFECE5}
.step.current .dot{border-color:var(--ink);background:var(--ink)}
.stepper .join{width:22px;height:1.5px;background:var(--line2)}

.shell{display:grid;grid-template-columns:minmax(0,1fr) 440px;min-height:calc(100vh - 68px)}
.stage-col{padding:22px 28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.stage-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.stage-head h1{font-family:var(--serif);font-size:24px}
.stage-head p{margin:0;font-size:13px;color:var(--mute)}
#stage{width:100%;max-width:960px}
.panel{background:var(--paper);border-left:1px solid var(--line);padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.panel h2{font-family:var(--serif);font-size:26px}
.panel p{margin:0;font-size:14px;line-height:1.6;color:var(--ink2)}
.muted{color:var(--mute);font-size:13px;line-height:1.5}
.spacer{flex-grow:1}

.photo{container-type:inline-size;position:relative;width:100%;aspect-ratio:960/810;overflow:hidden;border-radius:6px;background:#EDEAE4}
.photo>img.room{position:absolute;inset:0;width:100%;height:100%;display:block}
.abs{position:absolute}
.art{position:absolute;box-sizing:border-box;background:#fff;overflow:hidden;box-shadow:0 .7vw 1.6vw rgba(40,30,20,.28);transition:left .55s ease,top .55s ease,width .35s ease,height .35s ease}
.art .mat{width:100%;height:100%;background:#FBF8F1;overflow:hidden}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.nail{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff;transition:left .55s ease,top .55s ease}
.guide-h{position:absolute;left:0;right:0;height:0;border-top:1.5px solid var(--blue)}
.guide-h.dash{border-top-style:dashed}
.guide-v{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(47,93,140,.7)}
.tag{position:absolute;font-size:11px;font-weight:600;color:#fff;background:var(--blue);padding:2px 6px;border-radius:4px;white-space:nowrap}
.chip-dark{position:absolute;padding:6px 10px;background:rgba(30,30,28,.78);color:#fff;font-size:12px;border-radius:6px}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.card h3{font-size:13px;font-weight:600;margin-bottom:8px}
.btn{height:48px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;padding:0 18px}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line2);font-weight:500}
.btn.sm{height:40px;font-size:13px;padding:0 14px}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex-grow:1}
.icon-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--line2);background:var(--card);display:inline-flex;align-items:center;justify-content:center}
.seg{display:flex;gap:4px;background:#EFECE5;padding:4px;border-radius:10px;flex-wrap:wrap}
.seg button{height:36px;padding:0 12px;border-radius:8px;border:none;background:transparent;font-size:13px;font-weight:500;color:var(--mute)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pill{height:36px;padding:0 12px;border-radius:18px;font-size:12px;border:1px solid var(--line2);background:var(--card)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
label.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}
label.field input{height:44px;padding:0 12px;border:1px solid #CFC8BA;border-radius:8px;background:#fff;width:100%}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.warnbox{padding:12px 14px;border-radius:10px;background:var(--warnSoft);font-size:13px;line-height:1.5;color:#5C3D17}

/* works list */
.work-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#fff;border:1.5px solid var(--line)}
.work-row.editing{border-color:var(--accent)}
.work-row .thumb{width:64px;height:48px;border-radius:4px;overflow:hidden;flex-shrink:0;background:#eee}
.work-row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.work-row.off .thumb{opacity:.35}
.check{width:28px;height:28px;flex-shrink:0;border-radius:6px;font-size:15px;font-weight:700;border:1.5px solid #B8B0A0;background:#fff;color:#fff;padding:0}
.check[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.rank{display:inline-block;min-width:22px;height:22px;line-height:22px;text-align:center;border-radius:11px;font-weight:700;font-size:11px;color:#fff;background:#4F4B44;margin-right:6px}
.rank.one{background:var(--accent)}
.lineup{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px;min-height:520px;display:flex;flex-direction:column;gap:18px}
.lineup .row-art{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:22px 28px;flex-grow:1;align-content:center}
.lineup .piece{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}
.frame{box-sizing:border-box;background:#fff;box-shadow:0 6px 14px rgba(40,30,20,.25);overflow:hidden}
.eyebrow{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);font-weight:600}

/* checks */
.checks{display:flex;flex-direction:column;gap:8px}
.chk{display:flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.chk .l{flex-grow:1}.chk .l b{display:block;font-size:14px;font-weight:500}.chk .l span{font-size:12px;color:var(--mute)}
.chk .v{text-align:right}.chk .v b{display:block;font-size:14px}.chk .v span{font-size:12px;font-weight:600}
.ok{color:var(--ok)}.bad{color:var(--warn)}

/* styles strip + remix */
.styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.style-card{padding:6px;border-radius:10px;background:#fff;border:2px solid var(--line);text-align:left}
.style-card[aria-pressed="true"]{border-color:var(--accent)}
.style-card .mini{container-type:inline-size;position:relative;width:100%;aspect-ratio:960/810;border-radius:5px;overflow:hidden}
.style-card .mini img.room{position:absolute;inset:0;width:100%;height:100%}
.style-card .mini .art{box-shadow:0 2px 4px rgba(0,0,0,.25)}
.style-card .nm{font-size:13px;font-weight:600;margin-top:6px}
.style-card .ft{font-size:11px;color:var(--mute)}
.style-card .nt{font-size:11px;font-weight:600}
.rec{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;z-index:2}
.remixbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.remixbar .count{font-size:13px;color:var(--mute)}

/* drawing */
.sheet{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sheet svg{display:block;width:100%;height:auto}
.sched{width:100%;border-collapse:collapse;font-size:12px}
.sched td{padding:7px 4px;border-top:1px solid #F0ECE4;vertical-align:top}
.sched td:first-child{font-weight:700;color:var(--red);width:26px}

/* library */
.lib-grid{display:flex;flex-direction:column;gap:14px}
.lib-item{text-align:left;padding:10px 12px;border-radius:10px;background:#fff;border:1.5px solid var(--line)}
.lib-item[aria-pressed="true"]{border-color:var(--accent)}
.files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.file{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;font-size:13px}
.file .ext{width:38px;height:44px;border-radius:4px;background:#EFECE5;display:flex;align-items:flex-end;justify-content:center;font-size:10px;font-weight:700;padding-bottom:5px;color:var(--mute);flex-shrink:0;overflow:hidden}
.file .ext img{width:100%;height:100%;object-fit:cover}
.works-strip{display:flex;gap:12px;flex-wrap:wrap}
.works-strip .w{width:130px;font-size:11px}
.works-strip .w .im{height:80px;border-radius:4px;overflow:hidden;margin-bottom:4px}
.works-strip .w .im img{width:100%;height:100%;object-fit:cover}
textarea.notes{width:100%;min-height:70px;padding:8px 10px;border:1px solid #CFC8BA;border-radius:8px;font-size:14px;resize:vertical}

.paywall{padding:14px;border-radius:12px;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;gap:8px}
.paywall .opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.paywall button{height:54px;border-radius:10px;border:1px solid #6E6A63;background:transparent;color:var(--paper);font-size:12px}
.paywall button.gold{background:#C9A24B;border-color:#C9A24B;color:var(--ink);font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s}
.toast.show{opacity:1}

@media (max-width: 1100px){
  .shell{grid-template-columns:1fr}
  .panel{border-left:none;border-top:1px solid var(--line)}
  .top{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
  .stepper{order:3;width:100%;overflow-x:auto}
  .styles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stage-col{padding:16px}
}
@media print{ .top,.panel,#under,.stage-head{display:none} .shell{display:block} }

/* view tabs above the photo */
.viewtabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.viewtabs [role=tab]{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line2);background:var(--card);font-size:13px}
.viewtabs [role=tab][aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.addview{height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:18px;border:1px dashed #B8B0A0;font-size:13px;color:var(--mute);cursor:pointer;margin-left:auto}
.section-h{display:flex;align-items:baseline;gap:12px;margin:18px 0 10px;flex-wrap:wrap}
.section-h h3{font-family:var(--serif);font-size:20px}

/* adjust card: one consistent row per control */
.adj-row{display:grid;grid-template-columns:1fr 40px 76px 40px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #F0ECE4}
.adj-row:last-of-type{border-bottom:none}
.adj-l b{display:block;font-size:14px;font-weight:500}.adj-l span{font-size:12px;color:var(--mute)}
.adj-v{text-align:center;font-size:17px}
.linkbtn{border:none;background:none;color:var(--accent);font-size:13px;font-weight:600;padding:6px 0;text-decoration:underline}

/* show-on-photo switches */
.toggles{display:flex;flex-direction:column;gap:10px}
.switch{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;font-weight:400}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{width:36px;height:20px;border-radius:10px;background:#D6D0C4;position:relative;flex-shrink:0;transition:background .2s}
.switch .track::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+.track{background:var(--blue)}
.switch input:checked+.track::after{left:18px}
.switch input:focus-visible+.track{outline:2px solid var(--blue);outline-offset:2px}

/* step-by-step */
.step-now{box-sizing:border-box;border:3px dashed var(--accent);background:rgba(243,233,218,.55);display:flex;align-items:flex-end;justify-content:flex-start}
.step-now span,.step-next span{margin:4px;padding:2px 7px;border-radius:5px;font-size:12px;font-weight:700;background:var(--accent);color:#fff}
.step-next{box-sizing:border-box;border:1.5px dashed rgba(60,55,50,.45)}
.step-next span{background:rgba(60,55,50,.55)}
.nail-chips{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:4px;z-index:3}
.nail-chip{padding:4px 8px;border-radius:6px;background:var(--red);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.progress{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.prog{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line2);background:var(--card);font-size:12px}
.prog.done{background:#EFE6D6;border-color:#E2D3B8}
.prog.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.step-thumb{width:72px;height:72px;border:4px solid #333;border-radius:4px;overflow:hidden;flex-shrink:0}
.step-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bigmeas{display:flex;gap:16px;align-items:flex-end;padding:8px 0;border-bottom:1px solid #F0ECE4}
.bigmeas:last-of-type{border-bottom:none}
.bigmeas b{display:block;font-size:26px;font-family:var(--serif);font-weight:500;color:var(--red)}
.bigmeas span{font-size:12px;color:var(--mute)}
.bigmeas em{margin-left:auto;font-style:normal;font-weight:700;color:var(--red)}

/* proposals */
.opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.opt-grid.one{grid-template-columns:1fr}
.opt-card{background:#fff;border:2px solid var(--line);border-radius:12px;padding:10px}
.opt-card.fav{border-color:var(--accent)}
.opt-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.linkrow{display:flex;gap:8px}.linkrow input{flex-grow:1;height:40px;padding:0 10px;border:1px solid #CFC8BA;border-radius:8px;font-size:13px}
.resp{margin-top:8px;padding:8px 10px;border-radius:8px;background:#F7F5F0;font-size:13px;line-height:1.5}
body.client-mode .top-right{display:none}
body.client-mode .brand{display:none}