.app{background:#666;flex-direction:column;align-items:center;height:100vh;display:flex}.ad-box-top{color:#888;background:#444;justify-content:center;align-items:center;width:728px;height:90px;margin:10px;display:flex}.main-layout{flex:1;justify-content:center;gap:10px;width:100%;padding:10px;display:flex}.side-ad{color:#888;background:#444;justify-content:center;align-items:center;width:160px;display:flex}.editor{background:#222;border-radius:8px;flex-direction:column;width:900px;padding:15px;display:flex}.top-ui{gap:15px;height:120px;margin-bottom:10px;display:flex}.colors-grid{background:#333;border-radius:5px;flex:1;grid-template-columns:repeat(9,1fr);gap:5px;padding:10px;display:grid}.dot{cursor:pointer;border:1px solid #000;border-radius:3px;height:20px}.preview-box{background:#fff;border-radius:5px;justify-content:center;align-items:center;width:150px;display:flex;overflow:hidden}.preview-box img{max-width:100%}.selected-ui{color:#fff;background:#333;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;width:100px;font-size:12px;display:flex}.selected-ui input{cursor:pointer;width:50px;height:50px}.canvas-container{cursor:none;background:#fff;border-radius:5px;flex:1;position:relative;overflow:hidden}canvas{width:100%;height:100%}.display-logo{z-index:10;pointer-events:none;opacity:.7;width:80px;position:absolute;top:10px;left:10px}.cursor{pointer-events:none;border:1px solid #000;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.bottom-ui{flex-direction:column;gap:10px;margin-top:10px;display:flex}.tools{background:#333;border-radius:5px;gap:5px;padding:8px;display:flex}.tools button{color:#fff;cursor:pointer;background:#444;border:none;flex:1;padding:8px;font-weight:700}.tools button.active{background:#ff9800}.actions{gap:5px;display:flex}.actions button{color:#fff;cursor:pointer;border:none;border-radius:3px;flex:1;padding:10px;font-weight:700}.btn-blue{background:#2196f3}.btn-red{background:#f44336}.btn-green{background:#4caf50}.btn-orange{background:#ff9800}.app-container{background-color:#7a7a7a;flex-direction:column;height:100vh;display:flex;overflow:hidden}.ad-top{background:#666;justify-content:center;align-items:center;height:100px;display:flex}.main-content{flex:1;justify-content:center;gap:10px;padding-bottom:10px;display:flex}.ad-side{writing-mode:vertical-rl;background:#888;justify-content:center;align-items:center;width:160px;font-size:14px;display:flex}.editor-container{background-color:#1a1a1a;border-radius:10px;flex-direction:column;width:900px;max-width:70vw;padding:15px;display:flex;box-shadow:0 4px 15px #0000004d}.header-tools{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.preview-window-top{background:#fff;border:2px solid #444;border-radius:5px;width:200px;height:110px}.color-group{background:#2a2a2a;border-radius:5px;flex:1;padding:5px}.color-group h4{color:gold;text-align:center;margin:0 0 5px;font-size:10px}.color-grid-compact{grid-template-columns:repeat(12,1fr);gap:2px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border-radius:2px}.white-board-area{background:#fff;border:1px solid #ddd;border-radius:5px;flex:1;min-height:350px;margin-bottom:10px}.canvas-element{width:100%;height:100%}.footer-controls{flex-direction:column;gap:5px;display:flex}.tool-and-size{background:#222;border-radius:5px;justify-content:space-between;align-items:center;padding:5px 15px;display:flex}.size-control-ui{color:#fff;align-items:center;gap:10px;font-size:12px;display:flex}.btn-row{justify-content:center;gap:5px;display:flex}.f-btn{cursor:pointer;color:#fff;background:#444;border:none;border-radius:3px;padding:6px 12px;font-size:10px;font-weight:700;transition:transform .1s}.f-btn:active{transform:scale(.95)}.f-btn.active{box-shadow:0 0 8px #f39c1280;background:#f39c12!important}.header-right-tools{flex:1.1;justify-content:flex-end;align-items:center;gap:10px;display:flex}.undo-btn{margin-left:10px}@media (width<=1200px){.editor-container{width:95vw;max-width:95vw}}@media (width<=1024px){.ad-top,.ad-side{display:none!important}.app-container{height:100dvh}.main-content{gap:0;padding-bottom:0}.editor-container{box-sizing:border-box;width:100vw;max-width:100vw;height:100%;box-shadow:none;border-radius:0;padding:10px}}@media (width<=768px){.header-tools{flex-direction:row;align-items:center;gap:6px;margin-bottom:6px}.color-group{box-sizing:border-box;flex:1;width:auto;padding:3px 5px}.color-group h4{display:none!important}.color-grid-compact{grid-template-columns:repeat(12,1fr);gap:3px;padding:0}.header-right-tools{flex:none;gap:0;width:auto}.preview-window-top{display:none!important}.color-group.picker-group{min-width:unset!important;background:0 0!important;flex:none!important;padding:2px 4px!important}.color-group.picker-group div{align-items:center;flex-direction:row!important;gap:4px!important}.color-group.picker-group div div{border-radius:4px!important;width:28px!important;height:28px!important}.color-group.picker-group span{display:none!important}.white-board-area{min-height:250px;margin-bottom:6px}.tool-and-size{flex-direction:column;align-items:stretch;gap:6px;padding:5px 8px}.size-control-ui{justify-content:space-between;width:100%}.btn-row{flex-wrap:wrap;gap:3px;width:100%}.btn-row .f-btn{text-align:center;flex:calc(33.33% - 3px);padding:6px 2px;font-size:9px}.undo-btn{margin-left:0!important}.footer-controls{gap:4px}.footer-controls .btn-row{gap:3px;margin-top:2px}.footer-controls .btn-row .f-btn{flex:calc(25% - 3px)}.download-group{width:100%;flex:calc(50% - 3px)!important}.download-group button{flex:1}.download-group select{flex:none;height:28px!important;font-size:9px!important}}