/* ============================================================
   Kalviyogi Book OS — design system
   Light, soft-pastel, infographic. SVG icons only.
   ============================================================ */

:root {
  /* palette */
  --bg:        #f5f7fb;
  --surface:   #ffffff;
  --surface-2: #f0f3fa;
  --border:    #e6eaf2;
  --border-2:  #dbe1ee;

  --primary:   #6c63ff;   /* soft blue-violet */
  --primary-2: #8b7bff;
  --primary-ink:#4b45c9;
  --accent:    #22c1a6;   /* mint */
  --amber:     #f6a935;
  --coral:     #ff6b7a;

  --ink:       #1e2447;   /* dark navy */
  --ink-2:     #4a5273;
  --muted:     #8b93ad;

  --grad: linear-gradient(135deg, #6c63ff 0%, #8b7bff 55%, #a58bff 100%);

  --shadow-sm: 0 1px 2px rgba(30,36,71,.06);
  --shadow:    0 6px 22px rgba(60,66,120,.10);
  --shadow-lg: 0 16px 46px rgba(60,66,120,.16);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --font: 'Segoe UI', system-ui, -apple-system, 'Noto Sans Tamil', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.icon { display: inline-block; vertical-align: -0.18em; flex: none; }

/* ---- layout helpers ---- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.row { display: flex; gap: 16px; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { align-items: center; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mt { margin-top: 16px; } .mt-lg { margin-top: 28px; }
.mb { margin-bottom: 16px; }

/* ---- brand ---- */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow);
  object-fit: cover; flex: 0 0 auto;
}
img.brand-mark { padding: 0; background: transparent; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.2px; color: var(--ink); }
.brand-sub  { font-size: 12px; color: var(--muted); margin-top: -2px; }

/* ---- buttons ---- */
.btn {
  --b: var(--primary);
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: 11px; border: 1px solid transparent;
  background: var(--surface-2); color: var(--ink); cursor: pointer;
  transition: .16s ease; text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow); }
.btn-ghost { background: transparent; border-color: var(--border-2); color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: #fff; color: var(--coral); border-color: #ffd7dc; }
.btn-danger:hover { background: #fff0f2; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.btn-icon { padding: 9px; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px;
}
.card-pad-0 { padding: 0; }

/* ---- forms ---- */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; font: inherit; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink);
  transition: .15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,99,255,.15); }
textarea.input { min-height: 90px; resize: vertical; }

/* ---- badges / chips ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
}
.badge.ok { background: #e5f8f3; color: #10836f; }
.badge.warn { background: #fdf1dd; color: #9a6612; }
.badge.mut { background: #eef1f8; color: var(--muted); }
.badge.pri { background: #edeaff; color: var(--primary-ink); }

.chip {
  padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
}
.chip.active { background: var(--grad); color: #fff; border-color: transparent; }

/* ---- pill toggle / segmented ---- */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button {
  border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 13px;
  color: var(--ink-2); padding: 7px 14px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-sm); }

/* ---- tables ---- */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
table.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
table.tbl tr:hover td { background: var(--surface-2); }

/* ---- progress ---- */
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }

/* ---- flash ---- */
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 600; font-size: 14px; }
.flash.ok  { background: #e5f8f3; color: #10836f; }
.flash.err { background: #ffeef0; color: #c53a49; }

/* ---- empty ---- */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .icon { color: var(--border-2); }

/* ---- stat tiles ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.stat .k { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin-top: 6px; }
.stat .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #edeaff; color: var(--primary-ink); }