/* ═══════════════════════════════════════════════════════
   MIYAPITA CSS 1.0.2 — Kawaii Pastel
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Bubblegum+Sans&display=swap');

:root {
  --pink:   #ffb7c5; --pink-d:  #ff8fab;
  --mint:   #b5ead7; --mint-d:  #78d8b2;
  --yellow: #fff3b0; --ylw-d:   #ffd166;
  --lav:    #e4c1f9; --cream:   #fff8f0;
  --text:   #3d2c2c; --muted:   #9b7e7e;
  --white:  #ffffff; --r: 18px;
  --f:  'Nunito', sans-serif;
  --fd: 'Bubblegum Sans', cursive;
  --shadow: 0 8px 32px rgba(255,143,171,.18);
}

/* ── Base ───────────────────────────────────────────────── */
.miya-app, .miya-form-wrap, .miya-favorites, .miya-my-ads {
  font-family: var(--f);
  color: var(--text);
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 12px 24px;
  box-sizing: border-box;
}

/* ── Filter bar ─────────────────────────────────────────── */
.miya-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}
.miya-pill-wrap { position: relative; }
.miya-pill {
  font-family: var(--f); font-size: .8rem; font-weight: 800;
  color: var(--text); background: #fff;
  border: 2px solid #f0d8df; border-radius: 30px;
  padding: 7px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: all .15s; line-height: 1;
}
.miya-pill:hover { background: var(--pink); color: #fff; border-color: var(--pink-d); }
.miya-pill-caret { font-size: .6rem; }
.miya-pill--select {
  -webkit-appearance: none; appearance: none;
  font-family: var(--f); font-size: .8rem; font-weight: 800;
  color: var(--text); background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ff8fab'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px;
  border: 2px solid #f0d8df; border-radius: 30px;
  padding: 7px 28px 7px 14px; cursor: pointer; outline: none;
}
.miya-pill--select:focus { border-color: var(--pink-d); }
.miya-pill-drop {
  position: absolute; top: calc(100% + 5px); left: 0;
  min-width: 200px; max-width: 280px;
  background: #fff; border: 2px solid #f0d8df; border-radius: 16px;
  box-shadow: 0 10px 32px rgba(255,143,171,.2); z-index: 9999; overflow: hidden;
}
.miya-pill-search {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 12px; border: none; border-bottom: 1px solid #f0d8df;
  font-family: var(--f); font-size: .8rem; background: var(--cream); outline: none;
}
.miya-pill-list { max-height: 220px; overflow-y: auto; }
.miya-pill-opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .1s;
}
.miya-pill-opt:hover { background: #fff3f6; }
.miya-pill-opt input { accent-color: var(--pink-d); cursor: pointer; }
.miya-pill-opt--all { border-bottom: 1px solid #f0d8df; }
.miya-pill-hint { font-size: .75rem; color: var(--muted); padding: 8px 14px; margin: 0; font-style: italic; }

/* ══════════════════════════════════════════════════════════
   STACK — Simple model: relative container, cards absolute
   ══════════════════════════════════════════════════════════ */
.miya-stack-wrap { display: flex; flex-direction: column; align-items: center; }

.miya-stack {
  position: relative;
  width: 290px;          /* same as card width */
  height: 380px;         /* same as card height */
  margin: 0 auto;
  /* NO overflow:hidden — causes cards to be clipped on scaled layers */
}

/* ── Card: fixed 290×380 box ─────────────────────────────── */
.miya-card {
  position: absolute;
  top: 0; left: 0;
  width: 290px;
  height: 380px;
  border-radius: var(--r);
  overflow: hidden;       /* clips image to box */
  background: var(--white);
  box-shadow: 0 12px 40px rgba(255,143,171,.22);
  border: 3px solid transparent;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
  display: flex;
  flex-direction: column;
}
.miya-card:active { cursor: grabbing; }

/* Layer stacking via JS data-layer attribute */
.miya-card[data-layer="0"] { z-index: 10; }
.miya-card[data-layer="1"] {
  z-index: 9; opacity: .88; pointer-events: none;
  transform: scale(.97) translateY(10px);
}
.miya-card[data-layer="2"] {
  z-index: 8; opacity: .65; pointer-events: none;
  transform: scale(.94) translateY(20px);
}

/* Image fills remaining space — always same size regardless of source */
.miya-card-img {
  width: 100%; flex: 1; min-height: 0;
  object-fit: cover; display: block; pointer-events: none;
}
.miya-card-img-ph {
  width: 100%; flex: 1; min-height: 0;
  background: linear-gradient(135deg,var(--pink),var(--lav));
  display: flex; align-items: center; justify-content: center; font-size: 5rem;
}

/* Swipe indicators */
.miya-card-ind {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 4rem; opacity: 0; transition: opacity .15s;
  pointer-events: none; z-index: 20;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.miya-card-ind--like { left: 14px; }
.miya-card-ind--no   { right: 14px; }
.miya-card.swiping-right .miya-card-ind--like { opacity: 1; }
.miya-card.swiping-left  .miya-card-ind--no   { opacity: 1; }

/* Category badge */
.miya-card-cat {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,.93); border-radius: 20px;
  padding: 4px 10px; font-size: .7rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.miya-card-body {
  padding: 8px 14px 4px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  flex-shrink: 0;
}
.miya-card-body-inner { flex: 1; min-width: 0; }
.miya-card-bname {
  display: block;
  font-size: .68rem; font-weight: 900; color: var(--pink-d);
  text-decoration: none; margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 30;   /* above drag capture layer */
  pointer-events: all;
  cursor: pointer;
}
.miya-card-bname:hover { text-decoration: underline; }
.miya-card-title { font-family: var(--fd); font-size: 1.05rem; color: var(--text); flex: 1; line-height: 1.3; }
.miya-card-price {
  font-size: .85rem; font-weight: 900; color: var(--pink-d);
  background: var(--yellow); padding: 4px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.miya-card-foot { padding: 0 14px 10px; display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.miya-card-tag {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  background: #f8f0f3; border-radius: 20px; padding: 3px 10px;
}
.miya-card-map {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 800;
  color: #1a73e8; background: #e8f0fe;
  border-radius: 20px; padding: 3px 10px;
  text-decoration: none; transition: background .15s;
  pointer-events: all;
}
.miya-card-map:hover { background: #d2e3fc; color: #1558b0; }

/* Featured */
.miya-card--featured {
  border: 3px solid #ffd166 !important;
  box-shadow: 0 0 0 2px rgba(255,209,102,.5), 0 12px 40px rgba(255,200,0,.3) !important;
}
.miya-card--featured::after {
  content: '⭐'; position: absolute; top: 8px; right: 8px;
  font-size: 1rem; z-index: 25; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}

/* Fly animations */
.miya-card.fly-right { animation: flyR .4s cubic-bezier(.36,.07,.19,.97) forwards; }
.miya-card.fly-left  { animation: flyL .4s cubic-bezier(.36,.07,.19,.97) forwards; }
@keyframes flyR { to { transform: translateX(150%) rotate(25deg); opacity: 0; } }
@keyframes flyL { to { transform: translateX(-150%) rotate(-25deg); opacity: 0; } }

/* ── Loader & Empty — shown inside stack, normal flow ────── */
/* They live in .miya-stack but are NOT position:absolute
   so they don't conflict with cards */
.miya-loader, .miya-empty {
  position: absolute;
  top: 0; left: 0;
  width: 290px; height: 380px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px; box-sizing: border-box;
  background: var(--white); border-radius: var(--r);
  z-index: 3;
}

@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.miya-spin { font-size: 3rem; animation: bounce 1s infinite; display: inline-block; }
.miya-loader p { font-family: var(--fd); color: var(--pink-d); margin-top: 10px; }

@keyframes spinSlow { to { transform: rotate(360deg); } }
.miya-empty-icon { font-size: 3.5rem; animation: spinSlow 5s linear infinite; margin-bottom: 8px; }
.miya-empty h3 { font-family: var(--fd); font-size: 1.2rem; color: var(--pink-d); margin: 6px 0 4px; }
.miya-empty p  { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.miya-reload-btn {
  border: none; border-radius: 30px; padding: 9px 22px;
  background: linear-gradient(135deg,var(--pink),var(--lav));
  color: #fff; font-family: var(--f); font-weight: 800; font-size: .88rem;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .2s;
}
.miya-reload-btn:hover { transform: scale(1.05); }

/* ── Action buttons ──────────────────────────────────────── */
.miya-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 20px; padding: 4px 0 8px;
}
.miya-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border: none; border-radius: 16px; cursor: pointer;
  font-family: var(--f);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  outline: none; flex-shrink: 0;
}
.miya-btn:active { transform: scale(.9) !important; }
.miya-btn-icon  { font-size: 1.5rem; line-height: 1; }
.miya-btn-label { font-size: .68rem; font-weight: 800; }
.miya-btn--no  { width:62px;height:62px; background:linear-gradient(135deg,#ffd6a5,#ffb347); box-shadow:0 5px 16px rgba(255,179,71,.35); color:#7a4800; }
.miya-btn--no:hover  { transform:scale(1.1); }
.miya-btn--undo{ width:52px;height:52px; background:linear-gradient(135deg,var(--lav),#c77dff); box-shadow:0 4px 14px rgba(199,125,255,.25); color:#fff; }
.miya-btn--undo:hover{ transform:scale(1.1); }
.miya-btn--yes { width:72px;height:72px; background:linear-gradient(135deg,#ff8fab,#ff5c8a); box-shadow:0 6px 22px rgba(255,92,138,.4); color:#fff; }
.miya-btn--yes:hover { transform:scale(1.12); box-shadow:0 10px 28px rgba(255,92,138,.45); }

/* ── Toast ───────────────────────────────────────────────── */
.miya-toast {
  position: fixed; bottom: 40px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg,var(--pink-d),#c77dff);
  color: #fff; font-family: var(--fd); font-size: 1rem;
  padding: 12px 28px; border-radius: 30px;
  box-shadow: 0 8px 24px rgba(200,80,160,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s; z-index: 99999; white-space: nowrap;
}
.miya-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════
   SUBMIT FORM
   ══════════════════════════════════════════════════════════ */
.miya-form-wrap { padding: 12px; }
.miya-form-header { text-align: center; padding: 14px 0; }
.miya-form-header h2 { font-family:var(--fd); font-size:1.7rem; color:var(--pink-d); margin:6px 0 4px; }
.miya-form-header p  { color:var(--muted); font-size:.85rem; }
.miya-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.miya-field { display:flex; flex-direction:column; gap:5px; }
.miya-field--full { grid-column:1/-1; }
.miya-field label { font-size:.78rem; font-weight:800; color:var(--muted); }
.miya-field small  { font-size:.72rem; color:var(--muted); }
.miya-form input[type="text"],.miya-form input[type="url"],.miya-form input[type="number"],.miya-form select {
  font-family:var(--f); font-size:.88rem; font-weight:700;
  border:2px solid #f0d8df; border-radius:12px; padding:10px 14px;
  background:var(--cream); color:var(--text); outline:none;
  transition:border-color .2s; width:100%; box-sizing:border-box;
}
.miya-form input:focus,.miya-form select:focus { border-color:var(--pink-d); }
.miya-photo-upload-box { border:2.5px dashed var(--pink); border-radius:var(--r); background:var(--cream); }
.miya-photo-preview { min-height:130px; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--pink-d); font-weight:700; padding:20px; text-align:center; }
.miya-photo-btn-row { display:flex; gap:8px; padding:10px; border-top:1px solid #f0d8df; }
.miya-photo-btn { display:inline-flex; align-items:center; gap:5px; border:none; border-radius:20px; padding:7px 14px; font-family:var(--f); font-size:.78rem; font-weight:800; cursor:pointer; transition:transform .15s; }
.miya-photo-btn:hover { transform:scale(1.04); }
.miya-photo-btn--pick { background:var(--pink); color:#fff; }
.miya-photo-btn--del  { background:#ffd6d6; color:#c0392b; }
.miya-photo-btn input { display:none; }
.miya-wa-field { display:flex; gap:8px; }
.miya-wa-prefix { font-family:var(--f); font-size:.82rem; font-weight:700; border:2px solid #f0d8df; border-radius:12px; padding:10px; background:var(--cream); color:var(--text); outline:none; flex-shrink:0; max-width:150px; cursor:pointer; }
.miya-wa-number { flex:1; font-family:var(--f); font-size:.88rem; font-weight:700; border:2px solid #f0d8df; border-radius:12px; padding:10px 14px; background:var(--cream); color:var(--text); outline:none; transition:border-color .2s; }
.miya-wa-number:focus,.miya-wa-prefix:focus { border-color:var(--pink-d); }
.miya-multiselect-wrap { position:relative; }
.miya-multiselect-box { display:flex; align-items:center; justify-content:space-between; border:2px solid #f0d8df; border-radius:12px; padding:10px 14px; background:var(--cream); cursor:pointer; font-size:.86rem; font-weight:700; color:var(--text); min-height:42px; }
.miya-multiselect-box:hover { border-color:var(--pink-d); }
.miya-multi-arrow { color:var(--pink-d); font-size:.7rem; flex-shrink:0; }
.miya-multiselect-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:2px solid #f0d8df; border-radius:14px; z-index:9999; box-shadow:var(--shadow); overflow:hidden; }
.miya-multi-search-input { display:block; width:100%; box-sizing:border-box; border:none; border-bottom:1px solid #f0d8df; padding:8px 12px; font-family:var(--f); font-size:.8rem; background:var(--cream); outline:none; }
.miya-multi-opts { max-height:200px; overflow-y:auto; padding:4px 0; }
.miya-multi-item { display:flex; align-items:center; gap:8px; padding:7px 14px; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .1s; }
.miya-multi-item:hover { background:#fff3f6; }
.miya-multi-item input { accent-color:var(--pink-d); width:15px; height:15px; cursor:pointer; flex-shrink:0; }
.miya-schedule-section { background:linear-gradient(135deg,rgba(255,183,197,.1),rgba(228,193,249,.1)); border:2px solid #f0d8df; border-radius:var(--r); padding:16px; margin-bottom:20px; }
.miya-schedule-section h3 { font-family:var(--fd); font-size:1rem; color:var(--pink-d); margin:0 0 12px; }
.miya-schedule-grid { display:flex; flex-direction:column; gap:8px; }
.miya-schedule-row  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.miya-day-label     { font-size:.8rem; font-weight:700; min-width:80px; }
.miya-time          { border:1.5px solid #f0d8df!important; border-radius:8px!important; padding:5px 8px!important; font-size:.8rem!important; background:#fff!important; width:auto!important; }
.miya-schedule-sep  { color:var(--muted); font-weight:700; }
.miya-toggle        { position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.miya-toggle input  { opacity:0; width:0; height:0; }
.miya-toggle-slider { width:36px; height:20px; background:#e0d0d5; border-radius:20px; transition:background .25s; position:relative; flex-shrink:0; }
.miya-toggle-slider::after { content:''; position:absolute; width:14px; height:14px; background:#fff; border-radius:50%; top:3px; left:3px; transition:transform .25s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.miya-toggle input:checked + .miya-toggle-slider { background:var(--pink-d); }
.miya-toggle input:checked + .miya-toggle-slider::after { transform:translateX(16px); }
.miya-submit-btn { width:100%; padding:15px; border:none; border-radius:var(--r); background:linear-gradient(135deg,var(--pink-d),#c77dff); color:#fff; font-family:var(--fd); font-size:1.1rem; cursor:pointer; box-shadow:0 6px 20px rgba(255,92,138,.35); transition:transform .2s; }
.miya-submit-btn:hover { transform:translateY(-2px); }
.miya-form-msg { margin-top:12px; text-align:center; font-weight:700; font-size:.9rem; min-height:22px; }
.miya-form-msg.success { color:var(--mint-d); }
.miya-form-msg.error   { color:#e05a5a; }

/* ══════════════════════════════════════════════════════════
   FAVORITES
   ══════════════════════════════════════════════════════════ */
.miya-fav-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.miya-fav-header h2 { font-family:var(--fd); font-size:1.4rem; color:var(--pink-d); }
.miya-clear-fav { border:2px solid var(--pink); border-radius:20px; background:transparent; padding:6px 14px; font-size:.8rem; font-weight:700; color:var(--pink-d); cursor:pointer; }
.miya-fav-list   { display:flex; flex-direction:column; gap:12px; }
.miya-fav-item   { display:flex; align-items:center; gap:12px; background:var(--white); border-radius:var(--r); padding:12px; box-shadow:var(--shadow); border-left:4px solid var(--pink); }
.miya-fav-img    { width:68px; height:68px; object-fit:cover; border-radius:12px; flex-shrink:0; }
.miya-fav-no-img { width:68px; height:68px; background:linear-gradient(135deg,var(--pink),var(--lav)); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; }
.miya-fav-info   { flex:1; }
.miya-fav-title  { font-family:var(--fd); font-size:.95rem; color:var(--text); }
.miya-fav-price  { font-size:.82rem; font-weight:800; color:var(--pink-d); margin-top:2px; }
.miya-fav-wa     { background:#25d366; color:#fff; border:none; border-radius:20px; padding:7px 12px; font-size:.75rem; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; flex-shrink:0; transition:transform .15s; }
.miya-fav-wa:hover { transform:scale(1.05); color:#fff; }
.miya-fav-empty  { color:var(--muted); text-align:center; padding:40px 20px; font-size:.9rem; }

/* ══════════════════════════════════════════════════════════
   MY ADS
   ══════════════════════════════════════════════════════════ */
.miya-my-header      { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.miya-my-header h2   { font-family:var(--fd); font-size:1.4rem; color:var(--pink-d); }
.miya-my-top-actions { display:flex; gap:8px; }
.miya-btn-secondary  { border:2px solid var(--lav); border-radius:20px; background:var(--lav); padding:8px 16px; font-size:.82rem; font-weight:800; color:#6a3fa0; cursor:pointer; transition:transform .15s; font-family:var(--f); }
.miya-btn-secondary:hover { transform:scale(1.04); }
.miya-my-list    { display:flex; flex-direction:column; gap:12px; }
.miya-my-item    { display:flex; align-items:flex-start; gap:12px; background:var(--white); border-radius:var(--r); padding:12px; box-shadow:var(--shadow); }
.miya-my-img     { width:80px; height:80px; object-fit:cover; border-radius:12px; flex-shrink:0; }
.miya-my-img--empty { width:80px; height:80px; background:linear-gradient(135deg,var(--pink),var(--lav)); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; }
.miya-my-info    { flex:1; min-width:0; }
.miya-my-title   { font-family:var(--fd); font-size:.95rem; color:var(--text); word-break:break-word; }
.miya-my-price   { font-size:.82rem; font-weight:800; color:var(--pink-d); margin-top:2px; }
.miya-my-stats   { font-size:.72rem; color:var(--muted); margin-top:4px; }
.miya-my-badge   { font-size:.68rem; font-weight:800; padding:3px 10px; border-radius:20px; display:inline-block; margin-top:4px; }
.miya-my-badge--pending  { background:var(--yellow); color:#b58900; }
.miya-my-badge--approved { background:var(--mint); color:#1a7a4a; }
.miya-my-badge--rejected { background:#ffd6d6; color:#c0392b; }
.miya-my-actions-row { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.miya-my-btn     { border:none; border-radius:20px; padding:6px 12px; font-size:.75rem; font-weight:800; cursor:pointer; transition:transform .15s; font-family:var(--f); }
.miya-my-btn:hover { transform:scale(1.05); }
.miya-my-btn--edit { background:var(--yellow); color:#8a6000; }
.miya-my-btn--del  { background:#ffd6d6; color:#c0392b; }
.miya-my-btn--feature { background:linear-gradient(135deg,#fff3b0,#ffd166); color:#8a6000; }
.miya-pagination   { display:flex; gap:6px; justify-content:center; margin-top:14px; }
.miya-page-btn     { border:2px solid var(--pink); border-radius:10px; background:#fff; width:36px; height:36px; font-weight:800; color:var(--pink-d); cursor:pointer; transition:all .15s; font-family:var(--f); }
.miya-page-btn.active,.miya-page-btn:hover { background:var(--pink); color:#fff; }
.miya-edit-fields  { display:flex; flex-direction:column; gap:4px; text-align:left; }
.miya-edit-label   { font-size:.78rem; font-weight:800; color:var(--muted); margin-top:10px; display:block; }
.miya-edit-input   { font-family:var(--f); font-size:.88rem; font-weight:700; border:2px solid #f0d8df; border-radius:12px; padding:10px 14px; background:var(--cream); color:var(--text); outline:none; width:100%; box-sizing:border-box; transition:border-color .2s; margin-top:4px; }
.miya-edit-input:focus { border-color:var(--pink-d); }
.miya-edit-msg     { margin-top:10px; font-size:.85rem; font-weight:700; text-align:center; min-height:20px; }
.miya-edit-photo-wrap    { margin-bottom:14px; text-align:left; }
.miya-edit-photo-preview { width:100%; height:140px; background:var(--cream); border:2px dashed #f0d8df; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:8px; }
.miya-edit-photo-preview img { width:100%; height:100%; object-fit:cover; }
#miya-edit-photo-placeholder { font-size:.85rem; color:var(--muted); font-style:italic; }
.miya-edit-photo-actions { display:flex; gap:8px; }
.miya-edit-photo-btn     { display:inline-flex; align-items:center; gap:5px; border:none; border-radius:20px; padding:7px 14px; font-family:var(--f); font-size:.78rem; font-weight:800; cursor:pointer; transition:transform .15s; }
.miya-edit-photo-btn:hover { transform:scale(1.04); }
.miya-edit-photo-btn--upload { background:var(--pink); color:#fff; }
.miya-edit-photo-btn--delete { background:#ffd6d6; color:#c0392b; }

/* ── Modal ───────────────────────────────────────────────── */
.miya-modal { position:fixed; inset:0; background:rgba(60,20,40,.5); display:flex; align-items:center; justify-content:center; z-index:99999; backdrop-filter:blur(4px); animation:fadeIn .2s; }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
.miya-modal-box { background:var(--white); border-radius:var(--r); padding:28px; max-width:340px; width:90%; text-align:center; position:relative; box-shadow:0 20px 60px rgba(200,80,140,.25); animation:slideUp .25s cubic-bezier(.34,1.56,.64,1); }
.miya-modal-box--wide   { max-width:420px; }
.miya-modal-box--scroll { max-height:90vh; overflow-y:auto; overscroll-behavior:contain; text-align:left; }
@keyframes slideUp { from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1} }
.miya-modal-close { position:absolute; top:12px; right:14px; border:none; background:none; font-size:1.1rem; cursor:pointer; color:var(--muted); }
.miya-modal-box h3 { font-family:var(--fd); font-size:1.2rem; color:var(--pink-d); margin-bottom:14px; }
.miya-login-msg { text-align:center; padding:40px; font-size:1rem; color:var(--muted); font-weight:700; }
.miya-login-msg a { color:var(--pink-d); }

/* Admin ad form */
.miya-admin-ad-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.miya-admin-form-field { display:flex; flex-direction:column; gap:4px; }
.miya-admin-form-field--full { grid-column:1/-1; }
.miya-admin-form-field label { font-size:.75rem; font-weight:800; color:var(--muted); }
.miya-admin-photo-preview { width:100%; min-height:100px; background:var(--cream); border:2px dashed #f0d8df; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; box-sizing:border-box; }

/* Responsive */
@media (max-width:400px) {
  .miya-stack, .miya-card, .miya-loader, .miya-empty { width:calc(100vw - 32px); }
  .miya-form-grid { grid-template-columns:1fr; }
  .miya-admin-ad-form { grid-template-columns:1fr; }
}

/* ── Business name persistent section ─────────────────────── */
.miya-bname-section {
  background: linear-gradient(135deg,rgba(255,183,197,.12),rgba(228,193,249,.12));
  border: 2px solid #f0d8df;
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.miya-bname-label {
  display: block;
  font-size: .82rem;
  font-weight: 900;
  color: var(--pink-d);
  margin-bottom: 8px;
}
.miya-bname-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.miya-bname-input {
  flex: 1;
  font-family: var(--f);
  font-size: 1rem;
  font-weight: 800;
  border: 2px solid #f0d8df;
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.miya-bname-input:focus { border-color: var(--pink-d); }
.miya-bname-save {
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  background: linear-gradient(135deg,var(--pink-d),#c77dff);
  color: #fff;
  font-family: var(--f);
  font-weight: 800;
  font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s;
  flex-shrink: 0;
}
.miya-bname-save:hover { transform: scale(1.04); }
.miya-bname-section small { display:block; margin-top:6px; font-size:.72rem; color:var(--muted); }
.miya-bname-msg { font-size:.8rem; font-weight:700; margin-top:6px; min-height:18px; }

/* ── Carta personal del negocio ───────────────────────────── */
.miya-carta-header {
  text-align: center;
  font-family: var(--fd);
  font-size: 1.3rem;
  color: var(--pink-d);
  padding: 10px 0 4px;
  margin-bottom: 6px;
}
.miya-carta-header span { font-weight: 900; }

/* ── Profile incomplete notice ─────────────────────────────── */
.miya-profile-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg,rgba(255,183,197,.15),rgba(228,193,249,.15));
  border: 2px solid #f0d8df;
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 20px;
}
.miya-profile-notice-icon { font-size: 2rem; flex-shrink: 0; }
.miya-profile-notice strong { display:block; font-size:1rem; color:var(--text); margin-bottom:4px; }
.miya-profile-notice p { font-size:.85rem; color:var(--muted); margin:0 0 8px; }

/* ── Plan info badge ───────────────────────────────────────── */
.miya-plan-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.miya-plan-badge {
  background: linear-gradient(135deg,#D4537E,#ed93b1);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.miya-plan-slots {
  font-size: .78rem;
  color: var(--muted);
}

/* ── Selector AM/PM de horario ─────────────────────────────── */
.miya-time-select {
  font-family: var(--f);
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  border: 1.5px solid #f0d8df;
  border-radius: 8px;
  padding: 4px 22px 4px 7px;
  cursor: pointer;
  min-width: 90px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d4537e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.miya-time-select:focus { border-color: var(--pink-d); outline: none; }

/* ── Etiquetas de hora ─────────────────────────────────────── */
.miya-time-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.miya-time-label {
  font-size: .62rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}