:root { --portal-cyan: #8ce7ed; --portal-coral: #ff806b; }
.portal-page { background: radial-gradient(circle at 78% 8%, rgba(35,92,111,.24), transparent 28%), #06111a; }
.portal-header { background: rgba(6,17,26,.88); backdrop-filter: blur(18px); }
.free-pill { display: inline-flex; padding: 10px 14px; border: 1px solid rgba(140,231,237,.28); border-radius: 99px; color: var(--portal-cyan); background: rgba(140,231,237,.06); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.management-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 14px; align-items: start; }
.source-section, .profile-section, .device-section { grid-column: 1; }
.plan-section { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 18px; }
.account-section { grid-column: 2; display: grid; gap: 26px; }
.account-section p:not(.panel-label) { color: #818f95; font-size: 13px; line-height: 1.55; }
.section-note { max-width: 760px; margin: -10px 0 24px; color: #778890; font-size: 12px; line-height: 1.55; }
.profile-list, .device-list { display: grid; gap: 8px; }
.profile-row, .device-row { min-height: 78px; padding: 12px 13px; display: grid; grid-template-columns: 48px 1fr auto auto auto; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: #131c23; }
.profile-avatar, .device-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #06111a; background: var(--portal-cyan); font-weight: 800; }
.device-icon { border-radius: 7px; color: var(--portal-cyan); background: #0a2a34; font-size: 10px; }
.profile-row > div, .device-row > div { display: grid; gap: 5px; min-width: 0; }
.profile-row strong, .device-row strong { font-size: 15px; }
.profile-row div span, .device-row div span { overflow: hidden; color: #818f95; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.auto-badge, .device-status { padding: 6px 8px; border-radius: 99px; color: var(--portal-cyan); background: rgba(140,231,237,.08); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.device-status.expired { color: #a0a6a8; background: rgba(255,255,255,.06); }
.store-prices { margin: 22px 0 10px; display: grid; gap: 8px; }
.store-prices div { padding: 15px; display: grid; gap: 5px; border: 1px solid rgba(140,231,237,.13); background: rgba(140,231,237,.035); }
.store-prices strong { font-size: 20px; }
.store-prices span { color: #7f9198; font-size: 11px; }
.danger-button { border-color: rgba(255,128,107,.35); color: #ff9d8d; background: rgba(255,128,107,.06); }
.danger-button:hover { border-color: var(--portal-coral); background: rgba(255,128,107,.11); }
.check-row { grid-template-columns: 19px 1fr !important; align-items: center; gap: 10px !important; }
.check-row input { width: 17px !important; height: 17px !important; accent-color: var(--portal-cyan); }
.source-access { margin: 19px 0; padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; }
.source-access legend { padding: 0 7px; color: #8f9da2; font-size: 11px; }
.source-access > div { display: grid; gap: 4px; }
.source-access .check-row { margin: 8px 0; }
.compact-empty { padding: 34px 20px; }
.delete-warning { color: #c7a29c; font-size: 13px; line-height: 1.6; }
.portal-page [hidden] { display: none !important; }
.dvr-policy-dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border-radius: 8px; }
.dvr-policy-dialog .dialog-shell { min-width: 0; }
.dvr-policy-dialog .dialog-heading h2 { font-size: 24px; overflow-wrap: anywhere; }
.dvr-policy-dialog .panel-label { overflow-wrap: anywhere; }
.dvr-policy-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0; }
.dvr-policy-fields label { padding: 14px 0; border-bottom: 1px solid #43515c; margin: 0; }
.dvr-policy-fields .dvr-policy-toggle, .dvr-policy-fields .dvr-policy-connections { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dvr-policy-fields input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; margin: 0; accent-color: #27ae86; }
.dvr-policy-fields .dvr-policy-connections input { width: 80px; }
.dvr-policy-fields .dvr-policy-confirmation { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.dvr-policy-dialog .dvr-policy-confirmation span { min-width: 0; overflow-wrap: anywhere; color: #d5dbe0; }
.dvr-policy-dialog .dialog-actions { flex-wrap: wrap; }
.source-row.has-dvr-policy { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.source-row.has-dvr-policy [data-dvr-policy-source] { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
@media (max-width: 600px) { .source-row.has-dvr-policy { grid-template-columns: 44px minmax(0, 1fr); } .source-row.has-dvr-policy [data-dvr-policy-source] { grid-column: 1 / -1; grid-row: 3; } }
@media (max-width: 480px) { .dvr-policy-dialog .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; } .dvr-policy-dialog [data-dvr-policy-save] { grid-column: 1 / -1; } }
@media (max-width: 900px) { .management-grid { grid-template-columns: 1fr; } .source-section, .profile-section, .device-section, .plan-section, .account-section { grid-column: 1; grid-row: auto; } .plan-section { position: static; } }
@media (max-width: 600px) { .profile-row, .device-row { grid-template-columns: 44px 1fr auto; } .profile-row .source-action, .device-row .source-action { grid-row: 2; } .profile-row [data-edit-profile] { grid-column: 1; } .profile-row [data-delete-profile] { grid-column: 2; justify-self: start; } .profile-row .auto-badge, .device-row .device-status { grid-column: 3; grid-row: 1; } .device-row [data-revoke-device] { grid-column: 2; justify-self: start; } }
[data-dvr-enrollment].portal-section { border: 0; border-radius: 0; background: transparent; }
[data-dvr-enrollment-form] { display: grid; gap: 12px; margin: 16px 0; }
[data-dvr-enrollment-form] label { display: grid; gap: 8px; }
[data-dvr-enrollment-form] input { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; border: 1px solid #52616a; border-radius: 4px; background: #101a20; color: #fff; font: inherit; }
[data-dvr-enrollment-review] .check-row { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; }
[data-dvr-enrollment-review] input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: #84dfe3; }
[data-dvr-enrollment-review] button { margin: 0 8px 8px 0; }
[data-dvr-enrollment-devices] > div { padding: 12px 0; border-top: 1px solid #35434a; }