/* Shared tokens: 4 px spacing, clear surfaces, consistent controls and focus. */
:root{--pro-bg:#eef1f4;--pro-paper:#fff;--pro-ink:#1d2a36;--pro-muted:#647486;--pro-line:#dde4eb;--pro-accent:#116b58;--pro-focus:#2a8c74}
.studioPro{background:var(--pro-bg);color:var(--pro-ink);font-size:12px}
.studioPro header{background:#15252d;color:#f5faf8;border:0;height:58px;padding:8px 16px}
.studioPro header small{color:#bdcdc9}.studioPro header h1{font-weight:750;letter-spacing:-.3px}
.studioPro header .logoMark{background:#28443f;color:#b9f0df;border-radius:10px}
.studioPro .studioHomeBtn{border-color:#526760;background:#203a34;color:#e4f5ee}
.studioPro .studioNav{position:sticky;top:58px;height:44px;min-height:44px;background:white;padding:5px 12px;gap:5px;border-bottom:1px solid var(--pro-line)}
.studioPro .studioNav button{font-weight:650;border-radius:7px;min-height:32px}
.studioPro .offlineBadge{margin-left:auto;font-size:10px}
.studioPro .btn{min-height:34px;border-radius:8px;border-color:var(--pro-line);font-weight:650;font-size:11px;box-shadow:none}
.studioPro .btn.primary{background:var(--pro-accent);border-color:var(--pro-accent);color:white}
.studioPro button:focus-visible,.studioPro input:focus-visible,.studioPro textarea:focus-visible,.studioPro select:focus-visible{outline:2px solid var(--pro-focus);outline-offset:2px}
.studioPro .gallery{border-color:var(--pro-line);background:#f9fbfc;padding:12px}
.studioPro .gallery h2{font-size:12px}.studioPro .gallery>.hint,.studioPro #keepTemplateColorsNote{display:none}
.studioPro .tile{border-radius:8px;border-color:#e0e7ed}.studioPro .tile.active{border-color:var(--pro-accent);background:#eef8f4}
.studioPro .stage{background:radial-gradient(#d4dce2 .7px,transparent .7px);background-size:12px 12px;position:relative}
.studioPro .stageBar{margin:0 0 8px;max-width:none;gap:6px}
.studioPro .stageBar h2{font-size:12px;font-weight:700}
.studioPro .faceSwitch{background:#e1e8ec;border:1px solid #d4dfe4;border-radius:9px}
.studioPro .faceSwitch button{min-height:32px;padding:4px 12px;font-size:11px}
.studioPro .faceSwitch button.active{background:white;color:var(--pro-accent)}
.studioPro .previewWrap{margin:auto;gap:12px;max-width:900px;width:100%}
.studioPro .cardSvg{box-shadow:0 8px 26px #24354124;border-radius:6px}
.studioPro .settings{background:white;border-color:var(--pro-line)}
.studioPro .settingsHead{background:white;border-bottom:1px solid var(--pro-line);padding:10px}
.studioPro .settingsHead h2{font-size:13px;margin:9px 0 4px;color:var(--pro-ink)}
.studioPro .repairActions{grid-template-columns:minmax(45px,1fr) auto auto;gap:4px}
.studioPro #projectName{grid-column:1/-1;padding:7px 9px;min-height:34px;background:#f8fafc;border-color:var(--pro-line);font-size:12px}
.studioPro #proSaveCopy{grid-column:1;grid-row:2}.studioPro #saveNamedProject{grid-column:2;grid-row:2}.studioPro #revertEdits{grid-column:3;grid-row:2}
.studioPro #draftStatus{font-size:10px;margin:5px 0 0;min-height:14px}
.studioPro .cardLanguageRow{font-size:10px;margin-top:6px}
.studioPro .settingsBody{padding:10px}
.studioPro .field{border:1px solid #e5eaf0;border-radius:8px;padding:7px;background:#fbfcfd}
.studioPro .field label{color:#405568;font-size:10px;font-weight:650;margin-bottom:4px}
.studioPro .field input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),.studioPro .field select,.studioPro .field textarea{min-height:36px;border-radius:6px;border:1px solid #d7e1e8;background:#fff;color:#1e3344;font-size:12px;padding:7px}
.studioPro .field textarea{min-height:70px;line-height:1.6}
.studioPro .hint{font-size:10px;line-height:1.55;color:var(--pro-muted)}
.studioPro .form{gap:7px}.studioPro .sectionTitle{color:#355865;margin:14px 0 7px}
.studioPro .mediaBackLink,.studioPro #expandPreview{display:none!important}
#proToolbar{display:flex;justify-content:space-between;gap:6px;margin-bottom:12px;flex-shrink:0}
.proToolGroup{display:flex;gap:4px;align-items:center}
#proToolbar .btn{min-height:32px;background:#ffffffdd;padding:5px 8px;font-size:10px}
.proPanelTitle{display:flex;align-items:start;justify-content:space-between;gap:8px}.proPanelTitle h3{margin:0 0 3px;font-size:13px}.proPanelTitle p{margin:0 0 10px}
.proLayerList{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px}
.proLayer{display:flex;flex-direction:column;gap:3px;text-align:left;min-width:0;border:1px solid var(--pro-line);background:#f9fbfc;border-radius:8px;padding:8px;min-height:48px;color:#344c5b}
.proLayer span{font-weight:700;font-size:10px}.proLayer small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--pro-muted)}
.proLayer.selected{border-color:#1b8068;background:#eaf8f2;box-shadow:inset 0 0 0 1px #1b8068}
#proInspector{border-top:1px solid var(--pro-line);padding-top:10px}
.proSelectionHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px}
.proLayerActions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.proLayerActions label{display:flex;align-items:center;gap:4px;font-size:11px!important;margin:0!important;min-height:30px}
.proUnitNote{margin-top:12px}
#proSelectionBox{position:absolute;border:1.5px solid #138769;pointer-events:none;z-index:22;box-sizing:border-box;touch-action:none}
#proSelectionBox[hidden],#proInspector[hidden],#proTextField[hidden]{display:none!important}
.proHandle{pointer-events:auto;position:absolute;width:12px;height:12px;min-width:12px;min-height:12px;border:2px solid #138769;border-radius:3px;background:white;padding:0;transform:translate(-50%,-50%);touch-action:none}
.pro-nw{left:0;top:0;cursor:nwse-resize}.pro-n{left:50%;top:0;cursor:ns-resize}.pro-ne{left:100%;top:0;cursor:nesw-resize}.pro-e{left:100%;top:50%;cursor:ew-resize}.pro-se{left:100%;top:100%;cursor:nwse-resize}.pro-s{left:50%;top:100%;cursor:ns-resize}.pro-sw{left:0;top:100%;cursor:nesw-resize}.pro-w{left:0;top:50%;cursor:ew-resize}
#proSelectionBox.locked{border-style:dashed;border-color:#81909a}#proSelectionBox.locked .proHandle{display:none}
.previewWrap [data-editable]{cursor:move;touch-action:none}.previewWrap [data-locked=true]{cursor:pointer}
@media(min-width:1101px){
 .studioPro .workspace{grid-template-columns:200px minmax(240px,1fr) 350px!important}
 .studioPro[data-studio-page=workspace] .workspace{height:calc(100dvh - 102px)}
 .studioPro .stage{padding:14px!important;display:flex;flex-direction:column}
 .studioPro .previewWrap{flex:1;min-height:0;align-items:center}
 .studioPro .previewWrap .face{display:none}.studioPro .previewWrap .face.active{display:block}
 .studioPro .cardSvg.portrait{max-height:calc(100dvh - 240px);max-width:95%;width:auto!important}
 .studioPro .cardSvg:not(.portrait){max-height:calc(100dvh - 260px);width:min(100%,740px)!important}
 .studioPro .previewWrap .face h3{display:none}
}
@media(max-width:1100px){
 :root{--dock:64px;--live-preview-height:clamp(180px,31dvh,270px)}
 .studioPro header{height:50px!important;padding:6px 10px}.studioPro header small{display:none}
 .studioPro .studioNav{top:50px;height:40px;min-height:40px;padding:4px 8px}
 .studioPro .studioNav button{font-size:10px;padding:4px 7px}
 .studioPro .offlineBadge{font-size:9px;padding:5px;max-width:90px;overflow:hidden;text-overflow:ellipsis}
 .studioPro[data-studio-page=workspace] .workspace{height:calc(100dvh - 90px - var(--dock) - env(safe-area-inset-bottom))}
 .studioPro .workspace .stage{height:var(--live-preview-height);padding:6px 10px!important;overflow:hidden}
 .studioPro .workspace .stageBar{height:30px;min-height:30px;gap:4px;margin:0 0 4px}
 .studioPro .workspace .stageBar h2{max-width:150px;font-size:9px!important}
 .studioPro .workspace .faceSwitch button{min-height:28px;padding:3px 9px}
 #proToolbar{margin:0 0 5px;min-height:29px;gap:4px}
 #proToolbar .btn{min-height:29px;padding:4px 7px;font-size:10px}
 .studioPro .workspace .previewWrap{height:calc(100% - 68px);flex:1;min-height:0}
 .studioPro .workspace .previewWrap .face>div{height:100%;display:flex;align-items:center;justify-content:center}
 .studioPro .workspace .previewWrap svg.cardSvg{height:100%!important;width:auto!important;max-width:95%;max-height:100%;object-fit:contain}
 .studioPro .settingsHead{padding:7px 10px}
 .studioPro .repairActions{grid-template-columns:minmax(50px,1fr) auto auto auto}
 .studioPro #projectName{grid-row:1;grid-column:1;min-height:34px;font-size:11px}
 .studioPro #proSaveCopy{grid-row:1;grid-column:2;padding:5px 6px;font-size:9px}
 .studioPro #saveNamedProject{grid-row:1;grid-column:3;font-size:10px;padding:5px 7px}
 .studioPro #revertEdits{grid-row:1;grid-column:4;font-size:9px;padding:5px 6px}
 .studioPro #draftStatus{font-size:9px;min-height:12px;margin:3px 0}
 .studioPro .settingsHead h2{font-size:12px;margin:5px 0 2px}
 .studioPro .cardLanguageRow{margin-top:3px}
 .studioPro .settingsBody{padding:8px 10px 26px!important}
 .studioPro .mobileDock{grid-template-columns:repeat(5,minmax(0,1fr))!important;border-top:1px solid #d5e1e6!important;box-shadow:0 -3px 14px #1b29330a!important}
 .studioPro .mobileDock button{min-height:50px!important;color:#667c89!important;gap:2px!important;font-size:10px!important}
 .studioPro .mobileDock button b{font-size:19px;line-height:20px}
 .studioPro .mobileDock button.active{background:#e6f6ef!important;color:#0d6953!important}
 .studioPro .proHandle{width:18px;height:18px;min-width:18px;min-height:18px;border-radius:50%}
}
@media(max-width:359px){
 .studioPro #proSaveCopy{display:none}.studioPro .repairActions{grid-template-columns:minmax(40px,1fr) auto auto}
 .studioPro #saveNamedProject{grid-column:2}.studioPro #revertEdits{grid-column:3}
 .studioPro .studioNav{gap:2px}.studioPro .offlineBadge{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{#proToolbar,#proSelectionBox,.proHandle{display:none!important}}

#proWorkspaceTabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:9px}
#proWorkspaceTabs .btn{font-size:10px;padding:4px;min-height:32px}
@media(max-width:1100px){#proWorkspaceTabs{display:none}}

/* Responsive adaptive rules migrated from the previous second stylesheet. */
/* Studio Adaptive UX v1 — additive mobile shell, never alters printed card geometry. */
body.studioPro{--adaptive-dock:65px}
body.studioPro .btn,body.studioPro .tile,body.studioPro .proLayer{border-radius:14px}
body.studioPro .adaptiveNavRail{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x}
body.studioPro .mobileDock.adaptiveDock{z-index:70}
body.studioPro .mobileDock.adaptiveDock .adaptiveNavRail button,body.studioPro .mobileDock.adaptiveDock #adaptiveExport{
  min-width:63px;min-height:48px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;border-radius:13px;padding:3px 7px;font-size:10px;line-height:1.2;font-weight:700;
  background:transparent;color:#63746b;box-shadow:none
}
body.studioPro .mobileDock.adaptiveDock .adaptiveNavRail button[aria-current=page]{background:#e4f1e9;color:#195f4c}
body.studioPro .mobileDock.adaptiveDock #adaptiveExport{background:#246951;color:#fff}
body.studioPro .previewWrap [data-editable],body.studioPro .previewWrap [data-region]{touch-action:pan-y!important;cursor:pointer}
body.studioPro.studioMoveMode .previewWrap [data-editable],body.studioPro.studioMoveMode .previewWrap [data-region]{touch-action:none!important;cursor:move}
body.studioPro .proHandle{touch-action:none!important}
body.studioPro .sizeRow input[type=range]{touch-action:pan-y!important}
body.studioPro .adaptiveReferenceLibrary{border:1px solid #dde6e0;border-radius:19px;padding:12px;background:#fff;margin-top:18px}
body.studioPro .adaptiveReferenceLibrary input{display:block;width:100%;min-height:38px;border:1px solid #d9e4de;border-radius:10px;padding:7px;margin:5px 0}
body.studioPro .adaptiveReferenceLibrary .savedLink{display:flex;gap:7px;align-items:center;border-bottom:1px solid #edf0ed;padding:8px 0}
body.studioPro .adaptiveReferenceLibrary .savedLink a{flex:1;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
body.studioPro .adaptiveReferenceLibrary .savedLink button{min-height:34px;border:1px solid #dce6df;background:white;border-radius:9px;padding:5px 9px}
@media(max-width:1100px){
  body.studioPro{--dock:var(--adaptive-dock)}
  body.studioPro[data-studio-page=workspace] .studioNav{display:none!important}
  body.studioPro[data-studio-page=workspace] .workspace{height:calc(100dvh - 50px - var(--dock) - env(safe-area-inset-bottom))!important;min-height:0;max-height:none;display:flex!important;flex-direction:column;overflow:hidden}
  body.studioPro[data-studio-page=workspace] .workspace .stage{display:flex!important;flex:none;height:clamp(245px,41dvh,355px)!important;min-height:0;padding:5px 9px!important;border-bottom:1px solid #e0e8e2;background:#f5f7f5;overflow:hidden}
  body.studioPro .workspace .stageBar{height:29px;min-height:29px;margin-bottom:2px}
  body.studioPro .workspace .stageBar h2{font-size:10px!important;max-width:125px}
  body.studioPro .workspace .faceSwitch button{min-height:28px;font-size:10px;padding:3px 9px}
  body.studioPro #proToolbar{min-height:28px;margin:0 0 2px}
  body.studioPro #proToolbar .btn{min-height:28px;padding:4px 6px;font-size:10px;border-radius:9px}
  body.studioPro .workspace .previewWrap{height:auto;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:0;padding:3px 0}
  body.studioPro .workspace .previewWrap .face{height:100%;width:100%;flex:none}
  body.studioPro .workspace .previewWrap .face>div{height:100%;display:flex;align-items:center;justify-content:center}
  body.studioPro .workspace .previewWrap svg.cardSvg{max-height:100%;max-width:96%;width:auto!important;height:100%!important;object-fit:contain}
  body.studioPro[data-studio-page=workspace] .workspace .settings,body.studioPro[data-studio-page=workspace] .workspace .gallery{flex:1;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior-y:contain}
  body.studioPro[data-studio-page=workspace] .workspace .gallery{display:none!important}
  body.studioPro[data-studio-page=workspace] .workspace[data-view=templates] .gallery{display:block!important}
  body.studioPro[data-studio-page=workspace] .workspace[data-view=templates] .settings{display:none!important}
  body.studioPro[data-studio-page=workspace] .workspace:not([data-view=templates]) .settings{display:flex!important}
  body.studioPro .settingsHead{position:sticky;top:0;z-index:22}
  body.studioPro .settingsBody{padding-bottom:25px!important}
  body.studioPro .mobileDock.adaptiveDock{display:grid!important;grid-template-columns:minmax(0,1fr) 69px!important;height:calc(var(--dock) + env(safe-area-inset-bottom))!important;padding:5px 6px calc(5px + env(safe-area-inset-bottom))!important;gap:5px;left:0;right:0;bottom:0;background:#fbfdfa!important;border-radius:0!important}
  body.studioPro[data-studio-page=references] .mobileDock.adaptiveDock{display:grid!important}
  body.studioPro[data-studio-page=references] #studioReferences{max-height:calc(100dvh - 105px);overflow-y:auto;padding-bottom:100px}
  body.studioPro[data-studio-page=home] .mobileDock.adaptiveDock{display:none!important}
  body.studioPro #quickPrint{display:none}
  body.studioPro #proWorkspaceTabs{display:none}
}
@media(min-width:1101px){body.studioPro .mobileDock.adaptiveDock{display:none!important}}
/* Single, compact, horizontal editor toolbar, one owner. */
.studioPro #proToolbar{display:flex;align-items:center;justify-content:flex-start;gap:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;white-space:nowrap;width:100%;height:42px;min-height:42px;flex:none;margin:0 0 3px}
.studioPro #proToolbar::-webkit-scrollbar{display:none}
.studioPro #proToolbar .proToolGroup{display:flex;gap:3px;flex:none;align-items:center}
.studioPro #proToolbar .studioIcon{flex:none;display:inline-flex;justify-content:center;align-items:center;min-width:40px!important;min-height:40px!important;width:40px;height:40px;padding:2px!important;border:1px solid transparent;background:transparent;color:#355e50;border-radius:13px}
.studioPro #proToolbar .studioIcon:hover,.studioPro #proToolbar .studioIcon:focus-visible{background:#e9f4ed;color:#0c664e}
.studioPro #proToolbar .studioIcon[aria-pressed=true]{background:#d9f1e4;color:#116b58}
.studioPro #proToolbar .studioToolDivider{height:20px;min-width:1px;background:#d8e6dd;flex:none}
.studioPro .mobileDock.adaptiveDock svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.studioPro .repairActions{gap:5px;margin:8px 0}
.studioPro .settingsHead{padding:7px 9px}
.studioPro .settingsHead h2{margin:2px 0 3px}
.studioPro .field{background:#fff;border:1px solid #edf1ee;border-radius:12px;padding:6px}
@media(max-width:1100px){
 .studioPro[data-studio-page=workspace] .workspace .stage{height:clamp(255px,43dvh,365px)!important}
 .studioPro #proToolbar{height:42px!important;min-height:42px!important;margin-bottom:2px!important}
 .studioPro #proToolbar .studioIcon{width:40px!important;height:40px!important}
 .studioPro .adaptiveNavRail button span{display:none}
 .studioPro .adaptiveNavRail button{min-width:50px!important}
 .studioPro .settingsHead{padding:6px 9px}
 .studioPro .settingsBody{scroll-padding-top:8px}
}
@media print{.studioPro #proToolbar{display:none!important}}