@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap");

/* Icon fonts must not inherit body letter-spacing / Plus Jakarta Sans (shows as □). */
.bi,
.bi::before,
.bi::after,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    letter-spacing: normal !important;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: never;
}
.fa,
.fas,
.far,
.fal,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.fa::before,
.fas::before,
.far::before,
.fab::before,
.fa-solid::before,
.fa-regular::before,
.fa-brands::before {
    font-style: normal !important;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    letter-spacing: normal !important;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    speak: never;
}
.fas::before, .fa-solid::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900; }
.far::before, .fa-regular::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 400; }
.fab::before, .fa-brands::before { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; font-weight: 400; }

:root,
html[data-theme="light"] {
    --accent: #00a884;
    --accent-deep: #008069;
    --accent-soft: rgba(0, 168, 132, 0.14);
    --bg: #efeae2;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --rail: #f0f2f5;
    --text: #111b21;
    --muted: #667781;
    --border: #e9edef;
    --shadow: 0 12px 40px rgba(17, 27, 33, 0.08);
    --radius: 18px;
    --sidebar: 76px;
    --incoming: #ffffff;
    --outgoing: #d9fdd3;
    --tick: #53bdeb;
    --wallpaper: #efeae2;
    --scroll-thumb: rgba(17, 27, 33, 0.22);
    --scroll-thumb-hover: rgba(0, 168, 132, 0.55);
    --hover: rgba(17, 27, 33, 0.05);
    --header: #ffffff;
    --composer: #ffffff;
    --composer-border: rgba(17, 27, 33, 0.08);
    --day-chip-bg: #ffffff;
    --day-chip-text: #54656f;
    --msg-me-text: #111b21;
    --msg-meta: rgba(17, 27, 33, 0.45);
    --vn-bar: #d1d7db;
    --vn-bar-on: #54656f;
    --vn-bar-me: rgba(17, 140, 90, 0.32);
    --vn-bar-me-on: #025144;
    --vn-play: #54656f;
    --vn-play-me: #027a5a;
    --menu: #ffffff;
    --menu-border: rgba(17, 27, 33, 0.08);
    --danger: #dc2626;
    --online: #25d366;
    --sender: #06a9a0;
    --overlay: rgba(17, 27, 33, 0.22);
    --hairline: rgba(17, 27, 33, 0.08);
    --chip: rgba(17, 27, 33, 0.06);
    --wallpaper-a: rgba(138, 127, 114, 0.14);
    --wallpaper-b: rgba(17, 27, 33, 0.06);
    --wallpaper-grad: #efeae2;
    --wallpaper-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%238d8378' stroke-width='1.35' stroke-linecap='round' stroke-opacity='0.18'%3E%3Ccircle cx='58' cy='72' r='13'/%3E%3Ccircle cx='292' cy='96' r='8'/%3E%3Ccircle cx='176' cy='268' r='11'/%3E%3Ccircle cx='318' cy='248' r='5'/%3E%3Cpath d='M98 148c22-26 58-20 66 10'/%3E%3Cpath d='M232 198c24 20 54 8 60-18'/%3E%3Cpath d='M42 286c32 10 46-22 24-36'/%3E%3Cpath d='M210 52l14 5'/%3E%3Cpath d='M314 168v16'/%3E%3Cpath d='M128 322h18'/%3E%3Cpath d='M268 312l10 10'/%3E%3Cpath d='M80 210l-8 12'/%3E%3C/g%3E%3Cg fill='%238d8378' fill-opacity='0.16'%3E%3Ccircle cx='138' cy='98' r='1.8'/%3E%3Ccircle cx='228' cy='148' r='1.6'/%3E%3Ccircle cx='74' cy='218' r='1.7'/%3E%3Ccircle cx='254' cy='328' r='1.8'/%3E%3Ccircle cx='328' cy='44' r='1.5'/%3E%3Ccircle cx='188' cy='188' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
    --wallpaper-sheen: transparent;
    --dock-fade: #f0f2f5;
    color-scheme: light;
}

html[data-theme="dark"] {
    --accent: #00a884;
    --accent-deep: #025144;
    --accent-soft: rgba(0, 168, 132, 0.18);
    --bg: #0b141a;
    --surface: #111b21;
    --surface-2: #202c33;
    --rail: #202c33;
    --text: #e9edef;
    --muted: #8696a0;
    --border: #2a3942;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --incoming: #202c33;
    --outgoing: #005c4b;
    --tick: #7ec8e3;
    --wallpaper: #0c1318;
    --scroll-thumb: rgba(233, 237, 239, 0.16);
    --scroll-thumb-hover: rgba(0, 168, 132, 0.45);
    --hover: rgba(255, 255, 255, 0.06);
    --header: #202c33;
    --composer: #202c33;
    --composer-border: rgba(255, 255, 255, 0.06);
    --day-chip-bg: #182229;
    --day-chip-text: #8696a0;
    --msg-me-text: #e9edef;
    --msg-meta: rgba(233, 237, 239, 0.55);
    --vn-bar: #3b4a54;
    --vn-bar-on: #c5d0d6;
    --vn-bar-me: rgba(255, 255, 255, 0.28);
    --vn-bar-me-on: #e7fff6;
    --vn-play: #8696a0;
    --vn-play-me: #d4f5e8;
    --menu: #233138;
    --menu-border: rgba(255, 255, 255, 0.06);
    --danger: #f87171;
    --online: #25d366;
    --sender: #53bdeb;
    --overlay: rgba(0, 0, 0, 0.5);
    --hairline: rgba(255, 255, 255, 0.06);
    --chip: rgba(255, 255, 255, 0.08);
    --wallpaper-a: rgba(0, 168, 132, 0.07);
    --wallpaper-b: rgba(12, 40, 48, 0.45);
    --wallpaper-grad: linear-gradient(180deg, #121a1f 0%, #0c1318 100%);
    --wallpaper-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%2389d4c6' stroke-width='1.35' stroke-linecap='round' stroke-opacity='0.2'%3E%3Ccircle cx='58' cy='72' r='13'/%3E%3Ccircle cx='292' cy='96' r='8'/%3E%3Ccircle cx='176' cy='268' r='11'/%3E%3Ccircle cx='318' cy='248' r='5'/%3E%3Cpath d='M98 148c22-26 58-20 66 10'/%3E%3Cpath d='M232 198c24 20 54 8 60-18'/%3E%3Cpath d='M42 286c32 10 46-22 24-36'/%3E%3Cpath d='M210 52l14 5'/%3E%3Cpath d='M314 168v16'/%3E%3Cpath d='M128 322h18'/%3E%3Cpath d='M268 312l10 10'/%3E%3Cpath d='M80 210l-8 12'/%3E%3C/g%3E%3Cg fill='%2300a884' fill-opacity='0.22'%3E%3Ccircle cx='138' cy='98' r='1.8'/%3E%3Ccircle cx='228' cy='148' r='1.6'/%3E%3Ccircle cx='74' cy='218' r='1.7'/%3E%3Ccircle cx='254' cy='328' r='1.8'/%3E%3Ccircle cx='328' cy='44' r='1.5'/%3E%3Ccircle cx='188' cy='188' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
    --wallpaper-sheen: transparent;
    --dock-fade: #202c33;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 99px;
}
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

.contact-list,
.chat-list-items,
.chat-messages,
.content-area,
.files-table-wrap,
.search-results,
.notify-panel,
.sidebar-nav,
.modal-body,
.modal-dialog-scrollable .modal-body {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.contact-list:hover,
.chat-list-items:hover,
.chat-messages:hover,
.content-area:hover,
.files-table-wrap:hover,
.search-results:hover,
.notify-panel:hover,
.sidebar-nav:hover,
.modal-body:hover,
.modal-dialog-scrollable .modal-body:hover {
    scrollbar-color: var(--scroll-thumb-hover) transparent;
}
.contact-list:hover::-webkit-scrollbar-thumb,
.chat-list-items:hover::-webkit-scrollbar-thumb,
.chat-messages:hover::-webkit-scrollbar-thumb,
.content-area:hover::-webkit-scrollbar-thumb,
.files-table-wrap:hover::-webkit-scrollbar-thumb,
.search-results:hover::-webkit-scrollbar-thumb,
.notify-panel:hover::-webkit-scrollbar-thumb,
.sidebar-nav:hover::-webkit-scrollbar-thumb,
.modal-body:hover::-webkit-scrollbar-thumb,
.modal-dialog-scrollable .modal-body:hover::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-hover);
}
body.app-body, body.login-body {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    background: var(--bg);
    color: var(--text);
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.app-body {
    min-height: 100%;
    overflow: hidden;
}
body.view-chats.app-body {
    height: 100%;
    height: 100dvh;
}
#form1 {
    height: 100%;
    min-height: 0;
    margin: 0;
}

.login-body {
    min-height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(800px 400px at 50% -8%, rgba(0, 168, 132, 0.12), transparent 58%),
        #f5f2eb;
}
html[data-theme="light"] .login-body {
    background:
        radial-gradient(800px 400px at 50% -8%, rgba(0, 168, 132, 0.1), transparent 58%),
        #f5f2eb;
}
html[data-theme="dark"] .login-body {
    background:
        radial-gradient(800px 400px at 50% -8%, rgba(0, 168, 132, 0.16), transparent 58%),
        #0b141a;
}
.login-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}
.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.login-orb-a {
    width: 420px;
    height: 420px;
    top: -140px;
    left: -80px;
    background: rgba(0, 168, 132, 0.28);
}
.login-orb-b {
    width: 360px;
    height: 360px;
    right: -100px;
    bottom: -120px;
    background: rgba(2, 81, 68, 0.4);
}
html[data-theme="light"] .login-orb-a { background: rgba(0, 168, 132, 0.18); }
html[data-theme="light"] .login-orb-b { background: rgba(0, 128, 105, 0.12); }
.login-wrap {
    position: relative;
    z-index: 1;
    width: min(860px, 94vw);
}
.login-wrap-auth {
    width: min(440px, 94vw);
}
.login-wrap-signup {
    width: min(580px, 94vw);
}
.login-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.32);
}
.login-card-solo {
    display: block;
    border-radius: 22px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 16px 48px rgba(17, 27, 33, 0.07);
    animation: authIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes authIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
html[data-theme="light"] .login-card-solo {
    border-color: rgba(17, 27, 33, 0.08);
    box-shadow: 0 16px 48px rgba(17, 27, 33, 0.07);
}
html[data-theme="dark"] .login-card-solo {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.login-top {
    text-align: center;
    padding: 8px 0 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.login-top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent) 65%, transparent);
    opacity: 0.85;
}
.login-top .login-brand-row {
    justify-content: center;
    gap: 12px;
}
.login-top h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: var(--text);
    text-align: left;
}
.login-tagline {
    margin: 3px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-align: left;
    letter-spacing: -0.01em;
}
.login-top .brand-mark {
    width: 48px;
    height: 48px;
    font-size: 16px;
    border-radius: 14px;
}
.auth-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.auth-steps li {
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.auth-steps li.is-done {
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-color: rgba(0, 168, 132, 0.18);
}
.auth-steps li.is-on {
    color: #fff;
    background: var(--accent);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(0, 168, 132, 0.28);
}
html[data-theme="dark"] .auth-steps li.is-done { color: #6ee7b7; }
.login-card-solo .login-form {
    padding: 36px 36px 32px;
}
.login-card-solo .login-form-head {
    text-align: center;
    margin-bottom: 26px;
}
.login-card-solo .login-form-head h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.login-card-solo .login-kicker {
    letter-spacing: 0.16em;
}
.login-card-solo .login-input {
    height: 54px;
    border-radius: 16px;
    border: 1px solid transparent;
}
.login-card-solo .login-submit {
    height: 54px;
    border-radius: 16px;
    font-size: 15px;
    box-shadow: 0 12px 28px rgba(0, 168, 132, 0.28);
}
.login-card-solo .login-switch,
.login-card-solo .demo-hint {
    text-align: center;
}
html[data-theme="light"] .login-card {
    border-color: rgba(17, 27, 33, 0.06);
    box-shadow: 0 24px 50px rgba(17, 27, 33, 0.1);
}
.login-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    color: #e9edef;
    background:
        radial-gradient(380px 220px at 0% 0%, rgba(0, 168, 132, 0.35), transparent 60%),
        linear-gradient(165deg, #025144, #0b141a 72%);
}
.login-brand .brand-mark {
    width: 52px;
    height: 52px;
    font-size: 18px;
    border-radius: 16px;
    flex-shrink: 0;
}
.login-brand-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.login-brand h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: #fff;
}
.login-brand-lead {
    margin: 14px 0 0;
    color: #aebac1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}
.login-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.login-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #c5d0d6;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.login-chips i { color: #1ad19a; font-size: 13px; }
.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    background: var(--surface);
    color: var(--text);
}
.login-form-head { margin: 0 0 24px; }
.login-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.login-form h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.login-alert {
    margin: 0 0 16px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #f87171;
    font-size: 13.5px;
    font-weight: 600;
}
.login-field {
    margin-bottom: 18px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.login-field:focus-within { box-shadow: none; }
.login-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}
.login-input {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 16px;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.login-field:focus-within .login-input {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.login-input > i { color: var(--muted); font-size: 16px; flex-shrink: 0; }
.login-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.login-input input::placeholder { color: var(--muted); opacity: .7; }
.login-input input:-webkit-autofill,
.login-input input:-webkit-autofill:hover,
.login-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    border: 0;
    transition: background-color 9999s ease-out;
    box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
}
.login-input input::placeholder { color: var(--muted); opacity: .75; }
.login-eye {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 6px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    line-height: 1;
    cursor: pointer;
}
.login-eye:hover { color: var(--text); }
.login-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--muted);
    cursor: pointer;
}
.login-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}
.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 168, 132, 0.24);
    transition: background .16s ease, transform .16s ease;
}
.login-submit:hover { background: var(--accent-deep); transform: translateY(-1px); }
.login-submit:disabled { opacity: .72; transform: none; cursor: wait; }
.login-submit.is-busy i { display: none; }
.demo-hint {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.45;
}
.brand-mark, .rail-brand {
    width: 46px; height: 46px; border-radius: 16px;
    background: linear-gradient(145deg, #00d9a5, #008069);
    color: #fff;
    display: grid; place-items: center; font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 168, 132, 0.35);
}

.app-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
}
.app-sidebar {
    width: var(--sidebar);
    background: var(--rail);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    z-index: 40;
    gap: 8px;
}
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    text-align: center;
}
.sidebar-brand .brand-copy { display: none; }
#btnCloseSidebar {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text) !important;
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    cursor: pointer;
}
.sidebar-user > div:last-child { display: none; }
.app-sidebar .sidebar-search { display: none; }
.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    width: 100%;
    overflow: visible;
}
.nav-item {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    text-decoration: none;
    position: relative;
    font-size: 0;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item i { font-size: 20px; }
.nav-item:hover { background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); }
.nav-item.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 168, 132, 0.32);
}
.rail-tip {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    padding: 9px 14px 9px 16px;
    border-radius: 12px;
    background: rgba(17, 27, 33, 0.92);
    color: #f8fafc;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow:
        0 18px 40px rgba(11, 20, 26, 0.28),
        0 0 0 1px rgba(0, 168, 132, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-50%) translateX(-8px) scale(.96);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .2, 1);
}
.rail-tip.show {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
}
.rail-tip::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: inherit;
    border-radius: 2px;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: -1px 1px 0 rgba(0, 168, 132, 0.18);
}
html[data-theme="light"] .rail-tip {
    background: rgba(255, 255, 255, 0.96);
    color: #111b21;
    box-shadow:
        0 16px 36px rgba(17, 27, 33, 0.12),
        0 0 0 1px rgba(0, 168, 132, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@media (max-width: 991.98px) {
    .rail-tip { display: none !important; }
}
.sidebar-footer { width: 100%; margin-top: auto; }
.sidebar-footer .btn,
#btnLogout {
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
}
.sidebar-footer .btn:hover,
#btnLogout:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.sidebar-footer .btn i,
#btnLogout i { font-size: 18px; }
.sidebar-footer .btn span { display: none; }
.badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--online);
    box-shadow: 0 0 0 3px var(--rail);
}

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
body.view-chats .app-topbar,
body.view-profile .app-topbar { display: none; }
body.view-chats .app-main {
    min-height: 0;
    flex: 1;
    overflow: hidden;
}
body.view-chats #chat-workspace {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
body:not(.view-chats) #chat-workspace {
    display: none !important;
}
@media (max-width: 991.98px) {
    body.view-chats .app-topbar { display: none !important; }
    body.view-chats .app-main {
        min-height: 0;
        height: 100%;
        flex: 1;
        overflow: hidden;
    }
    body.view-chats #chat-workspace {
        flex: 1;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }
}
body.view-profile .content-area {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }
.topbar-menu {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0 0 0 -8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.topbar-menu:hover,
.topbar-menu:focus-visible {
    background: var(--accent-soft);
    color: var(--accent-deep);
    outline: none;
}
.topbar-menu-icon,
.topbar-menu-icon::before,
.topbar-menu-icon::after {
    display: block;
    width: 18px;
    height: 1.75px;
    border-radius: 99px;
    background: currentColor;
}
.topbar-menu-icon {
    position: relative;
    height: 1.75px;
}
.topbar-menu-icon::before,
.topbar-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
}
.topbar-menu-icon::before { top: -6px; }
.topbar-menu-icon::after { top: 6px; }
.topbar-back {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0 4px 0 -8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 20px;
    transition: background .16s ease, color .16s ease;
}
.topbar-back:hover,
.topbar-back:focus-visible,
.topbar-back:active {
    background: var(--accent-soft);
    color: var(--accent-deep);
    outline: none;
}
.content-area { flex: 1; overflow: auto; padding: 24px; }
.soft-card {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
    color: var(--text);
}

.avatar, .avatar-xl {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.avatar-xl { width: 88px; height: 88px; font-size: 32px; }
.online-dot { width: 10px; height: 10px; background: var(--online); border-radius: 50%; border: 2px solid var(--surface); }

.search-results, .notify-panel {
    position: absolute;
    right: 24px;
    top: 62px;
    width: min(420px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 40;
    max-height: 70vh;
    overflow: auto;
    padding: 12px;
}
.search-results { left: calc(var(--sidebar) + 24px); right: auto; width: min(560px, 70vw); }
.search-sec {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -0.02em;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
}
.search-sec i { color: var(--muted); font-size: 12px; }
.search-sec:hover { background: var(--hover); }
.search-results .person-row { width: 100%; }

.notify-panel {
    right: 16px;
    width: min(400px, 94vw);
    max-height: min(72vh, 560px);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, sans-serif;
    letter-spacing: 0;
}
.notify-panel.d-none { display: none !important; }
.nf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.nf-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
}
.nf-readall {
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    padding: 0;
    font-family: inherit;
    white-space: nowrap;
}
.nf-readall:hover { text-decoration: underline; }
.nf-list { overflow: auto; flex: 1; }
.nf-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 11px 16px;
    font-family: inherit;
}
.nf-item:last-child { border-bottom: 0; }
.nf-item:hover { background: var(--hover); }
.nf-item.unread { background: var(--accent-soft); }
.nf-item.unread:hover { background: var(--accent-soft); }
.nf-copy { min-width: 0; flex: 1; }
.nf-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.nf-name {
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nf-item.unread .nf-name { font-weight: 600; }
.nf-time {
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}
.nf-item.unread .nf-time { color: var(--accent); font-weight: 600; }
.nf-preview {
    margin-top: 2px;
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.nf-empty {
    padding: 48px 28px;
    text-align: center;
    color: var(--muted);
}
.nf-empty i {
    display: block;
    font-size: 42px;
    color: var(--accent);
    margin-bottom: 12px;
}
.nf-empty strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.nf-empty span { font-size: 13.5px; }
.nf-glyph {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 16px;
}
#btnNotifications.is-open {
    background: var(--hover) !important;
    border-color: var(--hairline) !important;
}
#notifyBadge {
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-grid;
    place-items: center;
    position: absolute;
    top: 4px;
    right: 4px;
    border: 2px solid var(--surface);
}

.page-head h3 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
}
.page-sub { color: var(--muted); margin: 4px 0 0; font-size: 13px; }

.settings-page { max-width: 760px; }
.settings-grid {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}
.settings-page .dash-panel { padding: 0 18px 10px; }
.settings-page .dash-panel-head { padding-left: 0; padding-right: 0; }
.settings-page .wa-switch-row:last-of-type { border-bottom: 0; }
.settings-hint {
    color: var(--muted);
    font-size: 12.5px;
    margin: 0 0 12px;
    line-height: 1.45;
}
.settings-foot {
    margin-top: 18px;
    color: var(--muted);
    font-size: 13px;
}
.settings-foot a {
    color: var(--accent-deep);
    font-weight: 650;
    text-decoration: none;
}

.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.drop-zone {
    position: relative;
    border: 1px dashed rgba(0, 168, 132, 0.35);
    border-radius: 22px;
    padding: 36px 24px;
    text-align: center;
    background: var(--accent-soft);
    margin-bottom: 22px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.drop-zone.drag {
    border-color: var(--accent);
    background: rgba(0, 168, 132, 0.16);
    transform: translateY(-1px);
}
.files-share {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
.files-share .drop-zone { margin-bottom: 0; }
.link-zone {
    border: 1px dashed rgba(0, 168, 132, 0.35);
    border-radius: 22px;
    padding: 28px 24px 24px;
    background: var(--surface);
    text-align: center;
}
.link-zone .drop-orb { margin-bottom: 10px; }
.link-zone h4 { font-size: 18px; font-weight: 650; margin: 0 0 6px; }
.link-zone p { color: var(--muted); margin: 0 0 16px; font-size: 13px; }
.link-zone .wa-label { text-align: left; margin-top: 8px; }
.link-input {
    display: block;
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    padding: 10px 12px;
    margin-bottom: 8px;
    outline: none;
}
.link-input:focus { border-color: var(--accent); }
.link-msg { min-height: 18px; margin-top: 8px; font-size: 13px; color: var(--accent); font-weight: 600; }
.files-filters { display: flex; gap: 6px; }
.files-chip {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-family: inherit;
}
.files-chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 650; }
.file-glyph.link { background: rgba(14, 165, 233, .15); color: #38bdf8; }
.file-url {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
@media (max-width: 767.98px) {
    .files-share { grid-template-columns: 1fr; }
}
.drop-orb {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 28px;
}
.drop-zone h4 { font-size: 18px; font-weight: 650; margin: 0 0 6px; }
.drop-zone p { color: var(--muted); margin: 0 0 16px; font-size: 13px; }
.btn-browse {
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    font-weight: 650;
    box-shadow: 0 10px 22px rgba(0, 168, 132, 0.28);
}
.btn-browse:hover { filter: brightness(1.06); }
.upload-meter {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin: 18px auto 0;
    max-width: 280px;
}
.upload-meter-bar {
    height: 100%;
    background: linear-gradient(90deg, #0e9f78, #1ad19a);
    border-radius: 999px;
}

.files-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.files-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 650;
}
.files-count { color: var(--muted); font-size: 12px; font-weight: 500; }
.files-table-wrap { overflow: auto; }
.files-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
}
.files-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 650;
    padding: 12px 18px;
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid var(--border);
}
.files-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    vertical-align: middle;
}
.files-table tr:last-child td { border-bottom: 0; }
.files-table tbody tr:hover { background: rgba(0, 168, 132, 0.05); }
.file-name { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.file-glyph {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.file-glyph.pdf { background: rgba(239, 68, 68, .15); color: #f87171; }
.file-glyph.doc { background: rgba(59, 130, 246, .15); color: #60a5fa; }
.file-glyph.sheet { background: rgba(34, 197, 94, .15); color: #4ade80; }
.file-glyph.deck { background: rgba(249, 115, 22, .15); color: #fb923c; }
.file-glyph.media { background: rgba(0, 168, 132, .15); color: #2dd4bf; }
.file-glyph.video { background: rgba(168, 85, 247, .15); color: #c084fc; }
.file-glyph.audio { background: rgba(14, 165, 233, .15); color: #38bdf8; }
.file-glyph.zip { background: rgba(234, 179, 8, .15); color: #facc15; }
.file-glyph.file { background: var(--accent-soft); color: var(--accent); }
.file-acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.file-dl {
    color: var(--accent);
    text-decoration: none;
    font-weight: 650;
    font-size: 13px;
    white-space: nowrap;
}
.file-dl:hover { color: #1ad19a; }
.file-del {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    font-size: 15px;
    border-radius: 8px;
}
.file-edit {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    font-size: 15px;
    border-radius: 8px;
}
.file-edit:hover {
    color: var(--accent);
    background: var(--accent-soft);
}
.file-del:hover {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.08);
}
.files-empty { text-align: center; color: var(--muted); padding: 28px 12px; }

.person-row, .chat-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background .15s ease;
}
.person-row {
    border-radius: 14px;
    border: 0;
    width: 100%;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}
.person-row:hover, .chat-row:hover { background: var(--surface-2); }
.chat-row.active { background: var(--surface-2); }

.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 168, 132, 0.25);
}
.btn-primary:hover { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; }

.app-topbar .sidebar-search {
    position: relative;
    display: block;
}
.app-topbar .sidebar-search i {
    position: absolute;
    left: 14px;
    top: 11px;
    color: var(--muted);
}
.app-topbar .sidebar-search input {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 10px 14px 10px 40px;
    background: var(--surface-2);
    color: var(--text);
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform .22s ease;
        width: min(86vw, 300px);
        align-items: stretch;
        padding: 18px;
    }
    .app-sidebar.open { transform: none; }
    .sidebar-brand { flex-direction: row; text-align: left; width: 100%; align-items: center; }
    .sidebar-brand .brand-copy { display: block; }
    .sidebar-user { flex-direction: row; }
    .sidebar-user > div:last-child { display: block; }
    .app-sidebar .sidebar-search { display: block; position: relative; }
    .sidebar-search i { position: absolute; left: 12px; top: 11px; color: var(--muted); }
    .sidebar-search input {
        width: 100%;
        border: 0;
        border-radius: 999px;
        padding: 10px 12px 10px 36px;
        background: var(--surface-2);
        color: var(--text);
    }
    .sidebar-nav { align-items: stretch; overflow: auto; }
    .nav-item {
        width: 100%;
        height: auto;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 14px;
        font-size: 15px;
        font-weight: 600;
    }
    .nav-nudge { top: 14px; right: 16px; }
    .sidebar-footer .btn,
    #btnLogout {
        width: 100%;
        height: 46px;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 650;
        gap: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }
    .sidebar-footer .btn span { display: inline; font-size: 14px; }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--overlay);
        z-index: 30;
    }
    .sidebar-backdrop.show { display: block; }
    .login-card { grid-template-columns: 1fr; }
    .login-brand { display: none; }
    .login-form { padding: 28px; }
    body.view-profile .app-topbar { display: flex; }
}

.btn {
    -webkit-appearance: none;
    appearance: none;
}
.btn-light {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.app-topbar .btn-light {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none;
}
.app-topbar .btn-light:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.btn-outline-secondary {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.btn-outline-secondary:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.form-control,
.form-select {
    background: var(--surface-2);
    color: var(--text);
    border-color: transparent;
}
.form-control:focus,
.form-select:focus {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.form-control::placeholder { color: var(--muted); }
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.btn-close { filter: none; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.table { color: var(--text); }
.modal-content { background: var(--surface); color: var(--text); border-color: var(--border); }
.modal-header, .modal-footer { border-color: var(--border); }
.list-group-item {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.alert-success {
    background: var(--accent-soft);
    color: var(--accent-deep);
    border-color: transparent;
}
html[data-theme="dark"] .alert-success { color: #6ee7b7; }
.alert-danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    border-color: transparent;
}
.dropdown-menu {
    background: var(--menu);
    color: var(--text);
    border-color: var(--menu-border);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--hover);
    color: var(--text);
}
.form-check-input {
    background-color: var(--surface-2);
    border-color: var(--border);
}
.text-muted { color: var(--muted) !important; }


.wa-profile {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    flex: 1;
    height: 100%;
    min-height: 0;
    background: var(--surface);
    color: var(--text);
    font-feature-settings: "kern" 1, "liga" 1;
}
.wa-profile-nav {
    border-right: 1px solid var(--border);
    overflow: auto;
    padding: 22px 18px 36px;
    min-height: 0;
    background: var(--surface);
}
.wa-profile-nav h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.1;
    margin: 2px 10px 18px;
}
.wa-search {
    position: relative;
    margin: 0 6px 14px;
}
.wa-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
}
.wa-search input {
    width: 100%;
    border: 1px solid transparent;
    background: var(--surface-2);
    color: var(--text);
    border-radius: 999px;
    padding: 10px 16px 10px 40px;
    outline: none;
    font-size: 14.5px;
    letter-spacing: -0.01em;
}
.wa-search input:focus { border-color: var(--accent); }
.wa-nudge {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--accent-soft);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 14px 16px 12px;
    margin: 0 6px 20px;
    position: relative;
}
.wa-nudge > i {
    color: var(--accent);
    font-size: 20px;
    margin-top: 2px;
}
.wa-nudge strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.wa-nudge p {
    margin: 4px 0 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
}
.wa-link {
    border: 0;
    background: none;
    color: var(--accent);
    font-weight: 700;
    padding: 0;
    font-size: 13.5px;
    letter-spacing: -0.01em;
}
.wa-nudge-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: none;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    opacity: .7;
}
.wa-hero {
    text-align: center;
    padding: 4px 0 22px;
}
.wa-mood {
    display: inline-block;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 14px 14px 14px 4px;
    margin-bottom: 14px;
    max-width: 260px;
    letter-spacing: -0.01em;
}
.wa-photo-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.wa-photo,
.wa-photo.avatar {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 60px;
    margin: 0 auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.wa-photo-lg,
.wa-photo-lg.avatar {
    width: 160px;
    height: 160px;
    font-size: 54px;
}
.wa-camera {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(17, 27, 33, 0.62);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
.wa-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wa-item {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    padding: 13px 14px;
    border-radius: 14px;
}
.wa-item i {
    font-size: 20px;
    color: var(--muted);
    width: 26px;
    flex-shrink: 0;
}
.wa-item strong {
    display: block;
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -0.025em;
}
.wa-item small {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0;
}
.wa-item:hover { background: var(--hover); }
.wa-item.active { background: var(--surface-2); }
.wa-item.active i { color: var(--accent); }
.wa-profile-detail {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-width: 0;
    background:
        radial-gradient(520px 220px at 100% 0%, rgba(0, 168, 132, 0.07), transparent 60%),
        var(--surface);
}
.wa-detail-bar {
    display: none;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 56px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 5;
}
.wa-detail-back {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 20px;
    cursor: pointer;
}
.wa-detail-back:hover { background: var(--hover); }
.wa-detail-bar h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.wa-profile-detail-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 28px 56px 56px;
}
.wa-edit { max-width: 520px; }
.wa-profile-detail h3,
.wa-edit h3 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.045em;
    margin: 0 0 8px;
    line-height: 1.15;
}
.wa-hint {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 500;
    margin: 0 0 28px;
    letter-spacing: -0.01em;
}
.wa-edit-photo {
    display: flex;
    justify-content: center;
    margin: 0 0 28px;
    cursor: pointer;
}
.wa-label {
    display: block;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 0 6px;
}
.wa-input,
.wa-edit .wa-input.form-control {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: -0.02em;
    padding: 8px 0 12px;
    margin-bottom: 22px;
    box-shadow: none;
}
textarea.wa-input {
    resize: none;
    min-height: 88px;
    line-height: 1.5;
}
.wa-input::placeholder {
    color: var(--muted);
    font-weight: 500;
    opacity: 0.85;
}
.wa-input:focus {
    border-bottom-color: var(--accent);
    box-shadow: none;
    outline: none;
    background: transparent;
    color: var(--text);
}
.wa-input:disabled,
.wa-input[readonly] {
    opacity: .75;
    cursor: default;
}
.wa-input[readonly]:focus {
    border-bottom-color: var(--border);
}
.wa-save {
    margin-top: 8px;
    padding: 10px 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 168, 132, 0.32);
}
.wa-switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.wa-switch-row strong {
    display: block;
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -0.02em;
}
.wa-switch-row small {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    margin-top: 3px;
}
.wa-info-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.wa-info-row span { color: var(--muted); font-weight: 500; }
.wa-info-row strong { font-weight: 700; letter-spacing: -0.02em; }

.wa-acc { max-width: 560px; }
.wa-acc-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.wa-acc-row {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 16px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
}
.wa-acc-row:hover { background: var(--hover); }
.wa-acc-row i {
    font-size: 22px;
    color: var(--muted);
    width: 28px;
    flex-shrink: 0;
    margin-top: 2px;
}
.wa-acc-row strong {
    display: block;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.wa-acc-row small {
    display: block;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 400;
    margin-top: 4px;
    line-height: 1.4;
    letter-spacing: 0;
}
.wa-acc-row.danger,
.wa-acc-row.danger i,
.wa-acc-row.danger strong { color: var(--danger); }
.wa-acc-row.danger:hover { background: rgba(220, 38, 38, 0.08); }
.wa-acc-head {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0 0 22px;
    margin: 0;
    font-family: inherit;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.15;
    cursor: pointer;
}
.wa-acc-head i {
    font-size: 20px;
    color: var(--muted);
    font-weight: 400;
}
.wa-acc-head:hover i { color: var(--text); }

.wa-section-label {
    margin: 18px 10px 6px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.wa-priv-row {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 15px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.wa-priv-row:hover { background: var(--hover); }
.wa-priv-row em {
    color: var(--muted);
    font-style: normal;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
}
.wa-radio-list { margin-top: 4px; }
.wa-radio-row {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 14px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 500;
}
.wa-radio-row:hover { background: var(--hover); }
.wa-radio-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--muted);
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.wa-radio-row.on .wa-radio-dot {
    border-color: var(--accent);
}
.wa-radio-row.on .wa-radio-dot::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
}
#privacyBlockedList .wa-priv-row {
    cursor: default;
    align-items: center;
}
#privacyBlockedList .wa-priv-row:hover { background: transparent; }
#privacyBlockedList .avatar { width: 40px; height: 40px; font-size: 15px; }
#privacyBlockedList .wa-link { margin-left: auto; }
.ci-row.danger, .ci-row.danger i { color: var(--danger); }

.wa-country { margin-bottom: 22px; }
.wa-country-search {
    position: relative;
    margin-bottom: 8px;
}
.wa-country-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 15px;
    pointer-events: none;
}
.wa-country-search input {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 15.5px;
    padding: 12px 14px 12px 42px;
    outline: none;
}
.wa-country-search input:focus {
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.wa-country-list {
    max-height: min(52vh, 420px);
    overflow: auto;
    border-radius: 12px;
    background: var(--surface-2);
}
.wa-country-opt {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 500;
    cursor: pointer;
}
.wa-country-opt:last-child { border-bottom: 0; }
.wa-country-opt:hover { background: var(--hover); }
.wa-country-opt.selected { color: var(--accent); }
.wa-country-opt.selected i { color: var(--accent); font-size: 18px; }
.wa-country-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 991.98px) {
    body.view-profile .app-topbar { display: flex; }
    body.view-profile.profile-detail-open .app-topbar { display: none; }
    .wa-profile {
        grid-template-columns: 1fr;
        position: relative;
    }
    .wa-profile-nav {
        border-right: 0;
        height: 100%;
    }
    .wa-profile-detail {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 30;
        background: var(--surface);
        animation: waSlideIn .22s ease;
    }
    .wa-profile.is-detail-open .wa-profile-nav { visibility: hidden; }
    .wa-profile.is-detail-open .wa-profile-detail {
        display: flex;
    }
    .wa-detail-bar { display: flex; }
    .wa-profile-detail-body { padding: 8px 16px 40px; }
    .wa-profile.is-detail-open .wa-pane > .wa-acc > h3:first-child,
    .wa-profile.is-detail-open .wa-edit > h3:first-child {
        display: none;
    }
    .wa-profile.is-detail-open .wa-acc-head,
    .wa-profile.is-detail-open .wa-hint + .wa-acc-head {
        display: none;
    }
    .wa-acc-sub > .wa-acc-head,
    .wa-gen-sub > .wa-acc-head,
    .wa-priv-sub > .wa-acc-head {
        display: none !important;
    }
}
@keyframes waSlideIn {
    from { transform: translateX(18px); opacity: .6; }
    to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 767.98px) {
    .wa-profile { grid-template-columns: 1fr; }
}

.text-muted { color: var(--muted) !important; }

.dash {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 32px;
}
.dash-welcome {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 0 rgba(17, 27, 33, 0.04);
    animation: dashIn .4s ease both;
}
.dash-welcome-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.dash-welcome h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.15;
}
.dash-lead {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}
.dash-welcome-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.dash-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background: var(--accent);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-radius: 8px;
    transition: background .16s ease;
}
.dash-cta:hover { background: var(--accent-deep); color: #fff !important; }
.dash-cta-ghost {
    color: var(--accent-deep);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.dash-cta-ghost:hover { color: var(--text); }
.dash-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 22px;
}
.dash-metric {
    padding: 14px 16px 12px;
    border-radius: 12px;
    background: var(--surface-2);
    border-top: 3px solid var(--accent);
}
.dash-metric strong {
    display: block;
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1;
}
.dash-metric span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}
@keyframes dashIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
html[data-theme="dark"] .dash-metric { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .dash-cta-ghost { color: #6ee7b7; }
.profile-nudge {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin: 0 0 16px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.profile-nudge[hidden],
.profile-nudge.d-none { display: none !important; }
.profile-nudge-copy { min-width: 0; max-width: 46ch; }
.profile-nudge h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
}
.profile-nudge p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.45;
}
.profile-nudge-actions {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.profile-nudge-go {
    color: var(--accent);
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.profile-nudge-go:hover { color: var(--accent-deep); }
.profile-nudge-later {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}
.profile-nudge-later:hover { color: var(--text); }
.profile-nudge-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.profile-nudge-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.profile-nudge-chip:hover { color: var(--accent-deep); }
.profile-nudge-chip.d-none { display: none !important; }
.nav-nudge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--surface);
}
.nav-item.active .nav-nudge { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.setup-later {
    margin: 14px 0 0;
    text-align: center;
}
.dash-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.dash-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.95fr;
    grid-template-areas:
        "chats online"
        "chats events"
        "files notify";
    gap: 16px;
    align-items: start;
    animation: dashIn .45s ease .06s both;
}
.dash-area-chats { grid-area: chats; }
.dash-area-online { grid-area: online; }
.dash-area-events { grid-area: events; }
.dash-area-files { grid-area: files; }
.dash-area-notify { grid-area: notify; }
.dash-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(17, 27, 33, 0.04);
    overflow: hidden;
    min-width: 0;
}
.dash-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
}
.dash-panel-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.dash-panel-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12.5px;
}
.dash-link {
    color: var(--accent-deep);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    padding-top: 2px;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.dash-link:hover { color: var(--text); }
.dash-list { padding: 6px 8px 10px; }
.dash-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease;
}
.dash-row:hover {
    background: var(--surface-2);
    color: inherit;
}
.dash-avatar-wrap { position: relative; flex-shrink: 0; }
.dash-avatar-wrap .online-dot {
    position: absolute;
    right: 0;
    bottom: 0;
}
.dash-row-body { min-width: 0; flex: 1; }
.dash-row-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}
.dash-name {
    font-weight: 650;
    font-size: 14.5px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-time { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.dash-preview {
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-online { color: var(--online); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.dash-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.dash-event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 10px;
}
.dash-cal {
    width: 44px;
    height: 48px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-cal span { font-size: 18px; font-weight: 750; line-height: 1; }
.dash-cal small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 3px;
}
.dash-note {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 10px 10px;
    border-radius: 10px;
    margin: 0 2px 2px;
}
.dash-note:hover { background: var(--hover); }
.dash-note.is-new { background: var(--accent-soft); }
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 28px 16px;
    color: var(--muted);
}
.dash-empty i { font-size: 20px; color: var(--accent); margin-bottom: 4px; }
.dash-empty strong { color: var(--text); font-size: 14px; }

@media (max-width: 1099.98px) {
    .dash-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "chats"
            "online"
            "events"
            "files"
            "notify";
        gap: 14px;
    }
    .dash-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .dash-welcome { padding: 18px 16px 16px; }
    .dash-welcome h2 { font-size: 22px; }
    .profile-nudge {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 16px;
        padding: 16px;
    }
    .profile-nudge h3 { font-size: 22px; }
}

.announce-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(17, 27, 33, 0.04);
}
.announce-card.acked { border-left-color: var(--online); }
.announce-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.announce-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.announce-card p { color: var(--muted); margin: 0 0 12px; }
.announce-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
.announce-done { color: var(--online); font-weight: 650; font-size: 13px; }
.pending-chip {
    display: inline-block;
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 10px;
    margin: 8px 6px 0 0;
    font-size: 12px;
}
.dash-pulse-wrap { margin-bottom: 16px; }
.pulse-body { padding: 4px 18px 16px; }
.pulse-q { font-weight: 700; margin-bottom: 12px; }
.pulse-opt {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    overflow: hidden;
    text-align: left;
}
.pulse-opt.mine { border-color: var(--accent); }
.pulse-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--accent-soft);
}
.pulse-label, .pulse-pct { position: relative; z-index: 1; font-weight: 650; }
.pulse-meta, .pulse-compose { padding: 0 18px 16px; color: var(--muted); font-size: 12.5px; }
.rsvp-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rsvp-btn {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 650;
}
.rsvp-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.event-grid { display: grid; gap: 14px; }
.event-card {
    display: flex;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
    box-shadow: var(--shadow);
}
.event-card h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.event-card p { color: var(--muted); margin: 8px 0; font-size: 13.5px; }
.people-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.people-page {
    max-width: 760px;
    margin: 0 auto;
    height: 100%;
    min-height: 0;
}
.people-sheet {
    display: flex;
    flex-direction: column;
    height: min(100%, calc(100vh - 110px));
    min-height: 520px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.people-sheet-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 12px;
    background:
        radial-gradient(420px 140px at 0% 0%, rgba(0, 168, 132, 0.14), transparent 60%),
        var(--surface);
}
.people-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.people-sheet-head h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.1;
}
.people-count {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 650;
    padding-bottom: 4px;
}
.people-toolbar {
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--border);
}
.people-search {
    position: relative;
    margin-bottom: 10px;
}
.people-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
    pointer-events: none;
}
.people-search input {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    padding: 11px 16px 11px 40px;
    outline: none;
}
.people-search input:focus {
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.people-select {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    padding: 8px 34px 8px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%238696a0' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    outline: none;
}
.people-list {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 4px 0 10px;
}
.people-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 12px 18px;
    cursor: pointer;
    transition: background .14s ease;
}
.people-row:last-child { border-bottom: 0; }
.people-row:hover { background: var(--hover); }
.people-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.people-avatar,
.people-avatar.avatar {
    width: 52px;
    height: 52px;
    font-size: 18px;
}
.people-avatar-wrap .online-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border-width: 2px;
}
.people-row-body { min-width: 0; flex: 1; }
.people-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.people-name {
    font-size: 16.5px;
    font-weight: 650;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.people-meta {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.people-row:hover .people-meta { color: var(--accent); }
.people-preview {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.people-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 56px 20px;
    color: var(--muted);
}
.people-empty i {
    font-size: 28px;
    color: var(--accent);
    margin-bottom: 8px;
}
.people-empty strong {
    color: var(--text);
    font-size: 15px;
}

@media (max-width: 767.98px) {
    .people-sheet {
        height: auto;
        min-height: 0;
        border-radius: 18px;
    }
    .people-sheet-head h3 { font-size: 24px; }
    .people-row { padding: 12px 14px; }
}

.groups-page { max-width: 1200px; margin: 0 auto; }
.groups-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 4px 20px;
    background: radial-gradient(480px 160px at 0% 0%, rgba(0, 168, 132, 0.14), transparent 62%);
}
.groups-hero h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.04em;
}
.groups-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}
.group-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.group-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 650;
}
.group-chip.on, .group-chip:hover {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.groups-empty { grid-column: 1 / -1; padding: 56px 16px; }
.group-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 250px;
    transition: border-color .16s ease, transform .16s ease;
}
.group-card:hover {
    border-color: rgba(0, 168, 132, 0.45);
    transform: translateY(-2px);
}
.group-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.group-glyph, .group-photo.avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}
.group-glyph.announce, .group-type.announce { background: rgba(59, 130, 246, .16); color: #93c5fd; }
.group-glyph.batch, .group-type.batch { background: rgba(0, 168, 132, .16); color: #2dd4bf; }
.group-glyph.country, .group-type.country { background: rgba(168, 85, 247, .16); color: #d8b4fe; }
.group-glyph.course, .group-type.course { background: rgba(249, 115, 22, .16); color: #fdba74; }
.group-glyph.custom, .group-type.custom { background: var(--accent-soft); color: var(--accent); }
.group-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface-2);
}
.group-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.group-card > p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0 0 16px;
    flex: 1;
}
.group-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 16px;
}
.group-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
}
.group-pill.mute { background: var(--surface-2); color: var(--muted); }
.group-card-actions { display: flex; gap: 8px; }
.group-card-actions .btn { flex: 1; }
.btn-ghost {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}
.btn-ghost:hover { filter: brightness(1.08); }
.group-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.group-member-acts { display: flex; gap: 6px; }
.group-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 8px 0;
}
.group-desc { color: var(--muted); }
.invite-hits { max-height: 220px; overflow: auto; }

html[data-theme="light"] .group-type.announce,
html[data-theme="light"] .group-glyph.announce { color: #1d4ed8; }
html[data-theme="light"] .group-type.country,
html[data-theme="light"] .group-glyph.country { color: #7e22ce; }
html[data-theme="light"] .group-type.course,
html[data-theme="light"] .group-glyph.course { color: #c2410c; }

/* Album — public cohort gallery */
.album-page .page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.album-page .page-head h3 {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.03em;
}
.album-page .page-sub {
    font-size: 12.5px;
}
.album-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.album-drop {
    margin-bottom: 22px;
}
.album-caption-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-width: 520px;
    margin: 0 auto 8px;
}
.album-caption-row .link-input {
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
}
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.album-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 20px;
    text-align: center;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 18px;
    border: 1px dashed rgba(0, 168, 132, 0.2);
}
.album-empty i { font-size: 30px; color: var(--accent); }
.album-empty strong { color: var(--text); font-size: 14px; font-weight: 650; }
.album-empty span { font-size: 12.5px; max-width: 36ch; }
.album-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(17, 27, 33, 0.04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.album-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 168, 132, 0.28);
    box-shadow: 0 10px 24px rgba(17, 27, 33, 0.07);
}
.album-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #0b141a;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.album-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.album-tile:hover .album-thumb img { transform: scale(1.03); }
.album-tile-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px 11px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.album-tile-foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.album-tile-info {
    flex: 1;
    min-width: 0;
}
.album-tile-foot .album-av,
.album-av.avatar {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
.album-tile-info strong {
    display: block;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.album-tile-info span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
}
.album-caption {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.album-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.album-act {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(17, 27, 33, 0.08);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    opacity: 0.72;
    transition: opacity .18s ease, border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.album-act-icon {
    width: 13px;
    height: 13px;
    display: block;
}
.album-tile:hover .album-act,
.album-act:focus-visible {
    opacity: 1;
    border-color: rgba(0, 168, 132, 0.22);
    box-shadow: 0 2px 8px rgba(17, 27, 33, 0.06);
}
.album-dl:hover,
.album-sh:hover {
    opacity: 1;
    border-color: rgba(0, 168, 132, 0.28);
    background: rgba(0, 168, 132, 0.08);
    color: var(--accent);
    transform: scale(1.04);
}
.album-del:hover {
    opacity: 1;
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    transform: scale(1.04);
}
.album-act:active {
    transform: scale(0.96);
}
.album-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 20px 28px;
    background: rgba(11, 20, 26, 0.88);
    backdrop-filter: blur(8px);
}
.album-lightbox.d-none { display: none !important; }
.album-lightbox img {
    max-width: min(920px, 94vw);
    max-height: min(72vh, 820px);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    object-fit: contain;
    background: #000;
}
.album-lb-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.album-lb-close:hover { background: rgba(255, 255, 255, 0.2); }
.album-lb-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.album-lb-act {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.album-lb-act i {
    font-size: 15px;
    opacity: 0.92;
}
.album-lb-act:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}
.album-lb-act:active {
    transform: translateY(0);
}
.album-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1300;
    transform: translateX(-50%);
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(17, 27, 33, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 12px 32px rgba(17, 27, 33, 0.24);
    pointer-events: none;
}
.album-toast.d-none { display: none !important; }
.album-lb-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #e9edef;
    text-align: center;
    max-width: 48ch;
}
.album-lb-meta strong { font-size: 13px; font-weight: 650; }
.album-lb-meta span { color: #aebac1; font-size: 11.5px; font-weight: 500; }
@media (max-width: 640px) {
    .album-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .album-act { opacity: 1; }
}

/* recovered patch 53c92ffe-e5ac-48d1-b27f-e747a3a18144.jsonl:537 */
.login-submit:disabled { opacity: .72; transform: none; cursor: wait; }
.login-submit.is-busy i { display: none; }
.login-switch {
    margin: 16px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}
.login-switch a,
.login-text-btn {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.login-switch a:hover,
.login-text-btn:hover { text-decoration: underline; color: var(--accent-deep); }
.login-optional {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--muted);
    font-size: 10px;
}
.login-roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.login-role {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 12px 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.login-role input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.login-role i { font-size: 18px; color: inherit; }
.login-role strong {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: inherit;
}
.login-role.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-deep);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="dark"] .login-role.is-on { color: #6ee7b7; }
.login-code input {
    letter-spacing: 0.42em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.login-verify-copy {
    margin: -8px 0 18px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}
.login-verify-copy strong { color: var(--text); }
.login-alert.ok {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent-deep);
}
html[data-theme="dark"] .login-alert.ok { color: #6ee7b7; }

/* — Auth pages: simple premium — */
.auth-head {
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.auth-brand .brand-mark {
    width: 38px;
    height: 38px;
    font-size: 14px;
    border-radius: 11px;
}
.auth-brand span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
.auth-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.15;
    color: var(--text);
}
.auth-sub {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: -0.01em;
}
.auth-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.auth-progress li {
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: var(--border);
    transition: width .2s ease, background .2s ease, opacity .2s ease;
}
.auth-progress li.is-done {
    background: var(--accent);
    opacity: 0.35;
}
.auth-progress li.is-on {
    width: 36px;
    background: var(--accent);
    opacity: 1;
}
.auth-form .login-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text);
    margin-bottom: 6px;
}
.auth-form .login-input {
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
}
.auth-form .login-field:focus-within .login-input {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--surface-2);
}
.auth-form .login-input input {
    font-size: 15px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: transparent !important;
}
.auth-form .login-input input:-webkit-autofill,
.auth-form .login-input input:-webkit-autofill:hover,
.auth-form .login-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    border: 0;
    border-radius: 12px;
    transition: background-color 9999s ease-out;
    box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
}
.auth-form .login-field {
    margin-bottom: 14px;
}
.auth-form .login-submit {
    height: 48px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 650;
    box-shadow: none;
    margin-top: 4px;
}
.auth-form .login-submit:hover {
    box-shadow: 0 8px 20px rgba(0, 168, 132, 0.22);
}
.auth-form .login-switch {
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
}
.auth-form .demo-hint {
    margin-top: 12px;
}
.login-card-solo .auth-form {
    padding: 32px 32px 28px;
}
.signup-body .login-wrap {
    width: min(520px, 94vw);
    margin: auto;
    max-height: calc(100vh - 24px);
}
.signup-body .login-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    max-height: calc(100vh - 24px);
}
.signup-body .login-card-solo {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
    border-radius: 22px;
    box-shadow: 0 16px 48px rgba(17, 27, 33, 0.08);
}
html[data-theme="dark"] .signup-body .login-card-solo {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.signup-body .login-form,
.signup-body .signup-form {
    padding: 28px 32px 24px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}
.signup-body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    align-items: center;
    padding: 16px;
}
.signup-panel .login-pair {
    gap: 0 12px;
}
.signup-panel .login-roles {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.signup-panel .login-role {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    height: 38px;
    padding: 0 8px;
    margin: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
}
.signup-panel .login-role strong {
    font-size: 12.5px;
    font-weight: 650;
}
.signup-panel .login-role.is-on {
    background: var(--surface);
    color: var(--accent-deep);
    box-shadow: 0 1px 4px rgba(17, 27, 33, 0.08);
}
html[data-theme="dark"] .signup-panel .login-role.is-on {
    color: #6ee7b7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.signup-panel .login-hint {
    margin: -4px 0 12px;
    font-size: 12px;
    color: var(--muted);
}
.signup-panel .login-alert {
    margin-bottom: 12px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
}
.verify-lead {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}
.verify-lead strong {
    color: var(--text);
    font-weight: 650;
}
.signup-body .verify-step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.signup-body .verify-step .verify-email-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.4;
}
.signup-body .verify-step .verify-email-chip i {
    flex-shrink: 0;
    color: var(--accent);
    font-size: 15px;
}
.signup-body .verify-step .verify-email-chip strong {
    color: var(--text);
    font-weight: 650;
    word-break: break-word;
}
.signup-body .verify-step .verify-alert {
    width: 100%;
    margin-bottom: 12px;
}
.signup-body .verify-step .verify-stack {
    width: 100%;
}
.signup-body .verify-step .verify-stack .login-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.signup-body .verify-step .otp-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0 0 12px;
}
.signup-body .verify-step .otp-box {
    box-sizing: border-box;
    height: 50px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: center;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.signup-body .verify-step .otp-box:hover {
    border-color: rgba(0, 168, 132, 0.35);
}
.signup-body .verify-step .otp-box:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
    transform: none;
}
.signup-body .verify-step .verify-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 650;
    box-shadow: none;
}
.signup-body .verify-step .verify-submit:hover {
    box-shadow: 0 8px 20px rgba(0, 168, 132, 0.22);
}
.verify-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--muted);
}
@media (max-width: 560px) {
    .login-wrap-auth,
    .signup-body .login-wrap { width: min(100%, 94vw); }
    .auth-form,
    .signup-body .login-form { padding: 22px 20px 20px; }
    .login-pair { grid-template-columns: 1fr; gap: 0; }
    .auth-title { font-size: 21px; }
    .signup-panel .login-role strong { font-size: 11px; }
}
@media (max-height: 720px) {
    .auth-form,
    .signup-body .login-form { padding: 20px 22px 18px; }
    .auth-head { margin-bottom: 16px; padding-bottom: 14px; }
    .auth-title { font-size: 20px; }
    .auth-form .login-field,
    .signup-panel .login-field { margin-bottom: 10px; }
    .auth-form .login-input { height: 44px; }
    .signup-panel .login-role { height: 34px; }
    .auth-form .login-submit { height: 44px; }
}
.login-roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.login-role {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 14px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.login-role input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.login-role i { font-size: 18px; color: inherit; }
.login-role strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: inherit;
}
.login-role small {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: inherit;
    opacity: 0.72;
}
.login-role:hover { border-color: rgba(0, 168, 132, 0.45); color: var(--text); }
.login-role.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-deep);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="dark"] .login-role.is-on { color: #6ee7b7; }
.login-hint {
    margin: -6px 0 18px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.login-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
.login-pair .login-field { min-width: 0; }
.login-code {
    max-width: 260px;
    height: 60px;
    justify-content: center;
}
.login-code input {
    letter-spacing: 0.48em;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.login-verify-copy {
    margin: -10px 0 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}
.login-mail-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}
.login-mail-chip i { color: var(--accent); }
.login-alert.ok {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent-deep);
}
html[data-theme="dark"] .login-alert.ok { color: #6ee7b7; }
.setup-steps {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
}
.setup-steps li {
    position: relative;
    padding: 0 0 16px 22px;
    color: #8696a0;
    font-size: 13.5px;
    font-weight: 600;
}
.setup-steps li:last-child { padding-bottom: 0; }
.setup-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(233, 237, 239, 0.28);
}
.setup-steps li.is-done { color: #aebac1; }
.setup-steps li.is-done::before { background: #00a884; }
.setup-steps li.is-on { color: #fff; }
.setup-steps li.is-on::before { background: #1ad19a; box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.22); }
.setup-photo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 22px;
}
.setup-photo-btn {
    position: relative;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.setup-photo-face,
.setup-photo-face.avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #1aa87c, #0b6e75);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.setup-photo-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.setup-photo-cam {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
.setup-photo-hint {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.login-area {
    height: auto;
    min-height: 92px;
    align-items: flex-start;
    padding: 12px 16px;
}
.login-area textarea {
    width: 100%;
    min-height: 68px;
    margin: 0;
    padding: 0;
    border: 0;
    resize: none;
    outline: none;
    appearance: none;
    background: transparent !important;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
}
.login-area textarea::placeholder { color: var(--muted); opacity: .7; }
.setup-country { position: relative; }
.setup-country-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 8;
    max-height: 220px;
    overflow: auto;
    margin-top: 6px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.setup-country.is-open .setup-country-list { display: block; }
.signup-country .setup-country-list {
    max-height: min(220px, 38vh);
}
.signup-form .wa-country-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.signup-form .wa-country-opt:last-child { border-bottom: 0; }
.signup-form .wa-country-opt:hover { background: var(--hover); }
.signup-form .wa-country-opt.selected { color: var(--accent); font-weight: 600; }
.signup-form .wa-country-empty {
    padding: 14px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* recovered patch b6df4c6d-46a2-4d35-8428-f0a8b0686bd0.jsonl:92 */
.login-check.setup-promise {
    align-items: flex-start;
    margin: 4px 0 22px;
    gap: 10px;
    line-height: 1.4;
}
.login-check.setup-promise input {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Complete profile — responsive solo layout */
.setup-body.signup-body {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: flex-start;
    justify-content: center;
    padding:
        max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
}
.setup-body .login-wrap-setup,
.setup-body .login-wrap-auth {
    width: min(520px, 100%);
    margin: 0 auto;
    max-height: none;
}
.setup-body .setup-card {
    display: flex;
    flex-direction: column;
    max-height: none;
    width: 100%;
}
.setup-body .setup-form {
    padding: 28px 32px 24px;
    max-height: none;
    overflow: visible;
    flex: none;
    justify-content: flex-start;
}
.setup-photo-copy {
    min-width: 0;
    flex: 1;
}
.setup-submit {
    width: 100%;
    margin-top: 4px;
}
.setup-body .login-field {
    margin-bottom: 14px;
}
.setup-body .login-input {
    min-width: 0;
}
.setup-body .login-input input,
.setup-body .login-input textarea,
.setup-body .login-area textarea {
    font-size: 16px;
}
.setup-body .setup-country-list {
    max-height: min(240px, 42vh);
}
@media (max-width: 640px) {
    .setup-body .setup-form {
        padding: 20px 18px 22px;
    }
    .setup-body .login-pair {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .setup-body .setup-photo {
        gap: 14px;
    }
}
@media (max-width: 480px) {
    .setup-body.signup-body {
        padding-left: 10px;
        padding-right: 10px;
    }
    .setup-body .setup-form {
        padding: 18px 16px 20px;
    }
    .setup-body .auth-head {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
    .setup-body .auth-title {
        font-size: 21px;
    }
    .setup-photo {
        flex-wrap: wrap;
        align-items: center;
    }
    .setup-photo-btn,
    .setup-photo-face,
    .setup-photo-face.avatar {
        width: 76px;
        height: 76px;
        font-size: 24px;
    }
    .setup-photo-cam {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .setup-body .login-area {
        min-height: 76px;
        padding: 10px 14px;
    }
    .setup-body .login-area textarea {
        min-height: 56px;
    }
    .setup-body .login-check.setup-promise {
        font-size: 13px;
        margin-bottom: 18px;
    }
    .setup-body .login-submit {
        min-height: 48px;
    }
}
@media (max-width: 360px) {
    .setup-body .setup-form {
        padding: 16px 14px 18px;
    }
    .setup-body .auth-brand span {
        display: none;
    }
}

.login-code {
    max-width: 260px;
    height: 60px;
    justify-content: center;
}
.login-code input {
    letter-spacing: 0.48em;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.verify-step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    animation: verifyIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes verifyIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.verify-orb {
    width: 64px;
    height: 64px;
    margin: 0 0 18px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(0, 168, 132, 0.18), rgba(0, 168, 132, 0.06)),
        var(--surface-2);
    border: 1px solid rgba(0, 168, 132, 0.22);
    box-shadow:
        0 10px 28px rgba(0, 168, 132, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    color: var(--accent);
    font-size: 28px;
}
.verify-step .login-form-head { margin-bottom: 10px; }
.verify-step .login-form-head h2 {
    font-size: 26px;
    letter-spacing: -0.04em;
}
.login-verify-copy {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.55;
    max-width: 34ch;
}
.login-mail-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin: 0 0 18px;
    padding: 10px 14px 10px 12px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid rgba(0, 168, 132, 0.14);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login-mail-chip i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
}
.login-mail-chip strong {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}
.verify-code-field { margin-bottom: 22px; }
.otp-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    max-width: 360px;
}
.otp-box {
    height: 56px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
    text-align: center;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
.otp-box:hover { border-color: rgba(0, 168, 132, 0.28); }
.otp-box:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--accent-soft);
    transform: translateY(-1px);
}
.otp-box:not(:placeholder-shown),
.otp-box:valid {
    /* keep filled look without relying on placeholder */
}
.verify-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
}
.verify-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
html[data-theme="dark"] .verify-action { border-color: rgba(255, 255, 255, 0.1); }
.verify-action:hover {
    color: var(--accent-deep);
    border-color: rgba(0, 168, 132, 0.35);
    background: var(--accent-soft);
}
html[data-theme="dark"] .verify-action:hover { color: #6ee7b7; }
.verify-action i { font-size: 14px; }
.verify-footnote {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0.9;
}
.login-card.is-verify .login-brand-lead {
    opacity: 0.92;
}
.login-alert.ok {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent-deep);
}
html[data-theme="dark"] .login-alert.ok { color: #6ee7b7; }
@media (max-width: 520px) {
    .otp-row { gap: 6px; max-width: none; }
    .otp-box { height: 48px; font-size: 18px; border-radius: 12px; }
    .verify-orb { width: 56px; height: 56px; font-size: 24px; border-radius: 16px; }
}

/* recovered patch b6df4c6d-46a2-4d35-8428-f0a8b0686bd0.jsonl:153 */
.verify-step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    animation: verifyIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.verify-step::before {
    content: "";
    position: absolute;
    inset: -24px -20px auto;
    height: 180px;
    pointer-events: none;
    background: radial-gradient(120% 100% at 0% 0%, rgba(0, 168, 132, 0.1), transparent 62%);
    opacity: 0.9;
}
@keyframes verifyIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.verify-hero {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}
.verify-orb {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background:
        linear-gradient(160deg, rgba(0, 168, 132, 0.22), rgba(0, 168, 132, 0.05)),
        var(--surface-2);
    border: 1px solid rgba(0, 168, 132, 0.28);
    box-shadow:
        0 14px 34px rgba(0, 168, 132, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: var(--accent);
    font-size: 30px;
}
.verify-orb-ring {
    position: absolute;
    inset: -8px;
    border-radius: 28px;
    border: 1px solid rgba(0, 168, 132, 0.18);
    animation: verifyPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes verifyPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.96); }
    50% { opacity: 0.9; transform: scale(1); }
}
.verify-step .login-form-head { margin-bottom: 8px; }
.verify-step .login-form-head h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.12;
}
.login-verify-copy {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    max-width: 36ch;
}
.login-mail-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    margin: 0 0 22px;
    padding: 12px 16px 12px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.35)), var(--surface-2);
    border: 1px solid rgba(0, 168, 132, 0.16);
    box-shadow: 0 8px 20px rgba(11, 20, 26, 0.04);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    max-width: 100%;
}
html[data-theme="dark"] .login-mail-chip {
    background: var(--surface-2);
    box-shadow: none;
}
.login-mail-chip i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 6px 14px rgba(0, 168, 132, 0.28);
}
.login-mail-chip-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.login-mail-chip-body small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.login-mail-chip-body strong {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.verify-code-field { margin-bottom: 20px; }
.verify-code-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.verify-code-head .login-label { margin: 0; }
.verify-code-hint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.otp-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}
.otp-box {
    box-sizing: border-box;
    height: 56px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1.5px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent),
        var(--surface-2);
    color: var(--text);
    text-align: center;
    font-family: inherit;
    font-size: 22px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
html[data-theme="dark"] .otp-box {
    border-color: rgba(255, 255, 255, 0.06);
    background: var(--surface-2);
    box-shadow: none;
}
.otp-box:hover { border-color: rgba(0, 168, 132, 0.32); }
.otp-box:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 22px rgba(0, 168, 132, 0.1);
}
.verify-submit {
    height: 54px;
    border-radius: 16px;
    font-size: 15px;
    letter-spacing: -0.015em;
    box-shadow: 0 12px 28px rgba(0, 168, 132, 0.28);
}
.verify-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.verify-divider::before,
.verify-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}
html[data-theme="dark"] .verify-divider::before,
html[data-theme="dark"] .verify-divider::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
.verify-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}
.verify-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.45);
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
html[data-theme="dark"] .verify-action {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
.verify-action:hover {
    color: var(--accent-deep);
    border-color: rgba(0, 168, 132, 0.35);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
html[data-theme="dark"] .verify-action:hover { color: #6ee7b7; }
.verify-action i { font-size: 14px; }
.verify-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
}
.verify-footnote i {
    margin-top: 1px;
    color: var(--accent);
    font-size: 13px;
}
.login-card.is-verify .login-brand {
    background:
        radial-gradient(420px 260px at 10% 0%, rgba(0, 168, 132, 0.42), transparent 58%),
        radial-gradient(280px 180px at 90% 90%, rgba(26, 209, 154, 0.12), transparent 55%),
        linear-gradient(165deg, #025144, #0b141a 72%);
}
.verify-brand-steps {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.verify-brand-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(233, 237, 239, 0.55);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.verify-brand-steps li span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(233, 237, 239, 0.55);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.04em;
}
.verify-brand-steps li.is-done { color: #aebac1; }
.verify-brand-steps li.is-done span {
    background: rgba(0, 168, 132, 0.22);
    border-color: rgba(0, 168, 132, 0.35);
    color: #6ee7b7;
}
.verify-brand-steps li.is-on { color: #fff; }
.verify-brand-steps li.is-on span {
    background: #00a884;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 168, 132, 0.35);
}
.login-alert.ok {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent-deep);
}
html[data-theme="dark"] .login-alert.ok { color: #6ee7b7; }
@media (max-width: 520px) {
    .otp-row { gap: 6px; }
    .otp-box { height: 48px; font-size: 18px; border-radius: 12px; }
    .verify-orb { width: 60px; height: 60px; font-size: 26px; border-radius: 18px; }
    .verify-actions { grid-template-columns: 1fr; }
    .verify-step .login-form-head h2 { font-size: 24px; }
}

/* Toastr — ITEC Connect */
#toast-container.toast-top-center {
    top: max(12px, env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}
#toast-container.toast-top-center > div {
    pointer-events: auto;
    width: 100%;
    opacity: 1;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.45;
    padding: 14px 42px 14px 48px;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
#toast-container > .toast-success {
    background-color: #ecfdf5;
    color: #065f46;
    border-color: rgba(0, 168, 132, 0.25);
}
#toast-container > .toast-error {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.2);
}
#toast-container > .toast-warning {
    background-color: #fffbeb;
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.25);
}
#toast-container > .toast-info {
    background-color: #eff6ff;
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.2);
}
html[data-theme="dark"] #toast-container > .toast-success {
    background-color: rgba(6, 95, 70, 0.28);
    color: #6ee7b7;
    border-color: rgba(0, 168, 132, 0.35);
}
html[data-theme="dark"] #toast-container > .toast-error {
    background-color: rgba(127, 29, 29, 0.32);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}
html[data-theme="dark"] #toast-container > .toast-warning {
    background-color: rgba(120, 53, 15, 0.32);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}
html[data-theme="dark"] #toast-container > .toast-info {
    background-color: rgba(30, 64, 175, 0.28);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}
#toast-container > div .toast-close-button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    float: none;
    font-size: 18px;
    font-weight: 700;
    color: inherit;
    opacity: 0.45;
    text-shadow: none;
}
#toast-container > div .toast-close-button:hover {
    opacity: 0.85;
    color: inherit;
}
#toast-container > div .toast-progress {
    background: #00a884;
    opacity: 0.55;
}