:root{
  --primary:#4f46e5;
  --primary-dark:#4338ca;
  --accent:#0ea5e9;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#1e2433;
  --muted:#6b7280;
  --border:#e5e7eb;
  --danger:#dc2626;
  --success:#16a34a;
  --radius:14px;
  --shadow:0 8px 24px rgba(20,20,50,.08);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* NAVBAR */
.navbar{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow);
}
.navbar-inner{
  max-width:1100px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; font-size:1.2rem;}
.brand-logo{width:32px; height:32px; display:block;}
.nav-links{display:flex; align-items:center; gap:18px;}
.nav-links a{color:#fff; text-decoration:none; font-weight:500; opacity:.92; transition:opacity .15s;}
.nav-links a:hover{opacity:1; text-decoration:underline;}
.nav-user{color:#fff; opacity:.9; font-size:.9rem;}
.btn-logout{background:rgba(255,255,255,.18); padding:6px 14px; border-radius:8px;}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer;}

/* CONTAINER */
.container{max-width:1100px; margin:0 auto; padding:28px 20px; width:100%; flex:1;}

/* CARDS */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px; margin-bottom:22px; border:1px solid var(--border);
}
.card h2{margin-top:0;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}

/* BUTTONS */
.btn{
  display:inline-block; padding:11px 22px; border-radius:10px; border:none;
  background:var(--primary); color:#fff; font-weight:600; cursor:pointer;
  text-decoration:none; font-size:.95rem; transition:.15s background;
}
.btn:hover{background:var(--primary-dark);}
.btn-secondary{background:#e5e7eb; color:var(--text);}
.btn-secondary:hover{background:#d1d5db;}
.btn-danger{background:var(--danger);}
.btn-outline{background:transparent; border:1.5px solid var(--primary); color:var(--primary);}
.btn-block{width:100%; text-align:center;}
.btn-sm{padding:6px 12px; font-size:.82rem; border-radius:8px;}

/* FORMS */
label{display:block; margin-bottom:6px; font-weight:600; font-size:.9rem;}
input[type=text],input[type=email],input[type=password],input[type=file],select{
  width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:10px;
  font-size:.95rem; margin-bottom:16px; background:#fff; color:var(--text);
}
input:focus,select:focus{outline:none; border-color:var(--primary);}

/* AUTH PAGES */
.auth-wrapper{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--accent)); padding:20px;
}
.auth-box{
  background:#fff; padding:36px 34px; border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.2);
  width:100%; max-width:400px;
}
.auth-box .logo-row{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:22px;}
.auth-box .logo-row img{width:52px; height:52px;}
.auth-box h1{font-size:1.3rem; margin:0; text-align:center;}
.auth-footer{text-align:center; margin-top:14px; font-size:.9rem; color:var(--muted);}
.alert{padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:.9rem;}
.alert-error{background:#fee2e2; color:#991b1b; border:1px solid #fecaca;}
.alert-success{background:#dcfce7; color:#166534; border:1px solid #bbf7d0;}

/* TABLE */
table{width:100%; border-collapse:collapse;}
th,td{padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:.92rem;}
th{color:var(--muted); font-weight:600; font-size:.82rem; text-transform:uppercase;}
.badge{padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:600;}
.badge-uploaded{background:#fef3c7; color:#92400e;}
.badge-signed{background:#dcfce7; color:#166534;}

/* SIGNING VIEWER */
.sign-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px;}
.pdf-stage{
  position:relative; margin:0 auto; background:#525659; border-radius:10px; overflow:auto;
  display:flex; justify-content:center; padding:20px;
}
.pdf-page-wrap{position:relative; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.3);}
#pdfCanvas{display:block;}
#sigCanvas{position:absolute; top:0; left:0; cursor:crosshair; touch-action:none;}
.color-dot{width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #ccc; cursor:pointer;}
.color-dot.active{box-shadow:0 0 0 2px var(--primary);}

/* CHECKBOX LIST (merge) */
.file-list{list-style:none; padding:0; margin:0;}
.file-list li{
  display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border);
  border-radius:10px; margin-bottom:8px; background:#fafbff;
}
.file-list li.dragging{opacity:.5;}
.drag-handle{cursor:grab; color:var(--muted);}

.muted{color:var(--muted); font-size:.88rem;}
.text-center{text-align:center;}
.flex-between{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}

/* FOOTER */
.footer{text-align:center; padding:18px; color:var(--muted); font-size:.85rem;}

/* RESPONSIVE */
@media (max-width:768px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--primary-dark);
    flex-direction:column; align-items:flex-start; padding:16px 20px; display:none; gap:14px;
  }
  .nav-links.open{display:flex;}
  .pdf-stage{padding:10px;}
}