:root{--sky:#5ecbff;--navy:#123954;--green:#1f9d55;--red:#c0392b;--orange:#f39c12;--purple:#7d5fff;--muted:#6b8395;--border:#d9eef8}
*{box-sizing:border-box} body{margin:0;min-height:100vh;font-family:Arial,sans-serif;background:linear-gradient(135deg,#eaf8ff,#fff 42%,#dff5ff);color:var(--navy)}
.navbar{margin:18px;padding:14px 18px;border-radius:24px;background:linear-gradient(135deg,#103a56,#1f85bd);box-shadow:0 20px 50px rgba(31,133,189,.24);display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:12px;z-index:10}
.brand{color:white;text-decoration:none;font-weight:900;font-size:20px}.navlinks{display:flex;gap:8px;flex-wrap:wrap}.navlinks a{color:white;text-decoration:none;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700}.navlinks a.active,.navlinks a:hover{background:white;color:#0b5784}
.container{padding:8px 22px 40px}.hero,.card,.table-card,.login-card{background:rgba(255,255,255,.78);border:1px solid var(--border);border-radius:28px;box-shadow:0 18px 45px rgba(63,143,184,.12);padding:24px;margin:18px 0}.login-card{max-width:480px;margin:80px auto}
.hero-title{font-size:36px;margin:0 0 8px;font-weight:900}.hero-text{color:var(--muted);font-size:16px;line-height:1.6}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.kpi{background:linear-gradient(135deg,#fff,#f4fbff);border:1px solid var(--border);border-radius:22px;padding:18px}.kpi small{color:var(--muted);font-weight:800;text-transform:uppercase}.kpi strong{display:block;font-size:26px;margin-top:8px}
.btn{border:0;border-radius:16px;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn-sky{background:linear-gradient(135deg,#29aeea,#5ecbff);color:white}.btn-green{background:linear-gradient(135deg,#138a44,#32d27f);color:white}.btn-red{background:linear-gradient(135deg,#b52b22,#ff7675);color:white}.btn-orange{background:linear-gradient(135deg,#e67e22,#ffd166);color:white}.btn-purple{background:linear-gradient(135deg,#5b42d6,#9b8cff);color:white}.btn-light{background:#fff;color:#0b5784;border:1px solid var(--border)}
.form-control,select{width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:white}label{font-weight:800;display:block;margin-bottom:6px}.row{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-12{grid-column:span 12}
table{width:100%;border-collapse:collapse;background:white;border-radius:18px;overflow:hidden}th{background:#123954;color:white;padding:12px;text-align:left}td{padding:12px;border-bottom:1px solid #eef5f9}tr:nth-child(even) td{background:#fbfdff}
.badge{padding:5px 9px;border-radius:999px;font-weight:800;font-size:12px}.badge-green{background:#e9f9ef;color:#14743b}.badge-red{background:#ffecec;color:#a1241c}.badge-orange{background:#fff4dc;color:#916000}.badge-blue{background:#e7f7ff;color:#0c5e89}
.quick-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.product-tile{background:white;border:1px solid var(--border);border-radius:22px;padding:16px;box-shadow:0 12px 28px rgba(75,143,180,.10)}.product-tile strong{font-size:17px}.product-tile .price{font-size:22px;font-weight:900;color:#0b6d9f;margin:8px 0}
.notice{padding:12px 16px;border-radius:18px;background:#e7f7ff;border:1px solid #bae9ff;color:#0b5c85;margin:12px 0}.error{padding:12px 16px;border-radius:18px;background:#ffecec;border:1px solid #ffbaba;color:#a1241c;margin:12px 0}
.danger-money{color:#a1241c;font-weight:900}.success-money{color:#14743b;font-weight:900}.actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:900px){.grid,.grid-2,.quick-products{grid-template-columns:1fr}.row{grid-template-columns:1fr}.col-1,.col-2,.col-3,.col-4,.col-6,.col-12{grid-column:span 1}.navbar{align-items:flex-start;flex-direction:column}.table-responsive{overflow:auto}}