.device-groups {padding: 20px; display: grid; gap: 13px;}
.connection-device-title {display: flex; flex-wrap: wrap; align-items: center; gap: 9px;}
.device-group {border: 1px solid var(--border); border-radius: 15px; background: var(--surface); overflow: clip; transition: border-color .2s, box-shadow .2s;}
.device-group:hover, .device-group[open] {border-color: var(--accent-line); box-shadow: var(--shadow);}
.device-summary {display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; padding: 21px; background: linear-gradient(120deg, var(--surface), var(--surface-raised));}
.device-summary::-webkit-details-marker {display: none;}
.device-summary:focus-visible {outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 14px;}
.device-identity {display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;}
.device-identity strong {font-size: 15px; color: var(--ink); overflow-wrap: anywhere;}
.device-identity .sub {display: block; margin-top: 5px; font-size: 12px; color: var(--ink-muted);}
.device-glyph {display: grid; place-items: center; flex: none; width: 46px; height: 49px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); border-radius: 13px;}
.group-meta {display: flex; gap: 18px; align-items: center;}
.group-count {font-size: 12px; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums;}
.expand-label {display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--accent); white-space: nowrap;}
.expand-label .icon {width: 15px; height: 15px; transition: transform .22s;}
.device-group[open] > summary .expand-label .icon {transform: rotate(90deg);}
.group-body {padding: 0 21px 21px; border-top: 1px solid var(--border); animation: group-arrive .22s ease-out;}
.group-body > .definition {display: flex; flex-wrap: wrap; gap: 12px 34px; padding: 18px 0; margin: 0;}
.group-body > .definition > div {display: grid; gap: 4px; padding: 0; border: 0;}
.group-body > .definition dt {font-size: 11px;}
.group-body > .definition dd {font-size: 12px; margin: 0; max-width: none; text-align: left; overflow-wrap: anywhere;}
.membership-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px;}
.membership-card {display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised);}
.membership-card.active {border-color: var(--accent-line); background: linear-gradient(135deg, var(--accent-soft), var(--surface));}
.membership-title {display: flex; align-items: start; justify-content: space-between; gap: 14px;}
.membership-title > :first-child {min-width: 0; overflow-wrap: anywhere;}
.membership-card .sub {display: block; color: var(--ink-muted); font-size: 11px;}
.membership-title .badge {flex: none;}
.membership-dates {display: grid; gap: 6px; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums;}
.membership-footer {display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border);}
.membership-reference {font-size: 11px; min-width: 0;}
.membership-reference summary {cursor: pointer; color: var(--ink-muted); margin-top: 5px;}
.membership-reference .mono {display: block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; margin-top: 6px; font-size: 10px;}
.membership-footer > .button {flex: none;}
.membership-history {margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px;}
.membership-history > summary {cursor: pointer; color: var(--ink-muted); font-size: 12px; padding: 5px 0;}
.membership-history > .membership-list {margin-top: 14px;}
@keyframes group-arrive {from {opacity: .5; transform: translateY(-4px);} to {opacity: 1; transform: translateY(0);}}
@media (max-width: 1150px) {.membership-list {grid-template-columns: 1fr;} .device-summary {flex-wrap: wrap; gap: 13px;} .group-meta {margin-left: 60px;} .device-identity {flex-basis: calc(100% - 120px);} .expand-label {margin-left: auto;}}
@media (max-width: 600px) {.device-groups {padding: 12px;} .device-summary {padding: 15px; gap: 12px;} .group-meta {margin-left: 0; flex-basis: 100%; justify-content: space-between; order: 3;} .device-identity {flex-basis: 60%; gap: 10px;} .device-glyph {width: 37px; height: 42px;} .expand-label {font-size: 11px;} .group-body {padding: 0 13px 13px;} .membership-card {padding: 14px;} .membership-footer {align-items: center; flex-wrap: wrap;} .membership-title .badge {font-size: 10px;} .group-body > .definition {gap: 14px 22px;}}
@media (prefers-reduced-motion: reduce) {.device-group, .expand-label .icon {transition: none;} .group-body {animation: none;}}
/* Device hierarchy refresh: each physical phone is one expandable record. */
.device-groups {padding: 23px; gap: 17px; background: linear-gradient(var(--surface-raised), var(--surface));}
.device-group {border-radius: 17px; box-shadow: 0 4px 14px #263e6a05;}
.device-summary {padding: 23px; position: relative; background: var(--surface); gap: 22px;}
.device-summary::before {content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; background: var(--accent-line); border-radius: 0 3px 3px 0; transition: background .2s;}
.device-group[open]>.device-summary::before {background: var(--accent);}
.device-group[open]>.device-summary {background: linear-gradient(110deg, var(--accent-soft), var(--surface));}
.device-glyph {width: 49px; height: 54px; border-radius: 15px; background: linear-gradient(140deg, var(--surface-raised), var(--accent-soft)); box-shadow: 0 5px 12px #4665d809;}
.device-glyph>.icon {width: 25px; height: 25px;}
.device-identity strong {font-size: 16px; font-weight: 600; letter-spacing: -.4px;}
.device-identity .sub {font-size: 11px;}
.group-count {font-size: 11px; border-left: 1px solid var(--border); padding-left: 17px;}
.expand-label {padding: 8px 10px; border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: 11px;}
.group-body {padding: 0 23px 23px; background: var(--surface);}
.group-body>.definition {padding: 21px 0; gap: 16px 45px;}
.group-body>.definition dt {font-size: 10px;}
.group-body>.definition dd {font-size: 12px;}
.group-hint {display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; margin: 0 0 17px; background: var(--surface-raised); color: var(--ink-muted); border: 1px solid var(--border); border-radius: 9px; font-size: 11px; line-height: 1.8;}
.group-hint>.icon {width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px;}
.membership-card {border-radius: 13px; background: var(--surface-raised); box-shadow: 0 2px 8px #263e6a03;}
.membership-card.active {background: linear-gradient(140deg, var(--accent-soft), var(--surface) 55%); border-color: var(--accent-line);}
.membership-title .entitlement-cell strong {font-size: 13px;}
.membership-footer {padding-top: 15px;}
@media(max-width:1150px) {.device-summary {gap: 15px;} .group-meta {margin-left: 63px;}}
@media(max-width:600px) {
  .device-groups {padding: 13px; gap: 13px;} .device-summary {padding: 17px; gap: 13px;} .device-identity {gap: 11px;} .device-glyph {width: 40px; height: 45px; border-radius: 12px;} .device-glyph>.icon {width: 22px; height: 22px;} .device-identity strong {font-size: 14px;}
  .group-meta {margin-left: 0;} .group-count {padding-left: 10px; font-size: 10px;} .expand-label {font-size: 10px; padding: 6px 8px; gap: 6px;} .group-body {padding: 0 15px 15px;} .group-hint {font-size: 10px;}
}
@media(prefers-reduced-motion:reduce) {.device-summary::before {transition: none;}}