.magic-launch,.magic-quick-entry{border:1px solid #b6a0ff!important;background:linear-gradient(115deg,#7044db,#345be1)!important;color:#fff!important;border-radius:8px;padding:9px 13px;font-weight:700;white-space:nowrap;cursor:pointer;min-height:38px}
.magic-quick-entry{width:100%;margin-bottom:12px}
.magic-mobile-launch{display:none!important}
@media(max-width:768px){#magicStudioButton{display:none!important}.magic-mobile-launch{display:block!important;flex:none;margin-right:8px;font-size:12px!important;min-height:36px!important}}
.magic-studio{--magic-border:#343d55;--magic-muted:#aeb9cf;box-sizing:border-box;inset:0;margin:auto;width:min(1190px,calc(100vw - 32px));height:min(920px,calc(100dvh - 32px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;color:#f4f5ff;background:#111625;border:1px solid #46516b;border-radius:18px;overflow:hidden;box-shadow:0 24px 100px #0009;font:14px/1.5 Arial,Helvetica,sans-serif}
.magic-studio[open]{display:flex;flex-direction:column}.magic-studio::backdrop{background:#050817cb;backdrop-filter:blur(5px)}
.magic-studio [hidden]{display:none!important}.magic-header{padding:24px 28px;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--magic-border);background:linear-gradient(110deg,#222044,#131f35)}
.magic-eyebrow{font-size:10px;font-weight:bold;letter-spacing:2px;color:#c7baff}.magic-header h2{font-size:29px;line-height:1.2;margin:8px 0}.magic-header p,.magic-muted{color:var(--magic-muted);font-size:12px}.magic-close{font-size:27px!important;padding:0!important;width:36px;height:36px;flex:none}
.magic-studio button{border:1px solid #48516a;background:#242d43;color:#f4f5ff;border-radius:7px;padding:9px 12px;min-height:38px;font:inherit;cursor:pointer}.magic-studio button:hover{background:#35405e}.magic-studio button:disabled{cursor:default;opacity:.58}.magic-studio button:focus-visible,.magic-studio input:focus-visible,.magic-studio select:focus-visible,.magic-studio textarea:focus-visible{outline:2px solid #b9abff;outline-offset:2px}
.magic-body{display:grid;grid-template-columns:315px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}.magic-form{overflow:auto;padding:22px;border-right:1px solid var(--magic-border);overscroll-behavior:contain;scrollbar-gutter:stable}.magic-gallery{padding:22px 26px;overflow:auto;min-width:0;overscroll-behavior:contain;scrollbar-gutter:stable}.magic-section-label{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#baaaff;margin:16px 0 12px}.magic-section-label:first-child{margin-top:0}
.magic-studio label{display:block;font-size:12px;font-weight:700;color:#d7dded;margin-bottom:12px}.magic-studio label span{font-size:10px;color:var(--magic-muted);font-weight:normal}.magic-studio input:not([type=checkbox]):not([type=range]),.magic-studio select,.magic-studio textarea{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:9px 10px;color:#fff;background:#0c1120;border:1px solid #3a445c;border-radius:7px;font:13px/1.4 Arial;margin-top:6px}.magic-studio textarea{resize:vertical;max-height:170px;min-height:64px}.magic-studio input[type=file]{font-size:11px!important;padding:10px!important}.magic-studio input[type=range]{width:100%;accent-color:#aa8aff}.magic-studio fieldset{border:0;padding:12px 0 0}.magic-inline{display:flex;gap:9px}.magic-inline>*{flex:1;min-width:0}.magic-inline button{font-size:11px;padding:7px 5px}.magic-photo-status{margin:10px 0}.magic-plan{background:#1c2440;border:1px solid #424a6d;padding:12px;border-radius:7px;color:#c9d3eb;font-size:11px;margin-top:16px}.magic-advanced{font-size:12px;color:#c8c2ef;padding:12px 0}.magic-advanced summary{cursor:pointer}.magic-dev{padding:12px 0 0;color:#ffd492!important}.magic-dev input{margin-right:5px}
.magic-tabs{display:flex;gap:8px;margin-bottom:20px}.magic-tabs button{border-color:transparent;background:transparent;color:#a8b3cc;font-size:12px}.magic-tabs button[aria-selected=true]{color:#fff;background:#2e2b51;border-color:#71669e}.magic-tabs span{margin-left:5px;color:#bcadf2}.magic-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.magic-card{min-width:0;padding:10px;background:#191f31;border:1px solid #343e56;border-radius:12px;overflow:hidden}.magic-card canvas{display:block;width:100%;height:210px;object-fit:contain;background:#090e19;border-radius:6px}.magic-card h3{font-size:12px;margin:12px 0 3px;line-height:1.4}.magic-card p{color:var(--magic-muted);font-size:10px;margin-bottom:10px}.magic-card button{width:100%;font-size:11px}.magic-library-note{margin-bottom:14px}.magic-empty{padding:60px 20px;text-align:center;color:#c7d1e7}.magic-spark{display:inline-flex;font-size:48px;color:#c3b0ff;background:#2b2549;align-items:center;justify-content:center;width:100px;height:100px;border-radius:28px;transform:rotate(-8deg);margin-bottom:28px}.magic-empty h3{font-size:21px;color:white;margin-bottom:12px}.magic-empty p{font-size:13px;color:var(--magic-muted);line-height:1.8}.magic-empty ul{list-style:none;font-size:12px;color:#bcb4d8;margin-top:24px;line-height:2.2}
.magic-footer{flex:none;padding:14px 22px max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--magic-border);background:#151a2c}.magic-footer p{font-size:11px;color:#c4cce1;max-width:65%}.magic-studio .magic-primary{background:linear-gradient(110deg,#7a48df,#365fe8);border-color:#9d88f0;white-space:nowrap;font-weight:700;min-height:44px}
@media(max-width:800px){.magic-studio{width:calc(100vw - 24px);height:calc(100dvh - 24px);border-radius:12px}.magic-header{padding:16px}.magic-header h2{font-size:23px}.magic-header p{font-size:11px}.magic-body{display:block;overflow:auto;overscroll-behavior:contain}.magic-form,.magic-gallery{overflow:visible;padding:16px;border-right:0;scrollbar-gutter:auto}.magic-form{border-bottom:1px solid var(--magic-border)}.magic-footer{padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:8px}.magic-footer p{font-size:10px;max-width:50%}.magic-footer .magic-primary{font-size:12px;padding:9px}.magic-card canvas{height:165px}.magic-empty{padding:28px 12px}.magic-cards{gap:10px}.magic-launch{font-size:11px!important;padding:7px!important}.magic-header h2{max-width:270px}.magic-gallery label{margin-top:8px}}
@media(max-width:420px){.magic-header h2{font-size:21px}.magic-header{padding:12px}.magic-eyebrow{font-size:8px;letter-spacing:1.3px}.magic-card{padding:7px}.magic-card canvas{height:140px}.magic-card button{padding:7px 3px;font-size:10px}.magic-footer p{max-width:46%}.magic-card h3{font-size:11px}.magic-launch{max-width:110px}.magic-tabs button{padding:8px;font-size:11px}}

/* Persistent HTML toolbar entry on desktop and mobile. */
.topbar > #magicStudioButton{display:block!important;flex:none;margin:0 10px;min-height:38px}
@media(max-width:768px){
 .topbar{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:44px 38px;column-gap:6px;row-gap:4px;height:100px;min-height:100px;padding:6px 8px}
 .topbar > .brand{grid-column:1;grid-row:1}
 .topbar > .top-actions{grid-column:2;grid-row:1;min-width:0;justify-content:flex-end}
 .topbar > #magicStudioButton{grid-column:1 / -1;grid-row:2;width:100%;margin:0;min-height:38px;font-size:13px!important}
 .editor{height:calc(100dvh - 126px)}
 .magic-mobile-launch{display:none!important}
}

/* Keep the explicit open destination readable on small screens. */
.magic-footer{flex-wrap:wrap}
.magic-footer>label{flex:0 1 290px;margin:0}
.magic-footer>p{flex:1 1 220px;min-width:0}
#magicForget{font-size:11px;margin-bottom:14px}
@media(max-width:800px){.magic-footer>label{flex-basis:100%}.magic-footer>p{max-width:none;flex-basis:140px}.magic-footer select{min-height:36px;padding:6px;margin-top:3px}}