body,html{margin:0;padding:0;width:100%;height:100%;font-family:Arial,sans-serif;background-color:#f0f0f0}.app-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:10px;box-sizing:border-box}.canvas-area{width:100%;max-width:1080px;margin-bottom:20px;display:flex;justify-content:center}canvas{border:1px solid #000}.toolbar-toggle{margin-bottom:10px;padding:8px 16px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.toolbar{width:100%;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:10px}.toolbar-section{margin-bottom:15px}.toolbar-group{display:flex;align-items:center;margin-bottom:10px}.toolbar-group label{margin-right:10px;font-size:.9rem}.toolbar-group input[type=number],.toolbar-group input[type=color],.toolbar-group select{padding:5px;border:1px solid #ccc;border-radius:4px;margin-right:10px}.toolbar-group input[type=number]{width:60px}.toolbar-group button{padding:6px 12px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.toolbar-group button:hover{background-color:#367c39}.toolbar-group p{margin-left:10px;font-size:.8rem;color:#777}@media (max-width: 480px) and (orientation: portrait){.app-container{padding:5px}.canvas-area{margin-bottom:10px}.toolbar-toggle{margin-bottom:5px;padding:6px 12px;font-size:.9rem}.toolbar{padding:5px}.toolbar-section{margin-bottom:10px}.toolbar-group{margin-bottom:5px}.toolbar-group label{font-size:.8rem}.toolbar-group input[type=number],.toolbar-group input[type=color],.toolbar-group select{padding:3px;font-size:.8rem}.toolbar-group input[type=number]{width:50px}.toolbar-group button{padding:4px 8px;font-size:.8rem}.toolbar-group p{font-size:.7rem}.toolbar-group{flex-wrap:wrap}.toolbar-group>*{margin-bottom:5px}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #4caf50;--color-secondary: #f0f0f0;--color-text: #333;--color-white: #fff;--color-black: #000;--color-gray: #ccc;--color-dark-gray: #777;--color-error: #f44336;--color-success: #4caf50;--color-warning: #ffeb3b;--color-info: #2196f3;--font-family-primary: "Arial", sans-serif;--font-family-secondary: "Helvetica", sans-serif;--font-size-base: 16px;--font-size-lg: 18px;--font-size-sm: 14px;--font-size-xs: 12px;--font-weight-normal: 400;--font-weight-bold: 700;--line-height-base: 1.5;--line-height-lg: 1.6;--line-height-sm: 1.4;--border-radius-base: 4px;--border-radius-lg: 8px;--border-radius-sm: 2px;--spacing-base: 10px;--spacing-lg: 20px;--spacing-sm: 5px;--spacing-xs: 2px;--shadow-base: 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 8px rgba(0, 0, 0, .1);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--transition-base: all .3s ease;--transition-lg: all .5s ease;--transition-sm: all .2s ease}