.studio-page { background: #e9eceb; color: #28332f; font-size: 13px; overflow: hidden; }
.studio-page * { letter-spacing: 0; }
.studio-page [hidden] { display: none !important; }
.studio-page button, .studio-page input, .studio-page select, .studio-page textarea { font-size: 13px; font-weight: 500; text-transform: none; color: #28332f; border-radius: 5px; box-shadow: none; background: #fff; border: 1px solid #dce1de; }
.studio-page button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; min-height: 34px; white-space: nowrap; transition: background .15s; }
.studio-page button:hover { background: #edf1ef; transform: none; }
.studio-page button:active { background: #dce7e1; }
.studio-page button:disabled { opacity: .38; }
.studio-page .primary { color: #fff; border-color: #a54630; background: #a54630; }
.studio-page .primary:hover { background: #873721; }
.studio-page .active, .studio-page button[aria-pressed="true"] { background: #fbe1d5; border-color: #edbbab; color: #83351f; }
.studio-page .icon-button { flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; border-color: transparent; background: transparent; }
.studio-page .lucide { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
.studio-page :focus-visible { outline: 2px solid #25745d; outline-offset: 2px; }
.studio-page h1, .studio-page h2, .studio-page h3 { color: #28332f; font-size: 13px; font-weight: 650; line-height: 1.4; text-transform: none; margin: 0; }
.studio-page p { color: #66736c; font-size: 12px; margin: 0; line-height: 1.5; }
.studio-page label { color: #526159; font-size: 12px; font-weight: 500; text-transform: none; gap: 6px; }
.studio-page input, .studio-page select, .studio-page textarea { padding: 7px 8px; min-width: 0; }
.studio-page textarea { min-height: 90px; max-height: 220px; line-height: 1.4; }
.studio-page input[type="color"] { padding: 3px; height: 34px; }
.studio-page input[type="range"] { accent-color: #a54630; padding: 0; }
.studio-shell { display: grid; grid-template-rows: 64px 50px minmax(0, 1fr) 30px; height: 100dvh; }
.studio-header { display: flex; align-items: center; gap: 16px; padding: 0 20px; background: #fff; border-bottom: 1px solid #dce1de; min-width: 0; }
.studio-brand { display: flex; align-items: center; gap: 8px; color: #913d27; font-size: 16px; font-weight: 750; padding-right: 20px; border-right: 1px solid #dce1de; }
.studio-brand .lucide { width: 25px; height: 25px; }
.studio-document { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; }
.studio-document h1 { white-space: nowrap; }
#fileName { color: #6a756e; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#dirtyIndicator { color: #9f5426; font-size: 11px; flex-shrink: 0; }
.local-status { display: flex; align-items: center; gap: 5px; color: #2c765a; white-space: nowrap; font-size: 11px; }
.studio-toolbar { display: flex; gap: 10px; padding: 7px 16px; border-bottom: 1px solid #dce1de; background: #fafbfa; overflow-x: auto; }
.toolbar-group { display: flex; gap: 3px; align-items: center; border-right: 1px solid #dce1de; padding-right: 10px; flex-shrink: 0; }
.toolbar-group:last-child { border-right: 0; padding-right: 0; }
.studio-toolbar .tool { background: transparent; border-color: transparent; }
.studio-toolbar .tool.active { background: #fbe1d5; border-color: #edbbab; }
.file-actions { margin-left: auto; }
.studio-workspace { display: grid; grid-template-columns: 180px minmax(0, 1fr) 250px; min-height: 0; min-width: 0; position: relative; }
.studio-workspace.pages-hidden { grid-template-columns: 0 minmax(0, 1fr) 250px; }
.studio-workspace.properties-hidden { grid-template-columns: 180px minmax(0, 1fr) 0; }
.studio-workspace.pages-hidden.properties-hidden { grid-template-columns: 0 minmax(0, 1fr) 0; }
.pages-hidden .pages-panel, .properties-hidden .studio-inspector { visibility: hidden; }
.pages-panel { min-height: 0; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #d3dcd6; background: #f7f9f8; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 16px; gap: 8px; }
.panel-heading span { color: #849087; font-size: 11px; font-variant-numeric: tabular-nums; }
.studio-page .thumbs { padding: 10px 24px; background: transparent; border: 0; flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 14px; }
.studio-page .thumb { width: 100%; aspect-ratio: 1 / 1.36; min-height: 0; border: 1px solid #cbd5ce; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 2px 4px #28332f0a; margin: 0; padding: 0 0 22px; display: grid; background: #fff; }
.studio-page .thumb.active { outline: 2px solid #b4563d; outline-offset: 2px; }
.studio-page .thumb-label { background: #f7f9f8; color: #4e5b52; font-size: 10px; height: 22px; border-top: 1px solid #e4e9e6; font-weight: 500; padding: 4px; }
.studio-page .thumb.active .thumb-label { background: #fbe1d5; color: #83351f; }
.page-actions { display: flex; justify-content: center; padding: 8px 0; background: #fff; border-top: 1px solid #dce1de; }
.document-panel { display: grid; grid-template-rows: 45px minmax(0, 1fr); min-height: 0; min-width: 0; }
.document-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; padding: 4px 12px; border-bottom: 1px solid #dce1de; overflow-x: auto; }
.page-navigation, .zoom-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
#pageInput { width: 42px; padding: 6px 2px; text-align: center; appearance: textfield; }
#pageInput::-webkit-inner-spin-button { appearance: none; }
#pageCount { min-width: 39px; padding: 0 5px; white-space: nowrap; color: #6a756e; font-size: 12px; }
#zoomSelect { width: 78px; border: none; padding-inline: 3px; }
.studio-page .stagewrap { padding: 30px; position: relative; background: #e8ece9; min-height: 0; max-height: none; overscroll-behavior: contain; }
.studio-page .stage { border: 0; background: white; box-shadow: 0 3px 18px #22372b24; }
.studio-empty { align-self: center; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.studio-empty img { object-fit: contain; width: 150px; height: 150px; mix-blend-mode: multiply; }
.studio-empty h2 { font-size: 23px; }
.studio-empty span { font-size: 12px; color: #77857b; }
.stagewrap.drag-over { outline: 3px dashed #b4563d; outline-offset: -10px; }
.studio-inspector { background: #fff; border-left: 1px solid #d3dcd6; min-width: 0; overflow: auto; }
.property-section { padding: 16px; border-top: 1px solid #e4e9e6; display: grid; gap: 16px; }
.property-section .panel-heading { padding: 0; min-height: 18px; }
#selectionType { color: #637167; font-size: 12px; }
.property-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-style, .selection-actions { display: flex; align-items: center; gap: 5px; }
.selection-actions #clearPageBtn { margin-left: auto; font-size: 11px; }
.studio-page .caution { font-size: 11px; color: #8e4929; padding: 10px; background: #fff5e8; }
.caution a { text-decoration: underline; display: block; margin-top: 4px; }
.annotation-list { display: grid; gap: 4px; }
.studio-page .annotation-row { display: flex; text-align: left; justify-content: flex-start; align-items: center; gap: 8px; padding: 9px 7px; width: 100%; border: 1px solid transparent; background: transparent; white-space: normal; min-width: 0; }
.annotation-row .annotation-content { display: grid; min-width: 0; gap: 3px; }
.annotation-row strong { font-size: 12px; font-weight: 500; }
.annotation-row small { color: #809084; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 158px; }
.annotation-row.selected { background: #f1f6f3; border-color: #b9d0c4; }
#docInfo { overflow-wrap: anywhere; }
#formInfo { color: #66736c; font-size: 12px; line-height: 1.5; }
.studio-status { display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #fafbfa; border-top: 1px solid #d5ded8; color: #7a857e; font-size: 10px; min-width: 0; }
#status { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-status a { white-space: nowrap; }
.studio-page .note, .studio-page .shape { min-width: 0; min-height: 0; }
.studio-page .shape.whiteout { border: 0; }
.studio-page .note.selected, .studio-page .shape.selected { outline: none; }
.selection-box { position: absolute; border: 1.5px solid #27785d; pointer-events: none; z-index: 5; }
.resize-handle { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; border: 1px solid #27785d; background: #fff; pointer-events: auto; cursor: nwse-resize; }
.studio-page #editLayer[data-tool="hand"] { cursor: grab; }
.studio-page #editLayer[data-tool="hand"]:active { cursor: grabbing; }
.studio-page #editLayer[data-tool="text"] { cursor: text; }
.studio-page #editLayer:is([data-tool="highlight"], [data-tool="rectangle"], [data-tool="draw"], [data-tool="whiteout"]) { cursor: crosshair; }
#searchLayer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.search-hit { position: absolute; background: #ffc94d55; border: 1px solid #cf9c29; }
.search-hit.current { background: #ffa33288; border: 2px solid #a66a06; }
.search-panel { padding: 0 10px 10px; max-height: 45%; overflow: auto; border-bottom: 1px solid #dce1de; flex-shrink: 0; }
.search-panel form { display: flex; align-items: center; gap: 2px; }
.search-panel input { width: 100%; font-size: 12px; padding: 8px 4px; }
.search-navigation { display: flex; align-items: center; gap: 0; font-size: 11px; color: #708176; }
#searchCount { flex: 1; }
#searchResults { display: grid; gap: 3px; }
.studio-page .search-result { text-align: left; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; padding: 7px; background: transparent; border: 0; }
.search-result small { display: block; color: #75877b; margin-bottom: 3px; }
#formLayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#formLayer input, #formLayer select, #formLayer textarea { position: absolute; background: #ecf6ffdd; border: 1px solid #6b9ca9; border-radius: 0; color: #1e343c; pointer-events: auto; padding: 2px; }
#formLayer input[type="checkbox"], #formLayer input[type="radio"] { accent-color: #34765b; margin: 0; }
.studio-page .toast { border-radius: 6px; background: #254b3c; box-shadow: 0 5px 22px #15362926; bottom: 44px; }
.studio-page .toast.error { background: #82352d; }
.studio-page .toast.warn { background: #8b5a2f; }
.studio-page .modal { border-radius: 8px; background: #fff; border-color: #dce1de; box-shadow: 0 18px 50px #18352830; }
.studio-page .modal h3 { font-size: 18px; margin-bottom: 12px; }
.studio-page .modal p { font-size: 14px; }
.studio-page .modal .danger { background: #a54630; color: #fff; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 50; background: #fff; padding: 12px; }
.mobile-close { display: none !important; }
@media (max-width: 1180px) {
  .studio-workspace { grid-template-columns: 155px minmax(0, 1fr) 220px; }
  .studio-workspace.pages-hidden { grid-template-columns: 0 minmax(0, 1fr) 220px; }
  .studio-workspace.properties-hidden { grid-template-columns: 155px minmax(0, 1fr) 0; }
  .studio-header { gap: 10px; padding: 0 12px; }
  .local-status, .end-page { display: none !important; }
  .studio-document { display: grid; gap: 2px; }
  #dirtyIndicator { display: none; }
  .document-toolbar { padding: 4px; gap: 3px; }
  .studio-page .thumbs { padding: 10px 20px; }
}
@media (max-width: 900px) {
  .studio-workspace, .studio-workspace.properties-hidden { grid-template-columns: 145px minmax(0, 1fr); }
  .studio-workspace.pages-hidden, .studio-workspace.pages-hidden.properties-hidden { grid-template-columns: 0 minmax(0, 1fr); }
  .studio-inspector { position: absolute; right: 0; top: 0; bottom: 0; width: 250px; z-index: 10; box-shadow: -4px 0 20px #16302224; }
  .mobile-close { display: inline-flex !important; }
  .studio-brand { padding-right: 12px; }
  .studio-toolbar { gap: 6px; padding: 7px; }
  .toolbar-group { padding-right: 6px; }
}
@media (max-width: 600px) {
  .studio-shell { grid-template-rows: 60px 50px minmax(0, 1fr) 28px; }
  .studio-brand { border: 0; padding: 0; }
  .studio-brand span { display: none; }
  .studio-header { gap: 8px; }
  .studio-header button span { display: none; }
  .studio-header button { width: 36px; flex-shrink: 0; }
  .studio-document h1 { font-size: 12px; }
  #fileName { font-size: 10px; }
  .studio-workspace, .studio-workspace.properties-hidden, .studio-workspace.pages-hidden, .studio-workspace.pages-hidden.properties-hidden { grid-template-columns: minmax(0, 1fr); }
  .pages-panel { position: absolute; z-index: 10; left: 0; top: 0; bottom: 0; width: 172px; box-shadow: 4px 0 20px #16302224; }
  .document-toolbar { flex-wrap: wrap; justify-content: center; gap: 0; overflow: visible; padding: 3px; }
  .document-panel { grid-template-rows: auto minmax(0, 1fr); }
  .zoom-controls .icon-button, .page-navigation .icon-button { width: 30px; flex-basis: 30px; height: 30px; min-height: 30px; }
  #zoomSelect { width: 65px; font-size: 12px; }
  .studio-page .stagewrap { padding: 18px; height: auto; }
  .studio-status { gap: 8px; padding: 0 8px; }
  .studio-status a:last-child { display: none; }
  .studio-empty img { width: 110px; height: 110px; }
}
@media print { .studio-shell { display: none !important; } }