.login-hint{font-size:12px;color:#9a9d98;text-align:center;margin:13px 0 0}.tag.paid,.tag.success{background:#e3f2ea;color:#187c57}.tag.expired,.tag.refunded,.tag.suspended{background:#f8e5e5;color:#b33737}.tag.trial{background:#e8effa;color:#326497}.tag.expiring,.tag.unpaid{background:#fff0bf;color:#7d6100}.tag.basic{background:#edf0f3;color:#626973}.tag.pro{background:#fff0e9;color:#c84c22}.tag.enterprise{background:#262722;color:#ffe49b}.company-cell{display:flex;align-items:center;gap:11px}.company-cell>span,.merchant-hero>span{width:38px;height:38px;border-radius:11px;background:#f0e8ca;color:#222;display:grid;place-items:center;font-weight:900}.company-cell div{display:flex;flex-direction:column;gap:3px}.company-cell small,td small{color:var(--muted)}.stat.warning{background:#fff8e8;border-color:#f1dfae}.compact-stats{grid-template-columns:repeat(4,1fr)}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}.metric-up{margin-left:auto;color:var(--green);font-size:12px;font-weight:700}.chart{height:260px;padding:28px 24px 18px;display:flex;align-items:flex-end;gap:clamp(14px,4vw,44px)}.bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px}.bar{width:min(42px,100%);border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,var(--orange),#ff9a61)}.bar-wrap small{font-size:11px;color:var(--muted)}.plan-list{padding:8px 20px 20px}.plan-list>div{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:9px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.dot{width:9px;height:9px;border-radius:50%;background:#ccc}.dot.pro{background:var(--orange)}.dot.enterprise{background:var(--ink)}.dot.basic{background:#7d8792}.dot.trial{background:#7698c7}.attention-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px}.attention{background:#fafaf9;border:1px solid var(--line);border-radius:13px;padding:16px;text-align:left}.attention:hover{border-color:#bbb;background:#fff}.attention div{display:flex;align-items:center;justify-content:space-between}.attention small{font-size:10px;color:var(--muted)}.attention b{display:block;font-size:14px;margin:18px 0 7px}.attention>span{font-size:11px;color:var(--muted)}.merchant-hero{display:flex;align-items:center;gap:13px;background:#17181c;color:#fff;border-radius:14px;padding:18px;margin-bottom:14px}.merchant-hero>span{width:48px;height:48px;background:#f5ca46}.merchant-hero>div{flex:1}.merchant-hero b{font-size:17px}.merchant-hero p{font-size:12px;color:#aaa;margin:5px 0 0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid label{background:#f6f7f5;border-radius:10px;padding:12px;font-size:11px;color:var(--muted)}.detail-grid b{display:block;color:var(--ink);font-size:14px;margin-top:5px}.detail-actions .compact{width:auto;margin:0}.pills button{height:32px;border-radius:999px;background:#f1f2f0;padding:0 14px;color:#676b70}.pills button.active{background:var(--ink);color:#fff}.followup-board{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px}.followup-col{background:#f5f6f4;border-radius:14px;padding:14px}.followup-col h3{font-size:13px;margin:2px 2px 12px}.followup-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px}.followup-card>div{display:flex;align-items:center;justify-content:space-between}.followup-card small,.followup-card p,.followup-card footer{font-size:11px;color:var(--muted)}.followup-card>b{display:block;margin-top:15px}@media(max-width:1000px){.attention-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}}@media(max-width:760px){.compact-stats,.attention-grid,.followup-board{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}}

/* Billing summary cards use the same white surface. */
.compact-stats .stat.featured {
  background: #fff;
  color: var(--ink);
}
.compact-stats .stat.featured p,
.compact-stats .stat.featured span {
  color: var(--muted);
}

.order-period-bar{min-height:54px;margin-bottom:14px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:14px}.order-period-tabs{display:flex;align-items:center;gap:4px}.order-period-tabs button{height:36px;padding:0 16px;border-radius:9px;background:transparent;color:#6f737a;font-size:13px}.order-period-tabs button:hover{background:#f3f4f2;color:var(--ink)}.order-period-tabs button.active{background:var(--ink);color:#fff;font-weight:700}.period-label{font-size:11px;color:#91949a;padding-right:8px}.custom-date-range{display:flex;align-items:center;gap:8px}.custom-date-range input{height:36px;border:1px solid var(--line);background:#fafafa;border-radius:9px;padding:0 10px;color:var(--ink)}.custom-date-range span{font-size:12px;color:var(--muted)}.custom-date-range>button{height:36px;padding:0 15px;border-radius:9px;background:var(--ink);color:#fff;font-size:12px}@media(max-width:900px){.order-period-bar{align-items:flex-start;flex-direction:column}.order-period-tabs{width:100%;overflow:auto}.custom-date-range{width:100%;flex-wrap:wrap}}

.order-filters input{padding-left:40px;background:#fafafa}.order-filters select{min-width:150px}.table-pagination{min-height:52px;padding:10px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#858990;font-size:12px}.table-pagination>div{display:flex;align-items:center;gap:10px}.table-pagination button{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink)}.table-pagination button:disabled{color:#b7b9bd;background:#f5f5f4;cursor:not-allowed}.table-pagination b{min-width:48px;text-align:center;color:#55595f;font-weight:650}

.order-filters input{background-color:#fafafa!important;background-repeat:no-repeat!important;background-position:left 14px center!important;background-size:17px 17px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23878b92%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-4-4%22/%3E%3C/svg%3E")!important}

/* Keep the order page rhythm on a single 16px spacing scale. */
.order-period-bar{margin-bottom:16px}
.compact-stats{gap:16px}
.compact-stats+.section{margin-top:16px}

#changePlan,#renewNow{background:#fff;color:var(--ink);border:1px solid var(--ink)}
#toggleMerchant{background:#fff;color:var(--danger);border:1px solid var(--danger);height:36px;border-radius:9px;padding:0 14px}
.detail-card-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.detail-card-title h3{margin:0}.text-action{padding:0;background:transparent;color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:4px}.text-action:hover{color:var(--yellow)}
.modal:not(.centered) .detail-card h3{font-size:18px}
.merchant-hero-title{display:flex;align-items:center;gap:10px}.merchant-hero-title .tag{flex:none;height:21px;padding:0 7px;font-size:10px}.merchant-hero-title b{font-size:17px}
.merchant-hero-edit{height:36px;padding:0 18px;border-radius:9px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;flex:none}.merchant-hero-edit:hover{background:var(--yellow)}

/* Use one 12px rhythm between primary page cards across the console. */
.stats,.compact-stats,.dashboard-grid,.merchant-summary{gap:12px}.order-period-bar{margin-bottom:12px}.section,.compact-stats+.section{margin-top:12px}.stats+.dashboard-grid{margin-top:12px}.dashboard-grid>.section{margin-top:0}.merchant-summary{margin-bottom:12px}.stacked-modal{z-index:40}