* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', sans-serif;
 }

 :root {
     --accent: #00d4ff;
     --bg: #0f0f0f;
     --card: #1a1a1a;
     --sidebar: #111;
     --text: #eee;
     --muted: #888;
 }

 body {
     display: flex;
     height: 100vh;
     overflow: hidden;
     background: var(--bg);
     color: var(--text);
 }

 /* SIDEBAR */
 .sidebar {
     width: 220px;
     background: var(--sidebar);
     display: flex;
     flex-direction: column;
     padding: 20px 10px;
     gap: 4px;
     flex-shrink: 0;
 }

 .logo {
     font-size: 22px;
     font-weight: 900;
     color: #fff;
     padding: 10px 12px 20px;
 }

 .logo span {
     color: var(--accent);
 }

 .nav-btn {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 11px 14px;
     border-radius: 8px;
     border: none;
     background: none;
     color: var(--muted);
     font-size: 14px;
     cursor: pointer;
     text-align: left;
     width: 100%;
     transition: .2s;
 }

 .nav-btn:hover {
     background: #1f1f1f;
     color: #fff;
 }

 .nav-btn.active {
     background: #1a3a44;
     color: var(--accent);
     font-weight: 700;
 }

 .badge {
     margin-left: auto;
     background: var(--accent);
     color: #000;
     border-radius: 99px;
     font-size: 11px;
     font-weight: 700;
     padding: 1px 7px;
 }

 /* MAIN */
 .main {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 .topbar {
     background: #161616;
     padding: 16px 28px;
     border-bottom: 1px solid #222;
     font-size: 18px;
     font-weight: 700;
 }

 .topbar span {
     color: var(--accent);
 }

 /* PAGES */
 .page {
     display: none;
     flex: 1;
     overflow-y: auto;
     padding: 28px;
 }

 .page.active {
     display: block;
 }

 /* DASHBOARD */
 .stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 16px;
     margin-bottom: 28px;
 }

 .stat {
     background: var(--card);
     border-radius: 12px;
     padding: 20px;
     border-top: 3px solid var(--accent);
 }

 .stat .num {
     font-size: 36px;
     font-weight: 900;
     color: var(--accent);
 }

 .stat .lbl {
     font-size: 13px;
     color: var(--muted);
     margin-top: 4px;
 }

 .stat.pink {
     border-color: #e040fb;
 }

 .stat.pink .num {
     color: #e040fb;
 }

 .stat.green {
     border-color: #00e676;
 }

 .stat.green .num {
     color: #00e676;
 }

 .stat.yellow {
     border-color: #ffd600;
 }

 .stat.yellow .num {
     color: #ffd600;
 }

 .stat.red {
     border-color: #ff1744;
 }

 .stat.red .num {
     color: #ff1744;
 }

 .recent-table {
     background: var(--card);
     border-radius: 12px;
     overflow: hidden;
 }

 .recent-table h3 {
     padding: 16px 20px;
     border-bottom: 1px solid #2a2a2a;
     font-size: 15px;
 }

 table {
     width: 100%;
     border-collapse: collapse;
 }

 th {
     text-align: left;
     padding: 10px 16px;
     font-size: 12px;
     color: var(--muted);
     background: #161616;
 }

 td {
     padding: 11px 16px;
     font-size: 13px;
     border-bottom: 1px solid #1f1f1f;
 }

 tr:last-child td {
     border: none;
 }

 .pill {
     padding: 3px 10px;
     border-radius: 99px;
     font-size: 11px;
     font-weight: 700;
 }

 .pill-analise {
     background: #1a0e3a;
     color: #b39ddb;
 }

 .pill-aguardando {
     background: #2a1f00;
     color: #ffd600;
 }

 .pill-instalada {
     background: #003320;
     color: #00e676;
 }

 .pill-cancelada {
     background: #2a0000;
     color: #ff5252;
 }

 /* FORM */
 .form-box {
     background: var(--card);
     border-radius: 14px;
     padding: 30px;
     max-width: 700px;
 }

 .form-box h2 {
     margin-bottom: 24px;
     font-size: 22px;
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .full {
     grid-column: span 2;
 }

 label {
     display: block;
     font-size: 12px;
     color: var(--muted);
     margin-bottom: 5px;
 }

 input,
 select,
 textarea {
     width: 100%;
     padding: 10px 12px;
     border-radius: 8px;
     border: 1px solid #2a2a2a;
     background: #111;
     color: #fff;
     font-size: 14px;
     outline: none;
     transition: .2s;
 }

 input:focus,
 select:focus,
 textarea:focus {
     border-color: var(--accent);
 }

 .btn {
     padding: 11px 22px;
     border-radius: 8px;
     border: none;
     cursor: pointer;
     font-weight: 700;
     font-size: 14px;
     transition: .2s;
 }

 .btn-primary {
     background: linear-gradient(135deg, #00d4ff, #0066ff);
     color: #fff;
 }

 .btn-primary:hover {
     opacity: .85;
     transform: translateY(-1px);
 }

 .btn-warn {
     background: #ffd600;
     color: #000;
 }

 .btn-success {
     background: #00e676;
     color: #000;
 }

 .btn-danger {
     background: #ff1744;
     color: #fff;
 }

 /* CARDS */
 .cards-header {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     align-items: center;
     margin-bottom: 20px;
 }

 .cards-header input,
 .cards-header select {
     width: auto;
     min-width: 150px;
 }

 .cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 16px;
 }

 .card {
     background: var(--card);
     border-radius: 12px;
     padding: 18px;
     cursor: pointer;
     border: 1px solid #222;
     transition: .2s;
 }

 .card:hover {
     border-color: var(--accent);
     transform: translateY(-2px);
 }

 .card-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 10px;
 }

 .card-nome {
     font-weight: 700;
     font-size: 15px;
 }

 .card-info {
     font-size: 12px;
     color: var(--muted);
     margin-top: 3px;
 }

 .card-row {
     display: flex;
     justify-content: space-between;
     font-size: 13px;
     margin-top: 8px;
 }

 .empty {
     text-align: center;
     padding: 60px;
     color: var(--muted);
 }

 .empty i {
     font-size: 48px;
     margin-bottom: 12px;
     display: block;
 }

 /* MODAL */
 .overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .7);
     z-index: 100;
     align-items: center;
     justify-content: center;
 }

 .overlay.open {
     display: flex;
 }

 .modal {
     background: #1a1a1a;
     border-radius: 16px;
     width: 90%;
     max-width: 600px;
     max-height: 90vh;
     overflow-y: auto;
     padding: 28px;
     position: relative;
 }

 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .modal-header h2 {
     font-size: 18px;
 }

 .close-btn {
     background: none;
     border: none;
     color: var(--muted);
     font-size: 20px;
     cursor: pointer;
 }

 .close-btn:hover {
     color: #fff;
 }

 .detail-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     margin-bottom: 16px;
 }

 .detail-item label {
     color: var(--muted);
     font-size: 11px;
 }

 .detail-item p {
     font-size: 14px;
     margin-top: 2px;
 }

 .modal-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 20px;
     border-top: 1px solid #2a2a2a;
     padding-top: 16px;
 }

 .delete-area {
     display: none;
     margin-top: 14px;
     background: #1f0000;
     border-radius: 8px;
     padding: 14px;
 }

 .delete-area textarea {
     margin-top: 8px;
 }

 /* MES FILTER */
 .mes-btns {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 20px;
 }

 .mes-btn {
     padding: 6px 14px;
     border-radius: 99px;
     border: 1px solid #333;
     background: none;
     color: var(--muted);
     cursor: pointer;
     font-size: 13px;
     transition: .2s;
 }

 .mes-btn.active {
     background: var(--accent);
     color: #000;
     border-color: var(--accent);
     font-weight: 700;
 }

 /* PAGO */
 .pago-badge {
     background: #003320;
     color: #00e676;
     padding: 4px 10px;
     border-radius: 99px;
     font-size: 11px;
     font-weight: 700;
 }

 .npago-badge {
     background: #2a1f00;
     color: #ffd600;
     padding: 4px 10px;
     border-radius: 99px;
     font-size: 11px;
     font-weight: 700;
 }

 /* LOADING */
 .loading {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .5);
     z-index: 200;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 12px;
 }

 .loading.show {
     display: flex;
 }

 .spinner {
     width: 40px;
     height: 40px;
     border: 4px solid #333;
     border-top-color: var(--accent);
     border-radius: 50%;
     animation: spin .8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* TOAST */
 .toast {
     position: fixed;
     bottom: 24px;
     right: 24px;
     padding: 12px 20px;
     border-radius: 10px;
     font-weight: 600;
     font-size: 14px;
     z-index: 999;
     animation: fadeIn .3s;
 }

 .toast.success {
     background: #00e676;
     color: #000;
 }

 .toast.error {
     background: #ff1744;
     color: #fff;
 }

 .toast.info {
     background: var(--accent);
     color: #000;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }