:root{--bg-dark: #1a1a1a;--bg-panel: rgba(43, 43, 43, .7);--border-light: rgba(255, 255, 255, .1);--primary-accent: #f26522;--primary-glow: rgba(242, 101, 34, .5);--text-main: #f8fafc;--text-muted: #94a3b8;--sidebar-width: 260px}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body{background-color:var(--bg-dark);color:var(--text-main);background-image:radial-gradient(circle at 15% 50%,rgba(242,101,34,.1),transparent 25%),radial-gradient(circle at 85% 30%,rgba(242,101,34,.05),transparent 25%);min-height:100vh;overflow:hidden}.app-container{display:flex;height:100vh;width:100vw}.sidebar{width:var(--sidebar-width);background:var(--bg-panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-right:1px solid var(--border-light);display:flex;flex-direction:column;padding:2rem 1.5rem;transition:all .3s ease}.brand{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#f26522,#ff8c56);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:3rem;display:flex;align-items:center;gap:.75rem}.nav-item{padding:.875rem 1rem;margin-bottom:.5rem;border-radius:8px;color:var(--text-muted);text-decoration:none;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.75rem}.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text-main);transform:translate(4px)}.nav-item.active{background:linear-gradient(90deg,rgba(242,101,34,.2),transparent);color:var(--primary-accent);border-left:3px solid var(--primary-accent)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.header{height:70px;background:transparent;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border-light)}.content-area{flex:1;padding:2rem;overflow-y:auto}.glass-panel{background:var(--bg-panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-light);border-radius:16px;padding:2rem;box-shadow:0 10px 30px -10px #00000080;animation:fadeUp .5s ease-out}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-size:.875rem;color:var(--text-muted)}.input-group input{background:rgba(15,23,42,.6);border:1px solid var(--border-light);border-radius:8px;padding:.75rem 1rem;color:var(--text-main);outline:none;transition:all .2s ease}.input-group input:focus{border-color:var(--primary-accent);box-shadow:0 0 0 3px var(--primary-glow)}.checkbox-group{display:flex;gap:1.5rem;margin:1.5rem 0}.checkbox-item{display:flex;align-items:center;gap:.5rem;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#f26522,#d1490b);color:#fff;border:none;border-radius:8px;padding:.875rem 2rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 14px 0 var(--primary-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f2652299}@keyframes fadeUp{from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} .tabs-container {display: flex; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); padding-bottom: .5rem;} .tab {background: transparent; color: var(--text-muted); border: none; font-size: 1rem; font-weight: 500; cursor: pointer; padding: .5rem 1rem; position: relative; transition: color .2s ease;} .tab:hover {color: var(--text-main);} .tab.active {color: var(--primary-accent);} .tab.active::after {content: ""; position: absolute; bottom: -9px; left: 0; right: 0; height: 2px; background: var(--primary-accent); box-shadow: 0 -2px 10px var(--primary-glow);} .data-table {width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1rem;} .data-table th {text-align: left; padding: 1rem; color: var(--text-muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border-light);} .data-table td {padding: 1rem; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .95rem;} .data-table tbody tr {transition: all .2s ease;} .data-table tbody tr:hover {background: rgba(255,255,255,.03);} .badge {display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(59,130,246,.2);} .badge.cliente {background: rgba(16,185,129,.1); color: #34d399; border-color: rgba(16,185,129,.2);} .badge.fornecedor {background: rgba(245,158,11,.1); color: #fbbf24; border-color: rgba(245,158,11,.2);} .badge.tecnico {background: rgba(139,92,246,.1); color: #a78bfa; border-color: rgba(139,92,246,.2);} .btn-secondary {background: rgba(255,255,255,.05); color: var(--text-main); border: 1px solid var(--border-light); border-radius: 6px; padding: .5rem 1rem; font-size: .85rem; font-weight: 500; cursor: pointer; transition: all .2s ease;} .btn-secondary:hover {background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);} .modal-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; animation: fadeIn .2s ease-out;} .modal-content {background: var(--bg-dark); border: 1px solid var(--border-light); border-radius: 16px; width: 90%; max-width: 500px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); animation: scaleUp .3s cubic-bezier(.16,1,.3,1); overflow: hidden;} .modal-header {padding: 1.5rem; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center;} .modal-header h3 {font-size: 1.25rem; font-weight: 600;} .modal-close {background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.5rem; line-height: 1;} .modal-close:hover {color: var(--text-main);} .modal-body {padding: 1.5rem;} .modal-footer {padding: 1.5rem; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 1rem; background: rgba(255,255,255,.02);} @keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}} @keyframes scaleUp {from {opacity: 0; transform: scale(.95) translateY(10px);} to {opacity: 1; transform: scale(1) translateY(0);}}}