:root{
  --primary: #202b45;
  --primary-soft: #2f3f66;
  --accent: #4e7ac2;
  --brand: #782850;

  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: rgba(31,41,55,.65);
  --stroke: rgba(0,0,0,.08);

  --shadow: 0 20px 40px rgba(0,0,0,.10);
  --radius: 20px;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
/* Prevent layout shift when vertical scrollbar appears/disappears ("yazılar kayıyor") */
body{
  background:var(--bg);
  color:var(--text);
  overflow-y: scroll; /* keeps width stable */
  scrollbar-gutter: stable; /* modern browsers */
}
a{color:inherit;text-decoration:none}

/* NAV + HERO */
.hero{
  background:linear-gradient(135deg,var(--primary),var(--primary-soft));
  color:#fff;
  padding:26px 80px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-weight:700;font-size:22px;letter-spacing:.2px}
.nav-links{display:flex;gap:22px;list-style:none;align-items:center}
.nav-links a{opacity:.92}
.nav-links a:hover{opacity:1}
.nav-cta{display:flex;gap:10px;align-items:center}

/* PREMIUM SINGLE-ROW NAV */
.nav{align-items:flex-start}
.nav-drawer,
.nav-cta,
#adminTopTabs,
.premium-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap !important;
}
.nav-drawer{
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-end;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-drawer::-webkit-scrollbar{display:none}
#adminTopTabs,
.premium-nav{
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
}
#adminTopTabs::-webkit-scrollbar,
.premium-nav::-webkit-scrollbar{display:none}
.nav-cta{margin-left:auto;flex:0 0 auto}
.logo{font-weight:800;letter-spacing:.5px}
.hero.hero--compact .nav{padding-bottom:8px}
.hero.hero--compact .hero-content{margin-top:72px}
.nav-pill,
.nav-drawer .btn,
.nav-drawer .pill,
.premium-nav .btn,
.premium-nav .pill{
  white-space:nowrap;
  flex:0 0 auto;
}
.nav-drawer .btn,
.premium-nav .btn,
.nav-drawer .pill,
.premium-nav .pill{
  padding:10px 16px;
  font-weight:700;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.nav-drawer .btn:hover,
.premium-nav .btn:hover,
.nav-drawer .pill:hover,
.premium-nav .pill:hover{transform:translateY(-1px)}
.btn-ghost,
.premium-nav .btn-ghost{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.btn-outline,
.premium-nav .btn-outline{border-color:rgba(255,255,255,.45)}
.nav-swap{animation:navSwap .18s ease}
@keyframes navSwap{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width: 980px){
  .hero{padding-left:24px;padding-right:24px}
}


/* Mobile hamburger + drawer (admin menu)
   Desktop: drawer content stays inline.
   Mobile: drawer becomes a dropdown panel. */
.hamburger{
  display:none;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  transition:.2s;
}
.hamburger:hover{background:rgba(255,255,255,.16)}
.hamburger svg{width:20px;height:20px;display:block}

.nav-drawer{display:flex;gap:10px;align-items:center}
.nav-overlay{display:none}

.hero-content{margin-top:88px;max-width:760px;padding-bottom:78px}
.hero-content h1{font-size:46px;line-height:1.08}
.hero-content p{margin-top:14px;opacity:.92;max-width:62ch}
.hero-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.hero-kpis{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.kpi{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:600;
  opacity:.98;
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:999px;font-weight:700;
  border:1px solid transparent;transition:.2s;
}

/* Keep top-right nav actions visually stable during auth restore */
.ea-disabled{
  opacity: .65;
  pointer-events: none;
}
.btn-solid{background:#fff;color:var(--primary)}
.btn-solid:hover{transform:translateY(-1px);opacity:.96}
.btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}

.btn-navy{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-navy:hover{transform:translateY(-1px);opacity:.96}

.btn-mini{padding:8px 12px;font-size:12px}
.btn-outline-dark{background:transparent;border-color:rgba(31,41,55,.25);color:var(--primary)}
.btn-outline-dark:hover{background:rgba(31,41,55,.06)}

.btn-danger{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-danger:hover{transform:translateY(-1px);opacity:.96}

.btn-full{width:100%}

/* ADMIN PANEL BUTTON COLORS (light background) */
.panel .btn-solid{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.panel .btn-solid:hover{opacity:.95;transform:translateY(-1px);}
.panel .btn-outline{
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.panel .btn-outline:hover{background: rgba(32,43,69,.10);}


/* ADMIN HERO-CARD BUTTONS (light background) */
.hero-card .btn-solid{background:var(--primary);color:#fff}
.hero-card .btn-solid:hover{opacity:.95}
.hero-card .btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.hero-card .btn-outline:hover{background:rgba(0,0,0,.04)}

/* ADMIN TABS (light background) */
.admin-tabs .btn-solid{background:var(--primary);color:#fff}
.admin-tabs .btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.admin-tabs .btn-outline:hover{background:rgba(0,0,0,.04)}
.admin-tabs .row{justify-content:flex-start}


/* SECTION TITLES */
.section{padding:62px 80px}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.section-title h2{font-size:26px;color:var(--primary)}
.section-title p{color:var(--muted);max-width:70ch}

/* CATALOG GRID */
.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.course-card{
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.25s;
}
.course-card:hover{transform:translateY(-8px)}
.course-card img{width:100%;height:210px;object-fit:cover;display:block}
.course-card .content{padding:24px 24px 26px}
.badge{
  display:inline-block;
  padding:6px 14px;
  background:var(--primary);
  color:#fff;
  border-radius:999px;
  font-size:12px;
  margin-bottom:12px;
}
.badge-2{background:var(--accent)}
.badge-3{background:var(--brand)}
.course-card h3{margin-bottom:10px;font-size:18px}
.course-card p{font-size:14px;color:var(--muted)}
.meta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:rgba(0,0,0,.56)}
.pill2{
  padding:7px 10px;border-radius:999px;
  background:rgba(78,122,194,.10);
  border:1px solid rgba(78,122,194,.18);
}

/* STATS */
.stats{display:flex;justify-content:space-around;background:#fff;padding:56px 24px;border-top:1px solid var(--stroke)}
.stats div{text-align:center}
.stats strong{color:var(--primary);font-size:36px;display:block}
.stats span{opacity:.75}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:22px;align-items:stretch}
.contact-card{
  background:#fff;border-radius:22px;box-shadow:var(--shadow);
  padding:22px;border:1px solid var(--stroke);
}
.contact-card h3{color:var(--primary);margin-bottom:10px}
.contact-card p{color:var(--muted);font-size:14px;line-height:1.6}
.contact-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.contact-actions .btn{background:var(--primary);color:#fff;border-color:transparent}
.contact-actions .btn:hover{opacity:.96;transform:translateY(-1px)}
.contact-actions .btn.secondary{
  background:transparent;color:var(--primary);
  border:1px solid rgba(32,43,69,.28);
}
.contact-actions .btn.secondary:hover{background:rgba(32,43,69,.06)}
.iframe-wrap{
  background:#fff;border-radius:22px;box-shadow:var(--shadow);
  overflow:hidden;border:1px solid var(--stroke);
  min-height:420px;
}
.iframe-wrap iframe{width:100%;height:100%;border:0}

/* FOOTER */
footer{text-align:center;padding:28px;background:#111;color:#fff}

/* AUTH (shared) */
.auth-body{
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(78,122,194,.15), transparent 60%),
    radial-gradient(900px 500px at 90% 40%, rgba(120,40,80,.10), transparent 60%),
    var(--bg);
}
.auth-topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 24px}
.auth-logo{font-weight:700;font-size:20px;color:var(--primary)}
.auth-wrap{min-height:calc(100vh - 76px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{
  width:min(1000px, 100%);
  background:var(--card);
  border-radius:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.12);
  overflow:hidden;
  display:grid;
  grid-template-columns:1.1fr .9fr;
}
.auth-left{padding:44px 40px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-soft))}
.auth-left h1{font-size:34px;line-height:1.08}
.auth-left p{margin-top:12px;opacity:.92}
.auth-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pill{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:600;
}
.helper{
  margin-top:18px;
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  font-size:13px;opacity:.98;
}
.helper .i{
  width:26px;height:26px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(0,0,0,.10);
  color:var(--primary);font-weight:800;
}
.auth-right{padding:44px 40px}
.auth-right h2{font-size:22px;margin-bottom:18px;color:var(--primary)}
.form{display:grid;gap:14px}
label span{display:block;font-size:12px;font-weight:600;color:rgba(31,41,55,.7);margin-bottom:8px}
/*
  Form inputs
  NOTE: We keep the generic input styling for text-like fields,
  but explicitly reset checkbox/radio so they don't inherit 100% width/padding
  (this was causing course cards to "kaymak" / overlap in the admin panel).
*/
input{width:100%;padding:13px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.12);outline:none;transition:.2s}
input:focus{border-color: rgba(32,43,69,.45);box-shadow:0 0 0 4px rgba(78,122,194,.18)}

/* Password visibility toggle */
.pw-field{position:relative}
.pw-field input{padding-right:44px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;padding:6px;border-radius:10px;line-height:0;opacity:.75}
.pw-toggle:hover{opacity:1;background:rgba(0,0,0,.04)}
.pw-toggle svg{width:18px;height:18px}


/* Reset for toggles */
input[type="checkbox"],
input[type="radio"]{
  width:16px;
  height:16px;
  padding:0;
  border-radius:4px;
  box-shadow:none;
  outline:none;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus{
  box-shadow:none;
}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.check{display:flex;gap:10px;align-items:center;font-size:13px;color:rgba(31,41,55,.75)}
.check input{width:16px;height:16px}
.link{color:var(--accent);font-weight:700;font-size:13px}
.link:hover{text-decoration:underline}
.divider{display:flex;align-items:center;gap:12px;margin:6px 0;color:rgba(31,41,55,.55);font-size:12px}
.divider:before,.divider:after{content:"";height:1px;background:rgba(0,0,0,.12);flex:1}
.divider span{padding:0 6px}
.small{font-size:13px;margin-top:14px;color:var(--muted)}
.notice{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(78,122,194,.06);
  color:rgba(31,41,55,.85);
  font-size:13px;
}
.notice .i{
  width:26px;height:26px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(0,0,0,.10);
  color:var(--primary);font-weight:800;
}

/* Responsive */
@media (max-width: 900px){
  .hero{padding:22px 24px 0}
  .section{padding:44px 24px}
  .nav-links{display:none}
  /* On mobile, collapse admin top tabs into hamburger drawer */
  .hamburger{display:inline-flex}
  .nav-drawer{
    display:none;
    position:fixed;
    top:76px;
    left:16px;
    right:16px;
    background:#fff;
    color:var(--text);
    border-radius:18px;
    padding:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    z-index:2000;
    flex-direction:column;
    gap:12px;
  }
  .nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:1990;
  }

  body.nav-open .nav-drawer{display:flex}
  body.nav-open .nav-overlay{display:block}

  /* Stack items inside drawer */
  .nav-drawer #adminTopTabs,
  .nav-drawer .premium-nav,
  .nav-drawer #navCta{display:flex;flex-direction:column;gap:10px;width:100%}
  .nav-drawer .btn,
  .nav-drawer .pill,
  .nav-drawer a{width:100%;justify-content:center}

  /* Ensure good contrast on white drawer */
  .nav-drawer .btn-outline,
  .nav-drawer .btn-ghost{
    background:#fff;
    color:var(--primary);
    border-color:rgba(0,0,0,.12);
  }
  .nav-drawer .btn-ghost:hover,
  .nav-drawer .btn-outline:hover{background:rgba(0,0,0,.04)}
  .nav-drawer .btn-navy{background:var(--primary);color:#fff;border-color:var(--primary)}
  .nav-drawer .pill{
    background:rgba(78,122,194,.10);
    color:var(--primary);
    border:1px solid rgba(0,0,0,.12);
  }

  /* Prevent drawer content from shrinking layout */
  .nav-cta{margin-left:auto}
  .hero-content h1{font-size:38px}
  .auth-card{grid-template-columns:1fr}
  .auth-left{padding:34px 26px}
  .auth-right{padding:34px 26px}
  .contact-grid{grid-template-columns:1fr}
  .iframe-wrap{min-height:360px}
}


/* NAV SEARCH */
.nav-search{
  display:flex;
  align-items:center;
  gap:10px;
  width:min(520px, 100%);
  margin-left:auto;
  margin-right:12px;
}
.search-input{
  width:100%;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.14);
  color:#fff;
  outline:none;
}
.search-input::placeholder{color:rgba(255,255,255,.75)}
.search-input:focus{
  border-color:rgba(255,255,255,.40);
  box-shadow:0 0 0 4px rgba(78,122,194,.18);
}
.search-hint{
  font-size:12px;
  font-weight:700;
  opacity:.85;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
}

/* Course link */
.course-link{display:block;color:inherit;text-decoration:none}
.course-link:focus{outline: none}
.course-link:focus-visible{
  outline:3px solid rgba(78,122,194,.55);
  outline-offset:6px;
  border-radius:18px;
}


/* SEARCH RESULTS AREA */
.results-wrap{
  margin-top: 18px;
  margin-bottom: 26px;
  padding: 18px 18px 8px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}
.results-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.results-head h3{
  font-size:16px;
  letter-spacing:.2px;
  color:#fff;
}
.results-head p{
  font-size:12px;
  font-weight:700;
  opacity:.85;
  color:#fff;
}
.catalog.results .course-card{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: -2px;
}
.catalog.results .course-card:hover{
  transform: translateY(-6px);
}


/* --- COMPACT HERO OVERRIDES (v4) --- */
.hero{
  padding:18px 64px 0 !important;
}
.nav{
  gap:18px !important;
}
.logo{
  font-size:20px !important;
}
.hero-content{
  margin-top:48px !important;
  padding-bottom:40px !important;
  padding-left:18px !important; /* yazılar az sağa */
  max-width:820px !important;
}
.hero-content h1{
  font-size:34px !important;
  line-height:1.12 !important;
  letter-spacing:-.2px !important;
}
.hero-content p{
  font-size:14px !important;
  max-width:72ch !important;
}
.hero-actions{
  margin-top:16px !important;
}
.btn{
  padding:10px 16px !important;
  font-size:13px !important;
}
.hero-kpis{
  margin-top:16px !important;
  gap:10px !important;
}
.kpi{
  padding:8px 12px !important;
  font-size:11px !important;
}
/* move catalog up a bit */
.section{
  padding-top:44px !important;
}
/* search bar a bit smaller */
.nav-search{ width:min(460px, 100%) !important; }
.search-input{ padding:10px 14px !important; }
.search-hint{ padding:7px 9px !important; }
/* mobile */
@media (max-width: 900px){
  .hero{ padding:16px 20px 0 !important; }
  .hero-content{ padding-left:0 !important; margin-top:38px !important; padding-bottom:32px !important; }
  .hero-content h1{ font-size:30px !important; }
}


/* SEARCH ABOVE CATALOG */
.search-section{
  padding-top:24px !important;
  padding-bottom:0 !important;
}
.search-container{
  max-width:920px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:14px 18px;
  border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}
.search-large{
  flex:1;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#1f2937;
}
.search-large::placeholder{color:rgba(31,41,55,.55)}
.search-large:focus{
  border-color: rgba(32,43,69,.45);
  box-shadow:0 0 0 4px rgba(78,122,194,.18);
}
.search-section .search-hint{
  color:var(--primary);
  border-color: rgba(32,43,69,.28);
  background:rgba(32,43,69,.06);
}


/* --- Auth + Admin helpers --- */
.auth-msg{
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid var(--stroke);
}
.auth-msg.error{ background: rgba(220,38,38,.08); }
.auth-msg.ok{ background: rgba(16,185,129,.10); }

.hero--compact{ padding-bottom: 28px; }
.hero-content--compact{ padding: 22px 0 0; }

.panel{ background: transparent; }
.panel-head h2{ margin: 0 0 6px; }
.panel-head p{ margin: 0; }

.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 980px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.input, .textarea{
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  outline: none;
}
.textarea{ min-height: 220px; resize: vertical; }
.pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

.list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 440px;
  overflow:auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.list-item{
  width: 100%;
  text-align:left;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
}
.list-item.active{ border-color: rgba(120,40,80,.55); box-shadow: 0 10px 18px rgba(120,40,80,.10); }
.list-title{ font-weight: 700; }
.list-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.checklist{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.checkline{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
}
.checkline input{ margin-top: 2px; }
.checkline small{ margin-left:auto; }
.empty{ color: var(--muted); padding: 10px 2px; }


/* NAV CTA compact pills */
.nav-cta .btn{padding:10px 14px;font-weight:700}


.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr;}}


/* --- Assigned course highlight + progress (catalog) --- */
.course-card.is-assigned{
  border: 2px solid var(--primary);
  box-shadow: 0 18px 44px rgba(32,43,69,.14);
}

/* Locked (not assigned) course card */
.course-card.is-locked{
  opacity: .72;
}
.course-card.is-locked .course-link{
  cursor: not-allowed;
}
.course-card.is-locked .badge{
  filter: grayscale(1);
  opacity: .9;
}
.ea-course-progress{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.ea-course-progress__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:600;
  font-size: 13px;
  color: rgba(31,41,55,.85);
  margin-bottom: 8px;
}
.ea-course-progress__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ea-course-progress__pct{
  color: rgba(31,41,55,.85);
}
.ea-course-progress__bar{
  width:100%;
  height:10px;
  background: rgba(120,40,80,.14);
  border-radius: 999px;
  overflow:hidden;
}
.ea-course-progress__fill{
  height:100%;
  width:0%;
  background: var(--brand);
  border-radius: 999px;
}

/* FIX: search bar spacing tightened */
.search-section{margin-bottom:24px!important;}
.catalog{margin-top:0!important;}

/* FIX: hero-to-search excessive top spacing */
.hero,
.hero-section{
  padding-bottom:40px!important;
}
.search-section{
  margin-top:-20px!important;
}

/* TUNE: slightly tighter hero-search spacing */
.hero,
.hero-section{
  padding-bottom:24px!important;
}
.search-section{
  margin-top:-32px!important;
}


/* --- Admin: modern course picker --- */
.assign-body{ color: var(--text); }
.course-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 860px){ .course-grid{ grid-template-columns: 1fr; } }

.course-pick{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.course-pick:hover{
  border-color: rgba(32,43,69,.28);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.course-pick input{ margin-top: 4px; flex: 0 0 auto; }
.course-pick__main{ flex: 1; min-width: 0; }
.course-pick__title{ font-weight: 800; line-height: 1.2; }
.course-pick__meta{ font-size: 12px; color: var(--muted); margin-top: 4px; }
.course-pick__path{
  font-size: 12px;
  color: rgba(31,41,55,.55);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-pick--checked{
  border-color: rgba(32,43,69,.55);
  box-shadow: 0 16px 34px rgba(32,43,69,.12);
}

/* keep legacy checklist usable */
.checklist{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.checkline{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--stroke); border-radius:14px; }
.checkline small{ margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.checkline span{ min-width: 0; flex: 1; }


/* --- EA Modal --- */
.ea-modal{ position:fixed; inset:0; z-index:9999; }
.ea-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.ea-modal__panel{
  position:relative;
  width:min(560px, calc(100% - 24px));
  margin: 70px auto;
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.ea-modal__dialog{
  position:relative;
  width:min(980px, calc(100% - 24px));
  max-height: calc(100vh - 120px);
  overflow:auto;
  margin: 70px auto;
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.ea-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ea-user-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.ea-user-row__meta{ display:flex; flex-direction:column; gap:2px; }
.ea-user-row__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }



/* ---- Admin Dashboard (Analytics) ---- */
.metric-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:14px;
}
@media (max-width: 980px){
  .metric-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 520px){
  .metric-grid{ grid-template-columns: 1fr; }
}
.metric-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
.metric-ring{
  --pct: 0;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  margin: 0 auto;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    conic-gradient(rgba(120, 40, 80, 0.95) calc(var(--pct) * 1%), rgba(255,255,255,0.12) 0);
}
.metric-ring::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius:999px;
  background: rgba(15,23,42,0.92);
  border: 1px solid rgba(255,255,255,0.10);
}
.metric-ring__inner{
  position: relative;
  z-index: 1;
  text-align:center;
  padding: 4px 8px;
}
.metric-value{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.5px;
  color: rgba(255,255,255,0.96);
}
.metric-label{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}
.ea-canvas{
  width: 100%;
  height: 260px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}


/* --- Dashboard (Analitik) contrast fixes --- */
#panelDashboard .metric-card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}
#panelDashboard .metric-ring{
  background:
    conic-gradient(rgba(120, 40, 80, 0.95) calc(var(--pct) * 1%), rgba(15,23,42,0.10) 0);
}
#panelDashboard .metric-ring::after{
  background: rgba(15,23,42,0.94);
  border: 1px solid rgba(255,255,255,0.10);
}
#panelDashboard .ea-canvas{
  background: rgba(15,23,42,0.94);
  border: 1px solid rgba(15,23,42,0.10);
}



/* --- Profile page --- */
.profile-list{display:flex;flex-direction:column;gap:12px}
.profile-course{padding:18px 18px}
@media (max-width:560px){
  .profile-course{padding:14px 14px}
}


/* --- Course Create UI --- */
.ea-form{ display:flex; flex-direction:column; }
.ea-form-card{ padding: 16px; }
.ea-form-card__head{ display:flex; flex-direction:column; gap: 4px; }
.ea-form-card__title{ font-weight: 800; font-size: 18px; letter-spacing: -0.2px; }
.ea-form-card__sub{ color: var(--muted); font-size: 13px; }

.ea-dropzone{
  border: 1.5px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  cursor: pointer;
  user-select:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.ea-dropzone:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.30); }
.ea-dropzone.is-drag{ background: rgba(78,122,194,.18); border-color: rgba(78,122,194,.55); transform: translateY(-1px); }
.ea-dropzone__icon{ font-size: 22px; }
.ea-dropzone__title{ font-weight: 800; font-size: 16px; }
.ea-dropzone__sub{ color: var(--muted); font-size: 13px; }
.ea-dropzone__file{ margin-top: 6px; font-size: 12px; color: var(--muted); }
.ea-dropzone__change{ margin-top: 6px; font-size: 13px; }
.ea-link{ text-decoration: underline; font-weight: 700; }
.ea-file-hidden{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }

/* --- Dropzone: file selected view --- */
.ea-dropzone.is-selected{ cursor: default; }
.ea-dropzone.is-selected .ea-dropzone__icon,
.ea-dropzone.is-selected .ea-dropzone__title,
.ea-dropzone.is-selected .ea-dropzone__sub{ display:none; }
.ea-dropzone.is-selected .ea-dropzone__file{
  margin-top: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--text, #0f172a);
}

.ea-details{ padding: 0; overflow:hidden; }
.ea-details__summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 16px;
  cursor:pointer;
}
.ea-details__summary::-webkit-details-marker{ display:none; }
.ea-details__chev{ font-size: 18px; color: var(--muted); transition: transform .16s ease; }
.ea-details[open] .ea-details__chev{ transform: rotate(180deg); }
.ea-details__body{ padding: 0 16px 16px; border-top: 1px solid var(--stroke); }

.report-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.report-summary-card{
  display:block;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,247,251,.98));
}
.report-summary-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.report-tenant-hint{
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.08);
  background: rgba(32,43,69,.04);
}
.report-toolbar-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:16px;
  align-items:end;
}
.report-field{ min-width: 0; }
.report-field--wide{ grid-column: span 1; }
.report-switch{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background:#fff;
  cursor:pointer;
  min-height: 52px;
}
.report-switch input{ width:18px; height:18px; accent-color: var(--primary); }
.report-switch strong{ display:block; font-size:14px; color: var(--primary); }
.report-switch .muted{ display:block; font-size:12px; margin-top:2px; }
.report-stats-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}
.report-stats-grid .pill2{
  width:100%;
  justify-content:center;
  min-height:56px;
  font-size:13px;
}
.report-summary-card__footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:16px;
}
.report-summary-text{
  flex: 1 1 420px;
  line-height:1.7;
}
.report-export-note{ font-size: 12px; margin-top:10px; }
.report-export-menu{
  position:relative;
  margin-left:auto;
}
.report-export-menu summary{ list-style:none; }
.report-export-menu summary::-webkit-details-marker{ display:none; }
.report-export-menu__summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 18px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  box-shadow: 0 10px 24px rgba(32,43,69,.10);
}
.report-export-menu__summary:hover{ transform:translateY(-1px); opacity:.97; }
.report-export-menu[open] .report-export-menu__summary span{ transform:rotate(180deg); }
.report-export-menu__summary span{ transition: transform .16s ease; }
.report-export-menu__panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:210px;
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: 0 20px 38px rgba(0,0,0,.12);
  padding:8px;
  z-index:20;
}
.report-export-menu__item{
  width:100%;
  border:0;
  border-radius:12px;
  padding:11px 12px;
  background:transparent;
  color:var(--primary);
  text-align:left;
  font-weight:600;
  cursor:pointer;
}
.report-export-menu__item:hover{ background: rgba(32,43,69,.06); }
.report-export-menu--inline{ margin-left:0; }
.report-accordion{ margin-top: 14px; }
.report-accordion__meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
.report-section-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.report-section-toolbar--split{ justify-content:space-between; }
.report-section-search{ min-width: min(100%, 360px); }
.report-table-wrap{ overflow:auto; margin-top:14px; }
.report-empty{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--stroke);
  background: rgba(32,43,69,.03);
  color: var(--muted);
  font-size: 13px;
}
.report-cell-text{
  display:block;
  max-width: 420px;
  white-space: normal;
  line-height: 1.5;
}
.report-cell-compact{
  display:block;
  max-width: 240px;
  white-space: normal;
  line-height: 1.45;
}
.report-subline{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.report-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(78,122,194,.10);
  border: 1px solid rgba(78,122,194,.18);
  font-size: 11px;
  font-weight: 600;
}
.report-tag.is-muted{
  background: rgba(31,41,55,.05);
  border-color: rgba(31,41,55,.08);
  color: var(--muted);
}
.report-tag--soft{ opacity:.92; }
.report-tag.is-great{
  background: rgba(32, 150, 95, .12);
  border-color: rgba(32, 150, 95, .22);
  color: #0f6b43;
}
.report-tag.is-good{
  background: rgba(78, 122, 194, .11);
  border-color: rgba(78, 122, 194, .2);
  color: #274d8a;
}
.report-tag.is-risk{
  background: rgba(217, 119, 6, .12);
  border-color: rgba(217, 119, 6, .24);
  color: #9a5b00;
}
.report-tag.is-done{
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .24);
  color: #0f766e;
}
.report-status-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.report-link{
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
  word-break: break-word;
}
.report-link:hover{ opacity: .9; }
.report-task-summary-row td{ vertical-align:top; }
.report-task-summary-row.is-open{ background: rgba(32,43,69,.03); }
.report-task-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:102px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(32,43,69,.18);
  background:#fff;
  color:var(--primary);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.report-task-toggle:hover{ background: rgba(32,43,69,.06); }
.report-task-detail-row td{
  background: rgba(32,43,69,.03);
  border-top:0;
  padding-top:0;
}
.report-inline-detail{
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(32,43,69,.08);
  background:#fff;
}
.report-inline-detail__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.report-kv{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(246,247,251,.88);
  border: 1px solid rgba(32,43,69,.06);
}
.report-kv--full{ grid-column: 1 / -1; }
.report-kv__label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.report-kv__value{
  display:block;
  margin-top: 6px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}
@media (max-width: 1100px){
  .report-toolbar-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-stats-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .report-summary-card__head,
  .report-summary-card__footer,
  .report-section-toolbar,
  .report-section-toolbar--split{ align-items:stretch; }
  .report-export-menu,
  .report-export-menu--inline{ width:100%; margin-left:0; }
  .report-export-menu__summary{ width:100%; }
  .report-export-menu__panel{ position:static; min-width:0; margin-top:10px; }
  .report-accordion__meta{ gap: 8px; }
  .report-inline-detail__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .report-toolbar-grid,
  .report-stats-grid{ grid-template-columns: 1fr; }
  .report-section-search{ min-width: 100%; }
}


@media (max-width: 560px){
  .ea-actions{ flex-direction: column; align-items: stretch; }
  .ea-actions .btn{ width: 100%; }
}

/* === Eğitim Kaydı: ilk ekran iki kart === */
.ea-cc-choiceBig{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
}
.ea-cc-choiceBig:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.ea-cc-choiceBig__top{ display:flex; gap:10px; align-items:flex-start; }
.ea-cc-choiceBig__title{ font-weight:800; }
.ea-cc-choiceBig:focus{ outline:none; box-shadow: 0 0 0 2px rgba(0,0,0,.10) inset; }

/* === SCORM Builder overlay === */
.ea-cc-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  display:flex;
  flex-direction:column;
}
.ea-cc-overlay__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background: #fff;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.ea-cc-overlay__title{ font-weight:900; }
.ea-cc-overlay__actions{ display:flex; gap:10px; align-items:center; }
.ea-cc-overlay__body{ flex:1; padding:12px; }
#cc_builder_overlay_iframe{
  width:100%;
  height:100%;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
}
body.ea-cc-overlay-open{ overflow:hidden; }

/* Progress bar */
.ea-progressBar{
  width:100%;
  height:12px;
  border-radius:999px;
  background: rgba(15,23,42,.10);
  overflow:hidden;
}
.ea-progressBar__fill{
  height:100%;
  border-radius:999px;
  background: rgba(37,99,235,.70);
  transition: width .25s ease;
}


/* Overlay scroll fix */
.ea-cc-overlay{ min-height:100vh; }
.ea-cc-overlay__body{ flex:1; overflow:auto; -webkit-overflow-scrolling: touch; }
#cc_upload_overlay_mount{ min-height: 100%; }


.course-card.is-scheduled{
  border: 2px solid #7a1f3d;
  box-shadow: 0 18px 44px rgba(122,31,61,.18);
}
.course-card.is-scheduled .badge{
  background: rgba(122,31,61,.12);
  color: #7a1f3d;
}
.ea-schedule-card{
  border:1px solid rgba(32,43,69,.10);
  background:linear-gradient(180deg, rgba(245,247,251,.9), rgba(255,255,255,1));
}
.ea-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  cursor:pointer;
}
.ea-switch input{ width:18px; height:18px; }
.ea-info-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(120,40,80,.10);
  color:#7a1f3d;
}
.profile-course.is-scheduled{
  border:2px solid #7a1f3d;
}
.profile-course.is-assigned{
  border:2px solid var(--primary);
}

.ea-mail-modal{
  width:min(760px, calc(100% - 24px));
}
.ea-mail-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.ea-mail-textarea{
  min-height: 240px;
}
@media (max-width: 760px){
  .ea-mail-grid{ grid-template-columns: 1fr; }
}


/* === Assignment Mail Modal Scroll Fix === */
.ea-mail-modal{
  max-height:90vh;
  display:flex;
  flex-direction:column;
}

.ea-mail-modal .ea-modal__head{
  flex-shrink:0;
}

.ea-mail-grid{
  overflow-y:auto;
  max-height:55vh;
  padding-right:6px;
}

.ea-mail-actions{
  flex-shrink:0;
  margin-top:10px;
}

.ea-mail-textarea{
  min-height:140px;
}


/* Assignment mail actions visibility fix */
.ea-mail-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  flex-shrink:0;
}


/* Assignment mail modal action buttons final fix */
.ea-mail-modal{
  position:relative;
}
.ea-mail-actions{
  display:flex !important;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  flex-shrink:0;
  position:relative;
  z-index:2;
}



/* Assignment mail modal final action bar fix */
.ea-mail-modal{
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.ea-mail-grid{
  overflow-y: auto;
  max-height: 52vh;
  padding-right: 6px;
}
.ea-mail-textarea{
  min-height: 150px;
}
.ea-mail-actions{
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 4px;
  margin-top: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 24%);
  border-top: 1px solid rgba(32,43,69,.10);
}
.ea-mail-btn{
  min-width: 170px;
  min-height: 46px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(15,23,42,.12);
  border: 1px solid transparent;
}
.ea-mail-btn:disabled{
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}
.ea-mail-btn-send{
  background: #243f7a;
  color: #fff;
  border-color: #243f7a;
}
.ea-mail-btn-send:hover{
  background: #1c315f;
  border-color: #1c315f;
}
.ea-mail-btn-skip{
  background: #8f2f63;
  color: #fff;
  border-color: #8f2f63;
}
.ea-mail-btn-skip:hover{
  background: #7b2754;
  border-color: #7b2754;
}


/* Assignment mail action clickability fix */
.ea-mail-actions{
  position: sticky;
  z-index: 30 !important;
  pointer-events: auto !important;
}
.ea-mail-actions .ea-mail-btn{
  position: relative;
  z-index: 31 !important;
  pointer-events: auto !important;
}
.ea-mail-modal,
.ea-mail-modal *{
  pointer-events: auto;
}


#adminTopTabs [hidden], .premium-nav [hidden]{ display:none !important; }

.nav-drawer .premium-nav{justify-content:flex-start; flex:0 0 auto;}

.design-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr);gap:18px}
.design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.design-side{display:flex;flex-direction:column}
.design-preview{border:1px solid rgba(32,43,69,.12);border-radius:20px;padding:18px;background:linear-gradient(180deg,#fbfcff,#fff);box-shadow:0 8px 22px rgba(15,23,42,.04)}
.design-preview__top{display:flex;align-items:center;gap:14px}
.design-preview__favicon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#202B45,#7B1C3F);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.design-preview__logo{font-weight:800;letter-spacing:.04em;color:#202b45}
.design-preview__mail{margin-top:16px;padding:10px 12px;border:1px dashed rgba(32,43,69,.18);border-radius:14px;background:#fff;color:#202b45;font-size:13px}
.design-suggestions{display:grid;gap:10px}
.design-suggestion{display:grid;gap:4px;padding:12px 14px;border:1px solid rgba(32,43,69,.1);border-radius:16px;background:#fff}
.design-suggestion strong{color:#202b45}
.design-suggestion span{font-size:13px;color:#6b7280}
.design-status{margin-top:16px;padding:12px 14px;border-radius:14px;font-size:13px;border:1px solid rgba(16,185,129,.24);background:rgba(16,185,129,.08);color:#0f766e}
.design-status.is-error{border-color:rgba(244,63,94,.24);background:rgba(244,63,94,.08);color:#be123c}
.design-theme-card{margin-top:18px;padding:16px;border:1px solid rgba(32,43,69,.10);border-radius:20px;background:linear-gradient(180deg,#fbfcff,#fff)}
.design-theme-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.theme-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.theme-swatch{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid rgba(32,43,69,.10);background:#fff;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.theme-swatch:hover{transform:translateY(-1px);border-color:rgba(32,43,69,.24);box-shadow:0 12px 20px rgba(15,23,42,.06)}
.theme-swatch.is-selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(32,43,69,.10)}
.theme-swatch__dot{width:28px;height:28px;border-radius:999px;flex:0 0 auto;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),0 10px 18px rgba(15,23,42,.12)}
.theme-swatch__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.theme-swatch__name{font-size:13px;font-weight:700;color:var(--text)}
.theme-swatch__hex{font-size:12px;color:var(--muted)}
.color-input{padding:6px 8px;min-height:48px}
.color-input::-webkit-color-swatch-wrapper{padding:0}
.color-input::-webkit-color-swatch{border:none;border-radius:12px}
.color-input::-moz-color-swatch{border:none;border-radius:12px}
.design-preview__theme{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.design-preview__chip,.design-preview__cta{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:999px;font-size:12px;font-weight:700}
.design-preview__chip{border:1px solid rgba(32,43,69,.14);background:#fff;color:var(--primary)}
.design-preview__cta{background:var(--primary);color:#fff;box-shadow:0 12px 20px rgba(32,43,69,.16)}
@media (max-width: 1100px){.design-layout{grid-template-columns:1fr}.design-grid{grid-template-columns:1fr}.theme-palette{grid-template-columns:1fr}}