.package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr));gap:14px;margin:20px 0}.package-card,.package-order{border:1px solid var(--line,var(--manage-color-dfe7eb,#dfe7eb));border-radius:16px;padding:18px;min-width:0}.package-card h3,.package-order h4{margin:0 0 12px}.package-price{font-size:1.55rem;display:block}.package-card .btn{width:100%;white-space:normal}.package-renewal{border-block:1px solid var(--line,var(--manage-color-dfe7eb,#dfe7eb));margin:20px 0}.package-orders{display:grid;gap:12px}.package-status{display:flex;align-items:flex-start;gap:8px;margin:16px 0;padding:12px;border:1px solid currentColor;border-radius:12px;overflow-wrap:anywhere;color:var(--ink,var(--manage-fg-19313c,#19313c));background:color-mix(in srgb,currentColor 6%,transparent)}
html[data-theme="dark"] .package-status{color:#e1e9ec}
.package-status--success{color:#267467;background:color-mix(in srgb,#328879 10%,transparent)}
.package-status--error{color:#a13434;background:color-mix(in srgb,#b84141 8%,transparent)}
html[data-theme="dark"] .package-status--success{color:#99dfcd}
html[data-theme="dark"] .package-status--error{color:#ffb7b7}
.package-status-message{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;padding:10px 0;line-height:1.5}
.package-status svg{width:20px;height:20px;flex-shrink:0}
.package-status-message>svg{margin-top:2px}
.package-status-close{display:grid;place-items:center;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.package-status-close:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.package-status-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.package-dialog{max-width:540px;width:calc(100% - 28px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line,var(--manage-color-dfe7eb,#dfe7eb));border-radius:20px;padding:24px;color:var(--ink,var(--manage-fg-19313c,#19313c));background:var(--panel,#fff)}.package-dialog::backdrop{background:#102c3e88}.package-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}.package-renew-check{display:flex;align-items:flex-start;gap:8px}.package-renew-check input{margin-top:5px}.package-dialog [role=alert]{color:var(--danger,#a6243c)}html[data-theme=dark] .package-dialog{background:#17272e;color:#e1e9ec}@media(max-width:420px){.package-dialog{padding:18px}.package-actions>.btn{width:100%}.package-card,.package-order{padding:15px}}

.packages-page{display:grid;gap:20px;min-width:0}.package-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.package-toolbar p{margin:0}.packages-page>.package-status{margin:0}.packages-page h2{font-size:1.15rem;margin:0 0 16px}.package-order-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.package-order-head h3,.package-order-head h2{margin:0;font-size:1.05rem}.package-badge{display:inline-block;border:1px solid var(--line,var(--manage-color-dfe7eb,#dfe7eb));border-radius:8px;padding:5px 9px;font-size:.8rem;line-height:1.4;overflow-wrap:anywhere}.package-badge--active{color:#267467;border-color:#328879;background:#32887912}html[data-theme=dark] .package-badge--active{color:#99dfcd;border-color:#78baab}.package-current{padding:0!important;border:0;border-radius:0}.package-usage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:16px;margin:20px 0}.package-usage>div{display:flex;flex-direction:column;gap:6px;min-width:0}.package-remaining{display:block;font-size:2.7rem;line-height:1.15;color:#267467;overflow-wrap:anywhere}html[data-theme=dark] .package-remaining{color:#99dfcd}.package-usage small{font-size:.8rem;font-weight:400}.package-used{border-left:1px solid var(--line,var(--manage-color-dfe7eb,#dfe7eb));padding-left:16px}.package-used strong{font-size:1.35rem;overflow-wrap:anywhere}.package-progress{display:block;width:100%;height:10px;appearance:none;border:0;border-radius:10px;overflow:hidden;background:#849da233;color:#328879}.package-progress::-webkit-progress-bar{background:#849da233;border-radius:10px}.package-progress::-webkit-progress-value{background:#328879;border-radius:10px}.package-progress::-moz-progress-bar{background:#328879;border-radius:10px}html[data-theme=dark] .package-progress::-webkit-progress-value{background:#8ecdbd}.package-order-meta{display:grid;gap:10px;margin:16px 0 0}.package-order-meta>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.package-order-meta dt{font-size:.85rem;opacity:.8}.package-order-meta dd{margin:0;text-align:right;font-size:.85rem;overflow-wrap:anywhere}.package-orders{margin-top:16px}.package-queue .package-order{background:color-mix(in srgb,currentColor 3%,transparent)}.package-count{font-size:.85rem;font-weight:400}.package-renewal{border-block:0;margin:0}.package-details>summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;line-height:1.5;font-weight:600;padding:10px 0}.package-details>summary:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}.package-conditions{border-block:1px solid var(--line,var(--manage-color-dfe7eb,#dfe7eb));padding:14px 0;margin-top:16px}.package-conditions .small{margin:10px 0 0}.package-shop .package-grid{margin-bottom:0}.package-history .package-details>summary{padding:0}.package-history:has(details:not([open])){padding-block:12px}.package-shop .package-card,.package-catalog-shop .package-card{display:flex;flex-direction:column}.package-shop .package-card .btn{margin-top:auto}.package-shop .package-card .small,.package-catalog-shop .package-card .small{margin:10px 0 16px}@media(max-width:420px){.packages-page{gap:16px}.package-remaining{font-size:2.2rem}.package-order-head{align-items:flex-start}.package-usage{gap:12px}.package-used{padding-left:12px}}

.package-card>.btn+.btn{margin-top:10px}.package-gift-dialog label:not(.package-renew-check){display:block;margin:16px 0}.package-gift-dialog label:not(.package-renew-check)>input{display:block;width:100%;min-height:44px;margin-top:6px;box-sizing:border-box}.package-gift-dialog .package-renew-check input{width:22px;height:22px;flex-shrink:0}.package-gifts-panel>.package-status{flex-wrap:wrap}.package-gifts-panel .package-status p{flex:1;min-width:180px;margin:4px 0}.package-gift-note{overflow-wrap:anywhere}.package-gifts-panel .package-order{margin-top:12px;overflow-wrap:anywhere}.package-gifts-panel:empty{display:none}

.package-admin-dialog label,[data-package-admin] label{display:block;margin:14px 0}.package-admin-dialog input,[data-package-admin] input,[data-package-admin] select{display:block;width:100%;min-height:44px;box-sizing:border-box;margin-top:6px}.package-admin-search-results{display:grid;gap:10px;margin-top:14px}.package-admin-search-results .btn,.package-admin-order .btn-quiet{white-space:normal;overflow-wrap:anywhere;text-align:left;max-width:100%}.package-admin-order{margin-top:14px;overflow-wrap:anywhere}[data-package-admin]>.card{margin-top:18px}.package-admin-dialog{max-height:90dvh;overflow:auto}

.package-admin-dialog .package-renew-check{display:flex;gap:10px;align-items:flex-start}.package-admin-dialog .package-renew-check input{width:22px;min-width:22px;min-height:22px;margin:0}.package-admin-dialog select{width:100%;min-height:44px}

/* Renewal is a standalone panel: inherit the shell panel padding. */
.package-renewal{min-width:0;overflow-wrap:anywhere}.package-renewal .package-order-head>h2{flex:1 1 160px;min-width:0}.package-renewal>.btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}


.gift-recipient-details{overflow-wrap:anywhere}.gift-recipient-details:not(:empty){border-block:1px solid var(--line,#dfe7eb);padding:10px 0;margin:16px 0}.package-gift-dialog [data-gift-auto-status]{line-height:1.5;overflow-wrap:anywhere}.package-gift-dialog [data-gift-send]{white-space:normal}

.gift-recipient-details>p{margin:8px 0}

.package-time-left{font-size:.85rem;line-height:1.4;font-weight:500;color:var(--accent,#267467);overflow-wrap:anywhere}

/* Package reload state is shared by customer and administrator controls. */
.package-refresh{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px!important;flex-shrink:0;white-space:normal}
.package-refresh-icon{width:18px;height:18px;flex:0 0 18px}
.package-refresh[aria-busy="true"] .package-refresh-icon{animation:package-refresh-turn 1s linear infinite}
.package-refresh-feedback{margin:0 0 14px;line-height:1.5;overflow-wrap:anywhere}
.package-refresh-feedback:empty{display:none}
@keyframes package-refresh-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.package-refresh[aria-busy="true"] .package-refresh-icon{animation:none}}