/* KodeCraft Theme — Styles */

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-primary:   #4f46e5;
  --color-secondary: #7c3aed;
  --color-accent:    #f59e0b;
  --color-text:      #374151;
  --color-bg:        #ffffff;
  --font-sans:       'Inter', sans-serif;
  --font-heading:    'Poppins', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; transition: color .2s; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: #111827; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.kc-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.kc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.kc-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.kc-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
@media (max-width: 1024px) { .kc-grid-4,.kc-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px)  { .kc-grid-2,.kc-grid-3,.kc-grid-4 { grid-template-columns: 1fr; } }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.kc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.75rem; border-radius: .75rem; font-weight: 600;
  font-size: .95rem; transition: all .2s; cursor: pointer; border: none; text-decoration: none;
}
.kc-btn-primary { background: var(--color-primary); color: #fff; }
.kc-btn-primary:hover { opacity: .88; color: #fff; }
.kc-btn-accent  { background: var(--color-accent); color: #111; font-weight: 700; }
.kc-btn-accent:hover { opacity: .9; }
.kc-btn-outline { border: 2px solid currentColor; color: #374151; background: transparent; }
.kc-btn-outline:hover { background: #f9fafb; }
.kc-btn-ghost   { border: 1px solid rgba(255,255,255,.3); color: #fff; background: transparent; }
.kc-btn-ghost:hover { background: rgba(255,255,255,.1); }
.kc-btn-full    { width: 100%; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.kc-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid #f3f4f6; overflow: hidden; transition: box-shadow .2s; }
.kc-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* ─── Sections ───────────────────────────────────────────────────────────── */
.kc-section    { padding: 5rem 0; }
.kc-section-sm { padding: 3rem 0; }
.kc-section-lg { padding: 7rem 0; }
.kc-section-header { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.kc-section-label  { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--color-primary); display: block; margin-bottom: .5rem; }
.kc-section-title  { font-size: 2.5rem; font-family: var(--font-heading); }
.kc-section-sub    { color: #6b7280; margin-top: 1rem; font-size: 1.05rem; }
@media (max-width: 768px) { .kc-section-title { font-size: 1.9rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

#masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.09);
  transition: box-shadow .3s;
}
#masthead.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.13); }

/* Admin bar offset */
.admin-bar #masthead { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #masthead { top: 46px; } }

.kc-topbar { background: var(--color-primary); color: #fff; text-align: center; font-size: .85rem; padding: .5rem 1rem; }

.kc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}

/* Logo */
.kc-logo a   { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.kc-logo img { height: 46px; width: auto; }

/* Desktop nav */
.kc-nav ul { display: flex; align-items: center; gap: 2rem; list-style: none; }
.kc-nav a  { font-weight: 500; color: #374151; font-size: .95rem; white-space: nowrap; }
.kc-nav a:hover, .kc-nav .current-menu-item > a { color: var(--color-primary); }
.kc-nav .menu-item-has-children { position: relative; }
.kc-nav .sub-menu { position: absolute; top: calc(100% + .75rem); left: 0; background: #fff; border-radius: .75rem; box-shadow: 0 12px 40px rgba(0,0,0,.12); min-width: 200px; padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: all .2s; list-style: none; z-index: 99; }
.kc-nav .menu-item-has-children:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.kc-nav .sub-menu a { display: block; padding: .6rem 1rem; border-radius: .5rem; font-size: .9rem; }
.kc-nav .sub-menu a:hover { background: #f5f3ff; color: var(--color-primary); }

/* Auth buttons — the key area */
.kc-header-auth {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

.kc-header-username {
  font-size: .85rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* Small header buttons */
.kc-hbtn {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border-radius: .55rem;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
  border: none;
}
.kc-hbtn--primary { background: var(--color-primary); color: #fff !important; }
.kc-hbtn--primary:hover { opacity: .88; }
.kc-hbtn--ghost   { background: transparent; color: #374151 !important; border: 1.5px solid #d1d5db; }
.kc-hbtn--ghost:hover { background: #f3f4f6; border-color: #9ca3af; }
.kc-hbtn--outline { background: transparent; color: #374151 !important; border: 1.5px solid #d1d5db; }
.kc-hbtn--outline:hover { background: #f3f4f6; }

/* Mobile toggle */
.kc-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: .4rem; flex-shrink: 0; }
.kc-mobile-toggle span { display: block; width: 22px; height: 2px; background: #374151; margin: 5px 0; transition: all .3s; border-radius: 2px; }

/* Mobile menu */
.kc-mobile-menu { display: none; border-top: 1px solid #f3f4f6; }
.kc-mobile-menu ul { list-style: none; padding: .5rem 0; }
.kc-mobile-menu li a { display: block; padding: .7rem 0; font-weight: 500; color: #374151; border-bottom: 1px solid #f9fafb; font-size: .95rem; }
.kc-mobile-menu .sub-menu { padding-left: 1rem; list-style: none; }
.kc-mobile-menu.open { display: block; }

.kc-mobile-auth { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0 1rem; border-top: 1px solid #f3f4f6; margin-top: .25rem; }
.kc-mobile-auth a { padding: .5rem 1rem; border-radius: .5rem; background: #f3f4f6; color: #374151; font-size: .875rem; font-weight: 600; }
.kc-mobile-auth a:hover { background: var(--color-primary); color: #fff; }

/* Hide desktop nav on mobile, show toggle */
@media (max-width: 1024px) {
  .kc-nav { display: none; }
  .kc-mobile-toggle { display: block; }
  .kc-header-username { display: none; }
}
@media (max-width: 640px) {
  .kc-hbtn--ghost { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-hero { padding: 6rem 0; position: relative; overflow: hidden; color: #fff; }
.kc-hero--gradient { background: linear-gradient(135deg,#1e1b4b 0%,#4f46e5 50%,#7c3aed 100%); }
.kc-hero--image { background: #111 center/cover no-repeat; }
.kc-hero--image::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.6); }
.kc-hero__inner { position: relative; z-index: 2; }
.kc-hero__grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 768px) { .kc-hero { padding: 4rem 0; } .kc-hero__grid { grid-template-columns: 1fr; } }

.kc-hero__badge { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:.85rem; font-weight:500; margin-bottom:1.25rem; }
.kc-hero__title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; color: #fff; margin-bottom: 1.25rem; }
.kc-hero__sub   { font-size: 1.15rem; color: rgba(255,255,255,.8); max-width: 520px; margin-bottom: 2rem; }
.kc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
.kc-hero__stats { display: flex; gap: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.15); }
.kc-hero__stats-num   { font-size: 1.75rem; font-weight: 800; color: var(--color-accent); }
.kc-hero__stats-label { font-size: .8rem; color: rgba(255,255,255,.6); }
.kc-hero__image { border-radius: 1.25rem; box-shadow: 0 32px 80px rgba(0,0,0,.3); width: 100%; }
@media (max-width: 768px) { .kc-hero__title { font-size: 2.2rem; } .kc-hero__image { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURES / CARDS / POSTS
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-feature-card { padding: 2rem; background: #fff; border-radius: 1rem; border: 1px solid #f3f4f6; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; }
.kc-feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
.kc-feature-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.kc-feature-title { font-size: 1.1rem; font-weight: 700; font-family: var(--font-heading); margin-bottom: .5rem; }
.kc-feature-desc  { color: #6b7280; font-size: .9rem; line-height: 1.6; }

.kc-post-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07); border: 1px solid #f3f4f6; transition: box-shadow .2s; }
.kc-post-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.11); }
.kc-post-card__thumb { overflow: hidden; aspect-ratio: 16/9; }
.kc-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.kc-post-card:hover .kc-post-card__thumb img { transform: scale(1.05); }
.kc-post-card__body    { padding: 1.5rem; }
.kc-post-card__meta    { font-size: .8rem; color: #9ca3af; margin-bottom: .75rem; }
.kc-post-card__title   { font-size: 1.1rem; font-weight: 700; font-family: var(--font-heading); line-height: 1.35; margin-bottom: .6rem; }
.kc-post-card__title a:hover { color: var(--color-primary); }
.kc-post-card__excerpt { color: #6b7280; font-size: .9rem; line-height: 1.6; }
.kc-post-card__link    { display: inline-flex; align-items: center; gap: .25rem; margin-top: 1rem; font-size: .9rem; font-weight: 600; color: var(--color-primary); }
.kc-post-card__link:hover { gap: .5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-testimonial { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 2rem; color: #fff; transition: background .2s; }
.kc-testimonial:hover { background: rgba(255,255,255,.12); }
.kc-testimonial__stars  { display: flex; gap: .25rem; margin-bottom: 1rem; color: var(--color-accent); font-size: 1.1rem; }
.kc-testimonial__text   { color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; }
.kc-testimonial__author { display: flex; align-items: center; gap: .75rem; }
.kc-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.kc-testimonial__name   { font-weight: 700; font-size: .95rem; }
.kc-testimonial__role   { font-size: .8rem; color: rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-footer { color: #9ca3af; }
.kc-footer-widgets { padding: 4rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.kc-footer-bottom  { padding: 1.5rem 0; }
.kc-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.kc-footer-socials { display: flex; gap: 1rem; }
.kc-footer-socials a { color: #6b7280; transition: color .2s; }
.kc-footer-socials a:hover { color: #fff; }
.kc-footer-nav ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; }
.kc-footer-nav a  { font-size: .85rem; color: #6b7280; }
.kc-footer-nav a:hover { color: #fff; }
.widget-title { font-size: 1rem; font-weight: 700; font-family: var(--font-heading); color: #fff; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.widget ul    { list-style: none; }
.widget ul li { padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.widget ul li a { color: #9ca3af; font-size: .9rem; }
.widget ul li a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG / ARCHIVE
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-page-header { padding: 3.5rem 0; background: #f9fafb; border-bottom: 1px solid #e5e7eb; margin-bottom: 3rem; }
.kc-page-header h1 { font-size: 2.25rem; }
.kc-blog-layout { display: flex; gap: 2.5rem; }
.kc-blog-main   { flex: 1; min-width: 0; }
.kc-blog-sidebar{ width: 300px; flex-shrink: 0; }
@media (max-width: 1024px) { .kc-blog-layout { flex-direction: column; } .kc-blog-sidebar { width: 100%; } }
.kc-posts-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.75rem; }
.kc-posts-list { display: flex; flex-direction: column; gap: 1.75rem; }
@media (max-width: 768px) { .kc-posts-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-single-hero    { background: #111827; color: #fff; padding: 5rem 0 4rem; }
.kc-single-hero h1 { color: #fff; font-size: 2.5rem; }
.kc-single-meta    { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 1rem; }
.kc-single-thumb   { margin: -3rem auto 2rem; max-width: 900px; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.kc-single-thumb img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.kc-content-wrap { max-width: 840px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.kc-prose { font-size: 1.05rem; line-height: 1.8; color: #374151; }
.kc-prose h2,.kc-prose h3,.kc-prose h4 { margin: 2rem 0 1rem; }
.kc-prose p  { margin-bottom: 1.25rem; }
.kc-prose a  { color: var(--color-primary); text-decoration: underline; }
.kc-prose ul,.kc-prose ol { margin: 1rem 0 1.25rem 1.5rem; }
.kc-prose li { margin-bottom: .4rem; }
.kc-prose blockquote { border-left: 4px solid var(--color-primary); padding: 1rem 1.5rem; background: #f5f3ff; border-radius: 0 .5rem .5rem 0; margin: 1.5rem 0; font-style: italic; color: #4b5563; }
.kc-prose img { border-radius: .75rem; margin: 1.5rem 0; }
.kc-prose pre { background: #1e1b4b; color: #e5e7eb; padding: 1.25rem; border-radius: .75rem; overflow-x: auto; font-size: .9rem; margin: 1.5rem 0; }
.kc-prose code { background: #f3f4f6; padding: .15em .4em; border-radius: .3rem; font-size: .9em; }
.kc-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.kc-tag  { padding: .3rem .85rem; background: #f3f4f6; border-radius: 999px; font-size: .8rem; color: #4b5563; transition: background .2s; }
.kc-tag:hover { background: #ede9fe; color: var(--color-primary); }
.kc-author-box { display: flex; gap: 1.5rem; background: #f9fafb; border-radius: 1rem; padding: 1.75rem; margin-top: 2.5rem; }
.kc-author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kc-author-box__name { font-weight: 700; font-size: 1rem; margin-bottom: .35rem; }
.kc-author-box__bio  { font-size: .9rem; color: #6b7280; }
.kc-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.kc-post-nav a { display: block; padding: 1.25rem; background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; transition: all .2s; }
.kc-post-nav a:hover { border-color: #c4b5fd; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.kc-post-nav__label { font-size: .75rem; color: #9ca3af; margin-bottom: .35rem; }
.kc-post-nav__title { font-weight: 600; font-size: .95rem; color: #111827; }
.kc-post-nav--right { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   404 / PAGINATION / MISC
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-404 { text-align: center; padding: 8rem 1.5rem; }
.kc-404__code { font-size: 8rem; font-weight: 900; color: #ede9fe; font-family: var(--font-heading); }
.kc-404 h1 { font-size: 2rem; margin-bottom: 1rem; }
.kc-404 p  { color: #6b7280; margin-bottom: 2rem; }
.kc-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: .5rem; border: 1px solid #e5e7eb; font-size: .9rem; font-weight: 500; transition: all .2s; }
.page-numbers:hover { background: #f5f3ff; border-color: #c4b5fd; color: var(--color-primary); }
.page-numbers.current { background: var(--color-primary); color: #fff; border-color: transparent; }
.page-numbers.dots { border: none; width: auto; }
#kc-back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; background: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: 0 4px 16px rgba(79,70,229,.35); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 999; }
#kc-back-to-top.visible { opacity: 1; pointer-events: auto; }
#kc-back-to-top:hover { transform: translateY(-3px); }
.alignleft   { float: left; margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1rem auto; }
.wp-caption-text { font-size: .85rem; color: #6b7280; text-align: center; margin-top: .4rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-auth-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: linear-gradient(135deg,#f5f3ff 0%,#ede9fe 100%); }
.kc-auth-card { background: #fff; border-radius: 1.25rem; box-shadow: 0 20px 60px rgba(0,0,0,.1); padding: 2.5rem; width: 100%; max-width: 460px; }
.kc-auth-header { text-align: center; margin-bottom: 2rem; }
.kc-auth-header h1 { font-size: 1.75rem; margin-bottom: .5rem; }
.kc-auth-header p  { color: #6b7280; font-size: .95rem; }
.kc-auth-switch { text-align: center; margin-top: 1.5rem; font-size: .9rem; color: #6b7280; }
.kc-auth-switch a { color: var(--color-primary); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-form { display: flex; flex-direction: column; gap: 1.25rem; }
.kc-form-group { display: flex; flex-direction: column; gap: .4rem; }
.kc-form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .kc-form-row--2 { grid-template-columns: 1fr; } }
.kc-form-group label { font-size: .875rem; font-weight: 600; color: #374151; }
.kc-form-group input[type="text"],
.kc-form-group input[type="email"],
.kc-form-group input[type="password"],
.kc-form-group input[type="url"],
.kc-form-group select,
.kc-form-group textarea {
  width: 100%; padding: .7rem 1rem; border: 1.5px solid #d1d5db; border-radius: .6rem;
  font-size: .95rem; font-family: var(--font-sans); color: #111827; background: #fff;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.kc-form-group input:focus, .kc-form-group select:focus, .kc-form-group textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.kc-form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.25rem; padding-right: 2.5rem; }
.kc-form-hint { font-size: .8rem; color: #9ca3af; }
.kc-required   { color: #ef4444; }
.kc-form-label-row { display: flex; align-items: center; justify-content: space-between; }
.kc-forgot-link { font-size: .8rem; color: var(--color-primary); }
.kc-form-check { flex-direction: row; align-items: center; }
.kc-checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; font-weight: 400; }
.kc-checkbox-label input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--color-primary); }
.kc-input-icon-wrap { position: relative; }
.kc-input-icon-wrap input { padding-right: 3rem; }
.kc-toggle-password { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: .25rem; font-size: 1rem; opacity: .5; transition: opacity .2s; }
.kc-toggle-password:hover { opacity: 1; }
.kc-password-strength { height: 4px; border-radius: 2px; margin-top: .35rem; background: #e5e7eb; overflow: hidden; }
.kc-password-strength::after { content: ''; display: block; height: 100%; width: var(--strength,0%); border-radius: 2px; background: var(--strength-color,#e5e7eb); transition: all .3s; }
.kc-char-count { font-size: .78rem; color: #9ca3af; text-align: right; }
.kc-char-count.warning { color: #f59e0b; }
.kc-char-count.over    { color: #ef4444; }

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.kc-alert { padding: .875rem 1.25rem; border-radius: .6rem; font-size: .9rem; font-weight: 500; border: 1px solid transparent; }
.kc-alert-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.kc-alert-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.kc-alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMIT POST
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-submit-form { display: flex; flex-direction: column; gap: 1.75rem; }
.kc-submit-actions { display: flex; gap: 1rem; padding-top: .5rem; }
.kc-file-upload { position: relative; border: 2px dashed #d1d5db; border-radius: .75rem; padding: 2rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; overflow: hidden; }
.kc-file-upload:hover, .kc-file-upload.dragover { border-color: var(--color-primary); background: #f5f3ff; }
.kc-file-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.kc-file-upload__icon { font-size: 2rem; display: block; margin-bottom: .5rem; }
.kc-file-upload__text { font-weight: 600; color: #374151; display: block; }
.kc-file-upload__hint { font-size: .8rem; color: #9ca3af; display: block; margin-top: .25rem; }
.kc-file-upload__preview { width: 100%; max-height: 240px; object-fit: cover; border-radius: .5rem; }
.kc-editor-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; background: #f9fafb; border: 1.5px solid #d1d5db; border-bottom: none; border-radius: .6rem .6rem 0 0; }
.kc-editor-btn { padding: .3rem .6rem; border: 1px solid #e5e7eb; border-radius: .4rem; background: #fff; cursor: pointer; font-size: .8rem; transition: all .15s; }
.kc-editor-btn:hover { background: #ede9fe; border-color: #c4b5fd; }
.kc-editor { min-height: 280px; padding: 1rem; border: 1.5px solid #d1d5db; border-radius: 0 0 .6rem .6rem; font-size: .95rem; line-height: 1.7; outline: none; color: #111827; }
.kc-editor:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.kc-editor:empty::before { content: attr(data-placeholder); color: #9ca3af; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-table { width: 100%; border-collapse: collapse; }
.kc-table th { padding: .75rem 1.25rem; text-align: left; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; background: #f9fafb; border-bottom: 1px solid #f3f4f6; }
.kc-table td { padding: 1rem 1.25rem; border-bottom: 1px solid #f9fafb; vertical-align: middle; }
.kc-table tr:last-child td { border-bottom: none; }
.kc-table tr:hover td { background: #fafafa; }
.kc-table-title { font-weight: 600; color: #111827; font-size: .9rem; }
.kc-table-title:hover { color: var(--color-primary); }
.kc-status-badge { display: inline-flex; align-items: center; padding: .2rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.kc-action-link { font-size: .8rem; font-weight: 600; color: var(--color-primary); padding: .3rem .65rem; border-radius: .4rem; border: 1px solid #c4b5fd; background: #f5f3ff; cursor: pointer; transition: all .15s; text-decoration: none; }
.kc-action-link:hover { background: var(--color-primary); color: #fff; border-color: transparent; }
.kc-action-link--danger { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.kc-action-link--danger:hover { background: #dc2626; color: #fff; border-color: transparent; }
@media (max-width: 640px) { .kc-table th:nth-child(3), .kc-table td:nth-child(3) { display: none; } }