:root {
    --bg: #f5f7f2;
    --panel: #ffffff;
    --ink: #172019;
    --muted: #66736a;
    --line: #dce5dc;
    --brand: #1b8fce;
    --brand-dark: #0b5d95;
    --sky: #9bd9ff;
    --warn: #f4b000;
    --danger: #c33a32;
    --shadow: 0 16px 40px rgba(23, 32, 25, 0.08);
}

* { box-sizing: border-box; }
[hidden] {
    display: none !important;
}
body {
    margin: 0;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(155,217,255,.45), transparent 340px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 92px, rgba(155,217,255,.18) 92px 184px),
        var(--bg);
}
body[data-client-session-token]:not([data-client-session-ready]) {
    visibility: hidden;
}
body:has(.bottom-nav) {
    padding-bottom: 82px;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px clamp(16px, 4vw, 48px);
    background: #0c4771;
    color: white;
}

.brand {
    grid-column: 2;
    color: white;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0;
    text-align: center;
}
.nav {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.nav a {
    color: white;
    padding: 8px 10px;
    border-radius: 8px;
}
.nav a:hover, .nav a.active { background: rgba(255,255,255,.14); text-decoration: none; }

.container { width: min(1180px, calc(100% - 28px)); margin: 26px auto 48px; }
.app-page-head h1 {
    margin: 0 0 6px;
}
.app-page-head p {
    margin: 0;
    color: var(--muted);
}
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 26px;
}
.arg-hero {
    min-height: 460px;
    padding: clamp(18px, 4vw, 42px) 0;
}
.hero h1 { font-size: clamp(2rem, 6vw, 4.5rem); line-height: .95; margin: 0 0 14px; }
.hero p { font-size: 1.1rem; color: var(--muted); max-width: 58ch; }
.home-app-hero {
    position: relative;
    min-height: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 22px;
    overflow: hidden;
    padding: clamp(28px, 5vw, 52px) clamp(12px, 4vw, 32px);
    border: 1px solid rgba(27,143,206,.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 14% 10%, rgba(246,180,14,.22), transparent 0 86px),
        radial-gradient(circle at 88% 14%, rgba(27,143,206,.18), transparent 0 110px),
        repeating-linear-gradient(135deg, transparent 0 64px, rgba(27,143,206,.10) 64px 68px, transparent 68px 132px),
        #fffdfa;
    box-shadow: var(--shadow);
}
.home-app-hero::before,
.home-app-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}
.home-app-hero::before {
    width: 118%;
    height: 190px;
    left: -9%;
    top: -138px;
    border: 18px solid rgba(27,143,206,.32);
    border-bottom-color: rgba(246,180,14,.55);
}
.home-app-hero::after {
    width: 126%;
    height: 220px;
    left: -13%;
    bottom: -176px;
    border: 16px solid rgba(11,93,149,.32);
    border-top-color: rgba(246,180,14,.5);
}
.home-app-hero > * {
    position: relative;
    z-index: 1;
}
.home-download-top {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 6px 14px 6px 7px;
    border: 1px solid rgba(11, 93, 149, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: #082f55;
    font-size: .96rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(11, 93, 149, .12);
}
.home-download-top:hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.home-download-top img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.home-hero-brand {
    display: grid;
    justify-items: center;
    gap: 10px;
}
.home-cups {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 6px;
    height: 84px;
    filter: drop-shadow(0 8px 12px rgba(83, 55, 0, .22));
}
.home-cups span {
    display: block;
    width: 34px;
    height: 66px;
    border-radius: 18px 18px 8px 8px;
    background:
        radial-gradient(circle at 50% 18%, #fff2b9 0 9px, #e5bb3c 10px 18px, transparent 19px),
        linear-gradient(90deg, transparent 0 20%, #bb8615 21% 31%, transparent 32% 68%, #bb8615 69% 79%, transparent 80%),
        linear-gradient(180deg, #ffeaa5 0 18%, #d7a527 19% 72%, #6b4a12 73% 80%, #d7a527 81% 100%);
    clip-path: polygon(22% 0, 78% 0, 94% 20%, 76% 72%, 86% 100%, 14% 100%, 24% 72%, 6% 20%);
}
.home-cups span:nth-child(2) {
    width: 44px;
    height: 82px;
}
.home-cups span:nth-child(1),
.home-cups span:nth-child(3) {
    transform: scale(.88);
}
.home-hero-brand h1 {
    color: #082f55;
    font-size: clamp(3rem, 10vw, 6rem);
    letter-spacing: 0;
}
.home-hero-brand h1 span {
    font-size: .55em;
    display: block;
}
.home-stars {
    color: #d4a62a;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: .35rem;
    margin: 0 0 4px .35rem;
}
.home-tagline {
    margin: 0;
    color: #0b5d95;
    font-weight: 900;
    text-transform: uppercase;
}
.home-hero-copy h2 {
    margin: 0;
    color: #082f55;
    font-size: clamp(1.6rem, 5vw, 3rem);
    line-height: 1.05;
}
.home-hero-copy p {
    margin-inline: auto;
}
.home-action-list {
    width: min(760px, 100%);
    display: grid;
    gap: 14px;
}
.home-action-card {
    display: grid;
    grid-template-columns: 58px 1fr 42px;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 14px;
    border: 2px solid #b8d8ef;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
        linear-gradient(135deg, transparent 0 72%, rgba(27,143,206,.22) 72% 100%);
    color: #082f55;
    text-align: left;
    box-shadow: 0 12px 26px rgba(11,93,149,.12);
}
.home-action-card:hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.home-action-card strong {
    display: block;
    font-size: clamp(1.15rem, 4vw, 1.65rem);
}
.home-action-card small {
    display: block;
    color: var(--muted);
    font-size: .95rem;
}
.home-action-icon,
.home-action-card em,
.home-notice-icon {
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-style: normal;
    font-weight: 900;
}
.home-action-icon {
    width: 56px;
    height: 56px;
    background: #1b8fce;
    color: white;
    font-size: 1.8rem;
}
.home-action-card em {
    width: 40px;
    height: 40px;
    background: #1b8fce;
    color: white;
    font-size: 2rem;
}
.home-action-enter {
    border-color: #b9dfc6;
}
.home-action-enter .home-action-icon,
.home-action-enter em {
    background: #279454;
}
.home-action-board {
    border-color: #ead19b;
}
.home-action-board .home-action-icon,
.home-action-board em {
    background: #d59a20;
}
.home-notice {
    width: min(760px, 100%);
    grid-template-columns: 62px 1fr;
    align-items: center;
    text-align: left;
    border-left-width: 1px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.9)),
        linear-gradient(135deg, transparent 0 74%, rgba(27,143,206,.18) 74% 100%);
}
.home-notice-icon {
    width: 54px;
    height: 54px;
    background: #e9f6ff;
    color: #0b5d95;
    border: 2px solid #b8d8ef;
    font-size: 1.45rem;
}
.home-download-link {
    width: min(760px, 100%);
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #b8d8ef;
    border-radius: 10px;
    background: rgba(255, 255, 255, .88);
    color: #082f55;
    font-weight: 800;
    text-align: center;
}
.home-download-link a {
    color: #0b67b2;
    font-weight: 900;
}
.eyebrow {
    margin: 0 0 10px;
    color: var(--brand-dark);
    font-weight: 900;
    text-transform: uppercase;
    font-size: .82rem;
}
.notice {
    border-left: 8px solid var(--warn);
    display: grid;
    gap: 8px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 18px;
}

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat strong { display: block; font-size: 2rem; }
.stat span { color: var(--muted); }

.form { display: grid; gap: 12px; max-width: 460px; }
.settings-form {
    max-width: none;
}
.settings-section {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.settings-section h2 {
    margin: 0;
    font-size: 1.05rem;
}
.settings-details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.settings-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
    background: #f8fbf8;
}
.settings-details > summary::-webkit-details-marker { display: none; }
.settings-details > summary::after {
    content: "Abrir";
    color: var(--brand-dark);
    font-size: .82rem;
    font-weight: 900;
}
.settings-details[open] > summary::after {
    content: "Cerrar";
}
.settings-details > summary span {
    display: grid;
    gap: 3px;
}
.settings-details > summary small {
    color: var(--muted);
    font-weight: 500;
}
.settings-details .settings-section {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
}
.inline-form {
    max-width: none;
    grid-template-columns: minmax(240px, 420px) auto;
    align-items: end;
    margin-bottom: 16px;
}
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
input, textarea, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd8cf;
    border-radius: 8px;
    font: inherit;
    background: white;
}
textarea { min-height: 110px; resize: vertical; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: white;
    font-weight: 800;
    cursor: pointer;
}
.button.secondary { background: #e7eee8; color: var(--ink); }
.button.danger { background: var(--danger); }
.button:disabled {
    background: #d9e1da;
    color: #7d8a81;
    cursor: not-allowed;
    opacity: .78;
}
.form-dirty .button[data-dirty-submit] {
    background: var(--brand);
    color: #fff;
    opacity: 1;
}

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    background: #fff5d8;
    border: 1px solid #f5d079;
}
.alert.success { background: #e0f8e8; border-color: #9bd9af; }
.alert.error { background: #ffe6e3; border-color: #e8aaa3; }
.helper-highlight {
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff4c7;
    border: 1px solid #e5be45;
    color: #5b4300;
    font-weight: 800;
}
.auth-card {
    position: relative;
    overflow: hidden;
    width: min(760px, 100%);
    margin-inline: auto;
    padding: clamp(24px, 5vw, 38px);
    border: 2px solid #b8d8ef;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.9)),
        repeating-linear-gradient(135deg, transparent 0 56px, rgba(27,143,206,.10) 56px 60px, transparent 60px 116px),
        #fffdfa;
    box-shadow: 0 18px 42px rgba(11, 93, 149, .12);
}
.auth-card::before,
.auth-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.auth-card::before {
    width: 180px;
    height: 180px;
    right: -78px;
    top: -72px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(246,180,14,.34) 0 18%, transparent 19%),
        repeating-conic-gradient(from 8deg, rgba(246,180,14,.22) 0 9deg, transparent 9deg 20deg);
}
.auth-card::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: linear-gradient(90deg, #74acdf, #ffffff, #74acdf, #d4a62a);
}
.auth-card > * {
    position: relative;
    z-index: 1;
}
.auth-card h1 {
    color: #082f55;
    margin-top: 10px;
}
.auth-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #0b5d95;
    color: white;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}
.auth-card-badge::before {
    content: "★";
    color: #f4c84d;
}
.auth-card .form {
    max-width: none;
}
.auth-card .field label {
    color: #082f55;
}
.auth-card input,
.auth-card select,
.auth-card textarea {
    border-color: #b8d8ef;
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
    outline: 3px solid rgba(27,143,206,.18);
    border-color: #1b8fce;
}
.auth-card .helper-highlight {
    border-color: #e5c15d;
    background: linear-gradient(135deg, #fff6cf, #fffdf2);
}
.auth-card .button {
    box-shadow: 0 10px 22px rgba(27,143,206,.18);
}
.auth-card-enter {
    border-color: #b9dfc6;
}
.auth-card-enter::after {
    background: linear-gradient(90deg, #279454, #ffffff, #74acdf, #d4a62a);
}
.auth-card-enter .auth-card-badge,
.auth-card-enter .button {
    background: #279454;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 31, 49, .62);
}
.modal-backdrop[hidden] {
    display: none;
}
.modal {
    width: min(520px, 100%);
    background: white;
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
    padding: clamp(18px, 5vw, 28px);
}
.modal h1 { margin: 0 0 8px; }
.share-prompt-modal {
    display: grid;
    gap: 10px;
}
.share-prompt-modal p {
    margin: 0;
}
.code-box {
    margin: 18px 0;
    padding: 18px;
    text-align: center;
    border: 2px dashed var(--brand);
    border-radius: 8px;
    font-size: clamp(2rem, 12vw, 4rem);
    font-weight: 900;
    letter-spacing: .12em;
    color: var(--brand-dark);
    background: #eef8ff;
}
.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.share-invite-panel {
    display: grid;
    gap: 16px;
}
.share-invite-image {
    width: min(100%, 560px);
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.search { max-width: 360px; }
.album-save {
    position: fixed;
    top: var(--album-save-top, 10px);
    right: 10px;
    z-index: 20;
    min-height: 42px;
    padding-inline: 14px;
    box-shadow: var(--shadow);
}
.album-save[hidden] {
    display: none;
}
.album-view-toggle {
    position: fixed;
    left: 10px;
    bottom: 84px;
    z-index: 19;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: #0a7482;
    color: #fff;
    font: inherit;
    font-size: .86rem;
    font-weight: 900;
    box-shadow: var(--shadow);
    cursor: pointer;
}
.album-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 60;
    transform: translate(-50%, -50%);
    padding: 14px 20px;
    border-radius: 999px;
    background: rgba(10, 116, 82, .94);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    box-shadow: 0 18px 44px rgba(7, 22, 30, .26);
    pointer-events: none;
}
.album-toast.is-error {
    background: rgba(190, 54, 48, .96);
}
.album-toast[hidden] {
    display: none;
}
.album-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.app-album-toolbar {
    align-items: start;
}
.app-album-toolbar .album-actions {
    align-items: stretch;
    min-width: min(100%, 620px);
}
.album-tabs {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
}
.album-tabs button {
    min-height: 42px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .92rem;
    font-weight: 900;
    cursor: pointer;
}
.album-tabs button.active {
    color: var(--ink);
    border-color: #2463df;
}
.album-list-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 620px);
}
.album-list-button {
    justify-content: space-between;
    width: auto;
    min-height: 38px;
    padding: 8px 10px;
    text-align: left;
}
.album-list-button span {
    min-width: 34px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--danger);
    text-align: center;
    font-weight: 900;
}
.album-list-backdrop[hidden] {
    display: none;
}
.album-list-backdrop {
    position: fixed;
    inset: 0;
    z-index: 38;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 22, 30, .42);
}
.album-list-modal {
    width: min(620px, 100%);
    max-height: min(76vh, 680px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.album-list-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}
.album-list-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.album-list-head h2,
.album-list-head p {
    margin: 0;
}
.album-list-codes {
    min-height: 120px;
    overflow: auto;
    display: flex;
    align-content: start;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding-right: 4px;
}
.album-list-code {
    max-width: 100%;
    padding: 7px 9px;
    border-radius: 6px;
    background: #eef8ff;
    color: var(--brand-dark);
    font-weight: 900;
    overflow-wrap: anywhere;
}
.album-analyzer-button {
    background: #e8f7ef;
    color: #0b6b3c;
}
.text-analyzer-backdrop[hidden] {
    display: none;
}
.text-analyzer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 38;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 22, 30, .42);
}
.text-analyzer-modal {
    width: min(640px, 100%);
    max-height: min(84vh, 720px);
    overflow: auto;
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.text-analyzer-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}
.text-analyzer-head h2,
.text-analyzer-head p {
    margin: 0;
}
.text-analyzer-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    border-radius: 8px;
    background: #edf4f1;
}
.text-analyzer-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .9rem;
    font-weight: 900;
    cursor: pointer;
}
.text-analyzer-tabs button.active {
    background: #fff;
    color: #0b6b3c;
    box-shadow: 0 6px 16px rgba(7, 22, 30, .08);
}
[data-text-marker-modal] .text-analyzer-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.text-analyzer-modal textarea {
    width: 100%;
    min-height: 190px;
    resize: vertical;
}
.text-analyzer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.text-analyzer-actions button:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.text-analyzer-result {
    display: grid;
    gap: 10px;
    min-height: 70px;
    padding: 12px;
    border-radius: 8px;
    background: #f4f9f6;
}
.text-analyzer-result-title {
    color: var(--ink);
    font-size: 1.05rem;
}
.text-analyzer-matches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.text-analyzer-matches span {
    padding: 7px 9px;
    border-radius: 6px;
    background: #e9f7ff;
    color: var(--brand-dark);
    font-weight: 900;
}

.album-section {
    --flag-a: #ffffff;
    --flag-b: #dbe8ef;
    --flag-c: #ffffff;
    margin-bottom: 18px;
}
.album-section[open] .stickers { margin-top: 12px; }
.team-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    color: var(--ink);
    font-size: .96rem;
    list-style: none;
    user-select: none;
}
.team-heading::-webkit-details-marker { display: none; }
.team-heading::after {
    content: "Desplegar";
    margin-left: auto;
    color: var(--brand-dark);
    font-size: .82rem;
    font-weight: 800;
}
.album-section[open] .team-heading::after { content: "Plegar"; }
.album-section[open] .team-heading::after {
    margin-left: 0;
}
.team-options-button {
    display: none;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: #e7eee8;
    color: var(--brand-dark);
    font: inherit;
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
}
.album-section[open] .team-options-button {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}
.team-title {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}
.team-symbol {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 24px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #172019;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    overflow: visible;
}
.team-symbol-FWC {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eff5ff;
    font-size: .95rem;
}
.team-symbol-CC {
    width: 28px;
    height: 20px;
    background: #e41d2c;
    color: #fff;
    font-size: .62rem;
}
.team-title span {
    flex: 0 0 auto;
    color: var(--danger);
    font-weight: 900;
}
.team-heading strong {
    color: var(--ink);
    overflow-wrap: anywhere;
}
.progress-badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 6px;
    background: #ffe6e3;
    color: var(--danger);
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
}
.team-heading small {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}
.team-options-backdrop[hidden] {
    display: none;
}
.team-options-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 22, 30, .42);
}
.team-options-modal {
    width: min(460px, 100%);
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.team-options-modal h2,
.team-options-modal p {
    margin: 0;
}
.team-options-actions {
    display: grid;
    gap: 8px;
}
.album-spread {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.album-page {
    position: relative;
    overflow: hidden;
    min-height: 690px;
    border: 1px solid color-mix(in srgb, var(--flag-b) 72%, #18212a);
    border-radius: 8px;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94) 0 25%, transparent 25%),
        linear-gradient(150deg, color-mix(in srgb, var(--flag-a) 22%, #fff) 0 26%, color-mix(in srgb, var(--flag-b) 18%, #fff) 26% 62%, color-mix(in srgb, var(--flag-c) 16%, #fff) 62% 100%);
}
.album-page::before {
    content: "";
    position: absolute;
    inset: auto -14% -18% auto;
    width: 62%;
    height: 42%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--flag-a) 45%, transparent);
    pointer-events: none;
}
.album-page::after {
    content: "26";
    position: absolute;
    right: 14px;
    top: 10px;
    color: rgba(255,255,255,.5);
    font-size: clamp(4rem, 12vw, 9rem);
    font-weight: 900;
    line-height: .8;
    pointer-events: none;
}
.album-team-cover {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 12px;
    align-items: center;
    min-height: 150px;
    margin-bottom: 12px;
}
.album-team-cover p {
    margin: 0;
    color: color-mix(in srgb, var(--flag-a) 82%, #18212a);
    font-weight: 900;
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    line-height: .9;
}
.album-team-cover h2 {
    margin: 0;
    color: color-mix(in srgb, var(--flag-c) 62%, #1c2530);
    font-size: clamp(2.35rem, 7vw, 4.8rem);
    line-height: .86;
    letter-spacing: 0;
}
.album-team-cover span {
    display: block;
    max-width: 31ch;
    margin-top: 10px;
    color: color-mix(in srgb, var(--flag-b) 46%, #172019);
    font-weight: 900;
    font-size: 1.05rem;
}
.album-flag {
    width: 96px;
    aspect-ratio: 4 / 3;
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 8px 18px rgba(23,32,25,.16);
    background: linear-gradient(90deg, var(--flag-a) 0 33%, var(--flag-b) 33% 66%, var(--flag-c) 66% 100%);
}
.album-team-side {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    min-height: 70px;
    margin-bottom: 12px;
    color: #fff;
}
.album-team-side strong {
    font-size: clamp(2rem, 6vw, 4.6rem);
    line-height: .8;
}
.album-team-side span {
    max-width: 18ch;
    text-align: right;
    font-weight: 900;
    color: color-mix(in srgb, var(--flag-c) 70%, #ffffff);
}
.album-sticker-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.album-sticker-grid .sticker {
    min-height: 154px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.82)),
        color-mix(in srgb, var(--flag-b) 42%, #ffffff);
    border-color: color-mix(in srgb, var(--flag-b) 58%, #ffffff);
}
.album-sticker-grid .sticker:first-child {
    grid-column: span 1;
}
.album-page-foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    color: rgba(255,255,255,.88);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}
.album-page-foot strong {
    color: #fff;
    font-size: 1rem;
}
.stickers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}
.sticker {
    --flag-a: #ffffff;
    --flag-b: #dbe8ef;
    --flag-c: #ffffff;
    --status-ring: transparent;
    position: relative;
    overflow: hidden;
    min-height: 124px;
    border: 1px solid color-mix(in srgb, var(--flag-b) 70%, #1b2430);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--flag-a) 20%, #fff) 0 38%, color-mix(in srgb, var(--flag-b) 18%, #fff) 38% 68%, color-mix(in srgb, var(--flag-c) 20%, #fff) 68% 100%);
    padding: 8px;
    padding-top: 25px;
    display: grid;
    gap: 6px;
    align-content: end;
    box-shadow: inset 0 0 0 3px var(--status-ring);
    cursor: pointer;
}
.sticker::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg, var(--flag-a), var(--flag-b), var(--flag-c));
}
.sticker::after {
    position: absolute;
    right: 6px;
    bottom: 4px;
    color: rgba(20, 24, 26, .09);
    font-weight: 900;
    font-size: 1.05rem;
    pointer-events: none;
}
.sticker.have { --status-ring: rgba(119, 200, 148, .55); }
.sticker.missing { --status-ring: rgba(223, 147, 139, .55); }
.sticker.duplicate { --status-ring: rgba(239, 201, 80, .65); }
.sticker.duplicate::after {
    content: "R";
    inset: 5px 5px auto auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #c88900;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, .92);
    font-size: 1.35rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    box-shadow: 0 6px 14px rgba(80, 50, 0, .32);
    z-index: 3;
}
.sticker code { font-weight: 900; color: var(--ink); }
.sticker-title {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 2.2em;
    color: color-mix(in srgb, var(--flag-a) 45%, var(--ink));
    font-size: .68rem;
    line-height: 1.05;
    font-weight: 900;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.kind-emblem .sticker-title,
.kind-team_photo .sticker-title {
    color: color-mix(in srgb, var(--flag-c) 55%, var(--ink));
}
.sticker-art {
    position: absolute;
    inset: 24px 0 0;
    z-index: 0;
    width: 100%;
    height: calc(100% - 24px);
    object-fit: contain;
    background: rgba(255, 255, 255, .4);
    transition: opacity .18s ease, filter .18s ease;
}
.ball-art {
    display: none;
}
.sticker.none .sticker-art,
.sticker.missing .sticker-art {
    opacity: .24;
    filter: grayscale(.65);
}
.sticker.have .sticker-art,
.sticker.duplicate .sticker-art {
    opacity: 1;
    filter: none;
}
.sticker code,
.sticker-title,
.status-label {
    position: relative;
    z-index: 1;
}
.sticker code {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 7px 7px 0 0;
    background: rgba(255, 255, 255, .92);
    text-align: center;
    box-shadow: 0 1px 6px rgba(18, 35, 40, .12);
}
.ball-code-number::before {
    content: "";
}
.status-label {
    display: block;
    margin-top: 1px;
    padding: 4px 3px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    font-size: .68rem;
    font-weight: 900;
    text-align: center;
}
.sticker.missing .status-label {
    color: var(--danger);
    font-size: .84rem;
    font-weight: 1000;
}
.sticker.have .status-label {
    background: rgba(255, 255, 255, .2);
    color: rgba(18, 115, 58, .55);
    backdrop-filter: blur(2px);
}
.sticker.have code,
.sticker.have .sticker-title,
.sticker.have .status-label {
    display: none;
}
.sticker.have .sticker-art {
    inset: 0;
    height: 100%;
}
.album-view-ball .stickers {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 6px;
}
.album-view-ball .sticker.has-ball {
    min-height: 98px;
    padding: 4px 2px 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    align-content: start;
    justify-items: center;
    gap: 0;
}
.album-view-ball .sticker.has-ball::before,
.album-view-ball .sticker.has-ball .sticker-title,
.album-view-ball .sticker.has-ball .sticker-art {
    display: none;
}
.album-view-ball .sticker.has-ball.duplicate::after {
    inset: 0 3px auto auto;
    width: 26px;
    height: 26px;
    border-width: 2px;
    font-size: 1.05rem;
}
.album-view-ball .sticker.has-ball .ball-art {
    display: block;
    width: min(64px, 100%);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(18, 35, 40, .18));
}
.album-view-ball .sticker.has-ball.none .ball-art,
.album-view-ball .sticker.has-ball.missing .ball-art {
    opacity: .78;
    filter: grayscale(.2) drop-shadow(0 5px 8px rgba(18, 35, 40, .12));
}
.album-view-ball .sticker.has-ball.have .ball-art,
.album-view-ball .sticker.has-ball.duplicate .ball-art {
    opacity: 1;
}
.album-view-ball .sticker.has-ball code {
    inset: 15px auto auto 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 35px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(18, 24, 28, .84);
    font-size: .88rem;
    line-height: .92;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .78);
    box-shadow: none;
}
.album-view-ball .sticker.has-ball .ball-code-team,
.album-view-ball .sticker.has-ball .ball-code-number {
    display: block;
}
.album-view-ball .sticker.has-ball .ball-code-number {
    font-size: 1.05rem;
}
.album-view-ball .sticker.has-ball .status-label {
    width: min(70px, 100%);
    margin-top: -1px;
    padding: 3px 2px;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: .72rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.album-view-ball .sticker.has-ball.missing .status-label {
    color: var(--danger);
}
.album-view-ball .sticker.has-ball.have code,
.album-view-ball .sticker.has-ball.have .status-label {
    display: block;
}
.album-view-ball .sticker.has-ball.have .status-label {
    color: #0aa05f;
    font-size: .86rem;
}
.album-view-ball .sticker.has-ball .status-label::after {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1;
}
.album-view-ball .sticker.has-ball.have .status-label::after {
    content: "✓";
    border: 3px solid currentColor;
    border-radius: 50%;
}
.album-view-ball .sticker.has-ball.missing .status-label::after {
    content: "X";
    color: var(--danger);
    font-size: .95rem;
}
.album-view-ball .sticker.has-ball.duplicate .status-label::after {
    content: "+";
    color: #c88900;
    font-size: 1.22rem;
    font-weight: 1000;
}
.option-have { color: #12733a; }
.option-missing { color: var(--danger); }
.option-duplicate { color: #8a6500; }
.option-none { color: var(--muted); }

.app-panel {
    display: grid;
    gap: 26px;
}
.panel-hero {
    display: flex;
    align-items: center;
    gap: 18px;
}
.album-app-logo {
    width: 92px;
    aspect-ratio: 1;
    border-radius: 22px;
    object-fit: cover;
    background: #fff;
    box-shadow: var(--shadow);
}
.app-panel h2 {
    margin: 0;
    font-size: 1.2rem;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.summary-item {
    min-height: 118px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.summary-item:nth-child(odd) {
    padding-right: 18px;
}
.summary-item:nth-child(even) {
    padding-left: 18px;
}
.summary-item:nth-last-child(-n+2) {
    border-bottom: 0;
}
.summary-item span:not(.summary-icon):not(.summary-ring) {
    display: block;
    color: var(--ink);
    font-size: 1rem;
}
.summary-item strong {
    display: block;
    margin-top: 4px;
    font-size: 1.85rem;
}
.summary-icon {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #2463df;
}
.summary-avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid #2463df;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 8px 18px rgba(36, 99, 223, .16);
}
.settings-panel {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
.settings-panel h2,
.settings-panel p {
    margin: 0;
}
.settings-options {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fbfa;
}
.settings-actions {
    display: grid;
    gap: 10px;
}
.summary-icon::before,
.summary-icon::after {
    content: "";
    position: absolute;
    background: #fff;
}
.summary-icon::before {
    width: 18px;
    height: 24px;
    left: 23px;
    top: 15px;
    border-radius: 4px;
}
.summary-icon::after {
    width: 18px;
    height: 24px;
    left: 17px;
    top: 20px;
    border: 3px solid #fff;
    border-radius: 4px;
    background: transparent;
}
.summary-ring {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: conic-gradient(#2463df var(--progress), #e2ebff 0);
    position: relative;
}
.summary-ring::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #fff;
}
.progress-panel {
    box-shadow: none;
    background: #f0f4f8;
}
.progress-track {
    height: 16px;
    margin: 18px 0 10px;
    border-radius: 999px;
    background: #dfe7ef;
    overflow: hidden;
}
.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2463df;
}
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    min-height: 68px;
    padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 24px rgba(23, 32, 25, .08);
}
.bottom-nav a {
    display: grid;
    place-items: center;
    gap: 3px;
    color: #87919c;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}
.bottom-nav a.active {
    color: #2463df;
}
.bottom-nav-icon {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
}
.bottom-nav-icon::before,
.bottom-nav-icon::after {
    content: "";
    position: absolute;
}
.scroll-top-button {
    position: fixed;
    right: 16px;
    bottom: 86px;
    z-index: 19;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    cursor: pointer;
}
.scroll-top-button[hidden] {
    display: none;
}
.icon-album::before {
    inset: 4px 5px;
    border-radius: 3px;
    background: currentColor;
}
.icon-album::after {
    width: 8px;
    height: 16px;
    right: 3px;
    top: 5px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background: #fff;
}
.icon-panel::before {
    left: 3px;
    bottom: 4px;
    width: 5px;
    height: 12px;
    border-radius: 3px;
    background: currentColor;
    box-shadow: 9px -6px 0 currentColor, 18px -14px 0 currentColor;
}
.icon-swap::before {
    inset: 4px;
    border: 3px solid currentColor;
    border-radius: 50%;
}
.icon-swap::after {
    width: 8px;
    height: 8px;
    right: 0;
    top: 6px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: rotate(45deg);
}
.icon-settings::before {
    inset: 4px;
    border: 5px solid currentColor;
    border-radius: 50%;
}
.icon-settings::after {
    inset: 11px;
    border-radius: 50%;
    background: #fff;
}

.team-MEX { --flag-a: #006847; --flag-b: #ffffff; --flag-c: #ce1126; }
.team-RSA { --flag-a: #007a4d; --flag-b: #ffb81c; --flag-c: #de3831; }
.team-KOR { --flag-a: #ffffff; --flag-b: #cd2e3a; --flag-c: #0047a0; }
.team-CZE { --flag-a: #ffffff; --flag-b: #d7141a; --flag-c: #11457e; }
.team-CAN { --flag-a: #d52b1e; --flag-b: #ffffff; --flag-c: #d52b1e; }
.team-BIH { --flag-a: #002f6c; --flag-b: #f7d116; --flag-c: #ffffff; }
.team-QAT { --flag-a: #8a1538; --flag-b: #ffffff; --flag-c: #8a1538; }
.team-SUI { --flag-a: #d52b1e; --flag-b: #ffffff; --flag-c: #d52b1e; }
.team-BRA { --flag-a: #009b3a; --flag-b: #ffdf00; --flag-c: #002776; }
.team-MAR { --flag-a: #c1272d; --flag-b: #006233; --flag-c: #c1272d; }
.team-HAI { --flag-a: #00209f; --flag-b: #d21034; --flag-c: #ffffff; }
.team-SCO { --flag-a: #005eb8; --flag-b: #ffffff; --flag-c: #005eb8; }
.team-USA { --flag-a: #b22234; --flag-b: #ffffff; --flag-c: #3c3b6e; }
.team-PAR { --flag-a: #d52b1e; --flag-b: #ffffff; --flag-c: #0038a8; }
.team-AUS { --flag-a: #00008b; --flag-b: #ffffff; --flag-c: #e4002b; }
.team-TUR { --flag-a: #e30a17; --flag-b: #ffffff; --flag-c: #e30a17; }
.team-GER { --flag-a: #000000; --flag-b: #dd0000; --flag-c: #ffce00; }
.team-CUW { --flag-a: #002b7f; --flag-b: #f9e814; --flag-c: #ffffff; }
.team-CIV { --flag-a: #f77f00; --flag-b: #ffffff; --flag-c: #009e60; }
.team-ECU { --flag-a: #ffdd00; --flag-b: #034ea2; --flag-c: #ed1c24; }
.team-NED { --flag-a: #ae1c28; --flag-b: #ffffff; --flag-c: #21468b; }
.team-JPN { --flag-a: #ffffff; --flag-b: #bc002d; --flag-c: #ffffff; }
.team-SWE { --flag-a: #006aa7; --flag-b: #fecc00; --flag-c: #006aa7; }
.team-TUN { --flag-a: #e70013; --flag-b: #ffffff; --flag-c: #e70013; }
.team-BEL { --flag-a: #000000; --flag-b: #fae042; --flag-c: #ed2939; }
.team-EGY { --flag-a: #ce1126; --flag-b: #ffffff; --flag-c: #000000; }
.team-IRN { --flag-a: #239f40; --flag-b: #ffffff; --flag-c: #da0000; }
.team-NZL { --flag-a: #00247d; --flag-b: #ffffff; --flag-c: #cc142b; }
.team-ESP { --flag-a: #aa151b; --flag-b: #f1bf00; --flag-c: #aa151b; }
.team-CPV { --flag-a: #003893; --flag-b: #ffffff; --flag-c: #cf2027; }
.team-KSA { --flag-a: #006c35; --flag-b: #ffffff; --flag-c: #006c35; }
.team-URU { --flag-a: #ffffff; --flag-b: #0038a8; --flag-c: #fcd116; }
.team-FRA { --flag-a: #0055a4; --flag-b: #ffffff; --flag-c: #ef4135; }
.team-SEN { --flag-a: #00853f; --flag-b: #fdef42; --flag-c: #e31b23; }
.team-IRQ { --flag-a: #ce1126; --flag-b: #ffffff; --flag-c: #000000; }
.team-NOR { --flag-a: #ba0c2f; --flag-b: #ffffff; --flag-c: #00205b; }
.team-ARG { --flag-a: #74acdf; --flag-b: #ffffff; --flag-c: #f6b40e; }
.team-ALG { --flag-a: #006233; --flag-b: #ffffff; --flag-c: #d21034; }
.team-AUT { --flag-a: #ed2939; --flag-b: #ffffff; --flag-c: #ed2939; }
.team-JOR { --flag-a: #000000; --flag-b: #ffffff; --flag-c: #007a3d; }
.team-POR { --flag-a: #006600; --flag-b: #ff0000; --flag-c: #ffcc00; }
.team-COD { --flag-a: #007fff; --flag-b: #f7d618; --flag-c: #ce1021; }
.team-UZB { --flag-a: #1eb2e8; --flag-b: #ffffff; --flag-c: #009739; }
.team-COL { --flag-a: #fcd116; --flag-b: #003893; --flag-c: #ce1126; }
.team-ENG { --flag-a: #ffffff; --flag-b: #cf142b; --flag-c: #ffffff; }
.team-CRO { --flag-a: #ff0000; --flag-b: #ffffff; --flag-c: #171796; }
.team-GHA { --flag-a: #ce1126; --flag-b: #fcd116; --flag-c: #006b3f; }
.team-PAN { --flag-a: #ffffff; --flag-b: #d21034; --flag-c: #005293; }
.team-FWC { --flag-a: #112a62; --flag-b: #d4af37; --flag-c: #111111; }
.team-CC { --flag-a: #e41d2c; --flag-b: #ffffff; --flag-c: #e41d2c; }
.category-special::after { content: "FIFA"; }
.category-coca_cola::after { content: "Coca-Cola"; font-size: .82rem; font-family: Georgia, serif; }
.checkline { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; }
.checkline input { width: auto; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--muted); font-size: .88rem; }
.admin-table { min-width: 760px; }
.admin-collector-list {
    display: grid;
    gap: 10px;
}
.admin-collector-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.admin-collector-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
    background: #f8fbf8;
}
.admin-collector-summary::-webkit-details-marker { display: none; }
.admin-collector-summary::after {
    content: "Abrir";
    color: var(--brand-dark);
    font-size: .82rem;
    font-weight: 900;
}
.admin-collector-card[open] .admin-collector-summary::after {
    content: "Cerrar";
}
.admin-collector-summary span:first-child {
    display: grid;
    gap: 3px;
}
.admin-collector-summary small {
    color: var(--muted);
}
.admin-collector-body {
    display: grid;
    gap: 12px;
    padding: 12px;
}
.admin-collector-data {
    display: grid;
    gap: 0;
    margin: 0;
}
.admin-collector-data div {
    display: grid;
    grid-template-columns: minmax(82px, 28%) 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f4;
}
.admin-collector-data div:last-child {
    border-bottom: 0;
}
.admin-collector-data dt {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}
.admin-collector-data dd {
    margin: 0;
}
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-actions form { margin: 0; }
.inline-code {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 6px;
    background: #eef8ff;
    color: var(--brand-dark);
    font-weight: 900;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e7eee8;
    font-weight: 700;
    font-size: .85rem;
}
.request-dot {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}
.received-requests {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.received-requests h2 {
    margin: 0;
    font-size: 1.05rem;
}
.request-list {
    display: grid;
    gap: 10px;
}
.request-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbf8;
}
.maintenance-page {
    min-height: 68vh;
    display: grid;
    place-items: center;
}
.maintenance-card {
    width: min(560px, 100%);
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: clamp(28px, 5vw, 48px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: var(--shadow);
}
.maintenance-card img {
    width: 112px;
    aspect-ratio: 1;
    border-radius: 24px;
    object-fit: cover;
}

@media (max-width: 760px) {
    .admin-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .admin-table thead {
        display: none;
    }
    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }
    .admin-table tbody {
        display: grid;
        gap: 12px;
    }
    .admin-table tr {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(26, 42, 61, .07);
    }
    .admin-table td {
        display: grid;
        grid-template-columns: minmax(82px, 34%) 1fr;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #eef1f4;
    }
    .admin-table td:last-child {
        border-bottom: 0;
    }
    .admin-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .82rem;
        font-weight: 800;
    }
    .admin-table td[data-label="Persona"],
    .admin-table td[data-label="Mensaje"],
    .admin-table td[data-label="Acciones"] {
        grid-template-columns: 1fr;
    }
    .admin-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .admin-actions .button,
    .admin-actions button {
        width: 100%;
    }
}
.maintenance-card h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 3.4rem);
}
.maintenance-card p {
    margin: 0;
}

.empty { color: var(--muted); padding: 24px 0; }
.muted { color: var(--muted); }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.board-page {
    position: relative;
    overflow: hidden;
    border-color: #b8d8ef;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.88)),
        repeating-linear-gradient(90deg, rgba(116,172,223,.22) 0 74px, rgba(255,255,255,.44) 74px 148px);
}
.board-page::before,
.board-page::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: .16;
}
.board-page::before {
    width: 160px;
    height: 160px;
    left: -54px;
    top: 82px;
    border-radius: 999px;
    background:
        radial-gradient(circle, #f6b40e 0 22%, transparent 23%),
        repeating-conic-gradient(from 4deg, #f6b40e 0 8deg, transparent 8deg 18deg);
}
.board-page::after {
    width: 230px;
    height: 70px;
    right: -44px;
    top: 104px;
    border-radius: 999px;
    background: rgba(27,143,206,.4);
    transform: rotate(-14deg);
}
.board-page > * {
    position: relative;
    z-index: 1;
}
.board-page .toolbar {
    margin: -2px 0 18px;
    padding: 4px 2px 14px;
    border-bottom: 1px solid rgba(11, 93, 149, .14);
}
.board-page .toolbar h1 {
    color: #082f55;
}
.board-page .search input {
    border-color: rgba(27,143,206,.55);
    box-shadow: 0 6px 16px rgba(11, 93, 149, .08);
}
.swap-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 38px 14px 14px;
    background: #fff;
}
.swap-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
}
.swap-card-mine {
    width: min(760px, 100%);
    margin-inline: auto;
    border: 2px solid #1b8fce;
    border-radius: 24px 24px 12px 12px;
    background:
        linear-gradient(90deg, rgba(116,172,223,.22) 0 18%, transparent 18% 36%, rgba(116,172,223,.22) 36% 54%, transparent 54% 72%, rgba(116,172,223,.22) 72% 90%),
        #ffffff;
    box-shadow: 0 18px 36px rgba(11, 93, 149, .16);
}
.swap-card-mine::before {
    background:
        linear-gradient(135deg, transparent 0 60%, rgba(27,143,206,.16) 60% 68%, transparent 68%),
        radial-gradient(circle at 92% 18%, rgba(246,180,14,.42), transparent 0 28px, transparent 29px);
}
.swap-card-other {
    border-color: #c9dacb;
    background:
        linear-gradient(180deg, #fffdf8, #ffffff);
    box-shadow: 0 10px 24px rgba(23, 32, 25, .07);
}
.swap-card-other::before {
    background:
        linear-gradient(135deg, rgba(31,125,79,.14) 0 18%, transparent 18% 66%, rgba(246,180,14,.12) 66% 78%, transparent 78%);
}
.swap-card-other:nth-child(3n + 1)::before {
    background: linear-gradient(135deg, rgba(27,143,206,.14) 0 20%, transparent 20% 68%, rgba(12,71,113,.10) 68% 80%, transparent 80%);
}
.swap-card-other:nth-child(3n + 2)::before {
    background: linear-gradient(135deg, rgba(246,180,14,.18) 0 18%, transparent 18% 68%, rgba(195,58,50,.10) 68% 80%, transparent 80%);
}
.swap-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    padding: 7px 12px;
    background: #0b5d95;
    color: white;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: center;
}
.swap-card-other .swap-ribbon {
    background: #0b5d95;
}
.swap-card h2 { margin: 0 0 4px; }
.swap-card p { margin: 8px 0; }
.code-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    vertical-align: middle;
}
.board-code {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #eef3f0;
    color: var(--ink);
    font-weight: 900;
    font-size: .9rem;
}
.swap-card-mine .board-code {
    background: #e6f4ff;
    color: #08365e;
    border: 1px solid #b8d8ef;
}
.board-code.is-useful {
    background: #ffe6e3;
    color: var(--danger);
    box-shadow: inset 0 0 0 2px rgba(195, 58, 50, .28);
}
.board-publication {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid rgba(27,143,206,.32);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 10px 30px rgba(11, 93, 149, .08);
}
.my-board-details {
    border-width: 2px;
    border-radius: 14px;
}
.my-board-details > summary {
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, #0b5d95, #1b8fce);
    color: white;
}
.my-board-details > summary .team-title span:first-child {
    background: #ffe6e3;
    color: var(--danger);
}
.my-board-details > summary .request-dot {
    background: #f4b000;
    color: #172019;
}
.board-publication-body {
    margin-top: 12px;
    display: grid;
    gap: 14px;
}
.board-publication .swap-card {
    box-shadow: none;
}
.board-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    color: #0b5d95;
    text-transform: uppercase;
    font-size: .86rem;
    font-weight: 900;
}
.board-divider span {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(11,93,149,.42));
}
.board-divider span:last-child {
    background: linear-gradient(90deg, rgba(11,93,149,.42), transparent);
}
.board-module {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
}
.board-module-requests {
    border-color: #b8d8ef;
    background: linear-gradient(135deg, #eef8ff, #ffffff);
}
.board-module-conversations {
    border-color: #ead19b;
    background: linear-gradient(135deg, #fff7e5, #ffffff);
}
.board-module-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.board-module-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 999px;
    background: #0b5d95;
    color: white;
    font-weight: 900;
}
.board-module-conversations .board-module-icon {
    background: #d99012;
}
.board-module .empty {
    margin: 0;
    padding: 8px 0 0;
}
.match-grid {
    margin-bottom: 16px;
}
.match-card {
    position: relative;
    overflow: hidden;
    border-width: 2px;
    box-shadow: 0 12px 30px rgba(23, 32, 25, .08);
}
.match-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
}
.match-card > * {
    position: relative;
    z-index: 1;
}
.match-card h1 {
    color: #082f55;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
}
.match-card-give {
    border-color: #9bd9ff;
    background: linear-gradient(135deg, #eef8ff, #ffffff);
}
.match-card-give::before {
    background: linear-gradient(135deg, rgba(27,143,206,.4) 0 22%, transparent 22%);
}
.match-card-receive {
    border-color: #f0c76b;
    background: linear-gradient(135deg, #fff8e6, #ffffff);
}
.match-card-receive::before {
    background: linear-gradient(135deg, rgba(246,180,14,.42) 0 22%, transparent 22%);
}
.match-card .badge {
    margin: 3px;
    border: 1px solid rgba(11,93,149,.14);
    background: #fff;
}
.request-list {
    display: grid;
    gap: 10px;
}
.request-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.request-card.compact {
    grid-template-columns: 1fr auto;
    align-items: center;
}
.request-card.compact p {
    margin: 0;
}
.request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.request-actions form {
    margin: 0;
}
.thread-panel {
    display: grid;
    gap: 18px;
}
.thread-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
}
.thread-head h1 {
    margin-bottom: 4px;
}
.thread-msn-buddies {
    position: relative;
    width: 86px;
    height: 58px;
}
.thread-buddy {
    position: absolute;
    bottom: 2px;
    width: 42px;
    height: 48px;
    border-radius: 22px 22px 12px 12px;
    box-shadow: inset -5px -6px 0 rgba(0,0,0,.12), 0 6px 14px rgba(12,71,113,.16);
}
.thread-buddy::before {
    content: "";
    position: absolute;
    left: 9px;
    top: -18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: inherit;
    box-shadow: inset -4px -5px 0 rgba(0,0,0,.12);
}
.thread-buddy::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 14px;
    height: 30px;
    border-radius: 6px 6px 10px 10px;
    background:
        linear-gradient(90deg, #75c7ef 0 28%, #ffffff 28% 50%, #75c7ef 50% 78%, #ffffff 78%),
        #75c7ef;
    border: 1px solid rgba(12,71,113,.18);
}
.thread-buddy i {
    position: absolute;
    left: 11px;
    top: 25px;
    z-index: 1;
    width: 19px;
    height: 9px;
    border-radius: 50%;
    border-top: 3px solid #f0c842;
    transform: rotate(-12deg);
}
.buddy-green {
    left: 5px;
    z-index: 1;
    background: linear-gradient(135deg, #70c84b, #34a642);
}
.buddy-sky {
    right: 4px;
    z-index: 2;
    background: linear-gradient(135deg, #8fd5ff, #3c9fe4);
}
.thread-match-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.thread-match-grid > div,
.thread-contact-box {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fbfa;
}
.thread-match-grid.is-empty {
    gap: 8px;
}
.thread-match-grid > div.is-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 0;
    padding: 9px 10px;
}
.thread-match-grid h2 {
    margin-top: 0;
}
.thread-match-grid > div.is-empty h2,
.thread-match-grid > div.is-empty p {
    margin: 0;
}
.thread-match-grid > div.is-empty h2 {
    font-size: 1rem;
}
.thread-match-grid > div.is-empty p {
    font-size: .9rem;
}
.thread-messages {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #b7cde1;
    border-radius: 8px;
    background:
        linear-gradient(#fafdff, #edf6ff 56%, #f8fbff),
        #f8fbff;
    box-shadow: inset 0 1px 0 #fff;
}
.thread-messages h2 {
    margin: 0 0 2px;
    padding: 6px 10px;
    border: 1px solid #c8d9e8;
    border-radius: 6px;
    background: linear-gradient(#ffffff, #e8f3ff);
    color: #0c4771;
    font-size: 1rem;
}
.thread-message-row {
    display: grid;
    grid-template-columns: 36px minmax(0, min(70%, 560px));
    gap: 8px;
    align-items: end;
}
.thread-message-row.is-mine {
    grid-template-columns: minmax(0, min(70%, 560px)) 36px;
    justify-content: end;
}
.thread-message-row.is-mine .thread-avatar {
    grid-column: 2;
    background: linear-gradient(135deg, #8fd5ff, #1b8fce);
}
.thread-message-row.is-mine .thread-message {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    border-color: #9fc7ea;
    background: linear-gradient(#f6fbff, #dff0ff);
}
.thread-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(12,71,113,.24);
    border-radius: 50%;
    background: linear-gradient(135deg, #8bd467, #2f9e44);
    color: white;
    font-weight: 900;
    box-shadow: inset -3px -4px 0 rgba(0,0,0,.12);
}
.thread-message {
    padding: 10px 12px;
    border: 1px solid #cfdde8;
    border-radius: 8px;
    background: linear-gradient(#ffffff, #f5f8fb);
    box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(12,71,113,.08);
}
.thread-message p {
    margin: 5px 0;
    overflow-wrap: anywhere;
}
.thread-message span {
    color: var(--muted);
    font-size: .84rem;
}
.thread-form textarea {
    min-height: 96px;
}
.thread-contact-box {
    display: grid;
    gap: 8px;
}

.footer {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto 26px;
    padding: 14px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    border-top: 1px solid var(--line);
}
.footer strong { color: var(--brand-dark); }
.footer a {
    color: var(--brand-dark);
    font-weight: 800;
}
.feedback-trigger {
    flex-basis: 100%;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-dark);
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}
.feedback-trigger:hover { text-decoration: underline; }
.feedback-modal textarea { min-height: 150px; }
.legal-page {
    max-width: 840px;
    margin-inline: auto;
}
.legal-page h1 {
    margin-top: 0;
}
.legal-page h2 {
    margin: 24px 0 8px;
    font-size: 1.15rem;
}
.legal-page p {
    line-height: 1.65;
}

@media (max-width: 760px) {
    .topbar {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
        padding: 10px 10px 8px;
    }
    .brand {
        grid-column: 1;
        font-size: 1.05rem;
    }
    .nav {
        grid-column: 1;
        justify-self: stretch;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 4px;
        overflow: visible;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
    .nav a {
        flex: 1 1 0;
        min-width: 0;
        padding: 7px 4px;
        font-size: clamp(.72rem, 2.7vw, .86rem);
        text-align: center;
        white-space: nowrap;
    }
    .hero, .grid.two, .stats { grid-template-columns: 1fr; }
    .home-app-hero {
        margin: -4px -2px 0;
        padding: 10px 12px 34px;
        border-radius: 0;
    }
    .home-download-top {
        min-height: 38px;
        padding: 5px 12px 5px 6px;
        font-size: .9rem;
    }
    .home-download-top img {
        width: 28px;
        height: 28px;
    }
    .home-hero-brand h1 {
        font-size: clamp(3.2rem, 15vw, 4.6rem);
    }
    .home-cups {
        height: 76px;
    }
    .home-cups span {
        width: 30px;
        height: 58px;
    }
    .home-cups span:nth-child(2) {
        width: 40px;
        height: 74px;
    }
    .home-action-card {
        grid-template-columns: 48px 1fr 34px;
        min-height: 82px;
        padding: 12px;
    }
    .home-action-icon {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }
    .home-action-card em {
        width: 34px;
        height: 34px;
        font-size: 1.6rem;
    }
    .home-notice {
        grid-template-columns: 48px 1fr;
        padding: 14px;
    }
    .home-notice-icon {
        width: 44px;
        height: 44px;
    }
    .text-analyzer-modal {
        max-height: 88vh;
        padding: 14px;
    }
    .text-analyzer-head {
        display: grid;
    }
    .text-analyzer-modal textarea {
        min-height: 220px;
    }
    .auth-card {
        padding: 22px 16px 28px;
        border-radius: 12px;
    }
    .inline-form { grid-template-columns: 1fr; }
    .table { display: block; overflow-x: auto; }
    .album-spread { grid-template-columns: 1fr; }
    .album-page { min-height: auto; }
    .album-team-cover { grid-template-columns: 1fr; }
    .album-sticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stickers { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
    .album-actions {
        width: 100%;
        justify-content: stretch;
        align-items: stretch;
    }
    .album-actions .search {
        flex: 1 1 100%;
        max-width: none;
    }
    .album-list-actions {
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .album-list-button {
        min-width: 0;
        padding: 8px 6px;
        font-size: clamp(.7rem, 2.8vw, .86rem);
    }
    .album-list-head {
        align-items: stretch;
        flex-direction: column;
    }
    .album-list-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .album-list-head .button {
        width: 100%;
    }
    .footer { flex-direction: column; }
    .modal-actions .button { width: 100%; }
    .board-page {
        padding: 14px 12px;
    }
    .board-page::before {
        left: -92px;
        top: 110px;
    }
    .board-page::after {
        right: -110px;
    }
    .swap-card-mine {
        border-radius: 16px 16px 10px 10px;
    }
    .my-board-details > summary {
        padding: 9px 10px;
    }
    .board-divider {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .board-divider span {
        display: none;
    }
    .thread-head,
    .request-card.compact,
    .thread-match-grid {
        grid-template-columns: 1fr;
    }
    .thread-head {
        display: grid;
    }
    .thread-msn-buddies {
        order: -1;
        justify-self: center;
    }
    .thread-message-row,
    .thread-message-row.is-mine {
        grid-template-columns: 30px minmax(0, 1fr);
    }
    .thread-message-row.is-mine {
        grid-template-columns: minmax(0, 1fr) 30px;
    }
    .thread-avatar {
        width: 30px;
        height: 30px;
        font-size: .9rem;
    }
}

@media (min-width: 761px) {
    body:has(.bottom-nav) {
        padding-bottom: 0;
    }
    .bottom-nav {
        display: none;
    }
}

@media (max-width: 760px) {
    .topbar .nav {
        display: none;
    }
    .topbar {
        position: sticky;
        top: 0;
        z-index: 18;
        background: rgba(255, 255, 255, .96);
        color: var(--ink);
        box-shadow: 0 1px 0 var(--line);
    }
    .brand {
        color: var(--ink);
    }
    .container {
        width: min(100% - 24px, 720px);
        margin-top: 18px;
    }
    .app-page-head h1 {
        font-size: 1.7rem;
    }
    .toolbar {
        align-items: stretch;
    }
    .app-album-toolbar .album-actions {
        min-width: 100%;
    }
    .album-tabs {
        order: -1;
    }
    .album-tabs button {
        font-size: .82rem;
    }
    .album-section.panel {
        padding: 12px 0;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .team-heading {
        padding: 0 2px;
    }
    .stickers {
        grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    }
    .summary-grid {
        grid-template-columns: 1fr 1fr;
    }
    .summary-item {
        min-height: 104px;
        gap: 12px;
    }
    .summary-item:nth-child(odd),
    .summary-item:nth-child(even) {
        padding-left: 0;
        padding-right: 8px;
    }
    .summary-item strong {
        font-size: 1.55rem;
    }
    .summary-icon,
    .summary-ring,
    .summary-avatar {
        width: 48px;
        height: 48px;
    }
    .album-app-logo {
        width: 78px;
        border-radius: 18px;
    }
}