:root{
    --bg:#080b12;
    --panel:#101723;
    --panel-2:#0d1320;
    --text:#f3f7ff;
    --muted:#8fa1ba;
    --line:rgba(255,255,255,.09);
    --red:#ff365e;
    --red-2:#b81435;
    --blue:#2e8bff;
    --blue-2:#173dff;
    --green:#55f0b2;
    --shadow:0 22px 80px rgba(0,0,0,.36);
    --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    background:radial-gradient(circle at 10% -10%, rgba(46,139,255,.18), transparent 32%), radial-gradient(circle at 90% 10%, rgba(255,54,94,.16), transparent 34%), var(--bg);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size:15px;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.lab-bg:before,.lab-bg:after{
    content:"";
    position:fixed;
    width:380px;
    height:380px;
    border-radius:50%;
    filter:blur(70px);
    opacity:.24;
    pointer-events:none;
    z-index:-1;
}
.lab-bg:before{left:-130px;top:120px;background:var(--blue)}
.lab-bg:after{right:-120px;bottom:60px;background:var(--red)}
.lab-header{
    width:min(1280px, calc(100% - 32px));
    margin:16px auto 0;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--line);
    border-radius:22px;
    background:rgba(8,11,18,.72);
    backdrop-filter:blur(18px);
    position:sticky;
    top:12px;
    z-index:20;
}
.lab-brand{display:flex;align-items:center;gap:10px;min-width:0}
.lab-brand__mark{
    width:38px;
    height:38px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--blue),var(--red));
    box-shadow:0 0 30px rgba(46,139,255,.36);
    position:relative;
}
.lab-brand__mark:after{
    content:"";
    position:absolute;
    inset:10px;
    border:2px solid rgba(255,255,255,.75);
    border-radius:9px;
}
.lab-brand b{display:block;font-size:16px;letter-spacing:.2px}
.lab-brand small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.lab-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lab-nav a{
    padding:9px 13px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#dfe8f8;
    background:rgba(255,255,255,.03);
    transition:.2s ease;
}
.lab-nav a:hover{border-color:rgba(46,139,255,.55);transform:translateY(-1px)}
.lab-shell{width:min(1280px, calc(100% - 32px));margin:18px auto 0}
.hero-card{
    display:grid;
    grid-template-columns:minmax(280px, .58fr) minmax(430px, 1fr);
    gap:14px;
    align-items:start;
}
.hero-card__text,.copy-panel,.workspace,.log-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(16,23,35,.9), rgba(11,16,26,.88));
    box-shadow:var(--shadow);
}
.hero-card__text{
    padding:22px;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    position:relative;
    overflow:hidden;
}
.hero-card__text:after{
    content:"";
    position:absolute;
    right:-54px;
    top:-58px;
    width:150px;
    height:150px;
    border-radius:50%;
    border:24px solid rgba(46,139,255,.07);
}
.eyebrow{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    padding:7px 10px;
    border-radius:999px;
    color:#bcd4ff;
    border:1px solid rgba(46,139,255,.28);
    background:rgba(46,139,255,.09);
    font-size:12px;
    letter-spacing:.2px;
}
h1,h2,p{margin:0}
h1{font-size:clamp(28px,3.15vw,42px);line-height:1.04;letter-spacing:-1.2px;margin-top:14px;max-width:720px}
h2{font-size:26px;line-height:1.1;letter-spacing:-.6px;margin-top:10px}
p{color:var(--muted);line-height:1.55;margin-top:12px;max-width:760px}
.hero-card__text p{font-size:14px;max-width:560px}
.copy-panel{padding:18px;display:flex;flex-direction:column;gap:14px}
.url-field span,.replace-box span,.mode-title{display:block;color:#dfe8f8;font-size:13px;margin-bottom:8px;font-weight:650}
.url-input-wrap{position:relative;display:flex;align-items:center}
.url-field input,.replace-box textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:16px;
    background:#090e17;
    color:var(--text);
    outline:none;
    transition:.2s ease;
}
.url-field input{height:46px;padding:0 52px 0 14px}
.replace-box textarea{resize:vertical;min-height:84px;padding:12px 14px;line-height:1.45}
.url-field input:focus,.replace-box textarea:focus{border-color:rgba(46,139,255,.68);box-shadow:0 0 0 4px rgba(46,139,255,.1)}
.mini-btn,.ghost-btn,.download-btn,.main-btn,.code-topbar button{
    border:0;
    cursor:pointer;
    color:var(--text);
    transition:.22s ease;
    white-space:nowrap;
}
.mini-btn{padding:0 14px;border-radius:14px;background:rgba(46,139,255,.13);border:1px solid rgba(46,139,255,.24)}
.mini-btn:hover{background:rgba(46,139,255,.22)}
.paste-icon-btn{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:1px solid rgba(46,139,255,.26);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(46,139,255,.18), rgba(255,54,94,.08));
    color:#dfeaff;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:.2s ease;
}
.paste-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.paste-icon-btn:hover{border-color:rgba(46,139,255,.62);background:rgba(46,139,255,.22);transform:translateY(-50%) scale(1.03)}
.mode-box{
    padding:10px;
    border:1px solid var(--line);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.mode-title{grid-column:1/-1;margin-bottom:0}
.mode-toggle{
    min-height:40px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:14px;
    color:#cdd8ea;
    background:rgba(8,14,23,.58);
    font-size:12.5px;
    cursor:pointer;
    user-select:none;
    transition:.2s ease;
}
.mode-toggle:hover{border-color:rgba(46,139,255,.42);background:rgba(46,139,255,.06)}
.mode-toggle input{position:absolute;opacity:0;pointer-events:none}
.mode-toggle b{font-weight:760;color:#edf5ff}
.mode-toggle span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.mode-toggle small{display:block;font-size:10.8px;line-height:1.2;color:var(--muted);font-weight:520}
.mode-dot{
    width:16px;
    height:16px;
    flex:0 0 16px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:#080d16;
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.02);
    position:relative;
    transition:.2s ease;
}
.mode-dot:after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:50%;
    background:transparent;
    transition:.2s ease;
}
.mode-toggle input:checked + .mode-dot{border-color:rgba(46,139,255,.85);box-shadow:0 0 18px rgba(46,139,255,.28), inset 0 0 0 4px rgba(46,139,255,.13)}
.mode-toggle input:checked + .mode-dot:after{background:linear-gradient(135deg,var(--blue),var(--red))}

.css-exact-card{grid-column:1/-1;min-height:42px}
.css-exact-card.hidden{display:none!important}
.css-exact-card .switch-text small{max-width:100%}

.check-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
.switch-card{
    min-height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.014));
    color:#d8e2f2;
    cursor:pointer;
    user-select:none;
    transition:.2s ease;
}
.switch-card:hover{border-color:rgba(46,139,255,.42);background:rgba(46,139,255,.055);transform:translateY(-1px)}
.switch-card input{position:absolute;opacity:0;pointer-events:none}
.switch-ui{
    width:38px;
    height:22px;
    flex:0 0 38px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:#070c14;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
    position:relative;
    transition:.22s ease;
}
.switch-ui:after{
    content:"";
    position:absolute;
    left:3px;
    top:3px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#697891;
    box-shadow:0 3px 10px rgba(0,0,0,.35);
    transition:.22s ease;
}
.switch-card input:checked + .switch-ui{
    border-color:rgba(46,139,255,.6);
    background:linear-gradient(135deg, rgba(46,139,255,.9), rgba(255,54,94,.88));
    box-shadow:0 0 20px rgba(46,139,255,.18);
}
.switch-card input:checked + .switch-ui:after{left:19px;background:#fff}
.switch-card--script input:checked + .switch-ui{background:linear-gradient(135deg, rgba(255,54,94,.95), rgba(184,20,53,.92));border-color:rgba(255,54,94,.6);box-shadow:0 0 22px rgba(255,54,94,.18)}
.switch-card--encoding input:checked + .switch-ui{background:linear-gradient(135deg, rgba(46,139,255,.96), rgba(69,220,255,.82));border-color:rgba(69,220,255,.55);box-shadow:0 0 22px rgba(46,139,255,.22)}
.switch-card--js input:checked + .switch-ui{background:linear-gradient(135deg, rgba(46,139,255,.96), rgba(255,54,94,.86));border-color:rgba(46,139,255,.55);box-shadow:0 0 22px rgba(46,139,255,.18)}
.switch-text{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.1}
.switch-text b{font-size:13px;font-weight:720;color:#f2f6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch-text small{font-size:11.5px;color:var(--muted);font-weight:520}
.switch-text i{font-style:normal}
.switch-card input:checked ~ .switch-text .state-off{display:none}
.switch-card input:not(:checked) ~ .switch-text .state-on{display:none}

.unique-panel{
    margin-top:-4px;
    padding:10px;
    border:1px solid rgba(46,139,255,.16);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(46,139,255,.045), rgba(255,54,94,.022));
}
.unique-panel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:8px}
.unique-panel__head span{color:#eef5ff;font-size:13px;font-weight:720}
.unique-panel__head small{color:var(--muted);font-size:11.5px;text-align:right}
.unique-panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.unique-choice{min-height:38px}
.unique-choice--alias{grid-column:1/-1;display:grid;grid-template-columns:auto auto minmax(120px,1fr);align-items:center}
.alias-input{
    width:100%;
    height:32px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:11px;
    background:#090e17;
    color:#edf5ff;
    padding:0 10px;
    outline:none;
    font-size:12px;
}
.alias-input:focus{border-color:rgba(46,139,255,.62);box-shadow:0 0 0 3px rgba(46,139,255,.1)}
.unique-panel.is-disabled{opacity:.48;filter:saturate(.75)}
.replace-box em{display:block;color:var(--muted);font-style:normal;font-weight:400;font-size:12px;margin-top:3px}
.main-btn{
    height:50px;
    border-radius:17px;
    background:linear-gradient(135deg,var(--red),var(--blue));
    font-weight:750;
    letter-spacing:.2px;
    position:relative;
    overflow:hidden;
    box-shadow:0 16px 36px rgba(46,139,255,.22), 0 12px 30px rgba(255,54,94,.14);
}
.main-btn i{
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.24),transparent);
    transform:translateX(-110%);
}
.main-btn:hover{transform:translateY(-1px)}
.main-btn:hover i{animation:shine .8s ease}
@keyframes shine{to{transform:translateX(110%)}}
.status-line{min-height:20px;color:var(--muted);font-size:13px}
.status-line.error{color:#ff8da4}.status-line.ok{color:var(--green)}
.workspace{margin-top:18px;padding:18px}
.hidden{display:none!important}
.workspace-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}
.workspace-head p{font-size:13px;margin-top:8px}
.tool-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ghost-btn,.download-btn{
    min-height:38px;
    padding:10px 13px;
    border-radius:13px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.035);
    font-size:13px;
}
.ghost-btn:hover{border-color:rgba(46,139,255,.55);background:rgba(46,139,255,.08)}
.download-btn{background:linear-gradient(135deg,rgba(255,54,94,.95),rgba(46,139,255,.95));border-color:transparent;font-weight:750}
.editor-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:14px;align-items:stretch}
.code-card,.preview-card{border:1px solid var(--line);border-radius:18px;background:var(--panel-2);overflow:hidden;min-height:620px}
.code-topbar,.preview-topbar{
    height:44px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.025);
    color:#dce8fb;
    font-size:13px;
}
.code-topbar div{display:flex;gap:7px}
.code-topbar button{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px}
.code-topbar button:hover{border-color:rgba(255,54,94,.5)}
.editor-wrap{height:576px;display:grid;grid-template-columns:54px 1fr;background:#080c13}
#lineNumbers{
    margin:0;
    padding:12px 10px;
    overflow:hidden;
    text-align:right;
    color:#4f6077;
    border-right:1px solid var(--line);
    line-height:20px;
    font-family:"Cascadia Code", "Fira Code", Consolas, monospace;
    font-size:13px;
    user-select:none;
}
#codeEditor{
    width:100%;
    height:100%;
    resize:none;
    border:0;
    outline:0;
    background:transparent;
    color:#e9f1ff;
    padding:12px 14px;
    line-height:20px;
    font-family:"Cascadia Code", "Fira Code", Consolas, monospace;
    font-size:13px;
    tab-size:4;
}
.preview-card iframe{width:100%;height:576px;border:0;background:#fff}
.live-dot{display:inline-flex;align-items:center;gap:6px;color:#7af7be;font-size:12px}
.live-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#7af7be;box-shadow:0 0 14px #7af7be}
.lab-footer{
    width:min(1280px, calc(100% - 32px));
    margin:18px auto 26px;
    padding:14px 4px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    color:var(--muted);
    font-size:13px;
}
.lab-footer a{color:#c9d8ee}.lab-footer a:hover{color:#fff}
.log-card{padding:24px}
.table-wrap{margin-top:18px;overflow:auto;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;min-width:760px;background:#090e17}
th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:top}
th{color:#dfe8f8;background:rgba(255,255,255,.035)}
td{color:#aebcd0}
@media (max-width:1040px){
    .hero-card,.editor-layout{grid-template-columns:1fr}
    .hero-card__text{padding:20px}
    .workspace-head{flex-direction:column}
    .tool-row{justify-content:flex-start}
}
@media (max-width:640px){
    .lab-header,.lab-footer,.lab-shell{width:min(100% - 20px, 1280px)}
    .lab-header{align-items:flex-start;position:static;flex-direction:column}
    .lab-nav{justify-content:flex-start}
    .hero-card__text,.copy-panel,.workspace,.log-card{border-radius:18px;padding:16px}
    h1{font-size:30px;letter-spacing:-.8px}
    .mode-box,.check-grid,.unique-panel__grid{grid-template-columns:1fr}
    .unique-choice--alias{grid-template-columns:auto 1fr}
    .unique-choice--alias .alias-input{grid-column:1/-1}
    .mini-btn{height:42px}
    .editor-wrap{grid-template-columns:42px 1fr}
    .lab-footer{flex-direction:column}
}
.status-badge{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}
.status-badge.is-ok{color:#07130e;background:var(--green)}
.status-badge.is-bad{color:#fff;background:linear-gradient(135deg,var(--red),var(--red-2))}
.diag-note{
    margin-top:16px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    color:#b8c6d9;
    line-height:1.6;
    font-size:13px;
}
.diag-note code{color:#fff;background:rgba(46,139,255,.14);padding:2px 6px;border-radius:7px}
.log-card a{color:#cfe0ff;text-decoration:underline;text-decoration-color:rgba(46,139,255,.5);text-underline-offset:3px}
.switch-card.is-disabled{opacity:.48;filter:saturate(.7);cursor:not-allowed;transform:none!important}
.switch-card.is-disabled:hover{border-color:var(--line);background:rgba(255,255,255,.025)}

.process-loader{
    padding:12px;
    border:1px solid rgba(46,139,255,.22);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(46,139,255,.075), rgba(255,54,94,.035));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.process-loader__head{display:flex;align-items:center;gap:10px}
.process-loader__head b{display:block;font-size:13px;color:#f3f7ff}
.process-loader__head small{display:block;margin-top:2px;font-size:12px;color:#93a6bf;line-height:1.35}
.loader-ring{
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.12);
    border-top-color:var(--blue);
    border-right-color:var(--red);
    animation:loaderSpin .82s linear infinite;
}
.process-loader:not(.is-working) .loader-ring{animation:none;border-color:rgba(85,240,178,.7);box-shadow:0 0 18px rgba(85,240,178,.18)}
.loader-bar{height:5px;margin-top:11px;border-radius:999px;background:#070c14;overflow:hidden;border:1px solid rgba(255,255,255,.055)}
.loader-bar i{display:block;width:18%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--red),var(--blue));transition:width .35s ease;box-shadow:0 0 18px rgba(46,139,255,.38)}
.loader-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.loader-steps span{
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.075);
    color:#7f91aa;
    background:rgba(255,255,255,.025);
    font-size:11px;
    transition:.2s ease;
}
.loader-steps span.is-active{color:#fff;border-color:rgba(46,139,255,.55);background:rgba(46,139,255,.12)}
.loader-steps span.is-done{color:#8bf6c6;border-color:rgba(85,240,178,.24);background:rgba(85,240,178,.07)}
.switch-card--safe-save input:checked + .switch-ui{background:linear-gradient(135deg, rgba(85,240,178,.92), rgba(46,139,255,.88));border-color:rgba(85,240,178,.48);box-shadow:0 0 22px rgba(85,240,178,.16)}
.file-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.file-list{display:grid;gap:8px;margin-top:16px}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.file-row small{color:var(--muted)}
.file-viewer{margin-top:16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#080c13}
.file-viewer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.028);font-size:13px;color:#dfe8f8}
.file-viewer pre{margin:0;max-height:620px;overflow:auto;padding:14px;color:#e9f1ff;font:13px/1.55 "Cascadia Code", "Fira Code", Consolas, monospace;white-space:pre-wrap;word-break:break-word}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@media (max-width:640px){.file-row{align-items:flex-start;flex-direction:column}.file-actions{margin-top:12px}}

/* v12 fixes */
html, body { max-width: 100%; overflow-x: hidden; }
.lab-shell, .lab-header, .lab-footer, .hero-card, .workspace, .copy-panel,
.editor-layout, .code-card, .preview-card, .url-input-wrap, .mode-box,
.check-grid, .unique-panel, .unique-panel__grid, .tool-row { min-width: 0; max-width: 100%; }
#codeEditor { max-width: 100%; overflow: auto; }
.preview-card iframe { max-width: 100%; }
.unique-prefix-row{
    margin:0 0 9px;
    padding:9px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    background:rgba(8,14,23,.55);
    display:grid;
    gap:6px;
}
.unique-prefix-row label{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(130px,1fr);gap:8px;align-items:center}
.unique-prefix-row label span{color:#dfe8f8;font-size:12px;font-weight:650}
.unique-prefix-row small{color:var(--muted);font-size:11.5px;line-height:1.35}
.unique-prefix-row small b{color:#edf5ff}
.unique-panel__grid{grid-template-columns:repeat(3, minmax(0,1fr));}
.unique-choice{min-width:0;}
.unique-choice span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:760px){
    .unique-panel__grid{grid-template-columns:1fr;}
    .unique-prefix-row label{grid-template-columns:1fr;}
}

/* v20: compact vertical hero + wide form layout */
.hero-card{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:stretch;
}
.hero-card__text{
    min-height:0;
    padding:16px 18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:14px;
}
.hero-card__text:after{
    width:120px;
    height:120px;
    right:-48px;
    top:-54px;
    border-width:20px;
}
.hero-card__text.is-hidden{display:none!important}
.hero-card__main{min-width:0;position:relative;z-index:1}
.hero-card__text h1{
    max-width:920px;
    margin-top:10px;
    font-size:clamp(24px,2.3vw,34px);
    line-height:1.05;
    letter-spacing:-.9px;
}
.hero-card__text p{
    max-width:980px;
    margin-top:8px;
    font-size:13.5px;
    line-height:1.45;
}
.hero-card__close{
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:12px;
    background:rgba(255,255,255,.035);
    color:#dfe8f8;
    display:grid;
    place-items:center;
    position:relative;
    cursor:pointer;
    transition:.2s ease;
    z-index:2;
}
.hero-card__close:hover{border-color:rgba(255,54,94,.48);background:rgba(255,54,94,.09);transform:translateY(-1px)}
.hero-card__close span{
    position:absolute;
    width:15px;
    height:2px;
    border-radius:999px;
    background:currentColor;
}
.hero-card__close span:first-child{transform:rotate(45deg)}
.hero-card__close span:last-child{transform:rotate(-45deg)}
.hero-restore{
    justify-self:start;
    border:1px solid rgba(46,139,255,.26);
    border-radius:999px;
    padding:8px 12px;
    background:rgba(46,139,255,.08);
    color:#dfeaff;
    font-size:12.5px;
    cursor:pointer;
    transition:.2s ease;
}
.hero-restore:hover{border-color:rgba(46,139,255,.62);background:rgba(46,139,255,.14);transform:translateY(-1px)}
.copy-panel{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:12px;
    padding:16px;
}
.copy-panel > .url-field{grid-column:1/-1}
.copy-panel > .mode-box{grid-column:span 5;align-self:start}
.copy-panel > .check-grid{grid-column:span 7;grid-template-columns:repeat(3,minmax(0,1fr));align-self:start}
.copy-panel > .unique-panel{grid-column:1/span 5;align-self:start}
.copy-panel > .replace-box{grid-column:span 7;display:flex;flex-direction:column;min-height:100%}
.copy-panel > .replace-box textarea{min-height:124px;flex:1}
.copy-panel > .main-btn{grid-column:1/span 4;margin-top:0;min-height:52px}
.copy-panel > .process-loader,
.copy-panel > .status-line{grid-column:1/-1}
.footer-links{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;min-width:0}
.footer-links a{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 0;
}
.footer-links b{color:#fff;font-weight:800}
@media (max-width:1120px){
    .copy-panel > .mode-box,
    .copy-panel > .check-grid,
    .copy-panel > .unique-panel,
    .copy-panel > .replace-box{grid-column:1/-1}
    .copy-panel > .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .copy-panel > .main-btn{grid-column:1/-1}
}
@media (max-width:640px){
    .hero-card__text{grid-template-columns:1fr;padding:15px}
    .hero-card__close{position:absolute;right:12px;top:12px}
    .hero-card__main{padding-right:38px}
    .hero-card__text h1{font-size:24px}
    .copy-panel{grid-template-columns:1fr;padding:14px;gap:10px}
    .copy-panel > .check-grid{grid-template-columns:1fr}
    .footer-links{justify-content:flex-start;gap:8px;flex-direction:column;align-items:flex-start}
}

/* v20: version details page */
.version-card h1{margin-top:12px}
.version-current{
    margin-top:18px;
    padding:14px 16px;
    border:1px solid rgba(85,240,178,.24);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(85,240,178,.075), rgba(46,139,255,.035));
    display:grid;
    gap:4px;
}
.version-current b{font-size:15px;color:#f4fff9}
.version-current span{font-size:13px;color:#a8bad0;line-height:1.45}
.change-timeline{
    margin-top:18px;
    display:grid;
    gap:10px;
}
.change-item{
    display:grid;
    grid-template-columns:70px minmax(0,1fr);
    gap:12px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.024);
}
.change-item strong{
    width:max-content;
    min-width:52px;
    height:28px;
    display:inline-grid;
    place-items:center;
    border-radius:999px;
    background:rgba(46,139,255,.11);
    color:#cfe0ff;
    font-size:12px;
}
.change-item p{margin:0;max-width:none;font-size:13px;line-height:1.45;color:#aebed3}
.change-item.is-current{border-color:rgba(46,139,255,.42);background:linear-gradient(180deg, rgba(46,139,255,.075), rgba(255,54,94,.035))}
.change-item.is-current strong{background:linear-gradient(135deg,var(--blue),var(--red));color:#fff}
@media (max-width:640px){.change-item{grid-template-columns:1fr;gap:8px}}


/* v21: tighter blocks + cleaner header */
.lab-header{
    padding:10px 12px;
    border-radius:18px;
    gap:12px;
}
.lab-brand__mark{
    width:34px;
    height:34px;
    border-radius:12px;
}
.lab-brand__mark:after{inset:9px;border-radius:8px}
.lab-brand b{font-size:15px}
.lab-brand small{font-size:11px}
.lab-nav a{
    padding:7px 11px;
    font-size:12.5px;
}
.lab-shell{margin-top:12px}
.hero-card{gap:10px}
.hero-card__text{
    padding:12px 14px;
    border-radius:18px;
    gap:10px;
}
.hero-card__text h1{
    margin-top:7px;
    font-size:clamp(21px,1.8vw,28px);
    letter-spacing:-.7px;
}
.hero-card__text p{
    margin-top:6px;
    font-size:12.8px;
    line-height:1.38;
}
.eyebrow{
    padding:5px 8px;
    font-size:11px;
}
.hero-card__close{
    width:30px;
    height:30px;
    border-radius:10px;
}
.hero-restore{padding:6px 10px;font-size:12px}
.copy-panel{
    padding:12px;
    gap:9px;
    border-radius:18px;
}
.url-field span,
.replace-box span,
.mode-title{
    font-size:12px;
    margin-bottom:6px;
}
.url-field input{
    height:40px;
    border-radius:13px;
    padding-left:12px;
}
.paste-icon-btn{
    width:30px;
    height:30px;
    border-radius:10px;
}
.paste-icon-btn svg{width:16px;height:16px}
.mode-box{
    padding:8px;
    gap:6px;
    border-radius:15px;
}
.mode-toggle{
    min-height:36px;
    padding:7px 8px;
    gap:7px;
    border-radius:12px;
    font-size:12px;
}
.mode-toggle small{font-size:10.4px}
.mode-dot{
    width:14px;
    height:14px;
    flex-basis:14px;
}
.mode-dot:after{inset:3px}
.check-grid{gap:6px}
.switch-card{
    min-height:38px;
    padding:7px 8px;
    gap:8px;
    border-radius:13px;
}
.switch-ui{
    width:34px;
    height:20px;
    flex-basis:34px;
}
.switch-ui:after{
    width:12px;
    height:12px;
    left:3px;
    top:3px;
}
.switch-card input:checked + .switch-ui:after{left:17px}
.switch-text{gap:1px}
.switch-text b{font-size:12px}
.switch-text small{font-size:10.5px}
.unique-panel{
    padding:8px;
    border-radius:15px;
}
.unique-panel__head{margin-bottom:6px}
.unique-panel__head span{font-size:12px}
.unique-panel__head small{font-size:10.5px}
.unique-prefix-row{
    margin-bottom:7px;
    padding:7px;
    border-radius:12px;
}
.unique-prefix-row label span,
.unique-prefix-row small{font-size:10.8px}
.alias-input{
    height:29px;
    border-radius:9px;
    font-size:11.5px;
}
.replace-box textarea{
    min-height:76px;
    border-radius:13px;
    padding:9px 11px;
    line-height:1.38;
    font-size:12.5px;
}
.copy-panel > .replace-box textarea{min-height:96px}
.main-btn{
    height:44px;
    min-height:44px!important;
    border-radius:14px;
    font-size:13px;
}
.process-loader{
    padding:9px;
    border-radius:15px;
}
.process-loader__head b{font-size:12px}
.process-loader__head small{font-size:11px}
.loader-ring{
    width:26px;
    height:26px;
    flex-basis:26px;
}
.loader-steps span{
    padding:3px 7px;
    font-size:10.5px;
}
.status-line{font-size:12px;min-height:17px}
.workspace{
    margin-top:12px;
    padding:14px;
    border-radius:18px;
}
.workspace-head{margin-bottom:10px}
.ghost-btn,.download-btn{
    min-height:34px;
    padding:8px 10px;
    border-radius:11px;
    font-size:12px;
}
.code-card,.preview-card{border-radius:15px;min-height:560px}
.code-topbar,.preview-topbar{height:38px}
.editor-wrap{height:522px}
.preview-card iframe{height:522px}
.lab-footer{
    margin-top:12px;
    margin-bottom:18px;
    padding:10px 2px;
    font-size:12px;
}
@media (min-width:1121px){
    .copy-panel > .mode-box{grid-column:span 4}
    .copy-panel > .check-grid{grid-column:span 8;grid-template-columns:repeat(5,minmax(0,1fr))}
    .copy-panel > .unique-panel{grid-column:1/span 4}
    .copy-panel > .replace-box{grid-column:span 8}
    .copy-panel > .main-btn{grid-column:1/span 3}
}
@media (max-width:640px){
    .lab-header{padding:10px;gap:10px}
    .lab-nav a{padding:7px 10px}
    .hero-card__text{padding:12px}
    .hero-card__main{padding-right:34px}
    .hero-card__text h1{font-size:22px}
    .copy-panel{padding:10px;gap:8px}
}

/* v22: sidebar workspace layout + manual editor mode */
.nav-menu-btn{
    min-height:32px;
    padding:7px 12px;
    border:1px solid rgba(46,139,255,.32);
    border-radius:999px;
    background:rgba(46,139,255,.09);
    color:#dfeaff;
    cursor:pointer;
    font-size:12.5px;
    transition:.2s ease;
}
.nav-menu-btn:hover,
.nav-menu-btn.is-active{
    border-color:rgba(46,139,255,.64);
    background:linear-gradient(135deg, rgba(46,139,255,.18), rgba(255,54,94,.10));
    transform:translateY(-1px);
}
.app-layout{
    display:grid;
    grid-template-columns:460px minmax(0,1fr);
    gap:12px;
    align-items:start;
    min-width:0;
    width:100%;
}
.tool-sidebar{
    min-width:0;
    width:100%;
    position:sticky;
    top:84px;
    align-self:start;
    max-height:calc(100vh - 100px);
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(46,139,255,.42) rgba(255,255,255,.04);
}
.tool-sidebar::-webkit-scrollbar{width:8px}
.tool-sidebar::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
.tool-sidebar::-webkit-scrollbar-thumb{background:rgba(46,139,255,.42);border-radius:999px}
.app-layout.is-sidebar-closed{grid-template-columns:1fr}
.app-layout.is-sidebar-closed .tool-sidebar{display:none}
.tool-sidebar .hero-card{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}
.tool-sidebar .hero-card__text{
    padding:11px 12px;
    border-radius:16px;
}
.tool-sidebar .hero-card__text h1{
    font-size:20px;
    line-height:1.08;
    max-width:100%;
}
.tool-sidebar .hero-card__text p{
    font-size:12px;
    line-height:1.35;
}
.tool-sidebar .copy-panel{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
    border-radius:16px;
}
.tool-sidebar .copy-panel > *{
    grid-column:1/-1!important;
}
.tool-sidebar .mode-box{
    grid-template-columns:1fr;
}
.tool-sidebar .check-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px;
}
.tool-sidebar .unique-panel__grid{
    grid-template-columns:1fr;
}
.tool-sidebar .unique-prefix-row label{
    grid-template-columns:1fr;
}
.tool-sidebar .replace-box textarea,
.tool-sidebar .copy-panel > .replace-box textarea{
    min-height:76px;
}
.tool-sidebar .main-btn{
    width:100%;
}
.app-layout .workspace{
    margin-top:0;
    min-width:0;
    min-height:calc(100vh - 126px);
}
.app-layout .workspace-head{
    align-items:center;
}
.app-layout .editor-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
}
.ghost-btn.is-disabled,
.download-btn.is-disabled{
    opacity:.45;
    pointer-events:none;
}
#codeEditor::placeholder{
    color:rgba(143,161,186,.72);
}
@media (max-width:1180px){
    .app-layout{grid-template-columns:420px minmax(0,1fr)}
    .tool-sidebar .check-grid{grid-template-columns:1fr!important}
    .app-layout .editor-layout{grid-template-columns:1fr}
}
@media (max-width:900px){
    .app-layout{grid-template-columns:1fr}
    .tool-sidebar{
        position:static;
        max-height:none;
        overflow:visible;
    }
    .app-layout.is-sidebar-closed .tool-sidebar{display:none}
    .app-layout .workspace{min-height:auto}
    .tool-sidebar .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:640px){
    .nav-menu-btn{width:100%;justify-content:center}
    .tool-sidebar .check-grid{grid-template-columns:1fr!important}
}

/* v23: redesigned compact dock layout */
.lab-shell{width:min(1480px, calc(100% - 28px));}
.lab-header{width:min(1480px, calc(100% - 28px));}
.lab-nav a[href="versions.php"]{border-color:rgba(255,54,94,.22);background:rgba(255,54,94,.055)}
.app-layout{
    grid-template-columns:420px minmax(0,1fr);
    gap:14px;
    align-items:stretch;
}
.tool-sidebar{
    position:sticky;
    top:76px;
    max-height:calc(100vh - 92px);
    overflow:auto;
    padding-right:2px;
}
.tool-sidebar .hero-card{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    padding:12px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:24px;
    background:
        radial-gradient(circle at 15% 0%, rgba(46,139,255,.16), transparent 34%),
        linear-gradient(180deg, rgba(15,22,34,.96), rgba(8,13,22,.94));
    box-shadow:0 18px 60px rgba(0,0,0,.34);
}
.tool-sidebar .hero-card__text,
.tool-sidebar .copy-panel{
    border:0;
    box-shadow:none;
    background:transparent;
}
.tool-sidebar .hero-card__text{
    padding:8px 8px 4px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 30px;
    gap:8px;
    border-bottom:1px solid rgba(255,255,255,.07);
    border-radius:0;
}
.tool-sidebar .hero-card__text:after{display:none}
.tool-sidebar .hero-card__main{padding:0!important;}
.tool-sidebar .eyebrow{padding:4px 8px;font-size:10.8px;background:rgba(46,139,255,.075)}
.tool-sidebar .hero-card__text h1{font-size:18px;line-height:1.12;margin-top:7px;letter-spacing:-.45px}
.tool-sidebar .hero-card__text p{font-size:11.6px;line-height:1.34;margin-top:5px;color:#9fb0c8}
.tool-sidebar .hero-card__close{width:28px;height:28px;border-radius:10px}
.tool-sidebar .hero-restore{
    justify-self:stretch;
    text-align:center;
    border-radius:14px;
    padding:8px 10px;
    background:rgba(46,139,255,.075);
}
.tool-sidebar .copy-panel{padding:0;gap:8px;}
.tool-sidebar .url-field{padding:0 2px;}
.tool-sidebar .url-field input{height:38px;border-radius:12px;background:#070c14}
.tool-sidebar .paste-icon-btn{width:28px;height:28px;border-radius:9px}
.tool-sidebar .mode-box,
.tool-sidebar .unique-panel,
.tool-sidebar .replace-box textarea,
.tool-sidebar .switch-card,
.tool-sidebar .mode-toggle{
    background:rgba(7,12,20,.58);
}
.tool-sidebar .mode-box{padding:7px;border-radius:15px;gap:6px}
.tool-sidebar .mode-toggle{min-height:34px;padding:6px 8px;border-radius:12px}
.tool-sidebar .switch-card{min-height:36px;padding:6px 7px;border-radius:12px}
.tool-sidebar .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.tool-sidebar .switch-text b{font-size:11.6px}
.tool-sidebar .switch-text small{font-size:10px}
.tool-sidebar .replace-box textarea,
.tool-sidebar .copy-panel > .replace-box textarea{min-height:68px;max-height:130px;}
.tool-sidebar .main-btn{height:42px;border-radius:14px;margin-top:2px}
.tool-sidebar .process-loader{padding:8px;border-radius:14px}
.app-layout .workspace{
    margin-top:0;
    min-height:calc(100vh - 112px);
    border-radius:24px;
    background:
        radial-gradient(circle at 78% 0%, rgba(255,54,94,.10), transparent 34%),
        linear-gradient(180deg, rgba(16,23,35,.92), rgba(8,12,20,.90));
}
.app-layout .workspace-head{
    align-items:center;
    padding-bottom:12px;
    margin-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.app-layout .workspace-head h2{font-size:21px;margin-top:7px}
.app-layout .workspace-head p{font-size:12.5px;margin-top:5px;max-width:720px}
.app-layout .editor-layout{gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.code-card,.preview-card{min-height:calc(100vh - 238px);}
.editor-wrap,.preview-card iframe{height:calc(100vh - 286px);min-height:520px;}
.tool-row{gap:7px;}
.ghost-btn,.download-btn{min-height:33px;padding:8px 10px}
.app-layout.is-sidebar-closed{grid-template-columns:1fr;}
.app-layout.is-sidebar-closed .editor-layout{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.nav-menu-btn{display:inline-flex;align-items:center;gap:7px;}
.nav-menu-btn:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(85,240,178,.48)}
.app-layout.is-sidebar-closed ~ * .nav-menu-btn:before{background:var(--red)}
@media (max-width:1220px){
    .app-layout{grid-template-columns:390px minmax(0,1fr)}
    .tool-sidebar .check-grid{grid-template-columns:1fr!important}
    .app-layout .editor-layout{grid-template-columns:1fr}
    .code-card,.preview-card{min-height:480px}
    .editor-wrap,.preview-card iframe{height:480px;min-height:480px}
}
@media (max-width:900px){
    .app-layout{grid-template-columns:1fr;}
    .tool-sidebar{position:static;max-height:none;overflow:visible;padding-right:0;}
    .tool-sidebar .hero-card{border-radius:20px;}
    .tool-sidebar .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .app-layout .workspace{min-height:auto;}
}
@media (max-width:620px){
    .lab-shell,.lab-header{width:min(100% - 20px, 1480px)}
    .tool-sidebar .check-grid{grid-template-columns:1fr!important;}
    .app-layout .workspace-head{align-items:flex-start;flex-direction:column;}
    .tool-row{width:100%;display:grid;grid-template-columns:1fr 1fr;}
    .tool-row a,.tool-row button{justify-content:center;}
    .editor-wrap,.preview-card iframe{height:420px;min-height:420px;}
}

/* v23: versions / rollback page */
.version-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.version-btn{
    border:1px solid rgba(46,139,255,.26);
    border-radius:999px;
    background:rgba(46,139,255,.08);
    color:#dfeaff;
    padding:8px 12px;
    cursor:pointer;
    transition:.2s ease;
    font-size:12px;
}
.version-btn:hover{border-color:rgba(46,139,255,.62);background:rgba(46,139,255,.14);transform:translateY(-1px)}
.version-btn.is-danger{border-color:rgba(255,54,94,.32);background:rgba(255,54,94,.08)}
.version-btn.is-danger:hover{border-color:rgba(255,54,94,.62);background:rgba(255,54,94,.14)}
.version-btn.is-current{border-color:rgba(85,240,178,.34);background:rgba(85,240,178,.08);color:#dfffee}
.version-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}
.version-manager{display:grid;gap:10px;margin-top:18px}
.version-row{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.024);
}
.version-row.is-current{border-color:rgba(85,240,178,.28);background:linear-gradient(180deg, rgba(85,240,178,.055), rgba(46,139,255,.025))}
.version-row strong{display:inline-grid;place-items:center;min-width:52px;height:30px;border-radius:999px;background:rgba(46,139,255,.11);font-size:12px;color:#cfe0ff}
.version-row.is-current strong{background:linear-gradient(135deg,var(--blue),var(--red));color:#fff}
.version-row p{margin:0;max-width:none;font-size:13px;line-height:1.45;color:#aebed3}
.version-note{font-size:12.5px;color:#93a6bf;line-height:1.55;margin-top:12px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025)}
@media (max-width:760px){.version-row{grid-template-columns:1fr;align-items:start}.version-actions{width:100%}.version-btn{width:100%;justify-content:center}}

/* v24: right settings panel, tabs, auth */
.user-pill{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:7px 11px;
    border:1px solid rgba(85,240,178,.22);
    border-radius:999px;
    background:rgba(85,240,178,.07);
    color:#dfffee;
    font-size:12px;
    font-weight:700;
}
.app-layout.app-layout--panel-right{
    grid-template-columns:minmax(0,1fr) 420px;
    align-items:stretch;
}
.app-layout--panel-right .workspace{
    grid-column:1;
    grid-row:1;
}
.app-layout--panel-right .tool-sidebar{
    grid-column:2;
    grid-row:1;
}
.app-layout--panel-right.is-sidebar-closed{grid-template-columns:1fr;}
.app-layout--panel-right.is-sidebar-closed .workspace{grid-column:1;}
.app-layout--panel-right .tool-sidebar .hero-card{
    border-radius:22px;
    background:
        radial-gradient(circle at 85% 0%, rgba(255,54,94,.14), transparent 34%),
        radial-gradient(circle at 15% 0%, rgba(46,139,255,.16), transparent 40%),
        linear-gradient(180deg, rgba(13,19,31,.97), rgba(7,11,19,.95));
}
.app-layout--panel-right .workspace{
    padding:14px;
    border-radius:22px;
}
.app-layout--panel-right .workspace-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
}
.app-layout--panel-right .editor-layout{
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    gap:12px;
}
.app-layout--panel-right .code-card,
.app-layout--panel-right .preview-card{
    border-radius:18px;
    background:linear-gradient(180deg, rgba(11,16,27,.96), rgba(6,10,18,.94));
}
.view-tabs{
    display:none;
    gap:7px;
    padding:6px;
    margin:0 0 10px;
    width:max-content;
    max-width:100%;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:rgba(7,12,20,.72);
}
.view-tabs:not(.hidden){display:flex;}
.view-tabs button{
    border:0;
    border-radius:999px;
    padding:8px 14px;
    background:transparent;
    color:#90a4c1;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}
.view-tabs button.is-active{
    color:#fff;
    background:linear-gradient(135deg, rgba(46,139,255,.28), rgba(255,54,94,.18));
    box-shadow:0 8px 22px rgba(0,0,0,.20);
}
.workspace.is-tabbed .editor-layout{grid-template-columns:1fr!important;}
.workspace.is-tabbed [data-view-panel]{display:none;}
.workspace.is-tabbed.is-editor-active [data-view-panel="editor"],
.workspace.is-tabbed.is-preview-active [data-view-panel="preview"]{display:block;}
.workspace.is-tabbed .code-card,
.workspace.is-tabbed .preview-card{min-height:calc(100vh - 280px);}
.workspace.is-tabbed .editor-wrap,
.workspace.is-tabbed .preview-card iframe{height:calc(100vh - 328px);min-height:560px;}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;}
.auth-shell{width:min(420px,100%);position:relative;z-index:2;}
.auth-card{
    border:1px solid rgba(255,255,255,.10);
    border-radius:26px;
    background:
        radial-gradient(circle at 18% 0%, rgba(46,139,255,.18), transparent 38%),
        radial-gradient(circle at 90% 0%, rgba(255,54,94,.16), transparent 34%),
        linear-gradient(180deg, rgba(16,23,35,.96), rgba(7,11,19,.95));
    box-shadow:0 26px 90px rgba(0,0,0,.45);
    padding:20px;
}
.auth-brand{display:inline-flex;margin-bottom:18px;text-decoration:none;}
.auth-title h1{font-size:30px;line-height:1.05;margin:10px 0 8px;color:#fff;letter-spacing:-.8px;}
.auth-title p{color:#9fb0c8;font-size:13px;line-height:1.5;margin:0 0 16px;}
.auth-form{display:grid;gap:12px;}
.auth-form label{display:grid;gap:7px;color:#9fb0c8;font-size:12px;font-weight:800;}
.auth-form input{
    height:44px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:#070c14;
    color:#fff;
    padding:0 14px;
    outline:none;
}
.auth-form input:focus{border-color:rgba(46,139,255,.65);box-shadow:0 0 0 3px rgba(46,139,255,.12);}
.auth-alert{border:1px solid rgba(255,54,94,.28);background:rgba(255,54,94,.10);color:#ffdbe2;border-radius:14px;padding:10px 12px;font-size:12px;margin-bottom:12px;}
.auth-alert--ok{border-color:rgba(85,240,178,.28);background:rgba(85,240,178,.10);color:#dcfff0;}
.auth-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:14px;color:#8fa1ba;font-size:12px;flex-wrap:wrap;}
.auth-foot a{color:#dfeaff;text-decoration:none;}
.auth-foot a:hover{color:#fff;}
@media (max-width:1220px){
    .app-layout.app-layout--panel-right{grid-template-columns:minmax(0,1fr) 390px;}
    .app-layout--panel-right .editor-layout{grid-template-columns:1fr;}
}
@media (max-width:900px){
    .app-layout.app-layout--panel-right{grid-template-columns:1fr;}
    .app-layout--panel-right .workspace,
    .app-layout--panel-right .tool-sidebar{grid-column:1;}
    .app-layout--panel-right .workspace{grid-row:2;}
    .app-layout--panel-right .tool-sidebar{grid-row:1;}
    .app-layout--panel-right .workspace-head{grid-template-columns:1fr;align-items:flex-start;}
}
@media (max-width:620px){
    .user-pill{display:none;}
    .view-tabs{width:100%;}
    .view-tabs button{flex:1;}
    .workspace.is-tabbed .editor-wrap,
    .workspace.is-tabbed .preview-card iframe{height:420px;min-height:420px;}
}

/* v25: visible tab checker in workspace and stronger full-width tab mode */
.top-tabs-toggle{
    min-height:33px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border:1px solid rgba(46,139,255,.25);
    border-radius:999px;
    background:rgba(46,139,255,.075);
    color:#dfeaff;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    user-select:none;
    transition:.2s ease;
}
.top-tabs-toggle:hover{border-color:rgba(46,139,255,.62);background:rgba(46,139,255,.12);transform:translateY(-1px)}
.top-tabs-toggle input{position:absolute;opacity:0;pointer-events:none}
.top-tabs-toggle__ui{
    width:26px;
    height:16px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
    position:relative;
    flex:0 0 auto;
    transition:.2s ease;
}
.top-tabs-toggle__ui:before{
    content:"";
    width:10px;
    height:10px;
    position:absolute;
    top:2px;
    left:3px;
    border-radius:50%;
    background:#8fa1ba;
    transition:.2s ease;
}
.top-tabs-toggle input:checked + .top-tabs-toggle__ui{
    background:linear-gradient(135deg, rgba(46,139,255,.88), rgba(255,54,94,.78));
    border-color:transparent;
    box-shadow:0 0 20px rgba(46,139,255,.20);
}
.top-tabs-toggle input:checked + .top-tabs-toggle__ui:before{
    transform:translateX(9px);
    background:#fff;
}
.app-layout--panel-right .view-tabs{
    width:100%;
    justify-content:flex-start;
    margin-bottom:12px;
    border-radius:16px;
}
.app-layout--panel-right .view-tabs button{
    min-width:130px;
}
.workspace.is-tabbed .editor-layout{
    display:block;
    width:100%;
}
.workspace.is-tabbed .code-card,
.workspace.is-tabbed .preview-card{
    width:100%;
    max-width:100%;
}
.workspace.is-tabbed.is-editor-active .code-card,
.workspace.is-tabbed.is-preview-active .preview-card{
    display:block!important;
}
.workspace.is-tabbed .editor-wrap,
.workspace.is-tabbed .preview-card iframe{
    height:calc(100vh - 312px);
    min-height:620px;
}
.app-layout.is-sidebar-closed .workspace.is-tabbed .editor-wrap,
.app-layout.is-sidebar-closed .workspace.is-tabbed .preview-card iframe{
    height:calc(100vh - 292px);
    min-height:650px;
}
@media (max-width:900px){
    .top-tabs-toggle{width:100%;justify-content:center}
    .workspace.is-tabbed .editor-wrap,
    .workspace.is-tabbed .preview-card iframe{height:520px;min-height:520px;}
}
@media (max-width:620px){
    .top-tabs-toggle{grid-column:1/-1}
    .app-layout--panel-right .view-tabs button{min-width:0;flex:1}
    .workspace.is-tabbed .editor-wrap,
    .workspace.is-tabbed .preview-card iframe{height:420px;min-height:420px;}
}
.switch-card--image-optimize input:checked + .switch-ui{background:linear-gradient(135deg, rgba(85,240,178,.95), rgba(46,139,255,.9));border-color:rgba(85,240,178,.55);box-shadow:0 0 22px rgba(85,240,178,.18)}