/* Collection browsing and purchasing share the same visual rhythm. */
.ui-mine, .ui-shop { background: var(--ui-bg); }
.ui-mine > header { min-height: 64px; padding: 12px max(20px, calc((100vw - 1100px)/2)); gap: 10px; background: #fff; backdrop-filter: none; }
.ui-mine > header .logo { width: 34px; height: 34px; border-radius: 11px; }
.ui-mine > header h1 { font-size: 17px; }
.ui-mine > header a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
:is(.ui-mine, .ui-shop) .wrap { max-width: 1100px; padding: 26px 20px 110px; }
:is(.ui-mine, .ui-shop) .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
:is(.ui-mine, .ui-shop) .ccard { border: 1px solid var(--ui-line); border-radius: 18px; padding: 20px; box-shadow: var(--ui-shadow); transition: border-color .16s, box-shadow .16s, transform .16s; }
:is(.ui-mine, .ui-shop) .ccard .t { font-size: 16px; line-height: 1.5; margin-bottom: 10px; }
:is(.ui-mine, .ui-shop) .ccard .m { font-size: 12px; line-height: 1.8; }
:is(.ui-mine, .ui-shop) .ccard.sel { background: #f1f8f4; border-color: var(--ui-primary); box-shadow: 0 0 0 1px var(--ui-primary); }
.ui-mine .ccard .csel { accent-color: var(--ui-primary); filter: none; }
.ui-mine .ccard .cacts { margin-top: 18px; gap: 8px; }
.ui-mine .ccard :is(.go, .cpbtn) { min-height: 38px; display: inline-flex; align-items: center; border-radius: 9px; padding: 8px 12px; }
.ui-mine .daybar { padding: 16px; border: 1px solid var(--ui-line); background: #fff; border-radius: 16px; margin-bottom: 16px; gap: 10px; }
.ui-mine .daybar :is(input, .dbtn) { min-height: 42px; border-radius: 10px; }
.ui-mine .selbar { padding: 0 2px; margin-bottom: 18px; gap: 8px; }
.ui-mine .selbar .sbtn { min-height: 42px; }
.ui-mine .backbar.on { background: #fff; padding: 14px; border: 1px solid var(--ui-line); border-radius: 16px; }
.ui-mine .backbar button { min-height: 40px; }
.ui-shop .hero { padding: 26px 20px; background: #e9f1ec; border-bottom: 1px solid #d3e3da; }
.ui-shop .hero-in { max-width: 1060px; gap: 12px; }
.ui-shop .hero h1 { font-size: 25px; letter-spacing: -.6px; }
.ui-shop .hero .sub { font-size: 12px; line-height: 1.7; margin-top: 8px; }
.ui-shop .pts-badge { border-color: #bfd6cb; color: var(--ui-primary); box-shadow: none; padding: 10px 14px; }
.ui-shop .backlink { min-height: 40px; display: inline-flex; align-items: center; border-radius: 10px; background: #fff; border-color: var(--ui-line); }
.ui-shop .daybar { gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--ui-line); border-radius: 16px; margin-bottom: 16px; }
.ui-shop .daybar .chip, .ui-shop .daypick, .ui-shop .catbar .chip { min-height: 40px; border-radius: 10px; border-width: 1px; }
.ui-shop .daybar .chip.on { background: var(--ui-primary); box-shadow: none; }
.ui-shop .kwbox { min-height: 40px; border-width: 1px; border-radius: 10px; min-width: 0; }
.ui-shop .kwbox input { min-width: 0; }
.ui-shop .bar { border-top-color: var(--ui-line); box-shadow: 0 -6px 26px rgba(30,66,56,.06); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ui-shop .bar-in { max-width: 1060px; }
.ui-shop :is(.bar-go, .buybtn) { background: var(--ui-primary); border-radius: 10px; box-shadow: 0 4px 12px rgba(35,118,109,.16); }
.ui-shop .bar-go:disabled { box-shadow: none; }
.ui-shop .promo-entry-row #textBtn:not(.on) { background: var(--ui-soft); color: var(--ui-primary); border-color: #a9cbb9; box-shadow: none; }
.ui-shop :is(.bar-go, .bar-all, .pbtn) { min-height: 42px; }
.ui-shop .ccard .cbadge { border-radius: 6px; background: var(--ui-soft); color: var(--ui-primary); }
.ui-shop .modal .box { border-radius: 20px; box-shadow: var(--ui-shadow-raised); }
.ui-shop :is(#textView, .sp-overlay) { color: var(--ui-ink); }
.ui-shop .sp-hero { background: #edf5ef; border-color: var(--ui-line); }
.ui-shop .sp-hero h2, .ui-shop .sp-total, .ui-shop .sp-link { color: var(--ui-primary); }
.ui-shop :is(.sp-muted, .sp-count, .sp-order-info, .sp-filemeta, .sp-history, .sp-busy) { color: var(--ui-muted); }
.ui-shop :is(.sp-panel, .sp-order, .sp-cost, .sp-showlist, .sp-attachment, .sp-published) { border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.ui-shop :is(.sp-help, .sp-cost, .sp-selected, .sp-btn.quiet) { background: var(--ui-soft); color: var(--ink2); }
.ui-shop .sp-btn { border-color: var(--ui-line); color: var(--ink2); }
.ui-shop .sp-btn.primary { background: var(--ui-primary); color: #fff; box-shadow: none; }
.ui-shop .sp-btn.danger { color: #bd415a; border-color: #f0cbd1; background: #fff8f8; }
.ui-shop .sp-upload { background: #f4f9f5; border-color: #a9cbb9; }
.ui-shop :is(.sp-tabs, .sp-days) button.on { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
@media (hover: hover) {
  :is(.ui-mine, .ui-shop) .ccard:where(:not(.sel)):hover { transform: translateY(-2px); border-color: #bdd1c7; box-shadow: 0 10px 24px rgba(30,66,56,.08); }
}
/* Native-style grouped controls and restrained surfaces. */
.ui-shop .hero { background: #fafafc; border-bottom-color: var(--ui-line); }
:is(.ui-mine, .ui-shop) .ccard .t { font-weight: 650; letter-spacing: -.25px; }
.ui-shop .ccard.sel { background: #f2f8f5; }
.ui-shop .daybar .chip { background: #f0f0f4; border-color: transparent; color: var(--ink2); }
.ui-shop .daybar .chip.on { background: #fff; color: var(--ui-primary); border-color: var(--ui-line); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ui-shop .bar { box-shadow: 0 -1px 12px rgba(20,24,32,.04); background: #fcfcfd; }
.ui-shop :is(.bar-go, .buybtn) { box-shadow: 0 1px 3px rgba(20,24,32,.08); }
@media (min-width: 1024px) {
  .ui-mine > header { min-height: 60px; background: #fafafc; }
  .ui-shop .hero { padding-top: 30px; padding-bottom: 30px; }
  :is(.ui-mine, .ui-shop) .ccard { border-radius: 16px; padding: 22px; }
  :is(.ui-mine, .ui-shop) .wrap { padding-top: 30px; }
  .ui-shop :is(.daybar, .backlink), .ui-mine .daybar { border-radius: 12px; }
}
@media (max-width: 640px) {
  .ui-mine > header { padding: 10px 12px; flex-wrap: wrap; gap: 7px; }
  .ui-mine > header h1 { flex: 1; font-size: 16px; }
  .ui-mine > header .me { order: 4; width: 100%; text-align: right; overflow-wrap: anywhere; white-space: normal; }
  .ui-mine > header .me:empty { display: none; }
  .ui-mine > header a { min-height: 40px; }
  :is(.ui-mine, .ui-shop) .wrap { padding: 18px 12px 130px; }
  :is(.ui-mine, .ui-shop) .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  :is(.ui-mine, .ui-shop) .ccard { padding: 18px; }
  .ui-shop .hero h1 { font-size: 28px; font-weight: 700; }
  :is(.ui-mine, .ui-shop) .ccard { box-shadow: var(--ui-shadow); }
  :is(.ui-mine, .ui-shop) .ccard .t { min-height: 0; font-size: 16px; }
  .ui-mine .daybar { padding: 12px; gap: 8px; }
  .ui-mine .name-search { flex: 1 1 100%; }
  .ui-mine .daybar input[type=date] { min-width: 0; flex: 1; width: 132px; }
  .ui-mine .daybar .dcount { flex: 1 1 100%; }
  .ui-mine .daybar :is(input, .dbtn), .ui-mine .selbar .sbtn { min-height: 44px; }
  .ui-mine .ccard :is(.go, .cpbtn) { min-height: 44px; }
  .ui-mine .selbar .sbtn.primary { flex: 1 1 100%; margin-left: 0; }
  .ui-shop .hero { padding: 22px 16px; }
  .ui-shop .hero-in { flex-wrap: wrap; gap: 10px; }
  .ui-shop .hero h1 { flex: 1 1 100%; font-size: 24px; }
  .ui-shop .hero .sp { display: none; }
  .ui-shop .pts-badge { margin-right: auto; }
  .ui-shop .logout-btn { min-height: 44px; padding: 9px 12px; border-radius: 10px; }
  .ui-shop .daybar { padding: 12px; gap: 8px; }
  .ui-shop .daybar .chip, .ui-shop .daypick, .ui-shop .catbar .chip { min-height: 44px; }
  .ui-shop .kwbox { width: 100%; flex: 1 1 100%; margin: 0; min-height: 44px; }
  .ui-shop .kwbox input { flex: 1; width: 0; font-size: 16px; }
  .ui-shop .kwbox .kwx { min-width: 40px; min-height: 40px; }
  .ui-shop .daypick { min-width: 0; max-width: 100%; }
  .ui-shop .bar-in { gap: 10px; padding: 12px; }
  .ui-shop .bar-r { gap: 8px; }
  .ui-shop :is(.bar-cart, .bar-go, .bar-all, .pbtn, .veropt) { min-height: 44px; }
  .ui-shop .bar-r { flex-wrap: wrap; }
  .ui-shop .kwbox input { align-self: stretch; min-height: 42px; }
  .ui-shop :is(#textView, .sp-overlay) :is(input, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ui-mine, .ui-shop) .ccard { transition: none; }
  :is(.ui-mine, .ui-shop) .ccard:hover { transform: none; }
}