/* ============================================================
   FIND PLAYPAL DESIGN STUDIO — shell styles
   Internal review tool: neutral and utilitarian. Nothing here
   styles the product; the product renders inside the <iframe>.
   Priorities: navigation clarity, context clarity, device
   switching speed, preview space, state selection speed.
   ============================================================ */
:root{
  --ds-bg: #16181d;
  --ds-panel: #1e2128;
  --ds-panel-alt: #262a33;
  --ds-border: #333844;
  --ds-text: #e6e8ec;
  --ds-text-dim: #9aa0ad;
  --ds-text-faint: #6b7180;
  --ds-accent: #5b8cff;
  --ds-accent-soft: rgba(91,140,255,.16);
  --ds-canvas: #0e1015;
  --ds-radius: 6px;
  --ds-nav-w: 268px;
  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--ds-font);
  background:var(--ds-bg);
  color:var(--ds-text);
  font-size:13px;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}
button{font-family:inherit;}
[hidden]{display:none !important;}

/* ---------- top bar (persistent device switch) ---------- */
.ds-topbar{
  flex:none;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 16px;
  background:var(--ds-panel);
  border-bottom:1px solid var(--ds-border);
}
.ds-title{font-weight:700;font-size:14px;white-space:nowrap;}
.ds-title .dim{color:var(--ds-text-dim);font-weight:500;}
.ds-spacer{flex:1;}
.ds-drawer-btn{
  display:none;
  border:1px solid var(--ds-border);
  background:var(--ds-panel-alt);
  color:var(--ds-text);
  border-radius:var(--ds-radius);
  padding:6px 10px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.ds-device-group{
  display:flex;
  gap:4px;
  background:var(--ds-panel-alt);
  border-radius:var(--ds-radius);
  padding:3px;
}
.ds-device-btn{
  border:none;
  background:transparent;
  color:var(--ds-text-dim);
  padding:5px 14px;
  border-radius:4px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.2;
}
.ds-device-btn span{font-size:12.5px;font-weight:700;}
.ds-device-btn small{font-size:10.5px;font-weight:500;color:var(--ds-text-faint);}
.ds-device-btn:hover{color:var(--ds-text);}
.ds-device-btn.on{background:var(--ds-accent);color:#fff;}
.ds-device-btn.on small{color:rgba(255,255,255,.8);}
.ds-device-btn:disabled{opacity:.35;cursor:not-allowed;}

/* ---------- layout ---------- */
.ds-body{flex:1;display:flex;min-height:0;position:relative;}
.ds-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.ds-scrim{display:none;}

/* ---------- left page tree ---------- */
.ds-nav{
  flex:none;
  width:var(--ds-nav-w);
  background:var(--ds-panel);
  border-right:1px solid var(--ds-border);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.ds-nav-tools{
  flex:none;
  display:flex;
  gap:6px;
  padding:8px 10px;
  border-bottom:1px solid var(--ds-border);
}
.ds-nav-tools button{
  border:1px solid var(--ds-border);
  background:transparent;
  color:var(--ds-text-dim);
  border-radius:4px;
  font-size:11px;
  padding:3px 8px;
  cursor:pointer;
}
.ds-nav-tools button:hover{color:var(--ds-text);background:var(--ds-panel-alt);}
.ds-tree{flex:1;overflow-y:auto;padding:6px 0 16px;}

.ds-node-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:3px 10px 3px calc(10px + var(--depth,0) * 14px);
  cursor:pointer;
  color:var(--ds-text-dim);
  font-size:12.5px;
  border-left:3px solid transparent;
  user-select:none;
}
.ds-node-row:hover{background:var(--ds-panel-alt);color:var(--ds-text);}
.ds-node-row .chev{
  flex:none;
  width:12px;
  text-align:center;
  font-size:11px;
  color:var(--ds-text-faint);
  transition:transform .12s;
}
.ds-node.open > .ds-node-row .chev{transform:rotate(90deg);}
.ds-node-row .spacer{flex:none;width:12px;}
.ds-node-row .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-node.group.depth0 > .ds-node-row{
  color:var(--ds-text);
  font-weight:700;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.ds-node.on-path > .ds-node-row{color:var(--ds-text);}
.ds-node.sel > .ds-node-row{
  background:var(--ds-accent-soft);
  border-left-color:var(--ds-accent);
  color:#fff;
  font-weight:600;
}
.ds-node-children{display:none;}
.ds-node.open > .ds-node-children{display:block;}

/* ---------- review header (breadcrumb + actions) ---------- */
.ds-review-head{
  flex:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 16px;
  background:var(--ds-panel);
  border-bottom:1px solid var(--ds-border);
  min-height:40px;
}
.ds-breadcrumb{
  flex:1;
  min-width:0;
  font-size:12.5px;
  color:var(--ds-text-dim);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ds-breadcrumb .sep{margin:0 2px;color:var(--ds-text-faint);}
.ds-breadcrumb b{font-weight:500;}
.ds-breadcrumb b.cur{color:var(--ds-text);font-weight:700;}
.ds-review-meta{flex:none;display:flex;align-items:center;gap:8px;}
.ds-vp{font-size:11.5px;color:var(--ds-text-faint);margin-right:4px;white-space:nowrap;}
.ds-action{
  border:1px solid var(--ds-border);
  background:transparent;
  color:var(--ds-text-dim);
  border-radius:var(--ds-radius);
  padding:4px 10px;
  font-size:11.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.ds-action:hover{color:var(--ds-text);background:var(--ds-panel-alt);}
.ds-copy-btn.copied{background:#1f7a4a;border-color:#1f7a4a;color:#fff;}

/* ---------- state / configuration controls ---------- */
.ds-controls{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 20px;
  padding:7px 16px;
  background:var(--ds-panel-alt);
  border-bottom:1px solid var(--ds-border);
}
.ds-ctl{display:flex;align-items:center;gap:8px;}
.ds-ctl-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ds-text-faint);
  white-space:nowrap;
}
.ds-seg{display:flex;gap:2px;background:var(--ds-bg);border-radius:var(--ds-radius);padding:2px;}
.ds-seg button{
  border:none;
  background:transparent;
  color:var(--ds-text-dim);
  padding:4px 10px;
  border-radius:4px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.ds-seg button:hover{color:var(--ds-text);}
.ds-seg button.on{background:var(--ds-accent);color:#fff;font-weight:600;}
.ds-select{
  background:var(--ds-bg);
  color:var(--ds-text);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius);
  padding:4px 8px;
  font-size:12px;
  font-family:inherit;
}

/* ---------- preview canvas ---------- */
.ds-canvas{
  flex:1;
  min-height:0;
  overflow:auto;
  background:var(--ds-canvas);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:18px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ds-canvas-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;}
.ds-frame-scaler{position:relative;box-shadow:0 12px 40px rgba(0,0,0,.55);border-radius:14px;overflow:hidden;background:#000;}
.ds-frame-scaler iframe{
  position:absolute;
  top:0;left:0;
  border:0;
  transform-origin:0 0;
  background:#fff;
}
.ds-dim-label{font-size:11px;color:var(--ds-text-faint);}

/* ---------- status badges (review status only) ---------- */
.ds-badge{
  flex:none;
  margin-left:6px;
  padding:1px 6px;
  border-radius:3px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.5;
  vertical-align:middle;
}
.ds-badge.proposed{background:rgba(255,176,32,.16);color:#ffb020;border:1px solid rgba(255,176,32,.4);}
.ds-badge.approved{background:rgba(46,191,120,.16);color:#3fd08a;border:1px solid rgba(46,191,120,.4);}

/* ---------- narrow Studio window: tree becomes a drawer ---------- */
@media (max-width: 900px){
  .ds-drawer-btn{display:inline-block;}
  .ds-title .dim{display:none;}
  .ds-nav{
    position:absolute;
    z-index:20;
    top:0;bottom:0;left:0;
    width:min(300px, 86vw);
    transform:translateX(-100%);
    transition:transform .18s ease;
    box-shadow:8px 0 24px rgba(0,0,0,.4);
  }
  body.ds-drawer-open .ds-nav{transform:none;}
  body.ds-drawer-open .ds-scrim{
    display:block;
    position:absolute;
    inset:0;
    z-index:15;
    background:rgba(0,0,0,.45);
  }
  .ds-review-head{flex-wrap:wrap;}
  .ds-device-btn{padding:5px 9px;}
  .ds-device-btn small{display:none;}
}