/*
 * 七星大陸
 * v0.60 Public UI Foundation
 *
 * register / login / public pages
 */

:root {
    --ui-bg: #101218;
    --ui-surface-1: #171a22;
    --ui-surface-2: #1d212b;
    --ui-surface-3: #252a35;

    --ui-border: #343b49;
    --ui-border-strong: #465062;

    --ui-text: #e5e8ed;
    --ui-text-muted: #a0a8b5;
    --ui-text-weak: #737d8b;

    --ui-accent: #c5a15b;
    --ui-accent-hover: #d5b36e;
    --ui-accent-soft: rgba(197, 161, 91, 0.12);

    --ui-success: #67b883;
    --ui-warning: #d0a44f;
    --ui-danger: #d56d6d;
    --ui-info: #6f9fd5;

    --ui-radius-sm: 4px;
    --ui-radius-md: 6px;

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
}


/* =========================================================
   Shared
   ========================================================= */

.ui-panel {
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-1);
}


.ui-panel-header {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--ui-border);
}


.ui-panel-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}


.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 6px 14px;

    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);

    color: var(--ui-text);
    background: var(--ui-surface-3);

    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;
}


.ui-btn:hover,
.ui-btn:focus-visible {
    border-color: var(--ui-accent);
}


.ui-btn-primary {
    border-color: var(--ui-accent);
    color: #111318;
    background: var(--ui-accent);
}


.ui-btn-primary:hover,
.ui-btn-primary:focus-visible {
    background: var(--ui-accent-hover);
}


.ui-btn-secondary {
    background: var(--ui-surface-2);
}


.ui-btn-danger {
    border-color: var(--ui-danger);
    color: #ffffff;
    background: rgba(213, 109, 109, 0.18);
}


.ui-form-row {
    margin-bottom: 12px;
}


.ui-form-label {
    display: block;
    margin-bottom: 5px;

    color: var(--ui-text-muted);
    font-size: 13px;
    font-weight: 600;
}


.ui-help {
    margin-top: 4px;

    color: var(--ui-text-weak);
    font-size: 12px;
    line-height: 1.45;
}


.ui-notice {
    padding: 8px 10px;

    border-left: 3px solid var(--ui-info);
    background: var(--ui-surface-2);

    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.5;
}


.ui-notice-success {
    border-left-color: var(--ui-success);
}


.ui-notice-warning {
    border-left-color: var(--ui-warning);
}


.ui-notice-error {
    border-left-color: var(--ui-danger);
}


*:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}


@media (max-width: 600px) {

    .ui-btn {
        min-height: 40px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }
}


/* =========================================================
   v0.60B-1
   Closed Alpha Auth UI

   Design goals:
   - compact browser-game density
   - dark, low-fatigue surface
   - small readable typography
   - clear primary action
   - no "large phone UI" feeling
   ========================================================= */


/* ---------------------------------------------------------
   Page
   --------------------------------------------------------- */

.ui-auth-page {
    margin: 0;
    min-height: 100vh;
    padding: 20px 16px 28px;

    color: var(--ui-text);
    background:
        linear-gradient(
            180deg,
            #151821 0,
            var(--ui-bg) 220px
        );

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic UI",
        "Yu Gothic",
        Meiryo,
        sans-serif;

    font-size: 14px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Shell
   --------------------------------------------------------- */

.ui-auth-page .register-shell {
    width: min(100%, 760px);
    max-width: 760px;
    margin: 0 auto;
}


.ui-auth-page .login-shell {
    width: min(100%, 520px);
    max-width: 520px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.ui-auth-page .register-brand,
.ui-auth-page .login-brand {
    margin: 0 0 12px;
    text-align: left;
}


.ui-auth-page .register-brand-mark,
.ui-auth-page .login-brand-mark {
    display: inline-block;
    margin: 0 7px 0 0;

    color: var(--ui-accent);

    font-size: 16px;
    line-height: 1;
    vertical-align: 2px;
}


.ui-auth-page .register-brand h1,
.ui-auth-page .login-brand h1 {
    display: inline;

    margin: 0;

    color: var(--ui-text);

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.04em;
}


.ui-auth-page .register-brand p,
.ui-auth-page .login-brand p {
    display: inline-block;

    margin: 0 0 0 10px;

    color: var(--ui-text-weak);

    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.06em;
}


/* ---------------------------------------------------------
   Main card
   --------------------------------------------------------- */

.ui-auth-page .register-card,
.ui-auth-page .login-card {
    padding: 14px 16px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);

    color: var(--ui-text);
    background: var(--ui-surface-1);

    box-shadow: none;
}


.ui-auth-page .register-card h2,
.ui-auth-page .login-card h2 {
    margin: 0 0 4px;

    color: var(--ui-text);

    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}


.ui-auth-page .register-lead,
.ui-auth-page .login-lead {
    margin: 0 0 12px;

    color: var(--ui-text-muted);

    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Closed Alpha notice
   --------------------------------------------------------- */

.ui-auth-page .closed-alpha-note {
    margin: 0 0 12px;
    padding: 8px 10px;

    border: 0;
    border-left: 3px solid var(--ui-accent);
    border-radius: 0;

    color: var(--ui-text-muted);
    background: var(--ui-surface-2);

    font-size: 12px;
    line-height: 1.5;
}


.ui-auth-page .closed-alpha-note strong {
    display: inline;

    margin: 0 6px 0 0;

    color: var(--ui-text);
    font-size: 12px;
}


/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */

.ui-auth-page .form-row {
    margin-bottom: 12px;
}


.ui-auth-page .form-row label {
    display: block;

    margin: 0 0 5px;

    color: var(--ui-text-muted);

    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
}


.ui-auth-page .form-row input,
.ui-auth-page .form-row select,
.ui-auth-page .form-row textarea {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;

    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);

    color: var(--ui-text);
    background: #12151c;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
}


.ui-auth-page .form-row input:hover,
.ui-auth-page .form-row select:hover,
.ui-auth-page .form-row textarea:hover {
    border-color: #586477;
}


.ui-auth-page .form-row input:focus,
.ui-auth-page .form-row select:focus,
.ui-auth-page .form-row textarea:focus {
    border-color: var(--ui-accent);
}


.ui-auth-page
.form-row
input[type="checkbox"],
.ui-auth-page
.form-row
input[type="radio"] {
    width: auto;
    min-height: auto;
    padding: 0;

    accent-color: var(--ui-accent);
}


.ui-auth-page .help-text {
    margin-top: 4px;

    color: var(--ui-text-weak);

    font-size: 11px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Errors
   --------------------------------------------------------- */

.ui-auth-page .field-errors,
.ui-auth-page .form-errors {
    margin: 6px 0 10px;
    padding: 7px 9px;

    border: 0;
    border-left: 3px solid var(--ui-danger);
    border-radius: 0;

    color: #efb0b0;
    background: rgba(213, 109, 109, 0.10);

    font-size: 12px;
    line-height: 1.45;
}


.ui-auth-page .field-errors ul,
.ui-auth-page .form-errors ul {
    margin: 0;
    padding-left: 18px;
}


/* ---------------------------------------------------------
   Starter Avatar
   --------------------------------------------------------- */

.ui-register-page .starter-avatar-section {
    margin: 4px 0 12px;
    padding: 10px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);

    background: var(--ui-surface-2);
}


.ui-register-page .starter-avatar-section h3,
.ui-register-page .starter-avatar-section legend {
    margin: 0 0 6px;

    color: var(--ui-text);

    font-size: 13px;
    line-height: 1.3;
}


.ui-register-page
.starter-avatar-section
img {
    max-width: 130px;
    max-height: 130px;

    object-fit: contain;
}


.ui-register-page
.starter-avatar-section
input[type="radio"] {
    accent-color: var(--ui-accent);
}


/*
 * Current / future starter avatar container names.
 * 存在しないClassは無害。
 */
.ui-register-page .starter-avatar-options,
.ui-register-page .starter-avatar-grid,
.ui-register-page .starter-avatar-list {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.ui-register-page .starter-avatar-option,
.ui-register-page .starter-avatar-card,
.ui-register-page .starter-avatar-choice {
    min-width: 0;
    padding: 8px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);

    background: var(--ui-surface-1);
}


.ui-register-page
.starter-avatar-option:has(input:checked),
.ui-register-page
.starter-avatar-card:has(input:checked),
.ui-register-page
.starter-avatar-choice:has(input:checked) {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}


/* ---------------------------------------------------------
   Consent
   --------------------------------------------------------- */

.ui-register-page .registration-consent {
    margin: 12px 0;
    padding: 8px 10px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);

    background: var(--ui-surface-2);
}


.ui-register-page
.registration-consent-label {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    color: var(--ui-text-muted);

    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}


.ui-register-page
.registration-consent-label
input {
    width: auto;
    min-height: auto;
    margin: 3px 0 0;

    flex: 0 0 auto;

    accent-color: var(--ui-accent);
}


.ui-register-page
.registration-consent-label
a {
    color: var(--ui-accent);
    font-weight: 600;
}


/* ---------------------------------------------------------
   Primary action
   --------------------------------------------------------- */

.ui-auth-page .register-submit,
.ui-auth-page .login-submit {
    width: 100%;
    min-height: 40px;
    margin: 2px 0 0;
    padding: 7px 14px;

    border: 1px solid var(--ui-accent);
    border-radius: var(--ui-radius-sm);

    color: #111318;
    background: var(--ui-accent);

    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;

    cursor: pointer;
}


.ui-auth-page .register-submit:hover,
.ui-auth-page .login-submit:hover,
.ui-auth-page .register-submit:focus-visible,
.ui-auth-page .login-submit:focus-visible {
    background: var(--ui-accent-hover);
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.ui-auth-page .register-footer,
.ui-auth-page .login-footer {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid var(--ui-border);

    color: var(--ui-text-muted);

    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}


.ui-auth-page .register-footer p,
.ui-auth-page .login-footer p {
    margin: 0 0 4px;
}


.ui-auth-page .register-footer a,
.ui-auth-page .login-footer a,
.ui-auth-page .login-help a {
    color: var(--ui-accent);
    font-weight: 600;
}


.ui-auth-page .login-help {
    margin: 10px 0 0;

    color: var(--ui-text-weak);

    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .ui-auth-page {
        padding: 12px 10px 20px;
    }


    .ui-auth-page .register-brand,
    .ui-auth-page .login-brand {
        margin-bottom: 9px;
    }


    .ui-auth-page .register-brand h1,
    .ui-auth-page .login-brand h1 {
        font-size: 19px;
    }


    .ui-auth-page .register-brand p,
    .ui-auth-page .login-brand p {
        margin-left: 7px;
        font-size: 10px;
    }


    .ui-auth-page .register-card,
    .ui-auth-page .login-card {
        padding: 12px;
    }


    .ui-auth-page .form-row {
        margin-bottom: 11px;
    }


    .ui-auth-page .form-row input,
    .ui-auth-page .form-row select,
    .ui-auth-page .form-row textarea {
        min-height: 40px;

        /*
         * iOS等でのフォームFocus時の
         * 強制Zoom回避。
         */
        font-size: 16px;
    }


    .ui-auth-page .register-submit,
    .ui-auth-page .login-submit {
        min-height: 42px;
    }


    .ui-register-page
    .starter-avatar-section
    img {
        max-width: 110px;
        max-height: 110px;
    }
}


@media (max-width: 380px) {

    .ui-auth-page {
        padding-inline: 8px;
    }


    .ui-register-page .starter-avatar-options,
    .ui-register-page .starter-avatar-grid,
    .ui-register-page .starter-avatar-list {
        gap: 6px;
    }
}


/* =========================================================
   v0.60B-2
   Auth UI Density Final Adjustment
   ========================================================= */


/* ---------------------------------------------------------
   Global Auth Links

   Browser default blue / visited purpleを使わない。
   --------------------------------------------------------- */

.ui-auth-page a,
.ui-auth-page a:visited {
    color: var(--ui-accent);
    text-decoration-color:
        rgba(197, 161, 91, 0.45);
    text-underline-offset: 2px;
}


.ui-auth-page a:hover,
.ui-auth-page a:focus-visible {
    color: var(--ui-accent-hover);
    text-decoration-color:
        var(--ui-accent-hover);
}


/* ---------------------------------------------------------
   Register width

   760pxでは入力欄が長すぎたため、
   PCでも視線移動を抑える。
   --------------------------------------------------------- */

.ui-auth-page .register-shell {
    width: min(100%, 680px);
    max-width: 680px;
}


/* ---------------------------------------------------------
   Starter Avatar
   --------------------------------------------------------- */

.ui-register-page .starter-avatar-section {
    margin: 2px 0 10px;
    padding: 8px;

    border-radius: var(--ui-radius-sm);
}


.ui-register-page .starter-avatar-title {
    margin: 0 0 2px;

    color: var(--ui-text);

    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
}


.ui-register-page .starter-avatar-help {
    margin: 0 0 7px;

    color: var(--ui-text-weak);

    font-size: 11px;
    line-height: 1.4;
}


/*
 * 2択はPC / Mobileとも横2列を基本とする。
 * Avatar選択だけ巨大な縦Cardへしない。
 */
.ui-register-page .starter-avatar-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;
}


/*
 * 外側LabelはCard化しない。
 * 前回の二重枠を解消する。
 */
.ui-register-page .starter-avatar-option {
    position: relative;

    display: block;

    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    cursor: pointer;
}


/*
 * Radioは機能として残しつつ、
 * Card全体を選択UIとして使う。
 */
.ui-register-page
.starter-avatar-option
> input[type="radio"] {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: 0;
    padding: 0;

    opacity: 0;

    pointer-events: none;
}


/*
 * 実際の選択Card。
 */
.ui-register-page .starter-avatar-card {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 126px;

    padding: 6px 8px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);

    color: var(--ui-text);
    background: var(--ui-surface-1);

    transition:
        border-color 0.12s ease,
        background 0.12s ease;
}


.ui-register-page
.starter-avatar-card
img {
    display: block;

    width: 90px;
    height: 90px;

    max-width: 90px;
    max-height: 90px;

    margin: 0;

    object-fit: contain;
}


.ui-register-page .starter-avatar-name {
    display: block;

    margin-top: 2px;

    color: var(--ui-text);

    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
}


/*
 * 選択中。
 */
.ui-register-page
.starter-avatar-option
> input[type="radio"]:checked
+ .starter-avatar-card {
    border-color: var(--ui-accent);

    background:
        var(--ui-accent-soft);
}


/*
 * Keyboard FocusもCard側に表示する。
 */
.ui-register-page
.starter-avatar-option
> input[type="radio"]:focus-visible
+ .starter-avatar-card {
    outline:
        2px solid
        var(--ui-accent);

    outline-offset: 2px;
}


.ui-register-page
.starter-avatar-option:hover
.starter-avatar-card {
    border-color:
        var(--ui-border-strong);
}


/* ---------------------------------------------------------
   Consent
   --------------------------------------------------------- */

.ui-register-page .registration-consent {
    margin: 10px 0;
    padding: 7px 9px;
}


/* ---------------------------------------------------------
   Auth footer

   ログイン・登録導線をさらに薄くする。
   --------------------------------------------------------- */

.ui-auth-page .register-footer,
.ui-auth-page .login-footer {
    margin-top: 10px;
    padding-top: 8px;

    font-size: 11px;
    line-height: 1.4;
}


.ui-auth-page .register-footer p,
.ui-auth-page .login-footer p {
    margin-bottom: 2px;
}


.ui-auth-page .login-help {
    margin-top: 8px;

    font-size: 11px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Bottom public links

   Classの有無に依存せず、
   Auth画面内の補助LinkをDark Themeへ統一。
   --------------------------------------------------------- */

.ui-auth-page main > a,
.ui-auth-page main nav a {
    color: var(--ui-text-muted);
}


.ui-auth-page main > a:hover,
.ui-auth-page main nav a:hover {
    color: var(--ui-accent-hover);
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .ui-auth-page .register-shell {
        width: 100%;
        max-width: none;
    }


    .ui-register-page .starter-avatar-section {
        padding: 7px;
    }


    .ui-register-page .starter-avatar-grid {
        gap: 6px;
    }


    .ui-register-page .starter-avatar-card {
        min-height: 116px;
        padding: 5px 6px;
    }


    .ui-register-page
    .starter-avatar-card
    img {
        width: 82px;
        height: 82px;

        max-width: 82px;
        max-height: 82px;
    }


    .ui-register-page .starter-avatar-name {
        font-size: 11px;
    }
}


@media (max-width: 360px) {

    .ui-register-page .starter-avatar-grid {
        gap: 5px;
    }


    .ui-register-page .starter-avatar-card {
        min-height: 108px;
    }


    .ui-register-page
    .starter-avatar-card
    img {
        width: 76px;
        height: 76px;

        max-width: 76px;
        max-height: 76px;
    }
}

/* =========================================================
   v0.60B-4
   Public UI Main Revision
   ========================================================= */

.ui-public-page {
    margin: 0;
    min-height: 100vh;
    padding: 16px;

    color: var(--ui-text);

    background:
        linear-gradient(
            180deg,
            #151821 0,
            var(--ui-bg) 220px
        );

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic UI",
        "Yu Gothic",
        Meiryo,
        sans-serif;

    font-size: 14px;
    line-height: 1.58;
}


.ui-public-page .public-shell {
    width: min(100%, 920px);
    max-width: 920px;
    margin: 0 auto;
}


.ui-public-page .public-brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 0 8px;

    margin: 0 0 10px;

    text-align: left;
}


.ui-public-page .public-brand-mark {
    display: inline-block;

    margin: 0;

    color: var(--ui-accent);

    font-size: 15px;
    line-height: 1;
}


.ui-public-page .public-brand h1 {
    margin: 0;

    color: var(--ui-text);

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.04em;
}


.ui-public-page .public-brand p {
    margin: 0 0 0 2px;

    color: var(--ui-text-weak);

    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 0.05em;
}


.ui-public-page .public-card {
    padding: 16px 18px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);

    color: var(--ui-text);
    background: var(--ui-surface-1);

    box-shadow: none;
}


.ui-public-page .public-card h2 {
    margin: 18px 0 7px;

    color: var(--ui-text);

    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}


.ui-public-page .public-card > h2:first-child {
    margin-top: 0;
    font-size: 18px;
}


.ui-public-page .public-card h3 {
    margin: 16px 0 6px;

    color: var(--ui-text);

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}


.ui-public-page .public-card p {
    margin: 6px 0;
}


.ui-public-page .public-card ul,
.ui-public-page .public-card ol {
    margin: 7px 0;
    padding-left: 22px;
}


.ui-public-page .public-card li {
    margin: 3px 0;
}


.ui-public-page .public-card a,
.ui-public-page .public-card a:visited {
    color: var(--ui-accent);

    text-decoration-color:
        rgba(197, 161, 91, 0.45);

    text-underline-offset: 2px;
}


.ui-public-page .public-card a:hover,
.ui-public-page .public-card a:focus-visible {
    color: var(--ui-accent-hover);
    text-decoration-color: var(--ui-accent-hover);
}


.ui-public-page .public-card hr {
    margin: 16px 0;

    border: 0;
    border-top: 1px solid var(--ui-border);
}


.ui-public-page .public-card,
.ui-public-page .public-card p,
.ui-public-page .public-card li,
.ui-public-page .public-card a {
    overflow-wrap: anywhere;
}


/* Notice */

.ui-public-page .public-note {
    margin: 0 0 14px;
    padding: 9px 11px;

    border: 0;
    border-left: 3px solid var(--ui-info);
    border-radius: 0;

    color: var(--ui-text-muted);
    background: var(--ui-surface-2);

    font-size: 13px;
    line-height: 1.5;
}


.ui-public-page .public-note strong {
    display: block;

    margin: 0 0 2px;

    color: var(--ui-text);

    font-size: 13px;
}


.ui-public-page .public-meta {
    margin: 14px 0 0;

    color: var(--ui-text-weak);

    font-size: 12px;
    line-height: 1.45;
}


.ui-public-page .public-messages {
    margin: 0 0 12px;
}


.ui-public-page .public-message {
    padding: 8px 10px;

    border: 0;
    border-left: 3px solid var(--ui-success);
    border-radius: 0;

    color: var(--ui-text-muted);
    background: rgba(103, 184, 131, 0.08);

    font-size: 13px;
    line-height: 1.45;
}


/* Navigation */

.ui-public-page .public-nav {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-top: 18px;
    padding-top: 12px;

    border-top: 1px solid var(--ui-border);
}


.ui-public-page .public-nav-main,
.ui-public-page .public-nav-account {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}


.ui-public-page .public-nav-account {
    padding-top: 1px;
}


.ui-public-page .public-nav a,
.ui-public-page .public-nav a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 4px 8px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);

    color: var(--ui-text-muted);
    background: var(--ui-surface-2);

    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;

    text-decoration: none;
}


.ui-public-page .public-nav a:hover,
.ui-public-page .public-nav a:focus-visible {
    border-color: var(--ui-border-strong);

    color: var(--ui-text);
    background: var(--ui-surface-3);
}


.ui-public-page
.public-nav
a.public-nav-action,
.ui-public-page
.public-nav
a.public-nav-action:visited {
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}


.ui-public-page
.public-nav
a.public-nav-action-primary,
.ui-public-page
.public-nav
a.public-nav-action-primary:visited {
    border-color: var(--ui-accent);

    color: #111318;
    background: var(--ui-accent);
}


.ui-public-page
.public-nav
a.public-nav-action-primary:hover,
.ui-public-page
.public-nav
a.public-nav-action-primary:focus-visible {
    border-color: var(--ui-accent-hover);

    color: #111318;
    background: var(--ui-accent-hover);
}


/* News */

.ui-public-page .public-news-item {
    padding: 12px 0;

    border-bottom: 1px solid var(--ui-border);
}


.ui-public-page .public-news-item:last-of-type {
    border-bottom: 0;
}


.ui-public-page .public-news-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 4px 8px;

    margin: 0 0 4px;

    color: var(--ui-text-weak);

    font-size: 12px;
    line-height: 1.35;
}


.ui-public-page
.public-card
.public-news-title {
    margin: 0 0 4px;

    font-size: 15px;
    line-height: 1.4;
}


.ui-public-page .public-news-item p {
    margin: 4px 0 0;
}


/* FAQ */

.ui-public-page .public-faq-group {
    margin-top: 16px;
}


.ui-public-page .public-faq-group > h2 {
    margin: 0 0 6px;

    color: var(--ui-text-muted);

    font-size: 14px;
}


.ui-public-page .public-faq-item {
    margin: 0 0 6px;
    padding: 9px 11px;

    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);

    background: var(--ui-surface-2);
}


.ui-public-page .public-faq-item[open] {
    border-color: var(--ui-border-strong);
}


.ui-public-page .public-faq-question {
    cursor: pointer;

    color: var(--ui-text);

    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}


.ui-public-page .public-faq-question::marker {
    color: var(--ui-accent);
}


.ui-public-page
.public-card
.public-faq-answer {
    margin: 8px 0 0;

    color: var(--ui-text-muted);

    font-size: 13px;
    line-height: 1.55;
}


/* Support */

.ui-public-page .public-form {
    margin-top: 14px;
}


.ui-public-page .public-form-row {
    margin-bottom: 12px;
}


.ui-public-page .public-form-label {
    display: block;

    margin: 0 0 5px;

    color: var(--ui-text-muted);

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}


.ui-public-page .public-form select,
.ui-public-page .public-form input[type="text"],
.ui-public-page .public-form input[type="email"],
.ui-public-page .public-form textarea {
    width: 100%;
    max-width: 100%;
    min-height: 36px;

    padding: 7px 9px;

    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);

    color: var(--ui-text);
    background: #12151c;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}


.ui-public-page .public-form textarea {
    min-height: 116px;
    resize: vertical;
}


.ui-public-page .public-form select:hover,
.ui-public-page .public-form input[type="text"]:hover,
.ui-public-page .public-form input[type="email"]:hover,
.ui-public-page .public-form textarea:hover {
    border-color: #586477;
}


.ui-public-page .public-form select:focus,
.ui-public-page .public-form input[type="text"]:focus,
.ui-public-page .public-form input[type="email"]:focus,
.ui-public-page .public-form textarea:focus {
    border-color: var(--ui-accent);
}


.ui-public-page .public-form-help {
    margin-top: 4px;

    color: var(--ui-text-weak);

    font-size: 12px;
    line-height: 1.45;
}


.ui-public-page .public-form-errors {
    margin-top: 5px;

    color: #efb0b0;

    font-size: 12px;
    line-height: 1.45;
}


.ui-public-page .public-form-errors ul {
    margin: 0;
    padding-left: 18px;
}


.ui-public-page .public-submit {
    min-width: 112px;
    margin-top: 2px;
}


/* Mobile */

@media (max-width: 600px) {

    .ui-public-page {
        padding: 10px;
    }


    .ui-public-page .public-brand {
        margin-bottom: 8px;
    }


    .ui-public-page .public-brand h1 {
        font-size: 19px;
    }


    .ui-public-page .public-brand p {
        font-size: 10px;
    }


    .ui-public-page .public-card {
        padding: 12px;
    }


    .ui-public-page
    .public-card
    > h2:first-child {
        font-size: 17px;
    }


    .ui-public-page .public-nav {
        margin-top: 14px;
        padding-top: 10px;
    }


    .ui-public-page .public-nav-main,
    .ui-public-page .public-nav-account {
        gap: 4px;
    }


    .ui-public-page .public-nav a,
    .ui-public-page .public-nav a:visited {
        min-height: 32px;
        padding: 5px 7px;
    }


    .ui-public-page .public-form select,
    .ui-public-page .public-form input[type="text"],
    .ui-public-page .public-form input[type="email"],
    .ui-public-page .public-form textarea {
        min-height: 40px;
        font-size: 16px;
    }


    .ui-public-page .public-submit {
        min-height: 40px;
    }
}


@media (max-width: 360px) {

    .ui-public-page {
        padding-inline: 8px;
    }


    .ui-public-page .public-card {
        padding-inline: 10px;
    }
}