/* =========================================================
   SKYO PROPOSAL GENERATOR - CORE DESIGN SYSTEM
   Brand: black + orange editorial agency system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Castoro+Titling&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* ---- Brand colors ---- */
  --c-black: #0a0a0a;
  --c-black-soft: #141414;
  --c-ink: #17140f;
  --c-orange: #ff4d1c;
  --c-orange-dark: #e0400f;
  --c-orange-tint: #fdece2;
  --c-orange-tint-2: #fff2ea;

  --c-white: #ffffff;
  --c-gray-50: #fafaf9;
  --c-gray-100: #f5f4f2;
  --c-gray-200: #ece9e5;
  --c-gray-300: #ddd8d1;
  --c-gray-500: #8a8478;
  --c-gray-600: #6b6459;
  --c-gray-700: #4a453d;
  --c-gray-900: #1c1a16;

  --c-success: #1f8a4c;
  --c-success-tint: #e7f6ec;
  --c-danger: #d1372b;
  --c-danger-tint: #fbeae8;
  --c-warning: #b8720a;
  --c-warning-tint: #fdf1de;

  /* ---- Surfaces ---- */
  --surface-bg: var(--c-gray-50);
  --surface-card: var(--c-white);
  --surface-border: var(--c-gray-200);
  --surface-black: var(--c-black);

  /* ---- Typography ---- */
  --font-serif: 'Castoro Titling', 'Playfair Display', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20,20,20,.06);
  --shadow-md: 0 6px 20px rgba(20,20,20,.08);
  --shadow-lg: 0 20px 50px rgba(20,20,20,.14);
  --shadow-page: 0 10px 40px rgba(20,20,20,.12), 0 2px 8px rgba(20,20,20,.06);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 120ms;
  --t-med: 200ms;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--surface-bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 800; letter-spacing: -0.01em; }
p{ margin: 0; }
ul,ol{ margin: 0; padding: 0; }
a{ color: inherit; }
button{ font-family: inherit; }
img{ max-width: 100%; display: block; }
input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }
::selection{ background: var(--c-orange-tint); color: var(--c-orange-dark); }

.hidden{ display: none !important; }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}

/* =========================================================
   Layout shells
   ========================================================= */
#app{ min-height: 100vh; display: flex; flex-direction: column; }

.app-header{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-black);
  color: var(--c-white);
  border-bottom: 1px solid #000;
}
.app-header__brand{ display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; }
.app-header__logo{
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--c-orange);
  font-weight: 700;
}
.app-header__logo-img{ height: 26px; width: auto; display: block; }
.app-header__toolname{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gray-300);
  border-left: 1px solid rgba(255,255,255,.2);
  padding-left: var(--sp-3);
}
.app-header__nav{ display: flex; align-items: center; gap: var(--sp-2); }
.app-header__navlink{
  background: none; border: none; color: var(--c-gray-300);
  font-size: 13px; font-weight: 600; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.app-header__navlink:hover{ color: var(--c-white); background: rgba(255,255,255,.08); }
.app-header__navlink.is-active{ color: var(--c-white); background: rgba(255,255,255,.12); }

.app-main{ flex: 1; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 700; font-size: 14px; letter-spacing: -0.005em;
  padding: 11px 20px; border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary{ background: var(--c-orange); color: var(--c-white); }
.btn--primary:hover:not(:disabled){ background: var(--c-orange-dark); box-shadow: var(--shadow-md); }

.btn--dark{ background: var(--c-black); color: var(--c-white); }
.btn--dark:hover:not(:disabled){ background: #000; box-shadow: var(--shadow-md); }

.btn--outline{ background: transparent; color: var(--c-ink); border: 1.5px solid var(--c-gray-300); }
.btn--outline:hover:not(:disabled){ border-color: var(--c-ink); background: var(--c-gray-100); }

.btn--ghost{ background: transparent; color: var(--c-gray-700); }
.btn--ghost:hover:not(:disabled){ background: var(--c-gray-100); color: var(--c-ink); }

.btn--danger{ background: var(--c-danger-tint); color: var(--c-danger); }
.btn--danger:hover:not(:disabled){ background: #f6d3cf; }

.btn--sm{ padding: 7px 13px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn--lg{ padding: 15px 28px; font-size: 15.5px; border-radius: var(--r-lg); }
.btn--block{ width: 100%; }
.btn--icon{ padding: 9px; }

/* =========================================================
   Cards / surfaces
   ========================================================= */
.card{
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.card--pad-lg{ padding: var(--sp-8); }
.card--flat{ border: none; box-shadow: var(--shadow-sm); }
.card--dark{ background: var(--c-black); color: var(--c-white); border-color: #000; }

.tile{
  background: var(--c-gray-100);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.tile--dark{ background: var(--c-black); color: var(--c-white); }

/* =========================================================
   Badges / pills / eyebrows
   ========================================================= */
.eyebrow{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-orange);
}
.eyebrow--muted{ color: var(--c-gray-500); }

.badge{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.badge--critical{ background: var(--c-black); color: var(--c-white); }
.badge--high{ background: var(--c-orange-tint); color: var(--c-orange-dark); }
.badge--medium{ background: var(--c-gray-200); color: var(--c-gray-700); }
.badge--success{ background: var(--c-success-tint); color: var(--c-success); }
.badge--draft{ background: var(--c-warning-tint); color: var(--c-warning); }
.badge--sent{ background: #e6edfb; color: #2b52c4; }

.hr{ height: 1px; background: var(--surface-border); border: none; margin: var(--sp-6) 0; }

/* =========================================================
   Forms
   ========================================================= */
.field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-5); }
.field__label{ font-size: 13px; font-weight: 700; color: var(--c-gray-900); display: flex; align-items: center; gap: 6px; }
.field__label .req{ color: var(--c-orange); }
.field__hint{ font-size: 12px; color: var(--c-gray-500); }
.field__error{ font-size: 12px; color: var(--c-danger); font-weight: 600; display: none; align-items: center; gap: 4px; }
.field.has-error .field__error{ display: flex; }
.field.has-error .input, .field.has-error .textarea, .field.has-error select{ border-color: var(--c-danger); background: var(--c-danger-tint); }

.input, .textarea, select.input{
  width: 100%;
  border: 1.5px solid var(--c-gray-300);
  background: var(--c-white);
  border-radius: var(--r-md);
  padding: 11px 13px;
  font-size: 14px;
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .textarea:focus, select.input:focus{
  outline: none; border-color: var(--c-orange);
  box-shadow: 0 0 0 3px var(--c-orange-tint);
}
.textarea{ resize: vertical; min-height: 90px; line-height: 1.5; font-family: inherit; }
.textarea--sm{ min-height: 60px; }
.textarea--lg{ min-height: 140px; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
.form-grid--3{ grid-template-columns: 1fr 1fr 1fr; }
.field--full{ grid-column: 1 / -1; }

.checkbox-row, .radio-row{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.checkbox-row input, .radio-row input{ width: 16px; height: 16px; accent-color: var(--c-orange); }

.chip-select{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  border: 1.5px solid var(--c-gray-300); background: var(--c-white);
  border-radius: var(--r-pill); padding: 8px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover{ border-color: var(--c-orange); }
.chip.is-selected{ background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.toggle{ position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.toggle input{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle__track{
  position: absolute; inset: 0; background: var(--c-gray-300); border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease);
}
.toggle__track::after{
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: var(--c-white); border-radius: 50%; transition: transform var(--t-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle__track{ background: var(--c-orange); }
.toggle input:checked + .toggle__track::after{ transform: translateX(18px); }
.toggle input:focus-visible + .toggle__track{ outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* Rich text mini toolbar */
.rte{ border: 1.5px solid var(--c-gray-300); border-radius: var(--r-md); overflow: hidden; background: var(--c-white); }
.rte:focus-within{ border-color: var(--c-orange); box-shadow: 0 0 0 3px var(--c-orange-tint); }
.rte__toolbar{ display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--c-gray-200); background: var(--c-gray-50); flex-wrap: wrap; }
.rte__btn{
  border: none; background: transparent; width: 28px; height: 28px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--c-gray-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.rte__btn:hover{ background: var(--c-gray-200); color: var(--c-ink); }
.rte__btn.is-active{ background: var(--c-black); color: var(--c-white); }
.rte__area{
  min-height: 130px; padding: 12px 14px; font-size: 14px; line-height: 1.6; outline: none;
}
.rte__area:empty::before{ content: attr(data-placeholder); color: var(--c-gray-500); }
.rte__area ul{ margin: 8px 0; padding-left: 22px; list-style: disc; }
.rte__area ol{ margin: 8px 0; padding-left: 22px; list-style: decimal; }
.rte__area h3{ font-size: 16px; margin: 10px 0 4px; }
.rte__area p{ margin: 0 0 8px; }

/* =========================================================
   Dashboard
   ========================================================= */
.dashboard{ max-width: 1180px; margin: 0 auto; padding: var(--sp-10) var(--sp-6) var(--sp-20); }
.dashboard-hero{
  background: var(--c-black); color: var(--c-white);
  border-radius: var(--r-xl); padding: var(--sp-12) var(--sp-10);
  position: relative; overflow: hidden; margin-bottom: var(--sp-8);
}
.dashboard-hero::after{
  content: ''; position: absolute; top: -20%; right: -10%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,77,28,.35), transparent 65%);
  pointer-events: none;
}
.dashboard-hero__eyebrow{ color: var(--c-orange); }
.dashboard-hero h1{
  font-family: var(--font-sans); font-size: 42px; line-height: 1.1; margin-top: var(--sp-3);
  max-width: 640px; position: relative;
}
.dashboard-hero p{ color: var(--c-gray-300); font-size: 16px; margin-top: var(--sp-4); max-width: 520px; position: relative; }
.dashboard-hero__actions{ display: flex; gap: var(--sp-3); margin-top: var(--sp-8); flex-wrap: wrap; position: relative; }

.stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-8); }
.stat-card{ background: var(--c-white); border: 1px solid var(--surface-border); border-radius: var(--r-lg); padding: var(--sp-5); }
.stat-card__value{ font-size: 32px; font-weight: 800; color: var(--c-ink); }
.stat-card__value .accent{ color: var(--c-orange); }
.stat-card__label{ font-size: 12.5px; color: var(--c-gray-600); font-weight: 600; margin-top: 4px; }

.quick-actions{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-10); }
.quick-action{
  background: var(--c-white); border: 1px solid var(--surface-border); border-radius: var(--r-lg);
  padding: var(--sp-5); cursor: pointer; text-align: left; transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.quick-action:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--c-gray-300); }
.quick-action__icon{
  width: 40px; height: 40px; border-radius: var(--r-md); background: var(--c-orange-tint); color: var(--c-orange-dark);
  display: flex; align-items: center; justify-content: center;
}
.quick-action__title{ font-size: 14.5px; font-weight: 700; }
.quick-action__desc{ font-size: 12.5px; color: var(--c-gray-600); }

.section-title{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }
.section-title h2{ font-size: 19px; }
.section-title .link{ font-size: 13px; font-weight: 700; color: var(--c-orange); cursor: pointer; background: none; border: none; }

.proposal-list{ display: flex; flex-direction: column; gap: var(--sp-3); }
.proposal-row{
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--c-white); border: 1px solid var(--surface-border); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); cursor: pointer; transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.proposal-row:hover{ box-shadow: var(--shadow-md); border-color: var(--c-gray-300); }
.proposal-row__icon{
  width: 44px; height: 44px; border-radius: var(--r-md); background: var(--c-black); color: var(--c-orange);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.proposal-row__body{ flex: 1; min-width: 0; }
.proposal-row__title{ font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proposal-row__meta{ font-size: 12.5px; color: var(--c-gray-500); margin-top: 2px; }
.proposal-row__actions{ display: flex; gap: var(--sp-2); flex-shrink: 0; }

.empty-state{
  text-align: center; padding: var(--sp-12) var(--sp-6); border: 1.5px dashed var(--c-gray-300); border-radius: var(--r-lg);
  color: var(--c-gray-600);
}
.empty-state__icon{ font-size: 30px; margin-bottom: var(--sp-3); }
.empty-state h3{ font-size: 15px; color: var(--c-ink); margin-bottom: 4px; }
.empty-state p{ font-size: 13px; max-width: 360px; margin: 0 auto; }

/* =========================================================
   Wizard shell
   ========================================================= */
.wizard{ display: flex; flex-direction: column; height: 100vh; }
.wizard-topbar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6); background: var(--c-white); border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
}
.wizard-topbar__left{ display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.wizard-topbar__title{ font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.wizard-topbar__status{ font-size: 12px; color: var(--c-gray-500); display: flex; align-items: center; gap: 6px; }
.status-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--c-gray-300); flex-shrink: 0; }
.status-dot.is-saving{ background: var(--c-warning); animation: pulse 1s infinite; }
.status-dot.is-saved{ background: var(--c-success); }
.status-dot.is-unsaved{ background: var(--c-orange); }
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .4; } }
.wizard-topbar__actions{ display: flex; gap: var(--sp-2); flex-shrink: 0; }

.wizard-progress{
  display: flex; align-items: stretch; overflow-x: auto; background: var(--c-gray-50);
  border-bottom: 1px solid var(--surface-border); flex-shrink: 0; padding: 0 var(--sp-4);
  scrollbar-width: thin;
}
.wizard-step{
  display: flex; align-items: center; gap: 8px; padding: var(--sp-3) var(--sp-3);
  font-size: 12.5px; font-weight: 700; color: var(--c-gray-500); white-space: nowrap;
  cursor: pointer; border-bottom: 2.5px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  background: none; border-left: none; border-right: none; border-top: none;
}
.wizard-step__num{
  width: 20px; height: 20px; border-radius: 50%; background: var(--c-gray-200); color: var(--c-gray-600);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; flex-shrink: 0;
}
.wizard-step:hover{ color: var(--c-ink); }
.wizard-step.is-active{ color: var(--c-ink); border-color: var(--c-orange); }
.wizard-step.is-active .wizard-step__num{ background: var(--c-orange); color: var(--c-white); }
.wizard-step.is-complete .wizard-step__num{ background: var(--c-black); color: var(--c-orange); }
.wizard-step.is-complete .wizard-step__num::after{ content: '✓'; }
.wizard-step.is-invalid .wizard-step__num{ background: var(--c-danger-tint); color: var(--c-danger); }

.wizard-body{ flex: 1; overflow: hidden; display: flex; }
.wizard-editor{ flex: 1 1 50%; overflow-y: auto; padding: var(--sp-8) var(--sp-10) var(--sp-16); max-width: 720px; margin: 0 auto; width: 100%; }
.wizard-preview{
  flex: 1 1 50%; overflow-y: auto; background: var(--c-gray-200); border-left: 1px solid var(--surface-border);
  padding: var(--sp-8) var(--sp-6);
}
.wizard-preview__hint{ text-align: center; font-size: 11.5px; color: var(--c-gray-500); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.step-head{ margin-bottom: var(--sp-8); }
.step-head .eyebrow{ margin-bottom: var(--sp-2); }
.step-head h2{ font-size: 26px; }
.step-head p{ color: var(--c-gray-600); margin-top: var(--sp-2); font-size: 14px; }

.wizard-footer{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); background: var(--c-white); border-top: 1px solid var(--surface-border);
  flex-shrink: 0;
}

/* =========================================================
   Service cards
   ========================================================= */
.service-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.service-card{
  border: 1.5px solid var(--surface-border); border-radius: var(--r-lg); padding: var(--sp-5);
  cursor: pointer; transition: all var(--t-fast) var(--ease); background: var(--c-white); position: relative;
}
.service-card:hover{ border-color: var(--c-gray-300); box-shadow: var(--shadow-sm); }
.service-card.is-selected{ border-color: var(--c-orange); background: var(--c-orange-tint-2); box-shadow: 0 0 0 3px rgba(255,77,28,.08); }
.service-card__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.service-card__icon{
  width: 42px; height: 42px; border-radius: var(--r-md); background: var(--c-black); color: var(--c-orange);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-card.is-selected .service-card__icon{ background: var(--c-orange); color: var(--c-white); }
.service-card__name{ font-size: 15.5px; font-weight: 800; margin-top: var(--sp-3); }
.service-card__desc{ font-size: 13px; color: var(--c-gray-600); margin-top: 4px; line-height: 1.5; }
.service-card__config-link{ margin-top: var(--sp-3); font-size: 12.5px; font-weight: 700; color: var(--c-orange); display: none; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 0; }
.service-card.is-selected .service-card__config-link{ display: inline-flex; }

.check-circle{
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-gray-300); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all var(--t-fast) var(--ease);
}
.service-card.is-selected .check-circle{ background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); }

.service-config{
  border: 1px dashed var(--c-gray-300); border-radius: var(--r-lg); padding: var(--sp-5);
  margin-top: var(--sp-4); background: var(--c-gray-50);
}
.service-config__head{ display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-5); }
.service-config__head .service-card__icon{ width: 32px; height: 32px; }
.service-config__head h3{ font-size: 15px; }

/* =========================================================
   Builder tables (deliverables, timeline, pricing)
   ========================================================= */
.builder-list{ display: flex; flex-direction: column; gap: var(--sp-3); }
.builder-item{
  border: 1px solid var(--surface-border); border-radius: var(--r-md); padding: var(--sp-4);
  background: var(--c-white); display: flex; gap: var(--sp-3); align-items: flex-start;
}
.builder-item__drag{ color: var(--c-gray-300); cursor: grab; padding-top: 6px; user-select: none; }
.builder-item__body{ flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.builder-item__actions{ display: flex; flex-direction: column; gap: 4px; }
.icon-btn{
  width: 28px; height: 28px; border-radius: var(--r-sm); border: none; background: transparent;
  color: var(--c-gray-500); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover{ background: var(--c-gray-100); color: var(--c-ink); }
.icon-btn.danger:hover{ background: var(--c-danger-tint); color: var(--c-danger); }

.add-row-btn{
  border: 1.5px dashed var(--c-gray-300); border-radius: var(--r-md); background: transparent;
  padding: var(--sp-3); font-size: 13px; font-weight: 700; color: var(--c-gray-600); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  transition: all var(--t-fast) var(--ease);
}
.add-row-btn:hover{ border-color: var(--c-orange); color: var(--c-orange); background: var(--c-orange-tint-2); }

.price-summary{ background: var(--c-black); color: var(--c-white); border-radius: var(--r-lg); padding: var(--sp-6); margin-top: var(--sp-6); }
.price-summary__row{ display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; color: var(--c-gray-300); }
.price-summary__row.total{ color: var(--c-white); font-weight: 800; font-size: 18px; padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--sp-2); }
.price-summary__row .accent{ color: var(--c-orange); }

/* =========================================================
   Asset library
   ========================================================= */
.asset-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-3); }
.asset-tile{
  border: 1px solid var(--surface-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-white);
  cursor: pointer; transition: box-shadow var(--t-fast) var(--ease); position: relative;
}
.asset-tile:hover{ box-shadow: var(--shadow-md); }
.asset-tile.is-selected{ outline: 2px solid var(--c-orange); outline-offset: -2px; }
.asset-tile__thumb{ aspect-ratio: 4/3; background: var(--c-gray-100); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.asset-tile__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.asset-tile__name{ font-size: 11px; padding: 6px 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--surface-border); }
.asset-tile__actions{ position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.asset-tile:hover .asset-tile__actions{ opacity: 1; }
.asset-tile__actions .icon-btn{ background: rgba(10,10,10,.6); color: #fff; width: 22px; height: 22px; }
.asset-tile__actions .icon-btn:hover{ background: rgba(10,10,10,.85); }

.dropzone{
  border: 1.5px dashed var(--c-gray-300); border-radius: var(--r-lg); padding: var(--sp-8);
  text-align: center; cursor: pointer; transition: all var(--t-fast) var(--ease); background: var(--c-gray-50);
}
.dropzone:hover, .dropzone.is-dragover{ border-color: var(--c-orange); background: var(--c-orange-tint-2); }
.dropzone__icon{ font-size: 26px; margin-bottom: var(--sp-2); }
.dropzone p{ font-size: 13px; color: var(--c-gray-600); }
.dropzone strong{ color: var(--c-orange); }

.asset-picker-slot{
  border: 1px solid var(--surface-border); border-radius: var(--r-md); padding: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3); background: var(--c-white);
}
.asset-picker-slot__thumb{ width: 56px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--c-gray-100); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.asset-picker-slot__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.asset-picker-slot__body{ flex: 1; min-width: 0; }
.asset-picker-slot__title{ font-size: 12.5px; font-weight: 700; }
.asset-picker-slot__sub{ font-size: 11.5px; color: var(--c-gray-500); }

/* =========================================================
   Review step
   ========================================================= */
.review-section{ border: 1px solid var(--surface-border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-4); }
.review-section__head{
  display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5);
  background: var(--c-gray-50); cursor: pointer;
}
.review-section__head h3{ font-size: 14px; display: flex; align-items: center; gap: 8px; }
.review-section__body{ padding: var(--sp-5); font-size: 13.5px; color: var(--c-gray-700); }
.review-section__body dl{ display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; }
.review-section__body dt{ font-weight: 700; color: var(--c-gray-500); }
.review-section__body dd{ margin: 0; }

/* =========================================================
   Toasts / modals / dialogs
   ========================================================= */
.toast-stack{ position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }
.toast{
  background: var(--c-black); color: var(--c-white); padding: 12px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
  animation: toast-in var(--t-med) var(--ease);
  max-width: 340px;
}
.toast.success{ background: #103d21; }
.toast.error{ background: #4a1712; }
.toast::before{ content: '●'; color: var(--c-orange); }
@keyframes toast-in{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }

.modal-overlay{
  position: fixed; inset: 0; background: rgba(10,10,10,.55); z-index: 150;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  animation: fade-in var(--t-fast) var(--ease);
}
@keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
.modal{
  background: var(--c-white); border-radius: var(--r-lg); max-width: 480px; width: 100%;
  max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.modal--lg{ max-width: 760px; }
.modal__head{ display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--surface-border); }
.modal__head h3{ font-size: 16px; }
.modal__body{ padding: var(--sp-6); }
.modal__foot{ display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--surface-border); }
.modal__close{ background: none; border: none; cursor: pointer; color: var(--c-gray-500); font-size: 18px; padding: 4px; }
.modal__close:hover{ color: var(--c-ink); }

/* =========================================================
   Tooltip
   ========================================================= */
[data-tooltip]{ position: relative; }
[data-tooltip]:hover::after{
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--c-black); color: var(--c-white); font-size: 11px; padding: 5px 9px; border-radius: 6px;
  white-space: nowrap; z-index: 30; font-weight: 600;
}

/* =========================================================
   Settings / template picker
   ========================================================= */
.template-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.template-option{ border: 1.5px solid var(--surface-border); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: all var(--t-fast) var(--ease); }
.template-option:hover{ border-color: var(--c-gray-300); }
.template-option.is-selected{ border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,77,28,.1); }
.template-option__preview{ height: 130px; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; gap: 6px; }
.template-option__name{ padding: 10px 14px; font-size: 13px; font-weight: 700; border-top: 1px solid var(--surface-border); }

.preview-modern{ background: linear-gradient(150deg,#0a0a0a,#241109); }
.preview-modern .bar{ height: 8px; width: 60%; background: var(--c-orange); border-radius: 3px; }
.preview-modern .bar2{ height: 5px; width: 40%; background: rgba(255,255,255,.4); border-radius: 3px; }

.preview-corporate{ background: var(--c-gray-100); border-bottom: 4px solid var(--c-black); }
.preview-corporate .bar{ height: 6px; width: 70%; background: var(--c-black); border-radius: 2px; }
.preview-corporate .bar2{ height: 4px; width: 45%; background: var(--c-gray-500); border-radius: 2px; }

.preview-creative{ background: radial-gradient(circle at 30% 30%, var(--c-orange), #1c0a02 70%); }
.preview-creative .bar{ height: 10px; width: 50%; background: #fff; border-radius: 999px; }
.preview-creative .bar2{ height: 6px; width: 30%; background: rgba(255,255,255,.6); border-radius: 999px; }

/* Color swatch input */
.swatch-input{ display: flex; align-items: center; gap: 10px; }
.swatch-input input[type=color]{ width: 40px; height: 40px; border: 1.5px solid var(--c-gray-300); border-radius: var(--r-md); padding: 2px; cursor: pointer; background: none; }

/* Loading skeleton for logos */
.logo-upload{
  width: 100%; min-height: 110px; border: 1.5px dashed var(--c-gray-300); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;
  background: var(--c-gray-50); flex-direction: column; gap: 6px; color: var(--c-gray-500); font-size: 12.5px; font-weight: 600;
}
.logo-upload img{ max-width: 100%; max-height: 106px; object-fit: contain; }
.logo-upload:hover{ border-color: var(--c-orange); }

/* Confirm dialog specific */
.confirm-icon{ width: 44px; height: 44px; border-radius: 50%; background: var(--c-danger-tint); color: var(--c-danger); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); font-size: 18px; }