.ad-page-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.ad-page-heading h2 { margin:0 0 8px; color:#1d2b3e; font-size:28px; }
.ad-page-heading p { margin:0; color:#78869a; font-size:14px; }
.ad-account-card { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; padding:28px; border:1px solid #e1e8f0; border-radius:20px; background:#fff; min-width:0; }
.ad-account-identity { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.ad-account-heading { display:flex; align-items:center; gap:18px; min-width:0; }
.ad-account-heading > div { min-width:0; }
.ad-avatar { display:grid; place-items:center; width:64px; height:64px; flex-shrink:0; border-radius:20px; color:#745e35; background:#f5eddf; font-size:28px; font-weight:700; }
.ad-eyebrow { color:#8792a1; font-size:12px; font-weight:600; letter-spacing:.06em; }
.ad-account-heading h3 { margin:5px 0; font-size:23px; color:#243349; overflow-wrap:anywhere; }
.ad-account-heading p { margin:0; color:#7b889b; font-size:14px; overflow-wrap:anywhere; }
.ad-account-facts { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:28px 0 18px; }
.ad-account-facts dt { color:#8490a1; font-size:13px; margin-bottom:10px; }
.ad-account-facts dd { margin:0; color:#344357; font-size:16px; font-weight:600; }
.ad-fine-print { margin:0; color:#8894a5; font-size:12px; line-height:1.7; }
.ad-plan-card { padding:24px; border-radius:16px; background:linear-gradient(120deg,#172330,#253544); color:#f6ead0; min-width:0; }
.ad-plan-heading { display:flex; justify-content:space-between; align-items:center; }
.ad-plan-card .ad-eyebrow { color:#d2bc91; }
.ad-plan-mark { color:#dcc28f; font-size:25px; }
.ad-plan-card h3 { margin:10px 0 16px; font-size:25px; }
.ad-plan-expiry { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 20px; }
.ad-plan-expiry strong { color:#ffe9b9; font-size:18px; font-variant-numeric:tabular-nums; }
.ad-plan-expiry span { color:#bdc7d1; font-size:13px; }
.ad-plan-footer { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:22px; }
.ad-plan-footer > span { font-size:12px; color:#b8c2cd; }
.dq-device-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:40px; padding:0 15px; border:1px solid #dce3ec; border-radius:10px; color:#455973; background:#fff; font:inherit; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; }
.dq-device-button:hover { border-color:#adbacb; background:#f6f8fb; }
.dq-device-button-dark { color:#fff; border-color:#24313f; background:#24313f; }
.dq-device-button-dark:hover { color:#fff; background:#34465a; }
.dq-device-button-gold { color:#47351a; border-color:#e4c999; background:linear-gradient(110deg,#f7e1b7,#ddbb7c); }
.dq-device-button-gold:hover { background:#f5d9a3; }
.dq-device-button:disabled { opacity:.5; cursor:not-allowed; }
.ad-device-actions .dq-device-button-danger { color:#b23d4e; border-color:#e6d7db; background:#fff; }
.ad-device-actions .dq-device-button-danger:hover { color:#a53946; border-color:#d8a9b1; background:#fff0f2; }
.ad-status { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:7px; color:#7c8898; background:#f1f4f8; font-size:12px; font-weight:600; white-space:nowrap; }
.ad-status[data-tone="success"] { color:#20835f; background:#eaf7f0; }
.ad-status[data-tone="warning"] { color:#96711f; background:#fff4da; }
.ad-status[data-tone="danger"] { color:#bb3a49; background:#fff0f2; }
.ad-device-section { padding:24px; border:1px solid #e1e8f0; border-radius:20px; background:#fff; min-width:0; }
.ad-device-section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.ad-device-section-heading h3 { margin:0 0 7px; font-size:20px; color:#26364b; }
.ad-device-section-heading p { margin:0; color:#8290a3; font-size:13px; }
.ad-device-section-tools { display:flex; flex-wrap:wrap; gap:8px; }
.ad-device-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ad-device-card { display:flex; align-items:flex-start; gap:16px; padding:22px; border:1px solid #e3e9f1; border-radius:16px; background:#fff; min-width:0; }
.ad-device-number { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:12px; background:#f3f6fa; color:#73839a; font-size:15px; font-weight:700; }
.ad-device-body { flex:1; min-width:0; }
.ad-device-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ad-device-heading strong { font-size:17px; color:#293a50; overflow-wrap:anywhere; }
.ad-device-heading .ad-status,
.cc-shell[data-active-page="devices"] .ad-device-heading > .ad-status { white-space:normal; max-width:100%; }
.ad-device-location { margin:9px 0 6px; color:#78879b; font-size:13px; overflow-wrap:anywhere; }
.ad-device-last-seen { margin:0; color:#99a4b4; font-size:12px; }
.ad-device-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; }
.ad-device-more { position:relative; margin-left:auto; }
.ad-device-more summary { list-style:none; cursor:pointer; border:1px solid #e1e7ef; border-radius:9px; padding:10px; color:#8894a4; font-size:13px; }
.ad-device-more summary::-webkit-details-marker { display:none; }
.ad-device-more button { position:absolute; z-index:2; top:100%; right:0; width:120px; margin-top:4px; padding:12px; border:1px solid #e6d7db; border-radius:10px; background:#fff; color:#b23d4e; box-shadow:0 8px 24px #1c2f4614; font:inherit; font-size:13px; cursor:pointer; }
.ad-device-note { margin:20px 0 0; color:#97a3b3; font-size:12px; }
.ad-help-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 24px; border:1px solid #e1e8f0; border-radius:16px; background:#fff; }
.ad-help-row h3 { margin:0 0 6px; color:#34445a; font-size:15px; }
.ad-help-row p { margin:0; color:#8894a5; font-size:13px; }
.ad-device-dialog { width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); box-sizing:border-box; padding:28px; overflow:auto; border:1px solid #e0e6ef; border-radius:20px; color:#28384d; background:#fff; box-shadow:0 24px 80px #10233c33; }
.ad-device-dialog::backdrop { background:#13233866; }
.ad-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.ad-dialog-heading h3 { margin:0; font-size:22px; }
.ad-dialog-heading button { padding:4px 8px; border:0; background:none; color:#8491a3; font-size:24px; cursor:pointer; }
.ad-device-dialog p { color:#7a899d; font-size:13px; line-height:1.7; }
.ad-device-dialog form { display:grid; gap:18px; }
.ad-device-dialog label { display:grid; gap:8px; font-size:13px; font-weight:600; }
.ad-device-dialog input,.ad-device-dialog select { box-sizing:border-box; width:100%; min-height:46px; padding:10px 12px; border:1px solid #dce4ee; border-radius:10px; color:#29394f; background:#fff; font:inherit; }
.ad-device-dialog input:focus,.ad-device-dialog select:focus { outline:3px solid #dce7ff; border-color:#92b0ed; }
.ad-dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.ad-dialog-error { padding:10px 12px; border-radius:8px; color:#a53946!important; background:#fff0f2; }
.ad-device-dialog [hidden] { display:none!important; }
@media(max-width:820px) { .ad-account-card { grid-template-columns:1fr; gap:22px; padding:20px; } .ad-device-list { grid-template-columns:1fr; } .ad-device-section { padding:20px; } .ad-page-heading h2 { font-size:24px; } }
@media(max-width:480px) { .ad-account-facts { gap:12px; } .ad-device-card { padding:16px; gap:12px; } .ad-device-actions .dq-device-button { padding:0 10px; font-size:12px; } .ad-avatar { width:50px; height:50px; } .ad-plan-card { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .ad-device-dialog,.dq-device-button { animation:none; transition:none; } }

/* Match shell integration: keep the reviewed layout without changing shared CSS. */
.cc-shell[data-active-page="devices"] .cc-devices-page { grid-template-columns:minmax(0,1fr); gap:22px; }
.cc-shell[data-active-page="devices"] #devices.ad-device-section { padding:24px; border-radius:20px; overflow:visible; }
.cc-shell[data-active-page="devices"] .ad-device-list { gap:16px; }
.cc-shell[data-active-page="devices"] .ad-device-card { display:flex; gap:16px; padding:22px; border-radius:16px; }
.cc-shell[data-active-page="devices"] .ad-device-heading { align-items:center; margin:0; }
.cc-shell[data-active-page="devices"] .ad-device-heading > span { flex:0 0 auto; }
.cc-shell[data-active-page="devices"] .ad-device-heading strong { white-space:normal; overflow-wrap:anywhere; }
.cc-shell[data-active-page="devices"] .ad-device-location { margin:9px 0 6px; font-size:13px; }
.cc-shell[data-active-page="devices"] .ad-device-last-seen { margin:0; font-size:12px; }
.ad-login-renew { display:block; margin-top:16px; color:#7a8798; font-size:13px; text-align:center; text-decoration:none; }
.ad-login-renew:hover { color:#36557b; text-decoration:underline; }
.cc-shell[data-active-page="devices"] #cc-tv-quota { margin:20px 0 0; }
.cc-shell[data-active-page="devices"] #cc-tv-quota .cc-tv-quota-summary { margin:0; background:#f8fafc; }
.cc-shell[data-active-page="devices"] .ad-page-heading h2 { margin:0 0 8px; font-size:28px; }
.cc-shell[data-active-page="devices"] .ad-page-heading p { margin:0; }
.ad-device-dialog #cc-tv-bind-form { display:grid; grid-template-columns:1fr; gap:18px; margin:0; }
.ad-device-dialog form[data-busy="true"] :is(input,select) { pointer-events:none; opacity:.7; }
@media(max-width:820px) { .cc-shell[data-active-page="devices"] .ad-device-list { grid-template-columns:1fr; } .cc-shell[data-active-page="devices"] #devices.ad-device-section { padding:20px; } }

.ad-device-dialog .ad-bind-hint{font-size:12px;font-weight:400;line-height:1.6;color:#7a899d;margin:0}.ad-device-dialog input[readonly]{background:#f4f6f8;color:#748295}
