/* RELOOP Member Tier V2.2 — Customer 360 premium card */
.reloop-c360-tier{
  position:relative;isolation:isolate;overflow:hidden;margin:16px 0 18px;padding:22px;
  border:1px solid color-mix(in srgb,var(--tier-accent,#168bff) 24%,#dbe8f3);
  border-radius:26px;
  background:
    radial-gradient(circle at 93% 4%,color-mix(in srgb,var(--tier-accent,#168bff) 16%,transparent) 0 18%,transparent 18.5%),
    linear-gradient(140deg,var(--tier-bg-soft,#fbfdff),var(--tier-bg,#edf7ff));
  box-shadow:0 18px 42px color-mix(in srgb,var(--tier-accent,#168bff) 9%,transparent);
}
.reloop-c360-tier:before{content:"";position:absolute;z-index:-1;left:-70px;bottom:-105px;width:220px;height:220px;border-radius:50%;background:color-mix(in srgb,var(--tier-accent,#168bff) 8%,transparent)}
.reloop-c360-tier-deco{position:absolute;right:26px;top:24px;width:54px;height:54px;border-radius:18px;border:1px solid color-mix(in srgb,var(--tier-accent,#168bff) 18%,transparent);background:color-mix(in srgb,var(--tier-bg-soft,#fff) 58%,transparent);transform:rotate(18deg);opacity:.55}
.reloop-c360-tier-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.reloop-c360-tier-title small{display:block;color:color-mix(in srgb,var(--tier-text,#173f5d) 58%,transparent);font-size:9px;font-weight:900;letter-spacing:.11em}
.reloop-c360-tier-title b{display:block;margin-top:5px;color:var(--tier-text,#173f5d);font-size:30px;line-height:1.05;letter-spacing:-.5px}
.reloop-c360-tier-title span{display:block;margin-top:6px;color:color-mix(in srgb,var(--tier-text,#173f5d) 64%,transparent);font-size:10.5px}
.reloop-c360-tier-level{padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--tier-bg-soft,#fff) 82%,transparent);border:1px solid color-mix(in srgb,var(--tier-accent,#168bff) 20%,#fff);color:var(--tier-text,#173f5d);font-size:9px;font-weight:900;letter-spacing:.04em;box-shadow:0 6px 16px rgba(25,54,77,.05)}
.reloop-c360-tier-main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;margin-top:18px}
.reloop-c360-tier-progress-card{padding:15px;border:1px solid color-mix(in srgb,var(--tier-accent,#168bff) 16%,#fff);border-radius:18px;background:color-mix(in srgb,var(--tier-bg-soft,#fff) 70%,transparent);backdrop-filter:blur(8px)}
.reloop-c360-tier-metric{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.reloop-c360-tier-metric small{display:block;color:color-mix(in srgb,var(--tier-text,#173f5d) 58%,transparent);font-size:9.5px}
.reloop-c360-tier-metric b{display:block;margin-top:3px;color:var(--tier-text,#173f5d);font-size:17px}.reloop-c360-tier-metric b em{font-style:normal;font-size:10px;font-weight:700;color:color-mix(in srgb,var(--tier-text,#173f5d) 55%,transparent)}
.reloop-c360-tier-metric strong{color:var(--tier-text,#173f5d);font-size:12px}
.reloop-c360-tier-bar{height:9px;margin-top:12px;border-radius:999px;background:color-mix(in srgb,var(--tier-text,#173f5d) 10%,transparent);overflow:hidden}
.reloop-c360-tier-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--tier-accent,#168bff),var(--tier-progress,#25bff0));box-shadow:0 3px 10px color-mix(in srgb,var(--tier-progress,#25bff0) 24%,transparent)}
.reloop-c360-tier-next{display:flex;align-items:center;gap:7px;margin-top:10px;color:color-mix(in srgb,var(--tier-text,#173f5d) 78%,transparent);font-size:10px}.reloop-c360-tier-next>span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--tier-accent,#168bff) 12%,#fff);color:var(--tier-accent,#168bff);font-weight:900}.reloop-c360-tier-next b{font-weight:750}
.reloop-c360-tier-stats{display:grid;grid-template-columns:1fr;gap:10px}
.reloop-c360-tier-stats>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--tier-accent,#168bff) 14%,#fff);border-radius:16px;background:color-mix(in srgb,var(--tier-bg-soft,#fff) 66%,transparent)}
.reloop-c360-tier-stats small{color:color-mix(in srgb,var(--tier-text,#173f5d) 57%,transparent);font-size:9px}.reloop-c360-tier-stats b{color:var(--tier-text,#173f5d);font-size:12px}
.reloop-c360-tier-benefits{position:relative;z-index:1;margin-top:14px;padding-top:13px;border-top:1px solid color-mix(in srgb,var(--tier-accent,#168bff) 16%,transparent)}
.reloop-c360-tier-benefits>b{display:block;margin-bottom:8px;color:var(--tier-text,#173f5d);font-size:10px}
.reloop-c360-tier-benefits>div{display:flex;flex-wrap:wrap;gap:7px}.reloop-c360-tier-benefits span{padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--tier-bg-soft,#fff) 78%,transparent);border:1px solid color-mix(in srgb,var(--tier-accent,#168bff) 14%,#fff);color:color-mix(in srgb,var(--tier-text,#173f5d) 78%,transparent);font-size:9.5px}
@media(max-width:900px){.reloop-c360-tier-main{grid-template-columns:1fr}.reloop-c360-tier-stats{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.reloop-c360-tier{padding:17px;border-radius:22px}.reloop-c360-tier-title b{font-size:26px}.reloop-c360-tier-stats{grid-template-columns:1fr}.reloop-c360-tier-metric{align-items:flex-start;flex-direction:column}}


/* RELOOP Member Tier V2.3 — Lifecycle timeline */
.reloop-c360-tier-history{
  margin:0 0 18px;
  padding:18px 20px;
  border:1px solid #dfeaf3;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 28px rgba(31,84,124,.045);
}
.reloop-c360-tier-history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
}
.reloop-c360-tier-history-head>div{display:grid;gap:3px}
.reloop-c360-tier-history-head small{
  color:#168bff;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.09em;
}
.reloop-c360-tier-history-head b{
  color:#264e69;
  font-size:13px;
}
.reloop-c360-tier-history-head span{
  color:#8ba0b1;
  font-size:9.5px;
  line-height:1.45;
}
.reloop-c360-tier-history-head em{
  padding:6px 9px;
  border-radius:999px;
  background:#f2f7fb;
  color:#7690a2;
  font-size:8.5px;
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}
.reloop-c360-tier-timeline{display:grid;gap:8px}
.reloop-c360-tier-event{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 11px;
  border:1px solid #e3ecf3;
  border-radius:14px;
  background:#fbfdff;
}
.reloop-c360-tier-event>i{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#eaf5ff;
  color:#168bff;
  font-size:11px;
  font-style:normal;
  font-weight:900;
}
.reloop-c360-tier-event.up>i{background:#e9f8f0;color:#248761}
.reloop-c360-tier-event.down>i{background:#fff0ef;color:#c85e56}
.reloop-c360-tier-event.near>i{background:#fff7dc;color:#aa7a12}
.reloop-c360-tier-event.init>i{background:#f0f3f6;color:#60758a}
.reloop-c360-tier-event>div{min-width:0;display:grid;gap:2px}
.reloop-c360-tier-event b{
  color:#315873;
  font-size:10.5px;
  line-height:1.35;
}
.reloop-c360-tier-event span{
  color:#8499a9;
  font-size:9px;
  line-height:1.4;
}
.reloop-c360-tier-event time{
  color:#9aacb9;
  font-size:8.5px;
  white-space:nowrap;
}
.reloop-c360-tier-history-note{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #edf2f6;
  color:#94a6b4;
  font-size:8.5px;
  line-height:1.45;
}
html[data-theme="dark"] .reloop-c360-tier-history{
  background:#0e2131;
  border-color:#29465c;
}
html[data-theme="dark"] .reloop-c360-tier-history-head b,
html[data-theme="dark"] .reloop-c360-tier-event b{color:#e3f1fb}
html[data-theme="dark"] .reloop-c360-tier-history-head span,
html[data-theme="dark"] .reloop-c360-tier-event span,
html[data-theme="dark"] .reloop-c360-tier-event time,
html[data-theme="dark"] .reloop-c360-tier-history-note{color:#9cb1c1}
html[data-theme="dark"] .reloop-c360-tier-history-head em,
html[data-theme="dark"] .reloop-c360-tier-event{background:#10283a;border-color:#31516a}
@media(max-width:700px){
  .reloop-c360-tier-history{padding:16px}
  .reloop-c360-tier-history-head{flex-direction:column}
  .reloop-c360-tier-event{grid-template-columns:30px 1fr}
  .reloop-c360-tier-event time{grid-column:2}
}


/* RELOOP Member Tier V2.4 — LINE notification status */
.reloop-c360-tier-event.risk>i{background:#fff2e5;color:#b86b20}
.reloop-c360-tier-event-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
}
.reloop-c360-tier-notify{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:999px;
  font-size:7.8px;
  font-weight:850;
  white-space:nowrap;
}
.reloop-c360-tier-notify.sent{background:#e8f8f0;color:#25845f}
.reloop-c360-tier-notify.queued{background:#eef6ff;color:#2678b4}
.reloop-c360-tier-notify.skipped{background:#f1f4f6;color:#6f8290}
.reloop-c360-tier-notify.failed{background:#fff0ef;color:#bf5d56}
html[data-theme="dark"] .reloop-c360-tier-notify.sent{background:#17382c;color:#8fd6b7}
html[data-theme="dark"] .reloop-c360-tier-notify.queued{background:#16344a;color:#9bd0f4}
html[data-theme="dark"] .reloop-c360-tier-notify.skipped{background:#22313c;color:#a8b9c5}
html[data-theme="dark"] .reloop-c360-tier-notify.failed{background:#402625;color:#e6aaa5}
@media(max-width:700px){
  .reloop-c360-tier-event-meta{grid-column:2;align-items:flex-start}
}