:root{
  --bg: #f4f7fb;
  --card: #ffffff;
  --accent: #2563eb;
  --muted: #6b7280;
  --round: 10px;
  --shadow: 0 6px 20px rgba(15,23,42,0.06);
  --glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* layout */
.app {
  display:flex;
  min-height:100vh;
}

/* sidebar */
.sidebar {
  width:260px;
  background: linear-gradient(180deg,#0f172a, #0b1220);
  color:white;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.brand { font-size:20px; font-weight:700; color:#e6eefc; }
.sidebar .nav a {
  display:flex; gap:12px; align-items:center;
  color:rgba(255,255,255,0.85);
  padding:10px; border-radius:8px; text-decoration:none;
}
.sidebar .nav a:hover { background: rgba(255,255,255,0.04); }

/* main content */
.main {
  flex:1;
  padding:24px;
}

/* header */
.header {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.header .search {
  flex:1; max-width:520px;
}
.search input{
  width:100%; padding:10px 14px; border-radius:12px; border:1px solid #e6eefc; background: #fff;
}

/* cards row */
.row { display:flex; gap:16px; margin-top:18px; }
.card {
  background:var(--card); padding:16px; border-radius:var(--round); box-shadow:var(--shadow);
}

/* clients list */
.clients-panel { display:flex; gap:16px; margin-top:18px; }
.list { flex:1; background:var(--card); border-radius:var(--round); padding:12px; box-shadow:var(--shadow); }
.detail { width:420px; background:var(--card); border-radius:var(--round); padding:12px; box-shadow:var(--shadow); }

/* table */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:10px; border-bottom:1px solid #eef2ff; font-size:14px; color:var(--muted); }
.table th { color:#0f172a; font-weight:600; }

/* buttons */
.btn { display:inline-block; padding:8px 12px; border-radius:8px; cursor:pointer; border:0; }
.btn.primary { background:var(--accent); color:white; }
.btn.ghost { background:transparent; border:1px solid #e6eefc; color:var(--accent); }

/* small */
.small { font-size:13px; color:var(--muted); }

/* modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(2,6,23,0.5); display:none; align-items:center; justify-content:center; z-index:50; }
.modal { background:var(--card); width:720px; border-radius:12px; padding:18px; box-shadow:var(--shadow); max-height:90vh; overflow:auto; }

/* form rows */
.rowform { display:flex; gap:12px; }
.rowform .col { flex:1; }

/* footer small */
.footer { margin-top:18px; color:var(--muted); font-size:13px; }

/* responsive */
@media (max-width:900px){
  .sidebar{display:none}
  .detail{display:none}
  .clients-panel{flex-direction:column}
}