/* ==========================================================================
   SeempleAI — Redesign
   Primary: #DBA038 | GitBook tokens | Ramp layout
   Pages: Landing, Blog, Blog Detail, Demo, Blog Admin
   ========================================================================== */

:root {
  --primary: #DBA038;
  --primary-hover: #C48E2E;
  --primary-light: rgba(219, 160, 56, 0.10);
  --dark: #1C1917;
  --white: #FFFFFF;
  --stone-900: #1C1917;
  --stone-600: #57534D;
  --stone-500: #79716B;
  --stone-200: #EFEEED;
  --stone-100: #F2F2F2;
  --stone-50: #FAFAF9;
  --overlay-light: rgba(0, 0, 0, 0.04);
  --border-subtle: rgba(28, 25, 23, 0.06);
  --white-overlay: rgba(255, 255, 255, 0.9);
  --shadow-1: 0 0 2px rgba(0,0,0,.15);
  --shadow-2: 0 4px 12px rgba(0,0,0,.15);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 99px;
  --radius-full: 1000px;
  --space-4: 4px; --space-8: 8px; --space-10: 10px; --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-40: 40px;
  --space-80: 80px; --space-112: 112px;
  --font-sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', monospace;
}

/* Reset */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; height:100%; }
body { font-family:var(--font-sans); font-weight:500; font-size:16px; line-height:1.5; letter-spacing:-0.32px; color:var(--stone-600); background:var(--white); min-height:100%; display:flex; flex-direction:column; overflow-x:hidden; }
body.page-landing { background:var(--white); }
body.menu-open { overflow:hidden; }
body > .footer { margin-top:auto; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

.container { max-width:1080px; margin:0 auto; padding:0 var(--space-20); }

/* Typography */
h1,h2,h3,h4,h5 { color:var(--stone-900); font-weight:500; }
h1 { font-size:64px; line-height:1.05; letter-spacing:-0.02em; font-weight:500; font-variation-settings:'wght' 500; }
h2 { font-size:48px; line-height:1.0; letter-spacing:-0.96px; }
h3 { font-size:40px; line-height:1.2; letter-spacing:-0.8px; }
h4 { font-size:30px; line-height:1.2; letter-spacing:-0.6px; }
h5 { font-size:20px; line-height:1.44; letter-spacing:-0.4px; }

.section-label {
  font-family:var(--font-mono); font-size:14px; font-weight:600;
  letter-spacing:-0.28px; text-transform:uppercase; color:var(--primary);
  display:block; margin-bottom:var(--space-12);
}
.section-header { text-align:center; max-width:640px; margin:0 auto var(--space-80); }
.section-title { margin-bottom:var(--space-16); }
.section-desc { font-size:18px; line-height:1.44; letter-spacing:-0.36px; color:var(--stone-600); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-8);
  font-family:var(--font-sans); font-weight:500; font-size:16px;
  letter-spacing:-0.48px; border-radius:var(--radius-pill);
  padding:10px 14px 12px; border:none; cursor:pointer;
  transition:all .2s ease; white-space:nowrap; min-height:44px;
}
.btn--primary { background:#16479C; color:var(--white); }
.btn--primary:hover { background:#1a3d7a; transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn--ghost { background:var(--overlay-light); color:var(--stone-900); }
.btn--ghost:hover { background:rgba(0,0,0,.08); }
.btn--outline { background:transparent; color:var(--stone-900); border:1px solid var(--stone-200); font-size:14px; }
.btn--outline:hover { border-color:var(--stone-500); }
.btn--dark { background:#16479C; color:var(--white); }
.btn--dark:hover { background:#1a3d7a; transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn--sm { font-size:14px; padding:8px 14px 9px; }
.btn[hidden] { display:none; }
.btn--lg { padding:14px 24px 16px; font-size:16px; }
.arrow { transition:transform .2s ease; }
.btn:hover .arrow { transform:translateX(3px); }
.badge { background:var(--primary); color:var(--white); font-size:12px; font-weight:500; border-radius:30px; padding:1px 7px 2px; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav { position:sticky; top:0; z-index:100; background:var(--white); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--stone-200); }
body.page-landing .nav { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:none; }
body:not(.page-landing) .nav { background:#F7F7F7; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:var(--stone-200); }
.nav__inner { max-width:1080px; margin:0 auto; padding:0 var(--space-20); height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav__logo { display:flex; align-items:center; gap:var(--space-10); font-size:18px; font-weight:500; color:var(--stone-900); letter-spacing:-0.36px; }
.nav__logo-img { height:28px; width:auto; }
.nav__links { display:flex; gap:var(--space-24); margin-left:auto; margin-right:24px; }
.nav__link { font-size:14px; font-weight:500; color:var(--stone-900); padding:var(--space-8) 0; transition:color .15s; }
.nav__link:hover { color:var(--stone-500); }
.nav__link--active { color:var(--primary); }
.nav__actions { display:flex; align-items:center; gap:var(--space-8); }
.nav__inner--admin { justify-content:flex-start; gap:var(--space-24); }
.nav__inner--admin .nav__links { margin-left:auto; justify-content:flex-end; }
.nav__inner--admin .nav__actions { flex-shrink:0; }
.nav__action-link { font-size:14px; font-weight:500; color:var(--stone-900); padding:var(--space-8) 0; margin:0 16px; transition:color .15s; }
.nav__action-link:hover { color:var(--stone-500); }
.nav__mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:var(--space-8); margin-left:auto; }
.nav__mobile-toggle span { display:block; width:20px; height:2px; background:var(--stone-900); border-radius:2px; transition:all .3s ease; }
.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--white); z-index:99; padding:var(--space-24); flex-direction:column; gap:var(--space-8); overflow-y:auto; }
.mobile-menu.active { display:flex; }
body.menu-open .nav__mobile-toggle span:nth-child(1) { transform:rotate(45deg) translate(5px, 5px); }
body.menu-open .nav__mobile-toggle span:nth-child(2) { opacity:0; }
body.menu-open .nav__mobile-toggle span:nth-child(3) { transform:rotate(-45deg) translate(5px, -5px); }
.mobile-menu__link { font-size:18px; font-weight:500; color:var(--stone-900); padding:var(--space-12) 0; border-bottom:1px solid var(--stone-200); }
.mobile-menu__actions { display:flex; flex-direction:column; gap:var(--space-12); margin-top:var(--space-24); }
.mobile-menu__actions .btn { justify-content:center; }
.mobile-menu__logout { width:100%; }

/* ==========================================================================
   HERO (Landing)
   ========================================================================== */
.hero { padding:0; text-align:center; position:relative; overflow:visible; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:-64px; padding-top:64px; }
.hero__bg { position:absolute; top:-64px; left:0; right:0; bottom:0; background:url('/hero-bg.jpg') center/cover no-repeat; z-index:0; }
.hero__bg::after { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.1) 100%); }
@media (max-width:768px) { .hero__bg { opacity:0.3; } }
.hero__layout { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px; padding:0 var(--space-20); }
.hero__content { display:flex; flex-direction:column; align-items:center; gap:19px; }
.hero__title-highlight { color:var(--primary); white-space:nowrap; }
.hero__title { max-width:none; margin:0; font-size:102px; line-height:1.18; letter-spacing:-6px; text-shadow:0 1px 2px rgba(0,0,0,0.05); }
.hero__subtitle { font-size:20px; line-height:1.4; letter-spacing:-0.3px; color:#343434; max-width:472px; margin:0; padding-top:32px; text-shadow:0 1px 2px rgba(0,0,0,0.03); }
.hero__cta-card { background:rgba(254,254,254,0.99); border-radius:var(--radius-xl); padding:28px; width:397px; max-width:100%; box-shadow:0 4px 89.2px 0 rgba(41,26,0,0.15); display:flex; flex-direction:column; align-items:center; gap:27px; text-align:center; }
.hero__cta-text { display:flex; flex-direction:column; gap:11px; width:100%; }
.hero__cta-title { font-size:18px; font-weight:500; color:#292929; margin:0; line-height:29px; letter-spacing:-0.4px; }
.hero__cta-desc { font-size:14px; font-weight:400; line-height:22px; color:#292929; margin:0; }
.hero__cta-card .cta__form { max-width:none; }
.hero__cta-card .cta__input-group { margin-bottom:0; justify-content:center; gap:8px; }
.hero__cta-card .cta__input { flex:none; width:188px; height:44px; background:rgba(255,255,255,0.3); border-color:#cecece; }
.hero__cta-btn { padding:8px 19px 9px; }

/* ==========================================================================
   CTA (Landing)
   ========================================================================== */
.cta { padding:var(--space-80) 0 var(--space-112); }
.cta__inner { text-align:center; background:var(--stone-50); border-radius:var(--radius-xl); padding:var(--space-80) var(--space-40); }
.cta__title { font-size:34px; line-height:1.15; letter-spacing:-0.68px; margin-bottom:var(--space-16); }
.cta__desc { font-size:18px; color:var(--stone-500); max-width:480px; margin:0 auto var(--space-40); line-height:1.56; }
.cta__form { max-width:480px; margin:0 auto; }
.cta__input-group { display:flex; gap:var(--space-8); margin-bottom:var(--space-12); }
.cta__input { flex:1; font-family:var(--font-sans); font-size:14px; font-weight:500; padding:10px 16px; border:1px solid var(--stone-200); border-radius:var(--radius-pill); outline:none; background:var(--white); color:var(--stone-900); transition:border-color .2s; }
.cta__input::placeholder { color:var(--stone-500); }
.cta__input:focus { border-color:var(--primary); }
.cta__legal { font-size:12px; color:var(--stone-500); letter-spacing:normal; }
.cta__success { display:flex; align-items:center; justify-content:center; gap:var(--space-8); font-size:16px; font-weight:500; color:var(--stone-900); }
.cta__success[hidden] { display:none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding:var(--space-40) 0; border-top:1px solid var(--stone-200); }
.footer__simple { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-16); }
.footer__links-row { display:flex; gap:var(--space-20); }
.footer__link { font-size:13px; font-weight:500; color:var(--stone-500); transition:color .15s; }
.footer__link:hover { color:var(--stone-900); }
.footer__copyright { font-size:12px; color:var(--stone-500); }

/* ==========================================================================
   BLOG — Header
   ========================================================================== */
.blog-header { padding:var(--space-112) 0 var(--space-40); }
.blog-header__title { font-size:48px; margin-bottom:var(--space-12); }
.blog-header__desc { font-size:18px; color:var(--stone-500); line-height:1.5; max-width:520px; }

/* ==========================================================================
   BLOG — Featured Post
   ========================================================================== */
.blog-featured { display:none; }
.blog-featured__card {
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--stone-50); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease; align-items:stretch;
}
.blog-featured__card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.06); }
.blog-featured__image { min-height:320px; background:linear-gradient(135deg, var(--stone-50), var(--stone-100)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.blog-featured__image-placeholder { width:100%; height:100%; min-height:320px; display:flex; align-items:center; justify-content:center; background:var(--primary-light); }
.blog-featured__image img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-featured__content { padding:var(--space-40); display:flex; flex-direction:column; justify-content:center; }
.blog-featured__title { font-size:30px; letter-spacing:-0.6px; margin:var(--space-12) 0; line-height:1.2; }
.blog-featured__excerpt { font-size:16px; color:var(--stone-600); line-height:1.5; margin-bottom:var(--space-16); }

/* ==========================================================================
   BLOG — Card Grid
   ========================================================================== */
.blog-grid-section { padding:var(--space-40) 0 var(--space-112); }
.blog-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-20); }
.blog-card {
  display:flex; flex-direction:column; border-radius:var(--radius-lg);
  border:1px solid var(--stone-200); overflow:hidden;
  transition:all .3s ease;
}
.blog-card:hover { border-color:var(--primary); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.blog-card__image { height:180px; background:var(--stone-50); display:flex; align-items:center; justify-content:center; }
.blog-card__image-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--primary-light); }
.blog-card__content { padding:var(--space-20); flex:1; display:flex; flex-direction:column; }
.blog-card__tag { font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase; color:var(--primary); letter-spacing:0; }
.blog-card__title { font-size:18px; font-weight:500; color:var(--stone-900); margin:var(--space-8) 0; line-height:1.3; letter-spacing:-0.36px; }
.blog-card__excerpt { font-size:14px; color:var(--stone-500); line-height:1.5; flex:1; margin-bottom:var(--space-12); font-weight:500; letter-spacing:normal; }
.blog-card__meta { display:flex; align-items:center; gap:var(--space-8); font-size:13px; color:var(--stone-500); font-weight:600; }
.blog-card__dot { color:var(--stone-200); }
.blog-card__date { color:var(--stone-500); font-weight:600; }

/* ==========================================================================
   BLOG — Article Detail
   ========================================================================== */
.article { padding:120px 0 var(--space-112); }
.article__header { max-width:720px; margin:0 auto 56px; }
.article__back { display:inline-flex; align-items:center; gap:var(--space-4); font-size:14px; font-weight:600; color:var(--stone-500); margin-bottom:var(--space-24); transition:color .15s; }
.article__back:hover { color:var(--stone-900); }
.article__title { font-size:48px; line-height:1.1; letter-spacing:-2px; margin:var(--space-12) 0 var(--space-16); }
.article__meta { display:flex; align-items:center; gap:var(--space-8); font-size:14px; color:var(--stone-500); margin-top:8px; padding-bottom:16px; }
.article__author { font-weight:500; color:var(--stone-900); }
.article__date { font-weight:500; color:var(--stone-500); }
.article__role { font-weight:500; }
.article__body { max-width:720px; margin:0 auto; overflow-wrap:break-word; word-break:break-word; }
.article__body h2 { font-size:32px; letter-spacing:-1px; margin:48px 0 var(--space-16); }
.article__body h3 { font-size:28px; letter-spacing:-0.8px; margin:var(--space-32) 0 var(--space-16); padding-bottom:19px; }
.article__body h4 { padding-top:48px; margin-bottom:24px; }
.article__body h5 { margin-bottom:12px; }
.article__body ul, .article__body ol { padding-left:24px; margin-bottom:var(--space-20); }
.article__body ul li, .article__body ol li { font-size:18px; line-height:1.4; color:var(--stone-600); font-weight:500; padding-bottom:0; letter-spacing:-0.4px; }
.article__body p { font-size:18px; line-height:1.6; color:var(--stone-600); margin-bottom:var(--space-20); font-weight:500; font-variation-settings:'wght' 500; letter-spacing:-0.4px; }
.article__body strong, .position__body strong { font-weight:600; }
.article__footer { max-width:720px; margin:var(--space-80) auto 0; padding-top:var(--space-24); border-top:1px solid var(--stone-200); }

/* ==========================================================================
   CAREERS — Join Our Team
   ========================================================================== */
.careers-header { padding:120px 0 var(--space-24); }
.careers-header__title { font-size:48px; letter-spacing:-2px; margin:var(--space-8) 0 var(--space-12); }
.careers-header__desc { font-size:18px; color:var(--stone-500); font-weight:500; max-width:520px; }

.careers-about { padding:var(--space-40) 0 var(--space-80); }
.careers-about__inner { max-width:720px; }
.careers-about__heading { font-size:32px; letter-spacing:-1px; margin-bottom:var(--space-24); }
.careers-about__text p { font-size:18px; line-height:1.6; color:var(--stone-600); font-weight:500; margin-bottom:var(--space-16); letter-spacing:-0.4px; }

.careers-positions { padding:var(--space-40) 0 var(--space-80); }
.careers-positions__heading { font-size:22px; font-weight:600; letter-spacing:-0.5px; margin-bottom:var(--space-12); }
.careers-positions__intro { font-size:16px; color:var(--stone-500); font-weight:500; margin-bottom:var(--space-24); }
.careers-tabs { display:flex; flex-wrap:wrap; gap:var(--space-12); margin-bottom:var(--space-24); }
.careers-tabs__button { display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 18px; border:1px solid var(--stone-200); border-radius:999px; background:var(--white); color:var(--stone-600); font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:-0.02em; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.careers-tabs__button:hover { border-color:var(--primary); color:var(--stone-900); transform:translateY(-1px); box-shadow:var(--shadow-1); }
.careers-tabs__button.is-active { background:#16479C; border-color:#16479C; color:var(--white); box-shadow:var(--shadow-2); }
.careers-tabs__count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:rgba(255, 255, 255, 0.12); font-size:12px; font-weight:700; }
.careers-tabs__button:not(.is-active) .careers-tabs__count { background:var(--primary-light); color:var(--primary); }
.careers-positions__grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-24); }

.position-card { display:flex; flex-direction:column; padding:var(--space-40); background:var(--white); border:1px solid var(--stone-200); border-radius:var(--radius-lg); transition:all .2s ease; text-decoration:none; color:inherit; }
.position-card:hover { border-color:var(--stone-500); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.position-card__header { margin-bottom:var(--space-16); }
.position-card__tag { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--primary); }
.position-card__title { font-size:24px; font-weight:600; letter-spacing:-0.5px; margin-bottom:var(--space-4); }
.position-card__subtitle { font-size:14px; color:var(--stone-500); font-weight:500; margin-bottom:var(--space-16); }
.position-card__desc { font-size:15px; line-height:1.5; color:var(--stone-600); font-weight:500; flex:1; }
.position-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-24); padding-top:var(--space-16); border-top:1px solid var(--stone-200); }
.position-card__footer-meta { display:flex; align-items:center; gap:12px; }
.position-card__type { font-size:14px; font-weight:500; color:var(--stone-500); }
.position-card__deadline { display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; background:rgba(22, 71, 156, 0.08); color:#16479C; font-size:12px; font-weight:700; letter-spacing:0.01em; }
.position-card__arrow { font-size:20px; color:var(--primary); transition:transform .2s; }
.position-card:hover .position-card__arrow { transform:translateX(4px); }

.careers-cta { padding:var(--space-40) 0 var(--space-80); }
.careers-cta__inner { max-width:520px; text-align:center; margin:0 auto; padding:var(--space-40); background:var(--stone-50); border-radius:var(--radius-xl); }
.careers-cta__title { font-size:24px; letter-spacing:-0.5px; margin-bottom:var(--space-8); }
.careers-cta__desc { font-size:16px; color:var(--stone-600); font-weight:500; line-height:1.5; }

/* ==========================================================================
   POSITION — Detail Page
   ========================================================================== */
.position { padding:120px 0 var(--space-80); }
.position__header { max-width:720px; margin:0 auto var(--space-40); }
.position__meta { display:flex; align-items:center; gap:var(--space-8); font-size:14px; color:var(--stone-500); margin-bottom:var(--space-12); }
.position__type { font-weight:500; }
.position__title { font-size:48px; letter-spacing:-2px; line-height:1.1; margin-bottom:var(--space-8); }
.position__subtitle { font-size:20px; color:var(--stone-500); font-weight:500; }
.position__summary { font-size:18px; line-height:1.6; color:var(--stone-600); margin-top:var(--space-20); font-weight:500; letter-spacing:-0.4px; }
.position__deadline { display:inline-flex; flex-direction:column; gap:4px; margin-top:var(--space-24); padding:14px 18px; border:1px solid rgba(22, 71, 156, 0.16); border-radius:18px; background:linear-gradient(180deg, rgba(22, 71, 156, 0.06), rgba(22, 71, 156, 0.03)); }
.position__deadline-label { font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#16479C; }
.position__deadline-date { font-size:16px; font-weight:600; color:var(--stone-900); letter-spacing:-0.02em; }

.position__body { max-width:720px; margin:0 auto; }
.position__body h2 { font-size:30px; letter-spacing:-0.9px; margin:var(--space-40) 0 var(--space-16); }
.position__body p { font-size:18px; line-height:1.6; color:var(--stone-600); margin-bottom:var(--space-20); font-weight:500; letter-spacing:-0.4px; }
.position__body h3 { font-size:24px; letter-spacing:-0.5px; margin:var(--space-40) 0 var(--space-16); }
.position__body ul { padding-left:24px; margin-bottom:var(--space-20); }
.position__body li { font-size:18px; line-height:1.5; color:var(--stone-600); font-weight:500; padding-bottom:6px; letter-spacing:-0.4px; }

.position__apply { max-width:720px; margin:var(--space-80) auto 0; padding-top:var(--space-40); border-top:1px solid var(--stone-200); }
.position__apply-title { font-size:32px; letter-spacing:-1px; margin-bottom:var(--space-8); }
.position__apply-desc { font-size:16px; color:var(--stone-500); font-weight:500; margin-bottom:var(--space-40); }
.position__form { display:flex; flex-direction:column; gap:var(--space-24); }
.position__label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--stone-900); }
.position__input, .position__textarea { font-family:var(--font-sans); font-size:16px; font-weight:500; padding:14px 20px; border:1px solid var(--stone-200); border-radius:var(--radius-md); outline:none; background:var(--white); color:var(--stone-900); transition:border-color .2s; }
.position__input:focus, .position__textarea:focus { border-color:var(--primary); }
.position__textarea { resize:vertical; min-height:140px; }
.position__questions-section { margin-top:var(--space-32); }
.position__questions-heading { font-size:20px; font-weight:600; color:var(--stone-900); margin-bottom:var(--space-8); padding-top:32px; }
.position__questions-subtitle { font-size:15px; font-weight:500; color:var(--stone-600); line-height:1.6; margin:0 0 var(--space-8); }
.position__question-title { display:block; font-size:15px; font-weight:600; color:var(--stone-800); margin-bottom:8px; padding-top:32px; line-height:1.5; }
.position__submit { align-self:flex-start; }
.position__success { text-align:center; padding:var(--space-40) 0; }
.position__success h3 { font-size:24px; margin:var(--space-16) 0 var(--space-8); }
.position__success p { font-size:16px; color:var(--stone-500); font-weight:500; }

/* ==========================================================================
   DEMO — Password Gate
   ========================================================================== */
.demo-gate { padding:var(--space-112) 0; display:flex; align-items:center; min-height:60vh; }
.demo-gate[hidden] { display:none; }
.demo-gate__card { max-width:420px; margin:0 auto; text-align:center; }
.demo-gate__icon { margin-bottom:var(--space-24); }
.demo-gate__title { font-size:30px; margin-bottom:var(--space-8); }
.demo-gate__desc { font-size:16px; color:var(--stone-500); margin-bottom:var(--space-24); font-weight:500; letter-spacing:normal; }
.demo-gate__form { display:flex; flex-direction:column; gap:var(--space-12); }
.demo-gate__input { font-family:var(--font-sans); font-size:16px; font-weight:500; padding:14px 20px; border:1px solid var(--stone-200); border-radius:var(--radius-pill); outline:none; background:var(--white); color:var(--stone-900); transition:border-color .2s; text-align:center; }
.demo-gate__input:focus { border-color:var(--primary); }
.demo-gate__btn { width:100%; justify-content:center; }
.demo-gate__error { font-size:14px; color:#D32F2F; font-weight:600; }
.demo-gate__hint { font-size:13px; color:var(--stone-500); margin-top:var(--space-16); font-weight:500; letter-spacing:normal; }
.demo-gate__hint a { color:var(--primary); font-weight:500; }
.demo-gate__hint a:hover { text-decoration:underline; }

/* ==========================================================================
   DEMO — Content (after auth)
   ========================================================================== */
.demo-content { padding:var(--space-80) 0 var(--space-112); }
.demo-content__header { margin-bottom:var(--space-40); }
.demo-content__header h1 { font-size:36px; margin-bottom:var(--space-12); }
.demo-content__desc { font-size:18px; color:var(--stone-500); font-weight:500; letter-spacing:normal; }
.demo-content__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-20); }
.demo-video-card { border:1px solid var(--stone-200); border-radius:var(--radius-lg); overflow:hidden; transition:all .3s ease; }
.demo-video-card:hover { border-color:var(--primary); transform:translateY(-3px); }
.demo-video-card__thumb { height:200px; background:var(--stone-50); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.demo-video-card__thumb--has-img { background:var(--stone-900); }
.demo-video-card__thumb-img { width:100%; height:100%; object-fit:cover; display:block; }
.demo-video-card__play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); transition:background .2s; }
.demo-video-card__play-overlay svg { filter:drop-shadow(0 2px 12px rgba(0,0,0,0.4)); transition:transform .2s; }
.demo-video-card:hover .demo-video-card__play-overlay { background:rgba(0,0,0,0.45); }
.demo-video-card:hover .demo-video-card__play-overlay svg { transform:scale(1.08); }
.demo-video-card__title { font-size:16px; font-weight:500; color:var(--stone-900); padding:var(--space-16) var(--space-16) var(--space-4); }
.demo-video-card__desc { font-size:14px; color:var(--stone-500); padding:0 var(--space-16) var(--space-16); font-weight:500; letter-spacing:normal; line-height:1.5; }

/* ==========================================================================
   ADMIN — Blog Manager
   ========================================================================== */
.admin { padding:var(--space-40) 0 var(--space-112); }
.admin__header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--space-40); flex-wrap:wrap; gap:var(--space-16); }
.admin__title { font-size:30px; margin-bottom:var(--space-4); }
.admin__subtitle { font-size:14px; color:var(--stone-500); font-weight:500; letter-spacing:normal; }
.admin__stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-16); margin-bottom:var(--space-40); }
.admin__stats--four { grid-template-columns:repeat(4, 1fr); }
.admin__stat-card { background:var(--stone-50); border-radius:var(--radius-lg); padding:var(--space-24); text-align:center; }
.admin__stat-number { display:block; font-size:36px; font-weight:500; color:var(--stone-900); letter-spacing:-0.72px; }
.admin__stat-label { font-size:13px; color:var(--stone-500); font-weight:600; }
.admin__filters { display:grid; grid-template-columns:minmax(240px, 1.6fr) repeat(3, minmax(160px, 1fr)); gap:var(--space-12); align-items:end; margin-bottom:var(--space-16); }
.admin__filter-field { display:flex; flex-direction:column; gap:6px; }
.admin__filter-field--search { min-width:0; }
.admin__filter-label { font-size:12px; font-weight:600; color:var(--stone-500); text-transform:uppercase; letter-spacing:0.4px; }
.admin__filter-input { width:100%; min-height:44px; font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--stone-900); background:var(--white); border:1px solid var(--stone-200); border-radius:var(--radius-pill); padding:10px 14px; outline:none; transition:border-color .2s, box-shadow .2s; }
.admin__filter-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(219, 160, 56, 0.12); }
.admin__results-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); margin-bottom:var(--space-16); flex-wrap:wrap; }
.admin__results-text { font-size:14px; color:var(--stone-500); font-weight:600; letter-spacing:normal; }
.admin__pagination { display:flex; align-items:center; gap:var(--space-10); }
.admin__pagination[hidden] { display:none; }
.admin__pagination-text { font-size:13px; font-weight:600; color:var(--stone-500); min-width:88px; text-align:center; }
.admin__table-wrapper { overflow-x:auto; border:1px solid var(--stone-200); border-radius:var(--radius-lg); }
.admin__table { width:100%; border-collapse:collapse; font-size:14px; }
.admin__table th { text-align:left; padding:var(--space-12) var(--space-16); background:var(--stone-50); font-weight:500; color:var(--stone-600); font-size:12px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--stone-200); }
.admin__table td { padding:var(--space-12) var(--space-16); border-bottom:1px solid var(--stone-200); vertical-align:middle; }
.admin__table tr:last-child td { border-bottom:none; }
.admin__table-title { font-weight:500; color:var(--stone-900); max-width:320px; }
.admin__table-title-wrap { display:flex; align-items:center; gap:var(--space-8); min-width:0; }
.admin__table-title-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.admin__table-title-name { color:var(--stone-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin__table-title-excerpt { font-size:12px; color:var(--stone-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:normal; }
.admin__table-date { white-space:nowrap; color:var(--stone-500); font-size:13px; }
.admin__tag { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--primary); background:var(--primary-light); padding:2px 8px; border-radius:var(--radius-pill); white-space:nowrap; }
.admin__status { font-size:12px; font-weight:500; padding:2px 10px; border-radius:var(--radius-pill); }
.admin__status--published { background:rgba(34,197,94,.1); color:#16A34A; }
.admin__status--draft { background:rgba(234,179,8,.1); color:#CA8A04; }
.admin__table-actions { display:flex; gap:var(--space-8); }
.admin__action-btn { width:32px; height:32px; border:1px solid var(--stone-200); border-radius:var(--radius-sm); background:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--stone-500); transition:all .15s; }
.admin__action-btn:hover { border-color:var(--stone-500); color:var(--stone-900); }
.admin__action-btn--danger:hover { border-color:#D32F2F; color:#D32F2F; }

.applicant-detail__toggle-cell { width:1%; white-space:nowrap; padding-left:12px !important; padding-right:12px !important; }
.applicant-detail__toggle { font-size:13px; white-space:nowrap; }
.applicant-detail__row td { padding:0 !important; }
.applicant-detail { padding:20px 24px 24px; background:var(--stone-50); border-top:1px solid var(--stone-200); display:flex; flex-direction:column; gap:20px; }
.applicant-detail__item { display:flex; flex-direction:column; gap:6px; }
.applicant-detail__question { font-size:14px; font-weight:600; color:var(--stone-800); line-height:1.5; }
.applicant-detail__answer { font-size:14px; font-weight:400; color:var(--stone-600); line-height:1.7; white-space:pre-wrap; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.no-js .fade-up, .fade-up-fallback { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .fade-up { opacity:1; transform:none; transition:none; } }

/* Page load animation */
.page-load-hidden { opacity:0; transform:translateY(20px); }
.page-load-animate { transition:opacity .7s ease, transform .7s ease; opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .page-load-hidden { opacity:1; transform:none; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1599px) {
  h1 { font-size:52px; }
  .hero__title { font-size:80px; letter-spacing:-4px; }
}

@media (max-width:1199px) {
  h1 { font-size:45px; }
  h2 { font-size:38px; }
  .hero__title { font-size:64px; letter-spacing:-3px; }
  .hero__cta-card { width:480px; }
  .blog-grid { grid-template-columns:repeat(2, 1fr); }
  .demo-content__grid { grid-template-columns:repeat(2, 1fr); }
  .admin__filters { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .admin__table-title { max-width:240px; }
}

@media (max-width:768px) {
  h1 { font-size:36px; letter-spacing:-0.02em; padding-bottom:12px; }
  .hero { min-height:auto; padding:0 0 var(--space-40); }
  .hero__layout { gap:30px; padding:48px 24px 0; }
  .hero__content { gap:19px; }
  .hero__title { font-size:50px; line-height:59px; letter-spacing:-3px; }
  .hero__subtitle { font-size:14px; line-height:23px; letter-spacing:-0.3px; max-width:none; padding-top:0; }
  .hero__cta-card { width:271px; max-width:100%; padding:16px 24px; gap:20px; }
  .hero__cta-text { gap:8px; }
  .hero__cta-title { font-size:15px; line-height:29px; letter-spacing:-0.4px; }
  .hero__cta-desc { font-size:14px; line-height:18px; }
  .hero__cta-card .cta__input-group { flex-direction:column; gap:8px; }
  .hero__cta-card .cta__input { width:100%; }
  .hero__cta-card .hero__cta-btn { width:100%; }
  .cta__input-group { flex-direction:column; }
  .cta__input { width:100%; font-size:16px; min-height:44px; padding:12px 16px; }
  .modal__input, .modal__textarea { font-size:16px; }
  h2 { font-size:30px; letter-spacing:-0.6px; }
  .nav__links, .nav__actions { display:none; }
  .nav__mobile-toggle { display:flex; }
  .cta { padding:var(--space-40) 0 var(--space-80); }
  .cta__title { font-size:28px; letter-spacing:-0.56px; }
  .cta__inner { padding:var(--space-40) var(--space-20); }
  .blog-featured__card { grid-template-columns:1fr; }
  .blog-featured__image { min-height:200px; }
  .blog-featured__content { padding:var(--space-24); }
  .blog-featured__title { font-size:24px; }
  .blog-grid { grid-template-columns:repeat(2, 1fr); }
  .blog-header { padding:var(--space-80) 0 var(--space-24); }
  .blog-header__title { font-size:36px; }
  .article__title { font-size:32px; letter-spacing:-1px; }
  .article__body h2 { font-size:26px; }
  .article__body p { font-size:17px; }
  .article__body ul li, .article__body ol li { font-size:17px; }
  .article__meta { flex-wrap:wrap; }
  .careers-header { padding:var(--space-80) 0 var(--space-24); }
  .careers-header__title { font-size:36px; }
  .careers-tabs { gap:var(--space-8); }
  .careers-tabs__button { flex:1 1 calc(50% - var(--space-8)); justify-content:space-between; }
  .careers-positions__grid { grid-template-columns:1fr; }
  .position-card { padding:var(--space-24); }
  .position__title { font-size:32px; letter-spacing:-1px; }
  .position__body p, .position__body li { font-size:17px; }
  .position { padding:var(--space-80) 0 var(--space-40); }
  .demo-content__grid { grid-template-columns:repeat(2, 1fr); }
  .admin__stats { grid-template-columns:1fr; }
  .admin__filters { grid-template-columns:1fr; }
  .admin__table { font-size:13px; }
  .admin__table-title { max-width:180px; }
  .section-header { margin-bottom:var(--space-40); }
  .footer { padding:var(--space-24) 0; }
  .footer__simple { flex-direction:column; text-align:center; }
  .footer__link { padding:8px 4px; }
  .btn:active { transform:scale(0.97); }
  .btn--sm { min-height:44px; }
}

@media (max-width:480px) {
  h1 { font-size:36px; }
  .hero { padding:var(--space-40) 0 var(--space-24); }
  .hero__title { font-size:48px; letter-spacing:-2px; }
  .hero__cta-card { padding:var(--space-20); }
  h2 { font-size:26px; }
  .cta__title { font-size:24px; letter-spacing:-0.48px; }
  .blog-grid { grid-template-columns:1fr; }
  .blog-header { padding:var(--space-40) 0 var(--space-20); }
  .blog-header__title { font-size:30px; }
  .article__title { font-size:28px; }
  .demo-content__grid { grid-template-columns:1fr; }
}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--space-20); }
.modal-overlay[hidden] { display:none; }
.modal-overlay--dark { background:rgba(0,0,0,.85); }
.modal { background:var(--white); border-radius:var(--radius-lg); width:100%; max-width:min(560px, 100%); max-height:90vh; overflow-y:auto; }
.modal--video { max-width:900px; background:#000; }
.modal__header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-20) var(--space-24); border-bottom:1px solid var(--stone-200); }
.modal--video .modal__header { border-bottom-color:rgba(255,255,255,.1); }
.modal__title { font-size:18px; font-weight:500; color:var(--stone-900); }
.modal__close { background:none; border:none; font-size:24px; color:var(--stone-500); cursor:pointer; padding:0; line-height:1; }
.modal__close:hover { color:var(--stone-900); }
.modal__form { padding:var(--space-24); display:flex; flex-direction:column; gap:var(--space-16); }
.modal__label { display:flex; flex-direction:column; gap:var(--space-4); font-size:13px; font-weight:500; color:var(--stone-600); }
.modal__input, .modal__textarea { font-family:var(--font-sans); font-size:15px; font-weight:500; padding:10px 14px; border:1px solid var(--stone-200); border-radius:var(--radius-sm); outline:none; color:var(--stone-900); transition:border-color .2s; resize:vertical; }
.modal__input:focus, .modal__textarea:focus { border-color:var(--primary); }
.modal__actions { display:flex; justify-content:flex-end; gap:var(--space-8); padding-top:var(--space-8); }
.modal__actions--spread { padding:0 var(--space-24) var(--space-24); justify-content:space-between; }
.modal__body { padding:var(--space-24); }
.modal--warning { max-width:460px; }
.modal__warning-text { font-size:15px; line-height:1.6; color:var(--stone-600); }
.modal__video-container { width:100%; aspect-ratio:16/9; background:#000; }
.btn--danger { background:#B42318; color:var(--white); }
.btn--danger:hover { background:#912018; box-shadow:var(--shadow-2); }

.admin-toast { position:fixed; top:88px; right:20px; z-index:280; min-width:260px; max-width:360px; background:var(--stone-900); color:var(--white); border-radius:14px; padding:14px 16px; box-shadow:0 18px 50px rgba(28, 25, 23, 0.18); font-size:14px; font-weight:600; line-height:1.45; }
.admin-toast[hidden] { display:none; }

/* ==========================================================================
   DEMO ADMIN CARDS
   ========================================================================== */
.demo-admin__list { display:flex; flex-direction:column; gap:var(--space-12); }
.demo-admin__card { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-16); padding:var(--space-20); border:1px solid var(--stone-200); border-radius:var(--radius-lg); transition:border-color .2s; }
.demo-admin__card:hover { border-color:var(--primary); }
.demo-admin__card-title { font-size:16px; font-weight:500; color:var(--stone-900); margin-bottom:var(--space-4); }
.demo-admin__card-desc { font-size:14px; color:var(--stone-500); font-weight:500; letter-spacing:normal; line-height:1.5; margin-bottom:var(--space-4); }
.demo-admin__card-url { font-family:var(--font-mono); font-size:12px; color:var(--stone-500); word-break:break-all; }
.demo-admin__card-actions { display:flex; gap:var(--space-8); flex-shrink:0; }

/* Admin link cards */
.admin__stat-card--link { display:flex; flex-direction:column; align-items:center; gap:var(--space-8); text-decoration:none; border:1px solid var(--stone-200); transition:all .2s; cursor:pointer; }
.admin__stat-card--link:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.06); }

/* Empty state */
.admin__empty { text-align:center; padding:var(--space-80) var(--space-20); color:var(--stone-500); font-size:16px; font-weight:500; letter-spacing:normal; }

/* ==========================================================================
   FULL-PAGE EDITOR
   ========================================================================== */
.editor { padding:var(--space-24) 0 var(--space-112); }
.editor__topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-24); padding-bottom:var(--space-16); border-bottom:1px solid var(--stone-200); }
.editor__topbar-actions { display:flex; align-items:center; gap:var(--space-8); }
.editor__status-select { font-family:var(--font-sans); font-size:14px; font-weight:500; padding:8px 14px; border:1px solid var(--stone-200); border-radius:var(--radius-pill); outline:none; color:var(--stone-900); background:var(--white); cursor:pointer; }
.editor__status-select:focus { border-color:var(--primary); }

.editor__layout { display:grid; grid-template-columns:1fr 280px; gap:var(--space-24); align-items:start; }

/* Main column */
.editor__main { display:flex; flex-direction:column; gap:0; }
.editor__title-input { width:100%; resize:none; overflow:hidden; font-family:var(--font-sans); font-size:36px; font-weight:500; color:var(--stone-900); border:none; outline:none; background:transparent; padding:var(--space-8) 0; letter-spacing:-0.72px; line-height:1.2; min-height:48px; }
.editor__title-input::placeholder { color:rgba(121, 113, 107, 0.58); }
.editor__meta-input { font-family:var(--font-sans); font-size:16px; font-weight:500; color:var(--stone-500); border:none; outline:none; padding:var(--space-8) 0 var(--space-16); border-bottom:1px solid var(--stone-200); letter-spacing:normal; }
.editor__meta-input::placeholder { color:rgba(121, 113, 107, 0.58); }

/* Toolbar */
.editor__toolbar { display:flex; align-items:center; gap:2px; padding:var(--space-8) 0; border-bottom:1px solid var(--stone-200); margin-bottom:var(--space-16); flex-wrap:wrap; }
.editor__tool { width:32px; height:32px; border:none; border-radius:var(--radius-sm); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; color:var(--stone-500); transition:all .15s; font-family:var(--font-sans); }
.editor__tool:hover { background:var(--stone-100); color:var(--stone-900); }
.editor__tool-sep { width:1px; height:20px; background:var(--stone-200); margin:0 6px; }
.editor__tool--color { position:relative; width:auto; padding:0; }
.editor__color-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; padding:0; }
.editor__color-bar { position:absolute; bottom:2px; left:4px; right:4px; height:3px; border-radius:2px; background:#000; pointer-events:none; }
/* Quill editor body */
.editor__body { min-height:400px; padding:var(--space-8) 0; }
.editor__body .ql-container.ql-bubble { border:none; font-family:var(--font-sans); font-size:17px; font-weight:500; line-height:1.7; color:var(--stone-600); }
.editor__body .ql-editor { min-height:400px; padding:0; line-height:1.7; color:var(--stone-600); font-size:17px; font-weight:500; letter-spacing:normal; }
.editor__body .ql-editor.ql-blank::before { left:0; right:auto; font-style:normal; color:rgba(121, 113, 107, 0.58); }
.editor__body .ql-editor > *:first-child { margin-top:0; }
.editor__body .ql-editor h2 { font-size:24px; font-weight:500; color:var(--stone-900); margin:var(--space-24) 0 var(--space-8); letter-spacing:-0.48px; }
.editor__body .ql-editor h3 { font-size:20px; font-weight:500; color:var(--stone-900); margin:var(--space-20) 0 var(--space-8); padding-bottom:19px; letter-spacing:-0.4px; }
.editor__body .ql-editor h4 { font-size:18px; font-weight:600; color:var(--stone-900); margin:var(--space-16) 0 var(--space-8); padding-bottom:19px; letter-spacing:-0.24px; }
.editor__body .ql-editor h5 { font-size:16px; font-weight:600; color:var(--stone-900); margin:var(--space-16) 0 var(--space-8); padding-bottom:19px; letter-spacing:-0.12px; }
.editor__body .ql-editor p { margin-bottom:var(--space-12); }
.editor__body .ql-editor ul, .editor__body .ql-editor ol { margin-bottom:var(--space-12); padding-left:var(--space-24); }
.editor__body .ql-editor li { margin-bottom:var(--space-4); }
.editor__body .ql-editor strong { font-weight:600; }
.editor__body .ql-editor a { color:var(--primary); text-decoration:underline; }
.editor__body .ql-editor blockquote { border-left:3px solid var(--primary); padding-left:var(--space-16); color:var(--stone-500); margin:var(--space-16) 0; font-style:italic; }
.editor__body .ql-editor blockquote p:last-child,
.editor__body .ql-editor li:last-child,
.editor__body .ql-editor p:last-child { margin-bottom:0; }
.ql-bubble .ql-tooltip { background:rgba(28, 25, 23, 0.96); border-radius:14px; box-shadow:0 18px 50px rgba(28, 25, 23, 0.24); color:var(--white); }
.ql-bubble .ql-tooltip .ql-tooltip-editor input[type=text] { color:var(--white); }
.ql-bubble .ql-tooltip .ql-toolbar .ql-picker-label,
.ql-bubble .ql-tooltip .ql-toolbar button { color:rgba(255, 255, 255, 0.8); }
.ql-bubble .ql-tooltip .ql-toolbar button:hover,
.ql-bubble .ql-tooltip .ql-toolbar button.ql-active,
.ql-bubble .ql-tooltip .ql-toolbar .ql-picker-label:hover,
.ql-bubble .ql-tooltip .ql-toolbar .ql-picker-label.ql-active { color:var(--white); }

/* Sidebar */
.editor__sidebar { position:sticky; top:80px; display:flex; flex-direction:column; gap:var(--space-20); }
.editor__sidebar-section { display:flex; flex-direction:column; gap:var(--space-4); }
.editor__sidebar-label { font-size:12px; font-weight:500; color:var(--stone-500); text-transform:uppercase; letter-spacing:0.5px; }
.editor__sidebar-input { font-family:var(--font-sans); font-size:14px; font-weight:500; padding:10px 12px; border:1px solid var(--stone-200); border-radius:var(--radius-sm); outline:none; color:var(--stone-900); transition:border-color .2s; }
.editor__sidebar-input:focus { border-color:var(--primary); }

/* Live preview card */
.editor__preview-card { border:1px solid var(--stone-200); border-radius:var(--radius-md); padding:var(--space-12); background:var(--stone-50); overflow:hidden; }
.editor__preview-image { width:100%; aspect-ratio:16 / 9; border-radius:var(--radius-sm); overflow:hidden; background:linear-gradient(135deg, var(--stone-100), var(--stone-50)); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-12); }
.editor__preview-image img { width:100%; height:100%; object-fit:cover; }
.editor__preview-image--job { background:linear-gradient(135deg, rgba(219, 160, 56, 0.14), rgba(245, 245, 244, 0.9)); }
.editor__preview-tag { font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; color:var(--primary); margin-bottom:var(--space-4); }
.editor__preview-title { font-size:14px; font-weight:500; color:var(--stone-900); margin-bottom:var(--space-4); line-height:1.3; min-height:18px; }
.editor__preview-meta { font-size:11px; color:var(--stone-500); font-weight:600; letter-spacing:0.02em; margin-bottom:var(--space-6); text-transform:uppercase; }
.editor__preview-deadline { display:inline-flex; align-items:center; align-self:flex-start; min-height:28px; margin-bottom:var(--space-8); padding:0 10px; border-radius:999px; background:rgba(22, 71, 156, 0.08); color:#16479C; font-size:11px; font-weight:700; letter-spacing:0.02em; }
.editor__preview-deadline[hidden] { display:none; }
.editor__preview-excerpt { font-size:12px; color:var(--stone-500); line-height:1.4; font-weight:500; letter-spacing:normal; min-height:16px; }

.editor-preview-overlay { position:fixed; inset:0; background:rgba(250, 250, 249, 0.98); z-index:260; overflow-y:auto; }
.editor-preview-overlay[hidden] { display:none; }
.editor-preview-overlay__content { min-height:100%; }
.editor-preview-overlay__close { position:fixed; top:20px; right:20px; width:48px; height:48px; border:none; border-radius:50%; background:rgba(28, 25, 23, 0.9); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 16px 40px rgba(28, 25, 23, 0.2); z-index:261; transition:transform .15s ease, background .15s ease; }
.editor-preview-overlay__close:hover { background:var(--stone-900); transform:translateY(-1px); }

/* Editor responsive */
@media (max-width:768px) {
  .editor__layout { grid-template-columns:1fr; }
  .editor__sidebar { position:static; }
  .editor__title-input { font-size:28px; }
  .editor__topbar { flex-direction:column; gap:var(--space-8); align-items:stretch; }
  .editor__topbar-actions { justify-content:flex-end; }
  .editor-preview-overlay__close { top:12px; right:12px; width:44px; height:44px; }
  .admin-toast { top:76px; right:12px; left:12px; max-width:none; min-width:0; }
  .modal__actions--spread { flex-direction:column-reverse; }
}