*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,Arial,sans-serif;background:#23272a;color:#e0e0e0;margin:0;padding:0}#root{width:100%;min-height:100vh}body{font-family:Roboto,Arial,sans-serif;background:#23272a;margin:0;padding:0}#root{width:100%;margin:0;text-align:center}.main-nav{position:sticky;top:0;z-index:999;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#23272a;padding:.8rem 1rem;border-bottom:2px solid #3a3f44}.nav-left{display:flex;align-items:center;gap:.6rem}.nav-logo{display:inline-flex;align-items:center;gap:.6rem;color:#e0e0e0;text-decoration:none}.nav-logo img{width:28px;height:28px;display:block}.nav-logo span{font-weight:600;color:#e0e0e0}.nav-links{display:flex;align-items:center;gap:1rem}.nav-links a{color:#00bcd4;text-decoration:none;font-size:1.05rem;font-weight:500;padding:.3rem .6rem;border-radius:6px;transition:background .2s,color .2s}.nav-links a:hover,.nav-links a.active{background:#31363b;color:#fff}.nav-toggle{display:none;background:#31363b;color:#fff;border:1px solid #3a3f44;border-radius:6px;padding:.2rem .3rem;cursor:pointer}.nav-toggle img{width:22px;height:22px;display:block;filter:invert(63%) sepia(80%) saturate(749%) hue-rotate(145deg) brightness(93%) contrast(98%);transition:filter .2s ease}.nav-toggle:hover img,.nav-toggle:focus img{filter:invert(73%) sepia(80%) saturate(900%) hue-rotate(145deg) brightness(110%) contrast(98%)}@media (max-width: 576px){.nav-toggle{display:inline-block}.nav-links{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;gap:0;background:#2c3136;border-bottom:2px solid #3a3f44}.nav-links.open{display:flex}.nav-links a{padding:1rem;border-radius:0;border-top:1px solid #3a3f44}.nav-left{gap:.4rem}}.home{width:100%}.home-cards{display:flex;justify-content:space-around;flex-wrap:wrap;padding-top:2rem}.home-card{width:40%;margin:2rem;background:#2c3136;border:2px solid #3a3f44;box-shadow:0 4px 16px #0000002e;padding:0;color:#e0e0e0;display:flex;flex-direction:column;gap:.6rem}.home-card h2{color:#00bcd4;margin-top:1rem;font-size:1.5rem}.home-card p{color:#b0b0b0;padding:1rem;font-size:1.1rem}.home-card-link{align-self:flex-end;color:#00bcd4;text-decoration:none;padding:1rem;border:none;border-radius:0;transition:color .2s}.home-card-link:hover{text-decoration:underline;color:#6ae3f1}@media (max-width: 576px){.home-cards{display:inline}.home-card{width:95%;margin:1rem auto;background:#2c3136;border:2px solid #3a3f44;box-shadow:0 4px 16px #0000002e;padding:0;color:#e0e0e0;display:flex;flex-direction:column;gap:.6rem}}.customer-form-help{margin:.2rem 0 1rem;padding:.8rem 1rem;background:#23272a;border:1px solid #3a3f44;border-radius:8px;color:#b0b0b0;text-align:left}.customer-form-tutorial{margin:.2rem 0 0 1rem;padding-left:1rem}.customer-form-tutorial li{margin:.3rem 0}.add-form-container{width:100%}.customer-form{max-width:700px;margin:2rem auto;padding:1.5rem;background:#2c3136;box-shadow:0 4px 16px #0000002e;border:2px solid #3a3f44;display:flex;flex-direction:column;gap:.7rem}.customer-form-title{color:#e0e0e0;letter-spacing:2px;font-size:2.5rem;margin:2rem;text-align:center}.customer-form-input{padding:.7rem;border:1px solid #bdbdbd;border-radius:6px;background:#23272a;color:#e0e0e0;font-size:1rem}.customer-form-input:focus{outline:none;border-color:#00bcd4}.customer-form-btn{padding:.7rem 1.2rem;background:#00bcd4;color:#23272a;border:none;border-radius:6px;font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s}.customer-form-btn:hover{background:#0097a7}.customer-form-error{color:#ff5252;background:#23272a;font-size:.95rem;margin:.2rem 0 .7rem .2rem;padding-left:.5rem;border-left:3px solid #ff5252;border-radius:3px;text-align:left}.customer-form-error-top{margin-bottom:.5rem}.customer-form-required-info{color:#b0b0b0;font-size:.9rem;margin:.5rem auto;text-align:left}.customer-form-required-info span{color:#ff5252}.top-alert{position:sticky;top:0;left:50%;transform:translate(-50%);min-width:320px;max-width:500px;padding:1rem 2.5rem 1rem 1.5rem;border-radius:0 0 12px 12px;font-size:1.1rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;z-index:1000;box-shadow:0 4px 16px #0000002e;animation:fadeInDown .4s}.top-alert.success{background:#d4f7dc;color:#1b5e20;border-bottom:2px solid #43a047}.top-alert.error{background:#ffd6d6;color:#b71c1c;border-bottom:2px solid #e53935}.top-alert-close{background:none;border:none;color:inherit;font-size:1.5rem;font-weight:700;cursor:pointer;margin-left:1.2rem;padding:0 .3rem;line-height:1}@keyframes fadeInDown{0%{opacity:0;transform:translate(-50%) translateY(-30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toast-alert{position:fixed;left:50%;transform:translate(-50%);bottom:0;min-width:320px;max-width:500px;padding:1rem 2.5rem 1rem 1.5rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));border-radius:12px 12px 0 0;font-size:1.1rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;z-index:1001;box-shadow:0 -4px 16px #0000002e;animation:fadeInUp .35s ease-out}.toast-alert.success{background:#d4f7dc;color:#1b5e20;border-top:2px solid #43a047}.toast-alert.error{background:#ffd6d6;color:#b71c1c;border-top:2px solid #e53935}.toast-alert{position:fixed}.toast-progress{position:absolute;left:0;bottom:0;height:3px;background:currentColor;opacity:.6;width:0%;animation:toastProgress 8s linear forwards}.toast-alert.success .toast-progress{background:#1b5e20}.toast-alert.error .toast-progress{background:#b71c1c}@keyframes toastProgress{0%{width:0%}to{width:100%}}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 576px){.toast-alert{left:0;right:0;transform:none;width:100%;border-radius:12px 12px 0 0;padding:.9rem 1rem;padding-bottom:calc(.9rem + env(safe-area-inset-bottom));font-size:1rem}.customer-form-help{width:92%;margin:.2rem auto;padding:.8rem .3rem;background:#23272a;border:1px solid #3a3f44;border-radius:8px;color:#b0b0b0;text-align:left}.customer-form-tutorial{margin:.2rem 0 0 1rem;padding-left:.6rem}.customer-form-tutorial li{margin:.3rem 0}.customer-form{width:95%;padding:0;margin:2rem auto;display:flex;flex-direction:column;gap:.7rem}.customer-form-title{color:#e0e0e0;letter-spacing:2px;font-size:2.5rem;margin:2rem;text-align:center}.customer-form-input{width:92%;margin:.2rem auto;padding:.7rem;border:1px solid #bdbdbd;border-radius:6px;background:#23272a;color:#e0e0e0;font-size:1rem}.customer-form-btn{width:92%;margin:1rem auto;padding:.7rem 1.2rem;background:#00bcd4;color:#23272a;border:none;border-radius:6px;font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s}}.customer-list-container{width:100%}.customer-list{width:90%;margin:4rem auto;background:#2c3136;box-shadow:0 4px 16px #0000002e;border:2px solid #3a3f44}.customer-list-title{color:#e0e0e0;letter-spacing:2px;font-size:2.5rem;margin:2rem;text-align:center}.customer-list-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 1rem 1rem;gap:.6rem}.customer-list-filterbox{display:flex;align-items:center;gap:.8rem}.customer-list-sort{display:inline-flex;align-items:center;gap:.4rem}.customer-list-sort-label{color:#b0b0b0;font-size:.95rem}.customer-list-sort-select{padding:.5rem .6rem;background:#23272a;color:#e0e0e0;border:1px solid #bdbdbd;border-radius:6px}.customer-list-search-input{max-width:420px}.customer-list-pageinfo{color:#b0b0b0}.customer-list-pager{display:flex;gap:.5rem}.customer-list-content{display:flex;justify-content:space-around;flex-wrap:wrap}.customer-list-empty{color:#b0b0b0;text-align:center;font-style:italic}.customer-card{width:40%;margin:1rem;border:1.5px solid #444b52;border-radius:10px;padding:1.2rem;background:linear-gradient(135deg,#23272a 80%,#31363b);box-shadow:0 2px 8px #0000001f;transition:box-shadow .2s}.customer-card-title{margin:0 0 .7rem;color:#00bcd4;font-size:1.3rem;font-weight:500;letter-spacing:1px}.customer-card:hover{box-shadow:0 6px 24px #00000038}.customer-card-info{margin:.2rem 0;color:#e0e0e0;font-size:1rem}.customer-card-info span{color:#b0b0b0;font-weight:600;margin-right:.5em}.customer-card-actions{margin-top:.8rem;text-align:right}@media (max-width: 576px){.customer-list{width:95%;margin:2rem auto;background:#2c3136;box-shadow:0 4px 16px #0000002e;border:2px solid #3a3f44}.customer-list-toolbar{flex-direction:column;align-items:stretch;gap:.6rem}.customer-list-filterbox{flex-direction:column;align-items:stretch;gap:.4rem}.customer-list-sort{justify-content:flex-start}.customer-list-search-input{max-width:100%}.customer-list-content{display:inline}.customer-card{width:92%;margin:1rem auto;padding:0;border:1.5px solid #444b52;border-radius:10px;background:linear-gradient(135deg,#23272a 80%,#31363b);box-shadow:0 2px 8px #0000001f;transition:box-shadow .2s}.customer-card-title{margin:.5rem;color:#00bcd4;font-size:1.4rem;font-weight:500;letter-spacing:1px}.customer-card:hover{box-shadow:0 6px 24px #00000038}.customer-card-info{margin:.6rem;color:#e0e0e0;font-size:1rem}.customer-card-actions{margin:.8rem .6rem .6rem;text-align:right}.customer-card-info span{color:#b0b0b0;font-weight:600;margin-right:.5em}}.edit-customer-page{max-width:700px;margin:3rem auto;background:#2c3136;box-shadow:0 4px 16px #0000002e;border:2px solid #3a3f44;padding:2.5rem;color:#e0e0e0}.edit-customer-page h1{color:#00bcd4;font-size:2rem;margin-bottom:1.2rem}.edit-customer-page p{font-size:1.1rem;color:#b0b0b0}.edit-form{display:grid;gap:.7rem;margin-top:1rem}.edit-actions{display:flex;gap:.6rem}.edit-btn-danger{background:#e53935;color:#fff}.edit-error-text{color:#ff5252}.edit-search-status{margin-top:.8rem;min-height:1.2rem}.edit-search-loading{color:#b0b0b0}.edit-search-results{margin-top:1rem}.edit-search-input{max-width:480px}.edit-card-actions{margin-top:.8rem;text-align:right}.edit-search-pager{display:flex;gap:.6rem;justify-content:center;margin-top:1rem}.edit-search-pageinfo{align-self:center;color:#b0b0b0}.details-page{max-width:700px;margin:3rem auto;background:#2c3136;border-radius:14px;box-shadow:0 4px 16px #0000002e;border:2px solid #3a3f44;padding:2.2rem;color:#e0e0e0}.details-page h1{color:#00bcd4;font-size:2rem;margin-bottom:1.2rem}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}.details-row{display:contents}.details-label{color:#b0b0b0;font-weight:600;text-align:right;padding-right:.6rem}.details-value{color:#e0e0e0;text-align:left}.details-actions{margin-top:1.2rem;display:flex;gap:.8rem;justify-content:flex-end}@media (max-width: 576px){.details-page{margin:2rem auto;padding:1.2rem}.details-grid{grid-template-columns:1fr}.details-label{text-align:left;padding-right:0}.edit-customer-page{width:92%}}