/* TeoriKraft shared design v3 */
:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --border:#e5e7eb;
  --green:#16a34a;
  --amber:#f59e0b;
  --red:#dc2626;
  --blue-soft:#eef4ff;
  --shadow:0 18px 40px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.tk-topbar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;box-shadow:0 4px 18px rgba(15,23,42,.04)}
.tk-nav{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.tk-logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:900;color:var(--primary);white-space:nowrap}
.tk-logo-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;box-shadow:0 10px 22px rgba(37,99,235,.24)}
.tk-navlinks{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px}
.tk-navlinks a,.tk-account-pill{padding:8px 10px;border-radius:10px;color:#374151;font-weight:800}
.tk-navlinks a:hover,.tk-navlinks a.active{background:var(--blue-soft);color:var(--primary)}
.tk-account-pill{background:#f9fafb;border:1px solid var(--border);font-size:13px}
.tk-account-pill.premium{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.tk-account-pill.free{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.tk-wrap{max-width:1120px;margin:0 auto;padding:36px 20px 60px}
.tk-hero{max-width:1120px;margin:0 auto;padding:54px 20px 30px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.tk-hero-card,.tk-card,.tk-panel,.tk-price-card{background:#fff;border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}
.tk-hero-card{padding:36px}
.tk-price-card{padding:28px;position:relative;overflow:hidden}
.tk-price-card:before{content:"";position:absolute;right:-70px;top:-70px;width:180px;height:180px;border-radius:999px;background:#dbeafe}
.tk-badge{display:inline-flex;background:var(--blue-soft);color:var(--primary);border-radius:999px;padding:8px 12px;font-weight:900;font-size:14px;margin-bottom:16px}
h1{margin:0 0 14px;font-size:44px;line-height:1.12}
h2{line-height:1.2}
.tk-lead{margin:0;color:var(--muted);font-size:18px;max-width:760px}
.tk-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.tk-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:14px;font-weight:900;border:1px solid transparent;cursor:pointer;text-decoration:none}
.tk-btn-primary{background:var(--primary);color:white}
.tk-btn-primary:hover{background:var(--primary-dark)}
.tk-btn-light{background:#f9fafb;border-color:var(--border);color:#111827}
.tk-btn-danger{background:var(--red);color:#fff}
.tk-btn-green{background:var(--green);color:#fff}
.tk-price-label{font-weight:900;color:var(--primary);margin-bottom:8px;position:relative}
.tk-price{font-size:44px;font-weight:900;margin:0;position:relative}
.tk-price small{font-size:17px;color:var(--muted);font-weight:700}
.tk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tk-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 30px}
.tk-stat{background:#fff;border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.tk-stat b{display:block;font-size:30px;margin-bottom:4px}
.tk-stat span{color:var(--muted);font-weight:700}
.tk-card{padding:24px}
.tk-card h3{margin:0 0 10px;font-size:20px}
.tk-card p{margin:0;color:var(--muted)}
.tk-section-title{margin:34px 0 16px;font-size:30px}
.tk-list{background:#fff;border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.tk-list h3{margin-top:0}
ul{margin:0;padding-left:22px}
li{margin:10px 0}
.tk-check li::marker{color:var(--green)}
.tk-notice{background:#eff6ff;border:1px solid #bfdbfe;border-radius:22px;padding:18px;color:#1e3a8a;font-weight:800;margin:18px 0}
.tk-warning{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.tk-success{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.tk-form-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:26px;box-shadow:var(--shadow)}
label{display:block;font-weight:900;margin:14px 0 6px}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #d1d5db;border-radius:14px;background:#fff;color:var(--text)}
.tk-status{margin-top:12px;padding:12px 14px;border-radius:14px;background:#f9fafb;border:1px solid var(--border);font-weight:800;color:#374151;white-space:pre-wrap}
.tk-app-layout{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.tk-sidebar{background:#fff;border:1px solid var(--border);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.tk-reader,.tk-main-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:26px;box-shadow:var(--shadow);min-height:260px}
.tk-chip{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:900;background:#eef4ff;color:#1d4ed8}
.tk-chip.premium{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.tk-chip.free{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}
.tk-footer{text-align:center;color:var(--muted);padding:30px 20px 50px;font-size:14px}
.tk-option{width:100%;display:flex;align-items:flex-start;gap:12px;margin:10px 0;padding:14px;border:1px solid var(--border);border-radius:16px;background:#fff;cursor:pointer;text-align:left}
.tk-option:hover{border-color:#bfdbfe;background:#f8fbff}
.tk-letter{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:999px;background:#eef4ff;color:#1d4ed8;font-weight:900;flex:0 0 auto}
.tk-option.correct{border-color:#86efac;background:#f0fdf4}
.tk-option.wrong{border-color:#fecaca;background:#fef2f2}
.tk-explanation{display:none;margin-top:14px;padding:14px;border-radius:16px;background:#eff6ff;color:#1e3a8a;font-weight:800}
.tk-muted{color:var(--muted)}
.tk-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.tk-controls .wide{grid-column:span 3}
.tk-progress{font-weight:900;color:#374151;margin:12px 0}
.tk-chapter-btn{width:100%;text-align:left;margin:8px 0;padding:14px;border-radius:16px;border:1px solid var(--border);background:#fff;cursor:pointer}
.tk-chapter-btn:hover,.tk-chapter-btn.active{border-color:#bfdbfe;background:#f8fbff}
.tk-chapter-btn h3{margin:8px 0 4px;font-size:16px}
.tk-chapter-btn p{margin:0;color:var(--muted);font-size:14px}
.tk-content{user-select:none;-webkit-user-select:none}
.tk-content h2,.tk-content h3{margin-top:24px}
.tk-content p{color:#374151}
.tk-content li{color:#374151}
.tk-image-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.tk-theory-image{margin:0;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#f9fafb}
.tk-theory-image img{width:100%;display:block}
.tk-caption{padding:10px;color:var(--muted);font-size:14px}
.tk-review-item{padding:16px;border:1px solid var(--border);border-radius:18px;margin:12px 0;background:#fff}
.tk-review-item.correct{border-color:#bbf7d0;background:#f0fdf4}
.tk-review-item.wrong{border-color:#fecaca;background:#fef2f2}
.tk-table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(15,23,42,.05)}
.tk-table th,.tk-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
@media(max-width:900px){
  .tk-hero,.tk-app-layout,.tk-grid-2{grid-template-columns:1fr}
  .tk-stats,.tk-grid,.tk-chapters{grid-template-columns:repeat(2,1fr)}
  .tk-controls{grid-template-columns:1fr}
  .tk-controls .wide{grid-column:auto}
  h1{font-size:34px}
}
@media(max-width:620px){
  .tk-nav{align-items:flex-start;flex-direction:column}
  .tk-navlinks{width:100%}
  .tk-stats,.tk-grid,.tk-image-grid{grid-template-columns:1fr}
  .tk-hero-card,.tk-price-card,.tk-reader,.tk-main-card{padding:22px}
}
/* Legal footer */
.tk-footer {
  margin-top: 40px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
}

.tk-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}

.tk-footer-inner b {
  display: block;
  color: #111827;
  font-size: 16px;
}

.tk-footer-inner span {
  display: block;
  margin-top: 2px;
}

.tk-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tk-footer-links a {
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
}

.tk-footer-links a:hover {
  text-decoration: underline;
}

.tk-page h1 {
  font-size: 40px;
  margin: 10px 0 14px;
}

.tk-page h2 {
  margin-top: 28px;
  font-size: 24px;
}

.tk-page p,
.tk-page li {
  color: #374151;
}

.tk-muted {
  color: #6b7280 !important;
}





/* Auto header year badge */
.tk-header-year-auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20);
  margin-left: 12px;
}

@media (max-width: 720px) {
  .tk-header-year-auto {
    padding: 7px 12px;
    font-size: 13px;
    margin-left: 6px;
  }
}


/* TeoriKraft global mobile responsive fix */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

.tk-wrap,
.tk-nav,
.tk-footer-inner,
.tk-hero {
  width: 100%;
}

.tk-card,
.tk-hero-card,
.tk-price-card,
.tk-reader,
.tk-sidebar,
.tk-pay-box,
.tk-theory-highlight {
  max-width: 100%;
}

.tk-actions {
  flex-wrap: wrap;
}

.tk-btn {
  white-space: normal;
  text-align: center;
}

@media (max-width: 900px) {
  .tk-nav {
    align-items: flex-start;
    gap: 12px;
  }

  .tk-navlinks {
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tk-navlinks a,
  .tk-account-pill {
    flex: 0 0 auto;
  }

  .tk-hero,
  .tk-app-layout,
  .tk-grid,
  .tk-stats {
    grid-template-columns: 1fr !important;
  }

  .tk-hero {
    gap: 18px;
  }

  .tk-price-card {
    order: 2;
  }

  .tk-hero-card {
    order: 1;
  }

  .tk-sidebar {
    position: static !important;
    width: 100%;
  }

  .tk-reader {
    width: 100%;
  }

  .tk-chapter-btn {
    width: 100%;
  }

  .tk-image-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .tk-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .tk-nav {
    padding: 12px 14px;
  }

  .tk-logo {
    font-size: 18px;
  }

  .tk-logo-mark {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .tk-header-year-auto {
    margin-left: 6px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .tk-navlinks {
    gap: 7px;
  }

  .tk-navlinks a,
  .tk-account-pill {
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 999px;
  }

  .tk-hero {
    padding: 16px 12px !important;
  }

  .tk-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tk-hero-card,
  .tk-price-card,
  .tk-card,
  .tk-sidebar,
  .tk-reader {
    border-radius: 18px;
    padding: 18px !important;
  }

  .tk-hero-card h1,
  h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em;
  }

  .tk-section-title,
  h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .tk-lead,
  .tk-card p,
  .tk-reader,
  .tk-content {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .tk-badge-row {
    gap: 8px !important;
    align-items: center !important;
  }

  .tk-badge,
  .tk-lang-badge,
  .tk-theory-tag {
    font-size: 13px !important;
    padding: 8px 10px !important;
    line-height: 1 !important;
  }

  .tk-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .tk-actions .tk-btn,
  .tk-btn {
    width: 100%;
    justify-content: center;
  }

  .tk-stats {
    gap: 12px;
  }

  .tk-stat {
    padding: 16px !important;
  }

  .tk-price {
    font-size: 34px !important;
  }

  .tk-theory-highlight {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .tk-theory-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 22px !important;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  #paypal-button-container {
    max-width: 100%;
    overflow: hidden;
  }

  .tk-footer-inner {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
  }

  .tk-footer-links {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .tk-hero-card h1,
  h1 {
    font-size: 28px !important;
  }

  .tk-nav {
    padding-left: 10px;
    padding-right: 10px;
  }

  .tk-hero-card,
  .tk-price-card,
  .tk-card,
  .tk-sidebar,
  .tk-reader {
    padding: 15px !important;
  }

  .tk-navlinks a,
  .tk-account-pill {
    font-size: 12px;
    padding: 7px 9px;
  }
}


/* TeoriKraft mobile header fix */
@media (max-width: 720px) {
  .tk-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
  }

  .tk-nav {
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    width: 100% !important;
  }

  .tk-logo {
    grid-column: 1 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .tk-logo span:last-child {
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  .tk-logo-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 12px !important;
  }

  .tk-header-year-auto {
    grid-column: 2 !important;
    margin-left: 0 !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .tk-navlinks {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 0 2px !important;
    margin-top: 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .tk-navlinks::-webkit-scrollbar {
    display: none !important;
  }

  .tk-navlinks a,
  .tk-account-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 380px) {
  .tk-logo span:last-child {
    font-size: 15px !important;
  }

  .tk-logo-mark {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
  }

  .tk-header-year-auto {
    padding: 6px 9px !important;
    font-size: 11px !important;
  }

  .tk-navlinks a,
  .tk-account-pill {
    font-size: 12px !important;
    padding: 7px 9px !important;
  }
}

/* TeoriKraft content protection */
body,
.tk-card,
.tk-hero-card,
.tk-reader,
.tk-content,
.tk-question,
.tk-question-text,
.tk-answer,
.tk-answer-btn,
.tk-explanation,
.tk-feedback,
.tk-result,
.tk-chapter-btn,
.tk-theory-image,
.tk-notice {
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

input,
textarea,
select,
button,
[contenteditable="true"] {
  -webkit-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  -webkit-touch-callout: default !important;
}

img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

@media print {
  body {
    display: none !important;
  }
}