/* ============================================================================
   SmartPekua — সাইট কম্পোনেন্ট
   tokens.css এর ভ্যারিয়েবলের উপর ভিত্তি করে। এখানে কোনো হার্ডকোড রঙ নেই।
   লোড ক্রম:  fonts.css → tokens.css → site.css → map.css
   ============================================================================ */

/* ── লেআউট শেল ─────────────────────────────────────────────────────── */
body { display: flex; flex-direction: column; min-height: 100vh; }
main  { flex: 1 0 auto; }

.sp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sp-primary-500); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--sp-radius-md) 0;
  font-weight: 600;
}
.sp-skip:focus { left: 0; }

.sp-section { padding: var(--sp-12) 0; }
.sp-section--tight { padding: var(--sp-8) 0; }
.sp-section--subtle { background: var(--sp-bg-subtle); }

.sp-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.sp-section__head h2 { margin: 0; }
.sp-section__head h2::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--sp-gold-500); border-radius: 2px; margin-top: var(--sp-2);
}

/* ── হেডার ─────────────────────────────────────────────────────────── */
.sp-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--sp-bg-surface);
  border-bottom: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow-sm);
}
.sp-header__bar {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--sp-header-h);
}
.sp-logo { display: flex; align-items: center; flex: 0 0 auto; }
.sp-logo img { height: 46px; width: auto; }
.sp-header__spacer { flex: 1 1 auto; }

.sp-header__actions { display: flex; align-items: center; gap: var(--sp-1); }

.sp-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: 44px; min-height: 44px;                   /* টাচ টার্গেট */
  padding: 0 var(--sp-2);
  background: transparent; border: 0; border-radius: var(--sp-radius-md);
  color: var(--sp-text-secondary); cursor: pointer;
  font-family: inherit; font-size: var(--sp-fs-sm); font-weight: 600;
  text-decoration: none;
  transition: background var(--sp-dur-base) var(--sp-ease), color var(--sp-dur-base) var(--sp-ease);
}
.sp-iconbtn:hover { background: var(--sp-bg-subtle); color: var(--sp-primary-600); }

/* ── প্রধান ন্যাভিগেশন ──────────────────────────────────────────────── */
.sp-nav { display: none; }
.sp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-1); }
.sp-nav a, .sp-nav > ul > li > button {
  display: block; padding: var(--sp-2) var(--sp-3);
  border: 0; background: transparent; cursor: pointer;
  color: var(--sp-text-primary); text-decoration: none;
  font-family: inherit; font-size: var(--sp-fs-sm); font-weight: 500;
  border-radius: var(--sp-radius-md); white-space: nowrap;
}
.sp-nav a:hover, .sp-nav a:focus-visible { background: var(--sp-primary-50); color: var(--sp-primary-700); }
.sp-nav a[aria-current="page"], .sp-nav .is-active > a {
  color: var(--sp-primary-600); background: var(--sp-primary-50); font-weight: 600;
}

/* ড্রপডাউন — hover ও keyboard দুটোতেই খোলে */
.sp-nav li { position: relative; }
.sp-nav ul ul {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: block; min-width: 230px; padding: var(--sp-2);
  flex-direction: column; gap: 0;
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--sp-dur-fast) var(--sp-ease),
              transform var(--sp-dur-fast) var(--sp-ease), visibility var(--sp-dur-fast);
}
.sp-nav li:hover > ul,
.sp-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.sp-nav ul ul a { padding: var(--sp-2) var(--sp-3); font-size: var(--sp-fs-sm); }

@media (min-width: 1024px) {
  .sp-nav { display: block; }
  .sp-burger { display: none; }
}

/* ── মোবাইল ড্রয়ার ─────────────────────────────────────────────────── */
.sp-drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.sp-drawer[open] { display: block; }
.sp-drawer__backdrop { position: absolute; inset: 0; background: var(--sp-overlay); border: 0; width: 100%; }
.sp-drawer__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: min(88vw, 340px); overflow-y: auto;
  background: var(--sp-bg-surface); padding: var(--sp-4);
  box-shadow: var(--sp-shadow-lg);
  animation: sp-slide-in var(--sp-dur-slow) var(--sp-ease-out);
}
@keyframes sp-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
.sp-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.sp-drawer nav ul { list-style: none; margin: 0; padding: 0; }
.sp-drawer nav > ul > li { border-bottom: 1px solid var(--sp-border); }
.sp-drawer nav a {
  display: block; padding: var(--sp-3) var(--sp-2); min-height: 44px;
  color: var(--sp-text-primary); text-decoration: none; font-weight: 500;
}
.sp-drawer nav > ul > li > span {
  display: block; padding: var(--sp-3) var(--sp-2) var(--sp-1);
  font-weight: 600; color: var(--sp-primary-600); font-size: var(--sp-fs-sm);
}
.sp-drawer nav ul ul a { padding-inline-start: var(--sp-5); font-size: var(--sp-fs-sm); font-weight: 400; }

/* ── বাটন ──────────────────────────────────────────────────────────── */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: .6rem 1.25rem;
  border: 0; border-radius: var(--sp-radius-md); cursor: pointer;
  font-family: var(--sp-font-body); font-size: var(--sp-fs-body); font-weight: 600;
  text-decoration: none; text-align: center;
  transition: background var(--sp-dur-base) var(--sp-ease), transform var(--sp-dur-fast) var(--sp-ease);
}
.sp-btn:active { transform: translateY(1px); }
.sp-btn--primary { background: var(--sp-primary-500); color: #fff; }
.sp-btn--primary:hover { background: var(--sp-primary-600); color: #fff; }
.sp-btn--accent  { background: var(--sp-accent-500); color: #fff; }
.sp-btn--accent:hover { background: var(--sp-accent-600); color: #fff; }
.sp-btn--ghost   { background: transparent; color: var(--sp-primary-600); box-shadow: inset 0 0 0 1.5px var(--sp-primary-400); }
.sp-btn--ghost:hover { background: var(--sp-primary-50); }
.sp-btn--danger  { background: var(--sp-danger-500); color: #fff; }
.sp-btn--danger:hover { background: var(--sp-danger-700); color: #fff; }
.sp-btn--sm { min-height: 36px; padding: .35rem .85rem; font-size: var(--sp-fs-sm); }
.sp-btn--block { width: 100%; }

/* ── কার্ড ─────────────────────────────────────────────────────────── */
.sp-card {
  display: flex; flex-direction: column;
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  box-shadow: var(--sp-shadow-sm);
  transition: box-shadow var(--sp-dur-base) var(--sp-ease),
              border-color var(--sp-dur-base) var(--sp-ease),
              transform var(--sp-dur-base) var(--sp-ease-out);
}
.sp-card--link:hover {
  box-shadow: var(--sp-shadow-md); border-color: var(--sp-primary-300);
  transform: translateY(-2px);
}
/* পুরো কার্ডটাই যখন <a> — তখন ভেতরের সব লেখা আন্ডারলাইন হয়ে যেত */
a.sp-card { text-decoration: none; color: inherit; }
a.sp-card:hover .sp-card__title { color: var(--sp-primary-600); }
.sp-card__body { padding: var(--sp-5); flex: 1; }
.sp-card__title { margin: 0 0 var(--sp-2); font-size: var(--sp-fs-h3); }
.sp-card__title a { color: inherit; text-decoration: none; }
.sp-card__title a:hover { color: var(--sp-primary-600); }
.sp-card__meta { margin: 0; font-size: var(--sp-fs-sm); color: var(--sp-text-secondary); }
.sp-card__foot {
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--sp-border);
  background: var(--sp-bg-subtle); font-size: var(--sp-fs-caption); color: var(--sp-text-muted);
}
.sp-card__media { aspect-ratio: 16 / 10; background: var(--sp-bg-subtle); }
.sp-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── গ্রিড ─────────────────────────────────────────────────────────── */
.sp-grid { display: grid; gap: var(--sp-4); }
.sp-grid--2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sp-grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sp-grid--4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sp-grid--6 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* ── দ্রুত সেবার টাইল ──────────────────────────────────────────────── */
.sp-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-6) var(--sp-3); min-height: 130px;
  background: var(--sp-bg-surface); border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg); text-decoration: none; text-align: center;
  color: var(--sp-text-primary); font-weight: 600;
  transition: all var(--sp-dur-base) var(--sp-ease);
}
.sp-tile:hover {
  border-color: var(--sp-primary-400); background: var(--sp-primary-50);
  color: var(--sp-primary-700); transform: translateY(-3px); box-shadow: var(--sp-shadow-md);
}
.sp-tile .sp-icon { color: var(--sp-primary-500); }
.sp-tile:hover .sp-icon { color: var(--sp-primary-600); }
.sp-tile--danger { border-color: var(--sp-danger-500); background: var(--sp-danger-100); color: var(--sp-danger-700); }
.sp-tile--danger .sp-icon { color: var(--sp-danger-500); }
.sp-tile--danger:hover { background: var(--sp-danger-500); color: #fff; border-color: var(--sp-danger-700); }
.sp-tile--danger:hover .sp-icon { color: #fff; }

/* ── ব্যাজ ─────────────────────────────────────────────────────────── */
.sp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .15rem .65rem; border-radius: var(--sp-radius-full);
  font-size: var(--sp-fs-caption); font-weight: 600; white-space: nowrap;
}
.sp-badge--primary { background: var(--sp-primary-100); color: var(--sp-primary-700); }
.sp-badge--accent  { background: var(--sp-accent-100);  color: var(--sp-accent-700); }
.sp-badge--success { background: var(--sp-success-100); color: var(--sp-success-700); }
.sp-badge--warning { background: var(--sp-warning-100); color: var(--sp-warning-700); }
.sp-badge--danger  { background: var(--sp-danger-100);  color: var(--sp-danger-700); }
.sp-badge--muted   { background: var(--sp-bg-subtle);   color: var(--sp-text-muted); }

/* ── টেবিল ─────────────────────────────────────────────────────────── */
.sp-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
  background: var(--sp-bg-surface);
}
.sp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.sp-table th, .sp-table td {
  padding: var(--sp-3) var(--sp-4); text-align: start;
  border-bottom: 1px solid var(--sp-border); vertical-align: top;
}
.sp-table thead th {
  background: var(--sp-primary-500); color: #fff; font-weight: 600;
  font-size: var(--sp-fs-sm); position: sticky; top: 0;
}
.sp-table tbody tr:last-child td { border-bottom: 0; }
.sp-table tbody tr:hover { background: var(--sp-primary-50); }

/* মোবাইলে টেবিল → কার্ড */
@media (max-width: 640px) {
  .sp-table--stack, .sp-table--stack thead, .sp-table--stack tbody,
  .sp-table--stack tr, .sp-table--stack th, .sp-table--stack td { display: block; }
  .sp-table--stack { min-width: 0; }
  .sp-table--stack thead { display: none; }
  .sp-table--stack tr {
    border-bottom: 1px solid var(--sp-border); padding: var(--sp-3) 0;
  }
  .sp-table--stack td { border: 0; padding: var(--sp-1) var(--sp-4); }
  .sp-table--stack td::before {
    content: attr(data-label) ": "; font-weight: 600; color: var(--sp-text-muted);
  }
  .sp-table--stack td:first-child::before { content: none; }
  .sp-table--stack td:first-child { font-weight: 600; font-size: var(--sp-fs-body-lg); }
}

/* ── ফর্ম ──────────────────────────────────────────────────────────── */
.sp-field { margin-bottom: var(--sp-4); }
.sp-label { display: block; margin-bottom: var(--sp-2); font-weight: 600; font-size: var(--sp-fs-sm); }
.sp-label .sp-opt { font-weight: 400; color: var(--sp-text-muted); }
.sp-input, .sp-select, .sp-textarea {
  width: 100%; min-height: 44px; padding: .6rem .9rem;
  font-family: var(--sp-font-body); font-size: var(--sp-fs-body);
  color: var(--sp-text-primary); background: var(--sp-bg-surface);
  border: 1.5px solid var(--sp-border-strong); border-radius: var(--sp-radius-md);
  transition: border-color var(--sp-dur-base) var(--sp-ease);
}
.sp-input:focus, .sp-select:focus, .sp-textarea:focus {
  outline: none; border-color: var(--sp-primary-400); box-shadow: var(--sp-shadow-focus);
}
.sp-textarea { min-height: 140px; resize: vertical; line-height: var(--sp-lh-body); }
.sp-hint { margin: var(--sp-1) 0 0; font-size: var(--sp-fs-caption); color: var(--sp-text-muted); }
.sp-error { margin: var(--sp-1) 0 0; font-size: var(--sp-fs-caption); color: var(--sp-danger-700); font-weight: 500; }
.sp-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ── অ্যালার্ট / ফ্ল্যাশ ─────────────────────────────────────────────── */
.sp-alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); margin-bottom: var(--sp-6);
  border-radius: var(--sp-radius-md); border-inline-start: 4px solid;
  font-size: var(--sp-fs-sm);
}
.sp-alert--success { background: var(--sp-success-100); border-color: var(--sp-success-500); color: var(--sp-success-700); }
.sp-alert--danger  { background: var(--sp-danger-100);  border-color: var(--sp-danger-500);  color: var(--sp-danger-700); }
.sp-alert--warning { background: var(--sp-warning-100); border-color: var(--sp-warning-500); color: var(--sp-warning-700); }
.sp-alert--info    { background: var(--sp-info-100);    border-color: var(--sp-info-500);    color: var(--sp-info-700); }

/* জরুরি ব্যানার — হেডারের উপরে */
.sp-urgent {
  background: var(--sp-danger-500); color: #fff;
  padding: var(--sp-3) 0; font-weight: 600; font-size: var(--sp-fs-sm);
}
.sp-urgent a { color: #fff; text-decoration: underline; }
.sp-urgent .sp-container { display: flex; gap: var(--sp-3); align-items: center; }

/* ── ব্রেডক্রাম্ব ───────────────────────────────────────────────────── */
.sp-crumbs { padding: var(--sp-3) 0; font-size: var(--sp-fs-sm); background: var(--sp-bg-subtle); }
.sp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sp-crumbs li { display: flex; align-items: center; gap: var(--sp-2); color: var(--sp-text-muted); }
.sp-crumbs li + li::before { content: "›"; color: var(--sp-text-muted); }
.sp-crumbs a { color: var(--sp-text-secondary); text-decoration: none; }
.sp-crumbs a:hover { color: var(--sp-primary-600); text-decoration: underline; }

/* ── হিরো ──────────────────────────────────────────────────────────── */
.sp-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #084B36 0%, #0B6E4F 55%, #0A4C60 100%);
  padding: var(--sp-16) 0 var(--sp-20);
}
.sp-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("/assets/patterns/hero-pattern.svg"); background-size: 120px;
  opacity: .55;
}
.sp-hero > * { position: relative; z-index: 1; }
.sp-hero h1 { color: #fff; font-size: var(--sp-fs-display); margin-bottom: var(--sp-2); }
.sp-hero p  { color: var(--sp-primary-100); font-size: var(--sp-fs-body-lg); margin-bottom: var(--sp-8); }

.sp-searchbar { display: flex; gap: var(--sp-2); max-width: 620px; }
.sp-searchbar .sp-input { border-color: transparent; }

.sp-wave { display: block; width: 100%; height: 70px; margin-top: -70px; position: relative; z-index: 1; }

/* ── পরিসংখ্যান ─────────────────────────────────────────────────────── */
.sp-stat {
  text-align: center; padding: var(--sp-5) var(--sp-3);
  background: var(--sp-bg-surface); border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
}
.sp-stat__value {
  display: block; font-family: var(--sp-font-display); font-weight: 700;
  font-size: var(--sp-fs-h1); line-height: 1.2; color: var(--sp-primary-600);
}
.sp-stat__label { display: block; margin-top: var(--sp-1); font-size: var(--sp-fs-sm); color: var(--sp-text-secondary); }

/* ── জরুরি নম্বরের সারি ─────────────────────────────────────────────── */
.sp-callrow {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4); border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg); background: var(--sp-bg-surface);
  margin-bottom: var(--sp-3);
}
.sp-callrow__info { flex: 1 1 200px; min-width: 0; }
.sp-callrow__name { display: block; font-weight: 600; font-size: var(--sp-fs-body-lg); }
.sp-callrow__note { display: block; font-size: var(--sp-fs-sm); color: var(--sp-text-secondary); }
.sp-callrow .sp-btn { flex: 0 0 auto; min-width: 140px; }
/* নম্বর সবসময় ল্যাটিনে — কপি করে ডায়াল করা যায় */
.sp-tel { font-family: var(--sp-font-latin); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ── পেজিনেশন ───────────────────────────────────────────────────────── */
.sp-pager { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; margin-top: var(--sp-8); }
.sp-pager__info { color: var(--sp-text-muted); font-size: var(--sp-fs-sm); }

/* ── ফিল্টার বার ────────────────────────────────────────────────────── */
.sp-filters {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end;
  padding: var(--sp-4); margin-bottom: var(--sp-6);
  background: var(--sp-bg-subtle); border-radius: var(--sp-radius-lg);
}
.sp-filters .sp-field { margin: 0; flex: 1 1 180px; }

/* ── প্রোজ (রিচ টেক্সট) ─────────────────────────────────────────────── */
.sp-prose { max-width: 68ch; }
.sp-prose h2 { margin-top: var(--sp-8); }
.sp-prose h3 { margin-top: var(--sp-6); }
.sp-prose ul, .sp-prose ol { padding-inline-start: var(--sp-6); margin-bottom: var(--sp-4); }
.sp-prose li { margin-bottom: var(--sp-2); }
.sp-prose img { border-radius: var(--sp-radius-md); margin: var(--sp-4) 0; }
.sp-prose blockquote {
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-5);
  border-inline-start: 4px solid var(--sp-gold-500);
  background: var(--sp-bg-subtle); border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0;
}
.sp-prose table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.sp-prose th, .sp-prose td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--sp-border); }

/* ── টিম / প্রতিষ্ঠাতা ──────────────────────────────────────────────── */
.sp-person { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.sp-person__photo {
  flex: 0 0 auto; width: 128px; height: 128px; border-radius: var(--sp-radius-full);
  object-fit: cover; background: var(--sp-bg-subtle);
  border: 3px solid var(--sp-primary-100);
}
.sp-person__body { flex: 1 1 260px; }
.sp-person__name { margin: 0 0 var(--sp-1); font-size: var(--sp-fs-h2); }
.sp-person__title { margin: 0 0 var(--sp-3); color: var(--sp-primary-600); font-weight: 600; }
.sp-social { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* ── মেটা ফুটার (হালনাগাদের তারিখ) ──────────────────────────────────── */
.sp-meta-note {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
  margin-top: var(--sp-8); padding-top: var(--sp-4);
  border-top: 1px solid var(--sp-border);
  font-size: var(--sp-fs-caption); color: var(--sp-text-muted);
}

/* ── ফুটার ─────────────────────────────────────────────────────────── */
.sp-footer {
  flex: 0 0 auto; margin-top: var(--sp-16);
  background: var(--sp-primary-900); color: var(--sp-primary-100);
}
.sp-footer a { color: var(--sp-primary-200); text-decoration: none; }
.sp-footer a:hover { color: #fff; text-decoration: underline; }
.sp-footer__main { padding: var(--sp-12) 0 var(--sp-8); }
.sp-footer__cols { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sp-footer h3 { color: #fff; font-size: var(--sp-fs-body); margin-bottom: var(--sp-3); }
.sp-footer ul { list-style: none; margin: 0; padding: 0; }
.sp-footer li { margin-bottom: var(--sp-2); font-size: var(--sp-fs-sm); }
.sp-footer__brand img { height: 52px; filter: brightness(0) invert(1); margin-bottom: var(--sp-3); }

.sp-footer__legal {
  padding: var(--sp-5) 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--sp-fs-caption); color: var(--sp-primary-200);
}
.sp-footer__legal p { margin: 0 0 var(--sp-2); max-width: none; }
.sp-footer__bottom {
  display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--sp-fs-caption);
}

/* ── ইউটিলিটি ──────────────────────────────────────────────────────── */
.sp-stack > * + * { margin-top: var(--sp-4); }
.sp-muted { color: var(--sp-text-muted); }
.sp-center { text-align: center; }
.sp-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sp-icon--filled { fill: currentColor; stroke: none; }

.sp-empty {
  padding: var(--sp-12) var(--sp-4); text-align: center;
  border: 2px dashed var(--sp-border-strong); border-radius: var(--sp-radius-lg);
  color: var(--sp-text-muted);
}
.sp-empty .sp-icon { color: var(--sp-border-strong); margin-bottom: var(--sp-3); }

@media (min-width: 768px) {
  :root { --sp-fs-display: 3.052rem; }
}