.tool-container{font-family:'Inter',system-ui,-apple-system,sans-serif;max-width:1100px;margin:20px auto;border:3px solid #111;border-radius:12px;box-shadow:6px 6px 0 #111;padding:30px;background:#fff;color:#111;box-sizing:border-box}h2.tool-title{font-family:'Montserrat',sans-serif;font-size:2rem;text-align:center;text-transform:uppercase;margin-top:0;margin-bottom:20px;font-weight:900}.instruction-banner{background-color:#fdfd96;border:3px dashed #111;border-radius:8px;padding:12px;text-align:center;font-size:1rem;margin-bottom:25px}.palette-workspace{display:flex;height:400px;border:3px solid #111;border-radius:12px;overflow:hidden;margin-bottom:30px;box-shadow:4px 4px 0 #111}.color-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:20px;transition:flex 0.2s ease,background-color 0.3s;position:relative}.color-col:hover{flex:1.2}.col-tools{background-color:#fff;border:3px solid #111;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:3px 3px 0 #111;opacity:0;transform:translateY(10px);transition:opacity 0.2s,transform 0.2s}.color-col:hover .col-tools{opacity:1;transform:translateY(0)}.color-col.is-locked .col-tools{opacity:1;transform:translateY(0)}.hex-label{font-family:'Montserrat',monospace;font-weight:900;font-size:1.1rem;text-transform:uppercase;cursor:pointer;transition:color 0.1s}.hex-label:hover{color:#2d7bb5}.col-btn{background:none;border:2px solid #111;border-radius:6px;cursor:pointer;width:35px;height:35px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background-color:#f4f4f4;transition:transform 0.1s,box-shadow 0.1s}.col-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #111}.btn-lock.locked{background-color:#ffb7b2}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.control-card{background-color:#f9f9f9;border:3px solid #111;border-radius:8px;padding:20px;box-shadow:4px 4px 0 #111;display:flex;flex-direction:column;justify-content:space-between}.control-card h4{margin:0 0 15px 0;font-family:'Montserrat',sans-serif;font-size:1.1rem}.control-card small{color:#666;font-size:.85rem;margin-top:10px;display:block}.rule-inputs{display:flex;gap:10px}.rule-inputs input[type="color"]{width:50px;height:45px;padding:0;border:3px solid #111;border-radius:6px;cursor:pointer;box-shadow:2px 2px 0 #111}.rule-inputs select{flex:1;padding:0 10px;font-family:'Inter',sans-serif;font-weight:700;border:3px solid #111;border-radius:6px;box-shadow:2px 2px 0 #111;outline:none}.btn-generate-rule{background-color:#b5ead7;font-family:'Montserrat',sans-serif;font-weight:900;border:3px solid #111;border-radius:6px;padding:0 15px;cursor:pointer;box-shadow:2px 2px 0 #111}.btn-generate-rule:active{transform:translate(2px,2px);box-shadow:0 0 0 #111}.export-buttons{display:flex;gap:10px}.btn-export{flex:1;background-color:#e6f7ff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.9rem;border:3px solid #111;border-radius:6px;padding:12px 10px;cursor:pointer;box-shadow:2px 2px 0 #111;transition:transform 0.1s}.btn-export:active{transform:translate(2px,2px);box-shadow:0 0 0 #111}.mobile-action-bar{display:none;margin-top:20px}.btn-space-mobile{width:100%;background-color:#ffdac1;font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.2rem;border:3px solid #111;border-radius:8px;padding:15px;cursor:pointer;box-shadow:4px 4px 0 #111}.btn-space-mobile:active{transform:translate(4px,4px);box-shadow:0 0 0 #111}#toastPalette{visibility:hidden;min-width:200px;background-color:#111;color:#fff;text-align:center;border-radius:8px;padding:12px;position:fixed;z-index:9999;bottom:30px;left:50%;transform:translateX(-50%);font-weight:700;opacity:0;transition:opacity 0.3s,bottom 0.3s}#toastPalette.show{visibility:visible;opacity:1;bottom:50px}@media (max-width:800px){.controls-grid{grid-template-columns:1fr}.export-buttons{flex-direction:column}.instruction-banner{display:none}.mobile-action-bar{display:block}.palette-workspace{flex-direction:column;height:600px}.color-col{flex-direction:row;justify-content:space-between;padding:0 20px}.color-col:hover{flex:1}.col-tools{flex-direction:row;opacity:1;transform:translateY(0);padding:5px 15px}}.tool-container{font-family:'Inter',system-ui,-apple-system,sans-serif;max-width:1100px;margin:20px auto;border:3px solid #111;border-radius:12px;box-shadow:6px 6px 0 #111;padding:30px;background:#fff;color:#111;box-sizing:border-box}h2.tool-title{font-family:'Montserrat',sans-serif;font-size:2rem;text-align:center;text-transform:uppercase;margin-top:0;margin-bottom:20px;font-weight:900}.instruction-banner{background-color:#fdfd96;border:3px dashed #111;border-radius:8px;padding:12px;text-align:center;font-size:1rem;margin-bottom:25px}.palette-workspace{display:flex;height:400px;border:3px solid #111;border-radius:12px;overflow:hidden;margin-bottom:30px;box-shadow:4px 4px 0 #111}.color-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:20px;transition:flex 0.2s ease,background-color 0.3s;position:relative}.color-col:hover{flex:1.2}.col-tools{background-color:#fff;border:3px solid #111;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:3px 3px 0 #111;opacity:0;transform:translateY(10px);transition:opacity 0.2s,transform 0.2s}.color-col:hover .col-tools,.color-col.is-locked .col-tools{opacity:1;transform:translateY(0)}.hex-label{font-family:'Montserrat',monospace;font-weight:900;font-size:1.1rem;text-transform:uppercase;cursor:pointer;transition:color 0.1s}.hex-label:hover{color:#2d7bb5}.col-btn{background:none;border:2px solid #111;border-radius:6px;cursor:pointer;width:35px;height:35px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background-color:#f4f4f4;transition:transform 0.1s,box-shadow 0.1s}.col-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #111}.btn-lock.locked{background-color:#ffb7b2}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.control-card{background-color:#f9f9f9;border:3px solid #111;border-radius:8px;padding:20px;box-shadow:4px 4px 0 #111;display:flex;flex-direction:column;justify-content:space-between}.control-card h4{margin:0 0 15px 0;font-family:'Montserrat',sans-serif;font-size:1.1rem}.control-card small{color:#666;font-size:.85rem;margin-top:10px;display:block}.rule-inputs{display:flex;gap:10px}.rule-inputs input[type="color"]{width:50px;height:45px;padding:0;border:3px solid #111;border-radius:6px;cursor:pointer;box-shadow:2px 2px 0 #111}.rule-inputs select{flex:1;padding:0 10px;font-family:'Inter',sans-serif;font-weight:700;border:3px solid #111;border-radius:6px;box-shadow:2px 2px 0 #111;outline:none}.btn-generate-rule,.btn-export{font-family:'Montserrat',sans-serif;font-weight:900;border:3px solid #111;border-radius:6px;cursor:pointer;box-shadow:2px 2px 0 #111;transition:transform 0.1s}.btn-generate-rule{background-color:#b5ead7;padding:0 15px}.btn-export{flex:1;background-color:#e6f7ff;padding:12px 10px;font-size:.9rem}.btn-generate-rule:active,.btn-export:active{transform:translate(2px,2px);box-shadow:0 0 0 #111}.export-buttons{display:flex;gap:10px}.mobile-action-bar{display:none;margin-top:20px}.btn-space-mobile{width:100%;background-color:#ffdac1;font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.2rem;border:3px solid #111;border-radius:8px;padding:15px;cursor:pointer;box-shadow:4px 4px 0 #111}.btn-space-mobile:active{transform:translate(4px,4px);box-shadow:0 0 0 #111}.trending-section{margin-top:40px;padding-top:30px;border-top:3px dashed #111}.trending-title{font-family:'Montserrat',sans-serif;font-size:1.4rem;font-weight:900;margin-bottom:5px;text-transform:uppercase}.trending-desc{color:#555;font-weight:600;margin-bottom:20px}.trending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.trend-card{border:3px solid #111;border-radius:8px;background-color:#fff;overflow:hidden;cursor:pointer;box-shadow:3px 3px 0 #111;transition:transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column}.trend-card:hover{transform:translateY(-5px);box-shadow:5px 5px 0 #111}.trend-card:active{transform:translateY(0);box-shadow:0 0 0 #111}.trend-colors{display:flex;height:60px}.trend-color-swatch{flex:1}.trend-name{font-weight:800;padding:12px 10px;text-align:center;font-size:.95rem;border-top:3px solid #111}#toastPalette{visibility:hidden;min-width:200px;background-color:#111;color:#fff;text-align:center;border-radius:8px;padding:12px;position:fixed;z-index:9999;bottom:30px;left:50%;transform:translateX(-50%);font-weight:700;opacity:0;transition:opacity 0.3s,bottom 0.3s}#toastPalette.show{visibility:visible;opacity:1;bottom:50px}@media (max-width:800px){.controls-grid{grid-template-columns:1fr}.export-buttons{flex-direction:column}.instruction-banner{display:none}.mobile-action-bar{display:block}.palette-workspace{flex-direction:column;height:600px}.color-col{flex-direction:row;justify-content:space-between;padding:0 20px}.color-col:hover{flex:1}.col-tools{flex-direction:row;opacity:1;transform:translateY(0);padding:5px 15px}.trending-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:500px){.trending-grid{grid-template-columns:1fr}}