:root{--bg-color: #121212;--panel-bg: #1e1e1e;--text-color: #e0e0e0;--border-color: #444;--input-bg: #121212;--accent-color: #3a86ff;--button-bg: transparent;--button-hover: #222;--button-text: #e0e0e0;--font-family: monospace, system-ui, sans-serif;--form-width: 500px;--container-width: 100%;--select-arrow-color: #a0a0a0}.theme-light{--bg-color: #f5f5f5;--panel-bg: #ffffff;--text-color: #333333;--border-color: #cccccc;--input-bg: #ffffff;--accent-color: #4361ee;--button-bg: #4361ee;--button-hover: #3a56d4;--button-text: #ffffff;--font-family: monospace, system-ui, sans-serif;--select-arrow-color: #555555}.theme-dark{--bg-color: #121212;--panel-bg: #1e1e1e;--text-color: #e0e0e0;--border-color: #444;--input-bg: #121212;--accent-color: #3a86ff;--button-bg: transparent;--button-hover: #222;--button-text: #e0e0e0;--font-family: monospace, system-ui, sans-serif;--select-arrow-color: #a0a0a0}.theme-vibrant{--bg-color: #0f172a;--panel-bg: #1e293b;--text-color: #f8fafc;--border-color: #38bdf8;--input-bg: #0f172a;--accent-color: #fb7185;--button-bg: #fb7185;--button-hover: #f43f5e;--button-text: #ffffff;--font-family: monospace, system-ui, sans-serif;--select-arrow-color: #38bdf8}body{background-color:var(--bg-color);margin:0;padding:0;transition:background-color .3s ease;color:var(--text-color);font-family:var(--font-family)}.app-header h1{font-family:var(--font-family);font-size:2rem;margin-bottom:.5rem;color:var(--text-color);transition:color .3s ease}.theme-hint{color:var(--text-color);opacity:.7;font-size:.8rem}.app-container{padding:0 5% 50px;max-width:1200px;margin:0 auto;color:var(--text-color);font-family:var(--font-family)}.horizontal-layout{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:20px;margin-top:2rem;flex-wrap:nowrap;align-items:stretch}.left-panel{flex:0 0 28%;width:28%;max-width:28%;min-width:250px;display:flex;flex-direction:column}.right-panel{flex:1;min-width:300px;max-width:700px;margin:0;display:flex;flex-direction:column;gap:20px;width:100%}.app-header{margin-bottom:2rem;text-align:center;padding-top:1.5rem}.form-container{width:100%;background-color:var(--panel-bg);padding:1.2rem;border-radius:6px;border:1px solid var(--border-color);transition:background-color .3s ease,border-color .3s ease;box-sizing:border-box;margin:0;max-width:none;display:block;flex-shrink:0}.form-inner-container{max-width:500px;margin:0 auto;width:100%}.form-group{margin-bottom:1rem;width:100%}.form-label{font-size:.85rem;font-family:var(--font-family);margin-bottom:.2rem;color:var(--text-color);display:block;font-weight:500;transition:color .3s ease}.section-heading{font-family:var(--font-family);font-size:1.1rem;margin-bottom:1rem;color:var(--text-color);font-weight:600;transition:color .3s ease;text-align:left;width:100%;display:block}.custom-input{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:6px;color:var(--text-color);font-family:var(--font-family);font-size:.9rem;padding:.5rem;height:40px;width:100%;box-shadow:none;outline:none;transition:border-color .3s ease,background-color .3s ease;box-sizing:border-box}.custom-textarea{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:6px;color:var(--text-color);font-family:var(--font-family);font-size:.9rem;padding:.5rem;width:100%;min-height:150px;resize:vertical;outline:none;transition:border-color .3s ease,background-color .3s ease,color .3s ease;box-sizing:border-box}.input-stats{display:flex;justify-content:space-between;font-size:.75rem;opacity:.7;margin-top:.5rem;color:var(--text-color);transition:color .3s ease}.tshirt-preview{height:100%;flex:1;display:flex;align-items:center;justify-content:center;background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:6px;padding:1.2rem;transition:background-color .3s ease,border-color .3s ease;position:relative}.tshirt-preview img{max-height:90vh;object-fit:contain;max-width:100%}.reset-btn{background-color:var(--accent-color);color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;transition:background-color .3s ease;position:absolute;bottom:1rem;right:1rem}.reset-btn:hover{background-color:var(--button-hover)}.upload-box{border:2px dashed var(--border-color);background-color:var(--input-bg);padding:1.5rem;text-align:center;border-radius:6px;color:var(--text-color);font-family:var(--font-family);transition:border-color .3s ease,background-color .3s ease,color .3s ease;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.8rem;cursor:pointer}.upload-box.active{border-color:var(--accent-color);background-color:var(--input-bg);box-shadow:0 0 0 3px #3a86ff26}.uploaded-preview img{max-width:80px;max-height:80px}.upload-button{background-color:var(--button-bg);color:var(--button-text);border:1px solid var(--border-color);padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-size:.9rem;font-family:var(--font-family);transition:all .2s ease}.upload-button:hover{background-color:var(--button-hover)}.upload-text{font-size:.9rem;margin:0;color:var(--text-color)}.upload-note{font-size:.75rem;margin:0;opacity:.7;color:var(--text-color)}select.custom-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22var%28--select-arrow-color%29%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:.65rem auto;padding-right:2rem;cursor:pointer}select.custom-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #3a86ff40}select.custom-input option{background-color:var(--panel-bg);color:var(--text-color);font-family:var(--font-family);padding:8px}.copy-button{background:transparent;border:none;color:var(--text-color);cursor:pointer;opacity:.7;padding:4px;border-radius:4px;transition:opacity .3s ease,color .3s ease}.copy-button:hover{opacity:1}.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.custom-input.error,.custom-textarea.error{border-color:#f44336;box-shadow:0 0 0 1px #f44336}.error-message{color:#f44336;font-size:.75rem;margin-top:.25rem;display:block}.theme-dark .error-message{color:#ff6b6b}.theme-vibrant .error-message{color:#ff8a8a}.size-recommendation{margin-top:1rem;padding:.75rem;border-radius:4px;background-color:var(--panel-bg);border:1px solid var(--border-color)}.recommendation-text{font-size:.85rem;color:var(--text-color);margin:0}.recommendation-text strong{color:var(--accent-color)}@media (max-width: 900px){.horizontal-layout{flex-direction:column}.left-panel,.right-panel{width:100%;max-width:100%}.left-panel{margin-bottom:20px;height:auto}.tshirt-preview{height:auto;min-height:400px}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes shimmer{0%{background-position:-100% 0}to{background-position:100% 0}}.app-container{animation:fadeIn .6s ease-out}.app-header h1{animation:slideInUp .7s ease-out}.app-header p{animation:slideInUp .7s ease-out .2s backwards}.left-panel{animation:slideInLeft .8s ease-out .1s backwards}.right-panel{animation:slideInRight .8s ease-out .1s backwards}.form-container{animation:fadeIn .5s ease-out .3s backwards;transition:transform .3s ease,box-shadow .3s ease}.tshirt-preview{animation:fadeIn .8s ease-out .2s backwards;transition:transform .4s ease,box-shadow .3s ease;position:relative;overflow:hidden;cursor:zoom-in}.tshirt-preview img{transition:transform .5s ease}.tshirt-preview:hover img{transform:scale(1.15)}.tshirt-preview:active img{transform:scale(1.4);transition:transform .2s ease}.theme-dark .tshirt-preview:active img{filter:brightness(1.15)}.theme-light .tshirt-preview:active img{filter:drop-shadow(0 0 5px var(--accent-color))}.theme-vibrant .tshirt-preview:active img{filter:drop-shadow(0 0 8px var(--accent-color))}label[for=print-text].form-label{position:relative;display:inline-block}label[for=print-text].form-label:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;transition:width .4s ease}.theme-dark label[for=print-text].form-label:after{background:#666}.theme-light label[for=print-text].form-label:after,.theme-vibrant label[for=print-text].form-label:after{background:var(--accent-color)}.form-container:hover label[for=print-text].form-label:after{width:100%}.tshirt-preview:hover{transform:translateY(-5px);box-shadow:0 8px 15px #0000001a}.form-container:hover{transform:translateY(-3px);box-shadow:0 6px 12px #00000014}.custom-input,.custom-textarea{transition:all .25s ease}.custom-input:focus,.custom-textarea:focus{transform:translateY(-2px)}.theme-dark .custom-input:focus,.theme-dark .custom-textarea:focus{box-shadow:0 0 0 2px #444;border-color:#666}.theme-light .custom-input:focus,.theme-light .custom-textarea:focus{box-shadow:0 0 0 2px var(--accent-color)}.theme-vibrant .custom-input:focus,.theme-vibrant .custom-textarea:focus{box-shadow:0 0 0 2px var(--accent-color)}.reset-btn,.upload-button,.copy-button{transition:all .3s ease;position:relative;overflow:hidden}.reset-btn:hover,.upload-button:hover,.copy-button:hover{transform:translateY(-2px);box-shadow:0 3px 8px #00000026}.reset-btn:active,.upload-button:active,.copy-button:active{transform:translateY(1px)}.reset-btn:after,.upload-button:after,.copy-button:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.theme-dark .reset-btn:after,.theme-dark .upload-button:after,.theme-dark .copy-button:after{background:#b4b4b480}.theme-light .reset-btn:after,.theme-light .upload-button:after,.theme-light .copy-button:after{background:#ffffffb3}.theme-vibrant .reset-btn:after,.theme-vibrant .upload-button:after,.theme-vibrant .copy-button:after{background:#ffffffb3}.reset-btn:active:after,.upload-button:active:after,.copy-button:active:after{animation:ripple .6s ease-out}@keyframes ripple{0%{transform:scale(0) translate(-50%,-50%);opacity:.5}to{transform:scale(20) translate(-50%,-50%);opacity:0}}.upload-box{transition:all .3s ease}.theme-dark .upload-box:hover{transform:translateY(-3px);border-color:#666}.theme-light .upload-box:hover,.theme-vibrant .upload-box:hover{transform:translateY(-3px);border-color:var(--accent-color)}.upload-box.active{animation:pulse .8s ease-in-out}.section-heading{position:relative}.section-heading:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;transition:width .4s ease}.theme-dark .section-heading:after{background:#666}.theme-light .section-heading:after,.theme-vibrant .section-heading:after{background:var(--accent-color)}.form-container:hover .section-heading:after{width:100%}.form-label{transition:color .3s ease,transform .3s ease}.theme-dark .custom-input:focus~.form-label,.theme-dark .custom-textarea:focus~.form-label{color:#aaa;transform:translateY(-2px)}.theme-light .custom-input:focus~.form-label,.theme-light .custom-textarea:focus~.form-label,.theme-vibrant .custom-input:focus~.form-label,.theme-vibrant .custom-textarea:focus~.form-label{color:var(--accent-color);transform:translateY(-2px)}.loading{position:relative;overflow:hidden}.theme-dark .loading:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,transparent 0%,rgba(100,100,100,.1) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}.theme-light .loading:before,.theme-vibrant .loading:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}@media (max-width: 900px){.horizontal-layout{animation:fadeIn .5s ease-out}.left-panel,.right-panel{animation:slideInUp .6s ease-out}}