/* ---- browser chrome ---- */
  .browser{
    background:#fff;border-radius:16px;overflow:hidden;
    box-shadow:0 40px 80px -30px rgba(20,10,60,.4), 0 0 0 1px rgba(20,10,60,.06);
    container-type:inline-size;
    transition:width .3s ease;
    margin:0;
  }
  .chrome-bar{
    display:flex;align-items:center;gap:14px;
    padding:12px 16px;background:#F1EEFB;border-bottom:1px solid var(--line);
  }
  .dots{display:flex;gap:6px;}
  .dots span{width:10px;height:10px;border-radius:50%;display:block;}
  .dots span:nth-child(1){background:#FF6259;}
  .dots span:nth-child(2){background:#FFBD2E;}
  .dots span:nth-child(3){background:#28C93F;}
  .addr{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--ink-soft);font-family:monospace;}

  /* ============================================================
     DESIGN STUDIO V2 — Tree Explorer (harness-only; never product UI).
     Toolbar (top) | Explorer (left) | Preview (center) | Design Info (right).
     --ds-center-min is set by prototype-harness.js to the selected device width + gutters, so a
     narrow window scrolls the Studio shell instead of shrinking the product preview.
     ============================================================ */
  .studio{
    --ds-bar-h:52px;--ds-center-min:1328px;
    display:grid;
    grid-template-columns:280px minmax(var(--ds-center-min),1fr) 300px;
    grid-template-rows:var(--ds-bar-h) 1fr;
    grid-template-areas:"bar bar bar" "tree center info";
    min-width:calc(580px + var(--ds-center-min));min-height:100vh;
    font-family:'Inter',sans-serif;
  }
  .ds-legacy{display:none !important;}
  #subNav{display:none !important;}

  .ds-toolbar{grid-area:bar;position:sticky;top:0;z-index:300;display:flex;align-items:center;gap:20px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line);}
  .ds-title{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;}
  .ds-tools{margin-left:auto;display:flex;gap:8px;}
  .ds-btn{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;white-space:nowrap;}
  .ds-btn:hover{border-color:var(--brand);color:var(--brand-dark);}
  .device-toggle{display:flex;gap:2px;padding:3px;background:#F1EEFB;border-radius:9px;margin:0;justify-content:flex-start;}
  .device-toggle button{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;padding:5px 12px;border-radius:7px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;gap:6px;}
  .device-toggle button.on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line);}
  .device-toggle .w{font-size:10.5px;opacity:.65;font-weight:600;}

  .ds-explorer,.ds-info{position:sticky;top:var(--ds-bar-h);align-self:start;height:calc(100vh - var(--ds-bar-h));overflow-y:auto;background:#FBFAFF;padding:14px 12px 24px;box-sizing:border-box;}
  .ds-explorer{grid-area:tree;border-right:1px solid var(--line);}
  .ds-info{grid-area:info;border-left:1px solid var(--line);padding:14px 16px 24px;}
  .studio > .browser{grid-area:center;justify-self:center;align-self:start;margin:24px 0 80px;max-width:100%;}
  .ds-panel-title{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 4px 10px;}

  .ds-search{width:100%;box-sizing:border-box;font-family:'Inter',sans-serif;font-size:12.5px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);margin-bottom:10px;}
  .ds-search:focus{outline:none;border-color:var(--brand);}
  .ds-tree-empty{font-size:12px;color:var(--ink-soft);padding:8px 6px;}
  .dt-children{margin-left:11px;padding-left:6px;border-left:1px solid var(--line);}
  .dt-row{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;text-align:left;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink);background:transparent;border:none;border-radius:6px;padding:5px 6px;cursor:pointer;}
  .dt-row:hover{background:#F1EEFB;}
  .dt-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
  .dt-row.group{font-weight:700;}
  .dt-row.top{font-weight:800;}
  .dt-chev{flex:0 0 12px;font-size:9px;color:var(--ink-soft);transition:transform .12s;display:inline-block;text-align:center;}
  .dt-node.open > .dt-row > .dt-chev{transform:rotate(90deg);}
  .dt-node:not(.open) > .dt-children{display:none;}
  .dt-dot{flex:0 0 12px;text-align:center;font-size:8px;color:var(--line);}
  .dt-row.leaf.sel{background:var(--brand-tint);color:var(--brand-dark);font-weight:700;box-shadow:inset 2px 0 0 var(--brand);}
  .dt-row.leaf.sel .dt-dot{color:var(--brand);}
  .dt-badge{margin-left:auto;flex:0 0 auto;width:7px;height:7px;border-radius:50%;}
  .dt-badge.approved{background:var(--mint);}
  .dt-badge.review{background:var(--sun);}

  .di-list{display:grid;grid-template-columns:auto 1fr;gap:9px 12px;margin:0;font-size:12.5px;}
  .di-list dt{color:var(--ink-soft);font-size:11px;font-weight:600;padding-top:1px;}
  .di-list dd{margin:0;color:var(--ink);font-weight:600;line-height:1.4;overflow-wrap:anywhere;}
  .di-list dd.plain{font-weight:400;}
  .di-list dd.mono{font-family:monospace;font-size:11.5px;}
  .di-status{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:100px;border:1px solid var(--line);}
  .di-status.approved{background:var(--mint-tint);color:#0E8F76;border-color:transparent;}
  .di-status.review{background:#FFF3D9;color:#5A3D00;border-color:transparent;}
  .di-status.unreviewed{background:#fff;color:var(--ink-soft);}