/* My Patterns and footer */
/* ---------- MY PATTERNS ---------- */
.mp-note{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border-radius:999px;
  background:#eef4fa;color:#2f5f8a;font-size:0.8rem;font-weight:500;line-height:1.35;
}
.mp-note svg{flex-shrink:0;}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));gap:18px;padding-bottom:60px;}
.mp-card{
  display:flex;gap:16px;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--border);
  cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mp-card:hover,.mp-card:focus-visible{transform:translateY(-3px);border-color:rgba(18,49,77,0.2);box-shadow:0 14px 32px rgba(18,49,77,0.12);outline:none;}
.mp-thumb{width:96px;height:120px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.9rem;flex-shrink:0;}
.mp-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.mp-info h3{font-size:1rem;line-height:1.3;margin:8px 0 12px;}
.mp-status{align-self:flex-start;padding:4px 10px;border-radius:999px;font-size:0.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.mp-status-saved{background:#fbe3ec;color:#a8345f;}
.mp-status-progress{background:#fdebdc;color:#a8551c;}
.mp-status-done{background:#ecf3d9;color:#4f6b1d;}
.mp-progress{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.mp-progress span{display:block;height:100%;border-radius:inherit;background:var(--grad-sun);transition:width .35s ease;}
.mp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;font-size:0.8rem;color:var(--text-dimmer);}
.mp-go{font-weight:700;color:var(--indigo);}

.mp-empty{
  grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:520px;margin:10px auto 0;padding:36px 28px 32px;border-radius:24px;
  background:#fff;border:1px dashed rgba(18,49,77,0.2);
}
.mp-empty-art{width:160px;height:120px;margin-bottom:10px;}
.mp-empty h3{font-size:1.15rem;margin-bottom:8px;}
.mp-empty p{color:var(--text-dim);font-size:0.92rem;line-height:1.55;margin-bottom:20px;}

/* Shared plain buttons for the inner pages */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;
  font-weight:700;font-size:0.9rem;white-space:nowrap;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ui-btn:hover{transform:translateY(-1px);}
.ui-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.ui-btn-primary{background:var(--indigo);color:#fff;box-shadow:0 8px 20px rgba(16,45,68,0.22);}
.ui-btn-primary:hover{background:#163c5b;}
.ui-btn-ghost{background:var(--surface);color:var(--indigo);border:1px solid var(--border);}
.ui-btn-ghost:hover{border-color:rgba(18,49,77,0.3);}
.ui-btn-sm{height:36px;padding:0 14px;font-size:0.8rem;}

footer{text-align:center;padding:50px 20px 20px;color:var(--text-dimmer);font-size:0.82rem;}

@media (max-width:640px){
  .mp-note{border-radius:14px;align-items:flex-start;}
  .mp-grid{grid-template-columns:1fr;gap:12px;padding-bottom:90px;}
  .mp-card{padding:10px;gap:12px;border-radius:16px;}
  .mp-thumb{width:76px;height:96px;border-radius:12px;}
  .mp-empty{padding:28px 18px;}
}