:root{
  --brand:#0D6EFD;
  --bg:#f7f9fc;
  --header-bg:#ffffff;
  --header-fg:#212529;
  --footer-bg:#ffffff;
  --footer-fg:#6c757d;
  --link-footer:#6c757d;
  --border:#dee2e6;
}
[data-bs-theme="dark"]{
  --bg:#0b0e13;
  --header-bg:#0f131a;
  --header-fg:#e9ecef;
  --footer-bg:#0f131a;
  --footer-fg:#9aa4b2;
  --link-footer:#c9d1d9;
  --border:#273142;
}
/* View Transitions API */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.25s; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration:0s; }
}

body.bg-body{ background:var(--bg); }
.tp-header{ background:var(--header-bg); color:var(--header-fg); border-color:var(--border)!important; view-transition-name:none; }
.tp-header .navbar-brand, .tp-header .nav-link{ color:var(--header-fg); }
.tp-header .btn-outline-secondary{ color:var(--header-fg); border-color:var(--border); }

.tp-footer{ background:var(--footer-bg); color:var(--footer-fg); border-color:var(--border)!important; view-transition-name:none; }
.tp-footer .link-footer{ color:var(--link-footer); text-decoration:none; }
.tp-footer .link-footer:hover{ text-decoration:underline; }

.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--brand);display:inline-block;box-shadow:0 0 0 3px rgba(13,110,253,.15)}
.card{border-radius:1rem}
.card.shadow-sm{box-shadow:0 .25rem .75rem rgba(0,0,0,.06)!important}
[data-bs-theme="dark"] .card.shadow-sm{box-shadow:none!important}

.badge-soft{background:rgba(13,110,253,.12);color:#0D6EFD}
[data-bs-theme="dark"] .badge-soft{background:rgba(13,110,253,.25);color:#9cc3ff}

.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.gallery-thumb{width:88px;height:88px;border-radius:.75rem;object-fit:cover;border:1px solid rgba(0,0,0,.08)}
.form-hint{font-size:.85rem;color:#6c757d}

/* Compact stepbar */
.stepbar{display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1rem}
.stepbar .meter{flex:1;height:6px;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden}
.stepbar .meter>span{display:block;height:100%;background:var(--brand);width:0}
.stepbar .label{font-size:.9rem}

/* Buttons row for share controls */
.btn-row .col-6{display:flex}
.btn-row .col-6 .btn{width:100%}