/* ═══════════════════════════════════════════════
   BAMBOO TRADER — Hand-drawn Sketch UI Theme
   طبقة تراكبية — لا تؤثر على styles.css الأصلي
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rakkas&family=Tajawal:wght@300;400;500;700&display=swap');

/* ═══ CSS Variables — Sketch Palette ═══ */
:root {
  --sk-bg-paper: #FAF7EF;
  --sk-bg-card: #FFFDF7;
  --sk-text: #161616;
  --sk-text-sec: #3a3a3a;
  --sk-border: 2.5px solid #161616;
  --sk-radius: 26px 30px 6px 30px;
  --sk-radius-btn: 14px 8px 16px 10px;
  --sk-radius-bubble: 26px 28px 26px 4px;
  --sk-font-heading: 'Rakkas', cursive;
  --sk-font-body: 'Tajawal', sans-serif;
  --sk-shadow: none;
}

/* ═══ Body Override ═══ */
body {
  background: var(--sk-bg-paper) !important;
  color: var(--sk-text) !important;
  font-family: var(--sk-font-body) !important;
}

/* ═══ Paper Grain Overlay ═══ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.45;
  filter: url(#sketchGrain);
  background: transparent;
}

/* ═══ Dark Mode — Sketch Adaptation ═══ */
body.dark {
  --sk-bg-paper: #1a1a1a;
  --sk-bg-card: #222;
  --sk-text: #e8e4dc;
  --sk-text-sec: #b0a89c;
}

body.dark {
  background: var(--sk-bg-paper) !important;
  color: var(--sk-text) !important;
}

/* ═══ Navbar — Sketch Style ═══ */
.navbar {
  background: rgba(250, 247, 239, 0.95) !important;
  border-bottom: 2.5px dashed var(--sk-text) !important;
  backdrop-filter: blur(12px);
}
body.dark .navbar {
  background: rgba(26, 26, 26, 0.95) !important;
  border-bottom-color: var(--sk-text-sec) !important;
}

.navbar .container { height: 70px; }

.logo {
  font-family: var(--sk-font-heading) !important;
  font-size: 1.6rem !important;
  letter-spacing: 2px !important;
  color: var(--sk-text) !important;
}

.nav-links a {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
  font-size: .9rem !important;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--sk-text) !important;
}
.nav-links a::after {
  background: var(--sk-text) !important;
  height: 2px !important;
  border-radius: 0 !important;
}

.nav-cta {
  background: var(--sk-text) !important;
  color: var(--sk-bg-card) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-family: var(--sk-font-body) !important;
  border: 2.5px solid var(--sk-text) !important;
  position: relative;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 3px -4px -4px 3px;
  border: 2px solid var(--sk-text);
  border-radius: 10px 16px 14px 8px;
  opacity: 0.3;
  pointer-events: none;
}
.nav-cta:hover {
  transform: rotate(-0.5deg) translateY(-1px) !important;
}

.nav-user-btn {
  border-radius: var(--sk-radius-btn) !important;
  font-family: var(--sk-font-body) !important;
  border: 2px solid var(--sk-text) !important;
}
.nav-user-btn.outline {
  border: 2px dashed var(--sk-text) !important;
}

.nav-user-avatar {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: 50% !important;
}

/* ═══ Theme & Lang Toggles ═══ */
.theme-toggle, .lang-toggle {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-family: var(--sk-font-body) !important;
}
.theme-toggle:hover, .lang-toggle:hover {
  background: var(--sk-bg-paper) !important;
  transform: rotate(-2deg);
}

.nav-chat-icon {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
}
.nav-chat-icon:hover {
  background: var(--sk-bg-paper) !important;
  transform: rotate(1deg);
}

/* ═══ Section Headers — Sketch ═══ */
.section-header h2 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
  transform: rotate(-0.3deg);
  letter-spacing: 0 !important;
}
.section-header p {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}

/* ═══ Hero Section ═══ */
.hero-simple::before {
  background: linear-gradient(160deg, var(--sk-bg-paper), #f0ece4 50%, var(--sk-bg-paper)) !important;
}
.hero-simple h1 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
  transform: rotate(-0.2deg);
}
.hero-simple .sub {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.hero-simple .stats-row strong {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.hero-simple .stats-row span {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}

body.dark .hero-simple::before {
  background: linear-gradient(160deg, #1a1a1a, #222 50%, #1a1a1a) !important;
}

/* ═══ Buttons — Sketch ═══ */
.btn-primary, .btn-secondary, .btn-gold, .btn-sm {
  font-family: var(--sk-font-body) !important;
  border-radius: var(--sk-radius-btn) !important;
  position: relative;
}
.btn-primary::before, .btn-gold::before {
  content: '';
  position: absolute;
  inset: 3px -4px -4px 3px;
  border: 2px solid currentColor;
  border-radius: 10px 16px 14px 8px;
  opacity: 0.3;
  pointer-events: none;
}
.btn-primary:hover, .btn-gold:hover {
  transform: rotate(-0.5deg) translateY(-2px) !important;
}
.btn-secondary {
  border: 2.5px dashed var(--sk-text) !important;
}
.btn-secondary:hover {
  border-style: solid !important;
  transform: rotate(0.5deg) translateY(-1px) !important;
}

/* ═══ Cards — Sketch ═══ */
.course-preview-card,
.why-simple-card,
.testimonial-card,
.pricing-card,
.faq-item,
.stat-card,
.admin-card,
.modal {
  background: var(--sk-bg-card) !important;
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: none !important;
  position: relative;
  transform: rotate(-0.3deg);
}
.course-preview-card:nth-child(even),
.why-simple-card:nth-child(even),
.testimonial-card:nth-child(even),
.pricing-card:nth-child(even) {
  transform: rotate(0.4deg);
}
.course-preview-card::before,
.why-simple-card::before,
.testimonial-card::before,
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 4px -5px -5px 4px;
  border: 2.5px solid var(--sk-text);
  border-radius: 30px 6px 28px 6px;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

.course-preview-card:hover,
.why-simple-card:hover,
.testimonial-card:hover,
.pricing-card:hover {
  transform: rotate(0.5deg) translateY(-3px) !important;
  box-shadow: none !important;
}

body.dark .course-preview-card,
body.dark .why-simple-card,
body.dark .testimonial-card,
body.dark .pricing-card,
body.dark .faq-item,
body.dark .stat-card,
body.dark .admin-card,
body.dark .modal {
  background: var(--sk-bg-card) !important;
  border-color: var(--sk-text-sec) !important;
}

/* ═══ Pricing Featured ═══ */
.pricing-card.featured {
  border: 3px solid var(--sk-text) !important;
  box-shadow: none !important;
}
.pricing-card.featured .popular {
  background: var(--sk-text) !important;
  color: var(--sk-bg-card) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-family: var(--sk-font-body) !important;
}

/* ═══ Section Divider — Dashed ═══ */
section + section::before {
  content: '';
  display: block;
  width: 60%;
  max-width: 400px;
  height: 0;
  border-top: 2.5px dashed var(--sk-text-sec);
  margin: 0 auto;
  opacity: 0.4;
}

/* ═══ Quote Banner ═══ */
.quote-banner {
  background: var(--sk-bg-paper) !important;
  border-top: 2.5px dashed var(--sk-text-sec);
  border-bottom: 2.5px dashed var(--sk-text-sec);
}
.quote-banner blockquote {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.quote-banner blockquote::before {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.quote-banner cite {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}

/* ═══ Course Card Content ═══ */
.course-preview-card h3,
.course-preview-card .tag,
.course-preview-card .price {
  font-family: var(--sk-font-heading) !important;
}
.course-preview-card p {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}

/* ═══ Why Cards ═══ */
.why-simple-card h4 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.why-simple-card p {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.why-simple-card .icon {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  background: transparent !important;
}
.why-simple-card:hover .icon {
  background: var(--sk-text) !important;
}
.why-simple-card:hover .icon svg {
  stroke: var(--sk-bg-card) !important;
}

/* ═══ Testimonials ═══ */
.testimonial-card blockquote {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.testimonial-card .author .name {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.testimonial-card .author .av {
  border: 2px solid var(--sk-text) !important;
  background: var(--sk-bg-paper) !important;
}

/* ═══ FAQ ═══ */
.faq-item {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
}
.faq-q {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.faq-q:hover {
  color: var(--sk-text) !important;
  background: var(--sk-bg-paper) !important;
}
.faq-a p {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.faq-item.active {
  border-color: var(--sk-text) !important;
}

/* ═══ Stat Cards ═══ */
.stat-card {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  background: var(--sk-bg-card) !important;
}
.stat-card h3 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.stat-card p {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.stat-card .stat-icon {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
}

/* ═══ Pricing ═══ */
.pricing-card h3 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.pricing-card .price {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.pricing-card li {
  font-family: var(--sk-font-body) !important;
  border-bottom: 2px dashed var(--sk-text-sec) !important;
}
.pricing-card li:last-child { border-bottom: none !important; }

/* ═══ CTA Section ═══ */
section[style*="background:var(--dark)"],
section[style*="background: var(--dark)"] {
  background: var(--sk-text) !important;
  border-top: 3px dashed var(--sk-text-sec);
  border-bottom: 3px dashed var(--sk-text-sec);
}

/* ═══ Guarantee Banner ═══ */
.guarantee-banner {
  border-top: 3px dashed var(--sk-text-sec) !important;
  border-bottom: 3px dashed var(--sk-text-sec) !important;
}
.guarantee-banner span {
  font-family: var(--sk-font-body) !important;
}

/* ═══ Footer — Sketch ═══ */
.footer {
  background: var(--sk-text) !important;
  color: #FFFFFF !important;
  border-top: 3px dashed var(--sk-gold) !important;
}
.footer-brand .logo {
  font-family: var(--sk-font-heading) !important;
  color: #FFFFFF !important;
}
.footer-brand p {
  font-family: var(--sk-font-body) !important;
  color: rgba(255,255,255,.7) !important;
}
.footer-col h4 {
  font-family: var(--sk-font-heading) !important;
  color: #FFFFFF !important;
}
.footer-col a {
  font-family: var(--sk-font-body) !important;
  color: rgba(255,255,255,.7) !important;
}
.footer-col a:hover {
  color: var(--sk-gold) !important;
}
.footer-social a {
  border: 2px dashed rgba(255,255,255,.4) !important;
  border-radius: var(--sk-radius-btn) !important;
  color: rgba(255,255,255,.7) !important;
}
.footer-social a:hover {
  border-color: var(--sk-gold) !important;
  transform: rotate(-1deg) !important;
}
.footer-social svg {
  stroke: rgba(255,255,255,.7) !important;
}
.footer-bottom {
  border-top: 2px dashed rgba(255,255,255,.2) !important;
  font-family: var(--sk-font-body) !important;
  color: rgba(255,255,255,.5) !important;
}
body.dark .footer { background: #0a0a0a !important; }
body.dark .footer-brand .logo { color: #ffffff !important; }
body.dark .footer-brand p { color: rgba(255,255,255,.7) !important; }
body.dark .footer-col h4 { color: #ffffff !important; }
body.dark .footer-col a { color: rgba(255,255,255,.7) !important; }
body.dark .footer-col a:hover { color: var(--sk-gold) !important; }
body.dark .footer-social svg { stroke: rgba(255,255,255,.7) !important; }
body.dark .footer-bottom { color: rgba(255,255,255,.5) !important; }

/* ═══ Forms — Sketch ═══ */
.form-group label {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.form-group input,
.form-group select,
.form-group textarea {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  background: var(--sk-bg-card) !important;
  color: var(--sk-text) !important;
  font-family: var(--sk-font-body) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--sk-text) !important;
  box-shadow: none !important;
  outline: 2px dashed var(--sk-text) !important;
  outline-offset: 2px;
}

/* ═══ Toast — Sketch ═══ */
.toast {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-family: var(--sk-font-body) !important;
  background: var(--sk-bg-card) !important;
  color: var(--sk-text) !important;
}
.toast.success {
  background: var(--sk-text) !important;
  color: var(--sk-bg-card) !important;
}

/* ═══ Modal — Sketch ═══ */
.modal {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  background: var(--sk-bg-card) !important;
}
.modal::before {
  content: '';
  position: absolute;
  inset: 4px -5px -5px 4px;
  border: 2.5px solid var(--sk-text);
  border-radius: 30px 6px 28px 6px;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}
.modal h3 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.modal-close {
  border: 2px solid var(--sk-text) !important;
  border-radius: 50% !important;
}

/* ═══ Badges — Sketch ═══ */
.badge {
  border: 2px solid var(--sk-text) !important;
  border-radius: 30px !important;
  font-family: var(--sk-font-body) !important;
}
.badge-gold {
  background: transparent !important;
  color: var(--sk-text) !important;
  border: 2px solid var(--sk-text) !important;
}
.badge-green {
  background: transparent !important;
  color: var(--sk-text) !important;
  border: 2px solid var(--sk-text) !important;
}
.badge-red {
  background: transparent !important;
  color: var(--sk-text) !important;
  border: 2px dashed var(--sk-text) !important;
}

/* ═══ Admin Panel — Sketch ═══ */
.admin-page {
  background: var(--sk-bg-paper) !important;
}
.admin-header {
  background: var(--sk-text) !important;
  border-bottom: 3px dashed var(--sk-text-sec) !important;
}
.admin-header h1 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-bg-card) !important;
}
.admin-header .admin-nav button {
  border: 2px dashed var(--sk-text-sec) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-family: var(--sk-font-body) !important;
}
.admin-header .admin-nav button.active,
.admin-header .admin-nav button:hover {
  background: var(--sk-bg-card) !important;
  color: var(--sk-text) !important;
  border-style: solid !important;
}
.admin-card-header {
  border-bottom: 2px dashed var(--sk-text-sec) !important;
}
.admin-card-header h2 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.admin-table th {
  background: var(--sk-bg-paper) !important;
  border-bottom: 2px dashed var(--sk-text-sec) !important;
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.admin-table td {
  border-bottom: 2px dashed var(--sk-text-sec) !important;
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.admin-table .btn-edit,
.admin-table .btn-delete {
  border: 2px solid currentColor !important;
  border-radius: var(--sk-radius-btn) !important;
}

/* ═══ Notification Dropdown — Sketch ═══ */
.nav-notif-dropdown {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  background: var(--sk-bg-card) !important;
}
.notif-header {
  border-bottom: 2px dashed var(--sk-text-sec) !important;
  font-family: var(--sk-font-body) !important;
}
.notif-item {
  border-bottom: 2px dashed var(--sk-text-sec) !important;
}
.notif-item:last-child { border-bottom: none !important; }
.notif-title {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.notif-msg {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}

/* ═══ User Menu — Sketch ═══ */
.nav-user-menu {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  background: var(--sk-bg-card) !important;
}
.nav-user-menu .menu-header {
  border-bottom: 2px dashed var(--sk-text-sec) !important;
}
.nav-user-menu .menu-name {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.nav-user-menu .menu-email {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.nav-user-menu a, .nav-user-menu button {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.nav-user-menu a:hover, .nav-user-menu button:hover {
  background: var(--sk-bg-paper) !important;
}
.nav-user-menu .divider {
  border-top: 2px dashed var(--sk-text-sec) !important;
}

/* ═══ WhatsApp Float — Sketch ═══ */
.wa-float .wa-label {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-family: var(--sk-font-body) !important;
  background: var(--sk-bg-card) !important;
  color: var(--sk-text) !important;
}
.wa-float .wa-icon {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: 50% !important;
}

/* ═══ Hamburger — Sketch ═══ */
.hamburger span {
  background: var(--sk-text) !important;
  border-radius: 2px !important;
}

/* ═══ Verified Badge — Sketch ═══ */
.verified-badge {
  border: 2px solid var(--sk-text) !important;
  background: var(--sk-bg-card) !important;
  color: var(--sk-text) !important;
}
.verified-section {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  background: var(--sk-bg-card) !important;
}
.verified-status {
  border: 2px dashed var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
}

/* ═══ Subscribed Message — Sketch ═══ */
.subscribed-msg .box {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  background: var(--sk-bg-card) !important;
}
.subscribed-msg .box .check {
  border: 2.5px solid var(--sk-text) !important;
  border-radius: 50% !important;
}
.subscribed-msg .box h2 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.subscribed-msg .box .plan-name {
  border: 2px solid var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
}

/* ═══ Comments — Sketch ═══ */
.comments-section {
  border-top: 2.5px dashed var(--sk-text-sec) !important;
}
.comments-section h3 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.comment-item {
  border-bottom: 2px dashed var(--sk-text-sec) !important;
}
.comment-author {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text) !important;
}
.comment-text {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.comment-reply {
  border: 2px dashed var(--sk-text-sec) !important;
  border-radius: var(--sk-radius-btn) !important;
  background: var(--sk-bg-paper) !important;
}

/* ═══ Star Rating — Sketch ═══ */
.star-rating span {
  color: var(--sk-text-sec) !important;
}
.star-rating span.active,
.star-rating span:hover {
  color: var(--sk-text) !important;
}

/* ═══ Upload Area — Sketch ═══ */
.upload-area {
  border: 3px dashed var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  background: var(--sk-bg-paper) !important;
}
.upload-area:hover {
  border-style: solid !important;
  background: var(--sk-bg-card) !important;
}

/* ═══ Empty State — Sketch ═══ */
.empty-state {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}

/* ═══ Scrollbar — Sketch ═══ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sk-bg-paper); }
::-webkit-scrollbar-thumb {
  background: var(--sk-text-sec);
  border-radius: var(--sk-radius-btn);
  border: 2px solid var(--sk-bg-paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--sk-text); }

/* ═══ Selection — Sketch ═══ */
::selection {
  background: var(--sk-text);
  color: var(--sk-bg-card);
}

/* ═══ Course Page Specifics ═══ */
.courses-hero h1 {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}
.courses-hero p {
  font-family: var(--sk-font-body) !important;
  color: var(--sk-text-sec) !important;
}
.course-card {
  background: var(--sk-bg-card) !important;
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
}
.course-card::before {
  content: '';
  position: absolute;
  inset: 4px -5px -5px 4px;
  border: 2.5px solid var(--sk-text);
  border-radius: 30px 6px 28px 6px;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

/* ═══ Login Page Specifics ═══ */
.login-card,
.register-card,
.forgot-card {
  background: var(--sk-bg-card) !important;
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
}

/* ═══ Profile Page Specifics ═══ */
.profile-header,
.profile-card {
  background: var(--sk-bg-card) !important;
  border: 2.5px solid var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
}

/* ═══ Responsive — Sketch ═══ */
@media (max-width: 768px) {
  .navbar {
    border-bottom: 2.5px solid var(--sk-text) !important;
  }
  .nav-links {
    background: var(--sk-bg-paper) !important;
    border-bottom: 2.5px dashed var(--sk-text) !important;
  }
  .nav-links a {
    color: var(--sk-text) !important;
  }
  .nav-user-menu {
    border-radius: 20px 20px 0 0 !important;
    border: 2.5px solid var(--sk-text) !important;
    border-bottom: none !important;
  }
}

/* ═══ Instructor Section ═══ */
.instructor-section .avatar-wrap {
  border: 3px solid var(--sk-text) !important;
}
.instructor-section .avatar-ring {
  border: 2px dashed var(--sk-text) !important;
}
.instructor-section .avatar-text {
  font-family: var(--sk-font-heading) !important;
  color: var(--sk-text) !important;
}

/* ═══ Course Syllabus Items ═══ */
.course-preview-grid [style*="border-radius:10px"],
.course-preview-grid [style*="border-radius: 10px"],
.course-preview-grid [style*="border-radius:8px"],
.course-preview-grid [style*="border-radius: 8px"] {
  border: 1.5px solid var(--sk-text) !important;
}

/* ═══ Sketch Rotation Classes ═══ */
.sk-rotate-1 { transform: rotate(-0.5deg); }
.sk-rotate-2 { transform: rotate(0.3deg); }
.sk-rotate-3 { transform: rotate(-0.2deg); }
.sk-rotate-4 { transform: rotate(0.6deg); }

/* ═══ Dashed Separators ═══ */
.sk-dashed-top { border-top: 2.5px dashed var(--sk-text-sec); }
.sk-dashed-bottom { border-bottom: 2.5px dashed var(--sk-text-sec); }
.sk-dashed-left { border-left: 2.5px dashed var(--sk-text-sec); }
.sk-dashed-right { border-right: 2.5px dashed var(--sk-text-sec); }

/* ═══ Sketch Tag ═══ */
.sk-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--sk-text);
  border-radius: 30px;
  padding: 4px 14px;
  font-size: .8rem;
  font-family: var(--sk-font-body);
  color: var(--sk-text);
}
.sk-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--sk-text);
  background: #6cb46c;
  animation: skPulse 2s ease-in-out infinite;
}
.sk-tag-dot.orange { background: #e8a64a; }
.sk-tag-dot.red { background: #d45d5d; }
.sk-tag-dot.blue { background: #5d8dd4; }
@keyframes skPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ═══ Sketch Bubble ═══ */
.sk-bubble {
  position: relative;
  background: var(--sk-bg-card);
  border: 2.5px solid var(--sk-text);
  border-radius: var(--sk-radius-bubble);
  padding: 14px 18px;
  margin-bottom: 12px;
  transform: rotate(-0.2deg);
}
.sk-bubble::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: -10px;
  width: 14px;
  height: 14px;
  background: var(--sk-bg-card);
  border-right: 2.5px solid var(--sk-text);
  border-bottom: 2.5px solid var(--sk-text);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.sk-bubble-time {
  font-size: .75rem;
  color: var(--sk-text-sec);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px dashed var(--sk-text-sec);
  font-family: var(--sk-font-body);
}

/* ═══ Sketch List ═══ */
.sk-list { list-style: none; }
.sk-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px dashed var(--sk-text-sec);
  font-size: .9rem;
  font-family: var(--sk-font-body);
  color: var(--sk-text);
}
.sk-list li:last-child { border-bottom: none; }
.sk-list-num {
  width: 28px;
  height: 28px;
  border: 2px solid var(--sk-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* ═══ Sketch Check ═══ */
.sk-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: .9rem;
  cursor: pointer;
  font-family: var(--sk-font-body);
  color: var(--sk-text);
}
.sk-check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sk-text);
  border-radius: 4px 6px 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ═══ Hand-drawn SVG Icon Style ═══ */
.sk-icon {
  stroke-linecap: round;
  stroke-linejoin: round;
}