:root {
  --jp-bg: #0b0710;
  --jp-bg-2: #140816;
  --jp-panel: #1a111d;
  --jp-panel-2: #241326;
  --jp-line: rgba(205, 77, 137, .25);
  --jp-text: #fff7fb;
  --jp-muted: #aa9dab;
  --jp-pink: #f02d7d;
  --jp-pink-2: #bd1e63;
  --jp-gold: #e6bd6b;
  --jp-green: #5bd29b;
  --jp-radius: 18px;
  --jp-shadow: 0 18px 48px rgba(0, 0, 0, .36);
}

* { box-sizing: border-box; }
html { background: #060408 !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100%; }
body,
body#apprun,
body.deeppurple-theme {
  margin: 0 auto !important;
  max-width: 520px;
  color: var(--jp-text) !important;
  background:
    radial-gradient(circle at 92% 0, rgba(173, 29, 96, .22), transparent 34%),
    linear-gradient(180deg, #0c0710 0%, #130815 46%, #09060d 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  letter-spacing: .01em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none !important; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, .btn, [role="button"] { -webkit-tap-highlight-color: transparent; }

.jp-page { min-height: 100vh; padding: 0 17px calc(92px + env(safe-area-inset-bottom)); }
.jp-page--flush { padding-left: 0; padding-right: 0; }
.jp-content { padding: 0 17px; }
.jp-topbar {
  height: 56px;
  margin: 0 -17px;
  padding: env(safe-area-inset-top) 17px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 7, 16, .9);
  border-bottom: 1px solid rgba(238, 46, 126, .18);
  backdrop-filter: blur(16px);
}
.jp-topbar h1 { margin: 0; font: 600 17px/1.2 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .05em; }
.jp-topbar__sub { margin-top: 3px; color: var(--jp-muted); font-size: 10px; }
.jp-icon-button {
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--jp-text);
  background: transparent; position: relative;
}
.jp-icon-button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jp-pink); position: absolute; right: 5px; top: 3px; box-shadow: 0 0 11px var(--jp-pink); }

.jp-section { margin-top: 24px; }
.jp-section__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.jp-section__title { margin: 0; font: 600 21px/1.25 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .04em; }
.jp-section__link { color: var(--jp-gold); font-size: 12px; }
.jp-section__note { color: var(--jp-muted); font-size: 11px; margin-top: 4px; }

.jp-hero {
  height: 265px; margin: 12px 0 0; border-radius: 22px; overflow: hidden; position: relative;
  background: #160d18 url('/static_jpclub/img/hero.png') center/cover no-repeat;
  border: 1px solid rgba(225, 180, 106, .2); box-shadow: var(--jp-shadow);
}
.jp-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,5,10,.93) 0%, rgba(12,7,13,.65) 40%, rgba(8,5,10,.06) 72%), linear-gradient(0deg, rgba(8,5,10,.72), transparent 48%); }
.jp-hero__copy { position: absolute; z-index: 2; left: 18px; top: 35px; width: 62%; }
.jp-hero__eyebrow { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; color: var(--jp-gold); border: 1px solid rgba(229,187,105,.55); border-radius: 999px; background: rgba(20,10,20,.58); font-size: 10px; }
.jp-hero__title { margin: 14px 0 8px; font: 600 29px/1.28 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .04em; text-shadow: 0 2px 18px #000; }
.jp-hero__title em { color: #f24b91; font-style: normal; }
.jp-hero__meta { color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.7; }
.jp-hero__actions { position: absolute; z-index: 2; bottom: 16px; left: 16px; right: 16px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; }

.jp-btn {
  min-height: 48px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; color: #fff !important; background: rgba(42,26,44,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.22); cursor: pointer;
}
.jp-btn--primary { border-color: rgba(255,83,152,.38); background: linear-gradient(135deg, #f23882, #c51964); box-shadow: 0 12px 25px rgba(224,36,115,.32); }
.jp-btn--gold { color: #21120d !important; border-color: rgba(255,230,173,.28); background: linear-gradient(135deg, #e8c36d, #b8893e); font-weight: 700; }
.jp-btn--block { width: 100%; }
.jp-btn:active { transform: translateY(1px); }

.jp-live { margin: 13px -17px 0; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 7px 17px; background: rgba(87,10,53,.45); border-block: 1px solid rgba(226,44,121,.18); color: #d7cbd4; font-size: 11px; }
.jp-live__badge { padding: 4px 7px; border-radius: 4px; color: #fff; background: var(--jp-pink); font-size: 9px; font-weight: 800; }

.jp-card { border: 1px solid var(--jp-line); border-radius: var(--jp-radius); background: linear-gradient(145deg, rgba(36,19,38,.96), rgba(19,13,22,.96)); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.jp-activation { margin-top: 14px; padding: 14px; display: grid; grid-template-columns: 46px 1fr 20px; gap: 12px; align-items: center; }
.jp-activation__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #27170e; background: linear-gradient(135deg, #f4cf72, #b9802a); box-shadow: 0 9px 20px rgba(221,176,76,.2); }
.jp-activation h3 { margin: 0 0 4px; color: var(--jp-gold); font-size: 14px; }
.jp-activation p { margin: 0; color: #b8a9b7; font-size: 11px; line-height: 1.45; }

.jp-notices { overflow: hidden; }
.jp-notice { display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 11px; line-height: 1.5; }
.jp-notice:last-child { border-bottom: 0; }
.jp-notice__tag { color: #ff6ea8; }

.jp-member-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; padding: 1px 0 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.jp-member-scroll::-webkit-scrollbar { display: none; }
.jp-member-card { min-width: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #171019; }
.jp-member-card__image { height: 168px; position: relative; overflow: hidden; background: #251827; }
.jp-member-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.jp-member-card:active img { transform: scale(1.03); }
.jp-status { position: absolute; left: 8px; top: 8px; display: flex; gap: 5px; align-items: center; padding: 4px 7px; border-radius: 999px; color: #daffed; background: rgba(4,18,12,.72); font-size: 9px; backdrop-filter: blur(5px); }
.jp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jp-green); box-shadow: 0 0 7px var(--jp-green); }
.jp-member-card__body { padding: 10px; }
.jp-member-card__name { font-size: 14px; font-weight: 700; }
.jp-member-card__meta { color: var(--jp-muted); font-size: 10px; margin-top: 4px; }

.jp-filter { position: sticky; top: 56px; z-index: 20; margin: 0 -17px; padding: 11px 17px; display: flex; gap: 8px; overflow-x: auto; background: rgba(11,7,16,.92); backdrop-filter: blur(14px); scrollbar-width: none; }
.jp-chip { white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09); background: #1b121e; color: #a99da9; font-size: 11px; }
.jp-chip.is-active { color: #fff; border-color: rgba(242,48,128,.55); background: linear-gradient(135deg, #e52e79, #9e1c58); }
.jp-member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.jp-member-grid .jp-member-card__image { height: 210px; }
.jp-member-grid .jp-member-card { cursor: pointer; }

.jp-profile-hero { margin: 0 -17px; height: 390px; position: relative; overflow: hidden; background: #251827; }
.jp-profile-hero img { width: 100%; height: 100%; object-fit: cover; }
.jp-profile-hero::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #0b0710); }
.jp-profile-copy { margin-top: -82px; position: relative; z-index: 3; }
.jp-profile-copy h1 { margin: 0; font: 600 31px/1.2 "Yu Mincho", serif; }
.jp-profile-copy__meta { color: #d9ccd7; font-size: 12px; margin-top: 7px; }
.jp-profile-bio { margin-top: 18px; padding: 18px; color: #d2c5d0; font-size: 13px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
.jp-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.jp-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 13px; background: #201522; }

.jp-shop-hero { margin: 14px 0 18px; padding: 20px; min-height: 150px; overflow: hidden; position: relative; }
.jp-shop-hero::after { content: "SHOP"; position: absolute; right: -8px; bottom: -22px; color: rgba(232,195,109,.06); font: 800 74px/1 sans-serif; }
.jp-shop-hero small { color: var(--jp-gold); letter-spacing: .14em; }
.jp-shop-hero h2 { margin: 9px 0 6px; font: 600 25px/1.3 "Yu Mincho", serif; }
.jp-shop-hero p { margin: 0; max-width: 85%; color: var(--jp-muted); font-size: 11px; line-height: 1.65; }
.jp-category { margin-top: 25px; }
.jp-category__title { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; font: 600 17px/1.3 "Yu Mincho", serif; }
.jp-category__count { color: var(--jp-muted); font: 10px/1 sans-serif; }
.jp-products { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; padding: 0 0 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.jp-products::-webkit-scrollbar { display: none; }
.jp-product { overflow: hidden; scroll-snap-align: start; cursor: pointer; }
.jp-product__image { aspect-ratio: 1; position: relative; overflow: hidden; background: #241728; }
.jp-product__image img { width: 100%; height: 100%; object-fit: cover; }
.jp-product__tag { position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 5px; color: #1b0d08; background: linear-gradient(135deg, #f0d58e, #c69848); font-size: 9px; font-weight: 700; }
.jp-product__body { min-height: 116px; padding: 10px; }
.jp-product__name { height: 36px; overflow: hidden; color: #f9f1f6; font-size: 11px; line-height: 1.55; }
.jp-product__price { margin-top: 8px; color: #ff5c9b; font-size: 14px; font-weight: 800; }
.jp-product__old { color: #766c78; font-size: 9px; text-decoration: line-through; }

.jp-vip-card { margin-top: 18px; padding: 20px; overflow: hidden; position: relative; background: radial-gradient(circle at 90% 15%, rgba(255,55,135,.21), transparent 35%), linear-gradient(145deg,#2b162b,#170f1b); }
.jp-vip-card::after { content: "MEMBER"; position: absolute; right: -20px; bottom: -8px; color: rgba(232,195,109,.07); font: 800 46px/1 sans-serif; transform: rotate(-8deg); }
.jp-vip-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #24140c; background: linear-gradient(135deg,#f6d578,#b77c29); }
.jp-vip-card__number { margin-top: 22px; letter-spacing: .2em; font-size: 18px; }
.jp-vip-card__state { margin-top: 8px; color: #e7c46f; font-size: 11px; }
.jp-steps { display: grid; gap: 10px; margin-top: 14px; }
.jp-step { padding: 15px; display: grid; grid-template-columns: 33px 1fr auto; align-items: center; gap: 11px; }
.jp-step__number { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; color: #c2b6c1; background: #241827; font-size: 12px; }
.jp-step h3 { margin: 0; font-size: 13px; }
.jp-step p { margin: 4px 0 0; color: var(--jp-muted); font-size: 10px; }
.jp-step__lock { color: #6f6470; }

.jp-my-header { margin: 0 -17px; padding: 18px 17px 74px; background: radial-gradient(circle at 100% 0,rgba(232,43,125,.22),transparent 48%),linear-gradient(180deg,#190919,#0c0710); border-bottom: 1px solid rgba(237,43,125,.2); }
.jp-user { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.jp-avatar { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; border: 2px solid #c7226d; background: #120b14; }
.jp-user h2 { margin: 0 0 4px; font-size: 15px; }
.jp-user p { margin: 0; color: var(--jp-muted); font-size: 10px; }
.jp-vip-badge { padding: 5px 9px; border-radius: 999px; color: #2b180c; background: linear-gradient(135deg,#f3d67f,#bd8b37); font-size: 10px; font-weight: 800; }
.jp-balance { margin-top: -58px; padding: 18px; }
.jp-balance__label { display: flex; justify-content: space-between; color: #c7b8c4; font-size: 11px; }
.jp-balance__amount { margin-top: 9px; font: 400 30px/1.1 "Yu Mincho", serif; }
.jp-balance__stats { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jp-stat { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.035); }
.jp-stat span { display: block; color: var(--jp-muted); font-size: 9px; }
.jp-stat strong { display: block; margin-top: 5px; font-size: 13px; }
.jp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.jp-menu { overflow: hidden; margin-top: 14px; }
.jp-menu__item { min-height: 60px; padding: 0 15px; display: grid; grid-template-columns: 38px 1fr 14px; gap: 11px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.jp-menu__item:last-child { border-bottom: 0; }
.jp-menu__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #ef76aa; background: rgba(238,61,137,.08); }
.jp-menu__label { font-size: 12px; }
.jp-menu__sub { margin-top: 3px; color: var(--jp-muted); font-size: 9px; }

.jp-login { min-height: 100vh; padding: 28px 18px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(0deg,rgba(9,5,11,.97),rgba(14,7,16,.75)),url('/static_jpclub/img/hero.png') 68% center/cover; }
.jp-login__brand { margin-bottom: 30px; }
.jp-login__brand small { color: var(--jp-gold); letter-spacing: .2em; font-size: 10px; }
.jp-login__brand h1 { margin: 9px 0 8px; font: 600 31px/1.3 "Yu Mincho", serif; }
.jp-login__brand p { margin: 0; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.7; }
.jp-login__panel { padding: 20px; backdrop-filter: blur(20px); background: rgba(23,13,24,.86); }
.jp-field { margin-bottom: 12px; }
.jp-field label { display: block; margin: 0 0 7px 3px; color: #bbaeba; font-size: 10px; }
.jp-field input, .jp-field select, .jp-field textarea,
body input.form-control, body select.form-control, body textarea.form-control {
  width: 100%; min-height: 50px; padding: 0 15px !important; color: #fff !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 13px !important; background: rgba(8,6,10,.72) !important; outline: none !important; box-shadow: none !important;
}
.jp-field input:focus, body input.form-control:focus { border-color: rgba(238,54,132,.7) !important; box-shadow: 0 0 0 3px rgba(238,54,132,.08) !important; }
.jp-login__links { margin-top: 14px; display: flex; justify-content: space-between; color: #b8aab7; font-size: 10px; }

.jp-empty { padding: 35px 20px; text-align: center; color: var(--jp-muted); }
.jp-back { width: 38px; height: 38px; display: grid; place-items: center; border: 0; color: #fff; background: transparent; }

.jp-modal { position: fixed; inset: 0; z-index: 20000; display: none; align-items: end; justify-content: center; background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
.jp-modal.is-open { display: flex; }
.jp-modal__panel { width: min(100%,520px); padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; border: 1px solid rgba(230,189,107,.28); background: #151019; box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
.jp-modal__eyebrow { color: var(--jp-gold); font-size: 10px; }
.jp-modal__panel h2 { margin: 7px 0 8px; font: 600 20px/1.4 "Yu Mincho", serif; }
.jp-modal__panel p { margin: 0 0 18px; color: var(--jp-muted); font-size: 12px; line-height: 1.7; }
.jp-modal__actions { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9px; }

/* Shared legacy page restyling */
body .wrapper, body .homepage, body .index-body, body .container { background-color: transparent !important; }
body .header, body .header.active { color: var(--jp-text) !important; background: rgba(11,7,16,.92) !important; border-bottom: 1px solid rgba(238,46,126,.18) !important; box-shadow: none !important; backdrop-filter: blur(14px) !important; }
body .card, body .my-meun, body .list-group, body .index_rwlb { color: var(--jp-text) !important; border: 1px solid var(--jp-line) !important; border-radius: var(--jp-radius) !important; background: linear-gradient(145deg,rgba(36,19,38,.96),rgba(19,13,22,.96)) !important; box-shadow: 0 10px 28px rgba(0,0,0,.22) !important; }
body .list-group-item, body .menu-item { color: var(--jp-text) !important; border-color: rgba(255,255,255,.06) !important; background: transparent !important; }
body .text-dark, body .text-mute, body .text-muted { color: #b4a7b2 !important; }
body .btn-default, body .btn-primary, body button[type="submit"] { color: #fff !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg,#f23882,#c51964) !important; box-shadow: 0 12px 25px rgba(224,36,115,.22) !important; }
body .table { color: #dfd4dc !important; }
body .table td, body .table th { border-color: rgba(255,255,255,.07) !important; }
body .layui-layer, body .van-dialog { color: var(--jp-text) !important; background: #18101b !important; }
body .foot, body #foot .foot { color: var(--jp-text) !important; border-color: rgba(238,46,126,.18) !important; background: rgba(10,7,13,.95) !important; backdrop-filter: blur(18px) !important; }
body .foot p, body #foot .foot p { color: #8d818e !important; }
body .foot .active p, body #foot .foot .active p { color: #ff4d94 !important; }
body .fui-cell, body .weui-cell, body .form-group, body .media, body .list-item { border-color: rgba(255,255,255,.07) !important; background-color: transparent !important; }
body .notification { color: var(--jp-text) !important; background: #18101b !important; }

/* Replacement navigation */
.jp-nav { position: fixed; left: 50%; bottom: 0; z-index: 10000; width: min(100%,520px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5,1fr); padding: 7px 5px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(238,46,126,.18); background: rgba(10,7,13,.94); backdrop-filter: blur(18px); }
.jp-nav a { min-width: 0; color: #887d8a; text-align: center; font-size: 9px; }
.jp-nav__icon { width: 28px; height: 27px; margin: 0 auto 2px; display: grid; place-items: center; font-size: 19px; }
.jp-nav a.is-active { color: #ff4d94; }
.jp-nav a.is-active .jp-nav__icon { filter: drop-shadow(0 0 7px rgba(255,55,139,.55)); }

@media (min-width: 521px) {
  body { border-inline: 1px solid rgba(255,255,255,.06); box-shadow: 0 0 70px rgba(0,0,0,.7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 2026-10-10 deep visual consistency audit */
html, body { background-color: #08050b !important; }
body .wrapper,
body .homepage,
body .index-body,
body .page,
body .pages,
body .page-current,
body .view,
body .views,
body .view-main,
body .content,
body .content-inner,
body .scroll-wrapper,
body .container-fluid,
body .bg-default,
body .bg-light,
body .bg-white {
  color: var(--jp-text) !important;
  background: transparent !important;
  background-image: none !important;
}
body .wrapper, body .homepage, body .page { min-height: 100vh !important; }
body .container { color: var(--jp-text) !important; background: transparent !important; }
body .bar,
body .bar-nav,
body .navbar,
body .toolbar,
body .page-header {
  color: var(--jp-text) !important;
  border-color: rgba(238,46,126,.18) !important;
  background: rgba(11,7,16,.94) !important;
  box-shadow: none !important;
}
body .bar .title, body .bar-nav .title { color: var(--jp-text) !important; background: transparent !important; }
body .subtitle, body .title, body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--jp-text); }
body p, body label, body .small { border-color: rgba(255,255,255,.07); }
body .card-body, body .card-footer, body .card-header { color: inherit !important; border-color: rgba(255,255,255,.07) !important; background: transparent !important; }
body .modal-content,
body .dropdown-menu,
body .popover,
body .action-sheet,
body .actions-modal,
body .picker-modal,
body .panel,
body .panel-body,
body .toast,
body .dialog {
  color: var(--jp-text) !important;
  border: 1px solid var(--jp-line) !important;
  background: #18101b !important;
}
body .dropdown-item, body .modal-header, body .modal-footer { color: var(--jp-text) !important; border-color: rgba(255,255,255,.07) !important; background: transparent !important; }
body .nav-tabs, body .nav-pills { border-color: rgba(255,255,255,.08) !important; background: rgba(19,12,22,.9) !important; }
body .nav-link { color: #b8aab7 !important; }
body .nav-link.active { color: #fff !important; border-color: #e52e79 !important; background: #321329 !important; }
body .list-group { overflow: hidden; }
body .list-group-item { color: #f7eef4 !important; border-color: rgba(255,255,255,.065) !important; background: rgba(27,16,30,.94) !important; }
body .table-striped tbody tr:nth-of-type(odd), body .table-hover tbody tr:hover { background: rgba(255,255,255,.025) !important; }
body .form-control, body .custom-select, body select, body textarea { color: #fff !important; border-color: rgba(255,255,255,.1) !important; background: rgba(8,6,10,.72) !important; }
body .form-control::placeholder, body input::placeholder, body textarea::placeholder { color: #766d78 !important; opacity: 1; }
body select option { color: #fff; background: #171019; }
body .input-group-text { color: #cfbdca !important; border-color: rgba(255,255,255,.1) !important; background: #211424 !important; }
body .badge-primary, body .badge-info { color: #fff !important; background: linear-gradient(135deg,#a93683,#7447ad) !important; }
body .alert { color: #eadfe7 !important; border-color: var(--jp-line) !important; background: #201323 !important; }
body .pagination a, body .pagination span { color: #d9cbd6 !important; border-color: rgba(255,255,255,.08) !important; background: #1b111e !important; }
body .pagination .active span { color: #fff !important; background: #c51d67 !important; }
body hr, body .border, body .border-top, body .border-bottom { border-color: rgba(255,255,255,.07) !important; }
body .notdata { display: block; padding: 36px 15px; color: var(--jp-muted) !important; text-align: center; }
body [style*="background: white"],
body [style*="background:#fff"],
body [style*="background: #fff"],
body [style*="background-color: white"],
body [style*="background-color:#fff"],
body [style*="background-color: #fff"] { background: #18101b !important; }
body .layui-m-layerchild,
body .layui-m-layercont,
body .layui-layer-content { color: var(--jp-text) !important; background: #18101b !important; }
body .layui-m-layerbtn, body .layui-layer-btn { border-color: rgba(255,255,255,.08) !important; background: #211424 !important; }
body .layui-m-layerbtn span, body .layui-layer-btn a { color: #ff6fa9 !important; }

/* Registration */
body.jp-login.jp-register {
  display: block;
  padding: 0 18px 38px;
  background: linear-gradient(180deg,rgba(7,4,9,.42),rgba(8,5,10,.97) 52%,#08050b), url('/static_jpclub/img/hero.png') 66% top/auto 510px no-repeat, #08050b !important;
}
.jp-login__language { position: absolute; z-index: 4; right: 18px; top: max(17px,env(safe-area-inset-top)); color: var(--jp-gold); font-size: 11px; }
.jp-register__shell { width: 100%; padding-top: max(62px,calc(42px + env(safe-area-inset-top))); }
.jp-register__shell .jp-login__brand { max-width: 290px; margin: 0 0 28px; }
.jp-register__panel { padding: 20px; background: rgba(19,11,22,.94); backdrop-filter: blur(20px); }
.jp-register__heading { margin-bottom: 18px; }
.jp-register__heading > span { color: var(--jp-gold); letter-spacing: .17em; font-size: 9px; }
.jp-register__heading h2 { margin: 5px 0 4px; font: 600 21px/1.35 "Yu Mincho",serif; }
.jp-register__heading p { margin: 0; color: var(--jp-muted); font-size: 10px; line-height: 1.65; }
.jp-register .iti { width: 100%; }
.jp-register .iti__country-list { color: #eee; border-color: rgba(255,255,255,.1); background: #18101b; }
.jp-register .iti__selected-flag { background: transparent !important; }

/* Announcement */
.jp-topbar__center { flex: 1; text-align: center; }
.jp-topbar__spacer { width: 38px; }
.jp-announcement-hero { margin-top: 18px; padding: 18px; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; overflow: hidden; position: relative; background: radial-gradient(circle at 100% 0,rgba(238,46,126,.2),transparent 48%),linear-gradient(145deg,#2b172c,#160f19); }
.jp-announcement-hero__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #2b170c; background: linear-gradient(135deg,#f3d37d,#b98030); font-size: 22px; }
.jp-announcement-hero span { color: var(--jp-gold); letter-spacing: .15em; font-size: 9px; }
.jp-announcement-hero h2 { margin: 4px 0 3px; font-size: 17px; }
.jp-announcement-hero p { margin: 0; color: var(--jp-muted); font-size: 10px; line-height: 1.55; }
.jp-notice-list { display: grid; gap: 11px; }
.jp-notice-detail { padding: 17px; }
.jp-notice-detail__mark { color: #ff5b9c; font-size: 9px; letter-spacing: .14em; }
.jp-notice-detail h3 { margin: 6px 0 8px; font-size: 14px; line-height: 1.55; }
.jp-notice-detail__body { color: #c8bbc6; font-size: 11px; line-height: 1.8; }
.jp-notice-detail__body p { margin: 0; }

/* Task/order pages */
body.jp-route-rot-order-index .wrapper.homepage { padding-bottom: 88px; }
body.jp-route-rot-order-index .header { min-height: 44px; }
body.jp-route-rot-order-index .wrapper > .container:first-of-type { padding-top: 19px; padding-bottom: 8px; background: radial-gradient(circle at 100% 0,rgba(238,46,126,.17),transparent 48%) !important; }
body.jp-route-rot-order-index .card-slide { padding: 0 11px; overflow: visible; background: transparent !important; }
body.jp-route-rot-order-index .swiper-slide { padding-bottom: 8px !important; }
body.jp-route-rot-order-index .card.bg-template { border-color: rgba(231,190,109,.22) !important; background: radial-gradient(circle at 100% 0,rgba(239,48,127,.2),transparent 40%),linear-gradient(145deg,#2b172d,#170f1a) !important; }
body.jp-route-rot-order-index .container.top-50 { margin-top: -58px !important; position: relative; z-index: 3; }
body.jp-route-rot-order-index .container.top-50 > .card { padding-top: 55px !important; background: linear-gradient(145deg,#251528,#140e18) !important; }
body.jp-route-rot-order-index .card-footer .btn { min-height: 48px; }
body.jp-route-rot-order-index .text-secondary { color: #9f929e !important; }

/* Account history and common inner pages */
body.jp-route-ctrl-recharge-admin .wrapper > .container,
body.jp-route-ctrl-deposit-admin .wrapper > .container,
body.jp-route-order-index .wrapper > .container,
body.jp-route-my-caiwu .wrapper > .container { min-height: calc(100vh - 54px); padding-top: 18px; padding-bottom: 90px; }
body.jp-route-ctrl-recharge-admin .subtitle,
body.jp-route-ctrl-deposit-admin .subtitle,
body.jp-route-order-index .subtitle,
body.jp-route-my-caiwu .subtitle { margin: 0 0 13px; color: var(--jp-gold) !important; font-size: 12px; letter-spacing: .06em; }
body.jp-route-ctrl-recharge-admin .list-group,
body.jp-route-ctrl-deposit-admin .list-group { border: 1px solid var(--jp-line) !important; border-radius: 16px !important; }

/* Light7 legacy pages */
body .system-announcement,
body .notice__wrap,
body .announcement-img { border-color: var(--jp-line) !important; background-color: #18101b !important; }
body .announcement-img { opacity: .2; filter: saturate(.6) hue-rotate(270deg); }

/* 2026-10-10 audit3: legacy route normalization */
body.jp-route-ctrl-recharge .num-list {
  min-height: 54px !important;
  color: #eadde7 !important;
  border: 1px solid rgba(230,189,107,.18) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg,#241628,#150e18) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.2) !important;
}
body.jp-route-ctrl-recharge .num-list:focus,
body.jp-route-ctrl-recharge .num-list:active {
  color: #21120d !important;
  border-color: rgba(246,213,120,.42) !important;
  background: linear-gradient(135deg,#f0d27b,#ba8537) !important;
}
body.jp-route-ctrl-recharge .recharge-slide .card {
  border-color: rgba(230,189,107,.2) !important;
  background: radial-gradient(circle at 100% 0,rgba(238,46,126,.2),transparent 45%),linear-gradient(145deg,#29162b,#160f19) !important;
}
body.jp-route-ctrl-recharge .subtitle { color: var(--jp-gold) !important; }

body.jp-route-my-team .team-main,
body.jp-route-my-team .team-chart,
body.jp-route-my-yue .access-info,
body.jp-route-my-yue .access-money,
body.jp-route-my-detail .help-main { color: var(--jp-text) !important; }
body.jp-route-my-team .team-main { padding: 18px 14px 32px !important; background: transparent !important; }
body.jp-route-my-team .team-chart {
  padding: 20px 16px !important;
  border: 1px solid rgba(230,189,107,.2) !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 100% 0,rgba(238,46,126,.19),transparent 42%),linear-gradient(145deg,#29162b,#160f19) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
}
body.jp-route-my-team .team-line { border-color: rgba(255,255,255,.07) !important; }
body.jp-route-my-team .team-item-desc { color: #a99ca8 !important; }
body.jp-route-my-team .team-item-num { color: #f7eef4 !important; font-family: "Yu Mincho",serif; }
body.jp-route-my-team .team-chart h3 { color: var(--jp-gold) !important; }

body.jp-route-my-yue .access-info {
  margin: 18px 14px 0 !important;
  border: 1px solid rgba(230,189,107,.2) !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 100% 0,rgba(238,46,126,.2),transparent 45%),linear-gradient(145deg,#2b172d,#170f1a) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
}
body.jp-route-my-yue .access-mian { padding: 19px !important; }
body.jp-route-my-yue .access-mian span { color: #b6a8b4 !important; }
body.jp-route-my-yue .access-mian p { margin-top: 7px !important; color: #fff !important; font: 400 31px/1.2 "Yu Mincho",serif !important; }
body.jp-route-my-yue .access-money {
  width: auto !important;
  margin: 12px 14px 0 !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border: 1px solid var(--jp-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg,#241628,#150e18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}
body.jp-route-my-yue .access-money a { border-right: 1px solid rgba(255,255,255,.07) !important; }
body.jp-route-my-yue .access-money a:last-of-type { border-right: 0 !important; }
body.jp-route-my-yue .access-item { color: #f3e9f0 !important; background: transparent !important; }
body.jp-route-my-yue .access-item img { filter: sepia(1) saturate(.7) brightness(1.5); }

body.jp-route-my-detail .help-main {
  min-height: 120px !important;
  margin: 15px 12px !important;
  padding: 20px 16px !important;
  border: 1px solid var(--jp-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg,#241628,#150e18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}
body.jp-route-my-detail .help-detile { color: #d7cad4 !important; line-height: 1.8 !important; }
body.jp-route-my-detail .goback a { color: #f4ebf1 !important; }

body.jp-route-ctrl-my-data .hui-media-list { padding: 18px 14px 30px !important; }
body.jp-route-ctrl-my-data .hui-media-list ul {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.jp-route-ctrl-my-data .hui-media-list li { min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.jp-route-ctrl-my-data .hui-media-list li::marker { content: ""; }
body.jp-route-ctrl-my-data .goQiangDan {
  min-height: 210px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  border: 1px solid rgba(230,189,107,.18) !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 100% 0,rgba(238,46,126,.17),transparent 48%),linear-gradient(145deg,#28162a,#150e18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}
body.jp-route-ctrl-my-data .hui-media-list-img { width: 78px !important; height: 78px !important; margin: 0 auto 12px !important; }
body.jp-route-ctrl-my-data .hui-media-list-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 18px !important; }
body.jp-route-ctrl-my-data .hui-media-content p { margin: 4px 0 !important; color: #f7eef4 !important; font-size: 13px !important; }
body.jp-route-ctrl-my-data .hui-media-content p:first-child { color: var(--jp-gold) !important; font-size: 14px !important; font-weight: 700; }
body.jp-route-ctrl-my-data .hui-media-content em { color: #ff6aa4 !important; font-size: 11px !important; }

body.jp-route-my-edit-address .main,
body.jp-route-my-edit-bank .container { color: var(--jp-text) !important; background: transparent !important; }
body.jp-route-my-edit-address .bink_card,
body.jp-route-my-edit-address .bink_card_ul,
body.jp-route-my-edit-bank .form_container { border-color: var(--jp-line) !important; background: transparent !important; }
body.jp-route-my-edit-address .bink_card_ul li,
body.jp-route-my-edit-bank .form,
body.jp-route-my-edit-bank .input_box { color: var(--jp-text) !important; border-color: rgba(255,255,255,.08) !important; background: #1b111e !important; }
body.jp-route-my-edit-address .bink_card_ul h4,
body.jp-route-my-edit-bank .form_title { color: #cabdc7 !important; }
body.jp-route-my-edit-address .save-btn,
body.jp-route-my-edit-bank .btn { background: linear-gradient(135deg,#f23882,#c51964) !important; }

body.jp-route-ctrl-junior .container.bg-template,
body.jp-route-ctrl-junior2 .container.bg-template { background: radial-gradient(circle at 100% 0,rgba(238,46,126,.18),transparent 44%),linear-gradient(145deg,#2a172c,#160f19) !important; }
body.jp-route-ctrl-receive-site .form_container,
body.jp-route-ctrl-order-info .order-main,
body.jp-route-shop-order-info .order-main,
body.jp-route-shop-order-detail .order-main { color: var(--jp-text) !important; background: transparent !important; }

/* Last-resort guards for old embedded light panels. */
body [style*="background-color:#eee"],
body [style*="background-color: #eee"],
body [style*="background:#eee"],
body [style*="background: #eee"],
body [style*="background-color:#f2f2f2"],
body [style*="background: #f2f2f2"] { color: var(--jp-text) !important; background: #1b111e !important; }

/* 2026-10-10 audit4: final deep-route visual pass */
body.jp-route-my-yue .access-money { min-height: 70px !important; height: auto !important; overflow: hidden !important; }
body.jp-route-my-yue .access-money > a { width: auto !important; min-width: 0 !important; height: 58px !important; }
body.jp-route-my-yue .access-item {
  width: 100% !important;
  height: 58px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  white-space: nowrap !important;
}
body.jp-route-my-yue .access-item img { width: 28px !important; height: 28px !important; margin: 0 !important; object-fit: contain !important; }
body.jp-route-my-yue .access-item span { width: auto !important; line-height: 1.2 !important; }
body.jp-route-my-yue .clear { display: none !important; }

body > header,
body header:not(.jp-topbar) {
  color: var(--jp-text) !important;
  border-color: rgba(238,46,126,.18) !important;
  background: rgba(11,7,16,.94) !important;
  box-shadow: none !important;
}

body.jp-route-ctrl-lixibao-ru .my-meun { margin: 18px 14px !important; overflow: hidden; border: 1px solid var(--jp-line) !important; border-radius: 16px !important; background: linear-gradient(145deg,#241628,#150e18) !important; }
body.jp-route-ctrl-lixibao-ru .meun-item { color: #eadfe7 !important; border-color: rgba(255,255,255,.07) !important; background: transparent !important; }
body.jp-route-ctrl-lixibao-ru .meun-item input { color: #fff !important; border: 0 !important; background: transparent !important; }
body.jp-route-ctrl-lixibao-ru .save-btn { color: #fff !important; border-radius: 999px !important; background: linear-gradient(135deg,#f23882,#c51964) !important; }

body.jp-route-ctrl-recharge-before .form_box { margin-top: 16px !important; }
body.jp-route-ctrl-recharge-before .form {
  min-height: 64px !important;
  margin: 9px 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(230,189,107,.18) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg,#241628,#150e18) !important;
}
body.jp-route-ctrl-recharge-before .form_title,
body.jp-route-ctrl-recharge-before .form input { color: #f5ecf2 !important; background: transparent !important; }
body.jp-route-ctrl-recharge-before .copy_btn { color: var(--jp-gold) !important; }
body.jp-route-ctrl-recharge-before .wrin { margin: 17px !important; color: #c5b7c2 !important; line-height: 1.75 !important; }

body.jp-route-ctrl-set .content { padding: 16px 14px 30px !important; }
body.jp-route-ctrl-set .flex-row {
  min-height: 58px !important;
  color: var(--jp-text) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  background: linear-gradient(145deg,rgba(35,20,38,.96),rgba(21,14,24,.96)) !important;
}
body.jp-route-ctrl-set .flex-row:first-child { border-radius: 16px 16px 0 0 !important; }
body.jp-route-ctrl-set .flex-row:last-child { border-radius: 0 0 16px 16px !important; }
body.jp-route-ctrl-set .main-title { color: #f3eaf0 !important; }
body.jp-route-ctrl-set .right-info,
body.jp-route-ctrl-set .main-right { color: #9f929e !important; }
body.jp-route-ctrl-set .flex-row-left-img { filter: sepia(1) saturate(.65) brightness(1.45); }

body.jp-route-my-activity .notice-main { padding: 16px 12px !important; background: transparent !important; }
body.jp-route-my-activity .notice-list {
  overflow: hidden !important;
  color: #eee4eb !important;
  border: 1px solid var(--jp-line) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg,#241628,#150e18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}
body.jp-route-my-activity .notice-list .title { color: var(--jp-gold) !important; }
body.jp-route-my-activity .notice-list .time { color: #8f828d !important; }

body.jp-route-my-kvip .form,
body.jp-route-my-vipcard .form {
  color: var(--jp-text) !important;
  border: 1px solid var(--jp-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg,#241628,#150e18) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
}
body.jp-route-my-kvip .vipcard-con-box,
body.jp-route-my-vipcard .vipcard-con-box {
  color: #f2e8ef !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.025) !important;
}
body.jp-route-my-kvip .cl-main,
body.jp-route-my-vipcard .cl-main { color: #f2e8ef !important; }
body.jp-route-my-kvip .cl-notice,
body.jp-route-my-vipcard .cl-notice { color: #978a96 !important; }
body.jp-route-my-kvip .headerT,
body.jp-route-my-vipcard .headerT {
  color: var(--jp-gold) !important;
  border-bottom: 1px solid rgba(230,189,107,.16) !important;
  background: #1b111e !important;
  background-image: none !important;
}

body.jp-route-ctrl-bank .bank_title { color: var(--jp-gold) !important; border-color: var(--jp-line) !important; background: transparent !important; }
body.jp-route-ctrl-bank .bank-list,
body.jp-route-ctrl-bank .bank { color: var(--jp-text) !important; background: transparent !important; }
body.jp-route-my-edit-username .main,
body.jp-route-my-edit-username .bink_card,
body.jp-route-my-edit-username .bink_card_ul { color: var(--jp-text) !important; background: transparent !important; }
body.jp-route-my-edit-username .bink_card_ul li { border-color: var(--jp-line) !important; background: #1b111e !important; }
body.jp-route-my-edit-username .save-btn { color: #fff !important; border: 0 !important; background: linear-gradient(135deg,#f23882,#c51964) !important; }

/* 2026-10-10 task video library */
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-dialog { max-width: 390px; margin: 14px auto; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-content {
  overflow: hidden; border: 1px solid rgba(231,190,109,.24) !important; border-radius: 20px !important;
  background: linear-gradient(155deg,#29132a 0%,#130d17 62%,#0c0910 100%) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.58) !important;
}
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-header { padding: 15px 17px 10px; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-header h5 { color: #f4edf3; font-size: 14px; letter-spacing: .04em; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-body { padding: 0 14px 8px !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video { text-align: left; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__meta,
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__status,
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__finance { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__meta { margin-bottom: 9px; color: #d8b96d; font-size: 10px; letter-spacing: .05em; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__frame {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px; background: #050307; box-shadow: 0 12px 28px rgba(0,0,0,.42);
}
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #050307; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__title { margin: 13px 0 5px; color: #fff; font-size: 14px; font-weight: 600; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__guide { margin: 0 0 11px; color: #ad9eaa; font-size: 10px; line-height: 1.65; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__progress { overflow: hidden; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ec2776,#f0cf72); transition: width .25s ease; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__status { margin-top: 7px; color: #b3a5b0; font-size: 10px; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__status strong { color: #f3cf75; font-weight: 600; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__finance { margin-top: 13px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: rgba(255,255,255,.025); color: #aa9da8; font-size: 10px; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__finance b { margin-left: 5px; color: #f4edf3; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__source { margin: 9px 2px 0; color: #776b76; font-size: 8px; line-height: 1.45; word-break: break-word; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__source a { color: #b393c0; text-decoration: underline; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__loading,
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__error { min-height: 190px; display: flex; align-items: center; justify-content: center; padding: 20px; color: #b7a9b4; font-size: 11px; line-height: 1.7; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-footer { padding: 10px 14px 15px; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .tabs_btn2 { min-width: 170px; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-task-submit--locked { opacity: .42 !important; filter: grayscale(.45); cursor: not-allowed; box-shadow: none !important; }
body.jp-route-order-index .jp-task-history-card__poster { position: relative; overflow: hidden; width: 78px !important; height: 54px !important; border: 1px solid rgba(231,190,109,.18); border-radius: 11px !important; background:#08050b; }
body.jp-route-order-index .jp-task-history-card__poster img { width: 100% !important; height: 100% !important; object-fit: cover; }
body.jp-route-order-index .jp-task-history-card__poster span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; background:rgba(0,0,0,.2); }
body.jp-route-order-index .jp-task-history-card__label { color:#d0aa5c; font-size:9px; letter-spacing:.06em; }\n
.jp-card-form{margin-top:14px;padding:18px}.jp-card-form label{display:block;color:#ecd8b0;font-size:12px;margin-bottom:8px}.jp-card-form input{box-sizing:border-box;width:100%;height:46px;margin-bottom:14px;padding:0 14px;border:1px solid rgba(207,166,95,.42);border-radius:12px;background:#130d18;color:#fff;font-size:15px;letter-spacing:.04em;outline:none}.jp-card-form input:focus{border-color:#dfb666;box-shadow:0 0 0 3px rgba(223,182,102,.12)}.jp-form-result{min-height:18px;padding-top:9px;font-size:11px;text-align:center}.jp-form-result.is-ok{color:#54d9a0}.jp-form-result.is-error{color:#ff7fa6}.jp-muted{margin:14px 0 0;color:#aa9daa;font-size:10px;line-height:1.65}.jp-muted-box{margin-top:16px;padding:15px;color:#aa9daa;font-size:10px;line-height:1.7}.jp-progress{height:8px;margin:16px 3px 6px;background:#281b2b;border-radius:8px;overflow:hidden}.jp-progress span{display:block;height:100%;background:linear-gradient(90deg,#d09b42,#ea2d7d);border-radius:8px}.jp-progress-copy{text-align:right;color:#aa9daa;font-size:10px}.jp-step.is-current{border-color:rgba(234,45,125,.55);box-shadow:0 0 0 1px rgba(234,45,125,.18)}


/* 2026-10-10 task flow/video layout repair */
body.jp-route-order-index .wrapper.homepage { padding-top: 42px !important; min-height: 100vh; }
body.jp-route-order-index .header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; height: 42px !important; background: #120b16 !important; border-bottom: 1px solid rgba(234,45,125,.16); }
body.jp-route-order-index .container.mb-3 { min-height: 0 !important; margin: 10px auto 12px !important; padding: 0 12px !important; }
body.jp-route-order-index .icon-slide { height: 36px !important; min-height: 36px !important; overflow: visible !important; }
body.jp-route-order-index .icon-slide .swiper-wrapper { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; height: 36px !important; transform: none !important; }
body.jp-route-order-index .icon-slide .swiper-slide { width: auto !important; height: 36px !important; padding: 0 !important; }
body.jp-route-order-index .icon-slide .btn { display:flex; align-items:center; justify-content:center; width:100%; height:34px; margin:0 !important; padding:0 4px; border:1px solid rgba(234,45,125,.25); border-radius:10px; color:#b7a9b5; background:#1a101d; font-size:10px; }
body.jp-route-order-index .icon-slide .btn-outline-default { color:#fff !important; border-color:#ec2776 !important; background:linear-gradient(135deg,#ed2d7d,#be185e) !important; }
body.jp-route-order-index .icon-slide .swiper-pagination { display:none !important; }
body.jp-route-order-index .jp-task-history-card { overflow:hidden; border:1px solid rgba(234,45,125,.2) !important; border-radius:15px !important; background:#1b101e !important; }
body.jp-route-order-index .jp-task-history-card__poster { position:relative !important; overflow:hidden !important; flex:0 0 78px; width:78px !important; height:54px !important; border:1px solid rgba(231,190,109,.18); border-radius:11px !important; background:#08050b; }
body.jp-route-order-index .jp-task-history-card__poster img { display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; }
body.jp-route-order-index .jp-task-history-card__poster span { position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:auto !important; height:auto !important; margin:0 !important; color:#fff !important; font-size:16px !important; line-height:1 !important; background:rgba(0,0,0,.22); transform:none !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail { padding:0 !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-dialog { width:calc(100% - 24px) !important; max-width:360px !important; margin:12px auto !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-content,
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-body,
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail #orderListInfo,
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-task-video { box-sizing:border-box !important; width:100% !important; min-width:0 !important; max-width:100% !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-content { max-height:calc(100vh - 24px); margin:0 !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-body { overflow-y:auto !important; padding:0 12px 8px !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__frame { position:relative !important; overflow:hidden !important; width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio:16/9 !important; border-radius:12px !important; contain:layout paint; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__frame video { position:absolute !important; inset:0 !important; display:block !important; box-sizing:border-box !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:100% !important; max-height:100% !important; margin:0 !important; object-fit:contain !important; background:#050307 !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-footer { flex-wrap:nowrap; gap:8px; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-footer>div { min-width:0 !important; flex:1 1 0; margin:0 !important; text-align:center; }
body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 { margin-top:12px !important; padding:8px 0; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(5,3,8,.22); }
body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 .col-4 { display:flex; min-height:58px; flex-direction:column; align-items:center; justify-content:center; padding:4px 3px; border-right:1px solid rgba(255,255,255,.07); }
body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 .col-4:last-child { border-right:0; }
body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 h3 { min-height:28px; margin:0; color:#fff; font-size:22px; line-height:28px; font-variant-numeric:tabular-nums; }
body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 p { min-height:16px; margin:2px 0 0; color:#b7a9b5; font-size:10px; line-height:16px; }
@media (max-width:360px){body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-dialog{width:calc(100% - 16px)!important;margin:8px auto!important}body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-header{padding:12px 12px 8px!important}body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-body{padding:0 9px 6px!important}}


/* 2026-10-10 playback controls/fullscreen verification */
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__frame video:fullscreen,
body:is(.jp-route-rot-order-index,.jp-route-order-index) .jp-task-video__frame video:-webkit-full-screen {
  position:fixed !important; inset:0 !important; width:100vw !important; min-width:100vw !important;
  max-width:100vw !important; height:100vh !important; min-height:100vh !important; max-height:100vh !important;
  margin:0 !important; object-fit:contain !important; background:#000 !important;
}


/* 2026-10-12 membership-card information architecture */
.jp-nav { overflow: visible; padding-top: 8px; }
.jp-nav a { position: relative; z-index: 1; }
.jp-nav .jp-nav__featured { z-index: 3; color: #d9b766; font-weight: 700; }
.jp-nav .jp-nav__featured .jp-nav__icon--card {
  width: 56px; height: 56px; margin: -30px auto 3px; border: 1px solid rgba(255,235,181,.6); border-radius: 50%;
  color: #25150b; background: radial-gradient(circle at 35% 25%,#fff1b9 0,#e8bd61 38%,#a56b20 100%);
  box-shadow: 0 9px 26px rgba(0,0,0,.55),0 0 0 5px rgba(11,7,16,.96),0 0 24px rgba(231,187,96,.28);
}
.jp-nav .jp-nav__featured .jp-nav__icon--card svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jp-nav .jp-nav__featured .jp-nav__icon--card .jp-nav__spark { fill: currentColor; stroke: none; }
.jp-nav .jp-nav__featured.is-active .jp-nav__icon--card { color:#fff5dc; background: radial-gradient(circle at 35% 25%,#fa6ca6 0,#e72e78 46%,#921146 100%); box-shadow:0 10px 28px rgba(0,0,0,.58),0 0 0 5px rgba(11,7,16,.96),0 0 26px rgba(239,47,127,.52); }

.jp-carousel__track { display:flex; width:100%; transition:transform .58s cubic-bezier(.22,.7,.3,1); will-change:transform; }
.jp-carousel__slide { flex:0 0 100%; min-width:0; position:relative; }
.jp-carousel__dots { position:absolute; left:0; right:0; bottom:10px; z-index:4; display:flex; justify-content:center; gap:6px; }
.jp-carousel__dot { width:6px; height:6px; min-height:0; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.45); box-shadow:none; transition:width .25s ease,background .25s ease; }
.jp-carousel__dot.is-active { width:20px; background:linear-gradient(90deg,#f2cc74,#ef3b82); }
.jp-banner-carousel { position:relative; overflow:hidden; margin:13px 0 0; aspect-ratio:16/9; border:1px solid rgba(230,189,107,.22); border-radius:20px; background:#0b0710; box-shadow:var(--jp-shadow); }
.jp-banner-carousel .jp-carousel__track,.jp-banner-carousel .jp-carousel__slide { height:100%; }
.jp-banner-carousel img { display:block; width:100%; height:100%; object-fit:cover; }
.jp-home-actions { display:grid; grid-template-columns:1.15fr .85fr; gap:10px; margin-top:12px; }

.jp-membership-page { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
.jp-card-showcase { margin-top:16px; }
.jp-card-carousel { position:relative; overflow:hidden; border:1px solid rgba(230,189,107,.28); border-radius:20px; background:#0b0710; box-shadow:0 18px 46px rgba(0,0,0,.45); }
.jp-card-carousel .jp-carousel__slide { min-height:205px; background:#100b13; }
.jp-card-carousel img { display:block; width:100%; aspect-ratio:1.72/1; object-fit:cover; opacity:.92; }
.jp-card-showcase__caption { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:3px; padding:35px 18px 22px; background:linear-gradient(transparent,rgba(7,4,9,.94)); }
.jp-card-showcase__caption strong { color:#f3d787; font:600 17px/1.3 "Yu Mincho",serif; letter-spacing:.06em; }
.jp-card-showcase__caption span { color:#d0c3cd; font-size:10px; }
.jp-card-carousel .jp-carousel__dots { bottom:8px; justify-content:flex-end; padding-right:16px; }

.jp-membership-module { margin-top:15px; }
.jp-activation-start { margin-top:15px; padding:18px; }
.jp-activation-start small { color:#c99f55; font-size:8px; letter-spacing:.18em; }
.jp-activation-start h2 { margin:3px 0 0; font:600 18px/1.35 "Yu Mincho",serif; }
.jp-issued-card { position:relative; isolation:isolate; overflow:hidden; aspect-ratio:1.72/1; padding:20px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(238,204,132,.58); border-radius:19px; color:#f7e5b2; background:radial-gradient(circle at 18% 0,rgba(255,255,255,.11),transparent 30%),linear-gradient(145deg,#181716 0%,#050505 48%,#17120d 100%); box-shadow:0 22px 45px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.12),inset 0 -1px rgba(255,211,116,.12); }
.jp-issued-card::before,.jp-issued-card::after { content:""; position:absolute; z-index:-1; pointer-events:none; }
.jp-issued-card::before { width:78%; height:62%; right:-31%; bottom:-26%; border:2px solid rgba(223,177,80,.4); border-radius:50%; transform:rotate(-17deg); box-shadow:0 -10px 38px rgba(214,158,55,.13); }
.jp-issued-card::after { width:72%; height:52%; left:-32%; bottom:-29%; border-top:1px solid rgba(247,214,140,.34); border-radius:50%; transform:rotate(13deg); background:linear-gradient(12deg,rgba(177,114,31,.2),transparent 62%); }
.jp-issued-card__shine { position:absolute; inset:0; z-index:-1; opacity:.42; background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.09) 29%,transparent 39%); transform:translateX(-14%); }
.jp-issued-card__brand { display:flex; align-items:center; gap:10px; }
.jp-issued-card__brand>span:last-child { display:grid; gap:2px; }
.jp-issued-card__brand small,.jp-issued-card__number small { color:#c7a862; font-size:7px; letter-spacing:.21em; }
.jp-issued-card__brand strong { color:#ead08f; font:600 12px/1.25 Georgia,"Yu Mincho",serif; letter-spacing:.12em; }
.jp-issued-card__emblem { position:relative; width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:1px solid #d6ad55; transform:rotate(45deg); }
.jp-issued-card__emblem::before,.jp-issued-card__emblem::after,.jp-issued-card__emblem i { content:""; position:absolute; inset:6px; border:1px solid rgba(232,194,107,.82); transform:rotate(45deg); }
.jp-issued-card__emblem::after { inset:11px; transform:rotate(0deg); }
.jp-issued-card__emblem i { inset:3px 11px; transform:rotate(45deg); }
.jp-issued-card__number { display:grid; gap:5px; }
.jp-issued-card__number strong { color:#fff6df; font:600 18px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.09em; overflow-wrap:anywhere; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.jp-issued-card__footer { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; color:#c9a85d; font-size:7px; letter-spacing:.15em; }
.jp-issued-card__footer span:last-child { text-align:right; color:#f1d180; }
.jp-issued-card.is-active { border-color:#e4c270; box-shadow:0 22px 45px rgba(0,0,0,.55),0 0 30px rgba(211,164,65,.12),inset 0 1px rgba(255,255,255,.12); }
.jp-card-form--embedded { margin-top:14px; padding:0; border:0; background:transparent; box-shadow:none; }
.jp-membership-confirm { margin-top:14px; display:flex; gap:10px; align-items:center; color:#baacb7; font-size:10px; line-height:1.6; }
.jp-membership-confirm span { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:50%; color:#0d2018; background:#62d7a4; }
.jp-membership-confirm p { margin:0; }
.jp-activation-start { overflow:hidden; position:relative; border-color:rgba(234,45,125,.3); background:radial-gradient(circle at 100% 0,rgba(236,45,124,.22),transparent 42%),linear-gradient(145deg,#29142b,#160e19); }
.jp-activation-start::after { content:"ACTIVATE"; position:absolute; right:-18px; top:-4px; color:rgba(237,194,107,.045); font:800 52px/1 sans-serif; transform:rotate(-7deg); pointer-events:none; }
.jp-activation-start__copy { position:relative; z-index:1; margin-bottom:15px; }
.jp-activation-start p { margin:7px 0 0; color:#ae9fab; font-size:10px; line-height:1.65; }

.jp-stage-overview { margin:12px 12px 0; padding:14px; border:1px solid rgba(230,189,107,.2); border-radius:16px; background:linear-gradient(145deg,#241427,#130d17); box-shadow:0 12px 30px rgba(0,0,0,.28); }
.jp-stage-overview__head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:12px; }
.jp-stage-overview__head small { color:#d6ad61; font-size:8px; letter-spacing:.15em; }
.jp-stage-overview__head h2 { margin:3px 0 0; color:#fff; font-size:15px; }
.jp-stage-overview__head>span { color:#d1b66d; font-size:9px; }
.jp-stage-overview__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.jp-stage-brief { min-width:0; min-height:54px; display:grid; grid-template-columns:24px minmax(0,1fr) 10px; align-items:center; gap:5px; padding:8px; border:1px solid rgba(255,255,255,.06); border-radius:11px; color:#8f838f; background:rgba(255,255,255,.025); }
.jp-stage-brief>span { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#2d2030; font-size:10px; }
.jp-stage-brief strong { min-width:0; white-space:nowrap; color:#b7aab5; font-size:10px; }
.jp-stage-brief i { font-style:normal; }
.jp-stage-brief.is-current { border-color:rgba(239,47,128,.58); color:#fff; background:linear-gradient(135deg,rgba(237,46,126,.2),rgba(122,18,73,.12)); box-shadow:0 0 0 1px rgba(239,47,128,.12); }
.jp-stage-brief.is-current>span { color:#fff; background:linear-gradient(135deg,#f2468c,#b5135b); }
.jp-stage-brief.is-current strong { color:#fff; }
.jp-stage-brief.is-done { color:#5ce0a5; border-color:rgba(92,224,165,.24); }
.jp-stage-brief.is-done>span { color:#0b2017; background:#61dca7; }
.jp-stage-brief.is-done strong { color:#c8f5e2; }
.jp-procedure-stats .col-4:last-child h3 { font-size:15px !important; }

@media(max-width:360px){.jp-card-carousel .jp-carousel__slide{min-height:190px}.jp-stage-overview{margin-inline:8px;padding:11px}.jp-stage-brief{grid-template-columns:22px minmax(0,1fr);padding:7px}.jp-stage-brief i{display:none}.jp-stage-brief>span{width:22px;height:22px}.jp-stage-brief strong{font-size:9px}}

/* 2026-10-12 injected-order member benefit popup and balance top-up sheet */
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-procedure-heading { min-width:0; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-procedure-heading h5 { margin:0; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-badge { display:inline-flex; align-items:center; min-height:21px; margin:0 0 6px; padding:0 8px; border:1px solid rgba(225,190,108,.44); border-radius:999px; color:#efd694; background:rgba(216,181,104,.08); font-size:8px; font-weight:700; letter-spacing:.09em; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-badge[hidden],
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-subtitle[hidden] { display:none !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-subtitle { margin:4px 0 0; color:#ad9fa9; font-size:9px; letter-spacing:.045em; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-content.jp-benefit-order { position:relative; border-color:rgba(222,185,103,.66) !important; background:radial-gradient(circle at 88% 2%,rgba(216,181,104,.14),transparent 27%),linear-gradient(160deg,#26121f 0%,#140c17 65%,#0b080e 100%) !important; box-shadow:0 24px 70px rgba(0,0,0,.64),0 0 38px rgba(200,150,59,.08) !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .modal-content.jp-benefit-order::after { content:"PREMIUM BENEFIT"; position:absolute; z-index:0; right:-55px; top:195px; color:rgba(216,181,104,.035); font:700 34px/1 Georgia,serif; letter-spacing:.12em; transform:rotate(-90deg); pointer-events:none; white-space:nowrap; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-order .modal-header,
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-order .modal-body,
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-order .modal-footer { position:relative; z-index:1; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-order .modal-header h5 { color:#f0d796; font:600 18px/1.3 "Yu Mincho",serif; letter-spacing:.05em; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-task-video--benefit .jp-task-video__frame { border-color:rgba(222,185,103,.43) !important; box-shadow:0 12px 28px rgba(0,0,0,.46),0 0 0 1px rgba(240,216,151,.04) inset; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-task-video--benefit .jp-task-video__progress i { background:linear-gradient(90deg,#aa762d,#f0d992); box-shadow:0 0 8px rgba(222,185,103,.28); }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-task-video--benefit .jp-task-video__finance b { color:#ecd18d; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-order .tabs_btn2 { color:#211204 !important; border-color:rgba(255,239,189,.42) !important; background:linear-gradient(90deg,#b67f2e 0%,#eed591 48%,#c4923f 100%) !important; box-shadow:0 10px 26px rgba(189,139,51,.22),0 0 0 1px rgba(255,242,201,.18) inset !important; }
body:is(.jp-route-rot-order-index,.jp-route-order-index) #orderDetail .jp-benefit-order .tabs_btn2.jp-task-submit--locked { opacity:1 !important; filter:none !important; cursor:pointer; }

body.jp-benefit-sheet-open { overflow:hidden !important; }
.jp-benefit-recharge { position:fixed; inset:0; z-index:2100; display:flex; align-items:flex-end; justify-content:center; visibility:hidden; pointer-events:none; }
.jp-benefit-recharge.is-open { visibility:visible; pointer-events:auto; }
.jp-benefit-recharge__backdrop { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:rgba(5,2,8,.78); opacity:0; transition:opacity .22s ease; backdrop-filter:blur(5px); }
.jp-benefit-recharge.is-open .jp-benefit-recharge__backdrop { opacity:1; }
.jp-benefit-recharge__panel { position:relative; z-index:1; width:min(100%,390px); max-height:min(82vh,640px); overflow-y:auto; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); border:1px solid rgba(222,185,103,.5); border-bottom:0; border-radius:22px 22px 0 0; color:#f6edf3; background:radial-gradient(circle at 6% 4%,rgba(216,181,104,.13),transparent 23%),linear-gradient(160deg,#1b121e,#0e0a12 72%); box-shadow:0 -24px 70px rgba(0,0,0,.62); transform:translateY(105%); transition:transform .28s cubic-bezier(.22,.72,.25,1); }
.jp-benefit-recharge.is-open .jp-benefit-recharge__panel { transform:translateY(0); }
.jp-benefit-recharge__handle { width:42px; height:4px; margin:0 auto 14px; border-radius:999px; background:rgba(255,255,255,.18); }
.jp-benefit-recharge__head { display:flex; align-items:center; gap:11px; }
.jp-benefit-recharge__alert { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:12px; color:#261604; background:linear-gradient(145deg,#f0d47f,#b77b24); font:800 20px/1 Georgia,serif; box-shadow:0 8px 20px rgba(184,126,36,.2); }
.jp-benefit-recharge__head small { display:block; margin-bottom:3px; color:#d3aa58; font-size:9px; letter-spacing:.08em; }
.jp-benefit-recharge__head h3 { margin:0; color:#fff7e6; font:600 17px/1.35 "Yu Mincho",serif; }
.jp-benefit-recharge__copy { margin:13px 0 10px; color:#ad9fac; font-size:10px; line-height:1.65; }
.jp-benefit-recharge__shortfall { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:10px 12px; border:1px solid rgba(222,185,103,.18); border-radius:11px; background:rgba(216,181,104,.045); }
.jp-benefit-recharge__shortfall span { color:#ad9fab; font-size:10px; }
.jp-benefit-recharge__shortfall strong { color:#edd28e; font-size:13px; font-variant-numeric:tabular-nums; }
.jp-benefit-recharge__methods { display:grid; gap:8px; }
.jp-benefit-recharge__method { width:100%; min-height:62px; display:grid; grid-template-columns:38px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:13px; color:#f5edf2; background:rgba(255,255,255,.035); text-align:left; box-shadow:none; }
.jp-benefit-recharge__method:active { border-color:rgba(222,185,103,.45); background:rgba(216,181,104,.08); transform:scale(.992); }
.jp-benefit-recharge__method-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#e8c875; background:rgba(216,181,104,.1); font-size:17px; }
.jp-benefit-recharge__method span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.jp-benefit-recharge__method strong { overflow:hidden; color:#f8f1f5; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.jp-benefit-recharge__method small { overflow:hidden; color:#978a96; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.jp-benefit-recharge__method>b { color:#8f818d; font-size:20px; font-weight:400; }
.jp-benefit-recharge__empty { margin:0; padding:20px; color:#a99ca7; text-align:center; font-size:10px; }
.jp-benefit-recharge__close { width:100%; min-height:40px; margin-top:12px; border:0; color:#a99da7; background:transparent; font-size:11px; }



/* 2026-10-13 procedure flow: compact card activation and labelled counters */
.jp-membership-page{min-height:100vh;min-height:100svh;min-height:100dvh;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.jp-membership-page .jp-card-showcase{margin-top:10px}
.jp-membership-page .jp-card-carousel{aspect-ratio:1.9/1}
.jp-membership-page .jp-card-carousel .jp-carousel__track,.jp-membership-page .jp-card-carousel .jp-carousel__slide{height:100%}
.jp-membership-page .jp-card-carousel .jp-carousel__slide{min-height:0}
.jp-membership-page .jp-card-carousel img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.jp-membership-page .jp-card-showcase__caption{padding:29px 14px 17px}
.jp-membership-page .jp-membership-module{margin-top:10px}
.jp-membership-page .jp-issued-card{aspect-ratio:1.9/1;min-height:0;padding:16px}
.jp-membership-page .jp-card-form--embedded{margin-top:10px}
.jp-membership-page .jp-membership-confirm{margin-top:9px}
.jp-activation-inline{margin-top:10px}
.jp-btn--activated{border:1px solid rgba(226,193,107,.42);color:#f2d886;background:linear-gradient(135deg,#302515,#17110b);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.jp-procedure-stats h3{display:flex;align-items:baseline;justify-content:center;gap:5px;white-space:nowrap}
.jp-procedure-stats h3 small{color:#b59ead;font-size:9px;font-weight:500}
.jp-procedure-stats h3 strong{color:#fff;font-size:18px;font-weight:500}

/* 2026-10-14 iOS Safari / Android Chrome viewport parity */
@media (max-height:640px){
  .jp-membership-page .jp-card-showcase{margin-top:7px}
  .jp-membership-page .jp-card-carousel{height:148px;aspect-ratio:auto}
  .jp-membership-page .jp-membership-module{margin-top:7px}
  .jp-membership-page .jp-issued-card{height:148px;aspect-ratio:auto;padding:14px}
  .jp-membership-page .jp-membership-confirm{margin-top:7px}
  .jp-membership-page .jp-activation-inline{margin-top:7px}
  .jp-membership-page .jp-btn{min-height:46px}
}


/* phase2: empty avatar, VIP withdrawal tiers, manual bank field */
.jp-avatar--empty{display:grid;place-items:center;text-decoration:none;background:linear-gradient(145deg,#251421,#0d080f);border:1px dashed rgba(214,176,91,.7);color:#d6b05b;font-size:28px}
.jp-vip-grid{display:grid;gap:12px}.jp-vip-tier{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.jp-vip-tier h3{margin:8px 0 4px;color:#f5d788;font-size:18px}.jp-vip-tier p{margin:0;color:#aa9daa;font-size:11px;line-height:1.8}.jp-vip-tier.is-current{border-color:rgba(233,42,119,.8);box-shadow:0 0 24px rgba(233,42,119,.12)}.jp-vip-current{color:#e92a77;font-size:12px;font-weight:700}@media(max-width:420px){.jp-vip-tier{align-items:stretch;flex-direction:column}.jp-vip-tier .jp-btn{width:100%}}


/* 2026-10-15 member entry, bound-card profile access, and order draw */
.jp-login-role{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.jp-login-role__option{min-width:0;padding:12px 8px;border:1px solid rgba(226,190,109,.23);border-radius:13px;color:#b9aab6;background:rgba(7,4,9,.38);text-align:left;transition:border-color .2s,background .2s,transform .2s}
.jp-login-role__option>span{width:25px;height:25px;float:left;display:grid;place-items:center;margin-right:7px;border-radius:50%;color:#d9af57;background:rgba(217,175,87,.1);font-size:15px}
.jp-login-role__option small,.jp-login-role__option strong{display:block;white-space:nowrap}.jp-login-role__option small{font-size:8px;letter-spacing:.08em}.jp-login-role__option strong{margin-top:2px;color:#f1e7ee;font-size:11px}
.jp-login-role__option.is-active{border-color:#e7bd62;background:linear-gradient(145deg,rgba(192,139,45,.22),rgba(47,24,43,.66));box-shadow:0 0 0 1px rgba(231,189,98,.08),0 10px 22px rgba(0,0,0,.22);transform:translateY(-1px)}
.jp-login-role__option.is-active>span{color:#160d18;background:linear-gradient(145deg,#f2d47f,#c99034)}
.jp-login-role__note{margin:0 0 14px;color:#9f909c;font-size:9px;text-align:center}
.jp-member-card--locked{border-color:rgba(213,175,92,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)}
.jp-member-card__placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:radial-gradient(circle at 50% 38%,rgba(197,171,143,.26) 0 11%,transparent 12%),radial-gradient(ellipse at 50% 85%,rgba(178,153,126,.22) 0 27%,transparent 28%),linear-gradient(135deg,#382f36,#171219 52%,#292027);filter:saturate(.65)}
.jp-member-card__placeholder::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.055) 44%,transparent 67%);backdrop-filter:blur(10px)}
.jp-member-lock{position:relative;z-index:1;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(238,205,132,.65);border-radius:50%;color:#e5c77d;background:rgba(9,6,11,.68);font-size:19px;box-shadow:0 7px 22px rgba(0,0,0,.45)}
.jp-member-lock__label{position:relative;z-index:1;color:#d6b766;font-size:8px;letter-spacing:.19em}.jp-member-card--locked .jp-member-card__name{color:#ead8e5}.jp-member-card--locked .jp-member-card__meta{color:#aa95a5}
.jp-profile-lock-screen{position:relative;min-height:calc(100vh - 100px);display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.jp-profile-lock-screen>.jp-back{position:absolute;left:0;top:16px;z-index:3;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#fff;background:rgba(21,13,23,.86);font-size:28px}
.jp-profile-lock-screen__art{position:relative;overflow:hidden;height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;border:1px solid rgba(220,182,100,.23);border-radius:22px 22px 0 0;background:radial-gradient(circle at 50% 38%,rgba(197,171,143,.27) 0 10%,transparent 11%),radial-gradient(ellipse at 50% 83%,rgba(178,153,126,.2) 0 25%,transparent 26%),linear-gradient(145deg,#3d3038,#120d14 56%,#2a2028)}
.jp-profile-lock-screen__art::after{content:"";position:absolute;inset:0;background:rgba(12,7,14,.18);backdrop-filter:blur(13px)}
.jp-profile-lock-screen__art span,.jp-profile-lock-screen__art small{position:relative;z-index:1}.jp-profile-lock-screen__art span{width:58px;height:58px;display:grid;place-items:center;border:1px solid #d8b260;border-radius:50%;color:#ebcd84;background:rgba(7,4,8,.7);font-size:27px}.jp-profile-lock-screen__art small{color:#d8b86c;font-size:9px;letter-spacing:.22em}
.jp-profile-lock-screen__panel{margin-top:-1px;padding:22px;border-radius:0 0 22px 22px;text-align:center}.jp-profile-lock-screen__panel>small{color:#d1aa55;font-size:8px;letter-spacing:.18em}.jp-profile-lock-screen__panel h1{margin:7px 0 9px;font:600 21px/1.35 "Yu Mincho",serif}.jp-profile-lock-screen__panel p{margin:0 0 17px;color:#b4a5b1;font-size:11px;line-height:1.8}
.jp-draw-card{position:relative;overflow:hidden;border:1px solid rgba(224,190,112,.28)!important;border-radius:22px!important;color:#f8eff5;background:radial-gradient(circle at 50% -8%,rgba(225,188,102,.16),transparent 38%),linear-gradient(160deg,#251425,#100a12)!important;box-shadow:0 28px 70px rgba(0,0,0,.62)!important}.jp-draw-card .modal-body{position:relative;z-index:1;padding:29px 22px 24px!important}.jp-draw-card__halo{position:absolute;right:-23px;top:-39px;color:rgba(232,196,113,.08);font-size:150px;line-height:1}.jp-draw-card small{color:#cfa952;font-size:8px;letter-spacing:.22em}.jp-draw-card__icon{width:70px;height:70px;margin:16px auto 12px;display:grid;place-items:center;border:1px solid rgba(230,193,106,.48);border-radius:50%;color:#d5b25d;background:rgba(9,5,11,.46);font-size:32px;box-shadow:0 0 30px rgba(205,163,74,.08)}.jp-draw-card h4{margin:0 0 8px;font:600 22px/1.35 "Yu Mincho",serif}.jp-draw-card p{margin:0 auto 16px;max-width:270px;color:#b8a8b4;font-size:11px;line-height:1.75}.jp-draw-card strong{display:block;margin:-3px 0 16px;color:#f1d48d;font-size:14px}.jp-draw-card #orderDrawConfirm{border:0;color:#1f1205;background:linear-gradient(90deg,#c79236,#efd58c,#c48e32);font-weight:700}.jp-draw-card.is-benefit{border-color:rgba(239,207,132,.62)!important;background:radial-gradient(circle at 50% -5%,rgba(237,202,118,.28),transparent 40%),linear-gradient(155deg,#2d2113,#110d0a 72%)!important}.jp-draw-card.is-benefit .jp-draw-card__icon{color:#f4d98e;border-color:#efd083;box-shadow:0 0 35px rgba(229,188,91,.19)}
@media(max-width:360px){.jp-login-role__option{padding:10px 6px}.jp-login-role__option>span{margin-right:5px}.jp-login-role__option strong{font-size:10px}.jp-profile-lock-screen__art{height:220px}}


/* 2026-10-16 filled gold coin draw and independent support windows */
.jp-draw-card__icon{position:relative;isolation:isolate;width:82px!important;height:82px!important;border:3px solid #8f5b13!important;color:#5c3405!important;background:radial-gradient(circle at 34% 26%,#fff0a3 0 5%,#f3c64d 19%,#d7931e 48%,#a9600f 74%,#754009 100%)!important;font:800 28px/1 "Yu Mincho",serif!important;text-shadow:0 1px 0 rgba(255,245,175,.75),0 -1px 0 rgba(80,39,0,.34);box-shadow:0 0 0 3px #eac052,0 0 0 5px rgba(97,51,7,.85),inset 0 0 0 4px rgba(255,225,112,.55),inset 0 -9px 14px rgba(111,55,4,.32),0 13px 30px rgba(184,119,18,.32)!important}
.jp-draw-card__icon::before{content:"";position:absolute;z-index:-1;inset:9px;border:1px solid rgba(104,56,6,.5);border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,232,136,.32)}
.jp-draw-card__icon::after{content:"";position:absolute;z-index:-1;left:18px;top:11px;width:19px;height:9px;border-radius:50%;background:rgba(255,249,191,.48);transform:rotate(-25deg);filter:blur(.3px)}
.jp-draw-card.is-benefit .jp-draw-card__icon{color:#672d05!important;background:radial-gradient(circle at 32% 25%,#fff8c9 0 6%,#f5d76e 20%,#dca32b 51%,#9a5710 78%,#633406 100%)!important;box-shadow:0 0 0 3px #f4d471,0 0 0 5px #75430d,inset 0 0 0 4px rgba(255,238,158,.66),inset 0 -9px 14px rgba(91,42,2,.33),0 0 36px rgba(232,187,66,.34)!important}
.jp-support-page{padding-bottom:16px}.jp-support-intro{padding:21px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(217,177,87,.14),transparent 45%),linear-gradient(145deg,#241426,#120c15)}.jp-support-intro__icon{width:58px!important;height:58px!important;margin:0 auto 14px;font-size:24px}.jp-support-intro h2{margin:0;font:600 20px/1.4 "Yu Mincho",serif}.jp-support-intro>p{margin:12px 0 0;color:#aa9daa;font-size:11px;line-height:1.8}.jp-support-recharge-note{margin-top:15px;padding:13px;border:1px solid rgba(226,188,102,.26);border-radius:13px;background:rgba(218,176,82,.06)}.jp-support-recharge-note small,.jp-support-recharge-note strong,.jp-support-recharge-note span{display:block}.jp-support-recharge-note small{color:#cda650;font-size:8px;letter-spacing:.14em}.jp-support-recharge-note strong{margin-top:4px;color:#f6e7cb;font-size:13px}.jp-support-recharge-note span{margin-top:5px;color:#d8bd7b;font-size:11px;font-variant-numeric:tabular-nums}
.jp-support-windows{display:grid;gap:12px;margin-top:14px}.jp-support-window{position:relative;overflow:hidden;min-height:108px;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:14px;padding:16px;border-color:rgba(222,184,97,.23);background:linear-gradient(145deg,#211421,#100b12);box-shadow:0 12px 28px rgba(0,0,0,.25)}.jp-support-window::after{content:"";position:absolute;right:-28px;top:-34px;width:105px;height:105px;border:1px solid rgba(226,190,108,.12);border-radius:50%}.jp-support-window__icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(228,193,111,.42);border-radius:15px;color:#e8cb85;background:rgba(218,177,82,.09);font-size:12px;font-weight:800;letter-spacing:.04em}.jp-support-window__copy{min-width:0;display:grid;gap:2px}.jp-support-window__copy small{color:#a88545;font-size:7px;letter-spacing:.14em}.jp-support-window__copy strong{color:#fff5e6;font:600 18px/1.35 "Yu Mincho",serif}.jp-support-window__copy em{overflow:hidden;color:#aa9ba7;font-size:9px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.jp-support-window__open{grid-column:1/-1;padding-top:9px;border-top:1px solid rgba(255,255,255,.055);color:#caa557;font-size:9px;text-align:right}.jp-support-window--telegram .jp-support-window__icon{color:#8bd7ff;border-color:rgba(80,178,224,.42);background:rgba(48,155,207,.1)}.jp-support-window--line .jp-support-window__icon{color:#83e99f;border-color:rgba(75,202,109,.4);background:rgba(54,181,88,.09)}.jp-support-window--cloud .jp-support-window__icon{color:#f1cf82}.jp-support-window:active{transform:scale(.992);border-color:rgba(228,193,109,.5)}.jp-support-empty{padding:20px;color:#aa9daa;text-align:center;font-size:11px}.jp-support-security{margin:13px 6px 0;color:#786c76;font-size:8px;line-height:1.65;text-align:center}


/* PREMIUM LOVERS access, authentication, and registration identity */
.jp-access-page{min-height:100vh;margin:0;color:#f8edf5;background:linear-gradient(180deg,rgba(6,3,7,.56),rgba(8,4,9,.96)),url('/static_jpclub/img/hero.png') 68% center/cover fixed}
.jp-access{position:relative;width:min(100%,430px);min-height:100vh;margin:0 auto;padding:max(34px,env(safe-area-inset-top)) 22px max(38px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center}
.jp-access__brand{text-align:center;margin:0 auto 24px}
.jp-brand-logo{display:block;height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.46))}
.jp-brand-logo--entry{width:min(100%,330px);margin:0 auto}
.jp-brand-logo--login{width:min(100%,270px);margin:0 auto}
.jp-brand-logo--register{width:min(100%,310px);margin:0 auto}
.jp-access__brand p,.jp-login__brand--centered p{margin:7px auto 0;color:rgba(255,255,255,.72);font-size:11px;line-height:1.8;letter-spacing:.05em;text-align:center}
.jp-access__panel{padding:22px;border:1px solid rgba(231,190,102,.22);border-radius:20px;background:linear-gradient(155deg,rgba(30,17,29,.94),rgba(12,7,14,.9));box-shadow:0 28px 70px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(18px)}
.jp-access__panel>small{display:block;color:#d7ae57;font-size:8px;letter-spacing:.22em;text-align:center}
.jp-access__panel h1{margin:7px 0 5px;font:600 20px/1.45 "Yu Mincho",serif;text-align:center}
.jp-access__panel>p{margin:0 0 17px;color:#9f909c;font-size:10px;line-height:1.7;text-align:center}
.jp-access__choices{display:grid;gap:11px}
.jp-access__choice{min-height:72px;padding:13px 15px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;border:1px solid rgba(229,187,96,.25);border-radius:15px;color:#f7edf3;background:rgba(6,3,8,.38);text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.2);transition:transform .2s,border-color .2s,background .2s}
.jp-access__choice:hover,.jp-access__choice:active{transform:translateY(-2px);border-color:#e7bd62;background:rgba(78,45,66,.48)}
.jp-access__choice--male{background:linear-gradient(135deg,rgba(199,145,49,.28),rgba(52,29,41,.7));border-color:rgba(235,197,112,.62)}
.jp-access__choice-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#180e17;background:linear-gradient(145deg,#f6dc8c,#c18a2f);font-size:22px;box-shadow:0 5px 16px rgba(207,155,56,.24)}
.jp-access__choice--female .jp-access__choice-icon{color:#fff0f7;background:linear-gradient(145deg,#d85a91,#7c294f)}
.jp-access__choice span:nth-child(2){display:grid;gap:3px}.jp-access__choice small{color:#beaeb9;font-size:9px;letter-spacing:.08em}.jp-access__choice strong{font-size:13px}.jp-access__choice b{color:#e7bd62;font-size:22px;font-weight:400}
.jp-login-form-page .jp-login{padding-top:max(42px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom))}
.jp-login__brand--centered{margin:0 auto 20px;text-align:center}
.jp-login-member-badge{width:max-content;margin:0 auto 16px;padding:6px 14px;border:1px solid rgba(226,190,109,.36);border-radius:999px;color:#e8c36c;background:rgba(215,166,65,.08);font-size:9px;letter-spacing:.13em}
.jp-register__shell .jp-login__brand--centered{max-width:340px;margin:0 auto 22px}
.jp-register__heading .jp-login-member-badge{margin:8px 0 0}
@media(max-width:360px){.jp-access{padding-left:15px;padding-right:15px}.jp-brand-logo--entry{width:280px}.jp-access__panel{padding:18px}.jp-access__choice{padding:11px 12px}}

/* PREMIUM LOVERS embracing-couple entry background v2 */
.jp-access-page{
  position:relative;
  overflow-x:hidden;
  background:#080409;
}
.jp-access-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url('/static_jpclub/img/brand/premium-lovers-couple-bg-v2.webp') 68% top/cover no-repeat;
  opacity:.76;
}
.jp-access-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 74% 24%,rgba(44,15,24,.03) 0,rgba(8,4,9,.28) 38%,rgba(8,4,9,.68) 72%,rgba(8,4,9,.94) 100%),
    linear-gradient(180deg,rgba(6,3,7,.12) 0,rgba(7,3,8,.38) 50%,rgba(7,3,8,.92) 88%,#080409 100%);
}
.jp-access{z-index:1}
.jp-access__brand,.jp-access__panel{position:relative;z-index:2}
@media(max-width:600px){
  .jp-access-page::before{background-position:100% top;opacity:.72}
}

/* 2026-11-07 task page compact mobile adaptation */
@media (max-width: 380px) {
  body.jp-route-rot-order-index .wrapper.homepage {
    width: 100%;
    padding-bottom: 72px;
  }
  body.jp-route-rot-order-index .header {
    min-height: 36px;
  }
  body.jp-route-rot-order-index .header .btn {
    padding: 5px 8px;
  }
  body.jp-route-rot-order-index .jp-stage-overview {
    margin: 61px 7px 0;
    padding: 9px;
    border-radius: 13px;
  }
  body.jp-route-rot-order-index .jp-stage-overview__head {
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  body.jp-route-rot-order-index .jp-stage-overview__head small {
    display: none;
  }
  body.jp-route-rot-order-index .jp-stage-overview__head h2 {
    margin: 0;
    font-size: clamp(11px, 4.1vw, 14px);
    line-height: 1.25;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  body.jp-route-rot-order-index .jp-stage-overview__head > span {
    flex: 0 0 auto;
    max-width: 74px;
    font-size: 8px;
    line-height: 1.35;
    text-align: right;
  }
  body.jp-route-rot-order-index .jp-stage-overview__grid {
    gap: 4px;
  }
  body.jp-route-rot-order-index .jp-stage-brief {
    min-height: 40px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 3px;
    padding: 5px 4px;
    border-radius: 8px;
  }
  body.jp-route-rot-order-index .jp-stage-brief > span {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }
  body.jp-route-rot-order-index .jp-stage-brief strong {
    overflow: hidden;
    font-size: clamp(7px, 2.7vw, 9px);
    letter-spacing: -.04em;
    text-overflow: ellipsis;
  }
  body.jp-route-rot-order-index .jp-stage-brief i {
    display: none;
  }
  body.jp-route-rot-order-index .wrapper > .jp-stage-overview + .container {
    padding: 9px 8px 5px;
  }
  body.jp-route-rot-order-index .wrapper > .jp-stage-overview + .container .row {
    align-items: center;
    margin-right: -8px;
    margin-left: -8px;
  }
  body.jp-route-rot-order-index .wrapper > .jp-stage-overview + .container .col {
    min-width: 0;
  }
  body.jp-route-rot-order-index .wrapper > .jp-stage-overview + .container h3 {
    overflow: hidden;
    margin: 0;
    font-size: clamp(20px, 7.4vw, 26px);
    line-height: 1.12;
    letter-spacing: -.035em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body.jp-route-rot-order-index .wrapper > .jp-stage-overview + .container p {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.25;
  }
  body.jp-route-rot-order-index .wrapper > .jp-stage-overview + .container .btn-rounded-54 {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }
  body.jp-route-rot-order-index .wrapper > .jp-stage-overview + .container .material-icons {
    font-size: 20px;
  }
  body.jp-route-rot-order-index .card-slide {
    padding: 0 6px;
  }
  body.jp-route-rot-order-index .card.bg-template.h-200 {
    height: auto !important;
    min-height: 154px;
    margin-top: 8px !important;
  }
  body.jp-route-rot-order-index .card.bg-template .card-body {
    padding: 11px;
  }
  body.jp-route-rot-order-index .card.bg-template .card-body h3 {
    margin-bottom: 2px;
    font-size: 17px;
    line-height: 1.2;
  }
  body.jp-route-rot-order-index .card.bg-template .card-body p {
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.35;
  }
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 {
    margin-top: 7px !important;
    padding: 5px 0;
  }
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 .col-4 {
    min-height: 43px;
    padding: 2px;
  }
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 h3 {
    min-height: 21px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 17px;
    line-height: 21px;
  }
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 h3 small,
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 h3 strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 h3 small {
    font-size: 7px;
    line-height: 10px;
  }
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 h3 strong {
    font-size: 15px;
    line-height: 17px;
  }
  body.jp-route-rot-order-index .card-slide .row.text-center.mt-4 p {
    min-height: 13px;
    margin-top: 1px;
    font-size: 8px;
    line-height: 13px;
  }
  body.jp-route-rot-order-index .jp-procedure-stats .col-4:last-child h3 {
    font-size: 11px !important;
  }
  body.jp-route-rot-order-index .jp-procedure-stats .col-4:last-child h3 strong {
    font-size: 10px;
  }
  body.jp-route-rot-order-index .container.top-50 {
    margin-top: -42px !important;
  }
  body.jp-route-rot-order-index .container.top-50 > .card {
    padding-top: 40px !important;
  }
  body.jp-route-rot-order-index .container.top-50 .card-body {
    padding: 10px 12px;
  }
  body.jp-route-rot-order-index .container.top-50 .card-body p,
  body.jp-route-rot-order-index .container.top-50 .card-body small {
    font-size: 9px;
    line-height: 1.35;
  }
  body.jp-route-rot-order-index .card-footer .btn {
    min-height: 42px;
    font-size: 12px;
  }
  body.jp-route-rot-order-index .jp-nav {
    width: 100%;
    padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
  }
  body.jp-route-rot-order-index .jp-nav a {
    overflow: hidden;
    font-size: clamp(7px, 2.35vw, 9px);
    line-height: 1.15;
    letter-spacing: -.04em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body.jp-route-rot-order-index .jp-nav__icon {
    width: 23px;
    height: 22px;
    margin-bottom: 1px;
    font-size: 16px;
  }
  body.jp-route-rot-order-index .jp-nav .jp-nav__featured .jp-nav__icon--card {
    width: 46px;
    height: 46px;
    margin: -23px auto 2px;
  }
  body.jp-route-rot-order-index .jp-nav .jp-nav__featured .jp-nav__icon--card svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 320px) {
  body.jp-route-rot-order-index .jp-stage-overview {
    margin-inline: 5px;
    padding-inline: 7px;
  }
  body.jp-route-rot-order-index .jp-stage-overview__head h2 {
    font-size: 11px;
  }
  body.jp-route-rot-order-index .jp-stage-brief strong {
    font-size: 7px;
  }
  body.jp-route-rot-order-index .card-slide {
    padding-inline: 4px;
  }
}