:root{
  --brand:#0131B4;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e6eaf2;
  --shadow: 0 14px 35px rgba(2, 8, 23, .10);
  --radius:18px;

  /* sidebar floating */
  --dock-size:48px;
  --dock-gap:14px;
  --dock-right:20px;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}

.topbar{
  height:64px; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:10;
  box-shadow: 0 10px 25px rgba(1,49,180,.20);
}
.brand{display:flex; gap:12px; align-items:center; font-weight:900; letter-spacing:.3px}
.brand .dot{width:10px;height:10px;border-radius:999px;background:#fff;opacity:.9}
.brand small{opacity:.85;font-weight:600}

.layout{
  display:grid;
  grid-template-columns: 1fr 92px;
  gap:22px;
  padding:26px 22px;
  max-width: 1280px;
  margin: 0 auto;
}
.content{min-height: calc(100vh - 64px - 52px);}

.page-head{margin-bottom:18px; text-align:center;}
.page-title{margin:0;font-size:46px;letter-spacing:-.6px; color:var(--brand); font-weight:900;}
.page-subtitle{margin:10px 0 0;color:var(--muted); font-size:16px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.card h2, .card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted);line-height:1.5}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand); color:#fff; text-decoration:none;
  padding:12px 14px; border-radius:14px; font-weight:800;
  box-shadow: 0 12px 24px rgba(1,49,180,.25);
  border:0;
  cursor:pointer;
}
.btn.secondary{
  background:#fff; color:var(--brand); border:1px solid rgba(1,49,180,.25);
  box-shadow: 0 10px 20px rgba(2,8,23,.05);
}

.cards{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
}
.card-link{display:block; text-decoration:none; color:inherit;}
.card-link:hover{transform: translateY(-1px); transition:.12s}

/* Sidebar container (kept for layout grid, but dock is fixed) */
.sidebar{
  position:sticky; top:84px; height: calc(100vh - 110px);
  display:flex; align-items:center; justify-content:center;
}

/* =========================================================
   SIDEBAR DOCK (Floating, transparent background, fixed)
   ========================================================= */
.dock{
  position: fixed;
  right: var(--dock-right);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--dock-gap);
  z-index: 1000;

  background: transparent;  /* transparent dock background */
  border: 0;
  padding: 0;
  box-shadow: none;
}

.dock .icon{
  width: var(--dock-size);
  height: var(--dock-size);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.85);      /* floating bubble */
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(6px);

  text-decoration: none;
  color: var(--brand);

  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 10px 24px rgba(2,8,23,.12);
}

.dock .icon:hover{
  background: rgba(1,49,180,.10);
  transform: scale(1.10);
  border-color: rgba(1,49,180,.20);
}

.dock .icon.active{
  background: rgba(1,49,180,.16);
  border-color: rgba(1,49,180,.30);
}

/* =========================================================
   LUCIDE ICONS (SVG) – blue, simple, consistent
   ========================================================= */
i[data-lucide]{
  width: 20px;
  height: 20px;
  stroke: var(--brand);
  stroke-width: 1.8;
}

.btn i[data-lucide]{
  width: 18px;
  height: 18px;
  stroke: #fff; /* white icons on blue buttons */
}

.btn.secondary i[data-lucide]{
  stroke: var(--brand);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr}
  .sidebar{display:none}
  .cards{grid-template-columns: 1fr}
  .page-title{font-size:36px}

  /* hide floating dock on small screens */
  .dock{display:none}
}

/* =========================
   GLOBAL TABLE GRID STYLE
   ========================= */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

table th,
table td{
  border:1px solid rgba(0,0,0,.20);
  padding:10px 12px;
  vertical-align:middle;
  text-align:left;
  white-space:nowrap;
}

table thead th{
  background:rgba(0,0,0,.06);
  font-weight:700;
}

table tbody tr:hover{
  background:rgba(0,0,0,.04);
}

table td.num, table th.num{
  text-align:right;
}

.table-wrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
}

/* Sticky header */
table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Sorting indicators */
table thead th{
  cursor: pointer;
  user-select: none;
}
table thead th.sort-asc::after{
  content: " ▲";
  font-size: 12px;
  opacity: .7;
}
table thead th.sort-desc::after{
  content: " ▼";
  font-size: 12px;
  opacity: .7;
}

/* Toolbar above each table */
.table-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.15);
  border-bottom:none;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  background:rgba(0,0,0,.03);
}

.table-toolbar .left,
.table-toolbar .right{
  display:flex;
  gap:10px;
  align-items:center;
}

.table-toolbar input.table-search{
  width:min(420px, 60vw);
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.2);
  border-radius:10px;
  outline:none;
}

.table-toolbar button{
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.2);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.table-toolbar .meta{
  font-size:12px;
  opacity:.75;
}
CSS