/* Karino frontend portal */
.kb-fe {
  --kb-dark:#1A100E; --kb-cream:#EBDBC8; --kb-brown:#8a6d4d; --kb-line:#e6ddd2;
  font-family: inherit; color:#2a1c16; max-width:1080px; margin:0 auto;
}
.kb-fe * { box-sizing:border-box; }

.kb-btn {
  display:inline-block; background:var(--kb-dark); color:#fff; border:1px solid var(--kb-dark);
  padding:10px 20px; border-radius:6px; font-weight:600; font-size:14px; cursor:pointer;
  text-decoration:none; line-height:1.2; transition:opacity .15s;
}
.kb-btn:hover { opacity:.88; color:#fff; }
.kb-btn-ghost { background:transparent; color:var(--kb-dark); }
.kb-btn-ghost:hover { background:var(--kb-cream); color:var(--kb-dark); }

.kb-muted { color:#8a7563; font-size:14px; }
.kb-error { color:#a02; background:#f8e8e6; padding:9px 12px; border-radius:6px; }
.kb-success { color:#1a6b1a; background:#e6f4e6; padding:9px 12px; border-radius:6px; }

/* Auth */
.kb-auth { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.kb-auth-col { background:#fff; border:1px solid var(--kb-line); border-radius:12px; padding:28px; }
.kb-auth-col h3 { margin-top:0; color:var(--kb-dark); }
.kb-auth-box { background:#fff; border:1px solid var(--kb-line); border-radius:12px; padding:24px; }
.kb-form { display:flex; flex-direction:column; gap:12px; }
.kb-form label { display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:13px; color:#5a4a3c; }
.kb-form input { padding:10px 12px; border:1px solid var(--kb-line); border-radius:6px; font-size:15px; }
.kb-form input:focus { outline:none; border-color:var(--kb-brown); }
.kb-form .kb-btn { margin-top:6px; }

/* Dashboard */
.kb-dash-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:10px; }
.kb-dash-head h2 { margin:0; color:var(--kb-dark); }
.kb-dashboard h3 { margin:22px 0 10px; color:var(--kb-brown); border-bottom:1px solid var(--kb-line); padding-bottom:6px; }
.kb-lesson-card {
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--kb-line);
  border-radius:10px; padding:14px 16px; margin-bottom:10px; position:relative; overflow:hidden;
}
.kb-lc-bar { position:absolute; left:0; top:0; bottom:0; width:5px; }
.kb-lc-date { min-width:120px; padding-left:8px; }
.kb-lc-date strong { display:block; color:var(--kb-dark); }
.kb-lc-date span { font-size:13px; color:#8a7563; }
.kb-lc-main { flex:1; display:flex; flex-direction:column; gap:2px; }
.kb-lc-main strong { color:#2a1c16; }
.kb-lc-meta { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.kb-price { font-weight:700; color:var(--kb-dark); }
.kb-pill { font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:2px 9px; border-radius:12px; }
.kb-pill-paid { background:#e6f4e6; color:#1a6b1a; }
.kb-pill-unpaid { background:#f6ece0; color:#9a6b1a; }

/* Modal */
.kb-modal { position:fixed; inset:0; background:rgba(26,16,14,.5); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; }
.kb-modal[hidden] { display:none; }
.kb-modal-box { background:#fff; border-radius:14px; max-width:440px; width:100%; padding:28px; position:relative; }
.kb-modal-close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:#8a7563; }
.kb-modal-box h3 { margin-top:0; color:var(--kb-dark); }
.kb-modal-table { width:100%; border-collapse:collapse; margin-bottom:16px; }
.kb-modal-table th { text-align:left; color:#8a7563; font-weight:600; padding:6px 12px 6px 0; width:110px; }
.kb-modal-table td { padding:6px 0; }
.kb-modal-actions { display:flex; flex-direction:column; gap:10px; }

@media (max-width:680px) {
  .kb-auth { grid-template-columns:1fr; }
  .kb-lesson-card { flex-wrap:wrap; }
  .kb-lc-meta { align-items:flex-start; flex-direction:row; }
}