*{box-sizing:border-box;margin:0;padding:0}html,body{background:#111;min-height:100%}:root{--spark-green:#8dc63f;--spark-green-dark:#75a932;--spark-black:#111;--spark-charcoal:#292929;--spark-gray:#666;--spark-mid-gray:#ccc;--spark-light-gray:#eee;--spark-off-white:#f7f7f7;--spark-white:#fff}body{color:#111;background:#111;min-height:100vh;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit}main{background:#111;width:100%;min-height:100vh;padding:40px 20px 100px}.site-nav{justify-content:space-between;align-items:center;gap:30px;width:min(100%,1100px);margin:0 auto 45px;display:flex}.spark-home-link{background:0 0;align-items:center;padding:0;display:flex}.spark-logo{object-fit:contain;width:115px;height:auto;display:block}.nav-pages{align-items:center;gap:8px;display:flex}.nav-link,.site-nav a{color:#fff;font-size:.9rem;font-weight:700;text-decoration:none}.nav-link:hover{color:#fff;background:#292929}.nav-link.active{color:#fff;background:#8dc63f}.designer{background:var(--spark-white);border:3px solid var(--spark-green);border-radius:24px;width:min(100%,650px);margin:auto;padding:35px;box-shadow:0 18px 45px #0000004d}.designer+.designer{margin-top:32px}.instructions{align-items:center;gap:15px;margin-bottom:22px;display:flex}.instructions h2{color:var(--spark-black);margin-bottom:4px;font-size:1.1rem}.instructions p{color:var(--spark-gray);font-size:.9rem}.step-number{background:var(--spark-green);width:36px;height:36px;color:var(--spark-black);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:800;display:flex}.palette{justify-content:center;gap:14px;margin-bottom:40px;display:flex}.color-button{background:var(--spark-light-gray);min-width:110px;color:var(--spark-black);cursor:pointer;border:2px solid #0000;border-radius:100px;justify-content:center;align-items:center;gap:9px;padding:10px 18px;transition:transform .15s,border-color .15s,background .15s;display:flex}.color-button:hover{transform:translateY(-2px)}.color-button.selected{background:var(--spark-white);border-color:var(--spark-black)}.color-circle{border:2px solid #00000014;border-radius:50%;width:20px;height:20px}.board-instructions{margin-bottom:18px}.pixel-board{aspect-ratio:1;-webkit-user-select:none;user-select:none;touch-action:none;background:#182234;border-radius:15px;grid-template-rows:repeat(24,1fr);grid-template-columns:repeat(24,1fr);gap:2px;width:min(100%,520px);margin:auto;padding:8px;display:grid}.pixel{cursor:crosshair;border:none;border-radius:2px;width:100%;min-width:0;height:100%;min-height:0;padding:0;transition:transform 80ms,background .1s}.pixel:hover{transform:scale(.9)}.pixel-blank{background:#303b50}.pixel-pink{background:#ff5c8a;box-shadow:0 0 8px #ff5c8a99}.pixel-yellow{background:#ffd84d;box-shadow:0 0 8px #ffd84d99}.pixel-blue{background:#4da6ff;box-shadow:0 0 8px #4da6ff99}.toolbar{justify-content:center;gap:10px;margin-top:20px;display:flex}.toolbar button{background:var(--spark-white);color:var(--spark-black);border:1px solid var(--spark-mid-gray);border-radius:100px;padding:10px 18px;transition:background .15s,border-color .15s,color .15s,transform .15s}.toolbar button:hover{border-color:var(--spark-green);transform:translateY(-1px)}.toolbar .active-tool{background:var(--spark-black);color:var(--spark-white);border-color:var(--spark-black)}.send-section{border-top:1px solid #e2e2e2;margin-top:35px;padding-top:30px}.submission-form{gap:18px;margin-bottom:22px;display:grid}.submission-form label{color:var(--spark-black);gap:7px;font-size:.85rem;font-weight:700;display:grid}.submission-form input{background:var(--spark-white);width:100%;color:var(--spark-black);border:1px solid var(--spark-mid-gray);border-radius:10px;outline:none;padding:12px 14px;font-size:.95rem;transition:border-color .15s,box-shadow .15s}.submission-form input:focus{border-color:var(--spark-green);box-shadow:0 0 0 3px #8dc63f2e}.send-button{background:var(--spark-green);width:100%;color:var(--spark-black);border:none;border-radius:15px;padding:18px;font-size:1rem;font-weight:800;transition:transform .15s,background .15s,box-shadow .15s}.send-button:hover{background:var(--spark-green-dark);transform:translateY(-2px);box-shadow:0 10px 25px #00000029}.success-message{color:var(--spark-green-dark);text-align:center;margin-top:15px;font-size:.9rem;font-weight:700}.logout-button{color:var(--spark-white);border:1px solid var(--spark-green);background:0 0;border-radius:8px;margin-top:20px;padding:10px 18px;font-weight:700;transition:background .15s,color .15s}.logout-button:hover{background:var(--spark-green);color:var(--spark-black)}.approval-card{border-bottom:1px solid #ddd;padding:26px 0}.approval-card:last-child{border-bottom:none}.approval-card h3{color:var(--spark-black);margin-bottom:5px;font-size:1.2rem}.approval-card p{color:var(--spark-gray);margin-top:4px;font-size:.9rem}.approval-actions{flex-wrap:wrap;gap:10px;margin-top:15px;display:flex}.design-preview{background:#182234;border-radius:8px;grid-template-rows:repeat(24,1fr);grid-template-columns:repeat(24,1fr);gap:1px;width:240px;height:240px;margin:18px 0;padding:4px;display:grid}.preview-pixel{border-radius:1px;min-width:0;min-height:0}.approve-button,.reject-button,.print-button,.delete-button{border-radius:8px;padding:10px 18px;font-weight:700;transition:background .15s,color .15s,transform .15s}.approve-button:hover,.reject-button:hover,.print-button:hover,.delete-button:hover{transform:translateY(-1px)}.approve-button{background:var(--spark-green);color:var(--spark-black);border:1px solid var(--spark-green)}.approve-button:hover{background:var(--spark-green-dark);border-color:var(--spark-green-dark)}.reject-button{background:var(--spark-white);color:var(--spark-black);border:1px solid var(--spark-mid-gray)}.reject-button:hover{background:var(--spark-light-gray);border-color:var(--spark-black)}.print-button{background:var(--spark-white);color:var(--spark-black);border:1px solid var(--spark-black)}.print-button:hover{background:var(--spark-light-gray)}.delete-button{background:var(--spark-black);color:var(--spark-white);border:1px solid var(--spark-black)}.delete-button:hover{background:var(--spark-charcoal)}.past-submissions{margin-top:32px}.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:25px;display:grid}.gallery-card{background:var(--spark-white);border:1px solid #ddd;border-radius:16px;padding:20px;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 24px #00000014}.gallery-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #0000001f}.gallery-card h2{color:var(--spark-black);margin-top:14px;font-size:1.1rem}.gallery-preview{aspect-ratio:1;background:#182234;border-radius:10px;grid-template-rows:repeat(24,1fr);grid-template-columns:repeat(24,1fr);gap:1px;width:100%;padding:5px;display:grid}.gallery-preview .preview-pixel{min-width:0;min-height:0}@media (max-width:600px){main{background:#111;padding:25px 12px 70px}.site-nav{margin-bottom:32px}.nav-link,.site-nav a{padding:9px 13px;font-size:.85rem}.hero{margin-bottom:40px}.hero h1{font-size:clamp(2.5rem,13vw,4rem)}.subtitle{font-size:.95rem}.designer{border-radius:18px;padding:22px 14px}.palette{gap:6px}.color-button{flex:1;min-width:0;padding:9px}.color-button span:last-child{display:none}.pixel-board{gap:2px;padding:6px}.toolbar{flex-wrap:wrap}.approval-actions{flex-direction:column}.approval-actions button{width:100%}.design-preview{aspect-ratio:1;width:min(100%,240px);height:auto}.gallery-grid{grid-template-columns:1fr}}.hero{text-align:center;max-width:750px;margin:0 auto 50px}.eyebrow{color:#8dc63f;letter-spacing:.2em;margin-bottom:12px;font-size:.8rem;font-weight:800}.hero h1{color:#fff;letter-spacing:-.05em;margin-bottom:22px;font-size:clamp(2.8rem,8vw,5.5rem);line-height:.95}.subtitle{color:#d6d6d6;max-width:580px;margin:auto;font-size:1.05rem;line-height:1.7}
