:root{
  --card-radius: 18px;
  --brand: #2563eb;
  --brand2: #7c3aed;
  --panel: rgba(255,255,255,.75);
}

body { font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
.bg-app{
  background:
    radial-gradient(900px circle at 15% 0%, rgba(37,99,235,.10), transparent 50%),
    radial-gradient(900px circle at 85% 20%, rgba(124,58,237,.10), transparent 55%),
    #f6f7fb;
  min-height: 100vh;
}

.page-kicker{ font-size: .8rem; color: #6b7280; }
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 1rem;
}

/* Cards */
.card { border-radius: var(--card-radius); }
.card-accent{
  border: 0;
  position: relative;
  overflow: hidden;
}
.card-accent::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(800px circle at 20% 0%, rgba(37,99,235,.16), transparent 45%),
              radial-gradient(900px circle at 80% 20%, rgba(124,58,237,.14), transparent 50%);
  pointer-events:none;
}
.card-accent .card-body{ position: relative; }

.soft-panel{
  background: var(--panel);
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 16px;
}

/* Buttons */
.btn { border-radius: 12px; }
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none;
}
.btn-brand:hover{ filter: brightness(0.98); }

/* Preview */
.preview-box{ border: 1px dashed #ced4da; border-radius: 16px; padding: 12px; background: #fff; }
.preview-box img{ max-height: 260px; width: auto; border-radius: 14px; border: 1px solid #e9ecef; }

/* NAV polish */
.navbar-dark.bg-dark{
  background: linear-gradient(135deg, #0f172a, #111827) !important;
}
.brand-badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,99,235,.85), rgba(124,58,237,.85));
}
.navbar .nav-link{
  border-radius: 12px;
  padding: .5rem .75rem;
  color: rgba(255,255,255,.78) !important;
}
.navbar .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
.navbar .nav-link.active{
  color: #fff !important;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Cards grid */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 992px){
  .grid-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  .grid-cards{ grid-template-columns: 1fr; }
  .preview-box img{ max-height: 220px; }
  .page-head{ margin-bottom: .75rem; }
}

.card-link{
  text-decoration: none;
  color: inherit;
  transition: transform .08s ease, box-shadow .08s ease;
}
.card-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 .5rem 1.25rem rgba(17,24,39,.08) !important;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
/* Step 12: ثابت‌سازی اندازه تصویر در صفحه نتیجه */
.image-frame{
  width: 100%;
  height: 360px;           /* فیکس برای جلوگیری از بهم‌ریختگی */
  max-height: 360px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
@media (max-width: 576px){
  .image-frame{ height: 280px; max-height: 280px; }
}
.image-frame-img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* بدون کشیدگی، داخل قاب */
}