/* ─── KodeCraft CSS — Premium Design ──────────────────────────────────── */
:root {
  --brand:       #5b4cf5;
  --brand-dark:  #4338ca;
  --brand-light: #ede9fe;
  --text:        #0f0f12;
  --text-muted:  #6b7280;
  --border:      #e5e7eb;
  --bg:          #ffffff;
  --bg-alt:      #f9fafb;
  --header-h:    64px;
  --sidebar-w:   240px;
  --radius:      10px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.12);
  --font:        'Inter', system-ui, sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; }

/* ─── Container ─────────────────────────────────────────────────────────── */
.kc-container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.kc-text-center { text-align:center; }
.kc-text-muted { color:var(--text-muted); }
.kc-text-sm { font-size:.85rem; }
.kc-text-mono { font-family:monospace; }
.kc-text-accent { color:var(--brand); }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.kc-header {
  position:sticky; top:0; z-index:1000;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s;
}
.kc-header.is-scrolled { box-shadow:var(--shadow-sm); }
.kc-header__inner {
  max-width:1200px; margin:0 auto; padding:0 1.5rem;
  height:100%; display:flex; align-items:center; gap:2rem;
}
/* Logo */
.kc-logo { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.1rem; text-decoration:none; }
.kc-logo__mark {
  background:var(--brand); color:#fff; font-size:.8rem; font-weight:700;
  width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; letter-spacing:-.5px;
}
.kc-logo__text { color:var(--text); }
/* Nav */
.kc-nav { display:flex; align-items:center; gap:.25rem; flex:1; }
.kc-nav__link { padding:.4rem .85rem; border-radius:6px; font-size:.9rem; font-weight:500; color:var(--text-muted); transition:background .15s, color .15s; }
.kc-nav__link:hover, .kc-nav__link.is-active { background:var(--bg-alt); color:var(--text); }
/* Header Actions */
.kc-header__actions { display:flex; align-items:center; gap:.75rem; margin-left:auto; }
/* Hamburger */
.kc-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; border:none; background:none; padding:6px; border-radius:6px; }
.kc-hamburger span { display:block; height:2px; background:var(--text); border-radius:2px; transition:all .25s; }
.kc-hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.kc-hamburger.is-open span:nth-child(2) { opacity:0; }
.kc-hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* Nav overlay */
.kc-nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:990; }
.kc-nav-overlay.is-open { display:block; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.kc-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.25rem; border-radius:7px; font-size:.9rem; font-weight:600; border:1.5px solid transparent; transition:all .18s; white-space:nowrap; }
.kc-btn--primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.kc-btn--primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.kc-btn--outline { background:transparent; color:var(--brand); border-color:var(--brand); }
.kc-btn--outline:hover { background:var(--brand-light); }
.kc-btn--ghost { background:var(--bg-alt); color:var(--text); border-color:var(--border); }
.kc-btn--ghost:hover { background:var(--border); }
.kc-btn--danger { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
.kc-btn--danger:hover { background:#fca5a5; }
.kc-btn--sm { padding:.4rem .85rem; font-size:.82rem; border-radius:6px; }
.kc-btn--lg { padding:.8rem 1.75rem; font-size:1rem; }
.kc-link { color:var(--brand); font-weight:500; display:inline-flex; align-items:center; gap:.3rem; }
.kc-link:hover { text-decoration:underline; }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.kc-hero { padding:5rem 0 4rem; border-bottom:1px solid var(--border); }
.kc-hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.kc-badge { display:inline-block; background:var(--brand-light); color:var(--brand); font-size:.78rem; font-weight:600; padding:.3rem .8rem; border-radius:99px; margin-bottom:1.25rem; letter-spacing:.02em; }
.kc-badge--outline { background:transparent; border:1.5px solid var(--border); color:var(--text-muted); }
.kc-badge--sm { font-size:.7rem; padding:.2rem .55rem; }
.kc-hero__title { font-size:3.25rem; font-weight:700; line-height:1.12; letter-spacing:-.03em; margin-bottom:1.25rem; }
.kc-hero__subtitle { font-size:1.1rem; color:var(--text-muted); max-width:480px; margin-bottom:2rem; line-height:1.7; }
.kc-hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }
/* Code Card */
.kc-code-card { background:#0f0f12; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lg); }
.kc-code-card__bar { display:flex; gap:.4rem; padding:.85rem 1rem; border-bottom:1px solid rgba(255,255,255,.07); }
.kc-code-card__bar span { width:12px; height:12px; border-radius:50%; background:#3f3f46; }
.kc-code-card__bar span:nth-child(1) { background:#f87171; }
.kc-code-card__bar span:nth-child(2) { background:#fbbf24; }
.kc-code-card__bar span:nth-child(3) { background:#4ade80; }
.kc-code-card__code { padding:1.5rem; }
.kc-code-card__code code { color:#a5f3fc; font-family:monospace; font-size:.9rem; line-height:1.9; white-space:pre; }

/* ─── Stats Bar ───────────────────────────────────────────────────────────── */
.kc-stats { border-bottom:1px solid var(--border); padding:2.5rem 0; }
.kc-stats__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.kc-stat { text-align:center; padding:1rem; border-right:1px solid var(--border); }
.kc-stat:last-child { border-right:none; }
.kc-stat__num { font-size:2rem; font-weight:700; color:var(--brand); letter-spacing:-.03em; }
.kc-stat__label { font-size:.85rem; color:var(--text-muted); margin-top:.2rem; }

/* ─── Sections ────────────────────────────────────────────────────────────── */
.kc-section { padding:4rem 0; }
.kc-section--alt { background:var(--bg-alt); }
.kc-section__header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2.5rem; }
.kc-section__title { font-size:1.75rem; font-weight:700; letter-spacing:-.02em; }

/* ─── Grid ────────────────────────────────────────────────────────────────── */
.kc-grid { display:grid; gap:1.5rem; }
.kc-grid--3 { grid-template-columns:repeat(3,1fr); }
.kc-grid--2 { grid-template-columns:repeat(2,1fr); }

/* ─── Product Card ────────────────────────────────────────────────────────── */
.kc-product-card { border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; transition:box-shadow .2s, border-color .2s; display:flex; flex-direction:column; }
.kc-product-card:hover { box-shadow:var(--shadow); border-color:#d1d5db; }
.kc-product-card__img { width:100%; height:180px; object-fit:cover; background:var(--bg-alt); }
.kc-product-card__img--placeholder { display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:var(--border); }
.kc-product-card__body { padding:1.25rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.kc-product-card__badge { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.kc-product-card__title { font-size:1rem; font-weight:600; }
.kc-product-card__desc { font-size:.88rem; color:var(--text-muted); flex:1; }
.kc-product-card__footer { display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; padding-top:.75rem; border-top:1px solid var(--border); }
.kc-product-card__version { font-size:.8rem; color:var(--text-muted); }
.kc-product-card__price { font-size:.95rem; font-weight:700; color:var(--brand); }

/* ─── Features ────────────────────────────────────────────────────────────── */
.kc-feature { text-align:center; padding:2rem 1.5rem; }
.kc-feature__icon { width:56px; height:56px; background:var(--brand-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--brand); margin:0 auto 1.25rem; }
.kc-feature h3 { font-size:1.1rem; font-weight:600; margin-bottom:.6rem; }
.kc-feature p { color:var(--text-muted); font-size:.9rem; line-height:1.65; }

/* ─── CTA ─────────────────────────────────────────────────────────────────── */
.kc-cta { background:var(--brand); padding:5rem 0; text-align:center; }
.kc-cta__title { font-size:2.25rem; font-weight:700; color:#fff; letter-spacing:-.02em; margin-bottom:.75rem; }
.kc-cta__sub { color:rgba(255,255,255,.75); font-size:1.1rem; margin-bottom:2rem; }
.kc-cta .kc-btn--primary { background:#fff; color:var(--brand); border-color:#fff; }
.kc-cta .kc-btn--primary:hover { background:#f3f4f6; }

/* ─── Page Header ─────────────────────────────────────────────────────────── */
.kc-page-header { background:var(--bg-alt); border-bottom:1px solid var(--border); padding:2.5rem 0; }
.kc-page-header__title { font-size:2rem; font-weight:700; letter-spacing:-.02em; }
.kc-page-header__sub { color:var(--text-muted); margin-top:.4rem; }
.kc-back-link { display:inline-flex; align-items:center; gap:.35rem; color:var(--text-muted); font-size:.9rem; }
.kc-back-link:hover { color:var(--text); }

/* ─── Product Detail ──────────────────────────────────────────────────────── */
.kc-product-detail { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
.kc-product-detail__img { width:100%; border-radius:var(--radius); border:1.5px solid var(--border); margin-bottom:2rem; }
.kc-product-detail__title { font-size:2rem; font-weight:700; letter-spacing:-.02em; margin:.75rem 0; }
.kc-product-detail__desc { color:var(--text-muted); font-size:1.05rem; line-height:1.75; }
.kc-product-detail__features { margin-top:2rem; }
.kc-product-detail__features h3 { font-size:1.1rem; font-weight:600; margin-bottom:1rem; }
.kc-product-detail__changelog { margin-top:2rem; }
.kc-product-detail__changelog h3 { font-size:1.1rem; font-weight:600; margin-bottom:1rem; }
/* Sidebar card */
.kc-product-sidebar-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; background:#fff; position:sticky; top:calc(var(--header-h) + 1rem); }
.kc-product-sidebar-card__price { font-size:2rem; font-weight:700; color:var(--brand); margin-bottom:1.25rem; }
.kc-product-sidebar-card__meta { list-style:none; margin-top:1.25rem; display:flex; flex-direction:column; gap:.6rem; }
.kc-product-sidebar-card__meta li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--text-muted); }
.kc-product-sidebar-card__meta li i { color:var(--brand); width:18px; }

/* ─── Version Items ────────────────────────────────────────────────────────── */
.kc-version-item { padding:1.25rem 0; border-bottom:1px solid var(--border); }
.kc-version-item:last-child { border-bottom:none; }
.kc-version-item--full { border:1.5px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.5rem; margin-bottom:1rem; }
.kc-version-item.is-latest { border-color:var(--brand); }
.kc-version-item__head { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:.65rem; }
.kc-version-badge { background:#0f0f12; color:#a5f3fc; font-family:monospace; font-size:.8rem; font-weight:600; padding:.25rem .6rem; border-radius:5px; }
.kc-version-type { font-size:.75rem; font-weight:600; padding:.2rem .55rem; border-radius:4px; text-transform:capitalize; }
.kc-version-type--major { background:#fef3c7; color:#92400e; }
.kc-version-type--minor { background:#dbeafe; color:#1e40af; }
.kc-version-type--update { background:#f0fdf4; color:#166534; }
.kc-version-type--hotfix { background:#fee2e2; color:#b91c1c; }
.kc-version-date { font-size:.82rem; color:var(--text-muted); }
.kc-version-log { font-size:.9rem; color:var(--text-muted); line-height:1.65; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.kc-footer { border-top:1px solid var(--border); padding:3.5rem 0 2rem; }
.kc-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; }
.kc-footer__tagline { color:var(--text-muted); font-size:.88rem; margin-top:.6rem; }
.kc-footer__heading { font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:1rem; }
.kc-footer__links { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.kc-footer__links a { color:var(--text-muted); font-size:.9rem; }
.kc-footer__links a:hover { color:var(--text); }
.kc-footer__social { display:flex; gap:.75rem; }
.kc-footer__social a { width:36px; height:36px; border-radius:8px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:1.1rem; }
.kc-footer__social a:hover { background:var(--brand); color:#fff; }
.kc-footer__bottom { border-top:1px solid var(--border); padding-top:1.5rem; text-align:center; color:var(--text-muted); font-size:.85rem; }
.kc-main { min-height:calc(100vh - var(--header-h) - 200px); }

/* ─── Auth Pages ──────────────────────────────────────────────────────────── */
.kc-auth-page { min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem; background:var(--bg-alt); }
.kc-auth-card { background:#fff; border:1.5px solid var(--border); border-radius:16px; padding:2.5rem; width:100%; max-width:440px; }
.kc-auth-card__icon { width:56px; height:56px; background:var(--brand-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--brand); margin-bottom:1.5rem; }
.kc-auth-card__icon--green { background:#dcfce7; color:#16a34a; }
.kc-auth-card__icon--dark { background:#f3f4f6; color:#374151; }
.kc-auth-card__title { font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.4rem; }
.kc-auth-card__sub { color:var(--text-muted); font-size:.92rem; margin-bottom:1.75rem; }
.kc-auth-card__alt { text-align:center; margin-top:1.5rem; font-size:.88rem; color:var(--text-muted); }
.kc-auth-card__alt a { color:var(--brand); font-weight:500; }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.kc-form { display:flex; flex-direction:column; gap:1.1rem; }
.kc-form__row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.kc-form__group { display:flex; flex-direction:column; gap:.4rem; }
.kc-form__label { font-size:.85rem; font-weight:600; color:var(--text); }
.kc-form__input { border:1.5px solid var(--border); border-radius:7px; padding:.6rem .85rem; font-size:.9rem; color:var(--text); background:#fff; transition:border-color .18s, box-shadow .18s; outline:none; width:100%; }
.kc-form__input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.kc-form__input.is-error { border-color:#ef4444; }
.kc-form__input--mono { font-family:monospace; }
.kc-form__textarea { resize:vertical; min-height:100px; }
.kc-form__error { font-size:.8rem; color:#ef4444; }
.kc-form__hint { font-size:.8rem; color:var(--text-muted); }
.kc-form__check { display:flex; align-items:center; gap:.5rem; font-size:.9rem; cursor:pointer; }

/* ─── Alerts ──────────────────────────────────────────────────────────────── */
.kc-alert { display:flex; align-items:center; gap:.6rem; padding:.9rem 1.25rem; border-radius:8px; font-size:.9rem; margin-bottom:1.25rem; }
.kc-alert--success { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.kc-alert--error { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* ─── Portal Layout ───────────────────────────────────────────────────────── */
.kc-portal-body { background:var(--bg-alt); }
.kc-portal-layout { display:flex; min-height:100vh; }
/* Sidebar */
.kc-sidebar { width:var(--sidebar-w); background:#fff; border-right:1.5px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; }
.kc-sidebar--admin { background:#0f0f12; border-right:none; }
.kc-sidebar--admin .kc-logo__text { color:#fff; }
.kc-sidebar--admin .kc-logo__mark { background:var(--brand); }
.kc-sidebar__header { padding:1.25rem; border-bottom:1.5px solid var(--border); }
.kc-sidebar--admin .kc-sidebar__header { border-color:rgba(255,255,255,.08); }
.kc-sidebar__nav { padding:.75rem .6rem; display:flex; flex-direction:column; gap:.15rem; flex:1; }
.kc-sidebar__link { display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-radius:7px; font-size:.9rem; font-weight:500; color:var(--text-muted); transition:background .15s, color .15s; }
.kc-sidebar__link:hover { background:var(--bg-alt); color:var(--text); }
.kc-sidebar__link.is-active { background:var(--brand-light); color:var(--brand); }
.kc-sidebar--admin .kc-sidebar__link { color:rgba(255,255,255,.55); }
.kc-sidebar--admin .kc-sidebar__link:hover { background:rgba(255,255,255,.06); color:#fff; }
.kc-sidebar--admin .kc-sidebar__link.is-active { background:rgba(91,76,245,.25); color:#a78bfa; }
.kc-sidebar__footer { padding:.75rem; border-top:1.5px solid var(--border); }
.kc-sidebar--admin .kc-sidebar__footer { border-color:rgba(255,255,255,.08); }
.kc-sidebar__user { display:flex; align-items:center; gap:.75rem; }
.kc-sidebar__avatar { width:34px; height:34px; border-radius:8px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0; }
.kc-sidebar__name { font-size:.88rem; font-weight:600; }
.kc-sidebar__logout { background:none; border:none; color:var(--text-muted); font-size:.78rem; cursor:pointer; padding:0; }
.kc-sidebar__logout:hover { color:var(--text); text-decoration:underline; }
/* Portal content */
.kc-portal-content { flex:1; overflow:hidden; }
.kc-portal-topbar { background:#fff; border-bottom:1.5px solid var(--border); padding:0 1.5rem; height:60px; display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:100; }
.kc-portal-title { font-size:1.1rem; font-weight:600; }
.kc-sidebar-toggle { display:none; background:none; border:none; font-size:1.4rem; color:var(--text); padding:.25rem; }
.kc-portal-body-inner { padding:2rem 1.5rem; }
/* Portal welcome */
.kc-portal-welcome { margin-bottom:1.75rem; }
.kc-portal-welcome h2 { font-size:1.4rem; font-weight:700; margin-bottom:.25rem; }
.kc-portal-welcome p { color:var(--text-muted); }
/* Stats grid (portal) */
.kc-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.kc-stats-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; align-items:center; gap:1rem; }
.kc-stats-card--warn { border-color:#fbbf24; }
.kc-stats-card > i { font-size:1.5rem; color:var(--brand); }
.kc-stats-card--warn > i { color:#f59e0b; }
.kc-stats-card strong { display:block; font-size:1.4rem; font-weight:700; letter-spacing:-.02em; }
.kc-stats-card span { font-size:.8rem; color:var(--text-muted); }
/* Portal card */
.kc-portal-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius); }
.kc-portal-card__header { padding:1rem 1.25rem; border-bottom:1.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.kc-portal-card__header h3 { font-size:1rem; font-weight:600; }
.kc-portal-card__body { padding:1.25rem 1.25rem 1.5rem; }
.kc-portal-card__body p { margin-bottom:1rem; color:var(--text-muted); font-size:.92rem; line-height:1.6; }
.kc-portal-card__body p:last-child { margin-bottom:0; }
.kc-portal-card__body .kc-btn { margin-top:.25rem; margin-right:.5rem; margin-bottom:.25rem; }

/* ─── Tables ──────────────────────────────────────────────────────────────── */
.kc-table-wrap { overflow-x:auto; }
.kc-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.kc-table th { text-align:left; padding:.75rem 1rem; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); border-bottom:1.5px solid var(--border); white-space:nowrap; }
.kc-table td { padding:.85rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.kc-table tr:last-child td { border-bottom:none; }
.kc-table tr:hover td { background:var(--bg-alt); }
.kc-table__actions { display:flex; gap:.4rem; }
.kc-empty { text-align:center; color:var(--text-muted); padding:2.5rem; }

/* ─── Status / Priority Badges ────────────────────────────────────────────── */
.kc-status { display:inline-block; font-size:.75rem; font-weight:600; padding:.25rem .65rem; border-radius:99px; }
.kc-status--open { background:#fef3c7; color:#92400e; }
.kc-status--in_progress { background:#dbeafe; color:#1e40af; }
.kc-status--resolved { background:#dcfce7; color:#16a34a; }
.kc-status--closed { background:#f3f4f6; color:#6b7280; }
.kc-priority { display:inline-block; font-size:.75rem; font-weight:600; padding:.2rem .55rem; border-radius:4px; }
.kc-priority--low { background:#f3f4f6; color:#6b7280; }
.kc-priority--normal { background:#ede9fe; color:#7c3aed; }
.kc-priority--high { background:#fef3c7; color:#92400e; }
.kc-priority--urgent { background:#fee2e2; color:#b91c1c; }

/* ─── Support Thread ──────────────────────────────────────────────────────── */
.kc-thread { display:flex; flex-direction:column; gap:1rem; }
.kc-thread__msg { border-radius:10px; padding:1.1rem 1.25rem; border:1.5px solid var(--border); }
.kc-thread__msg--buyer { background:#fff; }
.kc-thread__msg--admin { background:var(--brand-light); border-color:rgba(91,76,245,.25); }
.kc-thread__meta { display:flex; gap:.75rem; align-items:baseline; margin-bottom:.6rem; font-size:.83rem; }
.kc-thread__meta strong { font-weight:600; }
.kc-thread__meta span { color:var(--text-muted); }
.kc-thread__body { font-size:.9rem; line-height:1.7; white-space:pre-wrap; }

/* ─── Ticket Header ───────────────────────────────────────────────────────── */
.kc-ticket-header h2 { font-size:1.4rem; font-weight:700; margin:.25rem 0 .5rem; }

/* ─── Pagination (Laravel default override) ───────────────────────────────── */
.pagination { display:flex; gap:.4rem; list-style:none; flex-wrap:wrap; }
.pagination li a, .pagination li span { display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 .6rem; border:1.5px solid var(--border); border-radius:6px; font-size:.85rem; color:var(--text); }
.pagination li.active span { background:var(--brand); color:#fff; border-color:var(--brand); }
.pagination li a:hover { background:var(--bg-alt); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .kc-grid--3 { grid-template-columns:repeat(2,1fr); }
  .kc-hero__inner { grid-template-columns:1fr; gap:3rem; }
  .kc-hero__title { font-size:2.5rem; }
  .kc-code-card { display:none; }
  .kc-stats__grid { grid-template-columns:repeat(2,1fr); }
  .kc-stat:nth-child(2) { border-right:none; }
  .kc-footer__grid { grid-template-columns:1fr 1fr; }
  .kc-product-detail { grid-template-columns:1fr; }
  .kc-product-sidebar-card { position:static; }
  .kc-stats-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .kc-nav { display:flex; position:fixed; top:0; left:0; bottom:0; width:min(300px,88vw); background:#fff; flex-direction:column; align-items:stretch; gap:0; z-index:1001; border-right:1.5px solid var(--border); transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); padding:0; }
  .kc-nav.is-open { transform:translateX(0); }
  .kc-nav__link { padding:.75rem 1rem; font-size:1rem; border-radius:8px; }
  .kc-hamburger { display:flex; }
  .kc-header__actions .kc-btn--outline { display:none; }
  .kc-hero { padding:3rem 0 2.5rem; }
  .kc-hero__title { font-size:2rem; }
  .kc-grid--3 { grid-template-columns:1fr; }
  .kc-grid--2 { grid-template-columns:1fr; }
  .kc-stats__grid { grid-template-columns:repeat(2,1fr); }
  .kc-footer__grid { grid-template-columns:1fr; gap:2rem; }
  .kc-auth-card { padding:1.75rem; }
  .kc-form__row { grid-template-columns:1fr; }
  /* Portal sidebar mobile */
  .kc-sidebar { position:fixed; top:0; left:0; bottom:0; transform:translateX(-100%); transition:transform .28s; z-index:1000; }
  .kc-sidebar.is-open { transform:translateX(0); }
  .kc-sidebar-toggle { display:flex; }
  .kc-stats-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:480px) {
  .kc-hero__title { font-size:1.7rem; }
  .kc-hero__actions { flex-direction:column; }
  .kc-stats-grid { grid-template-columns:1fr 1fr; }
  .kc-btn--lg { padding:.7rem 1.25rem; font-size:.95rem; }
}

/* Logo icon */
.kc-logo__icon {
    height: 52px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Tech stack badges */
.kc-product-detail__tech { margin-bottom: 2rem; }
.kc-product-detail__tech h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .75rem; color: #0f0b2d; }
.kc-tech-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.kc-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    letter-spacing: .01em;
}
.kc-tech-badge__svg { width: 16px; height: 16px; flex-shrink: 0; }
.kc-tech-badge--laravel      { background: #fff5f5; color: #c0392b; border-color: #fecaca; }
.kc-tech-badge--vuejs        { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.kc-tech-badge--mysql        { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.kc-tech-badge--tailwind-css { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.kc-tech-badge--reactjs,
.kc-tech-badge--react        { background: #f0f9ff; color: #0ea5e9; border-color: #bae6fd; }
.kc-tech-badge--nodejs,
.kc-tech-badge--node-js      { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.kc-tech-badge--php          { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.kc-tech-badge--alpinejs,
.kc-tech-badge--alpine-js    { background: #ecfeff; color: #0891b2; border-color: #a5f3fc; }

/* Tech pills on product cards */
.kc-product-card__techs { display: flex; flex-wrap: wrap; gap: .3rem; }
.kc-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.kc-tech-pill .kc-tech-badge__svg { width: 12px; height: 12px; }
.kc-tech-pill--laravel      { background: #fff5f5; color: #c0392b; border-color: #fecaca; }
.kc-tech-pill--vuejs        { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.kc-tech-pill--mysql        { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.kc-tech-pill--tailwind-css { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.kc-tech-pill--php          { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.kc-tech-pill--nodejs,
.kc-tech-pill--node-js      { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.kc-tech-pill--react        { background: #f0f9ff; color: #0ea5e9; border-color: #bae6fd; }
.kc-tech-pill--alpinejs,
.kc-tech-pill--alpine-js    { background: #ecfeff; color: #0891b2; border-color: #a5f3fc; }




/* ─── Desktop nav: hide on mobile ─────────────────────────────────────────── */
@media (max-width:768px) {
  .kc-nav--desktop { display:none !important; }
}

/* ─── Mobile Drawer Nav ───────────────────────────────────────────────────── */
.kc-nav--drawer {
  display:flex;
  position:fixed; top:0; left:0; bottom:0;
  width:min(300px,88vw);
  background:#fff;
  flex-direction:column;
  z-index:1100;
  border-right:1.5px solid var(--border);
  box-shadow:4px 0 24px rgba(0,0,0,.12);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.kc-nav--drawer.is-open { transform:translateX(0); }

/* Drawer header */
.kc-nav__drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.kc-nav__drawer-logo { font-size:17px; font-weight:800; color:var(--brand); }
.kc-nav__close {
  width:34px; height:34px; border:none; background:var(--bg-alt);
  border-radius:8px; color:var(--text); font-size:16px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.kc-nav__close:hover { background:var(--border); }

/* Links */
.kc-nav__links { flex:1; padding:12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.kc-nav--drawer .kc-nav__link {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:10px; font-size:15px; font-weight:500;
  color:var(--text); transition:background .12s, color .12s;
}
.kc-nav--drawer .kc-nav__link i { font-size:17px; width:20px; color:var(--text-muted); }
.kc-nav--drawer .kc-nav__link:hover,
.kc-nav--drawer .kc-nav__link.is-active { background:var(--brand-light); color:var(--brand); }
.kc-nav--drawer .kc-nav__link:hover i,
.kc-nav--drawer .kc-nav__link.is-active i { color:var(--brand); }

/* Footer buttons */
.kc-nav__drawer-footer {
  padding:16px 12px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.kc-nav__drawer-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:10px; font-size:14px; font-weight:600;
  transition:all .15s;
}
.kc-nav__drawer-btn--primary { background:var(--brand); color:#fff; }
.kc-nav__drawer-btn--primary:hover { background:var(--brand-dark); }
.kc-nav__drawer-btn--outline { color:var(--brand); border:1.5px solid var(--brand); }
.kc-nav__drawer-btn--outline:hover { background:var(--brand-light); }

/* Desktop: hide drawer */
@media (min-width:769px) {
  .kc-nav--drawer { display:none !important; }
}

/* ─── Mobile Header Layout ────────────────────────────────────────────────── */
.kc-user-menu { position:relative; }
.kc-user-btn {
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; border:none; background:none;
  color:var(--brand); font-size:22px; border-radius:8px; cursor:pointer;
  transition:background .15s;
}
.kc-user-btn:hover { background:var(--bg-alt); }
.kc-user-dropdown {
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  background:#fff; border:1.5px solid var(--border); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.1); min-width:170px; overflow:hidden;
  z-index:1200;
}
.kc-user-dropdown.is-open { display:block; }
.kc-user-dropdown__item {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; font-size:14px; font-weight:500; color:var(--text);
  border-bottom:1px solid var(--border); transition:background .1s;
}
.kc-user-dropdown__item:last-child { border-bottom:none; }
.kc-user-dropdown__item:hover { background:var(--bg-alt); color:var(--brand); }
.kc-user-dropdown__item i { color:var(--brand); font-size:15px; width:18px; }

@media (max-width:768px) {
  .kc-hamburger { order:-2; display:flex; }
  .kc-logo { flex:1; justify-content:center; }
  .kc-header__actions { margin-left:0; gap:.25rem; order:1; }
  .kc-hide-mobile { display:none !important; }
  .kc-user-btn { display:flex; }
  .kc-header__inner { padding:0 .75rem; }
}
@media (min-width:769px) {
  .kc-user-btn { display:none !important; }
  #userMenu .kc-user-dropdown { display:none !important; }
  .kc-hide-mobile { display:inline-flex !important; }
}


/* ─── Category Cards (Homepage) ──────────────────────────────────────────── */
.kc-cat-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:.5rem; align-items:start;
}
@media(max-width:768px){ .kc-cat-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .kc-cat-grid{grid-template-columns:1fr 1fr;} }

.kc-cat-card {
  display:flex; align-items:center; gap:.75rem;
  padding:.875rem 1rem;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:#fff; text-decoration:none; color:var(--text);
  transition:box-shadow .2s, border-color .2s, transform .15s;
}
.kc-cat-card:hover {
  box-shadow:var(--shadow); border-color:#d1d5db; transform:translateY(-2px);
}
.kc-cat-card--more { border-style:dashed; }
.kc-cat-card__icon {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:.75rem; flex-shrink:0;
}
.kc-cat-card__label { font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.kc-cat-card__sub   { font-size:.78rem; color:var(--text-muted); }

/* ─── Category Filter Tabs (Products page) ────────────────────────────────── */
.kc-cat-tabs-wrap {
  border-bottom:1px solid var(--border); background:#fff;
  position:sticky; top:var(--header-h); z-index:50;
}
.kc-cat-tabs {
  display:flex; gap:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  max-width:1200px; margin:0 auto; padding:0 1.5rem;
}
.kc-cat-tabs::-webkit-scrollbar{ display:none; }
.kc-cat-tab {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.75rem 1rem; font-size:.85rem; font-weight:500;
  color:var(--text-muted); white-space:nowrap; border:none;
  border-bottom:2.5px solid transparent; background:none;
  text-decoration:none; transition:color .15s, border-color .15s;
  flex-shrink:0;
}
.kc-cat-tab:hover { color:var(--text); }
.kc-cat-tab.is-active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.kc-cat-tab i { font-size:14px; }

/* ── User avatar button (desktop header) ──────────────────────────────────── */
.kc-user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  font-size: 14px;
  color: #111827;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.kc-user-avatar-btn:hover { border-color: #7c3aed; background: #faf5ff; }
.kc-user-avatar {
  width: 30px; height: 30px;
  background: linear-gradient(135deg,#7c3aed,#4f46e5);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.kc-user-avatar--sm { width: 26px; height: 26px; font-size: 11px; }
.kc-user-avatar-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#userMenuDesktop { position: relative; }
#userMenuDesktop .kc-user-dropdown { right: 0; left: auto; min-width: 220px; }
#userMenuDesktop .kc-user-dropdown.is-open { display: block; }

/* File drop zone */
.kc-file-drop{position:relative;border:2px dashed var(--border);border-radius:10px;padding:1.25rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:#fafafa;user-select:none;}
.kc-file-drop:hover,.kc-file-drop.is-drag{border-color:var(--brand);background:#f5f3ff;}
.kc-file-drop--sm{padding:.65rem 1rem;display:flex;align-items:center;gap:.75rem;text-align:left;}
.kc-file-drop--sm .kc-file-drop__label{display:flex;align-items:center;gap:.4rem;}

.kc-file-drop__label{pointer-events:none;color:var(--text-muted);}
.kc-file-drop__preview{display:none;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;}
.kc-file-drop--sm .kc-file-drop__preview{margin-top:0;flex:1;}
.kc-file-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:72px;}
.kc-file-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1.5px solid var(--border);}
.kc-file-icon{font-size:2rem;color:var(--brand);}
.kc-file-name{font-size:.7rem;color:var(--text-muted);text-align:center;word-break:break-all;}
/* Ticket thread attachments */
.kc-thread__attachments{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);}
.kc-att-thumb img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1.5px solid var(--border);display:block;transition:opacity .15s;}
.kc-att-thumb:hover img{opacity:.85;}
.kc-att-file{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--brand);border:1.5px solid var(--border);border-radius:6px;padding:.35rem .65rem;background:#fafafa;}
.kc-att-file:hover{background:#f5f3ff;border-color:var(--brand);}