.phone-root { display: none; }
/* Only touch phones use this workspace. Desktop geometry and controls stay intact. */
body.nbo-phone { overflow: hidden !important; background: #161615; }
body.nbo-phone .phone-root,
body.nbo-phone .cover-responsive-shell,
body.nbo-phone .cover-compact-shell,
body.nbo-phone .cover-compact-preview { display: contents !important; }
body.nbo-phone :is(.preview-panel,.studio-preview-panel) {
  --phone-dock-size: clamp(204px, calc(var(--phone-height, 100dvh) * .27), 236px);
  position: fixed !important; inset: var(--phone-top, 0px) 0 auto !important;
  width: 100% !important; height: var(--phone-height, 100dvh) !important; min-height: 0 !important;
  max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  border-radius: 0 !important; background: #161615 !important; z-index: 1000 !important;
  display: grid !important; grid-template-columns: 52px minmax(0,1fr) 52px;
  grid-template-rows: calc(48px + env(safe-area-inset-top, 0px)) minmax(0,1fr) 24px var(--phone-dock-size) calc(56px + env(safe-area-inset-bottom, 0px));
  gap: 0 !important; overflow: hidden !important; color: #f5f3ef; box-sizing: border-box;
}
body.nbo-phone :is(.live-control-host,.preview-toolbar,.studio-preview-toolbar,#mobileEditorTopbar,.cover-compact-header,.split-tools,.preview-tools,.studio-preview-tools,.mobile-export-sheet,.mobile-brush-status,.brush-cursor,.mobile-touch-zone) { display: none !important; }
body.nbo-phone :is(.canvas-shell,.studio-canvas-shell) {
  grid-column: 2; grid-row: 2; min-height: 0 !important; height: auto !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 8px 0 !important; aspect-ratio: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  overflow: hidden !important; touch-action: none; box-sizing: border-box;
}
body.nbo-phone :is(.canvas-shell,.studio-canvas-shell) > canvas {
  width: auto !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;
  object-fit: contain; border-radius: 6px; flex: 0 1 auto; touch-action: none;
}
body.nbo-phone .phone-header {
  grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 48px 1fr 52px 52px;
  align-items: center; padding: env(safe-area-inset-top, 0px) 8px 0; gap: 4px;
  background: #1d1d1b; border-bottom: 1px solid #ffffff0e;
}
body.nbo-phone .phone-root button {
  appearance: none; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3;
  min-height: 44px; min-width: 0; margin: 0; padding: 8px 10px;
  border: 1px solid #ffffff18; border-radius: 10px; color: #f5f3ef; background: #292927;
  cursor: pointer; box-sizing: border-box; touch-action: manipulation; white-space: normal;
}
body.nbo-phone .phone-root button:disabled { opacity: .38; cursor: default; }
body.nbo-phone .phone-root button[aria-pressed=true] { border-color: #ff3657; background: #ff24422b; color: #ff6982; }
body.nbo-phone .phone-header button { border: 0; background: none; padding: 6px 0; }
body.nbo-phone .phone-header strong { text-align: left; font-size: 16px; line-height: 1.3; }
body.nbo-phone .phone-header .phone-accent { color: #ff5270; font-weight: 650; }
body.nbo-phone :is(.phone-photo-rail,.phone-shortcut-rail) { grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 8px 4px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
body.nbo-phone .phone-photo-rail { grid-column: 1; }
body.nbo-phone .phone-shortcut-rail { grid-column: 3; }
body.nbo-phone :is(.phone-photo-rail,.phone-shortcut-rail) button { flex-shrink: 0; padding: 6px 0; font-size: 10px; white-space: nowrap; border-radius: 8px; overflow-wrap: normal; }
body.nbo-phone .phone-shortcut-rail button { display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.nbo-phone .phone-shortcut-rail button[aria-pressed]::before { content: ''; display: block; width: 20px; height: 10px; border-radius: 8px; background: radial-gradient(circle at 5px 5px,#eee 0 4px,transparent 4.5px),#65645f; }
body.nbo-phone .phone-shortcut-rail button[aria-pressed=true]::before { background: radial-gradient(circle at 15px 5px,#fff 0 4px,transparent 4.5px),#ff2445; }
body.nbo-phone .phone-photo { display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.nbo-phone .phone-photo canvas { width: 34px; height: 34px; border-radius: 4px; }
body.nbo-phone .phone-plus { display: grid; place-items: center; width: 34px; height: 34px; font-size: 24px; color: #b8b5af; }
body.nbo-phone .phone-root p { margin: 0; line-height: 1.5; }
body.nbo-phone .phone-hint { grid-column: 1 / -1; grid-row: 3; min-width: 0; font-size: 10px; color: #a9a69f; text-align: center; line-height: 24px; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.nbo-phone .phone-dock { grid-column: 1 / -1; grid-row: 4; min-width: 0; min-height: 0; overflow: hidden; background: #20201e; padding: 0 12px; display: flex; flex-direction: column; border-top: 1px solid #ffffff14; }
body.nbo-phone .phone-context { flex: 0 0 44px; display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
body.nbo-phone .phone-context strong { font-weight: 600; }
body.nbo-phone .phone-target { color: #d0ae7c; font-size: 11px; }
body.nbo-phone .phone-context button { margin-left: auto; border: 0; font-size: 12px; background: transparent; padding: 6px; }
body.nbo-phone .phone-adjustment { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 8px; }
body.nbo-phone .phone-adjustment > * { flex-shrink: 0; }
body.nbo-phone .phone-tool-strip { position: relative; flex: 0 0 52px; display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #66645c transparent; border-top: 1px solid #ffffff0c; }
body.nbo-phone .phone-tool-strip button { flex: 0 0 auto; white-space: nowrap; font-size: 12px; min-height: 44px; padding: 8px 12px; }
body.nbo-phone .phone-main-actions { grid-column: 1 / -1; grid-row: 5; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: start; gap: 4px; padding: 5px 8px max(5px,env(safe-area-inset-bottom)); background: #191918; border-top: 1px solid #ffffff21; }
body.nbo-phone .phone-main-actions button { border: 0; padding: 10px 0; font-size: 14px; background: transparent; }
body.nbo-phone .phone-note { font-size: 11px; color: #a6a49e; }
body.nbo-phone .phone-tool-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
body.nbo-phone .phone-tool-grid button { font-size: 12px; padding: 6px 4px; }
body.nbo-phone .phone-field { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #b7b4ad; }
body.nbo-phone .phone-field > p { flex: 0 0 64px; }
body.nbo-phone .phone-root input:not([type=range]) { appearance: none; min-width: 0; max-width: 100%; height: 44px; border: 1px solid #ffffff24; border-radius: 10px; color: #f5f3ef; background: #2b2b28; padding: 10px; box-sizing: border-box; font-size: 16px; }
body.nbo-phone .phone-field input { flex: 1; width: 0; }
body.nbo-phone .phone-root input[type=color] { flex: 0 0 64px; padding: 4px; }
body.nbo-phone .phone-value-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
body.nbo-phone .phone-value-row > p:first-child { flex: 1; font-size: 13px; }
body.nbo-phone .phone-value-row input { width: 68px; }
body.nbo-phone .phone-root .phone-reset { border: 0; background: none; color: #b7b4ad; font-size: 12px; padding: 8px; }
body.nbo-phone .phone-root input[type=range] { width: 100%; height: 36px; min-height: 36px; margin: 0; accent-color: #ff2445; touch-action: none; }
body.nbo-phone .phone-stickers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
body.nbo-phone .phone-stickers canvas { width: 100%; height: auto; display: block; margin-bottom: 8px; }
body.nbo-phone .phone-stickers button { padding: 10px 6px; font-size: 12px; }
body.nbo-phone .phone-export-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.nbo-phone .phone-root .phone-primary { background: #ff2445; border-color: #ff2445; color: white; font-weight: 600; }
body.nbo-phone .phone-selection { position: fixed; border: 1px solid #ff5270; border-radius: 6px; pointer-events: none; z-index: 1001; box-sizing: border-box; }
body.nbo-phone .phone-keyboard { --phone-dock-size: 176px; grid-template-rows: 48px minmax(0,1fr) 0 var(--phone-dock-size) 52px; }
body.nbo-phone .phone-keyboard .phone-hint { visibility: hidden; }
body.nbo-phone .save-preview { z-index: 1100 !important; }
body.nbo-phone .phone-rules { white-space: pre-line; font-size: 12px; color: #c9c5be; }
body.nbo-phone .phone-root a { color: #ff6982; font-size: 13px; padding: 12px 0; }
@media (max-height: 480px) and (min-width: 500px) {
  body.nbo-phone :is(.preview-panel,.studio-preview-panel) { grid-template-columns: 48px minmax(0,1fr) 48px minmax(250px,46%); grid-template-rows: 48px minmax(0,1fr) calc(52px + env(safe-area-inset-bottom,0px)); }
  body.nbo-phone .phone-dock { grid-column: 4; grid-row: 2; border-left: 1px solid #ffffff14; }
  body.nbo-phone .phone-main-actions { grid-row: 3; }
  body.nbo-phone .phone-hint { display: none; }
}

body.nbo-phone .phone-stickers{grid-template-columns:repeat(2,minmax(0,1fr))}
body.nbo-phone .phone-card-item{min-width:0;border:1px solid #d7d4cc;border-radius:10px;overflow:hidden}
body.nbo-phone .phone-card-item>button{width:100%;border:0}
body.nbo-phone .phone-card-options{padding:6px}
body.nbo-phone .phone-card-density,body.nbo-phone .phone-card-audio{display:grid;gap:4px;grid-template-columns:repeat(4,minmax(0,1fr))}
body.nbo-phone .phone-card-density{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:4px}
body.nbo-phone .phone-card-item:has(>button[aria-pressed="true"]){grid-column:1/-1}
body.nbo-phone .phone-card-item:has(>button[aria-pressed="true"]) canvas{height:94px;object-fit:contain}
body.nbo-phone .phone-card-options button{min-width:0;padding:6px 2px;font-size:10px}