:root {
    --ink: #F2F7F7;
    --ink-2: #C9D6D8;
    --ink-3: #7FA3A8;
    --teal: #54D7D2;
    --teal-dark: #2E9C98;
    --teal-ink: #06292A;
    --panel: rgba(7, 26, 32, 0.9);
    --line: rgba(84, 215, 210, 0.22);
    --well: #0C1719;
    --well-line: #2B4D54;
    --blue: #2D6FE6;
    --blue-dark: #1C4BA3;
    --gold: #FFD166;
    --gold-dark: #C79A2E;
    --head: Archivo, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #05141A; }
body { color: var(--ink); font: 15px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
a:hover { color: #8FE7E3; }
[hidden] { display: none !important; }

.bay {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0E4A5C 0%, #0A3140 30%, #071F29 65%, #05141A 100%);
}
.bay-ocean { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bay-wrap { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.bay-header { padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.bay-hbtn {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 0; border-radius: 14px;
    text-decoration: none; font-family: inherit; text-align: left; cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.bay-hbtn:active { transform: translateY(4px); }
.bay-hbtn-discord { background: var(--blue); color: #fff; box-shadow: 0 6px 0 var(--blue-dark); }
.bay-hbtn-discord:hover { color: #fff; }
.bay-hbtn-discord:active { box-shadow: 0 2px 0 var(--blue-dark); }
.bay-hbtn-ip { background: var(--gold); color: #3B2A00; box-shadow: 0 6px 0 var(--gold-dark); }
.bay-hbtn-ip:active { box-shadow: 0 2px 0 var(--gold-dark); }
.bay-hbtn-txt { display: flex; flex-direction: column; line-height: 1.15; }
.bay-hbtn-txt small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.bay-hbtn-txt b { font-family: var(--head); font-style: italic; font-weight: 900; font-size: 20px; }
.bay-badge { position: absolute; top: -10px; background: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.bay-badge-left { left: -8px; color: var(--blue-dark); }
.bay-badge-right { right: -8px; color: #8A6410; }

.bay-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.bay-brand img { width: 280px; max-width: 70vw; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
.bay-brand span { font-family: var(--head); font-style: italic; font-weight: 800; font-size: 14px; letter-spacing: .32em; color: var(--ink-2); }

.bay-page { padding-top: 36px; padding-bottom: 120px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; flex: 1; }
.bay-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.bay-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bay-modules { display: flex; flex-direction: column; gap: 16px; }
.bay-modules:empty { display: none; }

.bay-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.bay-alert { padding: 14px 18px; border-color: rgba(255, 209, 102, .5); color: var(--gold); font-weight: 600; }
.bay-muted { margin: 0; font-size: 14px; color: var(--ink-2); }
.bay-muted p { margin: 0; }

.bay-menu { overflow: hidden; }
.bay-menu-head { padding: 16px 18px; background: var(--teal); color: var(--teal-ink); font-family: var(--head); font-style: italic; font-weight: 900; font-size: 20px; }
.bay-menu-list { display: flex; flex-direction: column; padding: 8px; }
.bay-menu-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.bay-menu-list a:hover { background: rgba(84, 215, 210, .07); color: var(--ink); }
.bay-menu-list a.active { background: rgba(84, 215, 210, .12); color: var(--ink); }
.bay-menu-list a span { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.bay-menu-list a.bay-sub { padding-left: 26px; font-size: 14px; }

.bay-box { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.bay-box-head { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-style: italic; font-weight: 900; font-size: 17px; }
.bay-head-sm { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; }
.bay-cart-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink-2); }
.bay-cart-row b { color: var(--ink); font-weight: 600; }
.bay-link-sm { font-size: 13px; color: var(--ink-3); text-align: center; }

.bay-bar { height: 14px; border-radius: 999px; background: var(--well); overflow: hidden; }
.bay-bar div { height: 100%; background: linear-gradient(90deg, #49D1F7, var(--teal)); }
.bay-goal-pct { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.bay-heads { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bay-heads img { width: 100%; aspect-ratio: 1; border-radius: 8px; background: #3E5C60; image-rendering: pixelated; }
.bay-heads .bay-muted { grid-column: 1 / -1; }
.bay-top { display: flex; align-items: center; gap: 12px; }
.bay-top img { width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; }

.bay-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border: 0; border-radius: 10px;
    background: var(--teal); color: var(--teal-ink); font: 700 14px Inter, sans-serif; text-decoration: none; cursor: pointer;
    box-shadow: 0 4px 0 var(--teal-dark); transition: transform .1s, box-shadow .1s; white-space: nowrap;
}
.bay-btn:hover { color: var(--teal-ink); filter: brightness(1.06); }
.bay-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--teal-dark); }
.bay-btn-wide { width: 100%; }
.bay-btn-big { height: 52px; padding: 0 28px; font-size: 16px; }
.bay-btn-blue { background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-dark); }
.bay-btn-blue:hover { color: #fff; }
.bay-btn-ghost { background: transparent; border: 1px solid var(--well-line); color: var(--ink); box-shadow: none; }
.bay-btn-ghost:hover { color: var(--ink); border-color: var(--teal); }
.bay-btn-ghost:active { box-shadow: none; }
.bay-btn-off { background: var(--well); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.bay-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.bay-hero { padding: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.bay-hero-col { flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 28px; }
.bay-hero h1, .bay-login h1, .bay-pkg h1, .bay-cms h1 { margin: 0; font-family: var(--head); font-style: italic; font-weight: 900; font-size: 34px; line-height: 1.1; }
.bay-hero p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.bay-hero-col p { margin: 0; }

.bay-grid { display: grid; gap: 16px; }
.bay-grid-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bay-grid-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bay-grid-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bay-grid-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.bay-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.bay-card:hover { color: var(--ink); border-color: rgba(84, 215, 210, .55); transform: translateY(-2px); }
.bay-card-title { font-family: var(--head); font-style: italic; font-weight: 900; font-size: 22px; }
.bay-card-text { font-size: 14px; color: var(--ink-2); }
.bay-card-price { margin-top: auto; font-weight: 700; color: var(--teal); }
.bay-icons { display: flex; gap: 6px; }
.bay-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.bay-icon-light { background: #DCE8EA; }
.bay-icon-plus, .bay-icon-key { background: var(--well); border: 1px solid var(--well-line); }
.bay-icon-plus { font-family: var(--head); font-weight: 900; font-size: 28px; color: var(--teal); }
.bay-icon-key { color: var(--gold); }

.bay-note, .bay-help { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.bay-help { padding: 24px; gap: 12px; }
.bay-help p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.bay-note-title { font-family: var(--head); font-style: italic; font-weight: 900; font-size: 18px; }
.bay-note ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-2); }
.bay-note-red { border-color: rgba(255, 107, 107, .35); }
.bay-note-red .bay-note-title { color: #FF8A8A; }
.bay-note-green { border-color: rgba(123, 224, 138, .35); }
.bay-note-green .bay-note-title { color: #7BE08A; }

.bay-desc { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.bay-desc p { margin: 0 0 8px; }
.bay-desc p:last-child { margin-bottom: 0; }
.bay-desc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.bay-desc-lg { font-size: 15px; }
.bay-price { font-family: var(--head); font-weight: 900; font-size: 24px; white-space: nowrap; }
.bay-price s { font-size: 15px; color: var(--ink-3); margin-right: 6px; }

.bay-rank { overflow: hidden; display: flex; flex-direction: column; }
.bay-rank-best { border: 2px solid var(--teal); }
.bay-rank-top { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #2A6F80, #12424F); }
.bay-rank-top img { max-height: 84px; }
.bay-rank-fish { background: linear-gradient(180deg, #F2A55A, #C9662A); }
.bay-rank-shark { background: linear-gradient(180deg, #9AA6B4, #5C6876); }
.bay-rank-orca { background: linear-gradient(180deg, #E8F2F4, #A9C4CA); }
.bay-pill { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); background: var(--teal); border-radius: 999px; padding: 5px 9px; }
.bay-rank-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.bay-rank-name { font-family: var(--head); font-style: italic; font-weight: 900; font-size: 24px; color: var(--ink); text-decoration: none; }
.bay-rank-name:hover { color: var(--teal); }
.bay-buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.bay-item { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.bay-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bay-item-top .bay-price { font-size: 22px; }
.bay-item-name { font-family: var(--head); font-style: italic; font-weight: 900; font-size: 22px; text-decoration: none; }
.bay-item .bay-btn { margin-top: auto; }

.bay-pkg { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.bay-pkg-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bay-pkg-icon { width: 96px; height: 96px; flex-shrink: 0; border-radius: 18px; background: var(--well); border: 1px solid var(--well-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bay-pkg-icon:empty { display: none; }
.bay-pkg-icon img { max-width: 80%; max-height: 80%; }
.bay-pkg-title { display: flex; flex-direction: column; gap: 4px; }

.bay-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bay-form-col { flex-direction: column; flex-wrap: nowrap; }
.bay-input {
    flex: 1 1 180px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--well-line); background: var(--well);
    color: var(--ink); font: 500 15px Inter, sans-serif; min-width: 0;
}
.bay-form-col .bay-input { flex: 0 0 auto; }
.bay-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
select.bay-input { cursor: pointer; }

.bay-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(84, 215, 210, .1); }
.bay-line:last-child { border-bottom: 0; }
.bay-line-name { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); text-decoration: none; }
.bay-line-opt { font-size: 13px; color: var(--ink-3); margin-top: -6px; padding-bottom: 8px; }
.bay-qty { flex: 0 0 72px; height: 36px; text-align: center; color: var(--ink-2); }
span.bay-qty { line-height: 36px; }
.bay-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #FF8A8A; text-decoration: none; font-size: 22px; }
.bay-x:hover { background: rgba(255, 107, 107, .12); color: #FF8A8A; }
.bay-pay { padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.bay-total { font-family: var(--head); font-weight: 900; font-size: 34px; }

.bay-login-wrap { padding-top: 36px; padding-bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; }
.bay-login { width: 100%; max-width: 440px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.bay-login > p { margin: 0; color: var(--ink-2); }
.bay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 12px; background: var(--well); border: 1px solid var(--well-line); }
.bay-tabs button { height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 700 14px Inter, sans-serif; cursor: pointer; }
.bay-tabs button.active { background: var(--teal); color: var(--teal-ink); }
.bay-login .bay-muted { text-align: left; font-size: 13px; }

.bay-cms { font-size: 15px; }
.bay-cms p, .bay-cms li { color: var(--ink-2); }

.bay-footer { position: relative; background: rgba(3, 12, 15, .85); }
.bay-footer-in { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.bay-footer a { color: var(--ink-3); text-decoration: none; }
.bay-footer a:hover { color: var(--ink); }

.bay-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50;
    padding: 12px 18px; border-radius: 12px; background: var(--gold); color: #3B2A00; font-weight: 700; box-shadow: 0 6px 0 var(--gold-dark);
    transition: opacity .2s, transform .2s;
}
.bay-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
    .bay-wrap { padding-left: 16px; padding-right: 16px; }
    .bay-header { justify-content: center; padding-top: 20px; }
    .bay-brand { order: -1; width: 100%; }
    .bay-hbtn { flex: 1 1 150px; padding: 12px 14px; }
    .bay-hbtn-txt b { font-size: 16px; }
    .bay-page { padding-top: 24px; padding-bottom: 80px; }
    .bay-main { order: -1; }
    .bay-hero, .bay-hero-col, .bay-pkg { padding: 22px 20px; }
    .bay-hero h1, .bay-login h1, .bay-pkg h1, .bay-cms h1 { font-size: 28px; }
}

.bay-ray { animation: bay-ray 9s ease-in-out infinite alternate; }
.bay-ray:nth-of-type(2) { animation-delay: -3s; animation-duration: 11s; }
.bay-ray:nth-of-type(3) { animation-delay: -6s; animation-duration: 13s; }
.bay-bubble { transform-box: fill-box; animation: bay-bubble 14s linear infinite; }
.bay-bubble:nth-of-type(2) { animation-delay: -4s; }
.bay-bubble:nth-of-type(3) { animation-delay: -7s; animation-duration: 17s; }
.bay-bubble:nth-of-type(4) { animation-delay: -10s; animation-duration: 16s; }
.bay-kelp { transform-box: fill-box; transform-origin: 50% 100%; animation: bay-kelp 7s ease-in-out infinite alternate; }
.bay-kelp:nth-of-type(5) { animation-delay: -2s; }
.bay-kelp:nth-of-type(6) { animation-delay: -4s; animation-duration: 8s; }
.bay-kelp:nth-of-type(7) { animation-delay: -1s; animation-duration: 6s; }

@keyframes bay-ray { from { opacity: .025; } to { opacity: .07; } }
@keyframes bay-bubble {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-160px); opacity: 0; }
}
@keyframes bay-kelp { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }

@media (prefers-reduced-motion: reduce) {
    .bay-ray, .bay-bubble, .bay-kelp { animation: none; }
}