@font-face{font-family:DF Sans;src:url('/assets/fonts/NotoSans-Regular.ttf')}body.df-page{margin:0;background:#0a111c;color:#eaf2ff;font:13px 'DF Sans',Arial,sans-serif;overflow:hidden}*{box-sizing:border-box}.df-page :where(main,dialog,.df-menu) button,.df-page input,.df-page select{font:inherit}.df-page :where(main,dialog,.df-menu) button{cursor:pointer}.df-page :where(main,dialog,.df-menu) button:disabled{opacity:.35;cursor:default}.df-page .ah-root{height:76px;position:relative;z-index:30}.df-page .ah-root .nav{height:76px}.df-page .ah-root .logo img{width:164px;height:auto}.df-page [hidden]{display:none!important}.df-page :where(main,dialog,.df-menu) button,.df-page input,.df-page select{border:1px solid #304057;border-radius:7px;color:#eaf2ff;background:#162235;min-height:32px;padding:6px 9px}.df-page :where(main,dialog,.df-menu) button:hover{background:#22354d;border-color:#0081fb}.df-page :where(main,dialog,.df-menu) button:focus-visible,.df-page input:focus-visible,.df-page select:focus-visible{outline:2px solid #0081fb;outline-offset:2px}.df-page .primary{background:#0081fb;border-color:#0081fb;color:white}.df-page .muted{color:#9db0c9}.df-page :where(main,dialog,.df-menu) svg{width:19px;height:19px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.df-home{height:calc(100dvh - 76px);overflow:auto;padding:48px max(24px,calc((100vw - 1160px)/2)) 80px}.df-home h1{font-size:48px;letter-spacing:-2px;margin:10px 0}.df-home h1 span{color:#0081fb}.df-home p{color:#a9bbd2;line-height:1.8}.df-kicker{color:#0081fb;letter-spacing:2px;font-size:11px;font-weight:bold}.df-launch{display:flex;gap:14px;margin:25px 0 34px}.df-launch button{padding:17px 36px;font-size:16px;font-weight:bold}.df-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.df-preset{padding:14px!important;text-align:left;background:#111d2e!important;display:flex;flex-direction:column;gap:10px;min-height:174px}.df-preview{height:90px;display:grid;place-items:center;border-radius:6px;background:#1b2636;overflow:hidden}.df-sample{width:var(--w);height:var(--h);max-height:78px;max-width:150px;background:var(--a);box-shadow:0 4px 20px #0005;display:flex;flex-direction:column;justify-content:center;align-items:center;color:white;font-size:12px;font-weight:bold;letter-spacing:1px}.df-sample i{font-size:8px;font-style:normal;font-weight:normal;letter-spacing:2px;margin-top:5px}.df-preset small{color:#99adc8}.df-editor{height:calc(100dvh - 76px);display:grid;grid-template-rows:auto auto minmax(0,1fr) 28px}.df-menubar{display:flex;align-items:center;gap:7px;padding:8px 12px;background:#111c2c;border-bottom:1px solid #2b3c52;flex-wrap:wrap}.df-menubar .df-title{border:0;background:transparent;width:150px;font-weight:bold}.df-menubar .spacer{flex:1}.df-menubar .size{font-size:11px;color:#9db4d0}.df-options{min-height:49px;display:flex;align-items:center;gap:7px;padding:7px 12px;background:#142034;overflow-x:auto;white-space:nowrap;border-bottom:1px solid #2c3c52}.df-options label{display:flex;align-items:center;gap:4px;font-size:11px;color:#aebed4}.df-options input[type=number]{width:65px}.df-options input[type=color]{width:32px;padding:3px}.df-options input[type=range]{width:70px}.df-options select{max-width:150px}.df-body{display:grid;grid-template-columns:52px minmax(0,1fr) 294px;min-height:0}.df-rail{display:flex;flex-direction:column;align-items:center;gap:4px;background:#111c2c;padding:9px 4px;overflow:auto;border-right:1px solid #2d3e54}.df-rail button{position:relative;width:39px;height:37px;min-height:37px;padding:7px;border-color:transparent;background:transparent}.df-rail button.active{background:#0081fb;color:#fff}.df-rail>button[title]:hover:after{content:attr(title);position:fixed;left:52px;background:#07101e;color:#fff;padding:8px 12px;border:1px solid #425874;z-index:40;pointer-events:none}.df-stage{position:relative;overflow:hidden;background-color:#1b293d;background-image:radial-gradient(#485a7333 1px,transparent 1px);background-size:18px 18px;touch-action:none}.df-stage .canvas-container{position:absolute!important;inset:0}.df-inspector{overflow:auto;background:#111c2c;border-left:1px solid #304057;padding:12px;display:flex;flex-direction:column;gap:14px}.df-card{border:1px solid #2b3e55;border-radius:10px;padding:12px}.df-card h2,.df-card h3{font-size:12px;margin:0 0 13px;display:flex;justify-content:space-between;align-items:center}.df-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.df-fields label,.df-field{display:flex;flex-direction:column;gap:5px;color:#a9bed8;font-size:11px}.df-fields input,.df-fields select,.df-field input,.df-field select{width:100%;min-width:0}.df-field{margin:9px 0}.df-inline{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.df-inline button{flex:1}.df-inspector input[type=range]{accent-color:#0081fb;padding:0}.df-layer-list{min-height:80px;max-height:250px;overflow:auto;margin:0 -5px}.df-layer{display:flex;align-items:center;gap:5px;border:1px solid transparent;padding:6px 3px;border-radius:7px;margin-bottom:3px;background:#182537}.df-layer.selected{border-color:#0081fb;background:#123961}.df-layer.drop{border-top:3px solid #0081fb}.df-layer button{padding:3px;min-height:26px;border:0;background:transparent}.df-layer .thumb{width:32px;height:32px;object-fit:contain;background:repeating-conic-gradient(#233247 0% 25%,#162132 0% 50%) 0/10px 10px;border-radius:3px;cursor:pointer}.df-layer .name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.df-layer svg{width:15px;height:15px}.df-layer-bottom{display:flex;justify-content:space-around;border-top:1px solid #293e57;padding-top:9px;margin-top:8px}.df-layer-bottom button{border:0;background:transparent}.df-history{max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:3px}.df-history button{text-align:left;font-size:11px;min-height:27px;padding:4px 7px;background:transparent;border:0}.df-history .current{background:#123961;color:#80c1ff}.df-history .future{opacity:.4}.df-status{display:flex;justify-content:space-between;background:#111c2c;border-top:1px solid #2e4058;padding:5px 13px;color:#9cb5d1;font-size:10px}.df-toast{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#073568;color:white;border:1px solid #0081fb;border-radius:8px;z-index:70;max-width:90vw}.df-busy{position:absolute;inset:0;z-index:15;display:grid;place-items:center;background:#07142699;backdrop-filter:blur(2px);pointer-events:all}.df-busy>div{padding:26px;background:#112640;border:1px solid #0081fb;border-radius:15px;text-align:center;box-shadow:0 0 70px #0081fb40}.df-spark{font-size:35px;color:#56baff;animation:dfpulse 1.5s infinite}.df-busy progress{display:block;margin:15px auto;width:230px;accent-color:#0081fb}.df-busy:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,#0081fb33 50%,transparent 70%);animation:dfshine 2.3s linear infinite;pointer-events:none}@keyframes dfpulse{50%{opacity:.4;transform:scale(.85)}}@keyframes dfshine{from{transform:translateX(-75%)}to{transform:translateX(75%)}}.df-page dialog{color:#eaf2ff;background:#132135;border:1px solid #3a506d;border-radius:14px;padding:25px;width:min(470px,94vw);box-shadow:0 20px 100px #0009}.df-page dialog::backdrop{background:#030a16aa;backdrop-filter:blur(3px)}.df-page dialog h2{margin:0 0 17px;font-size:21px}.df-page dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.df-page dialog p{line-height:1.7;color:#a9bed6}.df-page dialog input,.df-page dialog select{width:100%}.df-page .df-check{display:flex;align-items:center;gap:8px;margin:12px 0;color:#b7c8de;font-size:12px}.df-page .df-check input{width:auto}.df-menu{position:fixed;z-index:50;background:#13243a;border:1px solid #44617d;border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:170px}.df-menu button{text-align:left;border:0;background:transparent}.df-export{margin-top:auto;display:grid;grid-template-columns:82px 1fr;gap:7px}.df-note{font-size:10px;line-height:1.7;color:#91a9c8}.df-page .swatches{display:flex;flex-wrap:wrap;gap:7px}.df-page .swatches button{height:26px;width:26px;min-height:26px;padding:0}.df-page .df-inspector .full{width:100%;margin-top:8px}.df-page .df-toggle{background:#0081fb33;border-color:#0081fb}.df-tip{margin:15px 0;font-size:12px;color:#97aeca} @media(max-width:1050px){.df-gallery{grid-template-columns:repeat(3,1fr)}.df-body{grid-template-columns:48px minmax(0,1fr) 250px}.df-menubar .df-title{width:100px}.df-options{gap:5px}.df-page .ah-root .nav{padding:0 15px}}@media(max-width:720px){.df-gallery{grid-template-columns:repeat(2,1fr)}.df-home{padding:30px 18px}.df-home h1{font-size:35px}.df-body{grid-template-columns:44px minmax(0,1fr) 220px}.df-menubar{padding:5px}.df-menubar .size{display:none}.df-inspector{padding:7px;gap:8px}.df-page .ah-root,.df-page .ah-root .nav{height:64px}.df-editor,.df-home{height:calc(100dvh - 64px)}.df-launch button{padding:14px 20px}.df-card{padding:9px}.df-rail button{width:35px}.df-status span:last-child{display:none}}
/* Docked panels retain their own scroll areas; layers and history never disappear. */
.df-inspector{display:grid;grid-template-rows:minmax(150px,1fr) minmax(155px,.8fr) minmax(100px,.5fr) 38px 32px;gap:10px;overflow:hidden}.df-inspector>.df-card{min-height:0;overflow:auto}.df-inspector>.df-card:nth-child(2){display:flex;flex-direction:column}.df-layer-list{flex:1;max-height:none;min-height:30px}.df-history{max-height:none}.df-inspector>.df-note{margin:0}.df-export{margin:0}.df-rail{overflow-x:hidden}.df-options button{flex-shrink:0}
.df-body{grid-template-columns:92px minmax(0,1fr) 294px}.df-rail{display:grid;grid-template-columns:repeat(2,39px);grid-auto-rows:38px;align-content:start;justify-content:center;gap:5px 3px;padding:10px 3px}.df-rail>button[title]:hover:after{left:90px}.df-rail input[type=color]{grid-column:1 / -1;justify-self:center}.df-rail button{width:39px;height:37px}@media(max-width:1050px){.df-body{grid-template-columns:86px minmax(0,1fr) 250px}.df-rail{grid-template-columns:repeat(2,36px)}.df-rail button{width:36px}}@media(max-width:720px){.df-body{grid-template-columns:80px minmax(0,1fr) 220px}.df-rail{grid-template-columns:repeat(2,34px);gap:4px 2px}.df-rail button{width:34px;padding:6px}}
.df-home{padding:32px max(24px,calc((100vw - 1080px)/2)) 70px;background:radial-gradient(ellipse at 50% 0,#142236 0,transparent 65%)}.df-welcome{max-width:850px;margin:0 auto 35px;padding:30px 25px 20px;text-align:center;background:#111c2b;border:1px solid #2c3c51;border-radius:16px;box-shadow:0 12px 40px #0002}.df-welcome h1{font-size:42px;margin:12px 0;letter-spacing:-1.5px}.df-welcome p{margin:12px 0}.df-welcome .df-launch{justify-content:center;flex-wrap:wrap;margin:24px 0 12px}.df-welcome .df-launch button{min-width:170px;padding:15px 25px}.df-gallery{gap:13px}.df-preset{transition:border-color .15s,transform .15s}.df-preset:hover{transform:translateY(-2px)}@media(max-width:720px){.df-home{padding:20px 16px 50px}.df-welcome{padding:22px 13px 15px}.df-welcome h1{font-size:32px}.df-welcome .df-launch{gap:8px}.df-welcome .df-launch button{min-width:130px;padding:13px 16px}}

#dfHistory{position:relative}#dfForeground{border:1px solid #4c6685;border-radius:9px;cursor:pointer}#dfForeground::-webkit-color-swatch-wrapper{padding:0}#dfForeground::-webkit-color-swatch{border:0;border-radius:4px}.df-page main{height:calc(100dvh - 76px);overflow:hidden}
.df-options{min-height:41px;padding:5px 9px;gap:5px;font-size:11px}.df-options label{font-size:10px;gap:3px}.df-options button,.df-options input,.df-options select{min-height:27px!important;height:27px;font-size:10.5px!important;padding:4px 6px!important;border-radius:5px!important}.df-options input[type=number]{width:54px}.df-options input[type=color]{width:28px;padding:3px!important}.df-options select{max-width:112px}.df-options svg{width:15px;height:15px}.df-menubar{padding:6px 10px;gap:6px;font-size:11px}.df-menubar button,.df-menubar input{font-size:11px!important;min-height:29px!important;height:29px;padding:4px 7px!important}.df-menubar svg{width:16px;height:16px}.df-menubar .df-title{width:140px}
.df-page .df-status{display:flex;align-items:center;justify-content:space-between;min-height:0;height:28px;padding:4px 12px;margin:0;border:0;border-top:1px solid #2e4058;background:#111c2c;color:#9cb5d1;font-size:10px;line-height:16px;overflow:hidden}.df-page dialog footer{padding:0!important;margin:20px 0 0!important;background:transparent;min-height:0}.df-page .df-inspector{grid-template-rows:minmax(170px,1fr) minmax(155px,.8fr) minmax(100px,.5fr) 32px}.df-menubar #dfExport{min-width:95px}.df-page main{overflow:clip}.df-page .df-status span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.df-spark,.df-busy:after{animation:none}.df-preset{transition:none}}
.df-menu.df-shape-menu{display:grid;grid-template-columns:repeat(4,44px);gap:7px;padding:13px;max-height:370px;overflow:auto;box-shadow:0 10px 40px #0008}.df-shape-menu strong,.df-shape-menu small{grid-column:1 / -1}.df-shape-menu strong{font-size:12px;padding-bottom:7px}.df-shape-menu small{font-size:9px;color:#a7bed6;padding-top:5px}.df-page .df-shape-menu button{width:44px;height:44px;padding:10px;background:#203048;border:1px solid #3b506c}.df-shape-menu svg{width:22px!important;height:22px!important;fill:#e6eefb!important;stroke:none!important}.df-shape-menu button:hover svg{fill:#fff!important}
.df-color-block{position:relative;grid-column:1 / -1;justify-self:center;margin-top:9px;width:62px;height:46px}.df-color-block input{margin:0!important}.df-color-block.unavailable{cursor:not-allowed}.df-color-block.unavailable input{opacity:.35;cursor:not-allowed}.df-color-disabled{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;line-height:1;color:#d9e5f5;text-shadow:0 1px 4px #000;pointer-events:none}#dfProperties input:disabled{opacity:.4;cursor:not-allowed}
.df-preset-tabs{display:flex;flex-wrap:wrap;gap:7px;flex-basis:100%;margin-top:10px}.df-page .df-preset-tabs button{background:transparent;border:1px solid #2d4058;border-radius:8px;padding:8px 15px;font-size:12px;color:#abc0d9}.df-page .df-preset-tabs button[aria-selected=true]{background:#0081fb22;color:#79baff;border-color:#0081fb}.df-page .df-preset-tabs button:hover{border-color:#0081fb;color:white}
.df-busy>div{color:#eaf3ff}html[data-theme=dark] body.df-page{color-scheme:dark}
.df-inspector>.df-card:nth-child(3){display:flex;flex-direction:column;overflow:hidden}.df-history{flex:1;min-height:0}.df-history button{flex-shrink:0}.df-card h2{flex-shrink:0}
.df-page .df-selection-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:hidden;fill:none}.df-selection-overlay path{fill:none;stroke-width:1.5px;stroke-linecap:butt;stroke-linejoin:round}.df-selection-overlay .df-selection-base{stroke:#fff}.df-selection-overlay .df-selection-ants{stroke:#101010;stroke-dasharray:4 4;animation:df-marching-ants .65s linear infinite}@keyframes df-marching-ants{from{stroke-dashoffset:0}to{stroke-dashoffset:-8}}@media(prefers-reduced-motion:reduce){.df-selection-overlay .df-selection-ants{animation:none}}
.df-busy{cursor:progress}
.df-menu.df-selection-menu{display:grid;grid-template-columns:repeat(2,94px);gap:8px;padding:12px;box-shadow:0 10px 40px #0007}.df-selection-menu strong{grid-column:1 / -1;font-size:12px;padding:3px 0 6px}.df-page .df-selection-menu button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 5px;font-size:10px;background:#203048;border:1px solid #3b506c}.df-selection-menu button.chosen{border-color:#0081fb!important;background:#0081fb22!important}.df-selection-menu svg{width:23px!important;height:23px!important;fill:none;stroke:currentColor}.df-selection-menu [data-selection-tool=marquee] svg,.df-selection-menu [data-selection-tool=ellipse] svg{stroke-dasharray:3 2}
.df-page .df-inspector{grid-template-rows:minmax(225px,1.5fr) minmax(150px,.8fr) minmax(100px,.5fr) 32px}
.df-properties-title{position:sticky;top:-12px;margin:-12px -12px 12px!important;padding:13px 12px;background:#111c2c;border-bottom:1px solid #304057;z-index:2;font-size:13px!important}
.df-properties-context{font-size:12px;color:#a9bed8;margin:0 0 14px;display:flex;justify-content:space-between;align-items:center}
.df-gradient-panel{border:1px solid #304057;border-radius:8px;padding:10px;margin-bottom:14px;background:#162235}
.df-gradient-panel summary{font-weight:600;cursor:pointer;margin-bottom:10px;font-size:12px}
.df-gradient-preview{height:28px;border-radius:5px;border:1px solid #52657e;margin:10px 0}
.df-gradient-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 12px}
.df-gradient-presets button{height:26px;min-height:26px;border:1px solid #63748b}
.df-gradient-stops{display:grid;gap:8px}.df-gradient-stop{display:grid;grid-template-columns:30px minmax(0,1fr) 65px;align-items:center;gap:6px}
.df-gradient-stop input{min-width:0;width:100%;font-size:11px!important}.df-gradient-stop input[type=color]{padding:2px;height:30px}
.df-stop-position{display:flex;align-items:center;font-size:10px;gap:3px}.df-stop-position input{padding:4px!important}

/* Properties and Layers remain docked; History opens beside Undo/Redo. */
.df-page .df-inspector{grid-template-rows:minmax(240px,1.5fr) minmax(180px,1fr) 32px}
.df-history-popover{position:fixed;z-index:55;width:min(340px,calc(100vw - 16px));max-height:min(540px,70vh);padding:14px;background:#132135;border:1px solid #405776;border-radius:10px;box-shadow:0 16px 50px #0007;display:flex;flex-direction:column}
.df-history-heading{display:flex;align-items:center;justify-content:space-between}.df-history-heading h2{margin:0;font-size:14px}.df-history-heading button{border:0!important;background:transparent!important;font-size:20px!important}
.df-history-popover .df-history{overflow:auto;max-height:420px;min-height:0;gap:5px}.df-page .df-history button{display:flex;align-items:center;gap:9px;width:100%;padding:9px;min-height:36px;text-align:left;flex-shrink:0}.df-history button svg{width:16px!important;height:16px!important;flex-shrink:0}.df-history button span{flex:1}.df-history button small{font-size:9px;color:#75bdff}.df-history button.current{border:1px solid #0081fb55;background:#123961}.df-history button.future{opacity:.55}
.df-page .df-rail svg{width:21px;height:21px;stroke-width:1.8}

/* The two panels share the full dock height, with independent scrolling. */
.df-page .df-inspector{grid-template-rows:minmax(0,1.35fr) minmax(180px,1fr);padding-bottom:12px;gap:12px}
.df-page #dfProperties{min-height:0;overflow:auto;overscroll-behavior:contain}
.df-page .df-inspector>.df-card:nth-child(2){min-height:0;overflow:hidden}
.df-page .df-layer-list{min-height:0;overflow:auto;overscroll-behavior:contain}
.df-page .df-layer-bottom{flex-shrink:0;margin-top:8px}

.df-page .df-pen-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;overflow:hidden}.df-pen-overlay path,.df-pen-overlay rect,.df-pen-overlay circle{stroke-linecap:round;stroke-linejoin:round}

.df-align-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;padding:0 5px;border-inline:1px solid #304057}.df-page .df-align-tools button{width:29px;min-width:29px;height:28px;min-height:28px;padding:5px;border-color:transparent;background:transparent}.df-align-tools button:nth-child(4){margin-left:5px}.df-align-tools svg{width:17px!important;height:17px!important}.df-page .df-align-tools button:hover{background:#0081fb22;border-color:#0081fb}

.df-page svg[data-icon=gradient]{fill:currentColor;stroke:none}

.df-page [data-tool=gradient] svg{transform:rotate(90deg)}
.df-layer{padding-left:calc(4px + var(--depth,0)*14px)!important;grid-template-columns:18px 32px minmax(0,1fr) 27px 27px!important}.df-layer-indent{width:18px}.df-layer .name small{display:block;font-size:9px;color:#9eb5cf}.df-layer [data-layer-action=expand]{width:18px!important;min-width:18px!important;padding:2px!important}.df-layer [data-layer-action=expand] svg{width:13px!important}.df-layer-menu{max-height:calc(100vh - 24px);overflow:auto;min-width:225px}.df-layer-menu button{display:flex;align-items:center;gap:10px}.df-layer-menu svg{width:16px;height:16px}.df-layer-menu button:disabled{opacity:.35;cursor:default}.df-gradient-overlay{position:absolute;inset:0;z-index:8;pointer-events:none;width:100%;height:100%;overflow:hidden}.df-pointer-preview{position:absolute;z-index:10;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;box-sizing:border-box}.df-pointer-preview.brush{border:1px solid white;outline:1px solid #17283e;box-shadow:0 0 0 1px #0005 inset}.df-pointer-preview.picker{border:4px solid #eef4fc;outline:1px solid #142237;box-shadow:0 3px 10px #0008}.df-drop-hint{position:absolute;inset:15px;z-index:15;pointer-events:none;display:flex;align-items:center;justify-content:center;background:#0081fb22;border:2px dashed #54b2ff;border-radius:12px;color:#fff;font-size:20px;font-weight:700}.df-brush-presets{display:flex;gap:3px}.df-brush-presets button{width:30px;min-width:30px;padding:5px}.df-brush-presets span{display:block;width:14px;height:14px;border-radius:50%;background:currentColor}.df-brush-presets .soft{filter:blur(2px)}.df-brush-presets .marker{opacity:.45}#dfSnap[aria-pressed=true]{color:#75beff;border-color:#0081fb;background:#0081fb20}.df-page .df-layer-list{min-height:80px}

.df-geometry{display:flex;align-items:center;gap:7px;flex-shrink:0;padding-left:8px;margin-left:2px;border-left:1px solid #304057}.df-geometry label{display:flex;align-items:center;gap:3px;font-size:10px;color:#9db4d0}.df-page .df-geometry input{width:51px;min-width:0;min-height:27px;height:27px;padding:4px 5px;font-size:10px}.df-page .df-geometry input:disabled{opacity:.45}.df-options>[data-action=rotate-left]{margin-left:7px}.df-page .df-options{gap:8px}

.df-page .df-gradient-overlay{width:100%!important;height:100%!important;max-width:none;max-height:none}
.df-recent{margin:28px 0 34px}.df-recent-heading{display:flex;gap:14px;align-items:baseline;justify-content:space-between;margin-bottom:14px}.df-recent-heading h2{font-size:18px;margin:0}.df-recent-heading small{color:#9eb3cc}.df-recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}.df-page .df-recent-project{height:auto;display:flex;flex-direction:column;text-align:left;gap:8px;padding:12px;min-width:0;background:#121e2e;border:1px solid #304258;border-radius:10px}.df-recent-project img{width:100%;height:110px;object-fit:contain;background:#1c2b3e;border-radius:5px}.df-recent-project strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-recent-project small{font-size:11px;color:#a4b8cf}.df-mask-panel{border:1px solid #304258;border-radius:9px;padding:11px;margin:12px 0 18px}.df-mask-panel summary{font-size:12px;font-weight:700;cursor:pointer;margin-bottom:12px}.df-mask-previews{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.df-mask-previews>div{display:flex;align-items:center;flex-direction:column;gap:5px}.df-mask-previews img{width:82px;height:65px;object-fit:contain;background:#000;border:1px solid #41546d;border-radius:5px}.df-mask-previews small{color:#adbed3;font-size:10px}.df-mask-panel button.active,.df-options [data-mask-action][aria-pressed=true]{background:#0081fb!important;color:white!important}.df-mask-check{display:flex;gap:8px;align-items:center;font-size:11px;margin-top:12px}.df-mask-check button{width:25px;height:25px;min-height:25px;border-radius:50%;border:1px solid #64748b;padding:0}.df-page .df-layer-mask{display:inline-flex;width:21px!important;min-width:21px!important;height:21px!important;min-height:21px!important;padding:0!important;margin-left:5px;vertical-align:middle;border:1px solid #71839b}.df-layer-mask img{width:100%;height:100%;object-fit:contain;background:black}#dfSaveStatus{font-size:10px;color:#a7c9ba}#dfSaveStatus.error{color:#ffb4a7}@media(max-width:600px){.df-recent-heading{align-items:flex-start;flex-direction:column;gap:5px}.df-recent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}