/* ============================================================
   FMMSC V018.1 — RUANG MEMBER
   Member hub + aspirasi + voting
   ============================================================ */

.voice-hero {
    padding: var(--fmmsc-public-hero-top, 110px) 0 62px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 86% 24%, rgba(224,175,52,.12), transparent 25rem),
        radial-gradient(circle at 15% 78%, rgba(24,55,95,.70), transparent 34rem),
        linear-gradient(135deg, var(--navy-950), var(--navy-900));
}

.voice-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    gap: 52px;
    align-items: end;
}

.voice-kicker,
.voice-section-label {
    display: inline-flex;
    align-items: center;
    color: var(--gold-300);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}


.voice-hero h1 {
    margin: 10px 0 0;
    font-size: clamp(2.7rem, 5.2vw, 5.4rem);
    line-height: .96;
    letter-spacing: -.055em;
}

.voice-hero p {
    max-width: 760px;
    margin: 20px 0 0;
    color: rgba(255,255,255,.62);
    font-size: 1rem;
    line-height: 1.75;
}

.voice-member-card {
    padding: 22px;
    border: 1px solid rgba(224,175,52,.22);
    border-radius: 22px;
    background: rgba(7,24,45,.70);
    box-shadow: 0 28px 60px rgba(0,0,0,.22);
    backdrop-filter: blur(16px);
}

.voice-member-card > span,
.voice-member-card > strong,
.voice-member-card > small {
    display: block;
}

.voice-member-card > span {
    color: var(--gold-300);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.voice-member-card > strong {
    margin-top: 10px;
    font-size: 1.1rem;
}

.voice-member-card > small {
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    line-height: 1.55;
}

.voice-member-card form {
    margin-top: 17px;
}

.voice-member-card button {
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.62);
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.voice-member-card button:hover {
    color: var(--gold-300);
}

.voice-flash-wrap {
    position: relative;
    z-index: 3;
}

.voice-flash {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: .78rem;
    font-weight: 760;
}

.voice-flash.is-success {
    border: 1px solid rgba(80,180,115,.28);
    background: rgba(80,180,115,.12);
    color: #d7ffe4;
}

.voice-flash.is-error {
    border: 1px solid rgba(236,3,12,.24);
    background: rgba(236,3,12,.10);
    color: #ffd8d9;
}

.voice-login-section,
.voice-content-section,
.voice-summary-section {
    background: var(--paper);
    color: var(--ink);
}

.voice-login-section {
    padding: 70px 0 92px;
}

.voice-login-grid,
.voice-create-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
    gap: 70px;
    align-items: start;
}

.voice-login-copy,
.voice-create-copy {
    padding-top: 12px;
}

.voice-login-copy h2,
.voice-create-copy h2,
.voice-section-heading h2 {
    margin: 12px 0 0;
    font-size: clamp(2rem, 3.4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.voice-login-copy > p,
.voice-create-copy > p,
.voice-section-heading p {
    max-width: 720px;
    margin: 17px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.voice-login-points,
.voice-guidance-list {
    display: grid;
    gap: 11px;
    margin-top: 28px;
}

.voice-login-points span,
.voice-guidance-list span {
    color: var(--navy-800);
    font-size: .82rem;
    font-weight: 760;
}

.voice-login-card,
.voice-create-form {
    padding: 28px;
    border: 1px solid var(--light-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(8,24,45,.08);
}

.voice-card-heading > span {
    color: var(--gold-500);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.voice-card-heading h2 {
    margin: 8px 0 0;
    font-size: 1.65rem;
    letter-spacing: -.03em;
}

.voice-card-heading p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.6;
}

.voice-form {
    display: grid;
    gap: 17px;
    margin-top: 24px;
}

.voice-form label {
    display: grid;
    gap: 7px;
}

.voice-form label > span {
    color: var(--navy-800);
    font-size: .68rem;
    font-weight: 860;
}

.voice-form label > span small {
    color: var(--muted);
    font-weight: 700;
}

.voice-form input,
.voice-form select,
.voice-form textarea {
    width: 100%;
    border: 1px solid var(--light-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    outline: none;
}

.voice-form input,
.voice-form select {
    min-height: 48px;
    padding: 0 13px;
}

.voice-form textarea {
    min-height: 145px;
    padding: 13px;
    resize: vertical;
    line-height: 1.55;
}

.voice-form input:focus,
.voice-form select:focus,
.voice-form textarea:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(213,152,22,.10);
}

.voice-primary-button,
.voice-secondary-button,
.voice-support-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font: inherit;
    font-size: .73rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.voice-primary-button {
    padding: 0 17px;
    border: 1px solid var(--gold-500);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--navy-950);
}

.voice-secondary-button {
    padding: 0 16px;
    border: 1px solid var(--light-line);
    background: #fff;
    color: var(--navy-900);
}

.voice-login-footnote,
.voice-form-note {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.55;
}

.voice-login-footnote a {
    color: var(--gold-500);
    font-weight: 850;
}

.voice-summary-section {
    padding: 38px 0 0;
}

.voice-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.voice-summary-grid article {
    padding: 20px 21px;
    border: 1px solid var(--light-line);
    border-radius: 18px;
    background: #fff;
}

.voice-summary-grid span,
.voice-summary-grid strong,
.voice-summary-grid small {
    display: block;
}

.voice-summary-grid span {
    color: var(--muted);
    font-size: .65rem;
    font-weight: 830;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.voice-summary-grid strong {
    margin-top: 7px;
    color: var(--navy-900);
    font-size: 2rem;
    line-height: 1;
}

.voice-summary-grid small {
    margin-top: 7px;
    color: var(--muted);
    font-size: .66rem;
}

.voice-content-section {
    padding: 72px 0;
}

.voice-content-section.is-soft {
    border-top: 1px solid var(--light-line);
    border-bottom: 1px solid var(--light-line);
    background: #e9edf1;
}

.voice-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 30px;
}

.voice-section-heading h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.voice-poll-grid,
.voice-closed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.voice-poll-card,
.voice-closed-card,
.voice-aspiration-card {
    border: 1px solid var(--light-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(8,24,45,.045);
}

.voice-poll-card,
.voice-closed-card {
    padding: 24px;
}

.voice-poll-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: start;
}

.voice-poll-head h3,
.voice-aspiration-card h3,
.voice-history-list h3 {
    margin: 9px 0 0;
    color: var(--navy-900);
    font-size: 1.08rem;
    line-height: 1.35;
}

.voice-status-pill,
.voice-source-pill,
.voice-category-pill,
.voice-own-badge,
.voice-review-dot {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: .59rem;
    font-weight: 900;
    line-height: 1;
}

.voice-status-pill,
.voice-source-pill,
.voice-category-pill,
.voice-own-badge {
    padding: 7px 9px;
}

.voice-status-pill.is-open,
.voice-status-pill.is-approved {
    background: #e6f3eb;
    color: #2f7650;
}

.voice-status-pill.is-closed,
.voice-status-pill.is-rejected {
    background: #f1f2f4;
    color: #596473;
}

.voice-status-pill.is-under_review {
    background: #fff4d6;
    color: #8a6208;
}

.voice-status-pill.is-archived {
    background: #eef1f5;
    color: #586475;
}

.voice-source-pill {
    flex: 0 0 auto;
    border: 1px solid var(--light-line);
    color: var(--muted);
    background: var(--paper);
}

.voice-poll-description {
    margin: 17px 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.65;
}

.voice-poll-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--light-line);
    color: var(--muted);
    font-size: .65rem;
    font-weight: 740;
}

.voice-vote-form {
    margin-top: 18px;
}

.voice-options,
.voice-result-list {
    display: grid;
    gap: 9px;
}

.voice-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid var(--light-line);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
}

.voice-option.is-selected {
    border-color: rgba(213,152,22,.55);
    background: #fffaf0;
}

.voice-option input {
    position: relative;
    z-index: 2;
    accent-color: var(--gold-500);
}

.voice-option-main {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.voice-option-main b,
.voice-option-main small {
    display: block;
}

.voice-option-main b {
    color: var(--navy-900);
    font-size: .76rem;
}

.voice-option-main small {
    margin-top: 4px;
    color: var(--muted);
    font-size: .61rem;
}

.voice-result-track {
    position: relative;
    height: 5px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #e7ebef;
}

.voice-option > .voice-result-track {
    grid-column: 1 / -1;
}

.voice-result-track > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
}

.voice-vote-form > .voice-primary-button {
    width: 100%;
    margin-top: 13px;
}

.voice-hidden-result-note {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    text-align: center;
    font-size: .61rem;
}

.voice-aspiration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.voice-aspiration-card {
    display: flex;
    flex-direction: column;
    padding: 21px;
}

.voice-aspiration-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.voice-category-pill {
    background: var(--navy-900);
    color: var(--gold-300);
}

.voice-review-dot {
    gap: 6px;
    color: #8a6208;
}

.voice-review-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-500);
}

.voice-aspiration-card > p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.65;
}

.voice-location-link {
    width: fit-content;
    margin-top: 13px;
    color: var(--gold-500);
    font-size: .67rem;
    font-weight: 850;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.voice-aspiration-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--muted);
    font-size: .6rem;
}

.voice-aspiration-meta b {
    color: var(--navy-800);
}

.voice-support-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--light-line);
}

.voice-support-row > div strong,
.voice-support-row > div span {
    display: block;
}

.voice-support-row > div strong {
    color: var(--navy-900);
    font-size: 1rem;
}

.voice-support-row > div span {
    margin-top: 2px;
    color: var(--muted);
    font-size: .57rem;
}

.voice-support-button {
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--navy-900);
    background: #fff;
    color: var(--navy-900);
}

.voice-support-button.is-supported {
    border-color: var(--gold-500);
    background: #fff7e4;
    color: #8a6208;
}

.voice-discussion {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--light-line);
}

.voice-discussion-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.voice-discussion-head > div span,
.voice-discussion-head > div strong {
    display: block;
}

.voice-discussion-head > div span {
    color: var(--gold-500);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.voice-discussion-head > div strong {
    margin-top: 3px;
    color: var(--navy-900);
    font-size: .78rem;
}

.voice-discussion-head > small {
    max-width: 210px;
    color: var(--muted);
    text-align: right;
    font-size: .57rem;
    line-height: 1.45;
}

.voice-discussion-empty {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px dashed #d5dce5;
    border-radius: 11px;
    background: #f8fafb;
    color: var(--muted);
    font-size: .64rem;
    line-height: 1.5;
}

.voice-comment-list {
    display: grid;
    gap: 8px;
    max-height: 270px;
    margin-top: 12px;
    overflow-y: auto;
    padding-right: 3px;
}

.voice-comment-item {
    padding: 11px 12px;
    border: 1px solid #dfe4ea;
    border-radius: 12px;
    background: #f8fafb;
}

.voice-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
    align-items: center;
}

.voice-comment-meta strong {
    color: var(--navy-900);
    font-size: .66rem;
}

.voice-comment-meta span {
    padding: 2px 6px;
    border-radius: 999px;
    background: #fff2cf;
    color: #7d5908;
    font-size: .51rem;
    font-weight: 850;
}

.voice-comment-meta time {
    margin-left: auto;
    color: var(--muted);
    font-size: .52rem;
}

.voice-comment-item p {
    margin: 7px 0 0;
    color: #44556a;
    font-size: .65rem;
    line-height: 1.55;
}

.voice-comment-form {
    display: grid;
    gap: 9px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d9e0e8;
    border-radius: 13px;
    background: #fff;
}

.voice-comment-form label,
.voice-comment-form label > span {
    display: grid;
}

.voice-comment-form label {
    gap: 6px;
}

.voice-comment-form label > span {
    color: var(--navy-900);
    font-size: .62rem;
    font-weight: 850;
}

.voice-comment-form textarea {
    width: 100%;
    min-height: 78px;
    resize: vertical;
    padding: 10px 11px;
    border: 1px solid #cfd7e2;
    border-radius: 10px;
    background: #fff;
    color: var(--navy-950);
    font: inherit;
    font-size: .67rem;
    line-height: 1.5;
    outline: none;
}

.voice-comment-form textarea:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(213, 152, 22, .10);
}

.voice-comment-form > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.voice-comment-form > div small {
    color: var(--muted);
    font-size: .54rem;
}

.voice-comment-submit {
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: var(--navy-900);
    color: #fff;
    font-size: .61rem;
    font-weight: 900;
    cursor: pointer;
}

.voice-own-badge {
    border: 1px solid var(--light-line);
    background: #f3f5f7;
    color: var(--muted);
}

.voice-create-form {
    margin-top: 0;
}

.voice-history-list {
    display: grid;
    gap: 10px;
}

.voice-history-list article {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: center;
    padding: 18px 19px;
    border: 1px solid var(--light-line);
    border-radius: 16px;
    background: #fff;
}

.voice-history-list h3 {
    font-size: .88rem;
}

.voice-history-list small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .6rem;
}

.voice-history-note p {
    margin: 0;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.55;
}

.voice-history-note a {
    display: inline-block;
    margin-top: 7px;
    color: var(--gold-500);
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

.voice-result-item {
    padding: 12px;
    border: 1px solid var(--light-line);
    border-radius: 12px;
    background: #fafbfc;
}

.voice-result-item.is-leader {
    border-color: rgba(213,152,22,.42);
    background: #fffaf0;
}

.voice-result-item > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.voice-result-item b {
    color: var(--navy-900);
    font-size: .72rem;
}

.voice-result-item div > span {
    color: var(--muted);
    font-size: .61rem;
}

.voice-decision-note {
    margin-top: 17px;
    padding: 14px;
    border-left: 3px solid var(--gold-500);
    background: #fffaf0;
}

.voice-decision-note > span {
    color: #8a6208;
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.voice-decision-note p {
    margin: 6px 0 0;
    color: var(--navy-800);
    font-size: .7rem;
    line-height: 1.55;
}

.voice-empty-state {
    padding: 38px;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 20px;
    background: var(--navy-900);
    color: #fff;
    text-align: center;
}

.voice-empty-state.is-light {
    border-color: var(--light-line);
    background: #fff;
    color: var(--navy-900);
}

.voice-empty-state strong {
    display: block;
    font-size: 1rem;
}

.voice-empty-state p {
    margin: 7px auto 0;
    max-width: 640px;
    color: rgba(255,255,255,.58);
    font-size: .72rem;
    line-height: 1.6;
}

.voice-empty-state.is-light p {
    color: var(--muted);
}

@media (max-width: 1080px) {
    .voice-hero-inner,
    .voice-login-grid,
    .voice-create-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .voice-member-card {
        max-width: 520px;
    }

    .voice-aspiration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .voice-hero {
        padding-bottom: 42px;
    }

    .voice-summary-grid,
    .voice-poll-grid,
    .voice-closed-grid,
    .voice-aspiration-grid {
        grid-template-columns: 1fr;
    }

    .voice-section-heading {
        display: grid;
        align-items: start;
    }

    .voice-secondary-button {
        width: fit-content;
    }

    .voice-content-section {
        padding: 54px 0;
    }

    .voice-history-list article {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .voice-login-card,
    .voice-create-form,
    .voice-poll-card,
    .voice-closed-card,
    .voice-aspiration-card {
        border-radius: 17px;
    }
}

@media (max-width: 480px) {
    .voice-hero h1 {
        font-size: 2.55rem;
    }

    .voice-login-card,
    .voice-create-form,
    .voice-poll-card,
    .voice-closed-card,
    .voice-aspiration-card {
        padding: 18px;
    }

    .voice-poll-head,
    .voice-aspiration-meta,
    .voice-support-row,
    .voice-result-item > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .voice-support-row form,
    .voice-support-button {
        width: 100%;
    }

    .voice-discussion-head,
    .voice-comment-form > div {
        display: grid;
    }

    .voice-discussion-head > small {
        max-width: none;
        text-align: left;
    }

    .voice-comment-meta time {
        width: 100%;
        margin-left: 0;
    }

    .voice-comment-submit {
        width: 100%;
    }
}

/* ============================================================
   FMMSC V018.1 — RUANG MEMBER / QUICK ACCESS HUB
   ============================================================ */

.voice-shortcuts-section {
    padding: 54px 0 18px;
    background: var(--paper);
    color: var(--ink);
}

.voice-shortcuts-heading {
    margin-bottom: 22px;
}

.voice-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.voice-shortcut-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 112px;
    padding: 17px;
    border: 1px solid var(--light-line);
    border-radius: 18px;
    background: #fff;
    color: var(--navy-900);
    box-shadow: 0 14px 36px rgba(8,24,45,.045);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.voice-shortcut-card:hover,
.voice-shortcut-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(213,152,22,.5);
    box-shadow: 0 20px 46px rgba(8,24,45,.09);
    outline: none;
}

.voice-shortcut-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--navy-900);
    color: var(--gold-300);
}

.voice-shortcut-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.voice-shortcut-copy,
.voice-shortcut-copy small,
.voice-shortcut-copy strong,
.voice-shortcut-copy > span {
    display: block;
}

.voice-shortcut-copy {
    min-width: 0;
}

.voice-shortcut-copy small {
    color: var(--gold-500);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.voice-shortcut-copy strong {
    margin-top: 4px;
    font-size: .82rem;
    line-height: 1.25;
}

.voice-shortcut-copy > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.45;
}

.voice-shortcut-arrow {
    color: var(--gold-500);
    font-size: 1rem;
    font-weight: 900;
}

@media (max-width: 1080px) {
    .voice-shortcut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .voice-shortcuts-section {
        padding-top: 38px;
    }

    .voice-shortcut-grid {
        grid-template-columns: 1fr;
    }

    .voice-shortcut-card {
        min-height: 96px;
    }
}

/* ============================================================
   RUANG MEMBER — LOCKED MEMBER ID PREFIX
   ============================================================ */

.voice-member-id-input {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;

    border: 1px solid var(--light-line);
    border-radius: 12px;

    background: #fff;
}

.voice-member-id-input:focus-within {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(213, 152, 22, .10);
}

.voice-member-id-input .member-id-prefix {
    display: flex;
    align-items: center;

    padding: 0 11px;

    border-right: 1px solid #d8dee6;

    background: #e9edf2;
    color: #5c6777;

    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .025em;

    user-select: none;
}

.voice-form .voice-member-id-input input {
    min-width: 0;
    width: 100%;

    min-height: 46px;
    padding: 0 13px;

    border: 0;
    border-radius: 0;

    outline: 0;

    background: #fff;
    color: var(--ink);

    box-shadow: none;
}

.voice-form .voice-member-id-input input:focus {
    border: 0;
    box-shadow: none;
}

/* ============================================================
   V018.3 — RUANG MEMBER CLEAN ROUTES
   ============================================================ */
.voice-page-hero {
    padding: var(--fmmsc-public-hero-top, 110px) 0 34px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 82% 18%, rgba(213,152,22,.12), transparent 28rem),
        linear-gradient(135deg, #07182d, #0b2340);
    color: #fff;
}
.voice-page-hero h1 { margin: 8px 0 10px; font-size: clamp(2rem,5vw,3.35rem); letter-spacing: -.05em; }
.voice-page-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.72); line-height: 1.7; }
.voice-page-back { display:inline-flex; margin-bottom:18px; color:#efc45a; font-size:.72rem; font-weight:900; text-decoration:none; }
.voice-member-subnav { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.voice-member-subnav a { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.055); color:rgba(255,255,255,.78); font-size:.68rem; font-weight:850; text-decoration:none; }
.voice-member-subnav a:hover,.voice-member-subnav a.is-active { border-color:rgba(213,152,22,.55); background:rgba(213,152,22,.13); color:#f4ce72; }
.voice-shortcut-icon { font-size: 1.05rem; font-weight: 900; }
@media (max-width: 720px) {
    .voice-page-hero { padding-top: var(--fmmsc-public-hero-top, 110px); }
    .voice-member-subnav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .voice-member-subnav a { flex: 0 0 auto; }
}

/* V018.4.5 — member profile edit */
.voice-member-link {
    display: inline-flex;
    margin-top: .85rem;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.voice-profile-section {
    padding: 1.5rem 0 4rem;
}

.voice-profile-form {
    display: grid;
    gap: 1.25rem;
    max-width: 980px;
    margin: 0 auto;
}

.voice-profile-panel {
    background: #fff;
    border: 1px solid rgba(7, 24, 45, .14);
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 16px 38px rgba(7, 24, 45, .06);
}

.voice-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.voice-field {
    display: grid;
    gap: .45rem;
}

.voice-field-wide {
    grid-column: 1 / -1;
}

.voice-field > span {
    color: #0a1d33;
    font-size: .82rem;
    font-weight: 800;
}

.voice-field input,
.voice-field select {
    width: 100%;
    min-height: 48px;
    border: 1px solid #cfd7e2;
    border-radius: 12px;
    background: #fff;
    color: #0a1d33;
    padding: .75rem .85rem;
    font: inherit;
}

.voice-field input:focus,
.voice-field select:focus {
    outline: 2px solid rgba(226, 169, 31, .28);
    border-color: #dba61d;
}

.voice-field input:disabled {
    background: #edf1f5;
    color: #637083;
    cursor: not-allowed;
}

.voice-field small {
    color: #687689;
    line-height: 1.45;
}

.voice-profile-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
}

.voice-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .72rem 1.1rem;
    border: 1px solid rgba(7, 24, 45, .18);
    border-radius: 12px;
    color: #0a1d33;
    background: #fff;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 720px) {
    .voice-form-grid {
        grid-template-columns: 1fr;
    }

    .voice-field-wide {
        grid-column: auto;
    }

    .voice-profile-panel {
        padding: 1.1rem;
    }

    .voice-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* V018.4.5 manual contrast hotfix — white profile panels */
.voice-profile-panel .voice-card-heading > span {
    color: #d59816;
}

.voice-profile-panel .voice-card-heading h2 {
    color: #0a1d33;
}

.voice-profile-panel .voice-card-heading p {
    color: #637083;
}

/* V018.5 — profile completeness */
.voice-completeness-section {
    padding: 28px 0 34px;
    background: #f4f6f8;
    border-top: 1px solid rgba(7, 24, 45, .06);
    border-bottom: 1px solid rgba(7, 24, 45, .06);
}
.voice-completeness-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .9fr) auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(7, 24, 45, .09);
    box-shadow: 0 14px 34px rgba(7, 24, 45, .08);
}
.voice-completeness-copy h2 { margin: 5px 0 7px; color: #0a1d33; }
.voice-completeness-copy p { margin: 0; color: #637083; }
.voice-completeness-bar {
    height: 8px;
    overflow: hidden;
    margin-top: 15px;
    border-radius: 999px;
    background: #e9eef4;
}
.voice-completeness-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d59816, #f5c857);
}
.voice-completeness-items { display: grid; gap: 7px; }
.voice-completeness-items span { font-size: .86rem; color: #637083; }
.voice-completeness-items .is-complete { color: #257548; font-weight: 800; }
.voice-completeness-items .is-pending { color: #8a6a24; }
.voice-completeness-cta { white-space: nowrap; text-decoration: none; }
@media (max-width: 820px) {
    .voice-completeness-card { grid-template-columns: 1fr; }
    .voice-completeness-cta { justify-self: start; }
}

/* ============================================================
   V018.6.11 — MEMBER LOGIN + ACCOUNT RECOVERY
   ============================================================ */
.voice-form label > small {
    margin-top: -2px;
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.45;
}

.voice-password-wrap,
.account-password-wrap {
    position: relative;
    min-width: 0;
}

.voice-password-wrap input,
.account-password-wrap input {
    width: 100%;
    padding-right: 88px !important;
}

.voice-password-wrap button,
.account-password-wrap button {
    position: absolute;
    top: 50%;
    right: 6px;
    min-width: 66px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: rgba(213, 152, 22, .12);
    color: #8c6009;
    font: inherit;
    font-size: .62rem;
    font-weight: 900;
    cursor: pointer;
}

.voice-login-help-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
}

.voice-login-help-links a {
    color: var(--navy-800);
    font-size: .66rem;
    font-weight: 820;
    text-decoration: underline;
    text-decoration-color: rgba(213, 152, 22, .55);
    text-underline-offset: 3px;
}

.voice-login-help-links a:hover {
    color: var(--gold-500);
}

.account-help-hero p {
    max-width: 820px;
}

.account-help-section {
    padding: 34px 0 72px;
    background: #f4f6f8;
}

.account-help-flash {
    margin-bottom: 16px;
}

.account-recovered-id {
    display: grid;
    gap: 5px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(213, 152, 22, .38);
    border-radius: 18px;
    background: #fffaf0;
    box-shadow: 0 12px 32px rgba(7, 24, 45, .05);
}

.account-recovered-id span {
    color: #786025;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.account-recovered-id strong {
    color: var(--navy-950);
    font-size: clamp(1.45rem, 4vw, 2rem);
    letter-spacing: .025em;
}

.account-recovered-id small {
    color: var(--muted);
    font-size: .68rem;
}

.account-help-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.account-help-jumps button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #d7dee7;
    border-radius: 999px;
    background: #fff;
    color: var(--navy-800);
    font-size: .67rem;
    font-weight: 850;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.account-help-jumps button.is-active,
.account-help-jumps button:hover {
    border-color: rgba(213, 152, 22, .58);
    background: #fff8e8;
    color: #7d5908;
}

.account-help-grid {
    display: block;
    max-width: 760px;
}

.account-help-card {
    scroll-margin-top: 108px;
    padding: 22px;
    border: 1px solid #d8dee7;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(7, 24, 45, .055);
}

.account-help-card[hidden] {
    display: none !important;
}

.account-help-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.account-help-card-head > span {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #0a1d33;
    color: #efc45a;
    font-size: .66rem;
    font-weight: 950;
}

.account-help-card-head small,
.account-help-card-head h2 {
    display: block;
}

.account-help-card-head small {
    color: var(--gold-500);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.account-help-card-head h2 {
    margin: 4px 0 0;
    color: var(--navy-950);
    font-size: 1.05rem;
    line-height: 1.3;
}

.account-help-card > p {
    min-height: 63px;
    margin: 15px 0 0;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.55;
}

.account-help-form {
    display: grid;
    gap: 13px;
    margin-top: 18px;
}

.account-help-form label {
    display: grid;
    gap: 6px;
}

.account-help-form label > span {
    color: var(--navy-900);
    font-size: .67rem;
    font-weight: 850;
}

.account-help-form input {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid #cfd7e2;
    border-radius: 11px;
    background: #fff;
    color: var(--navy-950);
    font: inherit;
    outline: none;
}

.account-help-form input:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(213, 152, 22, .10);
}

.account-help-form .voice-primary-button {
    width: 100%;
    margin-top: 2px;
}

.account-help-admin-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 18px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px dashed #cbd3de;
    border-radius: 16px;
    background: rgba(255, 255, 255, .65);
}

.account-help-admin-note strong {
    color: var(--navy-900);
    font-size: .72rem;
}

.account-help-admin-note span {
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.5;
}

.account-help-admin-note a {
    color: #966b09;
    font-size: .68rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .account-help-card > p {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .account-help-section {
        padding-top: 24px;
    }

    .account-help-jumps {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .account-help-jumps button {
        flex: 0 0 auto;
    }

    .account-help-card {
        padding: 18px;
    }

    .account-help-admin-note {
        grid-template-columns: 1fr;
    }
}