.studio-workspace {
   --tt-bg: var(--surface);
   --tt-border: var(--border);
   --tt-hover: var(--surface-2);
   --tt-active: var(--surface-3);
   --tt-text: var(--text);
   --tt-muted: var(--text-2);
   --tt-radius: 12px;
   --tt-btn-radius: 10px;
   --tt-shadow: 0 8px 24px var(--shadow-color);
   --tt-code-bg: var(--surface-2);
   --tt-mark-bg: var(--warning-soft);
}

#post-page.add:where(.studio-workspace, .studio-workspace *) { background: var(--bg-soft); padding-bottom: 50px; min-height: calc(100vh - 61px); }
#editor-root:where(.studio-workspace, .studio-workspace *) { margin: 0 auto; }

.tt-toolbar-wrap:where(.studio-workspace, .studio-workspace *) { position: sticky; top: var(--header-height, 0); z-index: 90; }

/* BASE TOOLBAR — shared между основным и лайт */
.tiptap-toolbar:where(.studio-workspace, .studio-workspace *) {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   gap: 4px;
   padding: 8px 10px;
   background: var(--tt-bg);
}

.tiptap-toolbar--full:where(.studio-workspace, .studio-workspace *) {
   flex-wrap: wrap;
   padding: 15px 10px 5px;
   position: sticky;
   top: 0;
   z-index: 50;
}

.tiptap-toolbar--lite:where(.studio-workspace, .studio-workspace *) {
   border: 1.5px solid var(--tt-border);
   border-bottom: none;
   border-radius: var(--tt-radius) var(--tt-radius) 0 0;
   padding: 6px 8px;
   background: var(--tt-hover);
   position: static;
}

.tiptap-toolbar svg:where(.studio-workspace, .studio-workspace *) { width: 18px !important; height: 18px !important; }

.tiptap-toolbar-group:where(.studio-workspace, .studio-workspace *) { display: flex; align-items: center; gap: 2px; }
.tiptap-separator:where(.studio-workspace, .studio-workspace *) { width: 1px; height: 20px; background: var(--tt-border); margin: 0 4px; flex-shrink: 0; }
.tiptap-button-wrapper:where(.studio-workspace, .studio-workspace *) { position: relative; display: inline-block; }

.tiptap-button:where(.studio-workspace, .studio-workspace *) {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   min-width: 32px; height: 32px; padding: 0 8px;
   border-radius: var(--tt-btn-radius); border: none; background: transparent;
   cursor: pointer; color: var(--tt-text);
   transition: background 0.15s ease, color 0.15s ease;
   line-height: 1; vertical-align: middle; box-sizing: border-box;
}
.tiptap-button:hover:where(.studio-workspace, .studio-workspace *) { background: var(--tt-hover); }
.tiptap-button[data-active-state="on"]:where(.studio-workspace, .studio-workspace *), .tiptap-button[aria-pressed="true"]:where(.studio-workspace, .studio-workspace *) { background: var(--tt-active); color: var(--text); }
.tiptap-button .tiptap-button-icon:where(.studio-workspace, .studio-workspace *) { width: 24px; height: 24px; flex: 0 0 24px; opacity: 0.95; }
.tiptap-button .tiptap-button-text:where(.studio-workspace, .studio-workspace *) { display: inline-flex; align-items: center; height: 100%; font-size: 13px; font-weight: 600; line-height: 1; padding: 0 4px; white-space: nowrap; }

/* DROPDOWN */
.tiptap-button-wrapper .tiptap-button-group:where(.studio-workspace, .studio-workspace *) { display: flex; flex-direction: column; gap: 2px; }
.tiptap-button-wrapper .tiptap-button[data-style="ghost"][role="menuitem"]:where(.studio-workspace, .studio-workspace *) {
   display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px;
   border: 0; border-radius: 12px; background: transparent; color: var(--tt-text); cursor: pointer; font-size: 13px;
}
.tiptap-button-wrapper .tiptap-button[data-style="ghost"][role="menuitem"]:hover:where(.studio-workspace, .studio-workspace *) { background: var(--tt-hover); }
.tiptap-button-wrapper .tiptap-button[data-style="ghost"][role="menuitem"][data-active-state="on"]:where(.studio-workspace, .studio-workspace *) { background: var(--tt-active); }

.tiptap-card:where(.studio-workspace, .studio-workspace *) {
   position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; padding: 6px;
   border-radius: 14px; background: var(--tt-bg); border: 1px solid var(--tt-border);
   box-shadow: 0 18px 40px var(--shadow-color); z-index: 9999;
}
.tiptap-card-body:where(.studio-workspace, .studio-workspace *) { padding: 4px; }
.tiptap-menu-separator:where(.studio-workspace, .studio-workspace *) { height: 1px; margin: 4px 6px; background: var(--tt-border); }

/* LINK POPOVER */
.tiptap-linkwrap:where(.studio-workspace, .studio-workspace *) { position: relative; }
.tiptap-popover:where(.studio-workspace, .studio-workspace *) {
   position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
   z-index: 9999; width: 320px; padding: 10px;
   background: var(--tt-bg); border: 1px solid var(--border);
   border-radius: 12px; box-shadow: 0 12px 30px var(--shadow-color);
}
.tiptap-input:where(.studio-workspace, .studio-workspace *) {
   width: 100%; height: 36px; box-sizing: border-box; padding: 0 10px;
   border-radius: 10px; border: 1px solid var(--border-strong); outline: none;
   font: inherit; font-size: 14px; background: var(--tt-bg); color: var(--tt-text); margin-bottom: 10px;
}
.tiptap-input:focus:where(.studio-workspace, .studio-workspace *) { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--focus); }
.tiptap-popbtn:where(.studio-workspace, .studio-workspace *) {
   height: 34px; padding: 0 12px; border-radius: 10px;
   border: 1px solid var(--border-strong); background: var(--tt-hover);
   cursor: pointer; font: inherit; font-size: 14px; color: var(--tt-text);
}
.tiptap-popbtn:hover:where(.studio-workspace, .studio-workspace *) { background: var(--tt-active); }
.tiptap-popbtn:active:where(.studio-workspace, .studio-workspace *) { transform: translateY(1px); }
.tiptap-popover .tiptap-popbtn + .tiptap-popbtn:where(.studio-workspace, .studio-workspace *) { margin-left: 8px; }
.tiptap-popover:where(.studio-workspace, .studio-workspace *)::before {
   content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
   width: 12px; height: 12px; background: var(--tt-bg);
   border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}

/* TOOLBAR RIGHT + PROGRESS */
.tiptap-toolbar-right:where(.studio-workspace, .studio-workspace *) { margin-left: auto; display: flex; align-items: center; padding-right: 8px; }
.tiptap-toolbar-status:where(.studio-workspace, .studio-workspace *) { font-size: 12px; color: var(--tt-muted); opacity: 0; transition: opacity 0.3s ease; }
.tiptap-toolbar-status[data-state="saving"]:where(.studio-workspace, .studio-workspace *), .tiptap-toolbar-status[data-state="saved"]:where(.studio-workspace, .studio-workspace *), .tiptap-toolbar-status[data-state="error"]:where(.studio-workspace, .studio-workspace *) { opacity: 1; }
.tiptap-toolbar-status[data-state="saving"]:where(.studio-workspace, .studio-workspace *) { color: var(--text-3); }
.tiptap-toolbar-status[data-state="saved"]:where(.studio-workspace, .studio-workspace *)  { color: var(--success); }
.tiptap-toolbar-status[data-state="error"]:where(.studio-workspace, .studio-workspace *)  { color: var(--danger); }

.tiptap-progress-bar:where(.studio-workspace, .studio-workspace *) { height: 3px; width: 100%; overflow: hidden; position: sticky; background: var(--tt-bg); top: 52px; z-index: 89; }
.tiptap-progress-fill:where(.studio-workspace, .studio-workspace *) { height: 100%; width: 0%; background: var(--info); border-radius: 0 2px 2px 0; opacity: 0; transition: width 0.4s ease; box-shadow: 0 0 8px var(--focus); }
.tiptap-progress-bar[data-active="0"] .tiptap-progress-fill:where(.studio-workspace, .studio-workspace *) { transition: width 0.4s ease, opacity 0.6s ease 0.3s; opacity: 0; }
.tiptap-progress-bar[data-active="1"] .tiptap-progress-fill:where(.studio-workspace, .studio-workspace *), .tiptap-progress-bar.is-active .tiptap-progress-fill:where(.studio-workspace, .studio-workspace *) { opacity: 1; }

/* PROSEMIRROR */
#tiptap-editor .ProseMirror:where(.studio-workspace, .studio-workspace *) { min-height: calc(100vh - 211px); }

.ed-lite-editor .ProseMirror:where(.studio-workspace, .studio-workspace *) {
   min-height: 120px;
   padding: 12px 14px;
   border: 1.5px solid var(--tt-border);
   border-top: none;
   border-radius: 0 0 var(--tt-radius) var(--tt-radius);
   font-size: 15px;
}

.ProseMirror:where(.studio-workspace, .studio-workspace *) {
   outline: none; padding: 40px; min-height: 400px;
   font-size: 16px; line-height: 1.7;
   color: var(--tt-text); background: var(--tt-bg);
   border-top: none; border-radius: 0 0 var(--tt-radius) var(--tt-radius);
   font-family: inherit;
}
.ProseMirror .Tiptap-mathematics-editor:where(.studio-workspace, .studio-workspace *) { font-family: monospace; background: var(--tt-code-bg); border-radius: 4px; padding: 2px 6px; font-size: 0.9em; }
.ProseMirror .Tiptap-mathematics-render:where(.studio-workspace, .studio-workspace *) { cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.ProseMirror .Tiptap-mathematics-render:hover:where(.studio-workspace, .studio-workspace *) { background: var(--tt-code-bg); }
.ProseMirror pre:where(.studio-workspace, .studio-workspace *) { background: #1e1e1e; width: 80%; color: #d4d4d4; font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace; padding: 1.25rem 1.5rem; border-radius: 12px; margin: 1.5rem 0; overflow-x: auto; line-height: 1.6; border: 1px solid rgba(255,255,255,0.1); white-space: pre-wrap; }
.ProseMirror pre code:where(.studio-workspace, .studio-workspace *) { display: block; background: transparent; color: inherit; padding: 0; margin: 0; border-radius: 0; line-height: inherit; font-size: inherit; font-family: inherit; white-space: inherit; }
.ProseMirror pre code span:where(.studio-workspace, .studio-workspace *) { line-height: inherit; }
.ProseMirror blockquote:where(.studio-workspace, .studio-workspace *) { border-left: 4px solid var(--tt-border); padding-left: 1rem; font-style: italic; color: var(--tt-muted); }
.ProseMirror em:where(.studio-workspace, .studio-workspace *) { font-style: italic; }
.ProseMirror img:where(.studio-workspace, .studio-workspace *) { margin: 18px 0; }
.ProseMirror ul:where(.studio-workspace, .studio-workspace *), .ProseMirror ol:where(.studio-workspace, .studio-workspace *) { padding-left: 20px; }
.ProseMirror a:where(.studio-workspace, .studio-workspace *) { color: var(--link); text-decoration: underline; }

.tiptap p.is-editor-empty:first-child:where(.studio-workspace, .studio-workspace *)::before, .ProseMirror h1.is-empty.is-editor-empty:where(.studio-workspace, .studio-workspace *)::before, .ProseMirror p.is-empty:first-child:where(.studio-workspace, .studio-workspace *)::before {
   content: attr(data-placeholder); float: left; color: var(--text-3); pointer-events: none; height: 0;
}

/* HIGHLIGHT PALETTE */
.tiptap-highlightwrap:where(.studio-workspace, .studio-workspace *) { position: relative; }
.tiptap-hl-popover:where(.studio-workspace, .studio-workspace *) { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(20,20,20,.85); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; padding: 8px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9999; }
.tiptap-hl-row:where(.studio-workspace, .studio-workspace *) { display: flex; align-items: center; gap: 10px; }
.tiptap-hl-swatch:where(.studio-workspace, .studio-workspace *) { width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); outline: none; cursor: pointer; padding: 0; }
.tiptap-hl-swatch:hover:where(.studio-workspace, .studio-workspace *) { transform: scale(1.06); }
.tiptap-hl-swatch.is-active:where(.studio-workspace, .studio-workspace *) { border-color: rgba(255,255,255,.75); }
.tiptap-hl-sep:where(.studio-workspace, .studio-workspace *) { width: 1px; height: 18px; background: rgba(255,255,255,.18); margin: 0 2px; }
.tiptap-hl-clear:where(.studio-workspace, .studio-workspace *) { width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tiptap-hl-clear:hover:where(.studio-workspace, .studio-workspace *) { background: rgba(255,255,255,.10); }

/* HLJS */
.hljs-comment:where(.studio-workspace, .studio-workspace *), .hljs-quote:where(.studio-workspace, .studio-workspace *) { color: #6a9955; }
.hljs-keyword:where(.studio-workspace, .studio-workspace *), .hljs-selector-tag:where(.studio-workspace, .studio-workspace *) { color: #569cd6; }
.hljs-string:where(.studio-workspace, .studio-workspace *), .hljs-doctag:where(.studio-workspace, .studio-workspace *) { color: #ce9178; }
.hljs-title:where(.studio-workspace, .studio-workspace *), .hljs-section:where(.studio-workspace, .studio-workspace *), .hljs-selector-id:where(.studio-workspace, .studio-workspace *) { color: #dcdcaa; }
.hljs-variable:where(.studio-workspace, .studio-workspace *), .hljs-template-variable:where(.studio-workspace, .studio-workspace *), .hljs-attr:where(.studio-workspace, .studio-workspace *) { color: #9cdcfe; }
.hljs-type:where(.studio-workspace, .studio-workspace *), .hljs-built_in:where(.studio-workspace, .studio-workspace *) { color: #4ec9b0; }
.hljs-number:where(.studio-workspace, .studio-workspace *), .hljs-literal:where(.studio-workspace, .studio-workspace *) { color: #b5cea8; }

/* RESPONSIVE */
@media (max-width: 768px) {
   .tiptap-toolbar--full:where(.studio-workspace, .studio-workspace *) { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
   .tiptap-toolbar--full:where(.studio-workspace, .studio-workspace *)::-webkit-scrollbar { display: none; }
   .tiptap-toolbar--lite:where(.studio-workspace, .studio-workspace *) { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
   .tiptap-toolbar--lite:where(.studio-workspace, .studio-workspace *)::-webkit-scrollbar { display: none; }
   .tiptap-toolbar-group:where(.studio-workspace, .studio-workspace *) { flex-wrap: nowrap !important; flex-shrink: 0 !important; }
   .tiptap-separator:where(.studio-workspace, .studio-workspace *) { flex-shrink: 0 !important; }
   .tiptap-button:where(.studio-workspace, .studio-workspace *) { min-width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; }
   .tiptap-toolbar-right:where(.studio-workspace, .studio-workspace *) { display: none; }
   .ProseMirror:where(.studio-workspace, .studio-workspace *) { padding: 20px 16px 40px; font-size: 16px; }
   .tiptap-progress-bar:where(.studio-workspace, .studio-workspace *) { top: 58px; }
   .tiptap-card:where(.studio-workspace, .studio-workspace *) { position: fixed; bottom: 0; left: 0; right: 0; top: auto; min-width: unset; width: 100%; border-radius: 16px 16px 0 0; padding: 12px 12px 24px; }
   .tiptap-popover:where(.studio-workspace, .studio-workspace *) { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100vw - 32px); max-width: 360px; }
   .tiptap-popover:where(.studio-workspace, .studio-workspace *)::before { display: none; }
   .tiptap-hl-popover:where(.studio-workspace, .studio-workspace *) { position: fixed; top: auto; bottom: 80px; left: 50%; transform: translateX(-50%); }
   .ProseMirror pre:where(.studio-workspace, .studio-workspace *) { width: 100%; }
}

/* ── CHOOSE PAGE ─────────────────────────────────── */
.choose-page:where(.studio-workspace, .studio-workspace *) { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; background: var(--tt-bg); }
.choose-header:where(.studio-workspace, .studio-workspace *) { text-align: center; margin-bottom: 48px; }
.choose-header h1:where(.studio-workspace, .studio-workspace *) { font-size: 28px; font-weight: 700; color: var(--tt-text); margin: 0 0 8px; letter-spacing: -0.02em; }
.choose-header p:where(.studio-workspace, .studio-workspace *) { font-size: 15px; color: var(--tt-muted); margin: 0; }
.choose-grid:where(.studio-workspace, .studio-workspace *) { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; width: 100%; max-width: 880px; }
.choose-card:where(.studio-workspace, .studio-workspace *) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px 18px 24px; background: var(--tt-bg); border: 1.5px solid var(--tt-border); border-radius: 16px; cursor: pointer; text-decoration: none; color: var(--tt-text); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.choose-card:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--link); box-shadow: 0 4px 20px var(--shadow-color); transform: translateY(-2px); color: var(--tt-text); text-decoration: none; }
.choose-card-icon:where(.studio-workspace, .studio-workspace *) { width: 52px; height: 52px; border-radius: 14px; background: var(--tt-hover); display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.choose-card:hover .choose-card-icon:where(.studio-workspace, .studio-workspace *) { background: var(--info-soft); }
.choose-card-icon svg:where(.studio-workspace, .studio-workspace *) { width: 24px; height: 24px; stroke: var(--tt-muted); fill: none; transition: stroke 0.15s; }
.choose-card:hover .choose-card-icon svg:where(.studio-workspace, .studio-workspace *) { stroke: var(--link); }
.choose-card-label:where(.studio-workspace, .studio-workspace *) { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-align: center; }
.choose-card-desc:where(.studio-workspace, .studio-workspace *) { font-size: 12px; color: var(--tt-muted); text-align: center; line-height: 1.4; }

/* ── STRUCTURED EDITOR ───────────────────────────── */
.ed-structured-page:where(.studio-workspace, .studio-workspace *) { max-width: 780px; margin: 0 auto; padding: 40px 24px 100px; background: var(--tt-bg); min-height: 100vh; }
.ed-topbar:where(.studio-workspace, .studio-workspace *) { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; position: sticky; top: var(--header-height, 0); background: var(--tt-bg); padding: 12px 0; z-index: 80; border-bottom: 1px solid var(--tt-border); }
.ed-topbar-back:where(.studio-workspace, .studio-workspace *) { font-size: 13px; color: var(--tt-muted); text-decoration: none; transition: color 0.15s; }
.ed-topbar-back:hover:where(.studio-workspace, .studio-workspace *) { color: var(--tt-text); }
.ed-topbar-spacer:where(.studio-workspace, .studio-workspace *) { flex: 1; }
.ed-status:where(.studio-workspace, .studio-workspace *) { font-size: 13px; color: var(--tt-muted); transition: color 0.2s; }
.ed-status[data-state="saving"]:where(.studio-workspace, .studio-workspace *) { color: var(--tt-muted); }
.ed-status[data-state="saved"]:where(.studio-workspace, .studio-workspace *)  { color: var(--success); }
.ed-status[data-state="error"]:where(.studio-workspace, .studio-workspace *)  { color: var(--danger); }
.ed-save-btn:where(.studio-workspace, .studio-workspace *) { padding: 8px 20px; background: var(--info); color: var(--accent-text); border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, opacity 0.15s; }
.ed-save-btn:hover:where(.studio-workspace, .studio-workspace *) { background: color-mix(in srgb, var(--info) 85%, var(--text)); }
.ed-save-btn:disabled:where(.studio-workspace, .studio-workspace *) { opacity: 0.5; cursor: not-allowed; }
.ed-publish-btn:where(.studio-workspace, .studio-workspace *) { padding: 8px 20px; background: transparent; color: var(--link); border: 1.5px solid var(--link); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; transition: background 0.15s, color 0.15s; }
.ed-publish-btn:hover:where(.studio-workspace, .studio-workspace *) { background: var(--link); color: var(--accent-text); }
.ed-section:where(.studio-workspace, .studio-workspace *) { margin-bottom: 32px; }
.ed-label:where(.studio-workspace, .studio-workspace *) { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tt-muted); margin-bottom: 10px; }
.ed-title-input:where(.studio-workspace, .studio-workspace *) { width: 100%; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; border: none; outline: none; background: transparent; color: var(--tt-text); padding: 0; resize: none; font-family: inherit; }
.ed-title-input:where(.studio-workspace, .studio-workspace *)::placeholder { color: var(--text-3); }
.ed-input:where(.studio-workspace, .studio-workspace *) { width: 100%; padding: 9px 12px; border: 1.5px solid var(--tt-border); border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--tt-bg); color: var(--tt-text); outline: none; box-sizing: border-box; transition: border-color 0.15s; }
.ed-input:focus:where(.studio-workspace, .studio-workspace *) { border-color: var(--link); }
.ed-input:where(.studio-workspace, .studio-workspace *)::placeholder { color: var(--text-3); }

/* GALLERY */
.ed-photo-grid:where(.studio-workspace, .studio-workspace *) { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ed-photo-item:where(.studio-workspace, .studio-workspace *) { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--tt-hover); }
.ed-photo-item img:where(.studio-workspace, .studio-workspace *) { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-photo-remove:where(.studio-workspace, .studio-workspace *) { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; background: rgba(0,0,0,0.55); border: none; border-radius: 50%; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; }
.ed-photo-item:hover .ed-photo-remove:where(.studio-workspace, .studio-workspace *) { opacity: 1; }
.ed-upload-zone:where(.studio-workspace, .studio-workspace *) { aspect-ratio: 1; border: 2px dashed var(--tt-border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--tt-hover); }
.ed-upload-zone:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--link); background: var(--info-soft); }
.ed-upload-zone svg:where(.studio-workspace, .studio-workspace *) { width: 22px; height: 22px; stroke: var(--tt-muted); fill: none; transition: stroke 0.15s; }
.ed-upload-zone span:where(.studio-workspace, .studio-workspace *) { font-size: 12px; color: var(--tt-muted); transition: color 0.15s; }
.ed-upload-zone:hover svg:where(.studio-workspace, .studio-workspace *) { stroke: var(--link); }
.ed-upload-zone:hover span:where(.studio-workspace, .studio-workspace *) { color: var(--link); }

/* RECIPE */
.ed-meta-row:where(.studio-workspace, .studio-workspace *) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ed-meta-field:where(.studio-workspace, .studio-workspace *) { display: flex; flex-direction: column; gap: 6px; }
.ed-meta-label:where(.studio-workspace, .studio-workspace *) { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tt-muted); }
.ed-time-row:where(.studio-workspace, .studio-workspace *) { display: flex; gap: 6px; }
.ed-time-row .ed-input:where(.studio-workspace, .studio-workspace *) { width: 50%; }
.ed-cover-wrap:where(.studio-workspace, .studio-workspace *) { position: relative; width: 100%; max-width: 360px; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: var(--tt-hover); border: 2px dashed var(--tt-border); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: border-color 0.15s; }
.ed-cover-wrap:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--link); }
.ed-cover-wrap.has-image:where(.studio-workspace, .studio-workspace *) { border: none; cursor: default; }
.ed-cover-wrap img:where(.studio-workspace, .studio-workspace *) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-cover-overlay:where(.studio-workspace, .studio-workspace *) { position: absolute; inset: 0; background: rgba(0,0,0,0.38); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; }
.ed-cover-wrap:hover .ed-cover-overlay:where(.studio-workspace, .studio-workspace *) { opacity: 1; }
.ed-cover-overlay span:where(.studio-workspace, .studio-workspace *) { color: #fff; font-size: 13px; font-weight: 600; }
.ed-cover-placeholder:where(.studio-workspace, .studio-workspace *) { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--tt-muted); font-size: 13px; }
.ed-cover-placeholder svg:where(.studio-workspace, .studio-workspace *) { width: 28px; height: 28px; stroke: var(--tt-muted); fill: none; }
.ed-ingredient-row:where(.studio-workspace, .studio-workspace *) { display: grid; grid-template-columns: 1fr 90px 110px 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.ed-ingredient-row .ed-input:where(.studio-workspace, .studio-workspace *) { margin: 0; }
.ed-remove-btn:where(.studio-workspace, .studio-workspace *) { width: 34px; height: 34px; flex-shrink: 0; background: transparent; border: 1.5px solid var(--tt-border); border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--tt-muted); display: flex; align-items: center; justify-content: center; transition: border-color 0.12s, color 0.12s; line-height: 1; }
.ed-remove-btn:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--danger); color: var(--danger); }
.ed-add-btn:where(.studio-workspace, .studio-workspace *) { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; background: transparent; border: 1.5px dashed var(--tt-border); border-radius: 10px; cursor: pointer; font-size: 13px; font-family: inherit; color: var(--tt-muted); transition: border-color 0.12s, color 0.12s; }
.ed-add-btn:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--link); color: var(--link); }
.ed-step-card:where(.studio-workspace, .studio-workspace *) { border: 1.5px solid var(--tt-border); border-radius: 14px; padding: 18px; margin-bottom: 12px; background: var(--tt-bg); transition: border-color 0.15s; }
.ed-step-card:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--tt-active); }
.ed-step-header:where(.studio-workspace, .studio-workspace *) { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ed-step-num:where(.studio-workspace, .studio-workspace *) { width: 28px; height: 28px; background: var(--info); color: var(--accent-text); border-radius: 50%; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ed-step-title:where(.studio-workspace, .studio-workspace *) { font-size: 13px; font-weight: 600; color: var(--tt-muted); flex: 1; }
.ed-step-fields:where(.studio-workspace, .studio-workspace *) { display: flex; flex-direction: column; gap: 12px; }
.ed-step-photo-wrap:where(.studio-workspace, .studio-workspace *) { width: 100%; height: 180px; border-radius: 10px; overflow: hidden; background: var(--tt-hover); border: 2px dashed var(--tt-border); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--tt-muted); transition: border-color 0.15s; position: relative; }
.ed-step-photo-wrap:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--link); }
.ed-step-photo-wrap.has-image:where(.studio-workspace, .studio-workspace *) { border: none; cursor: default; }
.ed-step-photo-wrap img:where(.studio-workspace, .studio-workspace *) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-step-photo-wrap svg:where(.studio-workspace, .studio-workspace *) { width: 20px; height: 20px; stroke: var(--tt-muted); fill: none; }
.ed-step-photo-overlay:where(.studio-workspace, .studio-workspace *) { position: absolute; inset: 0; background: rgba(0,0,0,0.38); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; color: #fff; font-size: 13px; font-weight: 600; }
.ed-step-photo-wrap:hover .ed-step-photo-overlay:where(.studio-workspace, .studio-workspace *) { opacity: 1; }
.ed-step-time-row:where(.studio-workspace, .studio-workspace *) { display: flex; align-items: center; gap: 8px; }
.ed-step-time-row label:where(.studio-workspace, .studio-workspace *) { font-size: 12px; color: var(--tt-muted); white-space: nowrap; }
.ed-step-time-row .ed-input:where(.studio-workspace, .studio-workspace *) { width: 80px; }
.ed-step-time-row span:where(.studio-workspace, .studio-workspace *) { font-size: 12px; color: var(--tt-muted); }

/* VIDEO */
.ed-video-upload-zone:where(.studio-workspace, .studio-workspace *) { width: 100%; aspect-ratio: 16/9; max-height: 440px; border-radius: 14px; border: 2px dashed var(--tt-border); background: var(--tt-hover); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; position: relative; overflow: hidden; }
.ed-video-upload-zone:hover:where(.studio-workspace, .studio-workspace *) { border-color: var(--link); background: var(--info-soft); }
.ed-video-upload-zone.has-video:where(.studio-workspace, .studio-workspace *) { border: none; cursor: default; background: #000; }
.ed-video-upload-zone video:where(.studio-workspace, .studio-workspace *) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ed-video-upload-icon:where(.studio-workspace, .studio-workspace *) { width: 62px; height: 62px; border-radius: 50%; background: var(--tt-bg); display: flex; align-items: center; justify-content: center; box-shadow: var(--tt-shadow); }
.ed-video-upload-icon svg:where(.studio-workspace, .studio-workspace *) { width: 28px; height: 28px; stroke: var(--link); fill: none; }
.ed-video-upload-text:where(.studio-workspace, .studio-workspace *) { text-align: center; }
.ed-video-upload-text strong:where(.studio-workspace, .studio-workspace *) { display: block; font-size: 15px; font-weight: 600; color: var(--tt-text); margin-bottom: 4px; }
.ed-video-upload-text span:where(.studio-workspace, .studio-workspace *) { font-size: 12px; color: var(--tt-muted); }
.ed-video-progress:where(.studio-workspace, .studio-workspace *) { width: 75%; height: 4px; background: var(--tt-border); border-radius: 2px; overflow: hidden; display: none; }
.ed-video-progress-bar:where(.studio-workspace, .studio-workspace *) { height: 100%; width: 0%; background: var(--info); border-radius: 2px; transition: width 0.2s ease; }
.ed-video-change-btn:where(.studio-workspace, .studio-workspace *) { position: absolute; bottom: 12px; right: 12px; padding: 6px 14px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-family: inherit; cursor: pointer; z-index: 2; transition: background 0.15s; backdrop-filter: blur(4px); }
.ed-video-change-btn:hover:where(.studio-workspace, .studio-workspace *) { background: rgba(0,0,0,0.8); }

@media (max-width: 768px) {
   .choose-grid:where(.studio-workspace, .studio-workspace *) { grid-template-columns: repeat(2, 1fr); }
   .choose-header h1:where(.studio-workspace, .studio-workspace *) { font-size: 22px; }
   .ed-structured-page:where(.studio-workspace, .studio-workspace *) { padding: 20px 16px 80px; }
   .ed-topbar:where(.studio-workspace, .studio-workspace *) { gap: 8px; padding: 10px 0; }
   .ed-title-input:where(.studio-workspace, .studio-workspace *) { font-size: 22px; }
   .ed-meta-row:where(.studio-workspace, .studio-workspace *) { grid-template-columns: repeat(2, 1fr); }
   .ed-ingredient-row:where(.studio-workspace, .studio-workspace *) { grid-template-columns: 1fr 70px 90px 34px; gap: 6px; }
   .ed-photo-grid:where(.studio-workspace, .studio-workspace *) { grid-template-columns: repeat(3, 1fr); }
   .ed-video-upload-zone:where(.studio-workspace, .studio-workspace *) { aspect-ratio: 4/3; }
   .ed-save-btn:where(.studio-workspace, .studio-workspace *), .ed-publish-btn:where(.studio-workspace, .studio-workspace *) { padding: 7px 14px; font-size: 13px; }
   .ed-status:where(.studio-workspace, .studio-workspace *) { display: none; }
}

@media (max-width: 480px) {
   .choose-grid:where(.studio-workspace, .studio-workspace *) { grid-template-columns: 1fr 1fr; gap: 10px; }
   .choose-card:where(.studio-workspace, .studio-workspace *) { padding: 20px 12px; gap: 8px; }
   .choose-card-desc:where(.studio-workspace, .studio-workspace *) { display: none; }
   .ed-ingredient-row:where(.studio-workspace, .studio-workspace *) { grid-template-columns: 1fr 60px 80px 30px; }
}