:root{
  --blue-800:#0a4ec2;
  --blue-700:#0b5ed7;
  --blue-600:#1a73e8;
  --blue-50:#eff6ff;
  --white:#ffffff;
  --gray-25:#fcfcfd;
  --gray-50:#f8fafc;
  --gray-100:#f1f5f9;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-500:#6b7280;
  --text:#0f172a;
  --danger:#ef4444;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial;
  color:var(--text);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background: linear-gradient(90deg, var(--blue-800), var(--blue-600));
  color:var(--white);
}
.topbar .brand{ font-weight:700; letter-spacing:.25px; }
.topbar .nav a{
  color:var(--white);
  text-decoration:none;
  margin-left:12px;
  padding:8px 10px;
  border-radius:10px;
}
.topbar .nav .btn-outline{ border:1px solid rgba(255,255,255,.7); }

/* Breadcrumb */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; background:var(--blue-50);
  border-bottom:1px solid var(--gray-200);
}
.breadcrumb a{ color:var(--blue-700); text-decoration:none; }
.breadcrumb .sep{ color:#64748b; }
.breadcrumb span{ color:#0f172a; font-weight:600; }

/* Container */
.container{ max-width:1100px; margin:18px auto; padding:0 16px; }

/* Cards & Grid */
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:18px;
  padding:18px;
  text-decoration:none; color:inherit;
  box-shadow: 0 10px 18px rgba(2,6,23,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 26px rgba(2,6,23,0.10); }
.card-disabled{ opacity:.65; pointer-events:none; }

/* Forms */
.form{ display:grid; gap:12px; }
.form .grid-2{ display:grid; gap:12px; grid-template-columns:1fr; }
.form .grid-3{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 800px){
  .form .grid-2{ grid-template-columns:1fr 1fr; }
  .form .grid-3{ grid-template-columns:1fr 1fr 1fr; }
}
label{ font-size:.92rem; color:#334155; }
input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid var(--gray-200); background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}
textarea{ min-height:100px; resize:vertical; }

.form-section{
  border:1px solid var(--gray-200); border-radius:16px; padding:16px;
  background: var(--white);
}
.section-title{
  margin:-8px 0 8px 0; font-weight:700; color:#0f172a;
  border-left:4px solid var(--blue-600); padding-left:8px;
}
.help{ color:#475569; font-size:.85rem; }

/* Actions & Buttons */
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{ display:inline-block; border:none; cursor:pointer; border-radius:12px; padding:10px 14px; }
.btn-primary{ background:var(--blue-600); color:var(--white); }
.btn-secondary{ background:var(--blue-50); color:#1e3a8a; border:1px solid var(--blue-600); }
.btn-danger{ background:var(--danger); color:var(--white); }
.btn-link{ background:transparent; color:var(--blue-600); padding:0; }

/* Table */
.table-wrap{ overflow-x:auto; background:var(--white); border-radius:16px; border:1px solid var(--gray-200); }
table{ width:100%; border-collapse: collapse; min-width:760px; }
th, td{ padding:12px; border-bottom:1px solid var(--gray-200); text-align:left; }
th{ background:#f1f5f9; font-weight:600; }
tr:hover td{ background: #fafafa; }

/* Search bar */
.searchbar{
  display:grid; grid-template-columns: 1fr auto; gap:10px;
}
.searchbar input{ padding:12px; }
.searchbar .btn-primary{ white-space:nowrap; }

/* Auth */
.auth-bg{ display:grid; place-items:center; min-height:100vh; background: linear-gradient(180deg, var(--blue-50), var(--gray-50)); }
.auth-card{
  width:min(420px, 92vw); background:var(--white); border-radius:20px;
  padding:22px; border:1px solid var(--gray-200);
  box-shadow: 0 14px 28px rgba(2,6,23,.08);
}
.alert{ padding:10px 12px; border-radius:10px; }
.alert-error{ background:#fee2e2; color:#7f1d1d; }

/* Footer */
.footer{ text-align:center; color:var(--gray-500); padding:24px 12px; }