/* The desktop editor follows the same focused workflow as the phone editor. */
@media(min-width:761px){
 .studio>.studio-shell,.studio .studio-shell{width:100%!important;max-width:none!important;zoom:1!important}
 .studio:has(#studio-editor:not([hidden])){max-width:none!important;padding-inline:24px!important}
 .studio-shell>.wizard-steps{display:none!important}
 .studio-shell .wizard-side-group{display:contents!important}
 .studio-shell .wizard-side-title,.studio-shell .wizard-steps .tool-icon,.studio-shell .wizard-steps small,.studio-shell .wizard-steps .runtime-state{display:none!important}
 .studio-shell .wizard-steps .step{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-width:0!important;min-height:48px!important;width:auto!important;padding:8px 10px!important;text-align:left!important}
 .studio-shell .wizard-steps .step-number{position:static!important;display:grid!important;flex:0 0 26px!important;width:26px!important;height:26px!important;place-items:center!important;font-size:12px!important}
 .studio-shell .wizard-steps .step b{font-size:13px!important;line-height:1.2!important}
 .studio-shell .mobile-primary-tools{display:flex!important;align-items:center;gap:16px;padding:16px 24px;background:#fffdf8;border-bottom:1px solid #e3d8c5}
 .mobile-primary-tools>.step{display:flex!important;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border:1px solid #d9c9e1;border-radius:12px;background:#f5eef8;color:#50365f}
 .mobile-primary-tools>.step small,.mobile-primary-tools .design-actions-title,.mobile-primary-tools .design-actions button small{display:none!important}
 .mobile-primary-tools>.design-actions{display:flex!important;position:static!important;width:auto!important;margin:0!important;padding:0!important;gap:8px;box-shadow:none!important;background:transparent!important;border:0!important}
 .mobile-primary-tools .design-actions button{min-height:48px!important;min-width:110px!important;padding:10px 16px!important}
 .studio-shell .studio-topbar{min-height:0!important;padding:8px 24px!important;justify-content:flex-end}
 .studio-shell .editor-grid{grid-template-columns:minmax(0,1fr) 400px!important;align-items:start}
 .studio-shell .card-canvas,.studio-shell[data-active-step] .card-canvas{width:100%!important;max-width:1100px!important;justify-self:center}
 .studio-shell .gold-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .studio-shell .gold-choice img{align-self:end!important;object-fit:contain!important;width:auto!important}
 .studio-shell .gold-choice:has(input[value="025"]) img{height:40px!important;max-height:40px!important;max-width:24px!important}
 .studio-shell .gold-choice:has(input[value="075"]) img{height:51px!important;max-height:51px!important;max-width:34px!important}
 .studio-shell .gold-choice:has(input[value="200"]) img{height:67px!important;max-height:67px!important;max-width:42px!important}
 .studio-shell .gold-choice:has(input[value="500"]) img{height:92px!important;max-height:92px!important;max-width:62px!important}
 .studio-shell .wizard-side-group .step .tool-icon.illustrated{display:none!important}
 .studio-shell .mobile-primary-tools>.step .tool-icon{width:32px!important;height:32px!important;min-width:32px!important}
 .studio-shell .canvas-stage{order:0!important;position:sticky!important;top:90px!important;padding:24px!important;min-height:0!important;height:auto!important;align-content:start!important;grid-template-rows:none!important}
 .studio-shell #imageSettings .panel-help{font-size:0!important}
 .studio-shell #imageSettings .panel-help:after{content:"Fogd meg a képet a mozgatáshoz. A sarokfogantyúkkal nagyíthatod és forgathatod.";font-size:14px}
 .studio-shell .control-panel{order:1!important;padding:24px!important;border-left:1px solid #e8dfce}
 .studio-shell .mobile-workflow-bar{display:flex!important;justify-content:space-between;align-items:center;width:100%;margin-bottom:16px}
 .studio-shell .mobile-workflow-bar ol{display:flex!important}
 .mobile-workflow-bar button{padding:10px 14px;background:#fff;border:1px solid #d5c4a6;border-radius:10px;color:#694a1a;cursor:pointer}
 .mobile-workflow-bar ol{display:flex;gap:8px;list-style:none;margin:0;padding:0}
 .mobile-workflow-bar li{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1eadc;color:#665a49}
 .mobile-workflow-bar li.active{background:#a97825;color:#fff}
 .studio-shell .mobile-canvas-step{display:flex!important;gap:12px;align-items:center;width:100%;margin-bottom:10px;color:#392e20}
 .mobile-canvas-step span{padding:7px 10px;border-radius:20px;background:#f1e4c9;font-size:12px;white-space:nowrap}
 .mobile-canvas-step b{font:500 23px/1.2 Georgia,serif}
 .studio-shell .mobile-step-guidance{display:block!important;width:100%;font-size:14px;color:#746655;margin:0 0 16px}
 .studio-shell .mobile-stage-confirm:not([hidden]),.studio-shell .mobile-chip-confirm:not([hidden]){display:block!important;width:100%;margin-top:16px;min-height:48px;padding:12px;border:0;border-radius:12px;background:#a97825;color:white;font-size:15px;font-weight:700;cursor:pointer}
 .studio-shell #backgroundConfirm,.studio-shell #chipLock,.studio-shell #certificateConfirm,.studio-shell [data-done="text"],.studio-shell .friendly-next{display:none!important}
 .studio-shell .editor-panel:not([data-editor-panel="ai"])>.eyebrow,.studio-shell .editor-panel:not([data-editor-panel="ai"])>h3,.studio-shell .editor-panel:not([data-editor-panel="ai"])>.panel-help{display:none!important}
 .studio-shell #textSettings[data-lines="1"]>label:nth-of-type(2),.studio-shell #textSettings[data-lines="1"]>label:nth-of-type(3),.studio-shell #textSettings[data-lines="2"]>label:nth-of-type(3){display:none!important}
 .studio-shell #addTextLine{width:100%;padding:10px;border:1px dashed #b8872f;border-radius:10px;background:#fffaf0;color:#765016}
}

/* Desktop step 1: balanced card preview and readable plate choices. */
@media(min-width:1051px){
 .studio-shell{background:#f7f0e4!important;box-shadow:0 30px 90px rgba(50,36,18,.14)!important}
 .studio-shell .editor-grid{grid-template-columns:minmax(620px,1fr) 480px!important}
 .studio-shell .canvas-stage{padding:26px 34px 44px!important;background:linear-gradient(145deg,#f4ecdf,#e9decc)!important}
 .studio-shell .card-canvas,.studio-shell[data-active-step] .card-canvas{width:min(100%,820px)!important;max-width:820px!important}
 .studio-shell .control-panel{padding:30px!important;background:linear-gradient(180deg,#fffefb,#fbf6eb)!important}
 .studio-shell.desktop-workflow .control-panel{position:sticky!important;top:90px!important;max-height:calc(100vh - 110px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-color:#c6a86f transparent!important}
 .studio-shell .gold-options{margin:0!important}
 .studio-shell .gold-options legend{margin:0 0 16px!important;font:700 16px/1.25 Arial,sans-serif!important;color:#33291d!important}
 .studio-shell .gold-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;padding:18px 8px 12px!important;border:1px solid #decba6!important;border-radius:18px!important;background:linear-gradient(145deg,#fffdf7,#f5ead7)!important;box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(82,57,20,.07)!important}
 .studio-shell .gold-choice{display:grid!important;grid-template-rows:104px auto auto!important;grid-template-columns:1fr!important;place-items:center!important;min-width:0!important;min-height:158px!important;padding:8px 3px!important;overflow:visible!important;text-align:center!important;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important}
 .studio-shell .gold-choice:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.58)!important;box-shadow:none!important}
 .studio-shell .gold-choice img{grid-row:1!important;align-self:center!important;justify-self:center!important;margin:0!important}
 .studio-shell .gold-choice>b{grid-row:2!important;width:100%!important;margin:4px 0 0!important;color:#3b2a13!important;font-size:13px!important;line-height:1.2!important;text-align:center!important;white-space:nowrap!important}
 .studio-shell .gold-choice .gold-price{grid-row:3!important;width:100%!important;margin:3px 0 0!important;color:#8a5c16!important;font-size:10px!important;font-weight:900!important;line-height:1.2!important;text-align:center!important;white-space:nowrap!important}
 .studio-shell .gold-choice.selected{background:#fff9e9!important;box-shadow:0 0 0 2px #c49742!important}
 .studio-shell .gold-choice small{display:none!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:stretch!important;margin:0 0 22px!important;padding:16px!important;border:1px solid #dfcfb2!important;border-radius:18px!important;background:rgba(255,253,248,.94)!important;box-shadow:0 10px 26px rgba(68,46,16,.08)!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar:before{content:"A KÁRTYA TERVEZÉSÉNEK LÉPÉSEI";color:#7c6847;font-size:10px;font-weight:900;letter-spacing:.12em}
 .studio-shell.desktop-workflow .mobile-workflow-bar>button{min-height:38px!important;padding:8px 14px!important;border-color:#c8aa73!important;border-radius:999px!important;background:#fff!important;font-weight:800!important;justify-self:start!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar ol{position:relative!important;display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar ol:before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:3px;border-radius:99px;background:linear-gradient(#bf8a2c,#eadfc9)}
 .studio-shell.desktop-workflow .mobile-workflow-bar li{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:34px 1fr!important;grid-template-rows:1fr!important;gap:12px!important;align-items:center!important;width:100%!important;height:auto!important;min-height:48px!important;padding:7px 10px!important;border:1px solid transparent!important;border-radius:13px!important;background:transparent!important;color:#756754!important;font-weight:700!important;cursor:pointer!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar li:hover{border-color:#dfcfb2!important;background:#fffaf2!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar li b{display:grid;width:34px;height:34px;place-items:center;border:2px solid #d7c39c;border-radius:50%;background:#fffaf0;color:#87601f;font-size:12px;box-shadow:0 3px 10px rgba(76,53,18,.08)}
 .studio-shell.desktop-workflow .mobile-workflow-bar li span{margin:0!important;font-size:13px!important;line-height:1.2!important;text-align:left!important;white-space:normal!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar li.active{border-color:#d2b477!important;background:linear-gradient(135deg,#fff9eb,#f1dfba)!important}
 .studio-shell.desktop-workflow .mobile-workflow-bar li.active b{border-color:#9b6b1c;background:linear-gradient(145deg,#d6a647,#a96f16);color:#fff;box-shadow:0 0 0 5px rgba(184,135,47,.13)}
 .studio-shell.desktop-workflow .mobile-workflow-bar li.active span{color:#5f4011;font-weight:900}
 .studio-shell.desktop-workflow #mobileChipConfirm:not([hidden]),.studio-shell.desktop-workflow #mobileStageConfirm:not([hidden]){display:block!important;position:sticky!important;bottom:0!important;width:100%!important;min-height:52px!important;margin:18px 0 0!important;padding:13px 16px!important;border:0!important;border-radius:14px!important;background:linear-gradient(135deg,#bd8a2e,#8f5d12)!important;color:#fff!important;font-size:14px!important;font-weight:900!important;box-shadow:0 12px 28px rgba(88,55,12,.22)!important;cursor:pointer!important}
 .studio-shell .mobile-canvas-step{margin-bottom:8px!important}
 .studio-shell .mobile-canvas-step span{background:#ead8b5!important;color:#6a4713!important;font-weight:900!important;letter-spacing:.02em!important}
 .studio-shell .mobile-canvas-step b{font-family:Georgia,'Times New Roman',serif!important;font-size:28px!important;color:#332719!important}
 .studio-shell .mobile-step-guidance{margin-bottom:18px!important;color:#6c604f!important;font-size:15px!important}
}
@media(min-width:761px) and (max-width:1050px){
 .studio-shell .editor-grid{grid-template-columns:minmax(0,1fr) 280px!important}
 .studio-shell .canvas-stage,.studio-shell .control-panel{padding:16px!important}
 .studio-shell .wizard-steps .step{gap:5px!important;padding:7px 5px!important}
 .studio-shell .wizard-steps .step b{font-size:11px!important}
}

@media(max-width:760px){
 .studio-shell .mobile-workflow-bar ol{grid-template-columns:repeat(5,minmax(0,1fr))!important}
 .studio-shell .mobile-workflow-bar li{width:auto!important;height:auto!important;border:0!important;background:transparent!important;display:grid!important;grid-template-rows:23px auto!important;justify-items:center!important;color:#766a59!important}
 .studio-shell .mobile-workflow-bar li b{display:grid;width:23px;height:23px;place-items:center;border:2px solid #c8beb0;border-radius:50%;background:#f4f1eb;font-size:9px}
 .studio-shell .mobile-workflow-bar li span{display:block;margin-top:4px;font-size:6.5px;line-height:1.05;text-align:center}
 .studio-shell .mobile-workflow-bar li.active b{border-color:#173e35;background:#173e35;color:#fff;box-shadow:0 0 0 4px rgba(23,62,53,.13)}
 .studio-shell .mobile-workflow-bar li.done b{border-color:#aa7a24;background:#d8ae5b;color:#fff}
}

/* One stable mobile workspace on iPhone and Android: no page content may slide underneath it. */
@media(max-width:760px){
 html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
 body{zoom:1!important}
 main>.studio:has(#studio-editor:not([hidden])){height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;padding:0 6px!important;overflow:hidden!important}
 main>.studio:has(#studio-editor:not([hidden])) .studio-intro{display:none!important}
 .studio-shell:not([hidden]){display:flex!important;box-sizing:border-box!important;flex-direction:column!important;width:100%!important;max-width:100%!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;margin:0!important;border-radius:14px!important;overflow:hidden!important}
 .studio-shell:not([hidden]) .studio-workspace{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;height:100%!important;overflow:hidden!important}
 .studio-shell:not([hidden]) .studio-topbar{flex:0 0 auto!important}
 .studio-shell:not([hidden]) .editor-grid,.studio-shell[data-active-step="text"] .editor-grid,.studio-shell[data-active-step="background"] .editor-grid{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
 .studio-shell:not([hidden]) .canvas-stage,.studio-shell[data-active-step="text"] .canvas-stage,.studio-shell[data-active-step="background"] .canvas-stage{position:static!important;top:auto!important;flex:0 0 auto!important;max-height:52dvh!important;padding:7px 8px!important;overflow:hidden!important;box-shadow:none!important}
 .studio-shell:not([hidden]) .card-canvas{width:min(78vw,360px)!important;max-width:100%!important;margin-inline:auto!important}
 .studio-shell:not([hidden]) .control-panel,.studio-shell[data-active-step="text"] .control-panel,.studio-shell[data-active-step="background"] .control-panel{display:block!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;padding:8px 12px calc(24px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
 .studio-shell:not([hidden]) input[type="text"],.studio-shell:not([hidden]) input[type="email"],.studio-shell:not([hidden]) select,.studio-shell:not([hidden]) textarea{font-size:16px!important}
 main>.studio:has(#studio-editor:not([hidden]))~*{display:none!important}
}

/* Final desktop composition: compact contextual card instead of a full-height white column. */
@media(min-width:1051px){
 .studio-shell .editor-grid{grid-template-columns:minmax(620px,1fr) 430px!important;gap:20px!important;padding:0 20px 24px!important;background:linear-gradient(145deg,#f4ecdf,#e9decc)!important}
 .studio-shell .canvas-stage{padding:24px 14px 34px!important;background:transparent!important}
 .studio-shell .control-panel{align-self:start!important;height:auto!important;min-height:0!important;max-height:none!important;margin-top:24px!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important}
 .studio-shell .control-panel>.editor-panel.active{padding:22px!important;border:1px solid #dfcfb2!important;border-radius:20px!important;background:linear-gradient(155deg,#fffefb,#f9f1e3)!important;box-shadow:0 18px 38px rgba(65,45,18,.10)!important}
 .studio-shell .gold-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
 .studio-shell .gold-choice{grid-template-rows:88px auto auto!important;min-height:142px!important;padding:9px 8px!important;border:1px solid #dfcfb1!important;border-radius:14px!important;background:linear-gradient(180deg,#fffefa,#f7efdf)!important}
 .studio-shell .gold-choice:hover{border-color:#b88935!important;background:#fffaf0!important}
 .studio-shell .gold-choice.selected{border-color:#a7721c!important;background:#fff6df!important;box-shadow:0 0 0 2px #dfc48e!important}
 .studio-shell .gold-choice>b{font-size:14px!important}
 .studio-shell .gold-choice .gold-price{font-size:12px!important}
 .studio-shell[data-active-step="side"] .control-panel:after{content:"KÖVETKEZŐ  ·  Előoldali kép feltöltése";display:block;margin-top:12px;padding:14px 17px;border:1px solid #dfcfb2;border-radius:14px;background:rgba(255,253,247,.76);color:#76531b;font-size:11px;font-weight:900;letter-spacing:.07em;box-shadow:0 9px 22px rgba(65,45,18,.06)}
 .studio-shell[data-active-step="background"][data-active-side="front"] .control-panel:after{content:"KÖVETKEZŐ  ·  Előoldali szöveg";display:block;margin-top:12px;padding:14px 17px;border:1px solid #dfcfb2;border-radius:14px;background:rgba(255,253,247,.76);color:#76531b;font-size:11px;font-weight:900;letter-spacing:.07em}
 .studio-shell[data-active-step="text"][data-active-side="front"] .control-panel:after{content:"KÖVETKEZŐ  ·  Hátoldali kép";display:block;margin-top:12px;padding:14px 17px;border:1px solid #dfcfb2;border-radius:14px;background:rgba(255,253,247,.76);color:#76531b;font-size:11px;font-weight:900;letter-spacing:.07em}
}