/* Profile, rankings, saved questions, notifications, invite and text pages. */

.account-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v-space-3) var(--v-space-6); }
.account-head-text { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }
.account-card-title { margin-bottom: var(--v-space-4); }
.account-skel-num { display: inline-block; width: 2.2em; height: .9em; vertical-align: middle; }
.account-skel-block { height: 180px; }
.account-alert { align-items: center; flex-wrap: wrap; margin-bottom: var(--v-space-4); }
.account-alert span { flex: 1 1 180px; }

/* ---------------------------------------------------------------- profile */
.account-layout { display: grid; gap: var(--v-space-4); }
/* Phones: identity, numbers and statistics first, settings last. */
@media (max-width: 899px) {
    .account-side, .account-main { display: contents; }
    .account-id { order: 1; }
    .account-main > :nth-child(1) { order: 2; }
    .account-statistics { order: 3; }
    .account-main > :nth-child(3) { order: 4; }
    .account-settings { order: 5; }
}
@media (min-width: 900px) {
    .account-layout { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: start; }
}
.account-id { display: grid; justify-items: center; gap: 6px; text-align: center; padding-top: var(--v-space-6); }
.account-id h2 { overflow-wrap: anywhere; margin-top: var(--v-space-2); }
.account-contact { overflow-wrap: anywhere; font-size: 0.875rem; }
.account-result { margin-top: var(--v-space-3); width: 100%; text-align: left; }
.account-avatar { position: relative; }
.account-avatar .v-avatar-lg { width: 104px; height: 104px; background: var(--v-tonal); }
.account-avatar.is-loading .v-avatar { opacity: .45; }
.account-avatar.is-loading::after {
    content: ""; position: absolute; inset: 34px; border-radius: 50%;
    border: 3px solid var(--v-primary-soft); border-top-color: var(--v-primary); animation: v-spin .8s linear infinite;
}
.account-avatar-btn {
    position: absolute; right: -4px; bottom: -4px;
    width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--v-surface);
    background: var(--v-primary); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.account-avatar-btn:hover { background: var(--v-primary-strong); }
.account-settings .v-list-item:not(:focus-visible) { box-shadow: none; }
.account-settings .v-list-item:focus-visible { box-shadow: var(--v-focus); border-color: var(--v-primary); }
.account-settings h2 { margin-bottom: var(--v-space-3); }
.account-icon-danger { background: var(--v-incorrect-bg); color: var(--v-incorrect); }
.account-main .v-stat-label { flex-wrap: wrap; line-height: 1.25; }

.account-statistics h2 { margin-bottom: var(--v-space-4); }
.account-stats-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-5); }
.account-ring {
    --p: 0;
    width: 132px; height: 132px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--v-correct) calc(var(--p) * 1%), var(--v-incorrect-bg) 0);
    display: grid; place-items: center;
}
.account-ring-inner {
    width: 104px; height: 104px; border-radius: 50%; background: var(--v-surface);
    display: grid; place-content: center; text-align: center; line-height: 1.15;
}
.account-ring-inner strong { font-size: 1.625rem; font-weight: 800; }
.account-ring-inner span { font-size: 0.75rem; color: var(--v-text-2); }
.account-counts { flex: 1 1 220px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-3); margin: 0; }
.account-counts div { background: var(--v-surface-2); border-radius: var(--v-radius-sm); padding: 10px 12px; min-width: 0; }
.account-counts dt { font-size: 0.8125rem; font-weight: 500; color: var(--v-text-2); }
.account-counts dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.account-counts .is-correct dd { color: var(--v-correct); }
.account-counts .is-incorrect dd { color: var(--v-incorrect); }
.account-topics { display: grid; gap: var(--v-space-4); margin-top: var(--v-space-5); padding-top: var(--v-space-5); border-top: 1px solid var(--v-outline); }
@media (min-width: 640px) { .account-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-topic-head { display: flex; justify-content: space-between; gap: var(--v-space-2); font-size: 0.8125rem; color: var(--v-text-2); }
.account-topic-name { font-weight: 700; margin: 2px 0 8px; overflow-wrap: anywhere; }
.account-bar { height: 8px; border-radius: 8px; background: var(--v-tonal); overflow: hidden; }
.account-bar span { display: block; height: 100%; border-radius: 8px; }
.account-bar.is-correct span { background: var(--v-correct); }
.account-bar.is-incorrect span { background: var(--v-incorrect); }

.account-fields { display: grid; gap: 0 var(--v-space-4); }
@media (min-width: 640px) {
    .account-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-field-wide { grid-column: 1 / -1; }
}
.v-body .v-field .form-control[readonly] { background: var(--v-surface-2); color: var(--v-text-2); }

/* --------------------------------------------------------------- rankings */
.rank-tabs { margin-bottom: var(--v-space-5); width: 100%; }
@media (min-width: 560px) { .rank-tabs { width: auto; } }
.rank-tabs button { flex: 1 1 0; }
.rank-skel-podium { height: 200px; border-radius: var(--v-radius-xl); margin-bottom: var(--v-space-4); }
.rank-podium { list-style: none; margin: 0 0 var(--v-space-4); }
.rank-podium .v-podium-slot:nth-child(1) { order: 2; }
.rank-podium .v-podium-slot:nth-child(2) { order: 1; }
.rank-podium .v-podium-slot:nth-child(3) { order: 3; }
.rank-podium .v-podium-slot:not(.is-first) { padding-top: var(--v-space-5); }
.rank-podium .is-me .v-podium-name { color: var(--v-accent-amber); }
.rank-podium .rank-you { background: rgba(255, 255, 255, .16); color: #fff; min-height: 24px; padding: 2px 10px; }
.rank-list { list-style: none; margin: 0; padding: 0; gap: var(--v-space-2); }
.v-rank-row .v-avatar { width: 40px; height: 40px; }
.v-rank-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-rank-name .rank-you { min-height: 22px; padding: 1px 8px; font-size: 0.75rem; flex: none; }

/* -------------------------------------------------------- saved questions */
.bookmark-list { list-style: none; margin: 0; padding: 0; gap: var(--v-space-3); }
.bookmark-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; gap: var(--v-space-3); align-items: start; padding: var(--v-space-4); }
.bookmark-num {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--v-tonal); color: var(--v-primary); font-weight: 700; font-size: 0.875rem;
}
.bookmark-body { min-width: 0; display: grid; gap: var(--v-space-2); }
.bookmark-question { font-weight: 600; overflow-wrap: anywhere; line-height: 1.45; padding-top: 4px; }
.bookmark-question p { margin: 0; }
.bookmark-image { max-width: 160px; max-height: 120px; object-fit: contain; border-radius: var(--v-radius-sm); }
.bookmark-answer { display: flex; gap: 6px; align-items: flex-start; font-size: 0.875rem; color: #0F7350; background: var(--v-correct-bg); border-radius: var(--v-radius-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.bookmark-answer .ic { margin-top: 2px; }
.bookmark-answer p { margin: 0; display: inline; }
.delete_boockmark_question { color: var(--v-text-2); }
.delete_boockmark_question:hover { color: var(--v-incorrect); background: var(--v-incorrect-bg); }

/* ---------------------------------------------------------- notifications */
.notice { padding: 0; overflow: hidden; }
.notice-title { margin: 0; font-size: 1rem; }
.notice-toggle {
    display: flex; align-items: center; gap: var(--v-space-3); width: 100%; min-height: 64px;
    padding: var(--v-space-3) var(--v-space-4); background: none; border: 0; text-align: left;
    font: inherit; font-weight: 700; color: var(--v-text); cursor: pointer;
}
.notice-title-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notice-chevron { color: var(--v-text-3); transition: transform .2s; }
.notice.is-open .notice-chevron { transform: rotate(180deg); }
.notice-content { padding: 0 var(--v-space-4) var(--v-space-4) calc(var(--v-space-4) + 44px + var(--v-space-3)); display: grid; gap: var(--v-space-3); }
.notice-content[hidden] { display: none; }
.notice-image { max-width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--v-radius-sm); justify-self: start; }
.notice-text { color: var(--v-text-2); overflow-wrap: anywhere; }
@media (max-width: 479px) { .notice-content { padding-left: var(--v-space-4); } }

/* ----------------------------------------------------------------- invite */
.invite-card { display: grid; justify-items: center; text-align: center; gap: var(--v-space-3); padding: var(--v-space-8) var(--v-space-5) var(--v-space-6); }
.invite-art {
    position: relative; width: 96px; height: 96px; border-radius: 50%;
    display: grid; place-items: center; background: var(--v-tint-amber); color: #E08A00;
}
.invite-art .ic { width: 44px; height: 44px; stroke-width: 1.8; }
.invite-art .v-spark-a { top: 2%; left: -10%; }
.invite-art .v-spark-b { top: 64%; left: -18%; }
.invite-art .v-spark-c { top: 10%; right: -14%; background: var(--v-accent-coral); }
.invite-reward { color: var(--v-text-2); max-width: 42ch; }
.invite-code-label { font-size: 0.875rem; font-weight: 600; color: var(--v-text-2); margin-top: var(--v-space-3); }
.invite-code-row { width: 100%; display: flex; justify-content: center; }
.invite-code {
    display: inline-flex; align-items: center; justify-content: center; min-height: 64px; min-width: 200px; max-width: 100%;
    padding: 10px 24px; border: 2px dashed var(--v-outline-strong); border-radius: var(--v-radius);
    background: var(--v-surface-2); font-size: 1.75rem; font-weight: 800; letter-spacing: .12em;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all;
}
.invite-skel { width: 140px; height: 28px; }
.invite-missing { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--v-text-2); }
.invite-actions { width: 100%; max-width: 420px; justify-content: center; }
.invite-actions .v-btn { flex: 1 1 160px; }
.invite-actions .is-done { background: var(--v-correct); }
.invite-toast { min-height: 1.5em; font-size: 0.875rem; font-weight: 600; color: var(--v-correct); }
.invite-social { width: 100%; border-top: 1px solid var(--v-outline); padding-top: var(--v-space-4); display: grid; gap: var(--v-space-3); }
.invite-social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--v-space-2); }
.invite-social .v-btn { min-height: 44px; }
.invite-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v-space-2); }
.invite-steps li { display: flex; align-items: center; gap: var(--v-space-3); background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius); padding: var(--v-space-3) var(--v-space-4); }
.invite-step-num { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--v-tonal); color: var(--v-primary); font-weight: 700; }

/* ------------------------------------------------------------ text pages */
.page-prose { padding: var(--v-space-6); }
.page-prose .v-skel-text { margin-bottom: 12px; }
.page-skel-short { width: 60%; }
.page-prose > .v-empty { border: 0; padding: var(--v-space-6) 0; }
@media (min-width: 1024px) { .rank-panel { max-width: 760px; } }