.billing-console{--billing-ink:#17342d;--billing-green:#0f7a62;--billing-soft:#edf8f4;--billing-line:#d5e4df}
.billing-console .page-head{margin-bottom:14px}
.billing-console .page-head .head-actions{display:flex;align-items:center;gap:9px}.billing-packages-button{min-width:112px}.billing-packages-button.active{border-color:#0f7a62!important;background:#e9f7f2!important;color:#0b654f!important;box-shadow:0 0 0 3px rgba(15,122,98,.1)}
.billing-free-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin:0 0 16px;padding:20px 22px;border:1px solid #8fd4bf;border-radius:16px;background:linear-gradient(120deg,#e7f8f1 0%,#f7fcfa 62%,#fff 100%);box-shadow:0 10px 28px rgba(20,79,65,.08)}
.billing-free-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#11866b;color:#fff;font-size:24px;font-weight:800;box-shadow:0 7px 18px rgba(17,134,107,.24)}
.billing-free-banner small{display:block;color:#16745f;font-size:11px;font-weight:800;letter-spacing:.12em}
.billing-free-banner h2{margin:3px 0 4px;color:var(--billing-ink);font-size:20px}
.billing-free-banner p{margin:0;color:#5f746e;font-size:13px}
.billing-menu{position:sticky;top:0;z-index:5;gap:4px;padding:6px;background:#fff;border:1px solid var(--billing-line);border-radius:14px;box-shadow:0 7px 22px rgba(24,61,52,.07);overflow-x:auto;scrollbar-width:thin}
.billing-menu button{min-height:58px;border-radius:10px!important;transition:background .18s ease,transform .18s ease}
.billing-menu button:hover{transform:translateY(-1px)}
.billing-menu button.active{box-shadow:0 4px 12px rgba(15,122,98,.2)}
.billing-console .stats-grid{gap:12px}
.billing-console .stat-card{border:1px solid var(--billing-line);border-radius:15px;box-shadow:0 7px 20px rgba(25,66,56,.055)}
.billing-premium-panel{animation:billingPanelIn .2s ease}
.billing-premium-panel[data-billing-panel="plans"] .billing-panel-heading>.btn{display:none!important}
.billing-panel-heading{padding:19px 20px;border:1px solid var(--billing-line);border-radius:15px;background:linear-gradient(135deg,#f7fbfa,#eef7f4)}
.billing-company-card,.billing-price-card,.billing-addon-card,.billing-bills-card{border-color:var(--billing-line)!important;box-shadow:0 8px 24px rgba(24,61,52,.07)!important}
.billing-settings-form .card{border:1px solid var(--billing-line);border-radius:15px;overflow:hidden;box-shadow:0 6px 18px rgba(24,61,52,.05)}
.billing-free-date{display:grid!important;grid-template-columns:1fr minmax(180px,230px);align-items:center;gap:16px;padding:15px!important;margin-bottom:6px;border:1px solid #a9daca;border-radius:12px;background:var(--billing-soft)}
.billing-free-date span{display:flex;flex-direction:column;gap:4px}.billing-free-date input{margin:0!important;background:#fff}
.billing-console .toolbar{gap:10px;padding:12px;background:#f8fbfa;border-bottom:1px solid var(--billing-line)}
.billing-company-user-toolbar{display:grid!important;grid-template-columns:minmax(240px,1fr) minmax(190px,280px) minmax(170px,230px);position:sticky;top:72px;z-index:3;border:1px solid var(--billing-line);border-radius:13px;margin-bottom:12px}.billing-company-user-toolbar input,.billing-company-user-toolbar select{min-height:43px;margin:0}
.billing-user-company-list{display:grid;gap:13px}.billing-user-company{overflow:hidden;border:1px solid var(--billing-line);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(24,61,52,.055)}.billing-user-company>header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#eff8f5,#fafdfc);border-bottom:1px solid var(--billing-line)}.billing-user-company>header .billing-company-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#dff2eb;color:#0f745d;font-weight:800}.billing-user-company>header h3{margin:0;color:#173c33;font-size:15px}.billing-user-company>header small{display:block;margin-top:3px;color:#72837e}.billing-user-company>header>b{padding:6px 10px;border-radius:15px;background:#fff;color:#536a63;font-size:12px;border:1px solid #dae7e2}.billing-user-company table{margin:0}.billing-user-company td>b,.billing-user-company td>small{display:block}.billing-user-company td>small{margin-top:3px;color:#758680}.billing-user-company.platform-users>header{background:linear-gradient(135deg,#f4f5f8,#fbfbfc)}
.billing-console .row-actions{gap:7px;flex-wrap:wrap}
.website-order-actions{justify-content:flex-end;align-items:center}
.order-delete-icon{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #f0c8c8;border-radius:10px;background:#fff7f7;color:#c83f3f;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.order-delete-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.order-delete-icon:hover{background:#c83f3f;border-color:#c83f3f;color:#fff;transform:translateY(-1px);box-shadow:0 5px 12px rgba(200,63,63,.22)}
.order-delete-icon:focus-visible{outline:3px solid rgba(200,63,63,.2);outline-offset:2px}
@keyframes billingPanelIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:780px){.billing-free-banner{grid-template-columns:auto 1fr}.billing-free-banner .btn{grid-column:1/-1;width:100%}.billing-free-date{grid-template-columns:1fr}.billing-menu{position:relative}.billing-console .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-company-user-toolbar{grid-template-columns:1fr;position:relative;top:auto}.billing-user-company>header{grid-template-columns:auto 1fr}.billing-user-company>header>b{grid-column:1/-1;width:max-content}}
@media(max-width:480px){.billing-free-banner{padding:16px}.billing-free-banner h2{font-size:17px}.billing-console .stats-grid{grid-template-columns:1fr}}

/* Readable user billing charges on dark surfaces. */
html[data-ui-theme=dark] .billing-charge-state{color:#a9dfbd!important;opacity:1!important;font-weight:600}
html[data-ui-theme=dark] .billing-user-company td>small{color:#b6cbbf!important}
html[data-ui-theme=dark] .billing-user-company>header :is(h3,small){color:#dfede4!important}