:root{--primary:#161a22;--secondary:#203A43;--accent:#347794;--dark:#222831;--white:#f5fdfd;--card:#161a22;--line:#1b1f2a}*{box-sizing:border-box;margin:0;padding:0}body,html{min-height:100%}body{font-family:Poppins,sans-serif;background:#0f2027;background:-webkit-linear-gradient(to bottom,#222831,#0f2027,#203a43,#2c5364);background:linear-gradient(to bottom,#222831,#0f2027,#203a43,#2c5364);background-repeat:no-repeat;background-attachment:scroll}header{position:relative;top:0;width:100%;background-color:transparent;display:flex;justify-content:space-between;align-items:center;padding:.5rem 2rem;z-index:9999;transition:background-color .3s ease,box-shadow .3s ease}header.scrolled{background-color:var(--primary);box-shadow:0 4px 6px rgba(0,0,0,.1)}#navbar{background-color:var(--dark);padding:.5rem 4rem}.logo{cursor:pointer}#add_sales{display:block}.logo img{height:50px;width:auto}nav{display:flex;align-items:center;gap:1rem;position:relative}.nav-links{display:flex;align-items:center;gap:1.5rem;font-weight:500}.nav-links a{text-decoration:none;color:var(--white);position:relative;transition:color .3s;font-size:1rem}.nav-links a:hover{color:var(--white)}.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background-color:var(--white);transition:width .3s ease}.nav-links a.active::after,.nav-links a:hover::after{width:100%}.burger{display:none;flex-direction:column;gap:.3rem;cursor:pointer;background:0 0;border:0;transition:transform .3s ease}.burger div{width:25px;height:3px;background-color:var(--white);transition:all .3s ease}.burger.open div:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.burger.open div:nth-child(2){opacity:0}.burger.open div:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}#logoutBtn{color:var(--accent)}#logoutBtn::after{background-color:var(--accent)}#logoutBtn a.active::after,#logoutBtn a:hover::after{width:100%}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}main.page{width:100%;padding:1rem 1.5rem}.era-table-card{width:100%;background:var(--card);border:0 solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}.era-table-title{margin:0;font-weight:700;font-size:1.1rem;color:#e6e9ef}.era-table-wrap{width:100%;overflow-x:auto;padding:.8rem 1rem 1rem}.era-table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0;color:#e6e9ef}.era-table td,.era-table th{padding:.4rem;border-bottom:1px solid var(--line);white-space:nowrap;font-size:.9rem}.era-table thead th{position:sticky;top:0;text-align:left;font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;color:#99a1b3;background:var(--card)}.era-row:hover{background:rgba(48,109,136,.5)}.era-row.selected{background:#1e2230;box-shadow:inset 0 0 0 1px #20263a}.era-num{width:20px;text-align:center}.era-dur{width:30px;text-align:center}.era-supplier{text-align:center}.era-email{max-width:300px;overflow:hidden;text-overflow:ellipsis}.era-renew{width:80px;text-align:center}.era-actions{width:44px;text-align:center}.era-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:#151a26;color:#d1d7e6;font-weight:600;font-size:.7rem;border:1px solid #23293b}.era-table td.era-muted{max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.era-table td.era-muted-customer{max-width:240px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.era-icon-btn{appearance:none;border:0;background:0 0;padding:6px;border-radius:10px;cursor:pointer}.era-icon-btn:hover{background:#171c28}.era-icon{width:18px;height:18px;display:inline-block}.era-icon img{width:.9rem;height:.9rem}.era-icon svg{width:100%;height:100%;fill:#9aa3b6}.era-icon-btn:hover svg{fill:#c5cbe0}.era-price{width:120px;text-align:right;font-variant-numeric:tabular-nums}.menu-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap;border-radius:14px}.menu-bar .btn-group{display:flex;gap:.7rem;margin-left:auto}.menu-bar .btn-group button:not(.icon-btn){background:var(--accent);color:var(--white);border:none;padding:.5rem 1rem;border-radius:1.5rem;cursor:pointer;font-weight:500;white-space:nowrap;transition:opacity .2s ease}.menu-bar .btn-group button:not(.icon-btn):hover{opacity:.9}.menu-bar .btn-group .icon-btn{background:0 0;border:0;padding:0 .4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;appearance:none;transition:transform .3s ease}.menu-bar .btn-group .icon-btn:hover{transform:translateY(-2px)}.menu-bar .btn-group .icon-btn img{width:1.8rem;height:1.8rem}.iconLabelBtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:120px;background:var(--accent);color:var(--white);border:none;padding:.5rem 1rem;border-radius:1.5rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.iconLabelBtn:hover{opacity:.9}.iconLabelBtn img{width:20px;height:20px;display:block}.input-form{padding:1rem;background:var(--card);border-radius:14px}.form-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.form-col{flex:1 1 calc(25% - 1rem);display:flex;flex-direction:column}.form-label{font-weight:600;font-size:.85rem;margin-bottom:.3rem;color:var(--white)}.form-label.text-danger{color:var(--accent)}input,select{background:#1b1f2a;color:var(--white);border:1px solid #2a2f3d;padding:.4rem .6rem;font-size:.9rem;border-radius:.4rem;outline:0;transition:all .25s ease}input::placeholder,select:invalid{color:#a0a7b8;opacity:.8}input:focus,select:focus{background:#2a2f3d;border-color:var(--primary);box-shadow:0 0 0 2px rgba(106,137,167,.25)}select{-webkit-appearance:none;-moz-appearance:none;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='none' stroke='%23a0a7b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;padding-right:32px}select::-ms-expand{display:none}@media screen and (-webkit-min-device-pixel-ratio:0){select{-webkit-appearance:none;appearance:none}}.form-submit{display:flex;align-items:end}.form-btn{background:var(--accent);border:none;color:var(--white);padding:.45rem 1.5rem;border-radius:1.5rem;font-weight:500;cursor:pointer;transition:opacity .2s ease}.form-btn:hover{opacity:.9}.invisible{visibility:hidden}.mb{margin-bottom:.8rem}.mt{margin-top:.8rem}.feedback_text{color:#fff;font-weight:500;text-align:center;padding:1rem;display:none}.disableBtn{background-color:gray!important;cursor:default!important;pointer-events:none;opacity:.6}.sticky-menubar{position:sticky;top:.5rem;z-index:1000;transition:all .4s cubic-bezier(.4,0,.2,1);will-change:transform,box-shadow;box-shadow:0 6px 20px rgba(22,26,34,.5);background-color:transparent}@media (max-width:1200px){main.page{padding:1rem 1rem}.column-hide{display:none}.era-actions{width:25px;padding:0}.era-table td:last-child,.era-table th:last-child{padding:0}.era-table td:nth-child(2){max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}}@media (max-width:1024px){.form-col{flex:1 1 calc(50% - 1rem)}}@media (max-width:768px){.logo img{height:40px}#navbar{padding:.5rem 1rem}.nav-links{display:none;flex-direction:column;background-color:var(--dark);position:fixed;top:56px;left:0;width:100vw;padding:1rem;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);animation:slideDown .3s ease-in-out;z-index:9998}.nav-links.active{display:flex}.burger{display:flex}}@media (max-width:640px){.form-col{flex:1 1 100%}main.page{padding:1rem .8rem}.menu-bar{padding:12px 16px;gap:.5rem}.menu-bar .era-table-title{font-size:1rem}.menu-bar .btn-group{gap:.5rem;justify-content:flex-end}.menu-bar .btn-group button{padding:.45rem .75rem;font-size:.85rem;border-radius:12px}#downloadCsv,#searchBtn{display:none}.btn-group{display:flex}#refreshBtn img{height:20px;width:20px}.btnLabel{display:none}#addSaleBtn{display:inline-flex;padding:.5rem 1rem;width:40px}.mb{margin-bottom:.5rem}}