/* Designer page — Pearl Glass, sticky preview + tabs */
body.designer{background-attachment:fixed}
.d-wrap{max-width:1180px;margin:0 auto;padding:0 16px 120px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start}
.stage{position:sticky;top:calc(var(--nav-h) + 14px);z-index:5}
.stage .glass{padding:12px;border-radius:24px}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.seg{display:inline-flex;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{font:inherit;font-size:.82rem;border:0;background:none;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.seg button.on{background:var(--grad);color:#fff;font-weight:600}
.smile-box{border-radius:18px;overflow:hidden;background:#F4E3D6;position:relative}
.smile-box .frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage-sum{font-size:.82rem;color:var(--ink-2);margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.stage-sum span{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.stage-note{font-size:.7rem;color:var(--ink-3);margin-top:6px}

.tabs-bar{position:sticky;top:var(--nav-h);z-index:6;margin:0 -16px 10px;padding:8px 16px;background:rgba(253,252,250,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs-bar::-webkit-scrollbar{display:none}
.tab{flex:none;font:inherit;font-size:.86rem;border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--ink-2);padding:7px 14px;border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.tab .n{font-size:.72rem;color:var(--ink-3)}
.tab.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.tab.on .n{color:#fff}
.tab.done:not(.on){border-color:var(--ch-2);color:var(--ch-deep)}
.tab.done:not(.on) .n::before{content:"";display:inline-block;width:10px;height:10px;margin-right:3px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.panel{display:none}
.panel.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel h2{font-weight:400;font-size:1.45rem;margin:4px 0 2px}
.panel .hint{color:var(--ink-2);font-size:.92rem;margin:0 0 14px}
.blk{margin:18px 0}
.blk-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.blk-t b{font-weight:600}
.blk-t small{color:var(--ink-3);font-size:.78rem}

.opts{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.opts.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:520px){.opts.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.opts.c6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.opt{position:relative;text-align:left;font:inherit;color:inherit;cursor:pointer;background:rgba(255,255,255,.72);border:1.5px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,box-shadow .15s,transform .1s;min-height:48px}
.opt:active{transform:scale(.985)}
.opt:hover{border-color:var(--ch-2)}
.opt.on{border-color:var(--ch);background:#FFFCF6;box-shadow:0 0 0 3px rgba(184,149,90,.14)}
.opt.on::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--grad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.opt[disabled],.opt.locked{opacity:.45;cursor:not-allowed}
.opt.locked::before{content:"";position:absolute;top:9px;right:10px;width:12px;height:12px;background:var(--ink-3,#A79E92);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat}
.opt .t{font-weight:600;font-size:.95rem;line-height:1.35;padding-right:22px}
.opt .d{font-size:.8rem;color:var(--ink-2);line-height:1.5}
.opt .img{border-radius:12px;overflow:hidden;background:#F7F1E4;aspect-ratio:1/1;display:grid;place-items:center}
.opt .img.wide{aspect-ratio:16/10}
.opt .img img{width:100%;height:100%;object-fit:contain}
.opt .img svg{width:100%;height:100%}
.opt.compact{align-items:center;text-align:center;padding:10px 6px}
.opt.compact .t{padding-right:0;font-size:.9rem}
.opt.compact.on::after{width:14px;height:14px;top:6px;right:6px;background-size:9px}

.sw{display:flex;flex-direction:column;align-items:center;gap:4px}
.sw i{display:block;width:34px;height:44px;border-radius:12px 12px 16px 16px;border:1px solid rgba(110,82,60,.25);box-shadow:inset -4px -6px 10px rgba(120,90,60,.12),inset 4px 4px 8px rgba(255,255,255,.6)}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.86rem;cursor:pointer;border:1.5px solid var(--line);background:rgba(255,255,255,.75);border-radius:999px;padding:7px 14px;color:var(--ink)}
.chip.on{border-color:var(--ch);background:#FFF8EA;color:var(--ch-deep);font-weight:600}

.chart-box{background:rgba(255,255,255,.7);border:1px solid var(--glass-line);border-radius:22px;padding:8px;box-shadow:var(--shadow)}
.chart{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;user-select:none;-webkit-user-select:none}
.chart .t{cursor:pointer;outline:none}
.chart .t .crown{fill:#FFFFFF;stroke:#B9AC97;stroke-width:1;transition:fill .15s}
.chart .t .groove{fill:none;stroke:#D8CDB9;stroke-width:.8}
.chart .t:hover .crown,.chart .t:focus .crown{fill:#FBF6EA}
.chart .t.sel .crown{fill:url(#chSel);stroke:#B8955A;stroke-width:1.8}
.chart .t.sel .groove{stroke:#C9A96E}
.chart .t.off{cursor:not-allowed}
.chart .t.off .crown{fill:#F3F1EC;stroke:#DDD6CA}
.chart .t.off .groove{stroke:#E6E0D6}
.chart .num{font-size:10.5px;fill:#6E665C;font-family:var(--font)}
.chart .t.sel .num{fill:#8A6A35;font-weight:700}
.chart .ql{font-size:11px;fill:#9A9184;font-family:var(--font);letter-spacing:.02em}
.chart .side,.chart .arch{font-size:11px;fill:#B8A98F;font-family:var(--font)}
.chart .mid{stroke:#EFE8DB;stroke-dasharray:3 4}
.sel-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sel-list span{font-size:.78rem;background:#FFF8EA;border:1px solid var(--ch-2);color:var(--ch-deep);border-radius:999px;padding:3px 10px}

.callout{display:flex;gap:10px;align-items:flex-start;background:rgba(247,240,226,.7);border:1px solid var(--ch-2);border-radius:16px;padding:12px 14px;font-size:.88rem;color:var(--ink-2);margin:10px 0}
.callout b{color:var(--ink)}
.callout .ico{flex:none;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:700}

.nav-row{display:flex;gap:10px;justify-content:space-between;margin-top:22px}
.nav-row .btn{flex:1}

.figure-mini{background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:16px;padding:10px;margin-top:10px}
.figure-mini img{width:100%;border-radius:10px}
.figure-mini svg{width:100%;height:auto;display:block}

/* summary */
.sum-table{width:100%;border-collapse:collapse;font-size:.9rem}
.sum-table td{padding:9px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.sum-table td:first-child{color:var(--ink-2);width:40%}
.sum-table td:last-child{font-weight:500}
.rx{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;white-space:pre-wrap;background:#FFFDF9;border:1px dashed var(--ch-2);border-radius:14px;padding:12px;color:#4a4238}
.form-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.form-grid{grid-template-columns:1fr}}
.field label{display:block;font-size:.82rem;color:var(--ink-2);margin-bottom:4px}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;padding:11px 14px;border-radius:14px;border:1.5px solid var(--line);background:rgba(255,255,255,.85);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ch)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--ink-2);margin:12px 0}
.consent input{width:20px;height:20px;accent-color:#B8955A;flex:none;margin-top:3px}
.done-card{text-align:center;padding:24px}
.done-card .code{font-size:1.8rem;letter-spacing:.08em;font-weight:600;margin:6px 0}

@media (max-width:900px){
  .d-wrap{grid-template-columns:minmax(0,1fr);gap:6px}
  .stage{top:var(--nav-h);margin:0 -16px;padding:8px 16px 6px;background:rgba(253,252,250,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .stage .glass{padding:6px;border-radius:18px;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
  .stage-top{margin-bottom:4px}
  .stage-sum{display:none}
  .stage-note{display:none}
  .tabs-bar{top:calc(var(--nav-h) + var(--stage-h,190px))}
  .smile-box{max-height:28vh}
  .smile-box svg{max-height:28vh;margin:0 auto}
}

/* print: lab brief */
.print-only{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{display:block!important;position:absolute;left:0;top:0;width:100%}
}
#printArea{display:none;font-family:var(--font);color:#222}
#printArea h1{font-size:18pt;margin:0}
#printArea .pa-head{display:flex;justify-content:space-between;border-bottom:2px solid #B8955A;padding-bottom:6px;margin-bottom:10px}
#printArea .pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#printArea svg{width:100%;height:auto}
#printArea table{width:100%;border-collapse:collapse;font-size:10pt}
#printArea td{border:1px solid #ddd;padding:4px 6px;vertical-align:top}
#printArea .chart .crown{fill:#fff;stroke:#999}
#printArea .chart .t.sel .crown{fill:#E9DCC0;stroke:#8A6A35}
#printArea .chart .groove{stroke:#ccc;fill:none}
#printArea .chart .num{font-size:10px}
#printArea .chart .ql,#printArea .chart .side,#printArea .chart .arch{font-size:10px;fill:#999}

/* ---- Jupiter motion language for the designer ---- */
body.designer{background:var(--bg)}
.tabs-bar{position:sticky;background:rgba(255,255,255,.86);border-bottom:1px solid rgba(201,163,92,.18)}
.tabs-bar .tab-ind{position:absolute;left:0;top:8px;height:calc(100% - 16px);border-radius:999px;background:var(--gold);z-index:0;pointer-events:none;box-shadow:0 8px 20px rgba(138,106,58,.22)}
.tab{position:relative;z-index:1;background:transparent;border-color:transparent;transition:color .35s var(--ease)}
.tab:hover{color:var(--gold-d)}
.tab.on{background:transparent;color:#fff;font-weight:500;border-color:transparent}
.no-fx .tab.on,.tabs-bar:not(.has-ind) .tab.on{background:var(--gold)}
.tab.done:not(.on){border-color:transparent;color:var(--gold-d)}
.opt{background:#fff;border:1px solid var(--line);transition:border-color .3s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.opt:hover{border-color:var(--gold-l);transform:translateY(-2px);box-shadow:0 12px 28px rgba(120,88,40,.08)}
.opt.on{border-color:var(--gold);background:#FFFDF8;box-shadow:0 0 0 3px rgba(201,163,92,.14),0 14px 30px rgba(120,88,40,.08)}
.opt.on::after{background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.chip{transition:border-color .3s var(--ease),background .3s var(--ease),color .3s}
.chip.on{border-color:var(--gold);background:#FFF8EA;color:var(--gold-d)}
.panel h2{font-weight:300;font-size:clamp(26px,3vw,34px)}
.stage .glass{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.smile-box{background:#2a1416}
.smile-box .svg{position:relative}
.smile-box .svg-old{position:absolute;inset:0;z-index:2;pointer-events:none}
.smile-box .svg-old svg{width:100%;height:auto;display:block}
.smile-box .frame{z-index:3}
.chart .t .crown{transform-box:fill-box;transform-origin:center}
.callout{background:var(--bg2);border:1px solid var(--line)}
.callout .ico{background:var(--gold)}
.callout .ico svg{width:15px;height:15px}
.nav-row .btn{height:50px}

/* photographic preview */
.smile-box.photo{background:#EBD3C4}
.smile-box .ph-cv,.smile-box .svg-old .ph-cv{width:100%;height:auto;display:block}
.opt .img img.ph-thumb{object-fit:cover;width:100%;height:100%;background:#EBD3C4}
.opt .img img.ph-thumb:not([src]){opacity:0}
.opt .img.ref{aspect-ratio:2157/729;background:#F3E6DC;margin-bottom:6px}
.opt .img.ref img{object-fit:cover}
.stump-fig{background:var(--bg2)}
.opt .img.align-ill{aspect-ratio:420/168;margin-bottom:6px}
.doc-note{display:flex;gap:12px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:12px}
.doc-note img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:linear-gradient(145deg,#FBF6EC,#EADBBC);border:1px solid var(--gold-l);flex:none}
.doc-note b{display:block;font-size:.92rem;color:var(--ink)}
.doc-note span{display:block;font-size:.78rem;color:var(--gold-d)}