*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#1d2836}body{background:linear-gradient(#79b9e8 0,#bde4ff 38%,#7fc590 75%,#5ea66f 100%);min-height:100vh}.desktop{min-height:100vh;padding:12px}.aero-window{height:calc(100vh - 24px);min-height:650px;border:1px solid rgba(20,55,89,.78);border-radius:9px;overflow:hidden;background:rgba(236,246,255,.84);box-shadow:0 12px 36px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.8);backdrop-filter:blur(11px)}.titlebar{height:38px;display:flex;align-items:center;padding-left:10px;background:linear-gradient(rgba(255,255,255,.8),rgba(129,194,235,.43));text-shadow:0 1px #fff}.title-orb{margin-right:7px}.titletext{font-size:13px;font-weight:600;flex:1}.window-buttons{height:100%;display:flex}.window-buttons span{width:45px;display:grid;place-items:center;border-left:1px solid rgba(41,87,120,.3);background:linear-gradient(rgba(255,255,255,.7),rgba(104,173,216,.38));font-size:17px}.window-buttons .close{background:linear-gradient(#ee9a8d,#c84839);color:#fff;text-shadow:0 -1px rgba(0,0,0,.5);width:52px}.menubar{height:28px;display:flex;align-items:center;gap:21px;padding:0 12px;font-size:12px;background:linear-gradient(#fbfdff,#e1ecf6);border-top:1px solid #fff;border-bottom:1px solid #a7b7c6}.commandbar{height:44px;display:flex;align-items:center;gap:6px;padding:5px 8px;background:linear-gradient(#f9fcff,#dce9f4);border-bottom:1px solid #9eafbf;overflow:auto}.grow{flex:1}.sep{height:27px;border-left:1px solid #acbac6;border-right:1px solid #fff}.winbtn{border:1px solid #8799a8;border-radius:3px;padding:6px 10px;background:linear-gradient(#fff,#dce8f2);box-shadow:inset 0 1px #fff;cursor:pointer;color:#1b2c3b;white-space:nowrap}.winbtn:hover{background:linear-gradient(#fff,#c9e8fb);border-color:#4996c5}.winbtn:active,.winbtn.active{background:linear-gradient(#c3e7fb,#ecf9ff);border-color:#2e7da7;box-shadow:inset 0 1px 3px rgba(0,0,0,.16)}.winbtn.primary{background:linear-gradient(#fefefe,#c7eaf9);border-color:#6794ad}.winbtn.danger{background:linear-gradient(#fff,#f1d2d2);border-color:#b38686}.full{display:block;width:100%;text-align:center}.main-grid{height:calc(100% - 135px);display:grid;grid-template-columns:235px minmax(0,1fr) 245px}.sidebar{background:linear-gradient(90deg,rgba(245,250,255,.96),rgba(224,238,249,.93));padding:10px;border-right:1px solid #a8b8c5;overflow:auto}.rightbar{border-left:1px solid #a8b8c5;border-right:0}.group-title{font-size:12px;font-weight:700;color:#2f5c83;padding:8px 4px 5px;margin-top:4px;border-bottom:1px solid #c5d2dc}.small-status{font-size:10px;color:#667787;line-height:1.35;margin:6px 2px}.search{width:100%;padding:7px 8px;margin:6px 0;border:1px solid #9eacb8;border-radius:3px;background:#fff}.sticker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sticker-card{min-width:0;padding:5px;border:1px solid #aebdca;border-radius:3px;background:linear-gradient(#fff,#e7eff6);cursor:pointer}.sticker-card:hover{border-color:#4a9bd0;background:#e8f7ff}.sticker-card img{width:100%;height:72px;object-fit:contain;display:block}.sticker-card span{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.workspace{min-width:0;min-height:0;background:#a9b4be}.canvas-scroller{width:100%;height:100%;overflow:auto;padding:22px;display:flex;align-items:center;justify-content:center}.canvas-frame{position:relative;box-shadow:0 3px 14px rgba(0,0,0,.5);background:#fff}canvas{display:block;max-width:none;touch-action:none}.drop-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);border:1px solid #7595ad;border-radius:5px;padding:12px 18px;box-shadow:0 4px 16px rgba(0,0,0,.25);pointer-events:none;font-size:13px}.rightbar label{font-size:11px;display:flex;justify-content:space-between;align-items:center;margin:10px 1px 3px}.rightbar input[type=range]{width:100%}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0 5px}.helpbox{margin-top:10px;padding:8px;border:1px solid #b4c5d2;background:#fffceb;font-size:10px;line-height:1.55}.statusbar{height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:linear-gradient(#eef5fa,#d2e0ec);border-top:1px solid #9eafbd;font-size:11px;color:#526474}.upload-sticker-btn{margin-top:6px}.statusbar span+span{border-left:1px solid #aab9c5;padding-left:14px}@media(max-width:900px){.desktop{padding:4px}.aero-window{height:auto;min-height:100vh}.main-grid{height:auto;grid-template-columns:1fr}.workspace{order:1;min-height:470px}.leftbar{order:2;border-top:1px solid #9eafbf}.rightbar{order:3}.sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.commandbar{height:auto;min-height:44px;flex-wrap:wrap}.canvas-scroller{justify-content:flex-start;padding:10px}.statusbar{position:sticky;bottom:0}.menubar{display:none}}@media(max-width:520px){.titletext{font-size:11px}.window-buttons span{width:31px}.window-buttons .close{width:38px}.sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* ===== v4 Mobile / Touch adaptation ===== */
html,body{
    overscroll-behavior:none;
}
body{
    -webkit-tap-highlight-color:transparent;
}
button,.button,input{
    touch-action:manipulation;
}
canvas{
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

.mobile-toolbar{
    display:none;
}
.mobile-tabbar{
    display:none;
}

@media (max-width: 900px){
    body{
        overflow-x:hidden;
    }
    .shell{
        padding:6px;
        min-height:100dvh;
    }
    .topbar{
        position:sticky;
        top:0;
        z-index:40;
        padding:8px 10px;
        margin-bottom:6px;
        border-radius:12px;
        gap:8px;
        flex-direction:row;
        align-items:center;
    }
    .topbar h1{
        font-size:16px;
        margin:0;
    }
    .topbar .sub{
        display:none;
    }
    .top-actions{
        gap:5px;
        margin-left:auto;
    }
    .top-actions .button{
        padding:7px 9px;
        font-size:12px;
        border-radius:7px;
    }

    .layout{
        display:block;
        min-height:auto;
    }

    .workspace{
        display:block;
        padding:5px;
        border-radius:12px;
        min-height:calc(100dvh - 115px);
    }
    .canvas-wrap{
        min-height:calc(100dvh - 125px);
        max-height:calc(100dvh - 125px);
        border-radius:9px;
        overflow:auto;
        align-items:center;
        justify-content:center;
        -webkit-overflow-scrolling:touch;
    }
    canvas{
        width:auto;
        height:auto;
        max-width:100%;
        max-height:calc(100dvh - 135px);
        display:block;
    }

    .sticker-panel,
    .control-panel{
        display:none;
        position:fixed;
        left:6px;
        right:6px;
        bottom:64px;
        top:auto;
        z-index:60;
        max-height:58dvh;
        overflow:auto;
        border-radius:14px;
        padding:12px;
        box-shadow:0 18px 50px rgba(0,0,0,.28);
    }
    .sticker-panel.mobile-open,
    .control-panel.mobile-open{
        display:block;
    }

    .sticker-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        max-height:38dvh;
        overflow:auto;
        gap:7px;
    }
    .sticker-card{
        min-height:92px;
    }
    .sticker-card img{
        height:60px;
    }

    .control-panel .button,
    .control-panel input,
    .control-panel label{
        font-size:14px;
    }
    .control-panel .button{
        min-height:42px;
    }
    .control-panel input[type=range]{
        height:34px;
    }

    .mobile-tabbar{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        position:fixed;
        left:6px;
        right:6px;
        bottom:max(6px,env(safe-area-inset-bottom));
        z-index:70;
        background:rgba(238,247,255,.94);
        border:1px solid rgba(255,255,255,.95);
        border-radius:14px;
        box-shadow:0 8px 30px rgba(20,60,90,.22), inset 0 1px 0 white;
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        overflow:hidden;
    }
    .mobile-tabbar button{
        border:0;
        border-right:1px solid rgba(80,120,150,.14);
        background:linear-gradient(rgba(255,255,255,.95),rgba(205,228,244,.95));
        min-height:50px;
        padding:5px 3px;
        color:#18324b;
        font:600 12px "Segoe UI","Microsoft YaHei",sans-serif;
    }
    .mobile-tabbar button:last-child{
        border-right:0;
    }
    .mobile-tabbar button.active{
        background:linear-gradient(#dff5ff,#9bd7f4);
        box-shadow:inset 0 0 0 1px rgba(42,128,184,.22);
    }

    .mobile-dimmer{
        display:none;
        position:fixed;
        inset:0;
        z-index:55;
        background:rgba(15,35,50,.18);
    }
    .mobile-dimmer.show{
        display:block;
    }

    .drop-hint{
        max-width:80%;
        text-align:center;
        font-size:13px;
    }

    .panel-title{
        position:sticky;
        top:-12px;
        z-index:2;
        background:rgba(245,251,255,.95);
        padding:10px 0 6px;
        backdrop-filter:blur(10px);
    }

    .tips{
        padding-bottom:8px;
    }
}

@media (max-width: 560px){
    .top-actions .button{
        padding:6px 7px;
        font-size:11px;
    }
    .sticker-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .sticker-card{
        min-height:84px;
        padding:5px;
    }
    .sticker-card img{
        height:54px;
    }
}

@media (orientation:landscape) and (max-height:600px){
    .topbar{
        position:relative;
    }
    .workspace{
        min-height:calc(100dvh - 72px);
    }
    .canvas-wrap{
        min-height:calc(100dvh - 80px);
        max-height:calc(100dvh - 80px);
    }
    canvas{
        max-height:calc(100dvh - 90px);
    }
    .sticker-panel,
    .control-panel{
        left:auto;
        right:6px;
        top:58px;
        bottom:58px;
        width:min(360px,46vw);
        max-height:none;
    }
}


/* ===== v5 sticker/mobile improvements ===== */
.sticker-mobile-actions{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-bottom:8px;
}
.sticker-upload-btn{
    text-align:center;
}
.sticker-upload-progress{
    position:relative;
    height:28px;
    border-radius:8px;
    overflow:hidden;
    margin:8px 0;
    background:rgba(255,255,255,.65);
    border:1px solid rgba(54,104,142,.22);
}
.sticker-upload-progress-bar{
    position:absolute;
    inset:0 auto 0 0;
    width:0%;
    background:linear-gradient(#b9e8ff,#65bce9);
    transition:width .15s ease;
}
.sticker-upload-progress span{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    font-size:12px;
    font-weight:700;
}
.sticker-filter-row{
    display:flex;
    gap:6px;
    margin:0 0 10px;
    overflow-x:auto;
}
.sticker-filter{
    flex:0 0 auto;
    border:1px solid rgba(62,104,136,.22);
    border-radius:999px;
    background:linear-gradient(#fff,#e0edf7);
    padding:6px 10px;
    color:#18324b;
    font-size:12px;
    cursor:pointer;
}
.sticker-filter.active{
    background:linear-gradient(#e8f8ff,#9edaf6);
    box-shadow:inset 0 0 0 1px rgba(49,127,178,.2);
}
.sticker-card.is-uploaded{
    outline:1px solid rgba(53,150,210,.35);
}
.mobile-sticker-object-tools{
    display:none;
}

@media(max-width:900px){
    .sticker-panel{
        border-radius:18px 18px 12px 12px;
        padding-bottom:max(14px,env(safe-area-inset-bottom));
    }
    .sticker-panel::before{
        content:"";
        display:block;
        width:44px;
        height:4px;
        border-radius:999px;
        background:rgba(42,75,96,.25);
        margin:0 auto 8px;
    }
    .sticker-mobile-actions{
        position:sticky;
        top:34px;
        z-index:4;
        background:rgba(245,251,255,.96);
        padding:4px 0 7px;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }
    .sticker-filter-row{
        position:sticky;
        top:82px;
        z-index:3;
        background:rgba(245,251,255,.95);
        padding-bottom:6px;
    }
    .sticker-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:8px;
        padding-bottom:12px;
    }
    .sticker-card{
        min-height:96px;
        border-radius:10px;
    }
    .sticker-card:active{
        transform:scale(.96);
    }
    .sticker-card img{
        height:64px;
        pointer-events:none;
    }
    .mobile-sticker-object-tools{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        gap:7px;
        margin:0 0 10px;
    }
    .mobile-sticker-object-tools .button{
        min-height:40px;
        padding:7px 5px;
    }
}

@media(max-width:520px){
    .sticker-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}


/* ===== v6 fully automatic responsive layout ===== */
:root{
    --ui-gap: clamp(6px, 1vw, 14px);
    --ui-radius: clamp(10px, 1.4vw, 20px);
    --panel-left: clamp(210px, 19vw, 300px);
    --panel-right: clamp(210px, 18vw, 280px);
    --topbar-h: clamp(58px, 7vh, 82px);
    --mobile-bar-h: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --viewport-h: 100dvh;
}

@supports not (height: 100dvh){
    :root{ --viewport-h: 100vh; }
}

.shell{
    padding:var(--ui-gap);
}

.topbar{
    border-radius:var(--ui-radius);
}

.layout{
    gap:var(--ui-gap);
    grid-template-columns:
        minmax(190px,var(--panel-left))
        minmax(0,1fr)
        minmax(190px,var(--panel-right));
}

.panel,.workspace{
    border-radius:var(--ui-radius);
}

.sticker-grid{
    grid-template-columns:repeat(auto-fill,minmax(clamp(78px,7vw,118px),1fr));
}

.sticker-card img{
    height:clamp(54px,7vh,84px);
}

.canvas-wrap{
    min-height:clamp(360px,calc(var(--viewport-h) - 135px),820px);
    max-height:calc(var(--viewport-h) - 120px);
}

canvas{
    max-width:100%;
    max-height:calc(var(--viewport-h) - 145px);
}

@media (min-width: 901px){
    .layout{
        min-height:calc(var(--viewport-h) - var(--topbar-h) - (var(--ui-gap) * 3));
    }
    .sticker-grid{
        max-height:calc(var(--viewport-h) - 220px);
    }
}

/* Mid-size / tablet / narrow desktop */
@media (max-width: 1100px) and (min-width: 701px){
    :root{
        --panel-left: clamp(180px,23vw,240px);
        --panel-right: clamp(180px,22vw,230px);
    }
    .layout{
        grid-template-columns:
            minmax(170px,var(--panel-left))
            minmax(0,1fr)
            minmax(170px,var(--panel-right));
    }
    .panel{
        padding:10px;
    }
    .sticker-grid{
        grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
    }
}

/* Auto compact mode */
@media (max-width: 900px){
    :root{
        --mobile-bar-h: clamp(50px,7vh,62px);
    }
    .shell{
        padding:clamp(4px,1vw,8px);
    }
    .topbar{
        padding:clamp(7px,1.5vw,11px);
    }
    .workspace{
        min-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 64px - var(--safe-bottom));
    }
    .canvas-wrap{
        min-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 74px - var(--safe-bottom));
        max-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 74px - var(--safe-bottom));
    }
    canvas{
        max-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 84px - var(--safe-bottom));
    }
    .sticker-panel,
    .control-panel{
        left:clamp(4px,1.2vw,10px);
        right:clamp(4px,1.2vw,10px);
        bottom:calc(var(--mobile-bar-h) + var(--safe-bottom) + 8px);
        max-height:min(64dvh,560px);
    }
    .mobile-tabbar{
        left:clamp(4px,1.2vw,10px);
        right:clamp(4px,1.2vw,10px);
        min-height:var(--mobile-bar-h);
        bottom:max(4px,var(--safe-bottom));
    }
    .mobile-tabbar button{
        min-height:var(--mobile-bar-h);
        font-size:clamp(11px,2.6vw,13px);
    }
    .sticker-grid{
        grid-template-columns:repeat(auto-fit,minmax(clamp(76px,20vw,112px),1fr));
    }
}

/* Very narrow phones */
@media (max-width: 420px){
    .topbar{
        gap:4px;
    }
    .topbar h1{
        font-size:clamp(14px,4.2vw,17px);
    }
    .top-actions{
        gap:3px;
    }
    .top-actions .button{
        padding:6px 7px;
        font-size:10px;
    }
    .mobile-tabbar{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .sticker-grid{
        grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
    }
}

/* Short screens, landscape phones, split screen */
@media (max-height: 620px){
    .topbar{
        position:relative;
        margin-bottom:4px;
        padding-top:6px;
        padding-bottom:6px;
    }
    .workspace{
        min-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 56px - var(--safe-bottom));
    }
    .canvas-wrap{
        min-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 64px - var(--safe-bottom));
        max-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 64px - var(--safe-bottom));
    }
    .sticker-panel,
    .control-panel{
        max-height:72dvh;
    }
}

/* Foldables / large tablets */
@media (min-width: 1200px) and (max-width: 1600px){
    :root{
        --panel-left: clamp(230px,18vw,290px);
        --panel-right: clamp(220px,17vw,270px);
    }
}

/* Ultra-wide screens */
@media (min-width: 1800px){
    :root{
        --panel-left: 320px;
        --panel-right: 300px;
    }
    .shell{
        max-width:2200px;
        margin:0 auto;
    }
}

/* Runtime classes controlled by JS */
body.ui-compact .topbar .sub{
    display:none;
}
body.ui-compact .panel{
    padding:8px;
}
body.ui-compact .sticker-card span{
    font-size:10px;
}
body.ui-short .topbar{
    position:relative;
}
body.ui-touch .button,
body.ui-touch button{
    min-height:40px;
}


/* ===== v7 all controls on one side ===== */
.layout{
    grid-template-columns:minmax(250px,clamp(260px,24vw,360px)) minmax(0,1fr);
    grid-template-areas:
        "stickers workspace"
        "controls workspace";
    align-items:start;
}
.sticker-panel{
    grid-area:stickers;
}
.control-panel{
    grid-area:controls;
}
.workspace{
    grid-area:workspace;
    min-height:calc(var(--viewport-h) - var(--topbar-h) - (var(--ui-gap) * 3));
    align-self:stretch;
}
.sticker-panel,
.control-panel{
    width:100%;
}
.sticker-panel{
    max-height:min(48dvh,520px);
}
.control-panel{
    max-height:min(44dvh,500px);
    overflow:auto;
}
.sticker-grid{
    max-height:min(32dvh,360px);
}

/* Compact desktop: keep same-side tools, narrower column */
@media (max-width:1100px) and (min-width:901px){
    .layout{
        grid-template-columns:minmax(220px,30vw) minmax(0,1fr);
    }
}

/* Mobile/tablet: single same-side drawer */
@media (max-width:900px){
    .layout{
        display:block;
    }

    .sticker-panel,
    .control-panel{
        position:fixed;
        top:58px;
        bottom:calc(var(--mobile-bar-h) + var(--safe-bottom) + 8px);
        left:6px;
        right:auto;
        width:min(88vw,390px);
        max-height:none;
        overflow:auto;
        border-radius:0 16px 16px 0;
        transform:translateX(calc(-100% - 16px));
        transition:transform .22s ease;
        display:block;
        z-index:60;
    }

    .sticker-panel.mobile-open,
    .control-panel.mobile-open{
        transform:translateX(0);
    }

    .mobile-dimmer.show{
        display:block;
    }

    .workspace{
        min-height:calc(var(--viewport-h) - var(--mobile-bar-h) - 64px - var(--safe-bottom));
    }

    .mobile-tabbar{
        grid-template-columns:repeat(4,1fr);
    }
}

/* Landscape phones: same-side narrow rail */
@media (orientation:landscape) and (max-height:620px) and (max-width:900px){
    .sticker-panel,
    .control-panel{
        top:6px;
        bottom:calc(var(--mobile-bar-h) + 6px);
        width:min(42vw,350px);
    }
}


/* ===== v8 unified TOP toolbar ===== */
.unified-tools{
    position:sticky;
    top:0;
    z-index:80;
    margin-bottom:var(--ui-gap);
    border-radius:12px;
    padding:5px;
}
.tool-strip{
    display:flex;
    align-items:center;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
}
.tool-btn{
    flex:0 0 auto;
    min-height:36px;
    padding:6px 11px;
    border:1px solid rgba(55,95,125,.3);
    border-radius:6px;
    background:linear-gradient(#fff,#dcecf7);
    color:#17344d;
    font:600 12px "Segoe UI","Microsoft YaHei",sans-serif;
    box-shadow:inset 0 1px white;
}
.tool-btn.active,.tool-btn:active{
    background:linear-gradient(#dff5ff,#94d3f2);
}
.tool-btn.danger-tool{
    background:linear-gradient(#fff,#f3d7d7);
}
.top-popover{
    display:none;
    position:fixed;
    z-index:95;
    top:112px;
    left:var(--ui-gap);
    width:min(390px,calc(100vw - 2 * var(--ui-gap)));
    max-height:min(70dvh,620px);
    overflow:auto;
    border-radius:14px;
    padding:10px;
}
.top-popover.open{display:block}
.popover-head{
    position:sticky;top:-10px;z-index:5;
    display:flex;align-items:center;justify-content:space-between;
    background:rgba(245,251,255,.96);
    padding:7px 4px;
    margin-bottom:6px;
}
.popover-close{
    width:32px;height:30px;border:1px solid #789;
    border-radius:6px;background:linear-gradient(#fff,#dcecf7);
    font-size:18px;
}

/* Original side panels become source containers only; JS moves them into top popovers. */
.layout{
    display:block;
}
.workspace{
    width:100%;
    min-height:calc(var(--viewport-h) - 145px);
}
.sticker-panel,.control-panel{
    display:none;
}
#topStickerMount .sticker-panel,
#topPropertyMount .control-panel{
    display:block !important;
    position:static !important;
    transform:none !important;
    width:100% !important;
    max-height:none !important;
    border:0;
    box-shadow:none;
    background:transparent;
    backdrop-filter:none;
    padding:2px;
}
#topStickerMount .sticker-panel::before{display:none}
#topStickerMount .sticker-grid{
    max-height:45dvh;
    grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
}
#topPropertyMount .control-panel{
    overflow:visible;
}
.mobile-tabbar{display:none !important}

@media(max-width:900px){
    .topbar{
        position:relative;
        margin-bottom:5px;
    }
    .unified-tools{
        top:0;
        margin-bottom:5px;
        border-radius:9px;
        padding:4px;
    }
    .tool-btn{
        min-height:42px;
        padding:7px 12px;
        font-size:12px;
    }
    .top-popover{
        top:auto;
        left:5px;
        right:5px;
        bottom:max(5px,env(safe-area-inset-bottom));
        width:auto;
        max-height:68dvh;
        border-radius:16px 16px 10px 10px;
    }
    .workspace{
        min-height:calc(100dvh - 132px);
    }
    .canvas-wrap{
        min-height:calc(100dvh - 142px);
        max-height:calc(100dvh - 142px);
    }
    canvas{
        max-height:calc(100dvh - 152px);
    }
    #topStickerMount .sticker-grid{
        grid-template-columns:repeat(auto-fit,minmax(clamp(78px,22vw,105px),1fr));
        max-height:42dvh;
    }
}


/* ===== v9 fixed unified toolbar ===== */
.main-grid.single-canvas{
  display:block !important;
  height:calc(100% - 184px);
}
.single-canvas .workspace{height:100%;min-height:0}
.unified-tools{
  height:48px;padding:5px 7px;
  background:linear-gradient(#f9fcff,#dce9f4);
  border-bottom:1px solid #9eafbf;
  position:relative;z-index:40;
}
.tool-strip{
  height:100%;display:flex;align-items:center;gap:5px;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.toptool{
  flex:0 0 auto;min-height:34px;padding:6px 10px;
  border:1px solid #8799a8;border-radius:4px;
  background:linear-gradient(#fff,#dce8f2);
  box-shadow:inset 0 1px #fff;color:#1b2c3b;font-weight:600;
}
.toptool.active{background:linear-gradient(#c3e7fb,#ecf9ff);border-color:#2e7da7}
.toptool.danger-tool{background:linear-gradient(#fff,#f1d2d2)}
.tool-popover{
  display:none;position:fixed;z-index:100;
  top:122px;left:12px;width:min(410px,calc(100vw - 24px));
  max-height:calc(100dvh - 150px);overflow:auto;
  padding:8px;border:1px solid rgba(20,55,89,.75);border-radius:8px;
  background:rgba(238,247,255,.97);
  box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px #fff;
  backdrop-filter:blur(12px);
}
.tool-popover.open{display:block}
.tool-popover .sidebar{
  display:block!important;position:static!important;width:100%!important;
  max-height:none!important;transform:none!important;border:0!important;
  background:transparent!important;padding:2px!important;overflow:visible!important;
}
.popover-title{
  position:sticky;top:-8px;z-index:5;display:flex;justify-content:space-between;
  align-items:center;padding:7px;background:rgba(238,247,255,.98);
  border-bottom:1px solid #b5c5d2;margin-bottom:5px;
}
.popover-x{width:32px;height:28px;border:1px solid #8999a7;border-radius:3px;background:linear-gradient(#fff,#dce8f2);font-size:18px}
.panel-shade{display:none;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.16)}
.panel-shade.show{display:block}
.sticker-popover .sticker-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));max-height:48dvh}
.sticker-popover .sticker-card img{height:82px}
.mobile-tabbar{display:none!important}

@media(max-width:900px){
 .desktop{padding:0}
 .aero-window{border-radius:0;min-height:100dvh;height:100dvh}
 .titlebar{height:34px}.commandbar{height:42px;min-height:42px;flex-wrap:nowrap}
 .unified-tools{height:50px;padding:4px}
 .toptool{min-height:40px;padding:7px 11px}
 .main-grid.single-canvas{height:calc(100dvh - 34px - 42px - 50px - 25px)}
 .single-canvas .workspace{min-height:0!important;height:100%}
 .canvas-scroller{height:100%;padding:6px;justify-content:center}
 .tool-popover{
   top:auto;left:5px;right:5px;bottom:max(5px,env(safe-area-inset-bottom));
   width:auto;max-height:72dvh;border-radius:14px 14px 6px 6px;
 }
 .sticker-popover .sticker-grid{grid-template-columns:repeat(auto-fit,minmax(82px,1fr));max-height:48dvh}
 .sticker-popover .sticker-card{min-height:96px}
 .sticker-popover .sticker-card img{height:68px}
}