@tailwind base;@tailwind components;@tailwind utilities;*{margin:0;padding:0;box-sizing:border-box}body{margin:0;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}.app-container{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.content-wrapper{max-width:428px;margin:0 auto;padding:.75rem}@media (min-width: 480px){.content-wrapper{padding:1rem}}@media (min-width: 768px){.content-wrapper{max-width:768px;padding:2rem}}@media (min-width: 1024px){.content-wrapper{max-width:1200px;padding:2rem}}.app-header{text-align:center;margin-bottom:2rem;padding:2rem 1.5rem;background:linear-gradient(135deg,#1e293b,#334155);border-radius:1rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #0000001a}.app-title{font-size:2rem;font-weight:900;background:linear-gradient(135deg,#fbbf24,#ef4444,#a855f7 80%,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:-.02em}@media (min-width: 768px){.app-title{font-size:3.5rem}}.app-subtitle{color:#fffc;font-size:1rem;font-weight:500}@media (min-width: 768px){.app-subtitle{font-size:1.125rem}}.panel{background:linear-gradient(135deg,#334155,#475569);border-radius:1rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #00000026;margin-bottom:1.5rem;overflow:hidden}.panel-header{padding:1rem;background:#0000001a;border-bottom:1px solid rgba(255,255,255,.1)}.panel-header h1,.panel-header h2,.panel-header h3,.panel-header h4,.panel-header h5,.panel-header h6,.panel-header p,.panel-header *{color:#fff!important}.panel-content{padding:.75rem}@media (min-width: 480px){.panel-content{padding:1rem}}@media (min-width: 768px){.panel-content{padding:1.5rem}}.tile-rack{background:linear-gradient(180deg,#92400e,#78350f);border-radius:1rem;padding:1.5rem;box-shadow:0 10px 30px #00000026;margin-bottom:1.5rem}.rack-content{text-align:center}.rack-tiles{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:1rem}.rack-tile{transform:rotate(-2deg);transition:transform .2s ease}.rack-tile:nth-child(2n){transform:rotate(2deg)}.rack-tile:hover{transform:scale(1.05) rotate(0)}.rack-count{color:#fef3c7;font-size:.875rem;font-weight:500}.rack-empty{color:#fef3c7;font-size:1rem;padding:2rem 0}.tile{position:relative!important;border-radius:.5rem!important;border:none!important;cursor:pointer!important;transition:all .2s ease!important;color:#fff!important;box-shadow:0 4px 8px #0000004d!important;display:block!important}.tile:hover:not(:disabled){transform:translateY(-2px)!important;box-shadow:0 8px 16px #0006!important}.tile:disabled{cursor:not-allowed!important;opacity:.7!important}.tile-small{width:2.5rem!important;height:3.25rem!important}.tile-medium{width:3.5rem!important;height:4.75rem!important}.tile-large{width:4rem!important;height:5.25rem!important}@media (min-width: 360px){.tile-medium{width:3.75rem!important;height:5rem!important}.tile-large{width:4.25rem!important;height:5.5rem!important}}@media (min-width: 480px){.tile-medium{width:4rem!important;height:5.25rem!important}.tile-large{width:4.5rem!important;height:5.75rem!important}}@media (min-width: 768px){.tile-medium{width:5rem!important;height:6.5rem!important}.tile-large{width:5.5rem!important;height:7rem!important}}.color-section{margin-bottom:1rem}.color-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease;border:none;width:100%;text-align:left}.color-header:hover{filter:brightness(1.1)}.color-info{display:flex;align-items:center;gap:.75rem}.color-name{color:#fff;font-weight:700;font-size:1.125rem}.color-count{background:#fff3;color:#fff;padding:.25rem .5rem;border-radius:.375rem;font-size:.875rem;font-weight:500}.chevron-icon{color:#fffc;transition:transform .2s ease}.chevron-icon.expanded{transform:rotate(180deg)}.color-section p,.color-section span,.color-section h4,.color-section *{color:#fff!important}.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;padding:1rem;background:#ffffff08}@media (min-width: 640px){.tile-grid{grid-template-columns:repeat(6,1fr);gap:1rem}}@media (min-width: 768px){.tile-grid{grid-template-columns:repeat(8,1fr)}}@media (min-width: 1024px){.tile-grid{grid-template-columns:repeat(13,1fr)}}.tile-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.75rem;background:#ffffff08;width:100%;max-width:100%;margin:0 auto;box-sizing:border-box}@media (min-width: 360px){.tile-type-grid{gap:.625rem;padding:.875rem;max-width:340px}}@media (min-width: 480px){.tile-type-grid{gap:.75rem;padding:1rem;max-width:400px}}@media (min-width: 640px){.tile-type-grid{gap:1rem;max-width:480px}}@media (min-width: 768px){.tile-type-grid{max-width:520px}}.btn{border:none;border-radius:.75rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 12px #0000004d;color:#fff!important}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px #0006}.btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-primary{background:linear-gradient(135deg,#0891b2,#0e7490);padding:1rem 1.5rem;font-size:1.125rem}.btn-primary:disabled{background:linear-gradient(135deg,#64748b,#475569)}.btn-secondary{background:linear-gradient(135deg,#475569,#334155);padding:.75rem 1.25rem;font-size:1rem}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);padding:.75rem 1.25rem;font-size:1rem}.upload-area{border:3px dashed rgba(255,255,255,.3);border-radius:.75rem;padding:3rem 1rem;text-align:center;cursor:pointer;transition:all .3s ease;background:#ffffff05}.upload-area:hover{border-color:#a855f799;background:#ffffff0d}.upload-icon{margin:0 auto 1rem;color:#fff9}.upload-text-primary{font-size:1.25rem;color:#fff;margin-bottom:.5rem;font-weight:600}.upload-text-secondary{color:#ffffffb3;font-size:1rem}.app-footer{margin-top:3rem;padding:2rem 1rem;text-align:center;background:linear-gradient(135deg,#1e293b,#334155);border-radius:1rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #0000001a}.footer-content{color:#fffc;font-size:.875rem;margin-bottom:1rem}.footer-links{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}.footer-link{color:#ffffffe6;text-decoration:none;font-weight:500;transition:color .2s ease;display:flex;align-items:center;gap:.5rem}.footer-link:hover{color:#fbbf24}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.hidden-mobile{display:none}@media (min-width: 768px){.hidden-mobile{display:block}}.mobile-only{display:block}@media (min-width: 768px){.mobile-only{display:none}}