:root{--background:#1a1a1a;--surface:#2d2d2d;--primary:#646cff;--text:#fff;--text-secondary:#888;--success:#4caf50;--warning:#ff9800;--error:#f44336;--info:#2196f3}body{background-color:var(--background);color:var(--text);margin:0;font-family:system-ui,-apple-system,sans-serif}.app{max-width:1200px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:2rem}header h1{color:var(--primary);margin-bottom:.5rem}header p{color:var(--text-secondary)}main{grid-template-columns:350px 1fr;gap:2rem;display:grid}.queue-form{background:var(--surface);border-radius:8px;height:fit-content;padding:1.5rem}.queue-form h2{color:var(--primary);margin-top:0;margin-bottom:1.5rem}.form-group{margin-bottom:1rem}input,select{border:1px solid var(--text-secondary);background:var(--background);width:100%;color:var(--text);box-sizing:border-box;border-radius:4px;height:45px;padding:.75rem;font-size:1rem}select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");background-position:right .7rem center;background-repeat:no-repeat;background-size:1.5em}input:focus,select:focus{border-color:var(--primary);outline:none}button{background:var(--primary);width:100%;color:var(--text);cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;gap:.5rem;height:45px;padding:.75rem;font-size:1rem;display:flex}button:hover{opacity:.9}.queue-display{background:var(--surface);border-radius:8px;padding:1.5rem}.queue-display h2{margin-top:0;margin-bottom:1.5rem}.queue-list{gap:1rem;display:grid}.queue-item{background:var(--background);border-radius:4px;justify-content:space-between;align-items:center;padding:1rem;display:flex}.customer-details{align-items:baseline;gap:6px;display:flex}.customer-details h3{color:var(--text);margin:0}.customer-details p{color:var(--text-secondary);margin:0;font-size:14px}.customer-info p{color:var(--text-secondary);margin:.5rem 0}.status{font-size:.875rem;font-weight:500}.actions{gap:.5rem;display:flex}.actions button{width:auto;padding:.5rem 1rem}.serve-btn{background:var(--success)}.complete-btn{background:var(--info)}.remove-btn{background:var(--error)}.empty-queue{text-align:center;color:var(--text-secondary)}@media (width<=768px){main{grid-template-columns:1fr}}