/* share-missions-v3.css — Daily Missions · Share & Earn (2026-07-28, design final).
   Shell: ≥980 centered 440px panel · <980 bottom sheet. Close ✕ = .dm3-close,
   back = .dm3-back — both in the modal-close-unify.css roster (32px spec). */

/* ── shell ─────────────────────────────────────────────────────── */
html body #modal-daily.modal-backdrop {
  background: rgba(4, 8, 12, .74) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 210 !important;
}
html body #modal-daily .modal {
  background:
    linear-gradient(180deg, rgba(9, 38, 50, .82), rgba(4, 14, 22, .92)),
    url('../img/bg/underwater-modal.jpg') center / cover no-repeat !important;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .6) !important;
  position: relative !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* mobile-phase1 .modal{align-items:flex-end} would right-collapse children */
  justify-content: flex-start !important;
  color: #fff;
}
@media (max-width: 979px) {
  html body #modal-daily.modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  html body #modal-daily .modal {
    width: 100% !important; max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important; border-bottom: none !important;
    max-height: 92vh !important; margin: 0 !important;
  }
  /* deterministic 2-row header on phones: icon + text on row 1 (text keeps full width so
     the title stays one line), countdown on its own row 2 */
  #modal-daily .dm3-band {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "icon text" "timer timer";
    column-gap: 12px; row-gap: 10px; align-items: center;
  }
  #modal-daily .dm3-capsule { grid-area: icon; }
  #modal-daily .dm3-band-t { grid-area: text; min-width: 0; }
  #modal-daily .dm3-band .dm3-timer { grid-area: timer; justify-self: start; margin: 0 0 0 58px; }
}
@media (min-width: 980px) {
  html body #modal-daily.modal-backdrop { align-items: center !important; padding: 24px !important; }
  html body #modal-daily .modal {
    width: 100% !important; max-width: 440px !important;
    border-radius: 18px !important; margin: auto !important; max-height: 92vh !important;
  }
}

/* ── head band ─────────────────────────────────────────────────── */
#modal-daily .dm3-band {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: wrap;
  padding: 18px 56px 14px 18px;
  background: linear-gradient(180deg, rgba(41, 182, 232, .14), transparent);
}
#modal-daily .dm3-band-t { flex: 1 1 auto; min-width: 0; }
#modal-daily .dm3-capsule {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(41, 182, 232, .16);
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14));
  color: var(--fz-cyan, #29B6E8);
}
#modal-daily .dm3-title {
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 18px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; line-height: 1.1;
}
#modal-daily .dm3-sub { font-size: 11px; color: var(--fz-text-2, #A6B0BC); margin-top: 3px; }
#modal-daily .dm3-sub b { color: var(--fz-gold, #F5C842); font-weight: 800; }
#modal-daily .dm3-back {
  position: absolute !important; top: 14px !important; left: 14px !important; z-index: 5;
}

/* countdown capsule — header right (10.5px mono) + large variant for empty state */
#modal-daily .dm3-timer {
  margin-left: auto; align-self: center; flex: 0 0 auto; white-space: nowrap;
  font-family: var(--fz-font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--fz-text-2, #A6B0BC);
  padding: 4px 9px; border-radius: 8px;
  background: rgba(7, 8, 13, .45);
  border: 1px solid var(--fz-line, rgba(255, 255, 255, .08));
}
#modal-daily .dm3-timer-lg {
  margin: 16px auto 0; align-self: center; font-size: 12px; padding: 6px 12px;
}

/* gold progress block — shown whenever ≥1 task; hidden at 0/0 */
#modal-daily .dm3-prog {
  margin-bottom: 11px; padding: 12px 14px; border-radius: 13px;
  background: rgba(18, 42, 51, .55);
  border: 1px solid var(--fz-line, rgba(255, 255, 255, .08));
}
#modal-daily .dm3-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#modal-daily .dm3-prog-eye {
  font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fz-text-3, #6E7B88);
}
#modal-daily .dm3-prog-count {
  font-family: var(--fz-font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
  font-size: 12px; font-weight: 700; color: var(--fz-gold, #F5C842);
}
#modal-daily .dm3-prog-track {
  margin-top: 9px; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(4, 16, 24, .7);
}
#modal-daily .dm3-prog-track span {
  display: block; height: 100%; border-radius: 3px; min-width: 0;
  background: linear-gradient(90deg, #FFE082, #F5C842 60%, #C08E1A);
  box-shadow: 0 0 10px rgba(245, 200, 66, .55);
  transition: width .4s ease;
}
#modal-daily .dm3-prog-total {
  margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--fz-text-2, #A6B0BC);
}
#modal-daily .dm3-prog-total b {
  font-family: var(--fz-font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
  font-weight: 700; color: #4EF09A;
}

/* designed empty state — no tasks configured */
#modal-daily .dm3-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 24px 46px;
}
#modal-daily .dm3-empty-ic {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(41, 182, 232, .16);
  border: 1px solid var(--fz-line-2, rgba(255, 255, 255, .14));
  color: var(--fz-cyan, #29B6E8);
}
#modal-daily .dm3-empty-t { margin-top: 14px; font-size: 13px; font-weight: 700; color: #fff; }
#modal-daily .dm3-empty-s {
  margin-top: 6px; font-size: 11px; color: var(--fz-text-3, #6E7B88);
  line-height: 1.5; max-width: 250px;
}

/* ── body / rows ───────────────────────────────────────────────── */
#modal-daily .dm3-body { padding: 4px 16px 18px; display: flex; flex-direction: column; }
#modal-daily .dm3-rows { display: flex; flex-direction: column; gap: 9px; }
#modal-daily .dm3-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border-radius: 13px; cursor: pointer;
  background: rgba(18, 42, 51, .55);
  border: 1px solid var(--fz-line, rgba(255,255,255,.08));
  color: #fff; font-family: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
#modal-daily .dm3-row:not([disabled]):hover { transform: translateY(-1px); border-color: rgba(41, 182, 232, .45); }
#modal-daily .dm3-row[disabled] { cursor: default; }
#modal-daily .dm3-picon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14));
}
#modal-daily .dm3-rmid { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
#modal-daily .dm3-rname { font-size: 13px; font-weight: 700; color: #fff; }
#modal-daily .dm3-rsub { font-size: 11px; color: var(--fz-text-3, #6E7B88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-daily .dm3-rright { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
#modal-daily .dm3-upto {
  font-size: 10px; font-weight: 800; color: var(--fz-gold, #F5C842);
  padding: 3px 8px; border-radius: 6px;
  background: rgba(245, 200, 66, .14);
  border: 1px solid rgba(245, 200, 66, .3);
}
#modal-daily .dm3-start { font-size: 11px; font-weight: 800; color: var(--fz-cyan, #29B6E8); }
#modal-daily .dm3-st { font-size: 10.5px; font-weight: 700; color: var(--fz-text-3, #6E7B88); }
#modal-daily .dm3-st-pending {
  padding: 3px 8px; border-radius: 6px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--fz-line-2, rgba(255,255,255,.14));
  color: var(--fz-text-2, #A6B0BC);
}
#modal-daily .dm3-st-ok { color: #4EF09A; }

/* legacy generic mission rows */
#modal-daily .dm3-sec {
  margin: 16px 2px 8px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fz-text-3, #6E7B88);
}
#modal-daily .dm3-lrow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 13px;
  background: rgba(18, 42, 51, .4);
  border: 1px solid var(--fz-line, rgba(255,255,255,.08));
}
#modal-daily .dm3-lmid { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
#modal-daily .dm3-lprog { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 3px; }
#modal-daily .dm3-lprog span { display: block; height: 100%; background: var(--fz-cyan, #29B6E8); }
#modal-daily .dm3-claim {
  font-size: 11px; font-weight: 800; color: var(--fz-on-gold, #14110A);
  background: linear-gradient(180deg, #FFE082, #F5C842 55%, #C08E1A);
  border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer;
}
#modal-daily .dm3-foot {
  margin-top: 14px; text-align: center;
  font-size: 10px; color: var(--fz-text-3, #6E7B88); line-height: 1.55;
}
#modal-daily .dm3-msg { padding: 44px 18px 56px; text-align: center; color: rgba(255, 255, 255, .5); font-size: 13px; }

/* ── composer ──────────────────────────────────────────────────── */
#modal-daily .dm3-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fz-text-2, #A6B0BC); margin: 6px 2px 8px;
}
#modal-daily .dm3-eyebrow b { color: var(--fz-cyan, #29B6E8); }
#modal-daily .dm3-thumbs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
#modal-daily .dm3-thumb {
  flex: 0 0 auto; width: 74px; height: 44px; padding: 0; cursor: pointer;
  border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: rgba(255, 255, 255, .05);
}
#modal-daily .dm3-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#modal-daily .dm3-thumb.on { border-color: var(--fz-cyan, #29B6E8); }
#modal-daily .dm3-preview {
  margin-top: 8px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14));
}
#modal-daily .dm3-preview img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
#modal-daily .dm3-cap {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(2, 12, 18, .6);
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14));
  color: #fff; font-size: 12.5px; line-height: 1.5; font-family: inherit;
}
#modal-daily .dm3-cap:focus { outline: none; border-color: rgba(41, 182, 232, .5); }
#modal-daily .dm3-copy {
  margin-top: 8px; align-self: flex-start;
  font-size: 11px; font-weight: 800; color: var(--fz-cyan, #29B6E8);
  background: rgba(41, 182, 232, .12); border: 1px solid rgba(41, 182, 232, .3);
  border-radius: 8px; padding: 7px 14px; cursor: pointer;
}
#modal-daily .dm3-post {
  margin-top: 2px; height: 46px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
#modal-daily .dm3-post:active { transform: scale(.985); }
#modal-daily .dm3-dl {
  margin-top: 8px; text-align: center; display: block;
  font-size: 11px; font-weight: 700; color: var(--fz-text-2, #A6B0BC); text-decoration: none;
}
#modal-daily .dm3-dl:hover { color: #fff; }
#modal-daily .dm3-proof {
  margin-top: 10px; height: 44px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: var(--fz-gold, #F5C842);
  background: rgba(245, 200, 66, .1); border: 1px dashed rgba(245, 200, 66, .45);
}
#modal-daily .dm3-proof:hover { background: rgba(245, 200, 66, .16); }