/* Account pages: Profile + My Submissions, Admin Console. Same visual language as the list: dark panels, purple outline,
   "★ ❱" headings, pill buttons. */
.page-account {
    display: block;
    width: 100%;
    padding: 1.2rem 1.5rem 3rem;
    overflow-y: auto;
}
.page-account .account-wrap {
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-account .account-card {
    background: linear-gradient(180deg, #100b19 0%, #08060d 100%);
    border: 1.5px solid rgba(161, 19, 251, 0.45);
    border-radius: 0.9rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.45);
}
.page-account .account-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 0.8rem;
}
.page-account .account-title .motif {
    color: #d9a9ff;
    letter-spacing: 0.1em;
    margin-right: 0.2rem;
}
.page-account .account-note {
    opacity: 0.8;
    line-height: 1.45;
    margin: 0 0 0.8rem;
}
.page-account .account-gate {
    text-align: center;
    padding: 2rem 1.25rem;
}
.page-account .account-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-account .account-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 0.9rem;
    object-fit: cover;
    border: 1.5px solid rgba(217, 169, 255, 0.5);
}
.page-account .account-head-text {
    flex: 1 1 10rem;
    min-width: 0;
}
.page-account .account-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-account .account-sub {
    opacity: 0.7;
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
}
.page-account .account-counts {
    display: flex;
    gap: 0.6rem;
}
.page-account .account-counts div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.page-account .account-counts b {
    font-size: 1.2rem;
}
.page-account .account-counts span {
    font-size: 0.7rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.page-account .account-tabs {
    display: flex;
    gap: 0.5rem;
}
.page-account .account-tab,
.page-account .account-chip,
.page-account .account-btn {
    font-family: "Lexend Deca", sans-serif;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    border-radius: 0.6rem;
    border: 1.5px solid rgba(150, 62, 235, 0.55);
    background: rgba(255, 255, 255, 0.06);
    transition: background-color 120ms ease, border-color 120ms ease;
}
.page-account .account-tab {
    padding: 0.55rem 1.1rem;
}
.page-account .account-tab:hover,
.page-account .account-chip:hover,
.page-account .account-btn:hover:not(:disabled) {
    background: rgba(161, 19, 251, 0.35);
}
.page-account .account-tab--on,
.page-account .account-chip--on {
    background: linear-gradient(90deg, #8811cc, #c455f0);
    border-color: rgba(217, 169, 255, 0.8);
}
.page-account .account-btn {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    text-decoration: none;
}
.page-account .account-btn:disabled {
    opacity: 0.45;
    cursor: default;
}
.page-account .account-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.page-account .account-row {
    display: flex;
    gap: 0.6rem;
}
.page-account .account-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 0.6rem;
    border: 1.5px solid rgba(150, 62, 235, 0.55);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-family: "Lexend Deca", sans-serif;
}
.page-account .account-input:focus {
    outline: none;
    border-color: #d9a9ff;
}
.page-account .account-hint {
    opacity: 0.7;
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}
.page-account .account-hint--bad {
    color: #ff7a93;
    opacity: 1;
}
.page-account .account-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.page-account .account-chip {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}
.page-account .account-chip b {
    margin-left: 0.25rem;
    opacity: 0.8;
}
.page-account .account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.page-account .account-item {
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    border: 1.5px solid rgba(150, 62, 235, 0.45);
    background: rgba(255, 255, 255, 0.04);
}
.page-account .account-item-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.page-account .account-item-id {
    opacity: 0.6;
    font-size: 0.85rem;
}
.page-account .account-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-account .account-item-meta {
    opacity: 0.6;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}
.page-account .account-item-reason {
    margin: 0.4rem 0 0;
    color: #ff9fb0;
    font-size: 0.88rem;
}
.page-account .account-pill {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.page-account .account-pill--pending { color: #ffcf4d; }
.page-account .account-pill--accepted { color: #46e083; }
.page-account .account-pill--rejected { color: #ff7a93; }

/* ---- Submit page ---- */
.page-account .sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
}
.page-account .sub-field {
    min-width: 0;
}
.page-account .sub-field--wide {
    grid-column: 1 / -1;
}
.page-account .sub-opt {
    font-weight: 400;
    opacity: 0.6;
    font-size: 0.8rem;
}
.page-account select.account-input {
    appearance: none;
    cursor: pointer;
}
.page-account .sub-file {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.page-account .sub-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.page-account .sub-link {
    background: none;
    border: none;
    color: #d9a9ff;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}
.page-account .sub-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}
.page-account .sub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.page-account .sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.3rem 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(161, 19, 251, 0.25);
    border: 1.5px solid rgba(150, 62, 235, 0.6);
    font-size: 0.9rem;
}
.page-account .sub-chip button {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}
.page-account .sub-chip button:hover {
    background: rgba(255, 90, 120, 0.6);
}
.page-account .sub-pick {
    position: relative;
}
.page-account .sub-menu {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(100% + 0.3rem);
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: #0c0814;
    border: 1.5px solid rgba(150, 62, 235, 0.6);
    border-radius: 0.7rem;
    box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.6);
    max-height: 15rem;
    overflow-y: auto;
}
.page-account .sub-menu li {
    padding: 0.45rem 0.7rem;
    border-radius: 0.5rem;
    cursor: pointer;
}
.page-account .sub-menu li:hover {
    background: rgba(161, 19, 251, 0.35);
}
.page-account .sub-actions {
    margin-top: 1.1rem;
}
.page-account .account-btn--primary {
    background: linear-gradient(90deg, #8811cc, #c455f0);
    border-color: rgba(217, 169, 255, 0.8);
}
@media (max-width: 40rem) {
    .page-account .sub-grid { grid-template-columns: 1fr; }
}

.page-account .sub-field .account-input,
.page-account .sub-pick .account-input {
    width: 100%;
    box-sizing: border-box;
}
.page-account .sub-field .account-row .account-input {
    width: auto;
}
.page-account .sub-field .account-label {
    margin-bottom: 0.35rem;
}

/* ---- Profile: header extras, stats ---- */
.page-account .account-head { position: relative; }
.page-account .account-gear {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    border: 1.5px solid rgba(150, 62, 235, 0.55);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 120ms ease, transform 0.4s ease;
}
.page-account .account-gear svg { width: 1.4rem; height: 1.4rem; }
.page-account .account-gear:hover { background: rgba(161, 19, 251, 0.35); transform: rotate(45deg); }
.page-account .account-yt { color: #d9a9ff; text-decoration: none; display: inline-block; }
.page-account .account-yt:hover { text-decoration: underline; }
.page-account .account-tab--cta {
    margin-left: auto;
    text-decoration: none;
    background: linear-gradient(90deg, #8811cc, #c455f0);
    border-color: rgba(217, 169, 255, 0.8);
}
.page-account .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.7rem;
}
.page-account .stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(150, 62, 235, 0.45);
}
.page-account .stat-tile b { font-size: 1.5rem; line-height: 1.1; }
.page-account .stat-tile b i { font-style: normal; font-size: 0.95rem; opacity: 0.7; font-weight: 600; }
.page-account .stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #d9a9ff;
}
.page-account .stat-tile--big {
    background: linear-gradient(135deg, rgba(136, 17, 204, 0.55), rgba(196, 85, 240, 0.35));
    border-color: rgba(217, 169, 255, 0.7);
}
.page-account .stat-tile--big b { font-size: 2rem; }
.page-account .stat-tile--wide { grid-column: span 2; }

/* ---- My Submissions rows: the level's thumbnail behind a dark fade, status and list position at the right (like AREDL) ---- */
.page-account .sub-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.page-account .sub-row {
    border-radius: 0.8rem;
    border: 1.5px solid rgba(150, 62, 235, 0.5);
    background: #0b0812;
    overflow: hidden;
    transition: border-color 140ms ease, transform 140ms ease;
}
.page-account .sub-row:hover { border-color: #d9a9ff; transform: translateX(3px); }
.page-account .sub-row--accepted { border-left: 4px solid #46e083; }
.page-account .sub-row--pending { border-left: 4px solid #ffcf4d; }
.page-account .sub-row--rejected { border-left: 4px solid #ff4057; }
.page-account .sub-row-main {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    min-height: 4.4rem;
    background: none;
    border: none;
    color: #fff;
    font-family: "Lexend Deca", sans-serif;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.page-account .sub-row-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    opacity: 0.55;
    z-index: 0;
}
.page-account .sub-row-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(8, 6, 13, 0.96) 0%, rgba(8, 6, 13, 0.78) 45%, rgba(8, 6, 13, 0.45) 100%);
}
.page-account .sub-row-left,
.page-account .sub-row-right {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}
.page-account .sub-row-id { opacity: 0.55; font-size: 0.85rem; }
.page-account .sub-row-text { display: flex; flex-direction: column; min-width: 0; }
.page-account .sub-row-title {
    font-size: 1.1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-account .sub-row-meta { font-size: 0.78rem; opacity: 0.65; }
.page-account .sub-row-pos {
    font-size: 1.35rem;
    font-weight: 800;
    color: #d9a9ff;
    min-width: 2.6rem;
    text-align: right;
}
.page-account .sub-row-chev { opacity: 0.6; transition: transform 160ms ease; }
.page-account .sub-row--open .sub-row-chev { transform: rotate(90deg); }
.page-account .sub-row-detail {
    padding: 0.9rem 1.1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
.page-account .sub-row-reason { color: #ff9fb0; margin: 0 0 0.7rem; }
.page-account .sub-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1rem;
    margin: 0 0 0.9rem;
}
.page-account .sub-detail-grid dt { opacity: 0.6; font-size: 0.85rem; }
.page-account .sub-detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.page-account .sub-detail-grid a { color: #d9a9ff; }

/* ---- Settings pop-up ---- */
.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: rgba(4, 2, 8, 0.7);
    padding: 1rem;
}
.settings-modal {
    position: relative;
    width: min(34rem, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #120b1d 0%, #08060d 100%);
    border: 1.5px solid rgba(161, 19, 251, 0.6);
    border-radius: 1rem;
    padding: 1.2rem 1.3rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.7), 0 0 1.6rem rgba(161, 19, 251, 0.25);
    color: #fff;
    font-family: "Lexend Deca", sans-serif;
}
.settings-modal .account-title { margin-top: 0; }
.settings-modal .motif { color: #d9a9ff; letter-spacing: 0.1em; }
.settings-close {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
}
.settings-close:hover { background: rgba(255, 90, 120, 0.6); }
.settings-scroll { overflow-y: auto; margin: 0 -0.4rem; padding: 0 0.4rem; }
.settings-group { margin-bottom: 1rem; }
.settings-group h3 {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d9a9ff;
}
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    cursor: pointer;
}
.switch-row:hover { background: rgba(161, 19, 251, 0.15); }
.switch-text { display: flex; flex-direction: column; gap: 0.1rem; }
.switch-text small { opacity: 0.6; font-size: 0.78rem; }
.switch { position: relative; flex: 0 0 auto; width: 2.7rem; height: 1.5rem; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 2; }
.switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transition: background-color 160ms ease;
}
.switch i::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 160ms ease;
}
.switch input:checked + i { background: linear-gradient(90deg, #8811cc, #c455f0); }
.switch input:checked + i::after { transform: translateX(1.2rem); }
.settings-actions { margin-top: 0.9rem; }

.page-account,
.page-account b,
.page-account i,
.page-account span,
.page-account dt,
.page-account dd,
.page-account h1,
.page-account h2,
.page-account h3,
.page-account p {
    font-family: "Lexend Deca", sans-serif;
}
.page-account b { font-weight: 700; }

/* ---- Admin Console ---- */
.page-admin .admin-wrap { width: 100%; max-width: 76rem; margin: 0 auto; }
.page-admin .admin-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: 1rem;
    align-items: start;
}
.page-admin .admin-queue { position: sticky; top: 0.5rem; max-height: calc(100vh - 7rem); display: flex; flex-direction: column; }
.page-admin .admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.page-admin .admin-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-radius: 0.7rem;
    border: 1.5px solid rgba(150, 62, 235, 0.45);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: "Lexend Deca", sans-serif;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.page-admin .admin-item:hover { border-color: #d9a9ff; transform: translateX(3px); }
.page-admin .admin-item--on {
    background: linear-gradient(90deg, rgba(136, 17, 204, 0.55), rgba(196, 85, 240, 0.25));
    border-color: #d9a9ff;
}
.page-admin .admin-item-top { display: flex; align-items: center; justify-content: space-between; }
.page-admin .admin-item-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-admin .admin-item-meta { font-size: 0.78rem; opacity: 0.65; }
.page-admin .admin-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-admin .admin-thumb {
    position: relative;
    display: block;
    margin: 0 0 0.9rem;
    border-radius: 0.8rem;
    overflow: hidden;
    border: 1.5px solid rgba(150, 62, 235, 0.55);
    max-width: 26rem;
    text-decoration: none;
    color: #fff;
}
.page-admin .admin-thumb img { display: block; width: 100%; }
.page-admin .admin-thumb span {
    position: absolute;
    left: 0.7rem;
    bottom: 0.6rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(8, 6, 13, 0.8);
    font-weight: 600;
    font-size: 0.85rem;
}
.page-admin .admin-reason { width: 100%; box-sizing: border-box; resize: vertical; margin-bottom: 0.6rem; }
.page-admin .admin-ask { margin-top: 0.4rem; }
.page-account .account-btn--danger {
    background: linear-gradient(90deg, #a1122c, #e04058);
    border-color: rgba(255, 150, 165, 0.8);
}
@media (max-width: 52rem) {
    .page-admin .admin-layout { grid-template-columns: 1fr; }
    .page-admin .admin-queue { position: static; max-height: none; }
}

/* ======== Polish pass (after the design review): match the list's conventions ======== */
/* Panels: the list's dark cards - tighter radius, softer shadow, a clearer purple edge, a thin rule under headings. */
.page-account .account-card {
    border-radius: 0.75rem;
    border-color: rgba(136, 17, 204, 0.7);
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.4);
}
.page-account .account-title {
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(217, 169, 255, 0.2);
}
.page-account .account-avatar { border-radius: 0.75rem; }

/* Buttons, tabs, chips: the thin conic ring of the "Open in GDBrowser" button; hover = brighten + a slight grow. */
.page-account .account-btn,
.page-account .account-tab,
.page-account .account-chip {
    --ring-angle: 168deg;
    border: 1.5px solid transparent;
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, #0e0e18, #16141f) padding-box,
        conic-gradient(from var(--ring-angle), #8811cc 0%, #8811cc 70%, #d9a9ff 78%, #8811cc 82%) border-box;
    color: #cb8bff;
    transition: filter 140ms ease, transform 140ms ease;
}
.page-account .account-btn:hover:not(:disabled),
.page-account .account-tab:hover,
.page-account .account-chip:hover {
    background:
        linear-gradient(135deg, #0e0e18, #16141f) padding-box,
        conic-gradient(from var(--ring-angle), #8811cc 0%, #8811cc 70%, #d9a9ff 78%, #8811cc 82%) border-box;
    filter: brightness(1.2);
    transform: scale(1.04);
}
.page-account .account-tab--on,
.page-account .account-chip--on {
    color: #fff;
    background:
        linear-gradient(135deg, #1b0f2b, #261640) padding-box,
        conic-gradient(from var(--ring-angle), #8811cc 0%, #8811cc 70%, #d9a9ff 78%, #8811cc 82%) border-box;
    box-shadow: inset 0 -2px 0 #d9a9ff;
}
.page-account .account-btn--primary,
.page-account .account-tab--cta {
    color: #fff;
    border-color: rgba(217, 169, 255, 0.85);
    background: linear-gradient(90deg, #8811cc, #c455f0);
}
.page-account .account-btn--primary:hover:not(:disabled),
.page-account .account-tab--cta:hover {
    background: linear-gradient(90deg, #8811cc, #c455f0);
}
.page-account .account-btn--danger {
    color: #fff;
    border-color: rgba(255, 150, 165, 0.85);
    background: linear-gradient(90deg, #a1122c, #e04058);
}
.page-account .account-btn--danger:hover:not(:disabled) {
    background: linear-gradient(90deg, #a1122c, #e04058);
}
.page-account .account-input {
    border-radius: 0.5rem;
    border: 1.5px solid rgba(136, 17, 204, 0.7);
}
.page-account .account-input:focus { box-shadow: 0 0 0 3px rgba(217, 169, 255, 0.2); }
.page-account .account-input--bad { border-color: #ff7a93; }

/* Keyboard focus, everywhere on these pages */
.page-account button:focus-visible,
.page-account a:focus-visible,
.page-account select:focus-visible,
.settings-modal button:focus-visible {
    outline: 2px solid #d9a9ff;
    outline-offset: 2px;
}

/* Header counts: same tiles as the stats */
.page-account .account-counts div {
    background: rgba(136, 17, 204, 0.12);
    border: 1.5px solid rgba(136, 17, 204, 0.55);
    border-radius: 0.5rem;
}

/* AREDL-style rows: thumbnail at full strength under one clean fade; status = a thin inner stripe; position large at the end. */
.page-account .sub-row { border-radius: 0.5rem; border-width: 1.5px; }
.page-account .sub-row--accepted,
.page-account .sub-row--pending,
.page-account .sub-row--rejected { border-left-width: 1.5px; }
.page-account .sub-row--accepted { box-shadow: inset 3px 0 0 #46e083; }
.page-account .sub-row--pending { box-shadow: inset 3px 0 0 #ffcf4d; }
.page-account .sub-row--rejected { box-shadow: inset 3px 0 0 #ff4057; }
.page-account .sub-row-bg {
    opacity: 1;
    background-color: #120b1d;
    background-image: linear-gradient(135deg, #1a1026, #0b0812);
    background-position: center 35%;
}
.page-account .sub-row-main::before {
    background: linear-gradient(90deg, #08060d 0%, rgba(8, 6, 13, 0.85) 40%, rgba(8, 6, 13, 0.35) 100%);
}
.page-account .sub-row-pos { font-size: 1.6rem; min-width: 3rem; order: 3; }
.page-account .sub-row-right .account-pill { order: 1; }
.page-account .sub-row-chev { order: 4; }
.page-account .account-pill { background: color-mix(in srgb, currentColor 14%, transparent); }
.page-account .account-item, .page-account .admin-item, .page-account .stat-tile { border-radius: 0.5rem; }

/* Settings pop-up and menus: the same #0b0812 as the top-bar pop-ups */
.settings-modal { background: #0b0812; border-radius: 0.75rem; }
.page-account .sub-menu { background: #0b0812; border-radius: 0.5rem; }

/* Admin thumbnail */
.page-admin .admin-thumb { width: 100%; max-width: 30rem; aspect-ratio: 16 / 9; }
.page-admin .admin-thumb img { height: 100%; object-fit: cover; }
.page-admin .admin-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 13, 0.15);
    transition: background-color 140ms ease;
}
.page-admin .admin-thumb:hover::after { background: rgba(8, 6, 13, 0.5); }
.page-admin .admin-thumb span { z-index: 2; }
.page-admin .admin-item--pending { box-shadow: inset 3px 0 0 #ffcf4d; }

/* Skeleton rows while loading + the Submit page's drop zone and preview */
@keyframes account-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.page-account .sub-skeleton {
    height: 4.4rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: account-shimmer 1.4s linear infinite;
}
.page-account .sub-preview {
    margin-top: 0.6rem;
    max-width: 16rem;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1.5px solid rgba(136, 17, 204, 0.7);
}
.page-account .sub-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Small screens */
@media (max-width: 40rem) {
    .page-account { padding: 0.8rem 0.8rem 2.5rem; }
    .page-account .account-counts { width: 100%; justify-content: space-between; }
    .page-account .stat-tile--wide { grid-column: auto; }
    .page-account .account-tabs { overflow-x: auto; }
    .page-account .sub-row-main { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .page-account .sub-skeleton { animation: none; }
}

/* ======== AREDL-style submit layout + previous-submission rows ======== */
.page-submit .account-wrap { max-width: 78rem; }
.page-submit .submit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: 1rem;
    align-items: start;
}
.page-submit .submit-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.page-submit .submit-guidelines { position: sticky; top: 0.5rem; }
.page-submit .guide-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.page-submit .guide-list li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-left: 1rem;
    position: relative;
    line-height: 1.4;
}
.page-submit .guide-list li::before {
    content: "❱";
    position: absolute;
    left: 0;
    color: #d9a9ff;
    font-size: 0.7rem;
    top: 0.2rem;
}
.page-submit .guide-list em { font-style: normal; font-weight: 700; color: #d9a9ff; }
.page-submit .guide-list small { opacity: 0.65; }
.page-submit .guide-list a { color: #d9a9ff; }
@media (max-width: 62rem) {
    .page-submit .submit-layout { grid-template-columns: 1fr; }
    .page-submit .submit-guidelines { position: static; }
}

.prev-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.prev-filter { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; opacity: 0.9; }
.prev-filter span { font-weight: 600; opacity: 0.75; }
.prev-filter select { min-width: 7.5rem; padding: 0.4rem 0.6rem; }
.prev-pager { margin-left: auto; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.prev-pager .account-btn { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.prev-pager .prev-page--on { color: #fff; box-shadow: inset 0 -2px 0 #d9a9ff; }

.page-account .sub-row-main { min-height: 4.8rem; padding: 0.7rem 1.1rem; }
.page-account .sub-row-title {
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
    white-space: normal;
    line-height: 1.15;
}
.page-account .sub-row-id { font-size: 1.25rem; font-weight: 800; opacity: 0.9; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.page-account .sub-row-meta { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.page-account .sub-row-updated {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.page-account .sub-row-updated small { font-size: 0.7rem; opacity: 0.8; }
.page-account .sub-row-updated b { font-size: 1.05rem; }
.page-account .sub-row-bg { opacity: 1; }
.page-account .sub-row-main::before {
    background: linear-gradient(90deg, rgba(8, 6, 13, 0.92) 0%, rgba(8, 6, 13, 0.6) 45%, rgba(8, 6, 13, 0.25) 100%);
}
.page-account .account-pill {
    background-color: rgba(8, 6, 13, 0.75);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    border-width: 1.5px;
}
@media (max-width: 40rem) {
    .page-account .sub-row-updated small { display: none; }
}

/* ---- Admin: Levels tab ---- */
.page-admin .admin-sections { margin-bottom: 0.2rem; }
.page-admin .admin-sections b { margin-left: 0.3rem; color: #ffcf4d; }
.lvl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.lvl-h { margin: 1rem 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; color: #d9a9ff; }
.lvl-add, .lvl-edit, .lvl-remove {
    padding: 0.9rem 1rem;
    margin: 0.4rem 0 0.8rem;
    border-radius: 0.5rem;
    border: 1.5px solid rgba(136, 17, 204, 0.55);
    background: rgba(255, 255, 255, 0.03);
}
.lvl-add .lvl-h:first-child { margin-top: 0; }
.lvl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.lvl-item {
    border-radius: 0.5rem;
    border: 1.5px solid rgba(136, 17, 204, 0.45);
    background: #0b0812;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.lvl-item:hover { border-color: #d9a9ff; }
.lvl-item--drag { opacity: 0.4; }
.lvl-item--over { border-color: #ffcf4d; box-shadow: 0 -3px 0 #ffcf4d; }
.lvl-item--moved { background: linear-gradient(90deg, rgba(136, 17, 204, 0.35), rgba(11, 8, 18, 1) 60%); }
.lvl-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; }
.lvl-handle { cursor: grab; opacity: 0.5; letter-spacing: -0.15em; user-select: none; }
.lvl-pos {
    width: 3rem;
    text-align: center;
    padding: 0.25rem 0.2rem;
    border-radius: 0.4rem;
    border: 1.5px solid rgba(136, 17, 204, 0.7);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 700;
}
.lvl-pos:focus { outline: none; border-color: #d9a9ff; }
.lvl-name { font-weight: 700; flex: 0 1 auto; white-space: nowrap; }
.lvl-meta { flex: 1 1 auto; min-width: 0; opacity: 0.6; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.lvl-actions .account-btn { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.rec-table { display: flex; flex-direction: column; gap: 0.4rem; }
.rec-row { display: grid; grid-template-columns: 1.4fr 4rem 4.5rem 2fr auto; gap: 0.4rem; align-items: center; }
.rec-row--head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.6; }
.rec-row .account-input { width: 100%; box-sizing: border-box; padding: 0.35rem 0.5rem; }
.rec-actions { display: flex; gap: 0.3rem; }
.rec-actions .account-btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.lvl-savebar {
    position: sticky;
    bottom: 0.6rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    border: 1.5px solid #ffcf4d;
    background: #0b0812;
    box-shadow: 0 0 1.2rem rgba(255, 207, 77, 0.35);
}
.lvl-savebar span { flex: 1 1 auto; }
.lvl-save { animation: lvl-pulse 1.8s ease-in-out infinite; }
@keyframes lvl-pulse { 50% { filter: brightness(1.35); } }
@media (max-width: 52rem) { .rec-row { grid-template-columns: 1fr 1fr; } .rec-row--head { display: none; } .lvl-row { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .lvl-save { animation: none; } }

/* Admin: the batch banner opened from "N submissions were added to the list" */
.page-admin .admin-batch { margin-bottom: 1rem; border-color: #ffcf4d; }
.page-admin .batch-lines { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.page-admin .batch-lines li { padding: 0.4rem 0.7rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.05); border-left: 3px solid #46e083; }
.page-admin .batch-lines b { opacity: 0.6; margin-right: 0.3rem; }

/* Profile: score / rank history */
.page-account .hist-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1rem; }
.page-account .hist-wrap > .account-hint { grid-column: 1 / -1; }
.page-account .hist-card {
    padding: 0.7rem 0.9rem 0.5rem;
    border-radius: 0.5rem;
    border: 1.5px solid rgba(136, 17, 204, 0.55);
    background: rgba(255, 255, 255, 0.03);
}
.page-account .hist-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.3rem; }
.page-account .hist-head b { font-size: 1.15rem; }
.page-account .hist-svg { width: 100%; height: 5.5rem; display: block; }
.page-account .hist-foot { display: flex; justify-content: space-between; font-size: 0.72rem; opacity: 0.6; }
@media (max-width: 40rem) { .page-account .hist-wrap { grid-template-columns: 1fr; } }