.account-section-heading{margin-bottom:20px}
.account-section-heading>span{display:block;color:#0d9488;font-size:.65rem;font-weight:var(--fw-semibold,600);letter-spacing:.12em;text-transform:uppercase}
.account-section-heading h2{margin:4px 0 6px!important;color:#0f172a!important;font-size:var(--text-xl,1.4rem)!important;font-weight:700}
.account-section-heading p{margin:0!important;color:#64748b;font-size:.78rem;line-height:1.5}
.account-section-subheading{margin:24px 0 12px}
.account-section-subheading h3{margin:0!important;font-size:.92rem!important;font-weight:700;color:#1e293b!important;letter-spacing:.02em}

.account-device-empty{padding:44px 24px;border:2px dashed #cbd5e1;border-radius:16px;background:#f8fafc;text-align:center;margin:20px 0}
.account-device-empty__icon{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 14px;border-radius:14px;background:#e0f2fe;color:#0284c7}
.account-device-empty h2{margin:0 0 8px!important;font-size:1.15rem!important;font-weight:700!important;color:#0f172a!important}
.account-device-empty p{max-width:500px;margin:0 auto 18px!important;color:#64748b;font-size:.82rem;line-height:1.55}
.account-device-empty .account-empty-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px!important;background:#0d9488!important;color:#fff!important;font-size:.78rem!important;font-weight:600!important;border-radius:10px!important;text-decoration:none!important;box-shadow:0 4px 14px rgba(13,148,136,.25);transition:all .2s ease}
.account-device-empty .account-empty-cta-btn:hover{background:#0f766e!important;transform:translateY(-1px)}

.account-device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;margin-bottom:24px}

/* Base Device Card */
.account-device-card{display:flex;flex-direction:column;padding:20px 22px;border-radius:14px;background:#fff;border:1.5px solid #e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,.03);transition:all .25s ease;position:relative}
.account-device-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.07)}

/* State 1: Active & Completed Card (Rich Emerald Green) */
.account-device-card.is-active{background:linear-gradient(180deg,#f0fdf4 0%,#ecfdf5 100%);border:1.5px solid #34d399;box-shadow:0 4px 18px rgba(16,185,129,.08)}
.account-device-card.is-active:hover{border-color:#10b981;box-shadow:0 8px 26px rgba(16,185,129,.16);transform:translateY(-2px)}
.account-device-card.is-active .account-device-card__top{border-bottom-color:rgba(16,185,129,.18)}
.account-device-card.is-active .account-device-card__image{border:1.5px solid #a7f3d0;background:#fff;box-shadow:0 2px 8px rgba(16,185,129,.08)}
.account-device-card.is-active .account-device-tag{color:#059669;font-weight:700}
.account-device-card.is-active .device-verified-indicator{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0;font-weight:600;padding:6px 10px;border-radius:6px}
.account-device-card.is-active .account-device-card__actions{border-top-color:rgba(16,185,129,.18)}

/* State 2: Inactive Card Base (Solid Modern Neutral Slate) */
.account-device-card.is-inactive{background:#f1f5f9;border:1.5px solid #cbd5e1;box-shadow:0 2px 8px rgba(0,0,0,.02)}
.account-device-card.is-inactive:hover{border-color:#94a3b8;box-shadow:0 6px 20px rgba(0,0,0,.06);transform:translateY(-1px)}
.account-device-card.is-inactive .account-device-card__top{border-bottom-color:#cbd5e1}
.account-device-card.is-inactive .account-device-card__image{border:1.5px solid #cbd5e1;background:#fff}
.account-device-card.is-inactive .account-device-card__image img{filter:grayscale(.25);opacity:.88}
.account-device-card.is-inactive .account-device-tag{color:#64748b}
.account-device-card.is-inactive .account-device-card__actions{border-top-color:#cbd5e1}

/* State 2A: Inactive & Unpaid / Pending Payment */
.account-device-card.is-inactive.is-unpaid{background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);border-color:#cbd5e1}
.account-device-card.is-inactive.is-unpaid:hover{border-color:#f59e0b;box-shadow:0 6px 20px rgba(245,158,11,.1)}

/* State 2B: Inactive & Processing / Awaiting Completion */
.account-device-card.is-inactive.is-processing{background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);border-color:#cbd5e1}
.account-device-card.is-inactive.is-processing:hover{border-color:#93c5fd;box-shadow:0 6px 20px rgba(14,165,233,.1)}

/* Card Header */
.account-device-card__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.06);transition:border-color .2s ease}
.account-device-order-ref{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:#64748b;font-weight:600}
.account-device-order-ref svg{color:#94a3b8}

/* Status Badges */
.device-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 11px;border-radius:9999px;line-height:1.3}
.device-status-badge.badge--active{background:#dcfce7;color:#065f46;border:1px solid #86efac}
.device-status-badge.badge--unpaid{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.device-status-badge.badge--inactive{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.device-status-badge.badge--processing{background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd}
.device-status-badge.badge--hosted-active{background:#e0f2fe;color:#0369a1;border:1px solid #7dd3fc}

/* Main Content Area */
.account-device-card__main{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:start;margin-bottom:14px}
.account-device-card__image{width:84px;height:84px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4px;transition:all .2s ease}
.account-device-card__image img{width:100%!important;height:100%!important;object-fit:contain!important}

.account-device-tag{display:block;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0d9488;margin-bottom:3px}
.account-device-title{margin:0 0 5px 0!important;font-size:.95rem!important;line-height:1.35;color:#0f172a!important;font-weight:700}
.account-device-title a{color:inherit;text-decoration:none;transition:color .2s ease}
.account-device-title a:hover{color:#0d9488}
.account-device-qty{margin:0 0 8px 0!important;font-size:.74rem;color:#475569}

/* In-Card Status Alerts */
.device-active-meta{margin-top:6px}
.device-verified-indicator{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;color:#065f46;background:#d1fae5;border:1px solid #a7f3d0;padding:6px 10px;border-radius:7px}

.device-inactive-alert{display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-radius:8px;margin-top:6px}
.device-inactive-alert--unpaid{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b}
.device-inactive-alert--processing{background:#f0f9ff;border:1px solid #bae6fd;border-left:4px solid #0284c7}
.device-status-text{font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.device-status-text--unpaid{color:#92400e}
.device-status-text--processing{color:#0369a1}
.device-status-text--pending{color:#b45309}
.device-status-subtext{font-size:.66rem;line-height:1.4;margin-top:2px}
.device-inactive-alert--unpaid .device-status-subtext{color:#78716c}
.device-inactive-alert--processing .device-status-subtext{color:#475569}

/* Actions Bar */
.account-device-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.06);transition:border-color .2s ease}
.account-device-card__actions .button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px!important;padding:8px 16px!important;font-size:.74rem!important;font-weight:600!important;border-radius:8px!important;line-height:1.2;text-decoration:none!important;transition:all .2s ease}

/* Button Variants */
.account-device-card__actions .button--primary{background:linear-gradient(135deg,#059669,#10b981)!important;color:#fff!important;border:none!important;font-weight:700!important;box-shadow:0 4px 14px rgba(16,185,129,.28)!important}
.account-device-card__actions .button--primary:hover{background:linear-gradient(135deg,#047857,#059669)!important;transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,185,129,.4)!important}

.account-device-card__actions .firmware-pay-button{background:linear-gradient(135deg,#d97706,#f59e0b)!important;color:#fff!important;border:none!important;font-weight:700!important;box-shadow:0 4px 14px rgba(245,158,11,.3)!important}
.account-device-card__actions .firmware-pay-button:hover{background:linear-gradient(135deg,#b45309,#d97706)!important;transform:translateY(-1px);box-shadow:0 6px 18px rgba(245,158,11,.4)!important}

.account-device-card__actions .button--secondary{background:#fff!important;color:#334155!important;border:1.5px solid #cbd5e1!important}
.account-device-card__actions .button--secondary:hover{background:#f8fafc!important;border-color:#94a3b8!important;color:#0f172a!important;transform:translateY(-1px)}

.account-device-card.is-active .account-device-card__actions .button--secondary{background:#fff!important;color:#065f46!important;border:1.5px solid #a7f3d0!important;font-weight:600!important}
.account-device-card.is-active .account-device-card__actions .button--secondary:hover{background:#ecfdf5!important;border-color:#059669!important;color:#064e3b!important}

/* Sleek Dark Order Details Button for Inactive/Processing States */
.account-device-card__actions .button--order-details{background:#334155!important;color:#fff!important;border:1px solid #1e293b!important;font-weight:600!important;box-shadow:0 2px 8px rgba(30,41,59,.18)!important}
.account-device-card__actions .button--order-details:hover{background:#1e293b!important;color:#fff!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,41,59,.28)!important}

.account-device-card__actions .button--ghost{background:transparent!important;color:#64748b!important;border:1px solid transparent}
.account-device-card__actions .button--ghost:hover{background:#f1f5f9!important;color:#0f172a!important}

.account-device-card__actions .button.is-locked{background:#e2e8f0!important;color:#64748b!important;border:1.5px solid #cbd5e1!important;cursor:not-allowed!important;font-weight:600!important;opacity:1!important}

/* Hosted Hardware Cards */
.account-device-card.account-device-card--hosted{cursor:default}
.account-device-card.account-device-card--hosted.is-active{background:linear-gradient(180deg,#f0f9ff 0%,#e0f2fe 100%);border:1.5px solid #38bdf8;box-shadow:0 4px 18px rgba(14,165,233,.09)}
.account-device-card.account-device-card--hosted.is-active:hover{border-color:#0284c7;box-shadow:0 8px 24px rgba(14,165,233,.16);transform:none}
.account-device-card.account-device-card--hosted.is-active .account-device-card__top{border-bottom-color:rgba(14,165,233,.2)}
.account-device-card.account-device-card--hosted.is-active .account-device-card__image{border:1.5px solid #bae6fd;background:#fff}
.account-device-tag--hosted{color:#0284c7!important}
.account-device-title.account-device-title--static{cursor:default;user-select:text}
.device-hosted-shipping-notice{margin-top:10px;padding:12px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px}
.account-device-card.account-device-card--hosted.is-active .device-hosted-shipping-notice{background:#fff;border-color:#bae6fd;box-shadow:0 2px 6px rgba(14,165,233,.06)}
.device-hosted-shipping-header{margin-bottom:7px}
.device-hosted-shipping-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#0284c7;background:#e0f2fe;padding:4px 9px;border-radius:6px;border:1px solid rgba(2,132,199,.25);line-height:1.3}
.device-hosted-shipping-pref{font-size:.76rem;color:#334155;margin-bottom:6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.device-hosted-shipping-pref-label{color:#64748b;font-weight:500}
.device-hosted-shipping-pref strong{color:#0f172a;font-weight:700}
.device-hosted-shipping-note{margin:0!important;font-size:.7rem;color:#64748b;line-height:1.45}

/* Support Tools */
.account-support-tools{display:grid;gap:10px}
.account-support-tools>a{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid #dce5eb;border-radius:11px;background:#f9fbfc;color:inherit!important}
.account-support-tools>a:hover{border-color:#9fc2bc;background:#f0f8f6}
.account-support-tools>a>span{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:8px;background:#e8f2f5;color:#28617d;font-size:.63rem;font-weight:var(--fw-semibold)}
.account-support-tools h3{margin:0 0 3px!important;font-size:.84rem!important}
.account-support-tools p{margin:0!important;color:#718493;font-size:var(--text-xs)}
.account-support-tools b{margin-left:auto;color:#168f7d}

/* Mobile Responsiveness */
@media(max-width:768px){
.account-device-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
.account-device-card{padding:16px}
.account-device-card__main{grid-template-columns:68px 1fr;gap:12px}
.account-device-card__image{width:68px;height:68px}
.account-device-card__actions{flex-direction:column;align-items:stretch}
.account-device-card__actions .button{width:100%}
}


