.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}