*,:before,:after{box-sizing:border-box}:root{--bg-page:#e0e0e0;--bg-header:#000;--field-bg:#e0e1e6;--label-color:#666;--ease:.15s ease;--header-h:60px;--footer-h:40px}@media (width>=900px){:root{--header-h:80px}}html,body{background:var(--bg-page);margin:0}#root{text-align:left;flex-direction:column;min-height:100%;display:flex}.app-root{background:var(--bg-page);flex-direction:column;width:100%;font-family:Inter,system-ui,-apple-system,Arial,sans-serif;display:flex}.app-header{height:var(--header-h);min-height:var(--header-h);background:var(--bg-header);z-index:100;flex-shrink:0}.header-inner{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;max-width:1400px;height:100%;margin:0 auto;padding:0 20px;display:flex}@media (width>=900px){.header-inner{padding:0 40px}}.app-logo-text{color:#fff;letter-spacing:.3px;font-size:18px}.app-logo-bold{font-weight:700}.app-logo-light{font-weight:400}@media (width>=900px){.app-logo-text{font-size:20px}}.header-actions{gap:8px;display:flex}.header-btn{cursor:pointer;letter-spacing:.2px;color:#fff;min-height:44px;transition:opacity var(--ease);border:none;border-radius:6px;padding:0 20px;font-size:14px;font-weight:500}.header-btn:hover{opacity:.82}.header-btn:disabled{opacity:.45;cursor:not-allowed}.header-btn-download{background:#000;justify-content:center;align-items:center;width:44px;padding:0;display:inline-flex}.header-btn-order{background:#58585b}.app-main{flex-direction:column;display:flex}@media (width>=900px){html,body,#root,.app-root{height:100%;overflow:hidden}.app-main{height:calc(100vh - var(--header-h) - var(--footer-h));flex-direction:row;justify-content:center;overflow:hidden}}.editor-layout{flex-direction:column;width:100%;display:flex}@media (width>=900px){.editor-layout{max-width:1400px;height:calc(100vh - var(--header-h) - var(--footer-h));box-sizing:border-box;flex-flow:row;align-items:stretch;gap:2vw;padding:0 40px}}.canvas-wrapper{background:var(--bg-page);justify-content:center;align-items:center;width:100%;height:55vh;display:flex;position:relative;overflow:hidden}.canvas-col{flex-direction:column;width:100%;display:flex}@media (width>=900px){.canvas-col{flex:1;min-width:0;height:100%}.canvas-wrapper{flex:1;height:auto;min-height:0}}.canvas-hint{color:#999;text-align:center;flex-shrink:0;margin:0;padding:6px 16px 10px;font-size:12px;font-style:italic}.canvas-container{box-shadow:none;background:0 0;border:none;overflow:hidden}.controls-panel{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#0000001f transparent;border-top:1px solid #0000001a;width:100%;padding:24px 20px;box-shadow:0 -2px 8px #0000000f}@media (width>=900px){.controls-panel{width:440px;min-width:440px;height:100%;box-shadow:none;border-top:none;flex-shrink:0;padding:32px 36px;overflow:hidden auto}}.controls-inner{flex-direction:column;gap:20px;display:flex}.controls-heading{color:#1a1a1a;letter-spacing:-.2px;margin:0;font-size:18px;font-weight:700}.ctrl-section{flex-direction:column;gap:8px;display:flex}.ctrl-section-title{text-transform:uppercase;letter-spacing:1.4px;color:var(--label-color);margin:0;font-size:10px;font-weight:400}.ctrl-hint{color:var(--label-color);margin:0;font-size:11px;line-height:1.5}.toggle-group{background:#ededed;border-radius:6px;gap:2px;padding:2px;display:flex}.toggle-btn{cursor:pointer;color:#000;min-height:44px;transition:background var(--ease), color var(--ease);background:0 0;border:none;border-radius:4px;flex:1;padding:0 12px;font-size:13px;font-weight:500}.toggle-btn.active{color:#fff;background:#000}.toggle-btn:hover:not(.active){background:#00000012}.text-input,.font-select{color:#1a1a1a;background:var(--field-bg);box-sizing:border-box;width:100%;transition:box-shadow var(--ease);border:none;border-radius:6px;outline:none;min-height:44px;padding:12px;font-size:14px;box-shadow:inset 0 1px 3px #00000021}.text-input:focus,.font-select:focus{box-shadow:inset 0 1px 4px #00000038,0 0 0 2px #0000001a}.font-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888888'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px;line-height:1.5}.select-label{text-transform:uppercase;letter-spacing:1.4px;color:var(--label-color);font-size:10px;font-weight:400}.color-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;transition:transform var(--ease);border:none;border-radius:4px;outline:none;position:relative;box-shadow:0 1px 2px #0003}.color-swatch:hover{z-index:1;transform:scale(1.12)}.color-swatch.selected:after{content:"";pointer-events:none;background:#fffffff2;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #00000059}.text-controls{flex-direction:column;gap:8px;display:flex}.app-footer{height:var(--footer-h);color:#fff9;letter-spacing:.3px;background:#000;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;display:flex}.modal-overlay{z-index:500;box-sizing:border-box;background:#0000007a;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-box{background:#f5f5f5;border-radius:10px;width:100%;max-width:400px;padding:32px 28px 28px;box-shadow:0 8px 32px #00000038}.modal-title{color:#1a1a1a;letter-spacing:-.2px;margin:0 0 24px;font-size:18px;font-weight:700}.modal-form{flex-direction:column;gap:16px;display:flex}.modal-field{flex-direction:column;gap:5px;display:flex}.modal-label{text-transform:uppercase;letter-spacing:1.4px;color:var(--label-color);font-size:10px;font-weight:400}.modal-input{color:#1a1a1a;background:var(--field-bg);box-sizing:border-box;width:100%;transition:box-shadow var(--ease);border:none;border-radius:6px;outline:none;min-height:44px;padding:12px;font-family:inherit;font-size:14px;box-shadow:inset 0 1px 3px #00000021}.modal-input:focus{box-shadow:inset 0 1px 4px #00000038,0 0 0 2px #0000001a}.modal-actions{gap:8px;margin-top:8px;display:flex}.modal-btn{cursor:pointer;letter-spacing:.2px;min-height:44px;transition:opacity var(--ease);border:none;border-radius:6px;flex:1;padding:0 16px;font-family:inherit;font-size:14px;font-weight:500}.modal-btn:hover{opacity:.82}.modal-btn:disabled{opacity:.45;cursor:not-allowed}.modal-btn-cancel{color:#1a1a1a;background:#c5c6cb}.modal-btn-submit{color:#fff;background:#000}