:root{
  --bg:#f8fafc; --panel:#ffffff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --primary:#3b82f6; --primary-600:#2563eb; --primary-100:#dbeafe; --primary-50:#eff6ff;
  --danger:#ef4444; --danger-100:#fee2e2; --warn:#f59e0b; --warn-100:#fef3c7;
  --success:#10b981; --success-100:#d1fae5; --blue:#3b82f6; --violet:#8b5cf6;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --radius:12px; --radius-lg:16px; --radius-xl:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:14px/1.5 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.layout{min-height:100vh}
.sidebar{
  background:#0b1220; color:#cbd5e1; display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,0.06);
  position:fixed; left:0; top:0; height:100vh; width:240px; z-index:1000;
}
.sb-brand{display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,0.06)}
.sb-brand img{height:28px}
.sb-brand .title{color:#fff; font-weight:700; letter-spacing:.2px}
.sb-nav{padding:12px; padding-bottom:70px; overflow-y:auto; flex:1}
.sb-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#cbd5e1;
}
.sb-link.active, .sb-link:hover{background:rgba(255,255,255,0.06); color:#fff}
.sb-logout{
  position:absolute; bottom:0; left:0; right:0; padding:10px 12px;
  background:#0b1220; border-top:1px solid rgba(255,255,255,0.06);
}
.main{
  margin-left:240px; display:flex; flex-direction:column; min-width:0; width:calc(100% - 240px);
}
.topbar{
  background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; position:sticky; top:0; z-index:3;
}
.tb-title{font-weight:700; font-size:16px}
.tb-user{display:flex; align-items:center; gap:12px; color:var(--muted)}
.container{max-width:1200px;margin:0 auto;padding:24px}

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

.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}



.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-col{display:flex; flex-direction:column}
.form-actions{display:flex; gap:10px; margin-top:10px}
.form-error{color:var(--danger); font-size:12px; margin-top:6px}





.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px}
.kpi .num{font-size:18px; font-weight:800}

.progress{height:8px; background:#eef2f7; border-radius:999px; overflow:hidden}
.progress > span{display:block; height:100%; background:linear-gradient(90deg, var(--primary), #22c55e); width:0}

.flash{margin:12px 0}
.flash .msg{background:#fff; border:1px solid var(--line); border-left:4px solid var(--primary); padding:10px 12px; border-radius:10px}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.login-brand img{height:28px}

.footer{padding:16px; color:var(--muted); font-size:12px; text-align:center}

/* Loading Indicator */
.global-loader{
  position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.loader-content{
  background:var(--panel); padding:32px; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); text-align:center; min-width:200px;
}
.spinner{
  width:40px; height:40px; border:3px solid var(--line);
  border-top:3px solid var(--primary); border-radius:50%;
  animation:spin 1s linear infinite; margin:0 auto 16px;
}
@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}
.loader-text{font-weight:500; color:var(--text)}

/* Toast Notifications */
.toast-container{
  position:fixed; top:20px; right:20px; z-index:9998;
  display:flex; flex-direction:column; gap:12px; max-width:400px;
}
.toast{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; animation:slideIn 0.3s ease-out;
}
.toast-info{border-left:4px solid var(--blue)}
.toast-success{border-left:4px solid var(--success)}
.toast-warning{border-left:4px solid var(--warn)}
.toast-error{border-left:4px solid var(--danger)}
.toast-content{display:flex; align-items:center; justify-content:space-between; gap:12px}
.toast-message{flex:1; font-weight:500}
.toast-close{
  background:none; border:none; font-size:18px; cursor:pointer;
  color:var(--muted); padding:0; width:20px; height:20px;
}
@keyframes slideIn{from{transform:translateX(100%); opacity:0} to{transform:translateX(0); opacity:1}}

/* Enhanced Components */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm); transition:box-shadow 0.2s ease;
}
.card:hover{box-shadow:var(--shadow)}
.card h3{margin:0 0 16px 0; font-size:18px; font-weight:600; color:var(--text)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; font-weight:500; font-size:14px; transition:all 0.2s ease;
  text-decoration:none; position:relative; overflow:hidden;
}
.btn:disabled{opacity:0.6; cursor:not-allowed}
.btn-primary{
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover:not(:disabled){background:var(--primary-600); transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-ghost{
  border-color:var(--line); background:var(--panel); color:var(--text);
}
.btn-ghost:hover{background:var(--bg); border-color:var(--primary)}
.btn-danger{background:var(--danger); color:#fff}
.btn-danger:hover:not(:disabled){background:#dc2626; transform:translateY(-1px)}
.btn-sm{padding:8px 12px; font-size:12px; border-radius:8px}

/* Enhanced Forms */
input[type="file"], input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); outline:none; font-size:14px; transition:border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50);
}
label{display:block; font-weight:500; margin-bottom:8px; color:var(--text)}
.form-group{margin-bottom:20px}
.form-error{color:var(--danger); font-size:12px; margin-top:6px}

/* Enhanced Table */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--panel);
  box-shadow:var(--shadow-sm);
}
.table th, .table td{padding:16px; text-align:left; border-bottom:1px solid var(--line)}
.table th{background:var(--bg); color:var(--text); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.5px}
.table tr:last-child td{border-bottom:none}
.table tr:hover{background:var(--bg)}

/* Enhanced Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border-radius:999px; font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:0.5px;
}
.badge.dot::before{content:""; width:6px; height:6px; border-radius:50%}
.badge.queued{background:var(--muted); color:#fff}
.badge.queued::before{background:#fff}
.badge.validating{background:var(--warn-100); color:#92400e; border:1px solid #fde68a}
.badge.validating::before{background:var(--warn)}
.badge.processing{background:var(--primary-100); color:var(--primary-600); border:1px solid #bfdbfe}
.badge.processing::before{background:var(--primary)}
.badge.writing{background:#ede9fe; color:#7c3aed; border:1px solid #c4b5fd}
.badge.writing::before{background:var(--violet)}
.badge.done{background:var(--success-100); color:#065f46; border:1px solid #a7f3d0}
.badge.done::before{background:var(--success)}
.badge.error{background:var(--danger-100); color:#991b1b; border:1px solid #fecaca}
.badge.error::before{background:var(--danger)}

/* Progress Bar */
.progress{
  height:8px; background:var(--line); border-radius:999px; overflow:hidden;
  position:relative;
}
.progress > span{
  display:block; height:100%; background:linear-gradient(90deg, var(--primary), #60a5fa);
  border-radius:999px; transition:width 0.3s ease;
}

/* Responsive */
@media (max-width:1100px){
  .cards{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}
  .sidebar{left:-240px; transition:left 0.3s ease}
  .sidebar.open{left:0}
  .main{margin-left:0}
}
@media (max-width:768px){
  .kpis{grid-template-columns:1fr}
}
@media (max-width:768px){
  .container{padding:16px}
  .topbar{padding:12px 16px}
  .card{padding:16px}
  .toast-container{left:16px; right:16px; max-width:none}
}