.onence-page { --onence-accent: #197b99; --onence-warm: #ee6945; }
.onence-header { align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.onence-header h2 { display: inline-flex; align-items: center; gap: 10px; letter-spacing: -.04em; }
.onence-header h2::before { content: ''; width: 9px; height: 32px; background: var(--onence-warm); border-radius: 5px; }
.onence-header-actions, .onence-pagination, .onence-pagination > div, .onence-search, .onence-confirm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.onence-header-actions { justify-content: flex-end; }
.onence-live { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-strong); font-size: 12px; font-weight: 650; }
.onence-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #96a6b5; }
.onence-live[data-state="sse"]::before { background: #13a77b; box-shadow: 0 0 0 4px #13a77b16; }
.onence-live[data-state="revoked"]::before { background: #db5a47; }
.onence-feedback { min-height: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.6; }
.onence-feedback:empty { display: none; }
.onence-feedback:not(:empty) { margin: 14px 0; padding: 12px 15px; background: color-mix(in srgb, var(--onence-accent) 6%, var(--panel)); border: 1px solid var(--border); border-radius: 12px; }
.onence-feedback[data-error="true"] { color: #b44231; border-color: #d37b6d; }
.onence-setup { margin: 22px 0; padding: 20px; border: 1px solid color-mix(in srgb, var(--onence-warm) 45%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--onence-warm) 5%, var(--panel)); }
.onence-setup p { margin-bottom: 0; color: var(--muted-strong); line-height: 1.7; }
.onence-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 22px 0 30px; }
.onence-summary article { border: 1px solid var(--border); border-radius: 15px; background: var(--panel); padding: 18px 20px; }
.onence-summary span { display: block; color: var(--muted-strong); font-size: 12px; }
.onence-summary strong { display: block; font-size: 29px; line-height: 1.2; margin-top: 9px; font-weight: 750; }
.onence-summary article:first-child { background: color-mix(in srgb, var(--onence-accent) 7%, var(--panel)); }
.onence-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.onence-list-heading h3 { margin: 0; font-size: 18px; }
.onence-list-heading p { margin: 5px 0 0; font-size: 12px; color: var(--muted-strong); }
.onence-search input { width: min(300px,100%); }
.onence-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.onence-table-wrap table { margin: 0; width: 100%; }
.onence-table-wrap td { vertical-align: middle; }
.onence-table-wrap td strong { font-size: 13px; }
.onence-table-wrap td small, .onence-detail-grid small { display: block; color: var(--muted-strong); margin-top: 4px; line-height: 1.5; }
.onence-iccid { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; font-size: 12px; }
.onence-status { display: inline-flex; padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; background: #93a3b418; color: var(--muted-strong); }
.onence-status[data-tone="success"] { background: #0d997916; color: #098263; }
.onence-status[data-tone="warning"] { background: #d68b171a; color: #a57316; }
.onence-status[data-tone="danger"] { background: #d4594616; color: #b6513d; }
.onence-quota { min-width: 105px; }
.onence-quota progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 6px; margin-top: 7px; accent-color: var(--onence-accent); }
.onence-pagination { justify-content: space-between; padding: 16px 0 5px; font-size: 12px; color: var(--muted-strong); }
.onence-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin: 24px 0; flex-wrap: wrap; }
.onence-detail-head h3 { margin: 0 0 7px; font-size: 22px; }
.onence-detail-actions, .onence-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onence-row-actions { min-width: 150px; }
.onence-portal-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.onence-end-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.onence-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }
.onence-detail-grid > div { padding: 18px; border: 1px solid var(--border); border-radius: 14px; }
.onence-detail-grid span { display: block; color: var(--muted-strong); font-size: 12px; margin-bottom: 8px; }
.onence-detail-grid strong { font-size: 15px; overflow-wrap: anywhere; }
.onence-activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.onence-activity { border: 1px solid var(--border); padding: 20px; border-radius: 15px; }
.onence-activity h4 { margin: 0 0 17px; }
.onence-usage { grid-column: 1 / -1; }
.onence-activity ol { list-style: none; padding: 0; margin: 0; }
.onence-activity li { padding: 13px 0; border-top: 1px solid var(--border); }
.onence-activity li:first-child { border-top: 0; }
.onence-activity li strong { display: block; font-size: 13px; }
.onence-activity li small { display: block; color: var(--muted-strong); font-size: 12px; line-height: 1.6; margin-top: 3px; }
.onence-activity-empty { color: var(--muted-strong); font-size: 13px; line-height: 1.6; }
.onence-integration { border: 1px solid var(--border); border-radius: 14px; margin-top: 26px; padding: 17px 20px; }
.onence-integration summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.onence-integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 19px; }
.onence-integration-grid span { display: block; color: var(--muted-strong); font-size: 12px; }
.onence-integration-grid strong { display: block; margin-top: 7px; font-size: 13px; overflow-wrap: anywhere; }
.onence-integration p { font-size: 12px; line-height: 1.7; color: var(--muted-strong); }
.onence-confirm-actions { justify-content: flex-end; margin-top: 22px; }
.onence-confirm-modal .modal-card { max-width: 480px; padding: 28px; }
.onence-confirm-modal p { color: var(--muted-strong); line-height: 1.7; overflow-wrap: anywhere; }
@media(max-width:960px) { .onence-header-actions { justify-content: flex-start; } .onence-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .onence-activity-grid { grid-template-columns: 1fr; } }
@media(max-width:600px) { .onence-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .onence-summary article { padding: 14px; } .onence-detail-grid, .onence-integration-grid { grid-template-columns: 1fr; } .onence-search { width: 100%; } .onence-search input { flex: 1; width: 100px; } .onence-header-actions > button { flex: 1; } .onence-live { width: 100%; } }