body,html{height:100%;margin:0;background:#fff;overflow:visible}.no-select{user-select:none}#appFooter,#appHeader{height:64px!important}#stack{position:absolute;top:64px;bottom:64px;left:0;right:0;display:flex;flex-direction:column;min-height:320px;touch-action:none;-ms-touch-action:none}.card{touch-action:none;-ms-touch-action:none;flex:1;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;font-family:monospace;font-size:1.5rem;transition:transform .2s ease}.icon-group{display:flex;gap:.75rem;align-items:center}.icon-btn{touch-action:none;-ms-touch-action:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;opacity:.9;transition:opacity .2s}.icon-btn:hover{opacity:1}.icon-btn.disabled{opacity:.4;pointer-events:none}svg{width:32px;height:32px}.dragging{transform:scale(1.05);opacity:.95;z-index:100;cursor:grabbing;box-shadow:0 14px 28px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.1)}.placeholder{background:#f3f4f6;border-radius:.25rem;min-height:64px;transition:background .25s ease-in-out}.placeholder.drag-active{background:#f7f7f7}#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;background:rgba(16,185,129,.95);color:#fff;font-size:1rem;padding:.375rem .75rem;border-radius:.375rem;opacity:0;transition:opacity .2s}.btn-green{background:#10b981;color:#fff;font-weight:600;letter-spacing:.025em;transition:background-color .2s}.btn-green:hover:not(:disabled){background:#059669}.btn-green:active:not(:disabled){background:#047857}.btn-green:disabled{opacity:.5;cursor:not-allowed;background:#10b981}.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:50}.modal-overlay.active{opacity:1;pointer-events:auto}.modal{background:#fff;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.15);width:90%;max-width:560px;padding:1.5rem;text-align:center}#tintsModal.modal-overlay{background:rgba(0,0,0,.4)}#tintsModal .modal{max-width:680px;border-radius:1rem}@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .18s ease-out}.swatch-bar{display:flex;width:100%;height:28px;overflow:hidden}.swatch{flex:1;height:28px}.template-grid{display:grid;gap:1.25rem;margin-top:1rem}@media (max-width:819.98px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:820px){.template-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}.template-item{cursor:pointer;transition:transform .15s;text-align:center}.template-item:hover{transform:scale(1.02)}.template-name{margin-top:.4rem;font-weight:600;font-size:.9rem}.selected{outline:3px solid #10b981;outline-offset:4px;border-radius:.25rem}.history-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}.history-item{cursor:pointer;transition:transform .12s}.history-item:hover{transform:scale(1.01)}.history-empty{color:#6b7280;margin-top:.5rem}:root{--focus-ring:2px solid #d1d5db}.hh-focusable:focus{outline:var(--focus-ring);outline-offset:2px;border-radius:0}.hh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon-btn svg{pointer-events:none}@media (max-width:480px){header{padding-left:8px;padding-right:8px;height:52px}header h1{font-size:.95rem;letter-spacing:0;margin-right:6px}header nav{gap:4px}header nav .btn{padding:.25rem .45rem;font-size:.75rem;line-height:1rem}}#menuToggle{display:none}#menuPanel{position:fixed;top:64px;left:0;right:0;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.15);z-index:60;transform-origin:top;transform:translateY(-10px) scaleY(.9);opacity:0;transition:transform .22s ease-out,opacity .22s ease-out}#menuPanel.active{transform:translateY(0) scaleY(1);opacity:1}#menuPanel button{display:block;width:100%;text-align:center;border-radius:0}@media (max-width:819.98px){#headerControls{display:none!important}#menuToggle{display:flex!important;align-items:center;justify-content:center;width:42px;height:42px}}@media (min-width:820px){#menuPanel{display:none!important}}#menuPanel:not(.active){pointer-events:none!important}