:root {
    /* Shared readable type scale: 16px body; 14–15px supporting text. */
    font-size:100%;
    --ink:#203047;
    --muted:#627186;
    --border:#e9edf3;
    --bg:#f7f9fc;
    --blue:#3264e7;
    --soft:#edf3ff;
    --green:#258976
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif;
    color:var(--ink);
    font-size:1rem;
    line-height:1.6;
    background:var(--bg)
}

a {
    color:var(--blue);
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

button,summary {
    cursor:pointer
}

button:disabled {
    cursor:not-allowed;
    opacity:.52
}

h1,h2,h3,p {
    margin:0
}

h1 {
    font-size:2rem;
    font-weight:650;
    letter-spacing:-.6px
}

h2 {
    font-size:1.1875rem;
    font-weight:650
}

h3 {
    font-size:1.125rem
}

.muted {
    color:var(--muted)
}

.shell {
    display:flex;
    min-height:100vh
}

.sidebar {
    width:264px;
    flex-shrink:0;
    background:#fff;
    border-right:1px solid var(--border);
    padding:30px 20px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh
}

.brand {
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--ink);
    font-size:1.0625rem;
    font-weight:700
}

.brand small {
    display:block;
    font-size:.75rem;
    letter-spacing:1.35px;
    color:#99a3b4;
    margin-top:3px
}

.brand-mark {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    background:var(--blue);
    color:white;
    border-radius:11px;
    font-size:21px;
    flex-shrink:0
}

.nav-label {
    font-size:.8125rem;
    letter-spacing:1.1px;
    color:#96a1b0;
    margin:28px 14px 9px
}

.sidebar nav>a {
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 15px;
    margin-bottom:5px;
    border-radius:8px;
    color:#6a778b;
    font-size:1.1875rem
}

.sidebar nav>a span {
    font-size:1rem
}

.sidebar nav>a:hover {
    background:#f6f8fc
}

.sidebar nav>a.selected {
    background:var(--soft);
    color:var(--blue);
    font-weight:600
}

.sidebar-note {
    margin-top:auto;
    font-size:.9375rem;
    padding:25px 10px 0;
    color:#67778c
}

.sidebar-note small {
    display:block;
    font-size:.8125rem;
    margin-top:7px;
    color:#99a2b0
}

.dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#efb858;
    margin-right:5px
}

.workspace {
    flex:1;
    min-width:0
}

.topbar {
    height:80px;
    border-bottom:1px solid var(--border);
    background:white;
    padding:0 38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:.9375rem
}

.account {
    display:flex;
    align-items:center;
    gap:10px
}

.account small {
    display:block;
    color:var(--muted);
    font-size:.8125rem
}

.avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--soft);
    color:var(--blue);
    display:grid;
    place-items:center
}

.text-button {
    border:0;
    background:none;
    color:var(--muted);
    font-size:.9375rem;
    margin-left:12px
}

main {
    padding:34px 38px;
    max-width:1660px;
    margin:auto
}

.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:26px
}

.eyebrow {
    font-size:.8125rem;
    font-weight:600;
    letter-spacing:1.8px;
    color:#8a9aaf;
    margin-bottom:9px
}

.page-heading p {
    color:var(--muted);
    font-size:.9375rem;
    margin-top:7px
}

.pill {
    display:inline-block;
    padding:4px 9px;
    border-radius:5px;
    background:#eff3f9;
    color:#7b8a9f;
    font-size:.8125rem;
    white-space:nowrap
}

.pill.green {
    background:#eaf6f2;
    color:var(--green)
}

.notice {
    border:1px solid #dfe9fa;
    border-radius:9px;
    padding:14px 18px;
    background:#f1f6ff;
    color:#52709e;
    font-size:.9375rem;
    margin-bottom:24px;
    display:flex;
    align-items:center;
    gap:12px
}

.notice strong {
    font-weight:600;
    color:#35578a
}

.notice-icon {
    border:1px solid #91acd8;
    border-radius:50%;
    width:20px;
    height:20px;
    text-align:center;
    flex-shrink:0
}

.notice.success {
    background:#eef8f3;
    border-color:#d2eee0;
    color:#247755
}

.notice.error {
    background:#fff2f1;
    border-color:#f3d3d0;
    color:#b14743
}

.notice ul {
    margin:0;
    padding-left:15px
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin:24px 0
}

.review-stats {
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.stat {
    border:1px solid var(--border);
    border-radius:10px;
    background:white;
    padding:23px
}

.stat>span {
    color:#7b899d;
    font-size:.9375rem
}

.stat strong {
    display:block;
    font-size:32px;
    font-weight:650;
    margin:13px 0 7px
}

.stat small {
    font-weight:400;
    font-size:.9375rem;
    color:#9aa5b4
}

.stat p {
    font-size:.8125rem;
    color:#a0aaba
}

.two-column {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:22px
}

.panel {
    background:white;
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:24px;
    min-width:0
}

.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:21px 24px;
    border-bottom:1px solid #f0f3f7
}

.panel-heading>.muted {
    font-size:.875rem
}

.panel-foot {
    padding:15px 24px;
    border-top:1px solid #f0f3f7;
    color:var(--muted);
    font-size:.875rem
}

.link-cards {
    padding:8px 24px
}

.link-cards a {
    display:flex;
    align-items:center;
    gap:15px;
    padding:19px 0;
    color:var(--ink);
    border-bottom:1px solid #f4f6f9
}

.link-cards a:last-child {
    border:0
}

.link-cards a>span:last-child {
    margin-left:auto;
    color:#9cabbd
}

.link-cards b {
    font-size:1rem;
    font-weight:600
}

.link-cards p {
    font-size:.875rem;
    color:#8a98aa;
    margin-top:4px
}

.link-icon {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:#f3f6fd;
    color:#6280c9;
    border-radius:9px;
    font-size:23px
}

.check-list {
    padding:13px 24px;
    list-style:none;
    margin:0
}

.check-list li {
    padding:11px 0;
    color:#6b7a90;
    font-size:.9375rem
}

.check-list li:before {
    content:'✓';
    margin-right:10px;
    color:#55a490
}

.tabs {
    display:flex;
    gap:28px;
    margin-bottom:23px;
    border-bottom:1px solid var(--border)
}

.tabs a {
    padding:0 0 13px;
    color:var(--muted)
}

.tabs .active {
    color:var(--blue);
    border-bottom:2px solid var(--blue)
}

.table-wrap {
    overflow-x:auto
}

table {
    width:100%;
    border-collapse:collapse;
    white-space:nowrap;
    font-size:.9375rem
}

th {
    background:#fafbfd;
    color:#8a97a9;
    font-weight:400;
    text-align:left;
    padding:14px 22px
}

td {
    padding:16px 22px;
    border-top:1px solid #f0f3f7;
    vertical-align:top
}

tbody tr:hover {
    background:#fdfdff
}

.empty-state {
    text-align:center;
    padding:57px 20px 65px;
    white-space:normal
}

.empty-state>span {
    font-size:38px;
    color:#bccbe3;
    display:block;
    margin-bottom:13px
}

.empty-state h3 {
    font-size:1.0625rem;
    font-weight:500;
    color:#687992
}

.empty-state p {
    font-size:.9375rem;
    color:#99a5b5;
    margin-top:8px
}

.empty-inline {
    color:var(--muted);
    padding:16px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dfe5ee;
    border-radius:6px;
    background:white;
    color:#65758d;
    padding:8px 14px;
    font-size:.9375rem;
    min-height:36px
}

.button.primary {
    background:var(--blue);
    border-color:var(--blue);
    color:white
}

.button:hover:not(:disabled) {
    filter:brightness(.97)
}

.button.full {
    width:100%
}

.search-form {
    display:flex;
    gap:8px
}

.search-form input {
    max-width:185px;
    font-size:.9375rem;
    min-height:35px
}

.form-stack {
    display:flex;
    flex-direction:column;
    gap:17px
}

label {
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:.9375rem;
    color:#73829a
}

input,select {
    width:100%;
    border:1px solid #dfe5ee;
    border-radius:6px;
    background:white;
    padding:9px 11px;
    min-height:39px;
    color:var(--ink);
    outline:none
}

input:focus,select:focus {
    border-color:#8dacf5;
    box-shadow:0 0 0 3px #edf2ff
}

input::placeholder {
    color:#acb6c4
}

input[type=hidden] {
    display:none
}

.padded {
    padding:22px 24px
}

.inline-form {
    padding:22px 24px;
    display:flex;
    gap:18px;
    align-items:end;
    flex-wrap:wrap
}

.inline-form label {
    flex:1;
    min-width:160px
}

.form-row {
    display:flex;
    gap:14px
}

.form-row>* {
    flex:1;
    min-width:0
}

.package-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.package-grid .panel {
    margin:0
}

details {
    max-width:360px;
    white-space:normal
}

summary {
    color:var(--blue);
    font-size:.9375rem
}

.detail-body {
    min-width:240px;
    padding:15px 0
}

hr {
    border:0;
    border-top:1px solid var(--border);
    margin:22px 0
}

pre {
    white-space:pre-wrap;
    word-break:break-word;
    max-width:360px;
    font-size:.875rem
}

.pagination {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding-bottom:12px
}

.pagination [aria-disabled="true"] { opacity:.5; }

.offer {
    border:1px solid var(--border);
    padding:22px;
    border-radius:8px
}

.offer strong {
    display:block;
    font-size:26px;
    margin:12px 0;
    color:var(--blue)
}

.offer p {
    font-size:.9375rem;
    color:var(--muted);
    margin-bottom:18px
}

footer {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:32px;
    font-size:.8125rem;
    color:#9aa8ba
}

.countdown-warning {
    color:#d68a36
}

.auth-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    background:#f6f8fc;
    padding:40px
}

.auth-wrap {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    width:100%;
    max-width:1060px;
    min-height:660px;
    background:white;
    border:1px solid #e6ecf5;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 90px #20304708
}

.auth-intro {
    padding:42px;
    background:linear-gradient(145deg,#f3f7ff,#eaf0fc);
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.auth-intro .brand {
    font-size:1.1875rem
}

.intro-content {
    margin:50px 0
}

.intro-content h1 {
    font-size:38px;
    line-height:1.5;
    margin:18px 0
}

.intro-content p {
    color:#8695ac;
    font-size:1rem;
    line-height:1.9
}

.intro-features {
    display:grid;
    gap:14px;
    margin-top:35px;
    color:#617695;
    font-size:.9375rem
}

.intro-features b {
    font-size:.8125rem;
    color:#9db1d2;
    margin-right:14px
}

.auth-card {
    padding:70px 54px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.auth-card h2 {
    font-size:1.875rem;
    margin:3px 0 10px
}

.auth-card>p {
    font-size:.9375rem
}

.auth-card .form-stack {
    margin-top:26px
}

.auth-card .notice {
    margin:18px 0 0
}

.auth-link {
    margin-top:25px;
    text-align:center;
    color:#8f9bac
}

.form-note {
    border-top:1px solid var(--border);
    padding-top:20px;
    margin-top:28px;
    font-size:.875rem;
    color:#9aa6b8;
    line-height:1.9
}

.auth-intro>small {
    font-size:.8125rem
}

@media(min-width:1550px) {
    .auth-wrap {
        max-width:1120px
    }
}

@media(max-width:1100px) {
    .sidebar {
        width:240px;
        padding:24px 14px
    }
    main {
        padding:26px
    }
    .topbar {
        padding:0 26px
    }
    .stats {
        grid-template-columns:repeat(2,1fr)
    }
    .package-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .auth-card {
        padding:50px 35px
    }
}

@media(max-width:750px) {
    .sidebar {
        width:100%;
        height:auto;
        position:static;
        padding:18px
    }
    .sidebar .brand {
        margin-bottom:15px
    }
    .sidebar nav {
        display:flex;
        gap:4px;
        flex-wrap:wrap
    }
    .sidebar .nav-label,.sidebar-note {
        display:none
    }
    .sidebar nav>a {
        padding:7px 10px;
        font-size:.9375rem;
        gap:6px
    }
    .shell {
        display:block
    }
    .topbar {
        height:66px;
        padding:0 18px
    }
    .topbar>span {
        display:none
    }
    .account {
        margin-left:auto
    }
    main {
        padding:22px 16px
    }
    .page-heading {
        align-items:flex-start
    }
    .page-heading>.pill {
        display:none
    }
    h1 {
        font-size:1.75rem
    }
    .two-column,.package-grid {
        grid-template-columns:1fr
    }
    .stats {
        gap:10px
    }
    .review-stats {
        grid-template-columns:1fr
    }
    .stat {
        padding:17px
    }
    .panel-heading {
        padding:17px;
        flex-wrap:wrap
    }
    .tabs {
        gap:21px;
        font-size:1rem
    }
    .auth-page {
        padding:20px
    }
    .auth-wrap {
        grid-template-columns:1fr;
        min-height:0
    }
    .auth-intro {
        padding:23px
    }
    .intro-content,.auth-intro>small {
        display:none
    }
    .auth-card {
        padding:32px 25px
    }
    footer span {
        display:none
    }
}


.adjustment-form {
    max-width: 620px;
}

.confirmation {
    flex-direction: row;
    align-items: flex-start;
    line-height: 1.7;
}

.confirmation input[type="checkbox"] {
    width: 16px;
    min-height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Activity filters wrap independently of the compact single-field search bars. */
.activity-filters { flex-wrap: wrap; align-items: center; }
.activity-filters input { flex: 1 1 150px; min-width: 130px; }

/* Respect pagination visibility even though .button sets an author display rule. */
.entitlement-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entitlement-pagination [hidden] { display: none; }

/* Keep association explanations readable without widening all enterprise table columns. */
.member-association { min-width: 200px; max-width: 260px; white-space: normal; }
.member-association p { margin-top: 6px; line-height: 1.6; }

.enterprise-search .button { flex-shrink: 0; white-space: nowrap; }

/* Employee account controls */
textarea {
    width:100%;
    border:1px solid #dfe5ee;
    border-radius:6px;
    background:white;
    padding:9px 11px;
    min-height:39px;
    color:var(--ink);
    outline:none;
    resize:vertical;
    font:inherit;
}

textarea:focus {
    border-color:#8dacf5;
    box-shadow:0 0 0 3px #edf2ff;
}

.form-actions {
    display:flex;
    gap:10px;
    margin-top:14px;
}

.form-actions form {
    margin:0;
}

.button.danger {
    border-color:#f0c7c4;
    background:#fff7f6;
    color:#b14743;
}

.button.danger:hover {
    background:#fff0ee;
}

/* Keep form text legible and controls touch-friendly without browser zoom. */
input, select, textarea, .button, .search-form input { font-size:1rem; min-height:44px; }
.auth-card input, .auth-card .button { min-height:50px; }
.auth-card, .auth-intro { min-width:0; }
.auth-card .notice, .form-note { overflow-wrap:anywhere; }
.sidebar { overflow-y:auto; }
.tabs { flex-wrap:wrap; }
@media(max-width:750px) {
    .sidebar { width:100%; }
    .auth-page { padding:16px; }
    .auth-card { padding:28px 20px; }
    .search-form { flex-wrap:wrap; }
    .account { min-width:0; flex-wrap:wrap; }
    .topbar { height:auto; min-height:66px; padding-top:10px; padding-bottom:10px; }
}

/* Account settings */
.avatar { flex-shrink: 0; overflow: hidden; text-decoration: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-large { width: 72px; height: 72px; font-size: 28px; border-radius: 50%; }
.profile-preview { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.profile-preview small { display: block; margin-top: 4px; }
.account-settings .form-stack label { display: flex; flex-direction: column; gap: 8px; }
.account-settings .form-stack .confirmation { flex-direction: row; align-items: center; }
.account-settings input[type="file"] { width: 100%; padding: 12px; }
.account-settings .panel { min-width: 0; }
@media (max-width: 760px) { .account-settings { grid-template-columns: 1fr; } }

.workspace-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

/* Click-to-select avatar; input remains hidden even under generic form styles. */
.avatar-picker{position:relative;flex-shrink:0;border:0;padding:0;cursor:pointer;overflow:hidden;transition:box-shadow .18s,transform .18s}.avatar-picker:hover{box-shadow:0 0 0 4px #dce6ff;transform:scale(1.04)}.avatar-picker:focus-visible{outline:3px solid #315ff5;outline-offset:4px}.avatar-picker:disabled{cursor:wait;opacity:.65}[data-avatar-input][hidden]{display:none!important}

.login-preferences{display:grid;gap:6px;margin:0 0 3px}.form-stack .remember-choice{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;min-width:0;cursor:pointer;color:#334155;text-align:left;line-height:1.5}.remember-choice input[type=checkbox]{width:17px;height:17px;min-height:0;margin:0;flex-shrink:0;accent-color:#315ff5}.remember-choice small{font-size:12px;color:#7c8ba1;margin-left:5px}.login-preferences>small{font-size:12px;line-height:1.6}

/* Registration has its own compact layout; login screens retain their existing two-column design. */
.auth-page.auth-page-register { padding:24px 16px; min-height:100vh; min-height:100svh; }
.auth-page-register .auth-wrap { display:block; width:100%; max-width:680px; min-height:0; overflow:visible; }
.auth-page-register .auth-intro { display:none; }
.auth-page-register .auth-card { padding:30px 36px 24px; justify-content:flex-start; }
.register-heading { display:flex; align-items:center; gap:16px; min-width:0; }
.register-mascot { width:64px; height:64px; border-radius:50%; flex-shrink:0; }
.auth-page-register .register-heading h2 { font-size:1.75rem; line-height:1.3; margin:0 0 6px; }
.register-heading p { margin:0; line-height:1.5; font-size:.9375rem; }
.auth-page-register .register-form { margin-top:24px; gap:12px; }
.register-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; row-gap:10px; }
.register-fields label { min-width:0; display:flex; flex-direction:column; gap:6px; color:#53647c; }
.register-fields input { min-width:0; width:100%; }
.register-error-slot { display:block; min-height:21px; line-height:21px; overflow-wrap:anywhere; }
.register-error-slot [data-field-error] { display:block; }
.register-hint { margin:0; font-size:.875rem; color:#708099; line-height:1.5; }
.auth-page-register .auth-link { margin:18px 0 0; font-size:.9375rem; line-height:1.6; }
.auth-page-register .register-footnote { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--border); font-size:.8125rem; color:#8190a5; line-height:1.7; overflow-wrap:anywhere; }
/* The generic auth input height must not stretch remember-me checkboxes. */
.auth-card .remember-choice input[type=checkbox] { min-height:0; height:17px; width:17px; }
@media (max-width:560px) {
    .auth-page.auth-page-register { padding:16px 12px; }
    .auth-page-register .auth-card { padding:22px 20px; }
    .register-fields { grid-template-columns:minmax(0,1fr); gap:7px; }
    .register-heading { gap:12px; }
    .register-mascot { width:52px; height:52px; }
    .auth-page-register .register-heading h2 { font-size:1.5rem; }
    .auth-page-register .register-form { margin-top:20px; }
}
@media (max-height:720px) {
    .auth-page.auth-page-register { align-items:start; padding-top:16px; padding-bottom:16px; }
}

/* Employee and administrator login: compact spacing with persistent inline validation. */
.auth-page.auth-page-login { padding:24px; min-height:100vh; min-height:100svh; }
.auth-page-login .auth-wrap { max-width:1000px; min-height:0; grid-template-columns:1fr 1fr; }
.auth-page-login .auth-intro { padding:36px; }
.auth-page-login .intro-content { margin:32px 0 12px; }
.auth-page-login .intro-content h1 { font-size:2rem; line-height:1.5; }
.auth-page-login .auth-card { padding:36px 40px; }
.login-heading h2 { line-height:1.35; }
.login-heading p { margin:10px 0 0; line-height:1.6; font-size:.9375rem; }
.auth-page-login .login-form { margin-top:24px; gap:12px; }
.login-error-slot { display:block; min-height:21px; line-height:21px; overflow-wrap:anywhere; }
.login-error-slot [data-field-error] { display:block; }
.auth-card .remember-choice input[type=checkbox] { flex:0 0 17px; padding:0; align-self:center; }
.remember-choice>span { min-width:0; overflow-wrap:anywhere; }
.remember-choice small { white-space:nowrap; }
.login-preferences>small { display:block; text-align:left; overflow-wrap:anywhere; }
.auth-page-login .login-preferences { gap:8px; margin:0 0 4px; }
.auth-page-login .auth-link { margin:22px 0 0; line-height:1.6; }
.auth-page-login .form-note { margin-top:20px; padding-top:16px; }
@media (max-width:750px) {
    .auth-page.auth-page-login { padding:16px 12px; }
    .auth-page-login .auth-wrap { grid-template-columns:minmax(0,1fr); }
    .auth-page-login .auth-intro { padding:20px 24px; }
    .auth-page-login .auth-card { padding:26px 24px; }
}
@media (max-height:720px) {
    .auth-page.auth-page-login { align-items:start; }
}

/* Shared operation notifications; permanent notices and field errors are not toasts. */
.toast-region { position:fixed; top:24px; right:24px; z-index:2000; display:flex; flex-direction:column; gap:12px; width:min(400px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow-y:auto; pointer-events:none; }
.app-toast { --toast-color:#315ff5; display:flex; align-items:flex-start; gap:12px; flex-shrink:0; width:100%; padding:16px; border:1px solid #e2e8f0; border-left:4px solid var(--toast-color); border-radius:12px; background:#fff; color:#334155; box-shadow:0 8px 28px #0f172a1a; pointer-events:auto; animation:toast-enter .18s ease-out; }
.app-toast--success { --toast-color:#15805b; }
.app-toast--error { --toast-color:#b42318; }
.app-toast--warning { --toast-color:#a35f00; }
.app-toast__icon { display:grid; place-items:center; flex:0 0 22px; height:22px; border:1px solid currentColor; border-radius:50%; color:var(--toast-color); font-size:14px; font-weight:700; }
.app-toast__message { flex:1; min-width:0; font-size:.9375rem; line-height:1.6; overflow-wrap:anywhere; }
.app-toast__message ul { margin:0; padding-left:18px; }
.app-toast__close { display:none; flex:0 0 24px; width:24px; min-height:24px; height:24px; padding:0; border:0; border-radius:4px; background:transparent; color:#64748b; font-size:22px; line-height:1; cursor:pointer; }
.app-toast[data-toast-ready] .app-toast__close { display:grid; place-items:center; }
.app-toast__close:hover { background:#f1f5f9; color:#0f172a; }
.app-toast__close:focus-visible { outline:2px solid #315ff5; outline-offset:2px; }
@keyframes toast-enter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:600px) { .toast-region { top:16px; right:16px; left:16px; width:auto; max-height:calc(100dvh - 32px); } }
@media (prefers-reduced-motion:reduce) { .app-toast { animation:none; } }