/* ============================================================
   MICHALBERNYS.PL – Design System
   Brand: Orange / Amber (#F7941D, #FBBF24, #D97706)
   ============================================================ */

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ===== CUSTOM PROPERTIES ===== */
:root {
  /* Brand Colors */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-primary: #F7941D;
  --orange-600: #EA580C;
  --orange-dark: #D97706;
  --orange-darker: #B45309;
  --orange-light: #FBBF24;
  --orange-lighter: #FDE68A;
  --orange-gradient: linear-gradient(135deg, #C05A00 0%, #D97706 25%, #F7941D 60%, #FBBF24 100%);
  --orange-gradient-soft: linear-gradient(135deg, #D97706 0%, #F7941D 50%, #FBBF24 100%);

  /* Neutrals */
  --white:     #FFFFFF;
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #1F2937;
  --gray-900:  #111827;

  /* Dark theme sections */
  --dark-bg:   #0F1117;
  --dark-card: #1A1D27;
  --dark-border: #2D3240;

  /* Status */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #3B82F6;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.12);
  --shadow-2xl:0 24px 60px rgba(0,0,0,0.15);
  --shadow-orange: 0 4px 20px rgba(247,148,29,0.35);
  --shadow-orange-lg: 0 8px 32px rgba(247,148,29,0.45);

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-normal: 0.25s ease;
  --t-slow:   0.4s ease;
}

/* ===== RESET ===== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img          { max-width: 100%; height: auto; display: block; }
a            { color: inherit; text-decoration: none; }
ul, ol       { list-style: none; }
button       { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
}
h1 { font-size: clamp(2rem,   5vw, 3.5rem);  }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem);  }
h3 { font-size: clamp(1.25rem,2vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}
.container--narrow { max-width: 800px; }
.container--wide   { max-width: 1440px; }

section { padding: var(--sp-24) 0; }

.section-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange-primary);
  margin-bottom: var(--sp-3);
  display: block;
}

.section-title { margin-bottom: var(--sp-5); }
.section-subtitle {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 600px;
  line-height: 1.7;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.875rem 2rem;
  border-radius: var(--r-lg);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-normal);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--orange-primary);
  color: var(--white);
  border-color: var(--orange-primary);
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-orange-lg);
}

.btn-secondary {
  background: var(--white);
  color: var(--orange-dark);
  border-color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-secondary:hover {
  background: var(--orange-50);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--orange-primary);
  border-color: var(--orange-primary);
}
.btn-outline:hover {
  background: var(--orange-primary);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
}

.btn-dark {
  background: var(--gray-900);
  color: var(--white);
  border-color: var(--gray-900);
}
.btn-dark:hover {
  background: var(--gray-700);
  transform: translateY(-2px);
}

.btn-success {
  background: var(--success);
  color: var(--white);
  border-color: var(--success);
  box-shadow: 0 4px 16px rgba(16,185,129,0.35);
}
.btn-success:hover {
  background: #059669;
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1.125rem 2.5rem;
  font-size: 1.125rem;
  border-radius: var(--r-xl);
}
.btn-sm {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  border-radius: var(--r-md);
}
.btn-full { width: 100%; }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: all var(--t-normal);
}
.navbar.scrolled {
  border-color: var(--gray-200);
  box-shadow: var(--shadow-md);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.navbar__logo {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  transition: opacity var(--t-fast);
}
.navbar__logo:hover { opacity: 0.8; }
.navbar__logo span { color: var(--orange-primary); }

.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.navbar__nav a {
  font-weight: 500;
  color: var(--gray-600);
  font-size: 0.95rem;
  transition: color var(--t-fast);
  padding: var(--sp-2) 0;
}
.navbar__nav a:hover, .navbar__nav a.active { color: var(--orange-primary); }

.navbar__social {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.navbar__social-link {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--gray-600);
  transition: all var(--t-fast);
  font-size: 1rem;
}
.navbar__social-link:hover {
  background: var(--orange-50);
  color: var(--orange-primary);
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--sp-2);
}
.navbar__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--gray-700);
  transition: all var(--t-normal);
  border-radius: 2px;
}
.navbar__toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.navbar__toggle.open span:nth-child(2) { opacity: 0; }
.navbar__toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile social links inside burger menu (hidden on desktop) */
.navbar__nav-social { display: none; }

/* Premium card badge */
.blog-card--premium { border-color: #bfdbfe; }
.blog-card--premium:hover { border-color: #2563eb; box-shadow: 0 8px 32px rgba(37,99,235,.15); }
.blog-card__premium-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: #1d4ed8;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(29,78,216,.35);
}

/* ===== HEX BACKGROUND ===== */
.hex-section {
  background: var(--orange-gradient);
  position: relative;
  overflow: hidden;
}
.hex-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='132'%3E%3Cpolygon points='39,0 77,22 77,66 39,88 1,66 1,22' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.18)' stroke-width='1.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='132'%3E%3Cpolygon points='39,0 77,22 77,66 39,88 1,66 1,22' fill='rgba(255,255,255,0.1)' stroke='rgba(255,255,255,0.2)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 78px 132px, 78px 132px;
  background-position: 0 0, 39px 66px;
  pointer-events: none;
}

/* ===== BADGES ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.badge-orange  { background: var(--orange-primary); color: var(--white); }
.badge-amber   { background: var(--orange-light); color: var(--orange-darker); }
.badge-white   { background: var(--white); color: var(--orange-dark); }
.badge-success { background: var(--success); color: var(--white); }
.badge-dark    { background: var(--gray-800); color: var(--white); }
.badge-outline { border: 2px solid var(--orange-primary); color: var(--orange-primary); background: transparent; }
.badge-outline-white { border: 2px solid rgba(255,255,255,0.7); color: var(--white); background: transparent; }

/* ===== CARDS ===== */
.card {
  background: var(--white);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
  border: 1px solid var(--gray-100);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.card__body { padding: var(--sp-8); }

/* ===== GRID ===== */
.grid       { display: grid; gap: var(--sp-8); }
.grid-2     { grid-template-columns: repeat(2,1fr); }
.grid-3     { grid-template-columns: repeat(3,1fr); }
.grid-4     { grid-template-columns: repeat(4,1fr); }
.grid-auto  { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }

/* ===== CHECK / TICK LISTS ===== */
.check-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font-size: 1rem;
  line-height: 1.55;
}

.check-list__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  margin-top: 1px;
}
.check-list__icon--yes    { background: rgba(16,185,129,0.12); color: var(--success); }
.check-list__icon--no     { background: rgba(239,68,68,0.12);  color: var(--error);   }
.check-list__icon--orange { background: rgba(247,148,29,0.15); color: var(--orange-primary); }
.check-list__icon--dark   { background: var(--gray-100);       color: var(--gray-700); }

/* ===== STAT ITEMS ===== */
.stat {
  text-align: center;
  padding: var(--sp-4);
}
.stat__number {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--orange-primary);
}
.stat__label {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-top: var(--sp-1);
  font-weight: 500;
}

/* ===== ACCORDION ===== */
.accordion {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.accordion__item {
  border-bottom: 1px solid var(--gray-200);
}
.accordion__item:last-child { border-bottom: none; }

.accordion__btn {
  width: 100%;
  padding: var(--sp-6) var(--sp-8);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
}
.accordion__btn:hover { background: var(--gray-50); }
.accordion__btn.open  { background: rgba(247,148,29,0.04); }

.accordion__num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--orange-100);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.875rem;
}
.accordion__btn.open .accordion__num {
  background: var(--orange-primary);
  color: var(--white);
}

.accordion__meta { flex: 1; }
.accordion__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  display: block;
  margin-bottom: 2px;
}
.accordion__sub {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 500;
}

.accordion__dur {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange-primary);
  background: var(--orange-100);
  padding: 4px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.accordion__chevron {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-size: 0.75rem;
  transition: all var(--t-normal);
}
.accordion__btn.open .accordion__chevron {
  background: var(--orange-primary);
  color: var(--white);
  transform: rotate(180deg);
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion__body.open { max-height: 1000px; }

.accordion__content {
  padding: 0 var(--sp-8) var(--sp-8);
  padding-left: calc(var(--sp-8) + 34px + var(--sp-4));
}
.accordion__content ul { list-style: none; }
.accordion__content ul li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.accordion__content ul li:last-child { border-bottom: none; }
.accordion__content ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: calc(var(--sp-2) + 2px);
  color: var(--orange-primary);
  font-size: 0.75rem;
}
.accordion__content ul li strong { font-weight: 700; color: var(--gray-800); }

/* ===== MODAL ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.modal-overlay.active { display: flex; }

.modal-box {
  background: var(--white);
  border-radius: var(--r-2xl);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2xl);
  animation: modalIn 0.3s ease;
}
@keyframes modalIn {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

.modal-header {
  background: var(--orange-gradient-soft);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='132'%3E%3Cpolygon points='39,0 77,22 77,66 39,88 1,66 1,22' fill='rgba(255,255,255,0.08)' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 78px 132px;
  pointer-events: none;
}
.modal-header h3   { color: var(--white); font-size: 1.5rem; position: relative; }
.modal-header p    { color: rgba(255,255,255,0.85); margin-top: var(--sp-2); position: relative; font-size: 0.95rem; }
.modal-close {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  color: var(--white);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast);
  z-index: 1;
}
.modal-close:hover { background: rgba(255,255,255,0.35); }

.modal-body { padding: var(--sp-8); }

/* ===== FORMS ===== */
.form-group { margin-bottom: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--sp-2);
}
.form-label span { color: var(--error); margin-left: 2px; }

.form-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--r-lg);
  font-size: 0.975rem;
  color: var(--gray-800);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  background: var(--white);
}
.form-input:focus {
  outline: none;
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 3px rgba(247,148,29,0.15);
}
.form-input::placeholder { color: var(--gray-400); }

.form-select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--r-lg);
  font-size: 0.975rem;
  color: var(--gray-800);
  background: var(--white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--t-fast);
}
.form-select:focus {
  outline: none;
  border-color: var(--orange-primary);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.form-check input[type="checkbox"] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--orange-primary);
  cursor: pointer;
}
.form-check label {
  font-size: 0.85rem;
  color: var(--gray-600);
  cursor: pointer;
  line-height: 1.6;
}
.form-check a { color: var(--orange-primary); text-decoration: underline; }

/* ===== FOOTER ===== */
.footer {
  background: var(--dark-bg);
  color: var(--gray-400);
  padding: var(--sp-16) 0 var(--sp-8);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}
.footer__brand {}
.footer__logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--sp-4);
  display: inline-block;
}
.footer__logo span { color: var(--orange-primary); }
.footer__tagline {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: var(--sp-6);
  color: var(--gray-500);
}
.footer__social {
  display: flex;
  gap: var(--sp-3);
}
.footer__social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 1rem;
  transition: all var(--t-normal);
}
.footer__social-link:hover {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: var(--white);
  transform: translateY(-2px);
}

.footer__col-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: var(--sp-5);
}
.footer__links { list-style: none; }
.footer__links li { margin-bottom: var(--sp-3); }
.footer__links a {
  font-size: 0.9rem;
  color: var(--gray-500);
  transition: color var(--t-fast);
}
.footer__links a:hover { color: var(--orange-primary); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--dark-border);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer__copy { font-size: 0.85rem; color: var(--gray-600); }
.footer__legal {
  display: flex;
  gap: var(--sp-6);
}
.footer__legal a {
  font-size: 0.85rem;
  color: var(--gray-600);
  transition: color var(--t-fast);
}
.footer__legal a:hover { color: var(--orange-primary); }

/* ===== DIVIDER ===== */
.divider { height: 1px; background: var(--gray-200); margin: var(--sp-12) 0; }
.divider--dark { background: var(--dark-border); }

/* ===== TAG ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--gray-100);
  color: var(--gray-700);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 600;
}
.tag-orange {
  background: var(--orange-100);
  color: var(--orange-darker);
}

/* ===== ICON BOX ===== */
.icon-box {
  width: 56px; height: 56px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.icon-box-orange { background: rgba(247,148,29,0.12); color: var(--orange-primary); }
.icon-box-success { background: rgba(16,185,129,0.1); color: var(--success); }
.icon-box-dark { background: var(--gray-100); color: var(--gray-700); }

/* ===== HIGHLIGHT BOX ===== */
.highlight-box {
  background: var(--orange-50);
  border: 2px solid var(--orange-200);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.highlight-box--dark {
  background: var(--dark-card);
  border-color: var(--dark-border);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  section { padding: var(--sp-16) 0; }
  .container { padding: 0 var(--sp-5); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Burger button visible, desktop social hidden */
  .navbar__toggle { display: flex; }
  .navbar__social { display: none; }

  /* Nav dropdown */
  .navbar__nav {
    display: none;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    padding: 0 0 var(--sp-6);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 998;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .navbar__nav.open { display: flex; }
  .navbar__nav a {
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--gray-100);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-700);
  }
  .navbar__nav a:hover, .navbar__nav a.active { color: var(--orange-primary); background: var(--orange-50); }

  /* Social links at bottom of burger menu */
  .navbar__nav-social {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6) 0;
    margin-top: var(--sp-2);
    border-top: 1px solid var(--gray-100);
  }
  .navbar__nav-social .navbar__social-link { width: 42px; height: 42px; font-size: 1.15rem; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal  { justify-content: center; }

  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
  .accordion__content { padding-left: var(--sp-8); }

  /* Tighten toggle button on narrow phones */
  .navbar__toggle { padding: var(--sp-1); }

  .modal-overlay { padding: 0; align-items: flex-end; overflow: hidden; }
  .modal-box {
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    max-height: 92vh;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .modal-header { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .modal-body   { padding: var(--sp-5); overflow-x: hidden; }
}

/* ============================================================
   BLOG STYLES
   ============================================================ */

/* Breadcrumb */
.blog-breadcrumb{font-size:.85rem;color:var(--gray-500);margin-bottom:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.blog-breadcrumb a{color:var(--orange-primary)}
.blog-breadcrumb a:hover{text-decoration:underline}
.blog-breadcrumb__sep{color:var(--gray-300)}

/* Category badge */
.blog-cat-badge{display:inline-block;background:var(--orange-100);color:var(--orange-darker);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .85rem;border-radius:var(--r-full);margin-bottom:var(--sp-4)}
.blog-cat-badge--biznes{background:#e0f2fe;color:#0369a1}
.blog-cat-badge--premium{background:#f0fdf4;color:#166534}

/* Blog hero (main blog index) */
.blog-hero{padding:var(--sp-16) 0 var(--sp-14);background:var(--orange-gradient);position:relative;overflow:hidden;color:var(--white)}
.blog-hero::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='132'%3E%3Cpolygon points='39,0 77,22 77,66 39,88 1,66 1,22' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.18)' stroke-width='1.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='132'%3E%3Cpolygon points='39,0 77,22 77,66 39,88 1,66 1,22' fill='rgba(255,255,255,0.04)' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3C/svg%3E");background-size:78px 132px,78px 132px;background-position:0 0,39px 66px;pointer-events:none}
.blog-hero .section-label{color:rgba(255,255,255,.9)}
.blog-hero h1{color:var(--white);font-size:clamp(2rem,5vw,3rem);position:relative}
.blog-hero h1 span{color:var(--orange-100)}
.blog-hero p{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:60ch;margin-top:var(--sp-4);position:relative;line-height:1.7}

/* Category section header (blog index) */
.blog-cat-section{padding:var(--sp-12) 0 var(--sp-8);border-bottom:2px solid var(--gray-100)}
.blog-cat-section:last-child{border-bottom:none;padding-bottom:var(--sp-16)}
.blog-cat-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-8);flex-wrap:wrap;gap:var(--sp-4)}
.blog-cat-section__title{font-size:1.5rem;font-weight:900;color:var(--gray-900)}
.blog-cat-section__title span{color:var(--orange-primary)}
.blog-cat-section__sub{font-size:.9rem;color:var(--gray-500);margin-top:var(--sp-1)}
.blog-cat-section__all{font-size:.875rem;font-weight:600;color:var(--orange-primary);white-space:nowrap}
.blog-cat-section__all:hover{text-decoration:underline}

/* Blog card */
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-2xl);overflow:hidden;transition:all var(--t-normal);box-shadow:var(--shadow-sm)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--gray-300)}
.blog-card__thumb{aspect-ratio:16/9;position:relative;overflow:hidden;flex-shrink:0}
.blog-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.blog-card:hover .blog-card__thumb img{transform:scale(1.04)}
.blog-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);transition:background var(--t-fast)}
.blog-card__play-btn{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:#f00;font-size:1.5rem;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform var(--t-fast)}
.blog-card:hover .blog-card__play-btn{transform:scale(1.1)}
.blog-card__body{padding:var(--sp-5) var(--sp-6);flex:1;display:flex;flex-direction:column}
.blog-card__cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-primary);margin-bottom:var(--sp-2)}
.blog-card__title{font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:var(--sp-3);line-height:1.4}
.blog-card__excerpt{font-size:.875rem;color:var(--gray-500);line-height:1.6;flex:1;margin-bottom:var(--sp-4)}
.blog-card__meta{font-size:.78rem;color:var(--gray-400);display:flex;gap:var(--sp-3)}

/* Category index header */
.cat-hdr{padding:var(--sp-12) 0 var(--sp-10);background:var(--gray-50);border-bottom:1px solid var(--gray-200)}
.cat-hdr h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:var(--sp-3)}
.cat-hdr p{font-size:1.05rem;color:var(--gray-600);max-width:65ch;line-height:1.7}
.cat-hdr__count{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--orange-100);color:var(--orange-darker);font-size:.8rem;font-weight:700;padding:.3rem .9rem;border-radius:var(--r-full);margin-top:var(--sp-4)}

/* Article header */
.article-hdr{padding:var(--sp-12) 0 var(--sp-10);background:linear-gradient(180deg,var(--gray-50) 0%,var(--white) 100%);border-bottom:1px solid var(--gray-200)}
.article-hdr h1{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:var(--sp-3);line-height:1.2}
.article-meta{font-size:.875rem;color:var(--gray-500);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-3)}
.article-meta__dot{width:4px;height:4px;border-radius:50%;background:var(--gray-300)}

/* Article main */
.article-main{padding:var(--sp-10) 0 var(--sp-16)}

/* Auto-generated notice */
.article-notice{display:flex;gap:var(--sp-4);align-items:flex-start;background:#fffbf5;border:1.5px solid var(--orange-200);border-left:4px solid var(--orange-primary);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-8)}
.article-notice__icon{font-size:1.6rem;flex-shrink:0;margin-top:2px}
.article-notice__text{font-size:.88rem;color:var(--gray-700);line-height:1.65}
.article-notice__text strong{color:var(--orange-darker);display:block;margin-bottom:var(--sp-2);font-size:.95rem}
.article-notice__text a{color:var(--orange-primary);font-weight:600;text-decoration:underline}

/* YouTube embed */
.article-yt{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--r-xl);margin-bottom:var(--sp-10);box-shadow:var(--shadow-lg)}
.article-yt iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

/* Article prose */
.article-body{color:var(--gray-700);font-size:1.05rem;line-height:1.8;margin-bottom:var(--sp-10)}
.article-body h2{font-size:clamp(1.2rem,2vw,1.5rem);color:var(--gray-900);font-weight:800;margin:var(--sp-8) 0 var(--sp-4);padding-bottom:var(--sp-3);border-bottom:2px solid var(--orange-100)}
.article-body h3{font-size:1.15rem;color:var(--gray-800);font-weight:700;margin:var(--sp-6) 0 var(--sp-3)}
.article-body p{margin-bottom:var(--sp-5)}
.article-body ul,.article-body ol{margin:0 0 var(--sp-5) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.article-body li{list-style:disc;color:var(--gray-700)}
.article-body ol li{list-style:decimal}
.article-body strong{color:var(--gray-900);font-weight:700}
.article-body code{background:var(--gray-100);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:.9em;color:var(--orange-darker)}
.article-body .note{background:var(--orange-50);border-left:4px solid var(--orange-primary);padding:var(--sp-4) var(--sp-5);border-radius:0 var(--r-md) var(--r-md) 0;margin:var(--sp-6) 0;font-size:.95rem;color:var(--gray-800)}
.article-body .note strong{color:var(--orange-darker)}

/* Transcript download */
.article-dl{display:flex;align-items:flex-start;gap:var(--sp-5);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-xl);padding:var(--sp-6);margin:var(--sp-10) 0}
.article-dl__icon{font-size:2.2rem;flex-shrink:0}
.article-dl strong{display:block;font-size:1rem;color:var(--gray-900);margin-bottom:var(--sp-1)}
.article-dl p{font-size:.875rem;color:var(--gray-500);margin-bottom:var(--sp-4)}

/* Article navigation */
.article-nav{display:flex;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-8);border-top:1px solid var(--gray-200);margin-top:var(--sp-8)}
.article-nav__item{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);border:1px solid var(--gray-200);border-radius:var(--r-lg);max-width:47%;text-decoration:none;transition:all var(--t-fast)}
.article-nav__item:hover{border-color:var(--orange-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.article-nav__dir{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-400)}
.article-nav__title{font-size:.875rem;font-weight:600;color:var(--gray-800);line-height:1.4}
.article-nav__item--next{margin-left:auto;text-align:right}
.article-nav__placeholder{flex:1}

/* Blog grid responsive */
@media(max-width:768px){
  .article-notice{flex-direction:column;gap:var(--sp-3)}
  .article-dl{flex-direction:column;gap:var(--sp-3)}
  .article-nav{flex-direction:column}
  .article-nav__item{max-width:100%}
  .article-nav__item--next{margin-left:0;text-align:left}
  .blog-cat-section__head{flex-direction:column;align-items:flex-start}
}

/* ── Navbar login button ──────────────────────────────────────────────────── */
.navbar__login-btn{background:var(--orange-primary);color:var(--white)!important;padding:6px 18px!important;border-radius:8px;font-weight:700;font-size:.85rem;transition:background var(--t-fast)}
.navbar__login-btn:hover{background:var(--orange-dark,#c2590a)!important;color:var(--white)!important}
@media(max-width:768px){
  .navbar__login-btn{background:transparent!important;color:var(--orange-primary)!important;padding:var(--sp-4) var(--sp-6)!important;border-radius:0;font-size:1rem!important;font-weight:600!important}
}

/* ── Konto / Login ───────────────────────────────────────────────────────── */
.konto-wrap{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;background:var(--gray-50);padding:var(--sp-8) var(--sp-4)}
.konto-card{background:var(--white);border-radius:16px;box-shadow:0 4px 32px rgba(0,0,0,.1);padding:var(--sp-10) var(--sp-8);width:100%;max-width:440px}
.konto-card__logo{text-align:center;margin-bottom:var(--sp-6);font-size:1.5rem;font-weight:700;text-decoration:none;color:var(--gray-900)}
.konto-card h1{font-size:1.5rem;text-align:center;margin-bottom:var(--sp-2)}
.konto-card__sub{text-align:center;color:var(--gray-400);margin-bottom:var(--sp-7);font-size:.9rem}
.form-field{margin-bottom:var(--sp-5)}
.form-field label{display:block;font-size:.875rem;font-weight:600;color:var(--gray-700);margin-bottom:var(--sp-2)}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--gray-200);border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .2s;box-sizing:border-box;background:var(--white)}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--orange-primary)}
.form-field__hint{font-size:.78rem;color:var(--gray-400);margin-top:var(--sp-2)}
.form-field__hint a{color:var(--orange-primary)}
.form-required{color:#e53e3e}
.form-notice{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:8px;margin-bottom:var(--sp-5);font-size:.9rem;line-height:1.5}
.form-notice--ok{background:#f0fdf4;border:1px solid #86efac;color:#15803d}
.form-notice--error{background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c}
.form-notice--warn{background:#fffbeb;border:1px solid #fcd34d;color:#92400e}

/* Konto dashboard */
.konto-hdr{background:var(--white);border-bottom:1px solid var(--gray-100);padding:var(--sp-8) 0}
.konto-hdr__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.konto-hdr__greeting{font-size:.875rem;color:var(--gray-400);margin-bottom:var(--sp-1)}
.konto-hdr__greeting strong{color:var(--gray-800)}
.konto-hdr h1{font-size:1.8rem;margin-bottom:var(--sp-2)}
.konto-hdr__exp{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.875rem;color:var(--gray-500);background:var(--gray-50);padding:4px 12px;border-radius:var(--r-full)}
.konto-hdr__exp--warn{background:#fffbeb;color:#92400e}
.konto-course-card{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--r-xl);padding:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-4)}
.konto-course-card__icon{font-size:2rem;color:var(--orange-primary)}
.konto-course-card__name{font-size:1.05rem;font-weight:700;color:var(--gray-900);margin-bottom:var(--sp-2)}
.konto-course-card__desc{font-size:.875rem;color:var(--gray-500);line-height:1.6;flex:1;margin-bottom:var(--sp-2)}
.konto-course-card__exp{font-size:.8rem;color:var(--gray-400);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.konto-course-card__exp--warn{color:#92400e}
.konto-empty{text-align:center;padding:var(--sp-16) var(--sp-4)}
.konto-empty__icon{font-size:3rem;color:var(--gray-200);display:block;margin-bottom:var(--sp-4)}
.konto-empty h2{font-size:1.4rem;color:var(--gray-600);margin-bottom:var(--sp-3)}
.konto-empty p{color:var(--gray-400);max-width:40ch;margin:0 auto}
/* Course material rows */
.konto-material-row{display:flex;align-items:center;gap:var(--sp-4);background:var(--white);border:1.5px solid var(--gray-100);border-radius:12px;padding:var(--sp-4) var(--sp-5);text-decoration:none;color:inherit;transition:all var(--t-fast)}
.konto-material-row:hover{border-color:var(--orange-primary);box-shadow:0 4px 16px rgba(232,119,34,.12);transform:translateX(3px)}
.konto-material-row--pdf:hover{border-color:#f59e0b;box-shadow:0 4px 16px rgba(245,158,11,.12)}
.konto-material-row__num{width:28px;height:28px;border-radius:8px;background:var(--orange-50);color:var(--orange-darker);font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.konto-material-row__icon{width:28px;height:28px;border-radius:8px;background:#fef3c7;color:#92400e;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.konto-material-row__body{flex:1;min-width:0}
.konto-material-row__title{font-size:.95rem;font-weight:600;color:var(--gray-800)}
.konto-material-row__desc{font-size:.8rem;color:var(--gray-400);margin-top:2px}
.konto-material-row__arrow{color:var(--gray-300);font-size:.8rem}
.konto-material-row__dl{font-size:.78rem;font-weight:700;color:#92400e;display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;white-space:nowrap}

.konto-help{display:flex;align-items:center;gap:var(--sp-4);background:var(--orange-50);border:1px solid var(--orange-100);border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-6);margin-top:var(--sp-12);font-size:.9rem;color:var(--gray-700)}
.konto-help i{font-size:1.3rem;color:var(--orange-primary);flex-shrink:0}

/* ── Admin panel ─────────────────────────────────────────────────────────── */
.admin-layout{min-height:100vh;background:var(--gray-50,#f9fafb)}
.admin-topbar{background:var(--white);border-bottom:1.5px solid var(--gray-100);padding:0 var(--sp-8);display:flex;align-items:center;justify-content:space-between;height:60px;position:sticky;top:0;z-index:100}
.admin-topbar__left{display:flex;align-items:center;gap:var(--sp-4)}
.admin-topbar__logo{font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--gray-900)}
.admin-topbar__logo span{color:var(--orange-primary)}
.admin-topbar__section{font-size:.8rem;color:var(--gray-400);padding-left:var(--sp-4);border-left:1px solid var(--gray-200)}
.admin-topbar__right{display:flex;align-items:center;gap:var(--sp-4)}
.admin-link{font-size:.875rem;color:var(--gray-500);text-decoration:none;display:flex;align-items:center;gap:var(--sp-2)}
.admin-link:hover{color:var(--orange-primary)}
.admin-content{padding:var(--sp-8) var(--sp-8) var(--sp-16)}
.admin-page-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.admin-page-hdr__title{font-size:1.5rem;font-weight:800;color:var(--gray-900);display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.admin-page-hdr__title i{color:var(--orange-primary)}
.admin-stats{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.admin-stat{font-size:.8rem;color:var(--gray-500)}
.admin-stat strong{font-weight:700;color:var(--gray-800)}
.admin-stat--green strong{color:#16a34a}
.admin-stat--red strong{color:#dc2626}
.admin-filters{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.admin-search{display:flex;align-items:center;gap:var(--sp-3);background:var(--white);border:1.5px solid var(--gray-200);border-radius:8px;padding:0 var(--sp-4);flex:1;min-width:200px}
.admin-search input{border:none;outline:none;padding:var(--sp-3) 0;font-size:.9rem;flex:1;background:transparent}
.admin-search i{color:var(--gray-400)}
.admin-filter-tabs{display:flex;gap:var(--sp-2)}
.admin-filter-tab{font-size:.8rem;padding:5px 12px;border-radius:6px;text-decoration:none;color:var(--gray-500);background:var(--white);border:1px solid var(--gray-200)}
.admin-filter-tab:hover,.admin-filter-tab.active{background:var(--orange-primary);color:var(--white);border-color:var(--orange-primary)}
.admin-table-wrap{background:var(--white);border:1px solid var(--gray-100);border-radius:12px;overflow:hidden}
.admin-table{width:100%;border-collapse:collapse;font-size:.875rem}
.admin-table th{text-align:left;padding:var(--sp-3) var(--sp-5);border-bottom:1.5px solid var(--gray-100);font-weight:600;color:var(--gray-500);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;background:var(--gray-50)}
.admin-table td{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--gray-50);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--orange-50)}
.admin-user-cell{display:flex;align-items:center;gap:var(--sp-3)}
.admin-user-avatar{width:34px;height:34px;border-radius:50%;background:var(--orange-100);color:var(--orange-darker);font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.admin-user-name{font-weight:600;color:var(--gray-800);font-size:.875rem}
.admin-user-email{font-size:.78rem;color:var(--gray-400)}
.admin-cell--warn{color:#dc2626;font-weight:600}
.admin-actions{display:flex;gap:var(--sp-2)}
.admin-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;text-decoration:none;color:var(--gray-400);background:var(--gray-50);border:1px solid var(--gray-100);font-size:.8rem;transition:all .15s}
.admin-btn:hover{color:var(--gray-700);background:var(--gray-100)}
.admin-btn--danger:hover{color:#dc2626;background:#fef2f2;border-color:#fca5a5}
.admin-card{background:var(--white);border:1px solid var(--gray-100);border-radius:12px;padding:var(--sp-8)}
.admin-form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.admin-form-actions{display:flex;justify-content:flex-end;gap:var(--sp-3);padding-top:var(--sp-6);border-top:1px solid var(--gray-100);margin-top:var(--sp-6)}
.admin-checkboxes{display:flex;flex-direction:column;border:1.5px solid var(--gray-200);border-radius:8px;background:var(--gray-50);overflow:hidden}
.admin-checkbox{display:flex;align-items:center;gap:var(--sp-3);font-size:.9rem;cursor:pointer;color:var(--gray-700)}
.admin-checkbox input{width:16px;height:16px;accent-color:var(--orange-primary)}
.admin-course-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--gray-100)}
.admin-course-row:last-child{border-bottom:none}
.admin-course-row--expired{background:#fef9f0}
.admin-course-exp-wrap{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.admin-course-exp-label{font-size:.75rem;color:var(--gray-400);white-space:nowrap}
.admin-course-exp{width:145px;padding:4px 8px;border:1px solid var(--gray-200);border-radius:6px;font-size:.8rem;font-family:inherit;background:var(--white)}
.admin-course-exp--expired{border-color:#fca5a5;background:#fef2f2}
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:.72rem;font-weight:700}
.badge--green{background:#dcfce7;color:#166534}
.badge--orange{background:#fef3c7;color:#92400e}
.badge--gray{background:var(--gray-100);color:var(--gray-500)}
.badge--blue{background:#dbeafe;color:#1e40af}
@media(max-width:768px){
  .admin-content{padding:var(--sp-5) var(--sp-4)}
  .admin-form-row{grid-template-columns:1fr}
  .admin-filters{flex-direction:column;align-items:stretch}
  .konto-hdr__inner{flex-direction:column;align-items:flex-start}
}