*{box-sizing:border-box;margin:0;padding:0}:root{--mint-primary: #5DCCB4;--mint-secondary: #4AB89E;--mint-light: #E8F9F6;--mint-dark: #3A9B88;--coral: #FF6B6B;--coral-hover: #FF5252;--text-dark: #2C3E50;--text-medium: #5A6C7D;--text-light: #8B98A9;--border-color: #E1E8ED;--background: #F8FAFB;--white: #FFFFFF;--shadow-sm: 0 2px 4px rgba(93, 204, 180, .08);--shadow-md: 0 4px 12px rgba(93, 204, 180, .12);--shadow-lg: 0 8px 24px rgba(93, 204, 180, .15)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background);color:var(--text-dark)}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--white)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:var(--white);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.header-left{display:flex;align-items:center;gap:12px}.app-logo{font-size:24px;font-weight:700;color:var(--mint-primary);display:flex;align-items:center;gap:8px}.app-logo:before{content:"✂️";font-size:28px}.app-tagline{display:inline-block;padding:4px 12px;background:var(--mint-light);color:var(--mint-dark);border-radius:12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.language-switcher{display:flex;gap:8px;background:var(--background);padding:4px;border-radius:8px}.lang-btn{padding:6px 12px;border:none;background:transparent;color:var(--text-medium);font-size:13px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease}.lang-btn.active{background:var(--mint-primary);color:var(--white)}.lang-btn:hover:not(.active){background:var(--mint-light);color:var(--mint-dark)}.main-wrapper{display:flex;flex:1;overflow:hidden}.controls-sidebar{width:320px;padding:24px;background:var(--background);border-right:1px solid var(--border-color);overflow-y:auto;display:flex;flex-direction:column;gap:24px}.sidebar-section{display:flex;flex-direction:column;gap:12px}.section-label{font-size:13px;font-weight:600;color:var(--text-medium);text-transform:uppercase;letter-spacing:.5px}.btn{padding:10px 16px;font-size:14px;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--mint-primary);color:var(--white);box-shadow:var(--shadow-md)}.btn-primary:hover{background:var(--mint-secondary);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-primary:active{transform:translateY(0)}.btn-danger{background:var(--coral);color:var(--white)}.btn-danger:hover{background:var(--coral-hover)}.btn-secondary{background:var(--white);color:var(--text-dark);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--mint-light);border-color:var(--mint-primary)}.file-input-wrapper{position:relative}.file-input{display:none}.file-input-label{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--white);border:2px dashed var(--mint-primary);border-radius:8px;color:var(--mint-dark);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.file-input-label:hover{background:var(--mint-light);border-color:var(--mint-secondary)}.scale-control{display:flex;flex-direction:column;gap:12px}.scale-value{font-size:14px;font-weight:600;color:var(--text-dark)}.scale-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--mint-light);border-radius:3px;outline:none}.scale-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--mint-primary);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .2s ease}.scale-slider::-webkit-slider-thumb:hover{background:var(--mint-secondary);transform:scale(1.1)}.scale-slider::-moz-range-thumb{width:20px;height:20px;background:var(--mint-primary);border-radius:50%;cursor:pointer;border:none;box-shadow:var(--shadow-sm)}.zoom-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.platform-group{margin-bottom:16px}.platform-name{font-size:13px;font-weight:600;color:var(--text-dark);margin-bottom:8px}.preset-checkbox{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;transition:all .2s ease}.preset-checkbox:hover{padding-left:4px}.preset-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--mint-primary);cursor:pointer}.preset-label{flex:1;font-size:13px;color:var(--text-dark)}.preset-size{font-size:11px;color:var(--text-light)}.main-content{flex:1;display:flex;overflow:hidden}.editor-section{flex:1;padding:24px;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center}.preview-section{width:350px;padding:24px;overflow-y:auto;background:var(--background);border-left:1px solid var(--border-color)}.section-title{margin:0 0 16px;font-size:18px;font-weight:600;color:var(--text-dark)}.editor-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px}.editor-canvas{border:2px solid var(--border-color);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md)}.hint{margin:0;text-align:center;font-size:13px;color:var(--text-light)}.preview-grid{display:flex;flex-direction:column;gap:16px}.preview-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;background:var(--white);borderRadius:12px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:all .2s ease}.preview-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--mint-primary)}.preview-canvas{border-radius:8px;box-shadow:var(--shadow-sm)}.preview-name{font-size:12px;font-weight:600;color:var(--text-dark);text-align:center}.preview-dimensions{font-size:11px;color:var(--text-light)}.preview-placeholder{padding:40px 20px;text-align:center;color:var(--text-light);font-size:14px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--mint-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--mint-primary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.preview-item{animation:fadeIn .3s ease}@media (max-width: 1024px){.main-wrapper{flex-direction:column}.controls-sidebar{width:100%;max-height:300px;border-right:none;border-bottom:1px solid var(--border-color)}.editor-section{padding:16px}.preview-section{width:100%;border-left:none;border-top:1px solid var(--border-color)}.app-header{padding:12px 16px;flex-wrap:wrap;gap:12px}.header-left{flex-direction:column;align-items:flex-start;gap:8px}.app-logo{font-size:20px}.app-tagline{font-size:10px}}@media (max-width: 768px){.controls-sidebar{padding:16px}.sidebar-section{gap:10px}.platform-group{margin-bottom:12px}.editor-canvas{max-width:100%;width:100%!important;height:auto!important}.editor-wrapper{width:100%}.preview-grid{gap:12px}.preview-item{padding:12px}.section-title{font-size:16px}.editor-section{justify-content:flex-start}}@media (max-width: 480px){.app-header{padding:10px 12px}.app-logo{font-size:18px}.app-logo:before{font-size:22px}.language-switcher{width:100%;justify-content:center}.controls-sidebar{padding:12px;gap:16px}.section-label{font-size:12px}.btn{padding:8px 14px;font-size:13px}.zoom-buttons{grid-template-columns:1fr 1fr}.editor-section,.preview-section{padding:12px}.preview-item{padding:10px}.preview-name{font-size:11px}.preview-dimensions{font-size:10px}.hint{font-size:12px}}.mobile-only{display:none}.desktop-only{display:flex}.desktop-export{display:block}@media (max-width: 1280px){.mobile-only{display:flex!important}.desktop-only,.desktop-export{display:none!important}.app-header{position:sticky;top:0;z-index:100;padding:12px 16px;background:var(--white);box-shadow:0 2px 8px #0000000d;display:flex;align-items:center;justify-content:space-between;gap:12px;isolation:isolate}.language-switcher.mobile-only{order:1!important;display:flex!important;gap:8px}.header-left{order:2!important;flex:0 1 auto}.hamburger-btn{display:flex!important;flex-direction:column;justify-content:space-around;width:32px;height:32px;background:transparent;border:none;cursor:pointer;padding:6px;z-index:101;order:3!important}.hamburger-btn span{display:block;width:100%;height:3px;background:var(--mint-primary);border-radius:3px;transition:all .3s ease}.hamburger-btn:active span{background:var(--mint-dark)}.controls-sidebar{position:fixed!important;top:0!important;left:-100%!important;width:85vw!important;max-width:400px!important;height:100vh!important;min-height:100vh!important;padding:70px 20px 20px!important;background:var(--white)!important;box-shadow:2px 0 20px #0000004d!important;z-index:99999!important;overflow-y:auto!important;overflow-x:hidden!important;transition:left .3s cubic-bezier(.4,0,.2,1)!important;-webkit-overflow-scrolling:touch}.controls-sidebar.drawer-open{left:0!important;padding-bottom:100px!important;padding-top:130px!important}.drawer-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;z-index:99998!important;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}.drawer-overlay.active{opacity:1;visibility:visible;pointer-events:auto}body.drawer-open{overflow:hidden}.drawer-close-btn{position:absolute;top:16px;right:16px;width:40px;height:40px;background:var(--mint-light);border:none;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100000;transition:all .2s ease}.drawer-close-btn:active{background:var(--mint-primary);transform:scale(.9)}.export-button-wrapper{position:fixed;bottom:20px;right:20px;z-index:9999}.btn-export{min-width:120px;min-height:56px;padding:0 24px;font-size:16px;font-weight:700;border-radius:28px;box-shadow:0 6px 24px #5dccb499,0 2px 8px #00000026;background:linear-gradient(135deg,var(--mint-primary) 0%,var(--mint-secondary) 100%);border:2px solid white}.btn-export:active{transform:scale(.95);box-shadow:0 4px 16px #5dccb466}.btn-export:hover{box-shadow:0 8px 28px #5dccb4b3,0 4px 12px #0003}}@media (min-width: 768px) and (max-width: 1280px){.header-left{display:flex!important;flex:1!important;order:2!important}.app-logo{font-size:20px!important}.app-tagline{display:none}.main-wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.editor-section{flex:1 1 60%;min-height:70vh;padding:20px}.preview-section{flex:1 1 35%;border-left:2px solid var(--mint-primary);border-top:none;border-bottom:none;padding:20px;min-height:70vh}.preview-grid{display:grid!important;grid-template-columns:1fr;gap:16px;overflow-y:auto;max-height:calc(70vh - 100px)}.preview-item{width:100%;padding:12px}}@media (max-width: 768px){.btn{min-height:44px;padding:12px 20px;font-size:15px;font-weight:600}.lang-btn{min-height:36px;min-width:50px;padding:8px 12px;font-size:13px;font-weight:600}.app-logo{font-size:18px}.app-tagline{display:none!important}.header-left{display:flex!important;order:1!important;flex:1!important;justify-content:center!important;flex:0 0 47%!important;justify-content:flex-start!important}.app-logo{font-size:16px!important;text-align:center;margin-right:auto}.language-switcher.mobile-only{order:2!important;flex-shrink:0;flex:0 0 50%;justify-content:flex-end}.hamburger-btn.mobile-only{order:3!important;flex-shrink:0;margin-left:auto}.main-wrapper{flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.editor-section{min-height:50vh;padding:16px;order:1;background:#fafafa}.editor-canvas{max-width:100vw!important;max-height:50vh!important;touch-action:none}.hint{font-size:13px;padding:8px;background:#5dccb41a;border-radius:8px;margin-top:12px}.file-input-label{min-height:60px;padding:16px;font-size:15px;font-weight:600;border-width:3px}.scale-slider{height:8px}.scale-slider::-webkit-slider-thumb{width:28px;height:28px}.scale-slider::-moz-range-thumb{width:28px;height:28px}.scale-value{font-size:16px;font-weight:700;color:var(--mint-primary);text-align:center}.zoom-buttons{grid-template-columns:1fr 1fr;gap:12px}.zoom-buttons .btn{font-size:18px}.platform-group{margin-bottom:16px;padding:12px;background:var(--mint-light);border-radius:12px}.platform-name{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--mint-dark)}.preset-checkbox{padding:10px;background:var(--white);border-radius:8px;margin-bottom:8px;min-height:44px}.preset-checkbox input[type=checkbox]{width:22px;height:22px}.preset-label{font-size:14px;font-weight:500}.preset-size{font-size:12px}.preview-section{order:2;width:100%;padding:16px;border-left:none;border-top:2px solid var(--mint-primary);border-bottom:2px solid var(--mint-primary);background:var(--white);min-height:200px}.section-title{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--mint-dark)}.preview-grid{display:flex!important;flex-direction:row!important;gap:12px;overflow-x:auto;overflow-y:visible;padding:8px 0 80px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}.preview-item{flex:0 0 auto;width:180px;padding:12px;scroll-snap-align:start;background:var(--background)}.preview-canvas{max-width:100%;width:100%;height:auto}.preview-name{font-size:12px;font-weight:600}.preview-dimensions{font-size:10px}.preview-grid::-webkit-scrollbar{display:none}.preview-grid{-ms-overflow-style:none;scrollbar-width:none}}@media (max-width: 400px){.app-header{padding:10px 12px}.app-logo{font-size:18px}.controls-sidebar{width:90vw!important;padding:60px 12px 12px!important}.btn{min-height:48px;font-size:14px}.file-input-label{min-height:56px;font-size:14px}.editor-section{min-height:45vh;padding:12px}.preview-item{width:140px}.btn-export{min-width:100px;min-height:52px;font-size:15px}.export-button-wrapper{bottom:16px;right:16px}}@media (max-width: 896px) and (orientation: landscape){.editor-section{min-height:60vh}.app-header{padding:8px 16px}.app-logo{font-size:16px}}@media (max-width: 1280px){.btn:active,.file-input-label:active,.preset-checkbox:active,.lang-btn:active{opacity:.8;transform:scale(.98)}*{-webkit-tap-highlight-color:transparent}button,a,label,input[type=checkbox]{touch-action:manipulation}}@media (hover: none) and (pointer: coarse){.btn:active{background-color:var(--mint-dark)}.btn-secondary:active{background-color:var(--mint-light)}.preset-checkbox:active{background:var(--mint-light)}}@media (max-width: 431px){.language-switcher.mobile-only{justify-content:flex-start!important}}