:root{
    --bg:#161513;
    --surface-1:#1E1C1A;
    --surface-2:#262422;
    --surface-3:#2E2B28;
    --divider:#FFFFFF14;
    --amber:#D9A05B;
    --amber-hover:#E4B274;
    --amber-soft:#D9A05B1F;
    --positive:#7FB07F;
    --danger:#C96F5E;
    --text-hi:#F2EFEA;
    --text:#C9C4BC;
    --text-dim:#8C877E;
    --warn:#D9A05B;
    --font-display:"Fraunces", Georgia, serif;
    --font-ui:"Inter", -apple-system, "SF Pro Text", "Work Sans", sans-serif;
    --font-data:"IBM Plex Mono", ui-monospace, monospace;
    --radius-s:8px;
    --radius-m:14px;
    --radius-l:20px;
    --radius:14px;
    --shadow-1:0 1px 2px #0006, 0 4px 16px #0003;
    --shadow-2:0 4px 12px #0007, 0 12px 40px #0005;
    --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:150ms;
    --dur-med:280ms;
    --panel:var(--surface-1);
    --panel-2:var(--surface-2);
    --amber-hi:var(--amber-hover);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Work Sans',sans-serif;}
  body{padding-bottom:60px;}

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-dim);
  }

  header{
    padding:calc(38px + env(safe-area-inset-top, 0px)) 20px 26px;
    border-bottom:1px solid var(--divider);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }
  header .eyebrow{color:var(--amber);}
  header .help-btn{
    flex:0 0 auto;
    background:var(--panel-2);
    border:1px solid var(--divider);
    color:var(--amber-hi);
    width:34px;
    height:34px;
    border-radius:50%;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:16px;
    line-height:1;
    cursor:pointer;
  }
  h1{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-style:italic;
    font-size:38px;
    line-height:1.05;
    margin:0 0 14px;
    letter-spacing:0;
    color:var(--text);
  }
  .wordmark-accent{
    color:var(--amber-hi);
  }
  header p{
    margin:0;
    color:var(--text-dim);
    font-size:15px;
    line-height:1.65;
    max-width:560px;
  }
  header p span{
    display:block;
  }

  main{
    max-width:720px;
    margin:0 auto;
    padding:34px 16px 0;
    display:flex;
    flex-direction:column;
  }

  .workflow-prep{
    display:block;
  }
  .workflow-prep > summary{
    list-style:none;
    cursor:pointer;
    border:1px solid var(--divider);
    background:var(--panel);
    padding:13px 16px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:baseline;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:16px;
    transition:border-color .24s ease, background .24s ease, color .24s ease;
  }
  .workflow-prep > summary > span:first-child{
    color:var(--amber-hi);
  }
  .workflow-prep > summary::-webkit-details-marker{display:none;}
  .workflow-prep > summary::after{
    content:'';
    color:var(--amber-hi);
    font-family:'IBM Plex Mono',monospace;
    font-style:normal;
    font-size:13px;
    line-height:1;
  }
  .workflow-prep > summary:focus-visible{
    outline:2px solid var(--amber-hi);
    outline-offset:3px;
  }
  .workflow-prep-body{
    padding-top:14px;
  }
  body.workflow-setup .workflow-prep{
    margin-top:28px;
  }
  body.workflow-review .workflow-prep{
    margin-top:32px;
  }
  body.workflow-review .workflow-prep > summary{
    border-color:rgba(230,189,140,.25);
    background:rgba(28,32,36,.78);
  }
  body.workflow-review .workflow-prep-body{
    padding-bottom:4px;
  }
  .professional-tools-intro{
    border:1px solid rgba(230,189,140,.18);
    background:rgba(200,147,85,.045);
    padding:12px 14px;
    margin:0 0 14px;
  }

  .dropzones{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--divider);
    border:1px solid var(--divider);
  }
  .dropzone{
    background:var(--panel);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:220px;
  }
  .dz-label{display:flex; justify-content:space-between; align-items:baseline;}
  .dz-title{font-family:'Fraunces',serif; font-size:15px; font-style:italic; color:var(--amber-hi);}
  .dz-frame{
    position:relative;
    flex:1;
    border:1px dashed var(--divider);
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    min-height:150px;
    background:
      repeating-linear-gradient(45deg, #191c1f 0 8px, #1a1e21 8px 16px);
  }
  .dz-frame img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:auto;}
  .dz-empty{
    text-align:center;
    color:var(--text-dim);
    font-size:12px;
    padding:12px;
  }
  .dz-empty .plus{
    display:block;
    position:relative;
    width:22px;
    height:22px;
    margin:0 auto 6px;
  }
  .dz-empty .plus::before,
  .dz-empty .plus::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:20px;
    height:1.5px;
    background:var(--amber);
    border-radius:999px;
    transform:translate(-50%, -50%);
  }
  .dz-empty .plus::after{
    transform:translate(-50%, -50%) rotate(90deg);
  }
  .dz-empty .plus{
    color:var(--amber);
    margin-bottom:6px;
    font-family:'Fraunces',serif;
  }
  .dz-frame input[type=file]{
    position:absolute; inset:0; opacity:0; cursor:pointer;
  }

  canvas.hist{width:100%; height:34px; display:block; border-top:1px solid var(--divider); margin-top:4px;}
  .hist-wrap{margin-top:2px;}

  .action-row{
    padding:18px 0 6px;
    display:flex;
    justify-content:center;
  }
  button.primary{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:12.5px;
    background:var(--amber);
    color:#1a1409;
    border:none;
    padding:13px 30px;
    border-radius:var(--radius);
    cursor:pointer;
    font-weight:500;
  }
  button.primary:disabled{
    background:#3a3d40;
    color:var(--text-dim);
    cursor:not-allowed;
  }
  button.primary:active:not(:disabled){transform:translateY(1px);}

  .status{
    text-align:center;
    color:var(--text-dim);
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    min-height:18px;
    letter-spacing:0.04em;
  }

  section.result{
    margin-top:26px;
    display:none;
  }
  section.result.show{display:block;}
  body.workflow-review section.result.show{
    margin-top:0;
  }
  body.workflow-review .review-workspace{
    animation:reviewReveal .36s ease-out both;
  }

  @keyframes reviewReveal{
    from{opacity:.82; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
  }

  @media (prefers-reduced-motion: reduce){
    body.workflow-review .review-workspace{animation:none;}
  }

  .compare{
    position:relative;
    width:100%;
    background:#000;
    overflow:hidden;
    border:1px solid var(--divider);
    touch-action:none;
  }
  body.workflow-review .compare{
    border-color:rgba(230,189,140,.25);
  }
  .compare canvas{
    display:block;
    width:100%;
    height:auto;
  }
  .wipe-handle{
    position:absolute; top:0; bottom:0;
    width:2px; background:var(--amber-hi);
    transform:translateX(-1px);
    pointer-events:none;
  }
  .wipe-handle::after{
    content:'';
    position:absolute; top:50%; left:50%;
    width:34px; height:34px;
    border-radius:50%;
    background:var(--amber-hi);
    transform:translate(-50%,-50%);
    box-shadow:0 2px 6px rgba(0,0,0,0.5);
  }
  .tag{
    position:absolute; top:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; letter-spacing:0.1em;
    background:rgba(20,23,26,0.72);
    padding:4px 8px;
    color:var(--text-dim);
    text-transform:uppercase;
  }
  .tag.left{left:8px;}
  .tag.right{right:8px;}

  .controls{
    padding:12px 0 2px;
  }
  .control-row{
    display:flex; align-items:center; gap:14px;
    margin-bottom:6px;
  }
  .control-row label{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--text-dim);
    letter-spacing:0.08em;
    text-transform:uppercase;
    width:78px;
    flex-shrink:0;
  }
  input[type=range]{
    flex:1;
    min-width:0;
    -webkit-appearance:none;
    height:2px;
    background:var(--divider);
    outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;height:16px;border-radius:50%;
    background:var(--amber);
    cursor:pointer;
    border:2px solid var(--bg);
  }
  .control-row .val{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--amber-hi);
    width:34px;
    text-align:right;
  }

  .btn-row{
    display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;
  }
  button.secondary{
    flex:1;
    min-width:140px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:transparent;
    border:1px solid var(--divider);
    color:var(--text);
    padding:12px 14px;
    border-radius:var(--radius);
    cursor:pointer;
  }
  button.secondary:hover{border-color:var(--amber);}
button.secondary.mini{font-size:10.5px;padding:10px 12px;}
  button.secondary:disabled{
    opacity:0.4;
    cursor:not-allowed;
  }
  button.secondary:disabled:hover{border-color:var(--divider);}

  .recipe{
    margin-top:26px;
    border:1px solid var(--divider);
    background:var(--panel);
  }
  .recipe-head{
    padding:12px 16px;
    border-bottom:1px solid var(--divider);
    display:flex; justify-content:space-between; align-items:center;
  }
  .recipe-head h2{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:16px;
    margin:0;
    color:var(--amber-hi);
  }
  .recipe-body{padding:4px 16px 14px;}
  .recipe-item{
    display:flex; justify-content:space-between;
    padding:9px 0;
    border-bottom:1px solid var(--divider);
    font-size:13.5px;
  }
  .recipe-item:last-child{border-bottom:none;}
  .recipe-item .k{color:var(--text-dim);}
  .recipe-item .v{
    font-family:'IBM Plex Mono',monospace;
    color:var(--amber-hi);
    font-size:12.5px;
  }
  .recipe-note{
    font-size:11.5px;
    color:var(--text-dim);
    line-height:1.5;
    padding-top:10px;
  }

  .review-actions{
    margin-top:18px;
    padding:16px;
    border:1px solid var(--divider);
    background:var(--panel);
  }
  .review-actions .btn-row{
    margin-top:0;
  }
  .review-primary-export button{
    width:100%;
    min-height:52px;
    font-size:13px;
  }
  .review-next-action{
    border-top:1px solid var(--divider);
    margin-top:14px;
    padding-top:14px;
  }
  .review-next-action button{
    width:100%;
  }
  .refine-match,
  .more-export-options{
    margin-top:14px;
    border-top:1px solid var(--divider);
    padding-top:14px;
  }
  .refine-match > summary,
  .more-export-options > summary{
    list-style:none;
    cursor:pointer;
    border:1px solid var(--divider);
    background:var(--panel-2);
    padding:12px 14px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:baseline;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:15px;
  }
  .refine-match > summary > span:first-child,
  .more-export-options > summary > span:first-child{
    color:var(--amber-hi);
  }
  .refine-match > summary::-webkit-details-marker,
  .more-export-options > summary::-webkit-details-marker{display:none;}
  .refine-match > summary::after,
  .more-export-options > summary::after{
    content:'';
    color:var(--amber-hi);
    font-family:'IBM Plex Mono',monospace;
    font-style:normal;
    font-size:12px;
    line-height:1;
  }
  .refine-match > summary:focus-visible,
  .more-export-options > summary:focus-visible{
    outline:2px solid var(--amber-hi);
    outline-offset:3px;
  }
  .refine-match .controls,
  .more-export-options .btn-row{
    margin-top:12px;
  }
  .editing-workspace{
    margin-top:16px;
    margin-bottom:34px;
    border-top:0;
    padding-top:0;
  }
  .editing-workspace > summary{
    background:rgba(200,147,85,.055);
    border-color:rgba(230,189,140,.28);
  }
  .refine-match-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);
    gap:18px;
    align-items:start;
    margin-top:14px;
  }
  .refine-guidance{
    min-width:0;
    border:1px solid rgba(43,48,54,.92);
    background:rgba(20,23,26,.5);
    padding:15px 16px 16px;
  }
  .refine-guidance .pi-block{
    padding-top:0;
  }
  .refine-guidance .pi-block h3{
    margin-bottom:12px;
  }
  .editing-workspace .controls{
    margin-top:0;
  }
  .ref-health-compact{
    margin-top:10px !important;
    background:rgba(200,147,85,.045);
    border-color:rgba(230,189,140,.28);
  }
  .ref-health-compact .recipe-head{
    padding-bottom:8px;
  }
  .ref-health-ready{
    display:flex;
    gap:12px;
    align-items:center;
    padding:2px 0 4px;
  }
  .ref-health-ready-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border:1px solid rgba(230,189,140,.45);
    border-radius:50%;
    color:var(--amber-hi);
    font-family:'IBM Plex Mono',monospace;
    font-size:14px;
  }
  .ref-health-ready strong{
    display:block;
    color:var(--text);
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:18px;
    line-height:1.1;
  }
  .ref-health-ready span:not(.ref-health-ready-mark){
    display:block;
    margin-top:4px;
    color:var(--text-dim);
    font-size:12.5px;
    line-height:1.4;
  }

  .photo-intelligence-panel{
    margin-top:34px;
    margin-bottom:34px;
    border-color:rgba(230,189,140,.34);
    background:linear-gradient(180deg, rgba(200,147,85,.055), rgba(30,31,34,.96) 34%, var(--panel));
  }
  .photo-intelligence-panel .recipe-head{
    padding:18px 24px 12px;
    align-items:center;
    border-bottom-color:rgba(43,48,54,.72);
  }
  .photo-intelligence-panel .recipe-head h2{
    font-size:20px;
    line-height:1.08;
    color:var(--amber-hi);
  }
  .photo-intelligence-panel .recipe-head .eyebrow,
  .photo-intelligence-panel .recipe-body .eyebrow{
    color:rgba(139,145,152,.68);
    font-size:9.5px;
    letter-spacing:.16em;
  }
  .photo-intelligence-panel .recipe-body{
    padding:0 24px 30px;
  }

  .pi-card{
    padding:24px 0 2px;
  }
  .pi-summary{
    display:grid;
    gap:12px;
    max-width:720px;
    margin:0 0 28px;
    padding:0 0 24px;
    border-bottom:1px solid rgba(230,189,140,.24);
  }
  .pi-summary p{
    margin:0;
    color:var(--text);
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:400;
    font-size:21px;
    line-height:1.64;
  }
  .pi-summary p:first-child{
    font-size:24px;
    line-height:1.54;
    color:#f7f0e5;
  }
  .pi-confidence{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px 14px;
    align-items:baseline;
    border:1px solid rgba(230,189,140,.38);
    color:var(--amber-hi);
    background:rgba(200,147,85,.065);
    padding:12px 14px;
    margin:0 0 30px;
  }
  .pi-confidence strong{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:500;
  }
  .pi-confidence span{
    color:var(--text-dim);
    font-size:12px;
    line-height:1.45;
  }
  .pi-section-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:0 30px;
    border-top:1px solid rgba(43,48,54,.88);
  }
  .pi-block{
    min-width:0;
    padding-top:24px;
    margin-top:0;
  }
  .pi-block h3{
    margin:0 0 14px;
    color:var(--text);
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:17px;
    line-height:1.2;
  }
  .pi-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:11px;
  }
  .pi-list li{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    align-items:baseline;
    padding-left:16px;
    color:var(--text-dim);
    font-size:13px;
    line-height:1.5;
  }
  .pi-list li::before{
    content:'';
    position:absolute;
    left:0;
    top:.62em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--amber);
  }
  .pi-list-text{
    min-width:0;
  }
  .pi-empty{
    margin:0;
    color:var(--text-dim);
    font-size:12.5px;
    line-height:1.5;
  }

  @media(max-width:720px){
    .editing-workspace{
      margin-top:12px;
      margin-bottom:28px;
    }
    .refine-match-body{
      grid-template-columns:1fr;
      gap:14px;
    }
    .refine-guidance{
      padding:14px;
    }
    .photo-intelligence-panel{
      margin-top:28px;
      margin-bottom:28px;
    }
    .photo-intelligence-panel .recipe-head{
      padding:16px 18px 12px;
      align-items:flex-start;
      flex-direction:column;
      gap:6px;
    }
    .photo-intelligence-panel .recipe-head h2{
      font-size:19px;
    }
    .photo-intelligence-panel .recipe-body{
      padding:0 18px 24px;
    }
    .pi-card{
      padding-top:15px;
    }
    .pi-summary{
      margin-bottom:24px;
      padding-bottom:20px;
    }
    .pi-summary p{
      font-size:17px;
      line-height:1.58;
    }
    .pi-summary p:first-child{
      font-size:19px;
      line-height:1.52;
    }
    .pi-confidence{
      grid-template-columns:1fr;
      gap:4px;
      margin-bottom:24px;
    }
    .pi-section-grid{
      grid-template-columns:1fr;
    }
    .pi-block + .pi-block{
      border-top:1px solid var(--divider);
      margin-top:15px;
    }
    .pi-list li{
      grid-template-columns:1fr;
      gap:4px;
    }
  }

  .export-ready{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
  }
  .export-ready strong{
    display:block;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:17px;
    color:var(--text);
  }
  .export-ready-note{
    max-width:230px;
    color:var(--text-dim);
    font-size:12px;
    line-height:1.45;
    text-align:right;
  }
  .export-attention{
    animation:exportPulse 1.8s ease-out;
    border-color:var(--amber-hi)!important;
  }
  @keyframes exportPulse{
    0%{box-shadow:0 0 0 0 rgba(230,189,140,.42);}
    100%{box-shadow:0 0 0 16px rgba(230,189,140,0);}
  }
  .gibbstone-toast{
    position:fixed;
    left:50%;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    transform:translate(-50%, 12px);
    z-index:1200;
    max-width:min(420px, calc(100vw - 28px));
    background:var(--panel);
    border:1px solid var(--amber-hi);
    color:var(--text);
    padding:10px 14px;
    border-radius:var(--radius);
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    letter-spacing:.04em;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    box-shadow:0 10px 28px rgba(0,0,0,.32);
  }
  .gibbstone-toast.show{
    opacity:1;
    transform:translate(-50%, 0);
  }

  footer{
    text-align:center;
    color:var(--text-dim);
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.06em;
    padding:36px 20px 0;
  }

  @media (max-width:480px){
    h1{font-size:26px;}
    .dropzones{grid-template-columns:1fr 1fr;}
    .export-ready{display:block;}
    .export-ready-note{text-align:left;max-width:none;margin-top:8px;}
  }


/* Gibbstone v3 setup + package polish */
.header-actions{display:flex;gap:8px;align-items:flex-start;}
.setup-overlay{position:fixed;inset:0;background:rgba(10,11,13,.78);z-index:1000;padding:22px;overflow-y:auto;}
.setup-card{width:calc(100vw - 44px);max-width:620px;margin:42px auto;background:var(--panel);border:1px solid var(--divider);border-radius:4px;padding:28px;position:relative;box-shadow:0 16px 44px rgba(0,0,0,.35);}
.setup-card h2{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:28px;margin:6px 0 8px;color:var(--text);}
.setup-card p{color:var(--text-dim);line-height:1.55;margin:0 0 18px;}
.setup-close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--text-dim);font-size:24px;cursor:pointer;}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
.setup-grid label,.setup-check{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);display:flex;flex-direction:column;gap:7px;}
.setup-grid input,.setup-grid select{min-width:0;width:100%;background:var(--panel-2);border:1px solid var(--divider);color:var(--text);font-family:'Work Sans',sans-serif;font-size:14px;padding:11px 10px;border-radius:2px;outline:none;}
.setup-check{flex-direction:row;align-items:center;margin:16px 0 4px;text-transform:none;letter-spacing:0;font-family:'Work Sans',sans-serif;font-size:13px;}
.setup-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
@media(max-width:560px){.setup-grid{grid-template-columns:1fr}.setup-card{margin:18px auto;padding:22px}.setup-actions button{flex:1;min-width:0}}

/* Gibbstone UI 2.0 redesign layer */
html,body{
  background:
    radial-gradient(circle at 50% -220px, rgba(217,160,91,.12), transparent 420px),
    var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
}
body{padding-bottom:48px;}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 240px);
}
button,
input,
select,
textarea{font-family:var(--font-ui);}
.eyebrow{
  font-family:var(--font-ui);
  font-size:.6875rem;
  letter-spacing:.06em;
  font-weight:600;
  text-transform:none;
  color:var(--text-dim);
}
header{
  max-width:1120px;
  margin:0 auto;
  padding:calc(48px + env(safe-area-inset-top, 0px)) 24px 32px;
  border-bottom:0;
}
h1{
  font-family:var(--font-display);
  font-size:clamp(2.15rem, 4vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--text-hi);
}
.wordmark-accent{color:var(--amber);}
header p{
  max-width:620px;
  color:var(--text);
  font-size:clamp(.95rem, 1.3vw, 1.1rem);
  line-height:1.65;
}
.header-actions{gap:10px;}
header .help-btn,
.setup-close,
#aboutCloseBtn,
#helpCloseBtn,
#bugCloseBtn{
  background:color-mix(in srgb, var(--surface-2) 82%, transparent);
  border:0;
  color:var(--text-hi);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
header .help-btn:hover,
.setup-close:hover,
#aboutCloseBtn:hover,
#helpCloseBtn:hover,
#bugCloseBtn:hover{
  background:var(--surface-3);
  color:var(--amber);
  transform:translateY(-1px);
}
main{
  max-width:1120px;
  padding:24px 24px 0;
  gap:0;
}
.dropzones{
  gap:24px;
  background:transparent;
  border:0;
}
.dropzone{
  min-height:320px;
  padding:18px;
  background:var(--surface-1);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-1);
}
.dz-title{
  color:var(--text-hi);
  font-family:var(--font-display);
  font-size:1.25rem;
}
.dz-frame{
  min-height:240px;
  border:1.5px dashed var(--divider);
  border-radius:var(--radius-l);
  background:
    linear-gradient(135deg, rgba(217,160,91,.05), transparent 36%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 8px, transparent 8px 16px),
    var(--surface-2);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dz-frame:hover{
  border-color:color-mix(in srgb, var(--amber) 70%, transparent);
  background:linear-gradient(135deg, var(--amber-soft), transparent 42%), var(--surface-2);
  transform:scale(1.005);
}
.dz-empty{font-size:.9375rem;line-height:1.45;}
.dz-empty .plus{
  color:var(--amber);
  width:26px;
  height:26px;
}
canvas.hist{
  height:40px;
  border-top:0;
  opacity:.62;
}
.action-row{
  padding:32px 0 8px;
  justify-content:center;
  gap:12px!important;
  position:relative;
}
.ready-match-row{
  display:none;
  padding:20px 0 0;
  margin-inline:auto;
  width:100%;
}
body.workflow-setup.has-reference.has-source .ready-match-row{
  display:flex;
}
body.workflow-review .ready-match-row{
  display:none;
}
.ready-match-row #matchBtn{
  min-width:min(100%, 220px);
}
.utility-action-row{
  padding-top:24px;
}
button.primary,
#bugSendBtn{
  min-height:48px;
  border-radius:var(--radius-m);
  background:var(--amber);
  color:var(--bg);
  font-family:var(--font-ui);
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:700;
  box-shadow:0 8px 26px rgba(217,160,91,.18);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
button.primary:hover:not(:disabled),
#bugSendBtn:hover{
  background:var(--amber-hover);
  transform:translateY(-1px);
}
button.primary:active:not(:disabled),
button.secondary:active:not(:disabled),
#bugSendBtn:active{
  transform:scale(.98);
}
button.primary:disabled{
  background:var(--surface-2);
  color:var(--text-dim);
  box-shadow:none;
}
button.secondary{
  min-height:44px;
  border:0;
  border-radius:var(--radius-m);
  background:var(--surface-2);
  color:var(--text-hi);
  font-family:var(--font-ui);
  font-size:.8125rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
button.secondary:hover:not(:disabled){
  background:var(--surface-3);
  border-color:transparent;
  transform:translateY(-1px);
}
button.secondary.mini{
  min-width:44px;
  padding:10px 14px;
}
.action-row button.secondary.mini{
  display:none;
}
body.has-source .action-row button.secondary.mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:-72px;
  z-index:3;
  min-width:44px;
  width:44px;
  height:44px;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  color:var(--text-hi);
  background:color-mix(in srgb, var(--surface-3) 84%, transparent);
  backdrop-filter:blur(8px);
}
body.has-source .action-row #rotateLeftBtn{
  right:68px;
}
body.has-source .action-row #rotateRightBtn{
  right:16px;
}
.status{
  font-family:var(--font-ui);
  letter-spacing:0;
  color:var(--text-dim);
}
.recipe,
.review-actions,
.workflow-prep > summary,
.refine-match > summary,
.more-export-options > summary,
.refine-guidance{
  border:0;
  border-radius:var(--radius-m);
  background:var(--surface-1);
  box-shadow:var(--shadow-1);
}
.recipe{
  margin-top:32px;
  overflow:hidden;
}
.recipe-head{
  padding:18px 20px;
  border-bottom:1px solid var(--divider);
}
.recipe-head h2,
.workflow-prep > summary > span:first-child,
.refine-match > summary > span:first-child,
.more-export-options > summary > span:first-child{
  color:var(--text-hi);
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:-.01em;
}
.recipe-body{padding:8px 20px 18px;}
.recipe-item{
  border-bottom:1px solid var(--divider);
  color:var(--text);
}
.recipe-item .v{
  font-family:var(--font-ui);
  color:var(--text-hi);
}
.recipe-note{
  color:var(--text-dim);
  font-size:.8125rem;
}
.control-row{
  gap:16px;
  margin-bottom:12px;
}
.control-row label{
  font-family:var(--font-ui);
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:none;
  font-weight:600;
}
input:not([type=range]),
select,
textarea{
  background:var(--surface-2)!important;
  border:0!important;
  border-radius:var(--radius-s)!important;
  color:var(--text-hi)!important;
  outline:none;
}
input:not([type=range]):focus,
select:focus,
textarea:focus,
button:focus-visible,
summary:focus-visible,
a:focus-visible{
  outline:2px solid color-mix(in srgb, var(--amber) 60%, transparent)!important;
  outline-offset:3px!important;
}
input[type=range]{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--amber) 0 50%, var(--surface-2) 50% 100%);
}
input[type=range]::-webkit-slider-thumb{
  width:20px;
  height:20px;
  border:3px solid var(--surface-1);
  background:var(--amber);
  box-shadow:var(--shadow-1);
}
.control-row .val{
  font-family:var(--font-data);
  color:var(--text-hi);
}
section.result{margin-top:40px;}
.compare{
  border:0;
  border-radius:var(--radius-l);
  background:#050505;
  box-shadow:var(--shadow-2);
}
body.workflow-review .compare{border-color:transparent;}
.wipe-handle{
  width:2px;
  background:color-mix(in srgb, var(--amber) 72%, white);
  transition:background var(--dur-fast) var(--ease-out);
  position:relative;
}
.wipe-handle::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:32px;
  height:32px;
  border-radius:50%;
  background:
    linear-gradient(45deg, transparent 42%, var(--amber) 42% 58%, transparent 58%) 7px 50%/7px 7px no-repeat,
    linear-gradient(-45deg, transparent 42%, var(--amber) 42% 58%, transparent 58%) 18px 50%/7px 7px no-repeat,
    linear-gradient(90deg, var(--amber), var(--amber)) center/14px 1.5px no-repeat,
    var(--surface-3);
  box-shadow:var(--shadow-1);
  transform:translate(-50%,-50%);
}
.tag{
  border-radius:999px;
  background:color-mix(in srgb, var(--surface-3) 82%, transparent);
  color:var(--text);
  backdrop-filter:blur(8px);
  font-family:var(--font-ui);
  font-size:.6875rem;
  letter-spacing:.05em;
  font-weight:700;
}
.editing-workspace{
  margin-top:18px;
  margin-bottom:32px;
}
.editing-workspace > summary,
.more-export-options > summary,
.workflow-prep > summary{
  padding:16px 18px;
  background:var(--surface-1);
}
.refine-match-body{
  grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
  gap:24px;
}
.refine-guidance{
  padding:20px;
}
.refine-guidance .pi-block h3,
.pi-block h3{
  font-family:var(--font-display);
  color:var(--text-hi);
}
.review-actions{
  padding:20px;
}
.review-primary-export button{
  min-height:56px;
}
.more-export-options{
  border-top:0;
  padding-top:0;
}
.more-export-options .btn-row{
  padding:4px 0 0;
}
.photo-intelligence-panel{
  border:0;
  background:linear-gradient(180deg, rgba(217,160,91,.07), var(--surface-1) 130px);
}
.photo-intelligence-panel .recipe-head h2{
  color:var(--text-hi);
  font-size:1.45rem;
}
.pi-summary p,
.pi-summary p:first-child{
  color:var(--text-hi);
  font-family:var(--font-display);
}
.pi-confidence{
  border:0;
  border-radius:var(--radius-m);
  background:var(--amber-soft);
}
.pi-confidence strong{
  font-family:var(--font-ui);
  letter-spacing:.04em;
}
.pi-section-grid{border-top:1px solid var(--divider);}
.workflow-prep{
  margin-top:40px;
}
body.workflow-review .workflow-prep > summary,
.workflow-prep > summary{
  background:var(--surface-1);
  border:0;
}
.workflow-prep > summary > span:first-child::before{content:none;}
.professional-tools-intro{
  border:0;
  border-radius:var(--radius-m);
  background:var(--amber-soft);
  color:var(--text);
}
.lab-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:4px;
  padding:4px;
  margin:0 0 18px;
  background:var(--surface-2);
  border-radius:var(--radius-m);
}
.lab-tab{
  border:0;
  min-height:40px;
  border-radius:10px;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--font-ui);
  font-weight:700;
  cursor:pointer;
}
.lab-tab.is-active{
  background:var(--surface-3);
  color:var(--text-hi);
  box-shadow:var(--shadow-1);
}
.lab-pane:not(.is-active){
  display:none!important;
}
.ref-health-compact{
  box-shadow:none;
  background:var(--amber-soft);
}
.ref-health-ready-mark{
  border-color:color-mix(in srgb, var(--positive) 70%, transparent);
  color:var(--positive);
}
.gibbstone-toast{
  background:var(--surface-3);
  border:0;
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-2);
  font-family:var(--font-ui);
  letter-spacing:0;
}
footer{
  max-width:1120px;
  margin:0 auto;
  padding:48px 24px 0;
  font-family:var(--font-ui);
  font-size:.8125rem;
  letter-spacing:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--text-dim);
}
.footer-device{
  margin:0;
}
.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 10px;
  color:var(--text-dim);
}
.footer-links a{
  color:var(--text-dim)!important;
  text-decoration:none!important;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover{
  color:var(--amber)!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
}
.setup-overlay,
#aboutOverlay,
#helpOverlay,
#bugOverlay{
  background:#000A!important;
  backdrop-filter:blur(12px);
}
.setup-card,
#aboutOverlay > div,
#helpOverlay > div,
#bugOverlay > div{
  background:var(--surface-1)!important;
  border:0!important;
  border-radius:var(--radius-l)!important;
  box-shadow:var(--shadow-2)!important;
  box-sizing:border-box;
}
.setup-card h2,
#aboutOverlay h2,
#helpOverlay h2,
#bugOverlay h2{
  color:var(--text-hi)!important;
}
.setup-grid label,
.setup-check{
  font-family:var(--font-ui);
  text-transform:none;
  letter-spacing:0;
}
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}
@media(max-width:720px){
  header{padding:calc(34px + env(safe-area-inset-top, 0px)) 20px 28px;}
  main{padding:20px 16px 0;}
  .dropzones{grid-template-columns:1fr;gap:16px;}
  .dropzone{min-height:260px;}
  .dz-frame{min-height:190px;}
  .action-row button{width:100%;}
  .refine-match-body{grid-template-columns:1fr;}
  .lab-tabs{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  h1{font-size:2.35rem;}
  .dropzones{grid-template-columns:1fr;}
}

/* PATCH-035: restraint pass over UI 2.0 */
:root{
  --bg:#141516;
  --surface-1:#1B1D1F;
  --surface-2:#232629;
  --surface-3:#2B2F33;
  --divider:#FFFFFF12;
  --amber-soft:#D9A05B14;
  --text-hi:#F1EEE8;
  --text:#C9C5BE;
  --text-dim:#8B8D8F;
  --panel:var(--surface-1);
  --panel-2:var(--surface-2);
}
html,body{
  background:
    radial-gradient(circle at 50% -260px, rgba(217,160,91,.045), transparent 460px),
    var(--bg);
}
body::before{
  background:linear-gradient(180deg, rgba(255,255,255,.018), transparent 220px);
}
header p{
  color:var(--text);
}
.dropzone,
.recipe,
.review-actions,
.workflow-prep > summary,
.refine-match > summary,
.more-export-options > summary,
.refine-guidance{
  background:var(--surface-1);
}
.dz-frame{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 8px, transparent 8px 16px),
    var(--surface-2);
}
.dz-frame:hover{
  background:linear-gradient(135deg, rgba(217,160,91,.06), transparent 44%), var(--surface-2);
}
.dz-title,
.recipe-head h2,
.workflow-prep > summary > span:first-child,
.refine-match > summary > span:first-child,
.more-export-options > summary > span:first-child,
.photo-intelligence-panel .recipe-head h2{
  color:var(--text-hi);
}
.wordmark-accent,
.dz-empty .plus,
.workflow-prep > summary::after,
.refine-match > summary::after,
.more-export-options > summary::after{
  color:var(--amber);
}
.workflow-prep > summary > span:first-child::before{content:none;}
.photo-intelligence-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.025), var(--surface-1) 120px);
}
.professional-tools-intro,
.pi-confidence,
.ref-health-compact{
  background:rgba(217,160,91,.075);
}
.lab-tab.is-active{
  background:var(--surface-3);
  color:var(--text-hi);
}
.lab-pane.is-active{
  display:block!important;
}
.editing-workspace .controls{
  display:grid;
  gap:12px;
  padding:4px 0 0;
}
.refine-match-body{
  grid-template-columns:1fr;
  gap:16px;
}
.refine-guidance{
  max-width:760px;
}
.editing-workspace .control-row{
  display:grid;
  grid-template-columns:92px minmax(120px,1fr) 48px;
  gap:14px;
  align-items:center;
  margin:0;
}
.editing-workspace .control-row label{
  width:auto;
  color:var(--text-dim);
  font-size:.75rem;
  line-height:1.2;
}
.editing-workspace .control-row input[type=range]{
  width:100%;
}
.editing-workspace .control-row input:not([type=range]){
  grid-column:2 / 4;
  min-height:36px;
}
.editing-workspace .control-row .val{
  width:auto;
  justify-self:end;
  color:var(--text-hi);
  font-size:.75rem;
}
input[type=range]{
  height:28px;
  padding:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--amber) 0 var(--range-fill, 50%), var(--surface-3) var(--range-fill, 50%) 100%) center/100% 6px no-repeat;
  accent-color:var(--amber);
  cursor:pointer;
  touch-action:pan-y;
  transition:filter var(--dur-fast) var(--ease-out);
}
input[type=range]:hover{
  filter:brightness(1.08);
}
input[type=range]:active{
  cursor:grabbing;
}
input[type=range]::-webkit-slider-thumb{
  width:20px;
  height:20px;
  border:3px solid var(--surface-1);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb{
  transform:scale(1.08);
  box-shadow:0 2px 10px #0008;
}
input[type=range]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:var(--surface-3);
}
input[type=range]::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:var(--amber);
}
input[type=range]::-moz-range-thumb{
  width:20px;
  height:20px;
  border:3px solid var(--surface-1);
  border-radius:50%;
  background:var(--amber);
}
#libraryPanel .btn-row{
  display:flex;
  gap:10px;
  align-items:center;
}
#libraryPanel .control-row{
  display:grid;
  grid-template-columns:84px minmax(180px,1fr) auto;
  gap:12px;
  align-items:center;
}
#libraryPanel .control-row label{
  width:auto;
}
#libraryPanel .control-row button.secondary{
  flex:0 0 auto!important;
  min-width:120px;
}
#libraryPanel .btn-row button.secondary{
  flex:0 0 auto;
  min-width:0;
  min-height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.camera-export-section,
.camera-export-row{
  display:contents;
}
.camera-export-heading,
.camera-export-empty,
.camera-export-label,
.camera-export-download{
  display:none;
}
.camera-export-desktop-label{
  display:inline;
}
.gibbstone-file-picker,
.batch-output-size-label{
  display:none;
}
.batch-output-size-field{
  display:contents;
}
.look-card{
  border:0!important;
  background:var(--surface-2)!important;
  border-radius:var(--radius-s);
  padding:8px!important;
  box-shadow:none;
  width:120px;
  min-width:0;
}
.look-card img{
  border-radius:6px;
}
.look-card-label{
  color:var(--text-hi)!important;
  font-family:var(--font-ui)!important;
  font-size:.75rem!important;
  padding:8px 2px 6px!important;
}
.look-card-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 36px;
  gap:8px!important;
}
.look-card-actions button.secondary{
  min-height:36px;
  min-width:0!important;
  width:auto;
  border-radius:var(--radius-s);
  padding:0 10px!important;
}
.look-card-delete{
  flex:0 0 36px!important;
  width:36px;
  min-width:36px!important;
  padding:0!important;
}
.diagnostics-empty{
  margin:0 20px 16px;
  padding:20px;
  border-radius:var(--radius-m);
  background:var(--surface-2);
  color:var(--text-dim);
  font-size:.9375rem;
  line-height:1.55;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
header .help-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
header .help-btn .icon{
  width:17px;
  height:17px;
}
#aboutCloseBtn,
#helpCloseBtn,
#bugCloseBtn,
.setup-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#aboutCloseBtn .icon,
#helpCloseBtn .icon,
#bugCloseBtn .icon,
.setup-close .icon{
  width:18px;
  height:18px;
}
button.secondary .icon{
  width:17px;
  height:17px;
}
body.has-source .action-row button.secondary.mini .icon{
  width:20px;
  height:20px;
}
.look-card-delete{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}
.look-card-delete .icon{
  width:15px;
  height:15px;
}
.workflow-prep > summary::after,
.refine-match > summary::after,
.more-export-options > summary::after{
  content:''!important;
  display:block;
  width:8px;
  height:8px;
  margin-top:2px;
  border-right:1.5px solid var(--amber);
  border-bottom:1.5px solid var(--amber);
  transform:rotate(45deg);
  transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.workflow-prep[open] > summary::after,
.refine-match[open] > summary::after,
.more-export-options[open] > summary::after{
  transform:rotate(-135deg);
}
.compare{
  cursor:ew-resize;
}
.compare:hover .wipe-handle{
  background:var(--amber);
}
.compare:focus-visible{
  outline:2px solid color-mix(in srgb, var(--amber) 60%, transparent);
  outline-offset:4px;
}
.compare.is-dragging{
  cursor:grabbing;
}
.compare.is-dragging .wipe-handle{
  background:var(--amber);
}
.wipe-handle{
  position:absolute;
  top:0;
  bottom:0;
  transform:translateX(-1px);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  width:2px;
  background:color-mix(in srgb, var(--amber) 74%, white);
}
.wipe-handle::after{
  content:none!important;
}
.wipe-handle-knob{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:46px;
  height:46px;
  border:1px solid color-mix(in srgb, var(--amber) 42%, transparent);
  border-radius:50%;
  background:color-mix(in srgb, var(--surface-3) 92%, transparent);
  color:var(--text-hi);
  box-shadow:0 8px 24px #0008, 0 1px 0 rgba(255,255,255,.08) inset;
  backdrop-filter:blur(10px);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wipe-handle-knob .icon{
  width:25px;
  height:19px;
  stroke-width:2;
}
.compare:hover .wipe-handle-knob,
.compare:focus-visible .wipe-handle-knob{
  border-color:var(--amber);
  color:var(--amber);
  transform:scale(1.04);
  box-shadow:0 10px 28px #0009, 0 0 0 4px rgba(217,160,91,.08);
}
.compare.is-dragging .wipe-handle-knob{
  border-color:var(--amber);
  color:var(--amber);
  transform:scale(.98);
  box-shadow:0 6px 18px #0009, 0 0 0 5px rgba(217,160,91,.12);
}
.review-workspace > .compare{
  /* GS-032: shrink-wrap the canvas (fit-content) so the box still equals the
     bitmap edge-to-edge — the wipe handle and the composite clip are the same
     fraction of each, so box==bitmap must hold (see GS-027). The balanced-area
     width stays as an UPPER bound, so landscape sizing is unchanged.
     flex-shrink:0 — the review column is a flex box; without this the async
     "look description" (reliability, description text, intelligence panels)
     appearing below squeezes the compare's flex allotment and overflow:hidden
     re-clips a tall frame. Holding its size makes the column SCROLL for the
     description instead of eating the photo. */
  width:fit-content;
  max-width:min(var(--comparison-workspace-width, 100%), 100%);
  flex:0 0 auto;
  margin-left:auto;
  margin-right:auto;
}
.review-workspace > .compare canvas{
  /* GS-032: a tall (portrait) frame used to render at its full natural height
     and get clipped by .compare's overflow:hidden once the flex layout
     squished the box in a short window — so the photo's bottom vanished and
     the toolbar sat at the clip line (read as "toolbar covering the photo").
     Cap the height to the space left under the header/toggle/tools and let
     width follow, so the whole frame always fits, scaled, aspect intact. */
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 300px);
}
body.workflow-review .dropzones{
  width:82%;
  max-width:920px;
  margin-inline:auto;
  gap:18px;
  opacity:.9;
  transition:width var(--dur-med) var(--ease-out), max-width var(--dur-med) var(--ease-out), gap var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
body.workflow-review .dropzone{
  min-height:264px;
  padding:14px;
  border-radius:var(--radius-m);
  background:color-mix(in srgb, var(--surface-1) 88%, var(--bg));
  box-shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.18);
  transition:min-height var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
body.workflow-review .dz-title{
  font-size:1.05rem;
  color:var(--text);
}
body.workflow-review .dz-frame{
  min-height:198px;
  border-radius:var(--radius-m);
  border-color:color-mix(in srgb, var(--divider) 78%, transparent);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.011) 0 8px, transparent 8px 16px),
    color-mix(in srgb, var(--surface-2) 82%, var(--bg));
}
body.workflow-review .dz-empty{
  font-size:.82rem;
}
body.workflow-review canvas.hist{
  height:32px;
  opacity:.48;
}
body.has-source .action-row button.secondary.mini{
  border:1px solid color-mix(in srgb, var(--divider) 72%, transparent);
  border-radius:var(--radius-s);
  width:42px;
  height:42px;
  min-width:42px;
  box-shadow:var(--shadow-1);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
body.has-source .action-row button.secondary.mini:hover{
  border-color:color-mix(in srgb, var(--amber) 58%, transparent);
  background:var(--surface-3);
  color:var(--amber);
  transform:translateY(-1px);
}
body.has-source .action-row button.secondary.mini:active{
  transform:translateY(0);
}
body.has-source .action-row button.secondary.mini .icon{
  width:23px;
  height:23px;
  stroke-width:2;
}
.workflow-prep > summary:hover::after,
.refine-match > summary:hover::after,
.more-export-options > summary:hover::after{
  border-color:var(--amber);
}
@media(max-width:720px){
  body.workflow-review .dropzones{
    width:100%;
    max-width:none;
    gap:12px;
  }
  body.workflow-review .dropzone{
    min-height:220px;
    padding:14px;
  }
  body.workflow-review .dz-frame{
    min-height:160px;
  }
  .setup-overlay{
    padding:16px;
    box-sizing:border-box;
    overflow-x:hidden;
  }
  .setup-card{
    width:min(326px, calc(100% - 32px));
    max-width:min(326px, calc(100% - 32px));
    margin:24px 0;
  }
  .setup-card h2,
  .setup-card p{
    overflow-wrap:anywhere;
  }
  .setup-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .setup-actions button{
    width:100%;
    min-width:0;
  }
  .editing-workspace .control-row{
    grid-template-columns:84px minmax(0,1fr) 42px;
    gap:10px;
  }
  #libraryPanel .btn-row{
    justify-content:flex-start;
  }
}

/* MOBILE-001: phone layout foundation */
@media (max-width:768px), (max-width:900px) and (max-height:520px) and (orientation:landscape){
  html,
  body{
    overflow-x:hidden;
  }

  body{
    padding-bottom:calc(44px + env(safe-area-inset-bottom, 0px));
  }

  header{
    padding-left:max(18px, env(safe-area-inset-left, 0px));
    padding-right:max(18px, env(safe-area-inset-right, 0px));
  }

  main{
    width:100%;
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px));
  }

  button.primary,
  button.secondary,
  .lab-tab{
    min-height:52px;
    width:100%;
    min-width:0;
    padding:0 16px;
    line-height:1.2;
    white-space:normal;
  }

  button.secondary.mini,
  body.has-source .action-row button.secondary.mini{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }

  input:not([type=range]),
  select,
  textarea{
    min-height:48px;
    width:100%!important;
    max-width:100%;
    font-size:16px!important;
    padding:12px 13px!important;
  }

  input[type=file]{
    min-height:48px;
    width:100%!important;
    max-width:100%;
    padding:12px 0!important;
    line-height:1.4;
  }

  .dropzones{
    gap:18px;
  }

  .dropzone{
    min-height:0;
    padding:16px;
  }

  .dz-label{
    gap:8px;
    align-items:flex-start;
  }

  .dz-frame{
    min-height:210px;
  }

  .action-row,
  .utility-action-row{
    display:grid!important;
    grid-template-columns:1fr;
    gap:12px!important;
    padding-top:22px;
  }

  .ready-match-row #matchBtn{
    min-width:0;
  }

  .recipe,
  .review-actions,
  .workflow-prep,
  .editing-workspace,
  .photo-intelligence-panel{
    margin-top:24px;
  }

  .recipe-head{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
    padding:18px;
  }

  .recipe-head h2{
    line-height:1.18;
  }

  .recipe-body{
    padding:12px 18px 20px;
  }

  .recipe-note{
    font-size:.875rem;
    line-height:1.6;
  }

  .workflow-prep > summary,
  .refine-match > summary,
  .more-export-options > summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px 12px;
    padding:18px;
  }

  .workflow-prep > summary .eyebrow,
  .refine-match > summary .eyebrow,
  .more-export-options > summary .eyebrow{
    grid-column:1 / -1;
    min-width:0;
    line-height:1.35;
  }

  .workflow-prep-body{
    padding-top:16px;
  }

  .professional-tools-intro{
    margin-bottom:18px;
    padding:14px 16px;
  }

  .lab-tabs{
    grid-template-columns:1fr!important;
    gap:10px;
    padding:0;
    margin-bottom:22px;
    background:transparent;
  }

  .lab-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-m);
    background:var(--surface-2);
    color:var(--text-hi);
    font-size:.9375rem;
  }

  .lab-tab.is-active{
    background:var(--surface-3);
  }

  #cameraPanel,
  #lookDnaPanel,
  #batchPanel,
  #libraryPanel{
    margin-top:22px!important;
  }

  #cameraPanel .control-row,
  #batchPanel .control-row,
  #refPresetPanel .control-row,
  #libraryPanel .control-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    gap:10px!important;
    margin-bottom:18px;
    padding-top:0!important;
  }

  #cameraPanel .control-row label,
  #batchPanel .control-row label,
  #refPresetPanel .control-row label,
  #libraryPanel .control-row label,
  .control-row label{
    width:auto!important;
    min-width:0;
    line-height:1.3;
  }

  #cameraPanel .gibbstone-file-control-row > label{
    display:none;
  }

  #cameraPanel .gibbstone-native-file-input,
  #batchPanel .gibbstone-native-file-input{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-height:0!important;
    margin:-1px!important;
    padding:0!important;
    border:0!important;
    opacity:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  #cameraPanel .gibbstone-file-picker,
  #batchPanel .gibbstone-file-picker{
    display:grid;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    padding:14px;
    border:1px solid var(--divider);
    border-radius:var(--radius-s);
    background:var(--surface-2);
  }

  #cameraPanel .gibbstone-file-title,
  #batchPanel .gibbstone-file-title,
  #batchPanel .batch-output-size-label{
    display:block;
    color:var(--text-hi);
    font-family:var(--font-ui);
    font-size:.9rem;
    font-weight:700;
    line-height:1.25;
  }

  #cameraPanel .gibbstone-file-button,
  #batchPanel .gibbstone-file-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    box-sizing:border-box;
    border:1px solid var(--divider);
    border-radius:var(--radius-s);
    background:var(--surface-3);
    color:var(--text-hi);
    cursor:pointer;
    font-size:.9375rem;
    font-weight:700;
    line-height:1.2;
    padding:0 16px;
    text-align:center;
  }

  #cameraPanel .gibbstone-file-status,
  #batchPanel .gibbstone-file-status{
    color:var(--text-dim);
    font-size:.875rem;
    line-height:1.35;
    text-align:center;
  }

  #batchPanel .batch-output-size-field{
    display:grid;
    justify-items:center;
    gap:8px;
    width:100%;
    margin:2px 0 8px;
  }

  #batchPanel .batch-output-size-field select{
    width:min(190px, 100%)!important;
    text-align:center;
    text-align-last:center;
  }

  #cameraPanel .control-row button.secondary,
  #batchPanel .control-row button.secondary,
  #refPresetPanel .control-row button.secondary,
  #libraryPanel .control-row button.secondary,
  #libSaveBtn{
    width:100%!important;
    min-width:0!important;
    min-height:52px;
    flex:auto!important;
  }

  #cameraPanel .btn-row,
  #lookDnaPanel .btn-row,
  #batchPanel .btn-row,
  #libraryPanel .btn-row,
  .more-export-options .btn-row{
    display:grid!important;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
    margin-top:18px;
  }

  #cameraPanel .btn-row button.secondary,
  #lookDnaPanel .btn-row button.secondary,
  #batchPanel .btn-row button.secondary,
  #libraryPanel .btn-row button.secondary,
  .more-export-options .btn-row button.secondary{
    width:100%;
    min-width:0;
    min-height:52px;
    padding:0 16px;
  }

  #libGrid,
  #cameraGrid,
  #batchGrid{
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:12px!important;
  }

  .look-card{
    width:100%!important;
    padding:12px!important;
  }

  .look-card img{
    max-height:220px;
    object-fit:cover;
  }

  .look-card-label{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.35;
    padding:10px 2px!important;
  }

  .look-card-actions{
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:10px!important;
  }

  .look-card-actions button.secondary,
  .look-card-delete{
    min-height:48px!important;
  }

  .look-card-delete{
    width:48px!important;
    min-width:48px!important;
  }

  #cameraGrid > div{
    border:0!important;
    border-radius:var(--radius-s);
    background:var(--surface-2)!important;
    padding:14px!important;
  }

  #lookDnaReadout .recipe-item,
  #refPresetReadout .recipe-item,
  #diagnosticsBody .recipe-item{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    padding:12px 0;
  }

  #lookDnaReadout .recipe-item .k,
  #refPresetReadout .recipe-item .k,
  #diagnosticsBody .recipe-item .k{
    font-weight:700;
  }

  #lookDnaReadout .recipe-item .v,
  #refPresetReadout .recipe-item .v,
  #diagnosticsBody .recipe-item .v{
    font-size:.875rem;
    line-height:1.45;
    overflow-wrap:anywhere;
  }

  .review-actions{
    padding:18px;
  }

  .review-next-action{
    margin-top:16px;
    padding-top:16px;
  }

  .refine-match-body{
    gap:18px;
  }

  .editing-workspace .controls{
    gap:16px;
  }

  .editing-workspace .control-row{
    grid-template-columns:1fr 58px;
    gap:8px 12px;
    align-items:center;
  }

  .editing-workspace .control-row label{
    grid-column:1 / 2;
  }

  .editing-workspace .control-row .val{
    grid-column:2 / 3;
  }

  .editing-workspace .control-row input[type=range],
  .editing-workspace .control-row input:not([type=range]){
    grid-column:1 / -1;
  }

  .compare{
    border-radius:var(--radius-m);
  }

  .wipe-handle-knob{
    width:52px;
    height:52px;
  }

  #cameraPanel .camera-export-section{
    display:block;
    margin-top:8px;
    padding-top:18px;
    border-top:1px solid var(--divider);
  }

  #cameraPanel .camera-export-heading{
    display:block;
    color:var(--text-hi);
    font-family:var(--font-ui);
    font-size:.95rem;
    font-weight:700;
    line-height:1.25;
    margin-bottom:6px;
  }

  #cameraPanel .camera-export-empty{
    display:block;
    color:var(--text-dim);
    font-size:.875rem;
    line-height:1.5;
    padding:8px 0 2px;
  }

  #cameraPanel.has-camera-pack .camera-export-empty{
    display:none;
  }

  #cameraPanel:not(.has-camera-pack) .camera-export-row{
    display:none;
  }

  #cameraPanel .camera-export-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:11px 0;
    border-bottom:1px solid var(--divider);
  }

  #cameraPanel .camera-export-row:last-child{
    border-bottom:0;
    padding-bottom:0;
  }

  #cameraPanel .camera-export-label{
    display:block;
    color:var(--text);
    font-size:.875rem;
    font-weight:700;
    line-height:1.3;
  }

  #cameraPanel .camera-export-row button.secondary{
    width:auto!important;
    min-width:96px!important;
    min-height:40px!important;
    padding:0 14px!important;
    border-radius:var(--radius-s);
    font-size:.8125rem;
    flex:0 0 auto!important;
  }

  #cameraPanel .camera-export-row button.secondary:disabled{
    opacity:.46;
  }

  #cameraPanel .camera-export-download{
    display:inline;
  }

  #cameraPanel .camera-export-desktop-label{
    display:none;
  }
}

/* ============================================================
   CleverGibbs redesign layer — v4.2.0
   Final cascade layer. Aligns the app with the clevergibbs.com
   landing page: warm charcoal + amber palette, Fraunces display,
   bordered cards, landing-style buttons and pills, glassy
   overlays, hero header. Supersedes the v4.1.0 alignment block.
   No rules above this line were changed.
   ============================================================ */

/* --- palette: restore the warm CleverGibbs tones --- */
:root{
  --bg:#161513;
  --surface-1:#1E1C19;
  --surface-2:#26231F;
  --surface-3:#2E2A25;
  --divider:#FFFFFF14;
  --amber-soft:#D9A05B1F;
  --text-hi:#F2EFEA;
  --text:#C9C4BC;
  --text-dim:#8C877E;
  --panel:var(--surface-1);
  --panel-2:var(--surface-2);
}
html{scroll-behavior:smooth;}
html,body{
  background:
    radial-gradient(ellipse 75% 42% at 50% -6%, rgba(217,160,91,.10), transparent 70%),
    var(--bg);
}
body::before{
  background:linear-gradient(180deg, rgba(255,255,255,.015), transparent 220px);
}
::selection{background:var(--amber);color:#1a1409;}

/* --- header: landing hero treatment --- */
.hero-kicker{
  display:block;
  font-family:var(--font-data);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:16px;
}
h1{
  font-style:normal;
  color:var(--text-hi);
  letter-spacing:-.01em;
}
.wordmark-accent{color:var(--amber);}
header p{color:var(--text-dim);}

/* --- buttons: landing language (Inter, sentence case, lift) --- */
button.primary{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:0;
  text-transform:none;
  border-radius:var(--radius-s);
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
button.primary:hover:not(:disabled){
  background:var(--amber-hi);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(217,160,91,.22);
}
button.primary:active:not(:disabled){
  transform:translateY(0);
  box-shadow:none;
}
button.secondary{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  border:1px solid var(--divider);
  border-radius:var(--radius-s);
  transition:border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
button.secondary:hover:not(:disabled){
  border-color:rgba(217,160,91,.55);
  color:var(--amber-hi);
  background:var(--amber-soft);
}
button.secondary.mini{font-size:12px;}

/* --- cards: bordered, warm, softly raised --- */
.dropzone,
.recipe,
.review-actions,
.workflow-prep > summary,
.refine-match > summary,
.more-export-options > summary,
.refine-guidance,
.setup-card{
  background:var(--surface-1);
  border:1px solid var(--divider);
}
.setup-card{border-radius:var(--radius-l);}
.workflow-prep > summary,
.refine-match > summary,
.more-export-options > summary{
  transition:border-color var(--dur-med) var(--ease-out),
             background var(--dur-med) var(--ease-out);
}
.workflow-prep > summary:hover,
.refine-match > summary:hover,
.more-export-options > summary:hover{
  border-color:rgba(217,160,91,.4);
}
.workflow-prep[open] > summary,
.refine-match[open] > summary,
.more-export-options[open] > summary{
  border-color:rgba(217,160,91,.3);
}
.dz-frame{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 8px, transparent 8px 16px),
    var(--surface-2);
  transition:border-color var(--dur-med) var(--ease-out);
}
.dz-frame:hover{border-color:rgba(217,160,91,.35);}

/* --- kickers / eyebrows --- */
.eyebrow{letter-spacing:.18em;}
header .eyebrow{color:var(--amber);}

/* --- tabs: landing pill chips --- */
.lab-tab{
  border:1px solid transparent;
  border-radius:999px;
  font-weight:600;
  transition:color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.lab-tab:hover{color:var(--text-hi);}
.lab-tab.is-active{
  background:var(--amber-soft);
  color:var(--amber-hi);
  border-color:rgba(217,160,91,.35);
  box-shadow:none;
}

/* --- overlays: glassy, blurred, landing-grade modals --- */
.setup-overlay,
#aboutOverlay,
#helpOverlay,
#bugOverlay{
  background:rgba(18,16,13,.6);
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
#aboutOverlay > div,
#helpOverlay > div,
#bugOverlay > div{
  box-shadow:var(--shadow-2);
}

/* --- form fields: amber focus ring --- */
input[type=text]:focus,
input:not([type]):focus,
select:focus,
textarea:focus{
  border-color:rgba(217,160,91,.55)!important;
}
:where(button, summary, a):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* --- sliders --- */
input[type=range]::-webkit-slider-thumb{
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
input[type=range]::-webkit-slider-thumb:hover{
  background:var(--amber-hi);
  transform:scale(1.12);
}

/* --- footer: landing treatment --- */
footer{
  border-top:1px solid var(--divider);
  margin-top:56px;
  padding-top:34px;
  gap:10px;
}
.footer-wordmark{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1rem;
  color:var(--text-hi);
  letter-spacing:.01em;
}

/* --- status line --- */
.status{letter-spacing:.06em;}

/* --- 4.6.0 flow release --- */

/* dropzone footnote: privacy line + sample-photo first run */
.dropzone-footnote{
  text-align:center;
  margin-top:14px;
}
.dropzone-footnote p{
  margin:4px 0;
  font-family:var(--font-ui);
  font-size:.8125rem;
  color:var(--text-dim);
}
.privacy-line{letter-spacing:.02em;}
.sample-line a{
  color:var(--amber-hi);
  text-decoration:underline;
  text-underline-offset:3px;
}
.sample-line a:hover{color:var(--amber);}
body.has-reference .sample-line,
body.has-source .sample-line,
body.workflow-review .sample-line{display:none;}
body.workflow-review .dropzone-footnote{display:none;}

/* rotate-only utility row: buttons are absolutely positioned, row itself is a thin anchor */
.utility-action-row{padding:0!important;margin:0;}

/* match intent segmented control */
.ready-match-row{flex-wrap:wrap;}
.match-intent{
  display:flex;
  width:100%;
  justify-content:center;
  gap:6px;
  margin-bottom:12px;
}
.match-intent button{
  min-height:34px;
  padding:6px 16px;
  border:1px solid var(--divider);
  border-radius:999px;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--font-ui);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.match-intent button:hover{color:var(--text-hi);border-color:var(--text-dim);}
.match-intent button.is-active{
  background:color-mix(in srgb, var(--amber) 16%, transparent);
  border-color:var(--amber);
  color:var(--amber-hi);
}

/* engine status chip */
.engine-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  border:1px solid var(--divider);
  border-radius:999px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  white-space:nowrap;
}
.engine-status::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--text-dim);
  flex-shrink:0;
}
.engine-status.is-ready::before{background:#7fbf7f;}
.engine-status.is-busy::before{background:var(--amber);animation:enginePulse 1.1s ease-in-out infinite;}
.engine-status.is-off::before{background:#c9695f;}
@keyframes enginePulse{50%{opacity:.35;}}

/* verdict + skin strip under the compare view */
.match-read{margin-top:12px;}
.match-read p{
  margin:6px 0;
  font-family:var(--font-ui);
  font-size:.875rem;
  line-height:1.5;
  color:var(--text-dim);
}
.pi-verdict{color:var(--text);}
.pi-verdict a{
  color:var(--amber-hi);
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.skin-note{
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;
  color:var(--amber-hi);
  letter-spacing:.02em;
}
.skin-note::before{content:'\25CF\00a0';font-size:.6rem;vertical-align:1px;}

/* --- 4.7.0 colorist release --- */

/* compare tools row */
.compare-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.compare-tools button{
  min-height:32px;
  padding:5px 13px;
  border:1px solid var(--divider);
  border-radius:999px;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--font-ui);
  font-size:.75rem;
  font-weight:600;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.compare-tools button:hover{color:var(--text-hi);border-color:var(--text-dim);}
.compare-tools button.is-active{
  background:color-mix(in srgb, var(--amber) 16%, transparent);
  border-color:var(--amber);
  color:var(--amber-hi);
}
.compare-mode{
  display:inline-flex;
  gap:0;
  border:1px solid var(--divider);
  border-radius:999px;
  overflow:hidden;
}
.compare-mode button{
  border:0;
  border-radius:0;
}
.compare-mode button.is-active{border:0;}

/* flicker + sampling states on the compare surface */
.compare.mode-flicker .wipe-handle,
.compare.mode-flicker .tag{display:none;}
.compare.mode-flicker{cursor:pointer;}
.compare.mode-flicker::after{
  content:'matched — tap to flick';
  position:absolute;
  right:10px;
  top:10px;
  padding:4px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  color:var(--text-hi);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}
.compare.mode-flicker.show-original::after{content:'original — tap to flick';}
.compare.is-sampling{cursor:crosshair;outline:2px solid var(--amber);outline-offset:2px;}

/* fine control */
.fine-control{
  margin-top:14px;
  border:0;
  border-radius:var(--radius-m);
  background:var(--surface-2);
}
.fine-control > summary{
  padding:12px 16px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-ui);
  font-size:.8125rem;
  font-weight:600;
  color:var(--text-hi);
  list-style:none;
}
.fine-control > summary::-webkit-details-marker{display:none;}
.fine-control-body{padding:2px 16px 14px;}
.fine-control-intro{padding-top:0;}
.fine-zone-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:14px 0 6px;
}
.fine-zone-hint{
  font-family:var(--font-ui);
  font-size:.75rem;
  color:var(--text-dim);
}
.fine-zone-grid{display:flex;flex-direction:column;gap:6px;}
.fine-zone-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.fine-zone-row .fine-zone-label{
  width:74px;
  flex-shrink:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.fine-zone-row label{
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:var(--text-dim);
  min-width:0;
}
.fine-zone-row input[type=range]{flex:1;min-width:0;}
.fine-zone-row .val{width:52px;text-align:right;flex-shrink:0;}

/* --- 4.7.1 mobile spacing + length pass --- */

/* header: on narrow screens the actions row (engine chip + buttons) gets its
   own line so the tagline can span the full width instead of being squeezed */
@media(max-width:720px){
  header{
    flex-wrap:wrap;
    row-gap:18px;
  }
  .header-actions{
    order:-1;
    width:100%;
    justify-content:flex-end;
    align-items:center;
  }
  header > div:first-of-type{width:100%;}
  header p{max-width:none;}
  .engine-status{margin-right:auto;}
}

/* collapsible result panels: Photo Intelligence + Estimated Lightroom settings */
.panel-drawer > summary{
  cursor:pointer;
  list-style:none;
  position:relative;
}
.panel-drawer > summary::-webkit-details-marker{display:none;}
.panel-drawer > summary::after{
  content:'';
  position:absolute;
  right:20px;
  top:50%;
  width:8px;
  height:8px;
  border-right:1.5px solid var(--text-dim);
  border-bottom:1.5px solid var(--text-dim);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--dur-fast) var(--ease-out);
}
.panel-drawer[open] > summary::after{
  transform:translateY(-30%) rotate(225deg);
}
.panel-drawer > summary .eyebrow{margin-right:22px;}
.panel-drawer:not([open]) > summary.recipe-head{border-bottom:0;}

/* the reference-only journey is setup furniture — hide it while reviewing a match */
body.workflow-review #refOnlyPath{display:none;}

/* --- 4.7.2 header centering + rotate buttons in-frame --- */

/* rotate controls live in the bottom-right corner of "Your frame" */
.rotate-controls{
  position:absolute;
  right:10px;
  bottom:10px;
  display:none;
  gap:8px;
  z-index:3;
}
body.has-source .rotate-controls{display:flex;}
.rotate-controls button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  border-radius:var(--radius-m);
  color:var(--text-hi);
  background:color-mix(in srgb, var(--surface-3) 84%, transparent);
  backdrop-filter:blur(8px);
}

/* mobile hero: centered, full width */
@media(max-width:720px){
  header > div:first-of-type{
    text-align:center;
  }
  header p{
    margin:0 auto;
  }
  header p span{
    display:inline;
  }
  header p span + span::before{
    content:' ';
  }
}

/* ============================================================
   GS-024 Console redesign layer — v5.0.0
   Final cascade layer. Dark instrument shell per
   docs/design/console-handoff.md: canvas #0b0b0c radial,
   rails #121315, cards #141517, single amber accent #e3a860,
   Archivo / Instrument Sans / IBM Plex Mono.
   No rules above this line were changed.
   ============================================================ */

:root{
  --bg:#0f0f10;
  --surface-1:#141517;
  --surface-2:#191b1d;
  --surface-3:#26282b;
  --divider:#1f2124;
  --line-2:#26282b;
  --line-3:#2a2c2f;
  --line-mute:#33363a;
  --amber:#e3a860;
  --amber-hover:#f0be82;
  --amber-soft:rgba(227,168,96,.10);
  --amber-tint-bg:#221c12;
  --amber-tint-line:#3a2f1a;
  --amber-tint-line-2:#4a3a24;
  --on-amber:#141517;
  --ok-dot:#6fae7a;
  --ok-text:#8ec39a;
  --text-hi:#e8e6e1;
  --text:#cfd0d2;
  --text-2:#b9bbbe;
  --text-3:#a7a9ac;
  --text-dim:#8a8d92;
  --text-faint:#7a7d81;
  --text-faint-2:#6a6d72;
  --text-faint-3:#5f6266;
  --panel:var(--surface-1);
  --panel-2:var(--surface-2);
  --amber-hi:var(--amber-hover);
  --font-display:'Archivo', sans-serif;
  --font-ui:'Instrument Sans', sans-serif;
  --font-data:'IBM Plex Mono', ui-monospace, monospace;
}

html,body{
  background:radial-gradient(120% 80% at 50% -10%, #17161a 0%, #0f0f10 55%, #0b0b0c 100%) fixed, #0b0b0c;
  color:var(--text);
  font-family:var(--font-ui);
}
body{
  padding-bottom:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body::before{content:none;}
::selection{background:var(--amber);color:var(--on-amber);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px;}

.console-mono-label,
.rail-label{
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-faint-3);
  font-weight:400;
}

/* --- toolbar --- */
header.console-toolbar{
  max-width:none;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 26px 14px;
  border-bottom:1px solid var(--divider);
  background:rgba(20,21,23,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:sticky;
  top:0;
  z-index:20;
}
.console-toolbar-left{display:flex;align-items:center;gap:34px;min-width:0;}
.console-toolbar-right{display:flex;align-items:center;gap:16px;}
.console-wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-.3px;
  color:var(--text-hi);
  white-space:nowrap;
}
.console-wordmark .wordmark-accent{color:var(--amber);}
.console-tabs{display:flex;gap:2px;}
.console-tab{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  border-radius:6px;
  padding:8px 15px;
  color:var(--text-dim);
  background:transparent;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.console-tab:hover{color:var(--text-hi);}
.console-tab.is-active{
  color:var(--amber);
  background:var(--amber-tint-bg);
  box-shadow:inset 0 0 0 1px var(--amber-tint-line);
}
.console-local-label{
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-faint-2);
  white-space:nowrap;
}
header.console-toolbar .engine-status{
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:6px 12px;
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--ok-text);
  background:transparent;
}
header.console-toolbar .engine-status::before{
  width:6px;height:6px;
  background:var(--text-dim);
  animation:gbpulse 2.4s ease-in-out infinite;
}
header.console-toolbar .engine-status.is-ready{color:var(--ok-text);}
header.console-toolbar .engine-status.is-ready::before{background:var(--ok-dot);}
header.console-toolbar .engine-status.is-busy{color:var(--amber-hi);}
header.console-toolbar .engine-status.is-off{color:#c9887f;}
header.console-toolbar .engine-status.is-off::before{background:#c9695f;animation:none;}
@keyframes gbpulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.console-icon-btn{
  width:26px;
  height:26px;
  min-width:26px;
  border:1px solid var(--line-2);
  background:transparent;
  color:var(--text-dim);
  box-shadow:none;
}
.console-icon-btn:hover{
  background:var(--surface-2);
  color:var(--amber);
  transform:none;
}
.console-icon-btn .icon{width:14px;height:14px;}

/* --- main frame --- */
main.console-main{
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
body.tab-match #consoleLibrary{display:none;}
body.tab-library #consoleMatch{display:none;}

/* --- match grid --- */
.console-match{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 320px;
  flex:1;
  min-height:0;
  align-items:stretch;
}
.console-rail{
  background:#121315;
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:26px;
  min-width:0;
}
.console-rail-left{border-right:1px solid var(--divider);}
.console-rail-right{border-left:1px solid var(--divider);gap:22px;}
.rail-section{display:flex;flex-direction:column;gap:11px;}
.rail-row{display:flex;justify-content:space-between;align-items:baseline;}
.rail-hint{font-family:var(--font-data);font-size:10px;color:var(--text-faint-2);}

/* workflow steps (driven purely by body classes) */
.rail-workflow{gap:12px;}
.wf-step{display:flex;align-items:center;gap:12px;}
.wf-badge{
  width:22px;height:22px;
  border-radius:6px;
  border:1px solid var(--line-mute);
  color:var(--text-dim);
  font-family:var(--font-data);
  font-size:11px;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wf-text{font-size:13px;color:var(--text-dim);}
body.has-reference .wf-step[data-step="ref"] .wf-badge,
body.has-source .wf-step[data-step="src"] .wf-badge,
body.workflow-review .wf-step[data-step="match"] .wf-badge{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--on-amber);
}
body.has-reference .wf-step[data-step="ref"] .wf-text,
body.has-source .wf-step[data-step="src"] .wf-text,
body.workflow-review .wf-step[data-step="match"] .wf-text{
  color:var(--text-hi);
}

/* rail dropzones */
.console-rail-left .dz-frame.rail-frame{
  min-height:0!important;
  flex:0 0 auto;
  border:1px dashed var(--line-mute);
  border-radius:9px;
  background:repeating-linear-gradient(135deg,#202225 0 10px,#191b1d 10px 20px);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.console-rail-left .rail-frame-ref{height:104px;}
.console-rail-left .rail-frame-src{height:128px;}
body.has-reference .rail-frame-ref,
body.has-source .rail-frame-src{border-style:solid;border-color:var(--line-3);}
body.has-reference .rail-frame-ref{border-color:var(--amber);}
.console-rail-left .dz-frame:hover{border-color:color-mix(in srgb, var(--amber) 60%, transparent);background:repeating-linear-gradient(135deg,#202225 0 10px,#191b1d 10px 20px);transform:none;}
.console-rail-left .dz-empty{
  font-size:11px;
  line-height:1.45;
  color:var(--text-faint);
  padding:8px;
}
.console-rail-left .dz-empty .plus{width:18px;height:18px;margin-bottom:4px;}
.console-rail-left .hist-wrap{margin-top:0;}
.console-rail-left canvas.hist{height:26px;opacity:.5;border-top:0;}
.console-rail-left .rotate-controls{right:8px;bottom:8px;gap:6px;}
.console-rail-left .rotate-controls button{
  width:32px;height:32px;min-width:32px;min-height:32px;
  border-radius:7px;
}
.console-rail-left .rotate-controls button .icon{width:16px;height:16px;}

/* camera readout */
.camera-readout{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line-2);
  border-radius:7px;
  padding:8px 10px;
  background:var(--surface-1);
  min-width:0;
}
.camera-readout-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ok-dot);
  flex:0 0 auto;
}
.camera-readout-label{
  font-family:var(--font-data);
  font-size:9px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--text-faint-2);
  flex:0 0 auto;
}
.camera-readout-model{
  font-family:var(--font-data);
  font-size:11px;
  color:var(--text);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.camera-readout-grey{
  font-family:var(--font-data);
  font-size:9px;
  color:var(--text-faint);
  flex:0 0 auto;
}
.camera-readout-grey.is-calibrated{color:var(--ok-text);}
body:not(.has-source) .camera-readout{display:none!important;}

/* rail saved looks */
.rail-looks-list{display:flex;flex-direction:column;gap:6px;}
.rail-look{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:var(--surface-2);
  border:0;
  border-radius:7px;
  padding:9px 11px;
  cursor:pointer;
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--text);
  text-align:left;
  min-width:0;
  transition:background var(--dur-fast) var(--ease-out);
}
.rail-look:hover{background:var(--surface-3);}
.rail-look-name{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rail-look-swatch{
  width:15px;height:15px;
  border-radius:4px;
  object-fit:cover;
  flex:0 0 auto;
  display:block;
}

/* rail footnote */
.rail-footnote{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.rail-footnote p{
  margin:0;
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.3px;
  line-height:1.7;
  color:var(--text-faint-3);
  text-align:left;
}
.rail-footnote .sample-line a{color:var(--amber);text-decoration:none;}
.rail-footnote .sample-line a:hover{color:var(--amber-hover);text-decoration:underline;text-underline-offset:3px;}

/* --- center column --- */
.console-center{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
  min-height:0;
}
.console-center .ready-match-row{
  padding:0;
  margin:0;
}
.console-center .status{min-height:0;}
.console-center .status:empty{display:none;}

/* viewer toolbar */
.viewer-toolbar{
  display:none;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
body.workflow-review .viewer-toolbar{display:flex;}
.view-toggle{display:flex;gap:6px;}
.view-toggle button{
  font-family:var(--font-data);
  font-size:11px;
  border-radius:6px;
  padding:7px 14px;
  cursor:pointer;
  border:1px solid var(--line-3);
  background:transparent;
  color:var(--text);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.view-toggle button:hover{border-color:var(--line-mute);color:var(--text-hi);}
.view-toggle button.is-active{
  color:var(--on-amber);
  background:var(--amber);
  border-color:var(--amber);
}
.reliability{
  display:none;
  align-items:center;
  gap:11px;
}
.reliability.has-score{display:flex;}
.reliability-label{
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-faint-3);
}
.reliability-track{
  width:100px;height:5px;
  border-radius:99px;
  background:var(--line-2);
  overflow:hidden;
}
.reliability-fill{
  width:0;height:100%;
  background:linear-gradient(90deg,#c99a5f,#e3a860);
  transition:width var(--dur-med) var(--ease-out);
}
.reliability-value{
  font-family:var(--font-data);
  font-size:11px;
  color:var(--ok-text);
}
.reliability-value.is-low{color:var(--amber-hi);}

/* viewer placeholder (setup only) */
.viewer-placeholder{
  flex:1;
  min-height:340px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:repeating-linear-gradient(135deg,#1a1c1f 0 18px,#16181a 18px 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
body.workflow-review .viewer-placeholder{display:none;}
.viewer-placeholder-note{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text-faint-3);
  text-align:center;
  line-height:1.9;
  max-width:340px;
}

/* result viewer */
section.result{margin-top:0;}
body.workflow-review section.result.show{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
  min-height:0;
}
.compare{
  border:1px solid var(--line-2);
  border-radius:12px;
  background:#0b0b0c;
  box-shadow:none;
}
.review-workspace > .compare{margin-left:auto;margin-right:auto;}
.tag{
  border-radius:5px;
  background:rgba(15,15,16,.7);
  backdrop-filter:blur(4px);
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:400;
  color:var(--text-dim);
  padding:4px 10px;
  top:16px;
}
.tag.left{left:16px;}
.tag.right{right:16px;}
/* Both labels sit amber; JS greys whichever image is being wiped away. */
.tag{color:var(--amber);transition:color .18s ease;}
.wipe-handle{background:var(--amber);}
.compare:hover .wipe-handle,
.compare.is-dragging .wipe-handle{background:var(--amber);}
.wipe-handle-knob{
  width:32px;height:32px;
  border:0;
  background:var(--amber);
  color:var(--on-amber);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  backdrop-filter:none;
}
.wipe-handle-knob .icon{width:18px;height:14px;stroke-width:2.4;}
.compare:hover .wipe-handle-knob,
.compare:focus-visible .wipe-handle-knob{
  border-color:transparent;
  color:var(--on-amber);
  background:var(--amber-hover);
  box-shadow:0 4px 18px rgba(0,0,0,.55);
}
.compare.is-dragging .wipe-handle-knob{
  border-color:transparent;
  color:var(--on-amber);
  background:var(--amber-hover);
  box-shadow:0 4px 18px rgba(0,0,0,.55);
}

/* compare tool pills */
.compare-tools{margin-top:0;}
.compare-tools button{
  min-height:0;
  padding:6px 11px;
  border-radius:5px;
  border:1px solid var(--line-3);
  font-family:var(--font-data);
  font-size:10px;
  font-weight:400;
  color:var(--text);
  background:rgba(15,15,16,.7);
}
.compare-tools button:hover{color:var(--text-hi);border-color:var(--line-mute);}
.compare-tools button.is-active{
  background:var(--amber-tint-bg);
  border-color:var(--amber-tint-line-2);
  color:var(--amber);
}
.compare-mode{border:1px solid var(--line-3);border-radius:5px;}
.compare-mode button{border:0;border-radius:0;}
.compare-mode button.is-active{border:0;}

.match-read{margin-top:0;}

/* read + recipe cards */
.console-read-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:16px;
  align-items:start;
}
.console-card,
.recipe.console-card{
  margin-top:0;
  border:1px solid var(--divider);
  border-radius:10px;
  background:var(--surface-1);
  box-shadow:none;
  overflow:hidden;
}
.console-read-grid .recipe-head,
.console-card .recipe-head{
  padding:14px 18px 10px;
  border-bottom:0;
}
.console-read-grid .recipe-head h2,
.console-card .recipe-head h2{
  font-family:var(--font-data);
  font-style:normal;
  font-weight:400;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-faint-3);
}
.console-read-grid .recipe-head .eyebrow{display:none;}
.console-read-grid .recipe-body,
.console-card .recipe-body{padding:0 18px 16px;}
.console-read-grid .panel-drawer > summary::after{right:18px;}
.photo-intelligence-panel.console-card{background:var(--surface-1);}
.photo-intelligence-panel.console-card .recipe-head h2{font-size:10px;color:var(--text-faint-3);}
.console-read-grid .pi-summary p,
.console-read-grid .pi-summary p:first-child{
  font-family:var(--font-ui);
  font-style:normal;
  font-size:13px;
  line-height:1.65;
  color:var(--text-3);
}
.console-read-grid .pi-summary{margin-bottom:18px;padding-bottom:14px;border-bottom-color:var(--divider);}
.console-read-grid .recipe-item{
  padding:6px 0;
  border-bottom:0;
  font-family:var(--font-data);
  font-size:11.5px;
}
.console-read-grid .recipe-item .k{color:var(--text-faint);}
.console-read-grid .recipe-item .v{font-family:var(--font-data);color:var(--text-hi);font-size:11.5px;}

/* reference health card */
#refHealthPanel.console-card .recipe-head{padding:14px 18px 8px;}
#refHealthPanel.console-card .recipe-head .eyebrow{display:inline;}

/* --- right rail --- */
.rail-head{display:flex;justify-content:space-between;align-items:center;}
.rail-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  color:var(--text-hi);
}
body:not(.workflow-review) .console-rail-right{opacity:.45;}
body:not(.workflow-review) .console-rail-right .rail-controls,
body:not(.workflow-review) .console-rail-right .fine-control,
body:not(.workflow-review) .console-rail-right .rail-export{pointer-events:none;}

.rail-controls{
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.rail-controls .control-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:'label val' 'input input';
  gap:9px 10px;
  align-items:baseline;
  margin:0;
}
.rail-controls .control-row label{
  grid-area:label;
  width:auto;
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-2);
  font-weight:400;
}
.rail-controls .control-row input{grid-area:input;}
.rail-controls .control-row .val{
  grid-area:val;
  width:auto;
  font-family:var(--font-data);
  font-size:11px;
  color:var(--amber);
  text-align:right;
}
.rail-controls input[type=range]{
  height:18px;
  background:linear-gradient(90deg, var(--amber) 0 var(--range-fill, 50%), var(--line-2) var(--range-fill, 50%) 100%) center/100% 4px no-repeat;
}
.rail-controls input[type=range]::-webkit-slider-thumb{
  width:14px;height:14px;
  border:0;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(227,168,96,.15);
}
.rail-controls input[type=range]::-moz-range-thumb{
  width:14px;height:14px;
  border:0;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(227,168,96,.15);
}
.rail-controls input[type=text],
.library-savebar input[type=text]{
  background:var(--surface-2)!important;
  border:1px solid var(--line-3)!important;
  border-radius:7px!important;
  color:var(--text)!important;
  font-family:var(--font-data);
  font-size:12px;
  padding:10px 12px;
  outline:none;
  min-width:0;
}
.rail-score{
  text-align:left;
  font-family:var(--font-data);
  font-size:10.5px;
  color:var(--ok-text);
  letter-spacing:.03em;
}

/* fine control in the rail */
.console-rail-right .fine-control{
  margin-top:0;
  border-top:1px solid var(--divider);
  border-radius:0;
  background:transparent;
  padding-top:6px;
}
.console-rail-right .fine-control > summary{
  padding:12px 0;
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:400;
  color:var(--text-faint-3);
}
.console-rail-right .fine-control > summary:hover{color:var(--text-dim);}
.console-rail-right .fine-control > summary .eyebrow{display:none;}
.console-rail-right .fine-control-body{padding:2px 0 6px;}
.console-rail-right .fine-control .controls{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0;
}
.console-rail-right .fine-control .control-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:'label val' 'input input';
  gap:7px 10px;
  margin:0;
  align-items:baseline;
}
.console-rail-right .fine-control .control-row label{
  grid-area:label;
  width:auto;
  font-family:var(--font-data);
  font-size:11px;
  color:var(--text-2);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
}
.console-rail-right .fine-control .control-row input{grid-area:input;}
.console-rail-right .fine-control .control-row .val{
  grid-area:val;
  width:auto;
  font-family:var(--font-data);
  font-size:11px;
  color:var(--text-dim);
  text-align:right;
}
.console-rail-right .fine-control input[type=range]{
  height:16px;
  background:linear-gradient(90deg, var(--text-faint) 0 var(--range-fill, 50%), var(--line-2) var(--range-fill, 50%) 100%) center/100% 3px no-repeat;
}
.console-rail-right .fine-control input[type=range]::-webkit-slider-thumb{
  width:11px;height:11px;
  border:0;
  background:var(--text);
  box-shadow:none;
}
.console-rail-right .fine-control input[type=range]::-moz-range-thumb{
  width:11px;height:11px;
  border:0;
  background:var(--text);
  box-shadow:none;
}
.console-rail-right .fine-zone-row .fine-zone-label{width:64px;font-size:10px;}
.console-rail-right .fine-control .btn-row{margin-top:12px;}
.console-rail-right .fine-control .btn-row button{
  min-height:0;
  padding:8px 12px;
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:1px solid var(--line-3);
  border-radius:6px;
  background:transparent;
  color:var(--text);
}
.console-rail-right .recipe-note{
  font-size:11px;
  line-height:1.6;
  color:var(--text-faint);
}
.console-rail-right .refine-guidance{
  border:1px solid var(--divider);
  border-radius:10px;
  background:var(--surface-1);
  box-shadow:none;
  padding:14px 16px;
}

/* export section */
.rail-export{
  border-top:1px solid var(--divider);
  padding-top:18px;
  gap:10px;
}
/* GS-084: the JPEG save is the app's cornerstone action — make it the hero of the
   Export section, above the technical (preset/LUT/before-after) chips. */
.save-photo-cta{width:100%;margin-bottom:4px;}
.export-sub-label{
  display:block;
  font-family:var(--font-mono, monospace);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim, #8a8a8a);
  margin:8px 0 2px;
}
.export-chips{display:flex;flex-wrap:wrap;gap:6px;}
button.secondary.chip{
  flex:0 0 auto;
  min-width:0;
  min-height:0;
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.3px;
  text-transform:none;
  font-weight:400;
  color:var(--text);
  border:1px solid var(--line-3);
  border-radius:6px;
  background:transparent;
  padding:7px 11px;
}
button.secondary.chip:hover:not(:disabled){
  border-color:var(--amber-tint-line-2);
  color:var(--amber);
  background:var(--amber-tint-bg);
}
button.secondary.chip:disabled{opacity:.38;}
button.primary.console-cta{
  width:100%;
  margin-top:6px;
  min-height:0;
  border:none;
  background:var(--amber);
  color:var(--on-amber);
  font-family:var(--font-data);
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:14px;
  border-radius:8px;
  box-shadow:none;
}
button.primary.console-cta:hover:not(:disabled){
  background:var(--amber-hover);
  transform:none;
  box-shadow:none;
}
button.primary.console-cta:disabled{
  background:var(--surface-2);
  color:var(--text-faint-3);
}
button.secondary.console-start-over{
  width:100%;
  min-height:0;
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;
  font-weight:400;
  border:1px solid var(--line-3);
  border-radius:8px;
  background:transparent;
  color:var(--text-dim);
  padding:11px;
}
button.secondary.console-start-over:hover:not(:disabled){color:var(--text-hi);border-color:var(--line-mute);background:transparent;}

/* match button + intent restyle */
.console-center .ready-match-row #matchBtn{
  min-width:0;
  min-height:0;
  border-radius:8px;
  font-family:var(--font-data);
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:14px 34px;
  background:var(--amber);
  color:var(--on-amber);
  box-shadow:none;
}
.console-center .ready-match-row #matchBtn:disabled{background:var(--surface-2);color:var(--text-faint-3);}
.match-intent button{
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-weight:400;
  border-radius:6px;
  border:1px solid var(--line-3);
  min-height:0;
  padding:7px 14px;
  color:var(--text-dim);
}
.match-intent button.is-active{
  background:var(--amber-tint-bg);
  border-color:var(--amber-tint-line);
  color:var(--amber);
}

/* verdict strip */
.match-read p{font-family:var(--font-ui);}
.pi-verdict{color:var(--text-3);}
.skin-note{color:var(--ok-text);}
.skin-note::before{content:'\25CF\00a0';}

/* --- library screen --- */
.console-library{
  flex:1;
  width:100%;
  padding:40px 48px 48px;
  display:flex;
  justify-content:center;
}
.library-inner{
  width:100%;
  max-width:1200px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.library-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}
.library-head-titles{display:flex;flex-direction:column;gap:8px;}
.library-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  letter-spacing:-.4px;
  color:var(--text-hi);
}
.library-head-actions{display:flex;gap:8px;}
.library-head-actions button.secondary.chip{
  font-size:11px;
  border-radius:7px;
  padding:9px 14px;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.library-head-actions .icon{width:13px;height:13px;}
.library-savebar{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--divider);
  background:var(--surface-1);
  border-radius:10px;
  padding:12px 14px;
}
.library-savebar label{flex:0 0 auto;}
.library-savebar input{flex:1;}
.library-savebar button.secondary{
  flex:0 0 auto;
  min-height:0;
  min-width:0;
  border:none;
  background:var(--amber);
  color:var(--on-amber);
  font-family:var(--font-data);
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:10px 18px;
  border-radius:7px;
}
.library-savebar button.secondary:hover:not(:disabled){background:var(--amber-hover);color:var(--on-amber);border-color:transparent;}
.library-savebar button.secondary:disabled{background:var(--surface-2);color:var(--text-faint-3);opacity:1;}
.library-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.library-grid .status{grid-column:1/-1;text-align:left;font-family:var(--font-data);font-size:11px;color:var(--text-faint);}
.library-grid .look-card{
  border:1px solid var(--divider)!important;
  background:var(--surface-1)!important;
  border-radius:11px;
  padding:0!important;
  width:auto;
  overflow:hidden;
  box-shadow:none;
}
.library-grid .look-card img{
  border-radius:0;
  width:100%;
  height:130px;
  object-fit:cover;
  display:block;
}
.library-grid .look-card-label{
  color:var(--text-hi)!important;
  font-family:var(--font-ui)!important;
  font-size:14px!important;
  padding:12px 14px 4px!important;
}
.library-grid .look-card-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 34px;
  gap:8px!important;
  padding:6px 12px 12px;
}
.library-grid .look-card-actions button.secondary{
  min-height:32px;
  border:1px solid var(--line-3);
  border-radius:6px;
  background:transparent;
  color:var(--text);
  font-family:var(--font-data);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.library-grid .look-card-actions button.secondary:hover:not(:disabled){border-color:var(--amber-tint-line-2);color:var(--amber);background:var(--amber-tint-bg);}
.library-grid .look-card-delete{width:34px;min-width:34px!important;}
.library-refonly{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:22px 24px;
  border-radius:11px;
}
.refonly-copy{display:flex;flex-direction:column;gap:6px;min-width:0;}
.refonly-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  color:var(--text-hi);
}
.library-refonly .recipe-note{
  padding-top:0;
  font-size:13px;
  color:var(--text-3);
  max-width:560px;
}
button.secondary.refonly-cta{
  flex:0 0 auto;
  min-width:0;
  min-height:0;
  white-space:nowrap;
  border:1px solid var(--amber-tint-line-2);
  background:var(--amber-tint-bg);
  color:var(--amber);
  font-family:var(--font-data);
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:12px 18px;
  border-radius:8px;
}
button.secondary.refonly-cta:hover:not(:disabled){border-color:var(--amber);color:var(--amber-hover);background:var(--amber-tint-bg);}
button.secondary.refonly-cta:disabled{opacity:.4;}
body.workflow-review #refOnlyPath{display:flex;}
#consoleLibrary #refPresetPanel{border-radius:11px;}
#consoleLibrary #refPresetPanel .recipe-head{
  padding:16px 20px 10px;
  border-bottom:0;
}
#consoleLibrary #refPresetPanel .recipe-head h2{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:600;
  font-size:16px;
  color:var(--text-hi);
}
#consoleLibrary #refPresetPanel .recipe-body{padding:0 20px 18px;}

/* --- footer status bar --- */
footer.console-footer{
  max-width:none;
  margin:0;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  text-align:left;
  padding:11px 26px calc(11px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--divider);
  background:var(--surface-1);
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.4px;
  color:var(--text-faint-3);
}
footer.console-footer a{color:var(--amber)!important;text-decoration:none!important;}
footer.console-footer a:hover{color:var(--amber-hover)!important;text-decoration:underline!important;text-underline-offset:3px;}
.footer-sep{margin:0 7px;color:var(--text-faint-3);}
.console-footer-right{white-space:nowrap;}

/* legacy drawers inside the console shell */
#developerWorkspace{
  margin:0 26px 26px;
}

/* refine guidance / status inherits */
.status{font-family:var(--font-data);letter-spacing:.04em;}

/* --- responsive: collapse rails below the viewer < 1024px ---
   (mobile is not designed yet — this is a pragmatic stack, flagged
   in the handoff as a follow-up) */
@media (max-width:1023px){
  .console-match{
    display:flex;
    flex-direction:column;
  }
  .console-rail-left{order:1;border-right:0;border-bottom:1px solid var(--divider);}
  .console-center{order:2;}
  .console-rail-right{order:3;border-left:0;border-top:1px solid var(--divider);}
  .console-rail-left .rail-frame-ref,
  .console-rail-left .rail-frame-src{height:160px;}
  .rail-footnote{margin-top:6px;}
  .viewer-placeholder{min-height:220px;}
  .library-grid{grid-template-columns:repeat(2,1fr);}
  .console-library{padding:28px 20px 40px;}
  .library-refonly{flex-direction:column;align-items:flex-start;}
  header.console-toolbar{padding-left:16px;padding-right:16px;gap:10px;}
  .console-toolbar-left{gap:16px;}
  .console-local-label{display:none;}
}
@media (max-width:640px){
  .library-grid{grid-template-columns:1fr;}
  .console-toolbar-right .engine-status{display:none;}
  .library-savebar{flex-wrap:wrap;}
  .library-savebar input{flex:1 1 160px;}
}

/* ============================================================
   GS-024 Console — mobile layer (MOBILE_HANDOFF.md)
   Bottom tab bar, pinned Match CTA, control sheet, mobile match
   header, 2-col library. Install overlay is all-viewport.
   ============================================================ */

/* --- install overlay (all viewports) --- */
.install-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,11,12,.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:1100;
  padding:24px 20px;
  overflow-y:auto;
}
.install-card{
  position:relative;
  max-width:520px;
  margin:48px auto;
  background:var(--surface-1);
  border:1px solid var(--divider);
  border-radius:14px;
  padding:26px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.install-close{
  position:absolute;
  top:14px;
  right:14px;
  width:30px;height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  padding:0;
}
.install-close:hover{color:var(--amber);border-color:var(--line-mute);}
.install-close .icon{width:14px;height:14px;}
.install-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:-.3px;
  color:var(--text-hi);
}
.install-seg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line-3);
  border-radius:8px;
  overflow:hidden;
}
.install-seg button{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  border:0;
  background:transparent;
  color:var(--text-dim);
  padding:11px 8px;
  cursor:pointer;
}
.install-seg button.is-active{
  background:var(--amber-tint-bg);
  color:var(--amber);
  box-shadow:inset 0 0 0 1px var(--amber-tint-line);
}
.install-chips{display:flex;flex-wrap:wrap;gap:6px;}
.install-chip{
  font-family:var(--font-data);
  font-size:10px;
  color:var(--text);
  border:1px solid var(--line-3);
  border-radius:6px;
  padding:6px 10px;
}
.install-pane{display:flex;flex-direction:column;gap:14px;}
.install-intro{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--text-3);
}
.install-steps{
  list-style:none;
  counter-reset:install-step;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.install-steps li{
  counter-increment:install-step;
  position:relative;
  padding-left:38px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-2);
  min-height:24px;
}
.install-steps li::before{
  content:counter(install-step);
  position:absolute;
  left:0;
  top:1px;
  width:24px;height:24px;
  border-radius:7px;
  background:var(--amber);
  color:var(--on-amber);
  font-family:var(--font-data);
  font-size:11px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}
.install-steps em{
  font-style:normal;
  color:var(--amber);
}
.install-tip{
  border:1px solid var(--amber-tint-line);
  background:var(--amber-tint-bg);
  border-radius:9px;
  padding:11px 13px;
  font-size:12px;
  line-height:1.55;
  color:var(--text-3);
}
.install-card .console-cta{margin-top:2px;}

/* --- mobile chrome: hidden on desktop --- */
.console-tabbar{display:none;}
.mobile-match-header{display:none;}

@media (max-width:767px){
  /* toolbar: wordmark + engine chip only */
  header.console-toolbar{padding:calc(12px + env(safe-area-inset-top, 0px)) 20px 12px;}
  .console-tabs{display:none;}
  .console-local-label{display:none;}
  .console-toolbar-right .engine-status{display:inline-flex;}
  header.console-toolbar .engine-status{padding:6px 10px;letter-spacing:1px;}

  /* room for the bottom tab bar */
  main.console-main{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));}
  footer.console-footer{display:none;}

  /* bottom tab bar */
  .console-tabbar{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:30;
    background:rgba(20,21,23,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--divider);
    padding:6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    gap:6px;
  }
  .tabbar-btn{
    flex:1;
    min-height:46px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--text-dim);
    font-family:var(--font-data);
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    cursor:pointer;
  }
  .tabbar-btn.is-active{
    color:var(--amber);
    background:var(--amber-tint-bg);
    box-shadow:inset 0 0 0 1px var(--amber-tint-line);
  }

  /* single scroll column */
  .console-rail{padding:20px;gap:22px;}
  .console-center{padding:20px;gap:16px;}
  .console-rail-left .rail-frame-ref,
  .console-rail-left .rail-frame-src{height:150px;}
  .console-rail-left .dz-empty{font-size:12px;}
  .rail-footnote{margin-top:0;}

  /* pinned Match CTA above the tab bar (setup, both photos loaded) */
  body.workflow-setup.has-reference.has-source .ready-match-row{
    position:fixed;
    left:0;right:0;
    bottom:calc(58px + env(safe-area-inset-bottom, 0px));
    z-index:25;
    margin:0;
    padding:12px 20px 10px;
    background:rgba(15,15,16,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--divider);
    flex-direction:column;
    gap:10px;
  }
  body.workflow-setup.has-reference.has-source main.console-main{
    padding-bottom:calc(190px + env(safe-area-inset-bottom, 0px));
  }
  .console-center .ready-match-row #matchBtn{width:100%;}
  .match-intent{margin-bottom:0;}

  /* mobile match header: ‹ back + title */
  body.workflow-review .mobile-match-header{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .mobile-back{
    width:38px;height:38px;
    border:1px solid var(--line-2);
    border-radius:50%;
    background:transparent;
    color:var(--text);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 0 3px;
  }
  .mobile-back:hover{color:var(--amber);border-color:var(--line-mute);}
  .mobile-match-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:16px;
    color:var(--text-hi);
  }

  /* viewer: full-bleed-ish card, 3 equal view segments, mini reliability */
  .compare{border-radius:14px;}
  .viewer-toolbar{flex-direction:column-reverse;align-items:stretch;gap:10px;}
  .view-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .view-toggle button{padding:10px 8px;text-align:center;}
  .reliability{align-self:flex-end;}
  .reliability-track{width:44px;}
  .viewer-placeholder{min-height:180px;}
  .compare-tools{gap:6px;}
  .compare-tools button{padding:8px 11px;}
  .console-read-grid{grid-template-columns:1fr;}

  /* right rail → bottom control sheet */
  .console-rail-right{
    border-top:1px solid var(--divider);
    border-radius:22px 22px 0 0;
    background:var(--surface-1);
    margin-top:4px;
    padding:14px 20px 26px;
  }
  .console-rail-right::before{
    content:'';
    display:block;
    width:44px;
    height:4px;
    border-radius:99px;
    background:var(--line-3);
    margin:0 auto 10px;
    flex:0 0 auto;
  }
  .rail-controls input[type=range]{height:28px;}
  .rail-controls input[type=range]::-webkit-slider-thumb{width:16px;height:16px;}
  .rail-controls input[type=range]::-moz-range-thumb{width:16px;height:16px;}
  button.secondary.chip{padding:10px 13px;font-size:10.5px;}
  button.primary.console-cta{min-height:50px;}
  button.secondary.console-start-over{min-height:46px;}

  /* library: 2-column grid, 96px swatches */
  .console-library{padding:24px 20px 40px;}
  .library-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .library-grid .look-card img{height:96px;}
  .library-grid .look-card-label{font-size:13px!important;padding:10px 12px 2px!important;}
  .library-title{font-size:22px;}
  .library-head{align-items:flex-start;flex-direction:column;}
  .library-refonly{padding:18px;}

  /* install overlay: sheet-like on phones */
  .install-overlay{padding:0;}
  .install-card{
    max-width:none;
    margin:12vh 0 0;
    min-height:88vh;
    border-radius:22px 22px 0 0;
    border-bottom:0;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* mobile library refinements: keep head actions and save bar on one row
   (the legacy MOBILE-001 layer forces 100%-width buttons/inputs) */
@media (max-width:767px){
  .library-head-actions{width:100%;}
  .library-head-actions button.secondary.chip{flex:1;width:auto;min-height:44px;justify-content:center;}
  .library-savebar{flex-wrap:nowrap;}
  .library-savebar label{display:none;}
  .library-savebar input{width:auto!important;flex:1 1 auto;min-height:44px;}
  .library-savebar button.secondary{width:auto!important;min-width:0!important;min-height:44px;flex:0 0 auto!important;padding:10px 16px!important;}
}

/* console polish: guidance headings in Archivo, not italic serif */
.refine-guidance .pi-block h3{font-style:normal;font-family:var(--font-display);font-weight:600;font-size:14px;}

/* mobile: export chips stay a wrapped row, not full-width stacks */
@media (max-width:767px){
  .export-chips{gap:8px;}
  .export-chips button.secondary.chip{width:auto;flex:1 1 auto;min-height:44px;justify-content:center;display:inline-flex;align-items:center;}
}

/* ============================================================
   v5.0.1 — loaded photos size to their aspect ratio instead of
   being letterboxed into fixed thumbnails (all viewports).
   ============================================================ */
body.has-reference .console-rail-left .rail-frame-ref,
body.has-source .console-rail-left .rail-frame-src{
  height:auto;
  min-height:104px;
  max-height:none;
}
body.has-reference .console-rail-left .rail-frame-ref img,
body.has-source .console-rail-left .rail-frame-src img{
  width:100%;
  height:auto;
  max-height:360px;
  object-fit:contain;
}
@media (max-width:1023px){
  body.has-reference .console-rail-left .rail-frame-ref,
  body.has-source .console-rail-left .rail-frame-src{
    min-height:150px;
  }
  body.has-reference .console-rail-left .rail-frame-ref img,
  body.has-source .console-rail-left .rail-frame-src img{
    max-height:62vh;
  }
}

/* ============================================================
   v5.0.2 — desktop app shell: the Console is viewport-fixed,
   toolbar and footer always on screen, and each panel (left
   rail, center viewer, right controls, library) scrolls
   independently — per the handoff's "grid filling remaining
   height". Progressive reveals scroll the panel, not the page.
   ============================================================ */
@media (min-width:1024px){
  body{height:100vh;overflow:hidden;}
  main.console-main{min-height:0;}
  .console-match{min-height:0;}
  .console-rail,
  .console-center{min-height:0;overflow-y:auto;}
  .console-library{min-height:0;overflow-y:auto;}
  #developerWorkspace{margin:26px 0 0;}
}


/* ===== GS-025 UX round (2026-07-11) ===================================== */
/* iOS Safari inflates text on pages it judges "desktop-like" (text-size-adjust
   defaults to auto) — the boosted letter-spaced mono labels pushed rows wider
   than the viewport on iPhone, clipping the right edge and forcing horizontal
   scroll. Chromium never does this, which is why it was invisible in testing.
   Pin text to authored sizes; clip (not hidden — sticky survives) any residual
   horizontal overflow. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
}

/* The numbered workflow steps read as chrome, not guidance — the rail order
   plus autoscroll already carry the flow. Markup stays for workflow.js. */
.rail-workflow{display:none;}

@media (max-width: 767px){
  /* Keep the photo on screen while adjusting Color/Tone below it — the
     control sheet used to scroll the viewer completely away. */
  body.workflow-review .console-center .compare{
    position:sticky;
    top:8px;
    z-index:20;
    background:#0b0b0c;
    box-shadow:0 10px 26px rgba(0,0,0,.55);
    /* shrink-wrap the canvas: the wipe handle and pointer math are fractions
       of THIS box, and the composite clips at the same fraction of the canvas
       bitmap — object-fit letterboxing broke that equality (the wipe line
       stopped matching the painted boundary). fit-content keeps box == bitmap. */
    width:fit-content;
    max-width:100%;
    margin-inline:auto;
  }
  body.workflow-review .console-center .compare canvas{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    /* GS-083: was 46vh — portrait frames read as a small, side-barred preview on
       phones (Cat, mobile web). Give the viewer the room the empty space below it
       was wasting. Stays sticky so the Match/Character sliders scroll under it. */
    max-height:62vh;
  }
}

@media (max-width: 767px){
  /* relocated primary controls (see app.js setupMobilePrimaryControls) */
  #resultSection > #primaryMatchControls{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:14px 2px 4px;
  }
}

/* ===== GS-089 — mobile declutter (2026-07-16) ===========================
   Cat: "far too much of everything, spread out WAY too far." One job per
   screen: in review mode the load rail collapses to a compact strip, stale
   panels leave, the saved-photo panel stops repeating the photo full-size,
   pro exports fold shut (app.js), and section spacing tightens. Desktop
   untouched. */

/* pro-exports drawer chrome (all viewports; open on desktop by default) */
.pro-exports{border:0;margin:2px 0 0;}
.pro-exports > summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  padding:8px 2px;
}
.pro-exports > summary::-webkit-details-marker{display:none;}
.pro-exports > summary .eyebrow{opacity:.6;}
.pro-exports .pro-exports-body{display:flex;flex-direction:column;gap:12px;padding-top:4px;}
.pro-exports .pro-exports-body .console-cta{margin-top:2px;}

@media (max-width:767px){
  /* 1. review mode: the load rail becomes a compact re-pick strip —
     the two photos side by side, small; histograms, camera readout,
     saved looks and footnote leave (back chevron returns to Load). */
  body.workflow-review .console-rail-left{
    flex-direction:row;
    gap:10px;
    padding:14px 20px 4px;
  }
  body.workflow-review .console-rail-left .rail-section{margin:0;flex:1 1 0;min-width:0;}
  body.workflow-review .console-rail-left .rail-frame-ref,
  body.workflow-review .console-rail-left .rail-frame-src{
    height:84px!important;
    min-height:84px!important;
  }
  body.workflow-review .console-rail-left .rail-frame-ref img,
  body.workflow-review .console-rail-left .rail-frame-src img{
    height:84px!important;
    max-height:84px!important;
    width:100%;
    object-fit:cover;
  }
  body.workflow-review .console-rail-left .hist-wrap,
  body.workflow-review .console-rail-left .camera-readout,
  body.workflow-review .console-rail-left .rail-hint,
  body.workflow-review .console-rail-left .rotate-controls,
  body.workflow-review #railLooksSection,
  body.workflow-review .console-rail-left .rail-footnote{display:none!important;}

  /* 2. stale panels leave in review: the pre-match quality card said its
     piece — reliability now lives in the viewer toolbar. */
  body.workflow-review #refHealthPanel{display:none!important;}

  /* 2b. and future panels stay out of setup: before a match exists there is
     nothing to control or export — the whole control sheet (preset name,
     fine control, save/export buttons, all disabled anyway) waits for
     review. The placeholder card duplicated the pinned CTA's message. */
  body.workflow-setup .console-rail-right{display:none!important;}
  body.workflow-setup .viewer-placeholder{display:none!important;}

  /* 3. the saved-photo panel: keep the press-and-hold image (it IS the
     reliable iOS save path) but as a modest preview, not a second hero. */
  .export-save-panel #saveImg{
    max-height:180px;
    width:auto!important;
    max-width:100%;
    margin-inline:auto;
    object-fit:contain;
  }

  /* 4. tighter vertical rhythm everywhere on phones */
  .console-rail{gap:14px;}
  .console-center{gap:12px;padding:14px 20px 20px;}
  .console-rail-right{gap:12px;padding:12px 20px 22px;}
  .rail-section{margin-bottom:0;}
  .recipe .recipe-head{padding:12px 14px;}
  .recipe .recipe-body{padding:0 14px 12px;}
  .fine-control > summary,
  .pro-exports > summary{padding:10px 2px;}
  .match-read{margin:8px 0 0;}
  .console-read-grid{gap:10px;}
  .rail-export{gap:10px;}
  .rail-export .export-sub-label{margin:0;}
}

/* ===== GS-089b — mobile Adjust/Compare panes (2026-07-16) ================
   Cat: the compare photo was being cut down to fit Match + Character. The
   space under the sticky viewer is now single-occupancy: Adjust (sliders,
   default) or Compare (wipe/flicker/clip chips), switched by a two-segment
   tab row. Photo gets the reclaimed height. Desktop untouched. */
.mobile-pane-tabs{display:none;}
@media (max-width:767px){
  body.workflow-review .mobile-pane-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin:10px 0 2px;
  }
  .mobile-pane-tabs button{
    min-height:40px;
    border:1px solid var(--line-2);
    border-radius:9px;
    background:transparent;
    color:var(--text-dim);
    font-family:var(--font-data);
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    cursor:pointer;
  }
  .mobile-pane-tabs button.is-active{
    color:var(--amber);
    background:var(--amber-tint-bg);
    border-color:var(--amber-tint-line);
  }
  /* single occupancy under the viewer */
  body.workflow-review:not(.m-pane-compare) #compareTools{display:none;}
  body.workflow-review.m-pane-compare #resultSection > #primaryMatchControls{display:none;}
  /* the photo takes the reclaimed room (was 62vh with both groups below) */
  body.workflow-review .console-center .compare canvas{max-height:66vh;}
}