/* ============================================================
   CHOOSE LIFE EXPRESS — Account Dashboard styles
   Ported from CLE_Dashboard_Wireframe_v5.html.
   Every rule is scoped under .cle-acct so it cannot affect the
   Sage theme, homepage search, or archive filters.
   :root design tokens are global so you can re-skin in one place.
   ============================================================ */
:root {
   --color-brand: #3d566e;
   --color-brand-dark: #2c3e52;
   --color-brand-light: #e8eef3;
   --color-brand-xlight: #f2f5f8;


   --color-accent: #4a7fa5;
   --color-accent-light: #ddeaf3;


   --color-success: #2e7d5e;
   --color-success-bg: #e6f3ee;
   --color-warn: #b07320;
   --color-warn-bg: #fdf3e3;
   --color-danger: #a33030;
   --color-danger-bg: #fceaea;


   --color-surface: #ffffff;
   --color-bg: #f4f5f6;
   --color-border: #d5dde3;
   --color-border-strong: #b8c4cc;


   --color-text: #2c3e52;
   --color-text-muted: #6b7f8e;
   --color-text-faint: #9aaab5;


   --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
   --font-size-xs: 11px;
   --font-size-sm: 12px;
   --font-size-base: 13px;
   --font-size-md: 14px;
   --font-size-lg: 16px;
   --font-size-xl: 20px;


   --space-1: 4px;
   --space-2: 6px;
   --space-3: 8px;
   --space-4: 12px;
   --space-5: 16px;
   --space-6: 20px;


   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;


   --topbar-height: 40px;
   --topbar-bg: var(--color-brand);
   --sidebar-width: 148px;
   --sidebar-bg: var(--color-bg);
}

.cle-acct {
   background: var(--color-surface);
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   max-width: 960px;
   margin: 0 auto;
}

.cle-acct .tb {
   background: var(--topbar-bg);
   height: var(--topbar-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--space-5);
}

.cle-acct .tb-logo {
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: 600;
   letter-spacing: .03em;
}

.cle-acct .tb-logo em {
   font-style: normal;
   font-weight: 400;
   opacity: .6;
}

.cle-acct .tb-nav {
   display: flex;
   align-items: center;
   gap: 2px;
}

.cle-acct .tb-nav button {
   padding: 4px 10px;
   font-size: var(--font-size-xs);
   color: rgba(255, 255, 255, .65);
   cursor: pointer;
   border-radius: var(--radius-sm);
   border: none;
   background: none;
   font-family: var(--font);
   font-weight: 400;
   transition: .12s;
}

.cle-acct .tb-nav button:hover {
   color: #fff;
   background: rgba(255, 255, 255, .1);
}

.cle-acct .tb-nav button.on {
   color: #fff;
   background: rgba(255, 255, 255, .18);
   font-weight: 500;
}

.cle-acct .tb-r {
   display: flex;
   align-items: center;
   gap: var(--space-2);
}

.cle-acct .bell {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .28);
   border-radius: var(--radius-md);
   cursor: pointer;
   color: #fff;
   font-size: var(--font-size-xs);
   font-family: var(--font);
   font-weight: 500;
}

.cle-acct .bell i {
   font-size: 14px;
}

.cle-acct .bell:hover {
   background: rgba(255, 255, 255, .24);
}

.cle-acct .userbtn {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 4px 8px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .28);
   border-radius: var(--radius-md);
   cursor: pointer;
   color: #fff;
   font-size: var(--font-size-xs);
   font-family: var(--font);
}

.cle-acct .userbtn:hover {
   background: rgba(255, 255, 255, .24);
}

.cle-acct .av {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .28);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 600;
   color: #fff;
}

.cle-acct .sc {
   display: none;
}

.cle-acct .sc.on {
   display: block;
}

.cle-acct .pb {
   padding: var(--space-4);
   background: var(--color-bg);
   min-height: 440px;
}

.cle-acct .card {
   background: var(--color-surface);
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
}

.cle-acct .card+.card {
   margin-top: var(--space-3);
}

.cle-acct .card-title {
   font-size: var(--font-size-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--color-text-muted);
   margin-bottom: var(--space-3);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.cle-acct .card-title a {
   font-size: var(--font-size-xs);
   color: var(--color-accent);
   text-decoration: none;
   text-transform: none;
   letter-spacing: 0;
   font-weight: 400;
}

.cle-acct .g2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-3);
   margin-bottom: var(--space-3);
}

.cle-acct .mb3 {
   margin-bottom: var(--space-3);
}

.cle-acct .bnr {
   background: var(--color-warn-bg);
   border: 0.5px solid #e8c070;
   border-radius: var(--radius-lg);
   padding: 8px 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-3);
}

.cle-acct .bnr-l {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   font-size: var(--font-size-xs);
   color: var(--color-warn);
}

.cle-acct .bnr-l i {
   font-size: 14px;
   flex-shrink: 0;
}

.cle-acct .bnr-l strong {
   display: block;
   font-size: var(--font-size-sm);
}

.cle-acct .ck {
   background: var(--color-brand-light);
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 8px 12px;
   margin-bottom: var(--space-3);
}

.cle-acct .ck-title {
   font-size: var(--font-size-xs);
   font-weight: 600;
   color: var(--color-brand);
   margin-bottom: var(--space-2);
   display: flex;
   align-items: center;
   gap: var(--space-2);
}

.cle-acct .ck-row {
   display: flex;
   gap: var(--space-2);
   flex-wrap: wrap;
}

.cle-acct .ck-item {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   background: var(--color-surface);
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-sm);
   padding: 3px 7px;
}

.cle-acct .ck-item.done {
   color: var(--color-success);
   border-color: #b2d8c8;
}

.cle-acct .ck-item i {
   font-size: 12px;
}

.cle-acct .cr-total {
   font-size: var(--font-size-xl);
   font-weight: 600;
   color: var(--color-brand);
   margin-bottom: var(--space-2);
}

.cle-acct .cr-rows {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.cle-acct .cr-row {
   display: grid;
   grid-template-columns: 1fr auto auto;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--font-size-xs);
   padding: 3px 7px;
   border-radius: var(--radius-sm);
   background: var(--color-bg);
}

.cle-acct .cr-lbl {
   color: var(--color-text-muted);
}

.cle-acct .cr-val {
   font-weight: 600;
   color: var(--color-text);
}

.cle-acct .cr-exp {
   font-size: 10px;
   color: var(--color-warn);
   white-space: nowrap;
}

.cle-acct .exp-flag {
   background: var(--color-warn-bg);
   color: var(--color-warn);
   font-size: 10px;
   padding: 1px 5px;
   border-radius: var(--radius-sm);
   font-weight: 600;
}

.cle-acct .cr-meta {
   margin-top: var(--space-2);
   font-size: 10px;
   color: var(--color-text-faint);
}

.cle-acct .o-list {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.cle-acct .o-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 8px;
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-xs);
}

.cle-acct .o-name {
   font-weight: 500;
}

.cle-acct .o-date {
   font-size: 10px;
   color: var(--color-text-faint);
   margin-top: 1px;
}

.cle-acct .pill {
   font-size: 10px;
   padding: 2px 7px;
   border-radius: 10px;
   font-weight: 600;
   white-space: nowrap;
}

.cle-acct .pill-ready {
   background: var(--color-success-bg);
   color: var(--color-success);
}

.cle-acct .pill-progress {
   background: var(--color-accent-light);
   color: var(--color-accent);
}

.cle-acct .pill-sub {
   background: var(--color-bg);
   color: var(--color-text-muted);
}

.cle-acct .pill-active {
   background: var(--color-accent-light);
   color: var(--color-accent);
}

.cle-acct .pill-paid {
   background: var(--color-success-bg);
   color: var(--color-success);
}

.cle-acct .pill-failed {
   background: var(--color-danger-bg);
   color: var(--color-danger);
}

.cle-acct .pill-default {
   background: var(--color-accent-light);
   color: var(--color-accent);
}

.cle-acct .rp-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-3);
}

.cle-acct .rp-item {
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   overflow: hidden;
   cursor: pointer;
}

.cle-acct .rp-thumb {
   height: 40px;
   background: var(--color-brand-light);
   display: flex;
   align-items: center;
   justify-content: center;
}

.cle-acct .rp-thumb i {
   font-size: 18px;
   color: var(--color-brand);
   opacity: .4;
}

.cle-acct .rp-info {
   padding: 5px 7px;
}

.cle-acct .rp-name {
   font-size: var(--font-size-xs);
   font-weight: 500;
}

.cle-acct .rp-meta {
   font-size: 10px;
   color: var(--color-text-muted);
   margin-top: 1px;
}

.cle-acct .usage-row {
   display: flex;
   gap: var(--space-4);
   align-items: center;
}

.cle-acct .usage-bar-wrap {
   flex: 1;
}

.cle-acct .usage-labels {
   display: flex;
   justify-content: space-between;
   font-size: var(--font-size-xs);
   margin-bottom: 4px;
}

.cle-acct .usage-labels span {
   color: var(--color-text-muted);
}

.cle-acct .usage-labels strong {
   color: var(--color-text);
}

.cle-acct .usage-track {
   height: 5px;
   border-radius: 3px;
   background: var(--color-bg);
   overflow: hidden;
   border: 0.5px solid var(--color-border);
}

.cle-acct .usage-fill {
   height: 100%;
   width: 42%;
   background: var(--color-brand);
   border-radius: 3px;
}

.cle-acct .usage-aside {
   text-align: right;
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   white-space: nowrap;
}

.cle-acct .usage-aside strong {
   color: var(--color-brand);
   display: block;
}

.cle-acct .acol {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
   min-height: 440px;
}

.cle-acct .lnav {
   background: var(--sidebar-bg);
   border-right: 0.5px solid var(--color-border);
   padding: 8px 0;
}

.cle-acct .lnav-sec {
   font-size: 10px;
   font-weight: 600;
   color: var(--color-text-faint);
   text-transform: uppercase;
   letter-spacing: .06em;
   padding: 8px 12px 3px;
}

.cle-acct .lnav-item {
   padding: 6px 12px;
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
   border-left: 2px solid transparent;
   transition: .1s;
}

.cle-acct .lnav-item:hover {
   color: var(--color-text);
   background: var(--color-brand-light);
}

.cle-acct .lnav-item.on {
   color: var(--color-brand);
   font-weight: 600;
   border-left: 2px solid var(--color-brand);
   background: var(--color-brand-light);
}

.cle-acct .lnav-item i {
   font-size: 13px;
}

.cle-acct .lnav-badge {
   font-size: 10px;
   background: var(--color-warn);
   color: #fff;
   padding: 1px 5px;
   border-radius: 8px;
   margin-left: auto;
}

.cle-acct .rpanel {
   padding: var(--space-4) var(--space-5);
   background: var(--color-bg);
}

.cle-acct .breadcrumb {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   margin-bottom: var(--space-3);
   display: flex;
   align-items: center;
   gap: 3px;
}

.cle-acct .breadcrumb span {
   cursor: pointer;
}

.cle-acct .breadcrumb span:hover {
   color: var(--color-brand);
}

.cle-acct .breadcrumb i {
   font-size: 10px;
}

.cle-acct .page-title {
   font-size: var(--font-size-lg);
   font-weight: 600;
   color: var(--color-brand);
   margin-bottom: 2px;
}

.cle-acct .page-sub {
   font-size: var(--font-size-sm);
   color: var(--color-text-muted);
   margin-bottom: var(--space-4);
}

.cle-acct .sub-card {
   background: var(--color-surface);
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
}

.cle-acct .divider {
   height: 0.5px;
   background: var(--color-border);
   margin: var(--space-4) 0;
}

.cle-acct .sec-label {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--color-text-muted);
   margin-bottom: var(--space-3);
}

.cle-acct .success-bar {
   background: var(--color-success-bg);
   border: 0.5px solid #b2d8c8;
   border-radius: var(--radius-md);
   padding: 7px 10px;
   margin-bottom: var(--space-3);
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--font-size-xs);
   color: var(--color-success);
}

.cle-acct .success-bar i {
   font-size: 13px;
}

.cle-acct .form-row {
   margin-bottom: var(--space-3);
}

.cle-acct .form-label {
   font-size: var(--font-size-xs);
   font-weight: 500;
   color: var(--color-text-muted);
   margin-bottom: 3px;
   display: block;
}

.cle-acct .form-input {
   width: 100%;
   padding: 6px 9px;
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   background: var(--color-surface);
   color: var(--color-text);
   font-family: var(--font);
}

.cle-acct .form-input:focus {
   outline: none;
   border-color: var(--color-brand);
   box-shadow: 0 0 0 2px var(--color-brand-light);
}

.cle-acct .form-2col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-3);
   margin-bottom: var(--space-3);
}

.cle-acct .form-hint {
   font-size: 10px;
   color: var(--color-text-faint);
   margin-top: 2px;
}

.cle-acct .pw-wrap {
   position: relative;
}

.cle-acct .pw-wrap .form-input {
   padding-right: 30px;
}

.cle-acct .pw-eye {
   position: absolute;
   right: 7px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   cursor: pointer;
   color: var(--color-text-muted);
   font-size: 14px;
}

.cle-acct .upload-zone {
   border: 0.5px dashed var(--color-border);
   border-radius: var(--radius-md);
   padding: 10px;
   text-align: center;
   background: var(--color-bg);
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   cursor: pointer;
}

.cle-acct .upload-zone:hover {
   border-color: var(--color-brand);
   color: var(--color-brand);
}

.cle-acct .upload-zone i {
   font-size: 16px;
   display: block;
   margin-bottom: 3px;
}

.cle-acct .btn-row {
   display: flex;
   gap: var(--space-2);
   margin-top: var(--space-4);
}

.cle-acct .btn {
   padding: 6px 12px;
   border-radius: var(--radius-md);
   font-size: var(--font-size-xs);
   font-weight: 500;
   cursor: pointer;
   border: 0.5px solid var(--color-border);
   background: var(--color-surface);
   color: var(--color-text);
   font-family: var(--font);
}

.cle-acct .btn:hover {
   background: var(--color-bg);
}

.cle-acct .btn.primary {
   background: var(--color-brand);
   color: #fff;
   border-color: var(--color-brand);
}

.cle-acct .btn.primary:hover {
   background: var(--color-brand-dark);
}

.cle-acct .btn.danger {
   color: var(--color-danger);
   border-color: #e8b0b0;
}

.cle-acct .btn-xs {
   padding: 3px 8px;
   border-radius: var(--radius-sm);
   font-size: 11px;
   font-weight: 500;
   cursor: pointer;
   border: 0.5px solid var(--color-border);
   background: var(--color-surface);
   color: var(--color-text);
   font-family: var(--font);
}

.cle-acct .btn-xs.primary {
   background: var(--color-brand);
   color: #fff;
   border-color: var(--color-brand);
}

.cle-acct .btn-xs:hover {
   background: var(--color-bg);
}

.cle-acct .icon-btn {
   padding: 3px 6px;
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-sm);
   background: none;
   cursor: pointer;
   color: var(--color-text-muted);
   font-size: 12px;
}

.cle-acct .icon-btn:hover {
   color: var(--color-text);
   background: var(--color-bg);
}

.cle-acct .pay-row {
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 8px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-2);
}

.cle-acct .pay-info {
   display: flex;
   align-items: center;
   gap: var(--space-3);
}

.cle-acct .card-icon {
   width: 32px;
   height: 20px;
   border: 0.5px solid var(--color-border);
   border-radius: 3px;
   background: var(--color-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 8px;
   font-weight: 700;
   color: var(--color-text-muted);
}

.cle-acct .pay-name {
   font-size: var(--font-size-sm);
   font-weight: 500;
}

.cle-acct .pay-exp {
   font-size: 10px;
   color: var(--color-text-muted);
}

.cle-acct .plan-current {
   border: 1.5px solid var(--color-brand);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin-bottom: var(--space-3);
   background: var(--color-surface);
}

.cle-acct .plan-name {
   font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--color-brand);
}

.cle-acct .plan-price {
   font-size: var(--font-size-xl);
   font-weight: 700;
   color: var(--color-brand);
}

.cle-acct .plan-price em {
   font-size: var(--font-size-sm);
   font-weight: 400;
   font-style: normal;
   color: var(--color-text-muted);
}

.cle-acct .plan-renew {
   font-size: 11px;
   color: var(--color-text-muted);
   margin-top: 2px;
}

.cle-acct .plan-features {
   list-style: none;
   margin-top: var(--space-3);
}

.cle-acct .plan-features li {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   padding: 2px 0;
   display: flex;
   align-items: flex-start;
   gap: 5px;
}

.cle-acct .plan-features li i {
   font-size: 12px;
   color: var(--color-success);
   margin-top: 1px;
   flex-shrink: 0;
}

.cle-acct .plan-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-3);
}

.cle-acct .plan-card {
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-3);
   cursor: pointer;
   position: relative;
   background: var(--color-surface);
}

.cle-acct .plan-card:hover {
   border-color: var(--color-brand);
   background: var(--color-brand-xlight);
}

.cle-acct .plan-card.current {
   border-color: var(--color-brand);
}

.cle-acct .plan-tag {
   position: absolute;
   top: -1px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--color-brand);
   color: #fff;
   font-size: 10px;
   font-weight: 600;
   padding: 2px 9px;
   border-radius: 0 0 4px 4px;
   white-space: nowrap;
}

.cle-acct .plan-card-name {
   font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--color-brand);
   margin-top: 6px;
}

.cle-acct .plan-card-price {
   font-size: 18px;
   font-weight: 700;
   color: var(--color-brand);
   margin-top: 2px;
}

.cle-acct .plan-card-price em {
   font-size: 11px;
   font-weight: 400;
   font-style: normal;
   color: var(--color-text-muted);
}

.cle-acct .plan-card-desc {
   font-size: 10px;
   color: var(--color-text-muted);
   margin: 3px 0 6px;
   line-height: 1.4;
}

.cle-acct .save-box {
   background: var(--color-bg);
   border-radius: var(--radius-sm);
   padding: 5px 7px;
   text-align: center;
   font-size: 10px;
   color: var(--color-text-muted);
   margin-bottom: var(--space-2);
}

.cle-acct .save-box strong {
   color: var(--color-brand);
}

.cle-acct .filter-row {
   display: flex;
   gap: var(--space-2);
   margin-bottom: var(--space-3);
   flex-wrap: wrap;
}

.cle-acct .filter-row select {
   padding: 4px 7px;
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-xs);
   color: var(--color-text);
   background: var(--color-surface);
   font-family: var(--font);
}

.cle-acct .asset-row {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: 8px 10px;
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-2);
   background: var(--color-surface);
}

.cle-acct .asset-thumb {
   width: 38px;
   height: 28px;
   border-radius: var(--radius-sm);
   background: var(--color-brand-light);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.cle-acct .asset-thumb i {
   font-size: 15px;
   color: var(--color-brand);
   opacity: .5;
}

.cle-acct .asset-info {
   flex: 1;
}

.cle-acct .asset-name {
   font-size: var(--font-size-xs);
   font-weight: 500;
}

.cle-acct .asset-meta {
   font-size: 10px;
   color: var(--color-text-muted);
   margin-top: 1px;
}

.cle-acct .asset-tags {
   display: flex;
   gap: 3px;
   margin-top: 3px;
   flex-wrap: wrap;
}

.cle-acct .asset-tag {
   font-size: 10px;
   padding: 1px 5px;
   border-radius: var(--radius-sm);
   background: var(--color-bg);
   color: var(--color-text-muted);
   border: 0.5px solid var(--color-border);
}

.cle-acct .dropbox-btn {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
   border-radius: var(--radius-md);
   font-size: var(--font-size-xs);
   font-weight: 500;
   background: #0061ff;
   color: #fff;
   border: none;
   cursor: pointer;
   font-family: var(--font);
   white-space: nowrap;
   text-decoration: none;
}

.cle-acct .dropbox-btn i {
   font-size: 13px;
}

.cle-acct .bill-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 10px;
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-2);
   background: var(--color-surface);
}

.cle-acct .bill-desc {
   font-size: var(--font-size-xs);
   font-weight: 500;
}

.cle-acct .bill-date {
   font-size: 10px;
   color: var(--color-text-muted);
   margin-top: 1px;
}

.cle-acct .bill-right {
   display: flex;
   align-items: center;
   gap: var(--space-3);
}

.cle-acct .bill-amt {
   font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--color-brand);
}

.cle-acct .addr-card {
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-3) var(--space-4);
   margin-bottom: var(--space-2);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   background: var(--color-surface);
}

.cle-acct .addr-type {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--color-text-muted);
   margin-bottom: 3px;
}

.cle-acct .addr-lines {
   font-size: var(--font-size-xs);
   color: var(--color-text);
   line-height: 1.5;
}

.cle-acct .ref-box {
   background: var(--color-brand-light);
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin-bottom: var(--space-4);
}

.cle-acct .ref-label {
   font-size: var(--font-size-xs);
   font-weight: 500;
   color: var(--color-text-muted);
   margin-bottom: var(--space-2);
}

.cle-acct .ref-link-row {
   display: flex;
   gap: var(--space-2);
   align-items: center;
}

.cle-acct .ref-link {
   flex: 1;
   padding: 6px 9px;
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-xs);
   background: var(--color-surface);
   color: var(--color-accent);
}

.cle-acct .ref-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-3);
   margin-top: var(--space-3);
}

.cle-acct .ref-stat {
   background: var(--color-surface);
   border-radius: var(--radius-md);
   padding: 8px;
   text-align: center;
   border: 0.5px solid var(--color-border);
}

.cle-acct .ref-stat-val {
   font-size: 18px;
   font-weight: 700;
   color: var(--color-brand);
}

.cle-acct .ref-stat-lbl {
   font-size: 10px;
   color: var(--color-text-muted);
   margin-top: 1px;
}

.cle-acct .notif-item {
   border: 0.5px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 9px 10px;
   display: flex;
   gap: var(--space-3);
   margin-bottom: var(--space-2);
   background: var(--color-surface);
}

.cle-acct .notif-icon {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 13px;
}

.cle-acct .notif-icon.warn {
   background: var(--color-warn-bg);
   color: var(--color-warn);
}

.cle-acct .notif-icon.info {
   background: var(--color-accent-light);
   color: var(--color-accent);
}

.cle-acct .notif-icon.success {
   background: var(--color-success-bg);
   color: var(--color-success);
}

.cle-acct .notif-body {
   font-size: var(--font-size-xs);
   color: var(--color-text);
}

.cle-acct .notif-body strong {
   display: block;
   margin-bottom: 2px;
}

.cle-acct .notif-time {
   font-size: 10px;
   color: var(--color-text-muted);
   margin-top: 4px;
}

.cle-acct .notif-actions {
   display: flex;
   gap: var(--space-2);
   margin-top: var(--space-2);
}

.cle-acct .notif-item.dimmed {
   opacity: .45;
}

.cle-acct .saved-price-warn {
   font-size: 10px;
   color: var(--color-warn);
   font-weight: 500;
   margin-top: 2px;
}


/* ============================================================
   SUPPLEMENTAL — top tab strip + HIDE WooCommerce account nav
   ============================================================ */

/* Top tab strip anchors (the wireframe nav lives here now) */
.cle-acct .tb-nav a.cle-tab {
   padding: 4px 10px;
   font-size: var(--font-size-xs);
   color: rgba(255, 255, 255, .65);
   cursor: pointer;
   border-radius: var(--radius-sm);
   text-decoration: none;
   font-weight: 400;
   transition: .12s;
}

.cle-acct .tb-nav a.cle-tab:hover {
   color: #fff;
   background: rgba(255, 255, 255, .1);
}

.cle-acct .tb-nav a.cle-tab.on {
   color: #fff;
   background: rgba(255, 255, 255, .18);
   font-weight: 500;
}

.cle-acct .bell, .cle-acct .userbtn {
   text-decoration: none;
}

.cle-acct .tb {
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cle-acct .pb {
   padding: var(--space-4) var(--space-5);
}

/* HIDE the WooCommerce account navigation everywhere. It is replaced by the
   top tab strip. `body` is included to outrank any theme rule.
   To bring the sidebar back, define CLE_ACCOUNT_SHOW_NAV in wp-config.php. */
body .woocommerce-account nav.woocommerce-MyAccount-navigation,
body .woocommerce-account .woocommerce-MyAccount-navigation {
   display: none !important;
}


/* Two-column sub-pages: .rpanel supplies the padding, so neutralize the
   .pb wrapper that the shared templates use (full-bleed pages keep .pb). */
.cle-acct .rpanel .pb {
   padding: 0 !important;
   background: transparent !important;
   min-height: 0 !important;
}

.cle-acct .acol {
   background: var(--color-bg);
}

/* Sidebar items are now anchors (real links) — drop the underline. */
.cle-acct .lnav-item {
   text-decoration: none;
}

/* ============================================================
   HOOK-BASED LAYOUT: connect the top strip card and the content
   card into one frame, and neutralize the theme's content float.
   ============================================================ */

/* The theme floats/sizes .woocommerce-MyAccount-content (e.g. width:70%);
   our content card lives inside it, so force it full width. */
body .woocommerce-account .woocommerce-MyAccount-content {
   width: 100% !important;
   max-width: 100% !important;
   float: none !important;
   margin: 0 !important;
}

/* Two stacked .cle-acct cards (top strip + content) read as one card. */
.cle-acct.cle-topwrap {
   max-width: 960px;
   margin: 0 auto;
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   border-bottom: 0;
}

.cle-acct.cle-innerwrap {
   max-width: 960px;
   margin: 0 auto;
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   border-top: 0;
}

.cle-acct.cle-topwrap .tb {
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

button.bt-opt {
   cursor: pointer;
   padding: 6px 12px;
   border-radius: var(--radius-md);
   font-weight: 500;
   font-family: var(--font);
   width: auto;
   font-size: 12px;
   text-align: center;
   text-decoration: none;
   background: var(--color-brand);
   color: #fff;
   border: none;
   display: inline-block;
}
.col-lg-10.mx-auto .woocommerce section:not(.saving-lives-text) {
    padding: 20px 0;
}