/* Five project views share the same working area and content. */
#view-studio .studio-view-tabs { min-width:0; }
#view-studio .studio-view-tab { padding:6px 10px; flex:none; }
#view-studio #studioTabBoard { margin-left:8px; border-left:1px solid var(--color-border); border-top-left-radius:0; border-bottom-left-radius:0; padding-left:17px; }
@media(max-width:760px){#view-studio #studioTabBoard{margin-left:3px;padding-left:10px}}
.studio-content-state { display:flex; flex-shrink:0; align-items:center; gap:10px; min-height:29px; padding:2px 15px 5px; font-size:11px; color:var(--color-text-secondary); }
.studio-content-state>button { margin-left:auto; font-size:11px; min-height:24px; }
#studioContentStatus { min-width:0; overflow-wrap:anywhere; }
#studioContentStatus[data-state='error'] { color:var(--color-error); }
#studioPreviewStatus[data-state='error'] { color:var(--color-error); }
#studioContentRecovery { display:flex; flex-shrink:0; gap:10px; }
#studioContentRecovery .hub-text-action { font-size:11px; }
.studio-content-panel { flex:1; min-height:0; min-width:0; flex-direction:column; overflow:hidden; }
.studio-content-toolbar { display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:48px; padding:8px 18px; border-bottom:1px solid var(--color-border-light); font-size:12px; }
.studio-content-toolbar>strong { margin-right:auto; font-size:12px; font-weight:600; }
.studio-content-toolbar>.hub-text-action { font-size:12px; }
.studio-document-modes { display:flex; gap:3px; }
.studio-document-modes button,.studio-board-zoom button { border:0; background:none; color:var(--color-text-secondary); font:inherit; font-size:12px; padding:5px 9px; min-height:30px; border-radius:6px; cursor:pointer; }
.studio-document-modes button[aria-pressed='true'] { color:var(--color-text); background:var(--color-surface-alt); }
.studio-document-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); flex:1; min-height:0; }
#studioDesignInput { min-height:0; width:100%; height:100%; resize:none; padding:26px 25px; background:var(--color-surface); color:var(--color-text); font:inherit; font-size:14px; line-height:1.9; border:0; border-right:1px solid var(--color-border-light); border-radius:0; outline-offset:-3px; }
.studio-document-reading { min-width:0; overflow:auto; padding:28px 30px 50px; color:var(--color-text); font-size:14px; line-height:1.9; overflow-wrap:anywhere; }
.studio-document-reading h2 { font-size:25px; line-height:1.5; font-weight:600; margin:0 0 22px; }
.studio-document-reading h3 { font-size:19px; font-weight:600; margin:25px 0 12px; }
.studio-document-reading h4 { font-size:16px; margin:20px 0 9px; }
.studio-document-reading p { margin:0 0 11px; }
.studio-doc-list::before { content:'•'; margin-right:9px; }
.studio-doc-space { height:10px; }
#studioDesignPanel[data-mode='edit'] .studio-document-split,#studioDesignPanel[data-mode='read'] .studio-document-split { grid-template-columns:minmax(0,1fr); }
#studioDesignPanel[data-mode='edit'] .studio-document-reading,#studioDesignPanel[data-mode='read'] #studioDesignInput { display:none; }
#view-studio #studioCodeContent { padding:0; flex-direction:column; overflow:hidden; background:var(--color-surface); }
#studioSourceInput { min-height:0; width:100%; flex:1; padding:23px 25px; resize:none; border:0; outline-offset:-3px; border-radius:0; font:13px/1.85 Consolas,'Courier New',monospace; color:var(--color-text); background:var(--color-surface-alt); tab-size:2; }
.studio-upload-button { position:relative; display:inline-flex; justify-content:center; align-items:center; min-height:35px; padding:7px 13px; font-size:12px; font-weight:400; border-radius:7px; background:var(--color-accent); color:var(--hub-on-accent); cursor:pointer; flex-shrink:0; }
.studio-upload-button input { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.studio-upload-button:focus-within { outline:2px solid var(--color-accent); outline-offset:3px; }
.studio-asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); align-content:start; gap:23px; overflow:auto; padding:24px; }
.studio-asset-item { min-width:0; }
.studio-asset-preview { display:flex; align-items:center; justify-content:center; height:155px; border-radius:10px; background:var(--color-surface-alt); overflow:hidden; margin-bottom:11px; }
.studio-asset-preview img { width:100%; height:100%; object-fit:contain; }
.studio-asset-preview img:not([src]),.studio-board-node img[data-studio-media]:not([src]){visibility:hidden}
.studio-asset-usage{margin:0;padding:10px 24px 0;font-size:12px;line-height:1.8;color:var(--color-text-secondary)}
.studio-asset-preview{position:relative}
.studio-media-retry{position:absolute;inset:auto auto 12px;min-height:36px;padding:6px 12px;border:1px solid var(--color-border);border-radius:7px;background:var(--color-surface);color:var(--color-text);font:inherit;font-size:12px;cursor:pointer}
.studio-upload-button:has(input:disabled){opacity:.5;cursor:wait}
.studio-audio-player{width:100%;padding:0 6px;text-align:center}
.studio-audio-player audio{max-width:100%;width:100%}
.studio-asset-preview .studio-audio-player button{min-height:44px;padding:7px 8px;border:0;border-radius:7px;background:var(--color-surface);color:var(--color-text);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}
.studio-library-usage{margin:0 0 12px;color:var(--color-text-secondary);font-size:13px;font-variant-numeric:tabular-nums}
.studio-library-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--color-border-light)}
.studio-library-row .studio-asset-preview{width:64px;height:64px;margin:0;border-radius:8px}
.studio-library-copy{min-width:0}
.studio-library-copy strong{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.studio-library-copy small{display:block;margin-top:4px;font-size:12px;color:var(--color-text-secondary)}
.studio-library-actions{display:flex;gap:12px}
.studio-library-actions button{min-height:44px;font-size:13px}
.studio-library-actions button:disabled{color:var(--color-text-secondary);opacity:.6;cursor:default}
@media(max-width:500px){.studio-library-row{grid-template-columns:54px minmax(0,1fr);gap:8px 14px}.studio-library-row .studio-asset-preview{width:54px;height:54px;grid-row:span 2}.studio-library-actions{grid-column:2}.studio-asset-usage{padding-left:18px;padding-right:18px}}
.studio-asset-preview audio { max-width:100%; }
.studio-asset-item>strong { display:block; color:var(--color-text); font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.studio-asset-item>small { display:block; font-size:11px; color:var(--color-text-secondary); margin:5px 0 8px; }
.studio-asset-item>div:last-child { display:flex; gap:13px; }
.studio-asset-item button { padding:4px 0; min-height:30px; border:0; background:none; color:var(--color-accent); font:inherit; font-size:12px; cursor:pointer; }
.studio-content-empty { grid-column:1/-1; padding:70px 20px; max-width:440px; margin:auto; text-align:center; }
.studio-content-empty h3 { font-size:22px; font-weight:600; margin:0 0 14px; }
.studio-content-empty p,.studio-content-hint { color:var(--color-text-secondary); font-size:13px; line-height:1.9; }
.studio-board-viewport { flex:1; min-height:0; overflow:auto; background-color:var(--color-surface-alt); background-image:radial-gradient(var(--color-border) .7px,transparent .7px); background-size:22px 22px; }
.studio-board-size,.studio-board-world { position:relative; width:1800px; height:1200px; }
.studio-board-world { transform-origin:0 0; }
.studio-board-links { position:absolute; inset:0; width:1800px; height:1200px; pointer-events:none; overflow:visible; }
.studio-board-links path { fill:none; stroke:var(--color-text-secondary); stroke-width:1.4; }
.studio-board-node { position:absolute; width:280px; border-radius:11px; background:var(--color-surface); border:1px solid var(--color-border); overflow:hidden; }
.studio-node-heading { display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 10px 6px 14px; cursor:grab; touch-action:none; border-bottom:1px solid var(--color-border-light); }
.studio-node-heading:active { cursor:grabbing; }
.studio-node-heading strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; }
.studio-node-heading button { display:grid; place-items:center; padding:4px; width:28px; min-height:28px; border:0; background:none; color:var(--color-text-secondary); cursor:pointer; }
.studio-node-body { height:200px; overflow:auto; }
.studio-node-body>img { width:100%; height:100%; object-fit:contain; }
.studio-node-body>audio { width:100%; margin-top:50px; }
.studio-node-body textarea { width:100%; height:100%; padding:17px; border:0; resize:none; background:var(--color-surface); color:var(--color-text); font:inherit; font-size:14px; line-height:1.8; }
.studio-board-document { padding:16px 17px; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.studio-board-document h2 { font-size:17px; font-weight:600; margin:0 0 12px; }
.studio-board-document h3 { font-size:14px; margin:16px 0 8px; }
.studio-board-zoom { display:flex; align-items:center; gap:5px; margin-left:auto; flex-shrink:0; font-size:11px; }
#studioBoardHint { color:var(--color-text-secondary); font-size:11px; }
.studio-skills-button { display:flex; align-items:center; gap:6px; min-height:30px; border:0; background:none; color:var(--color-text-secondary); font:inherit; font-size:11px; cursor:pointer; margin-right:auto; }
.studio-skills-button .hub-icon { width:14px; height:14px; }
.modal-overlay[data-surface='skills'] .modal { max-width:900px; }
.studio-skills-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 0 23px; }
.studio-skills-toolbar h3 { font-size:22px; font-weight:600; margin:0 0 10px; }
.studio-skills-toolbar p { margin:0; color:var(--color-text-secondary); font-size:13px; line-height:1.8; }
.studio-skill-row { padding:22px 0; border-top:1px solid var(--color-border-light); }
.studio-skill-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; }
.studio-skill-heading h4 { font-size:17px; font-weight:600; margin:0 0 8px; }
.studio-skill-heading p { color:var(--color-text-secondary); font-size:13px; line-height:1.8; margin:0 0 9px; }
.studio-skill-heading small { font-size:11px; color:var(--color-text-secondary); }
.studio-skill-choice { display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:12px; min-height:35px; cursor:pointer; }
.studio-skill-choice input { accent-color:var(--color-accent); width:15px; height:15px; }
.studio-skill-row details { margin-top:13px; }
.studio-skill-row summary { display:inline-block; cursor:pointer; color:var(--color-accent); font-size:12px; min-height:30px; padding:3px 0; }
.studio-skill-body { padding:20px; margin-top:10px; background:var(--color-surface-alt); border-radius:9px; color:var(--color-text); white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.9; max-height:450px; overflow:auto; }
.studio-recent-list { display:flex; flex-direction:column; }
.studio-recent-list button { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 0; border:0; border-bottom:1px solid var(--color-border-light); background:none; color:var(--color-text); font:inherit; text-align:left; cursor:pointer; }
.studio-recent-list strong { font-size:15px; font-weight:600; }
.studio-recent-list span { color:var(--color-text-secondary); font-size:11px; }
@media(max-width:1100px) { #view-studio .studio-view-tab .hub-icon { display:none; } #view-studio .studio-view-tab { padding:6px 8px; } }
@media(max-width:760px) {
  #view-studio .studio-view-tab { padding:5px 7px; min-height:32px; }
  #view-studio .studio-preview-header { padding:6px 5px; }
  #view-studio .studio-preview-header-right { gap:1px; }
  .studio-device-options button { width:24px; }
  #view-studio .studio-preview-tool { min-width:25px; padding:4px; }
  .studio-content-state { padding:2px 10px 4px; min-height:28px; gap:7px; font-size:11px; flex-wrap:wrap; }
  .studio-content-state>button { font-size:11px; }
  .studio-content-toolbar { padding:7px 10px; gap:6px; min-height:43px; flex-wrap:wrap; }
  .studio-content-toolbar .btn { font-size:11px; padding:5px 7px; }
  .studio-document-modes button { font-size:11px; padding:5px 7px; }
  .studio-document-split { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
  #studioDesignInput { padding:18px; border-right:0; font-size:16px; }
  .studio-document-reading { padding:18px; border-top:1px solid var(--color-border-light); }
  #studioDesignPanel[data-mode='edit'] .studio-document-split,#studioDesignPanel[data-mode='read'] .studio-document-split { grid-template-rows:minmax(0,1fr); }
  #studioSourceInput { padding:16px; font-size:13px; }
  .studio-asset-grid { padding:17px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 13px; }
  .studio-asset-preview { height:110px; }
  .studio-asset-item>strong { font-size:12px; }
  .studio-asset-item>div:last-child { flex-direction:column; gap:1px; }
  .studio-skills-toolbar { align-items:flex-start; gap:13px; }
  .studio-skills-toolbar p { font-size:12px; }
  .studio-skill-heading { gap:12px; flex-wrap:wrap; }
  .studio-skill-heading h4 { font-size:16px; }
  .studio-skill-choice { margin-left:auto; }
  .studio-board-zoom { gap:2px; }
  #studioBoardHint { flex-basis:100%; order:2; }
}