.app-shell--port-supply { max-width: none; background: #142934; }
.app-shell--port-supply > .topbar { display: none; }
.app-shell--port-supply .main-content { min-height: 100dvh; padding: 0; }
.port-supply-page { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; background: #142934; }
.port-supply-frame { display: block; width: 100%; height: 100dvh; border: 0; background: #142934; }
.port-supply-load-error { position:absolute; z-index:20; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; background:#142934f7; color:#fff; text-align:center; }
.port-supply-load-error .port-supply-primary { max-width:360px; }
.port-supply-controls,
.port-supply-result { position: absolute; z-index: 4; right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), var(--app-safe-area-inset-bottom, 0px), var(--app-content-safe-area-inset-bottom, 0px))); left: max(12px, env(safe-area-inset-left)); display: grid; gap: 9px; padding: 10px; border: 1px solid #f4f7fb26; border-radius: var(--ui-radius-card); background: #1b2027f7; box-shadow: inset 0 1px 0 #ffffff1f, 0 14px 38px #05080c78; }
.port-supply-packages { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 3px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: #10141a; box-shadow: inset 0 1px 0 #ffffff12; }
.port-supply-package-lens { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 20px) / 3); border: 1px solid #ffffff24; border-radius: var(--ui-radius-card); background: linear-gradient(180deg, #505864, #3c434d); box-shadow: inset 0 1px 0 #ffffff2b, 0 2px 7px #00000038; transition: transform 230ms cubic-bezier(.22, .75, .18, 1); will-change: transform; pointer-events: none; }
.port-supply-package-lens::after { content: ""; position: absolute; inset: 1px 10px auto; height: 1px; border-radius: 999px; background: #ffffff38; }
.port-supply-packages button { position: relative; z-index: 1; display: flex; min-width: 0; min-height: var(--ui-control); padding: 7px 8px; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: var(--ui-radius-control); background: transparent; color: #fff; opacity: .66;font: inherit; transition: opacity 140ms cubic-bezier(.23, 1, .32, 1); -webkit-font-smoothing: antialiased; }
.port-supply-packages button.is-active { opacity: 1; }
.port-supply-packages strong {font-size: var(--ui-size-body);line-height: var(--ui-line-body); }
.port-supply-packages span {font-size: var(--ui-size-label);line-height: var(--ui-line-label)}
.port-supply-packages .star-amount { margin-left: 3px;font-size: var(--ui-size-body);line-height: var(--ui-line-body)}
.port-supply-packages .star-image { width: 14px; height: 14px; }
.port-supply-primary,
.port-supply-result-actions button { display: flex; width: 100%; min-height: var(--ui-control); padding: 10px 14px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #ffffff30; border-radius: var(--ui-radius-control); background: linear-gradient(180deg, #525b67, #323942); color: #fff; box-shadow: inset 0 1px 0 #ffffff3d, 0 6px 14px #080b1047;font: inherit;font-size: var(--ui-size-body);font-weight: var(--ui-weight-bold); text-shadow: 0 1px 8px #00000070; transition: transform 150ms cubic-bezier(.23, 1, .32, 1), opacity 180ms cubic-bezier(.23, 1, .32, 1); }
.port-supply-primary:disabled,
.port-supply-packages button:disabled { opacity: .58; }
.port-supply-primary .star-image,
.port-supply-result-actions .star-image { width: 20px; height: 20px; }
.port-supply-error { margin: 0; color: #ffd9cf;font-size: var(--ui-size-label);line-height: var(--ui-line-label); text-align: center; }
.port-supply-progress { position: absolute; z-index: 4; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom)); left: 20px; color: #f8f0e2;font-size: var(--ui-size-caption);font-weight: var(--ui-weight-semibold); text-align: center; text-shadow: 0 2px 12px #10232d;line-height: var(--ui-line-caption)}
.port-supply-result { padding: 9px; background: #1b2027fa; }
.port-supply-result > p { display: flex; margin: 0; min-height: 24px; align-items: center; justify-content: center; gap: 5px; color: #fff;font-size: var(--ui-size-label);line-height: var(--ui-line-label)}
.port-supply-result-actions { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 8px; }
.port-supply-result-actions button:first-child { background: #20252bd6; color: #fff; border-color: #ffffff24; }
@media (hover: hover) and (pointer: fine) {
  .port-supply-packages button:hover:not(.is-active):not(:disabled) { opacity: 1; }
  .port-supply-primary:hover:not(:disabled),
  .port-supply-result-actions button:hover:not(:disabled) { opacity: .92; }
}
.port-supply-packages button:active:not(:disabled) { opacity: .82; }
.port-supply-primary:active:not(:disabled),
.port-supply-result-actions button:active:not(:disabled) { transform: scale(.97); }
@media (min-width: 700px) { .port-supply-controls,.port-supply-result { width: min(430px, calc(100% - 24px)); margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .port-supply-package-lens { transition-duration: 100ms; }
  .port-supply-packages button { transition-duration: 120ms; }
}

@media (orientation: landscape) and (max-height: 500px) {
 .port-supply-controls,.port-supply-result {left:auto;right:12px;width:256px;margin:0;}
 .port-supply-packages button {padding-inline:3px;gap:2px;}
}