/*
 * Workflow Auto
 * Shared Application Styles
 */

/* =========================
   Design tokens
   ========================= */

:root {
    --wa-bg: #f7f8fa;
    --wa-surface: #ffffff;
    --wa-surface-soft: #f1f4f8;
    --wa-border: #dde3ea;

    --wa-text: #172033;
    --wa-text-muted: #647085;
    --wa-text-light: #8791a2;

    --wa-primary: #2563eb;
    --wa-primary-hover: #1d4ed8;
    --wa-primary-soft: #eff6ff;

    --wa-success: #15803d;
    --wa-success-soft: #f0fdf4;

    --wa-warning: #b45309;
    --wa-warning-soft: #fffbeb;

    --wa-danger: #b91c1c;
    --wa-danger-soft: #fef2f2;

    --wa-radius-sm: 8px;
    --wa-radius: 12px;
    --wa-radius-lg: 18px;

    --wa-shadow-sm:
        0 1px 2px rgba(15, 23, 42, 0.05);

    --wa-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --wa-sidebar-width: 250px;
    --wa-content-width: 1280px;

    --wa-transition: 160ms ease;
}

/* =========================
   Reset
   ========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--wa-bg);
    color: var(--wa-text);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--wa-bg);
    color: var(--wa-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
    font-family:
        Tahoma,
        Arial,
        "Segoe UI",
        sans-serif;
}

img,
svg {
    display: block;
    max-width: 100%;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

a:hover {
    text-decoration: underline;
}

button {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

/* =========================
   Accessibility
   ========================= */

.wa-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

/* =========================
   General layout
   ========================= */

.wa-page {
    min-height: 100vh;
}

.wa-container {
    width: min(
        calc(100% - 32px),
        var(--wa-content-width)
    );
    margin-inline: auto;
}

.wa-main {
    min-width: 0;
    padding: 28px;
}

.wa-section {
    margin-block-end: 28px;
}

.wa-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wa-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wa-wrap {
    flex-wrap: wrap;
}

/* =========================
   Application shell
   ========================= */

.wa-app {
    display: grid;
    grid-template-columns:
        var(--wa-sidebar-width)
        minmax(0, 1fr);
    min-height: 100vh;
}

[dir="rtl"] .wa-app {
    grid-template-columns:
        minmax(0, 1fr)
        var(--wa-sidebar-width);
}

[dir="rtl"] .wa-sidebar {
    grid-column: 2;
    grid-row: 1;
}

[dir="rtl"] .wa-app-content {
    grid-column: 1;
    grid-row: 1;
}

.wa-app-content {
    min-width: 0;
}

.wa-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    background: var(--wa-surface);
    border-inline-end: 1px solid var(--wa-border);
    padding: 20px 14px;
}

[dir="rtl"] .wa-sidebar {
    border-inline-end: 0;
    border-inline-start: 1px solid var(--wa-border);
}

.wa-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-inline: 10px;
    margin-block-end: 20px;
    color: var(--wa-text);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.wa-brand:hover {
    text-decoration: none;
}

.wa-brand-mark {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    background: var(--wa-primary);
    color: #ffffff;
    font-weight: 800;
}

.wa-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wa-nav-section {
    margin-block: 16px 6px;
    padding-inline: 10px;
    color: var(--wa-text-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wa-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: var(--wa-radius-sm);
    color: var(--wa-text-muted);
    font-weight: 600;
    text-decoration: none;
    transition:
        background var(--wa-transition),
        color var(--wa-transition);
}

.wa-nav-link:hover {
    background: var(--wa-surface-soft);
    color: var(--wa-text);
    text-decoration: none;
}

.wa-nav-link[aria-current="page"],
.wa-nav-link.is-active {
    background: var(--wa-primary-soft);
    color: var(--wa-primary);
}

/* =========================
   Topbar
   ========================= */

.wa-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.92);
    border-block-end: 1px solid var(--wa-border);
}

.wa-topbar-title {
    min-width: 0;
}

.wa-topbar-title h1 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

.wa-topbar-title p {
    margin: 2px 0 0;
    color: var(--wa-text-muted);
    font-size: 13px;
}

.wa-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================
   Page heading
   ========================= */

.wa-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-block-end: 24px;
}

.wa-page-title {
    margin: 0;
    color: var(--wa-text);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.25;
}

.wa-page-description {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--wa-text-muted);
}

/* =========================
   Cards
   ========================= */

.wa-card {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow-sm);
}

.wa-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-block-end: 1px solid var(--wa-border);
}

.wa-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.wa-card-body {
    padding: 20px;
}

.wa-card-footer {
    padding: 16px 20px;
    border-block-start: 1px solid var(--wa-border);
}

.wa-grid {
    display: grid;
    gap: 18px;
}

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

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

.wa-grid-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

/* =========================
   Forms
   ========================= */

.wa-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wa-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wa-label {
    color: var(--wa-text);
    font-size: 14px;
    font-weight: 650;
}

.wa-required {
    color: var(--wa-danger);
}

.wa-input,
.wa-select,
.wa-textarea {
    width: 100%;
    border: 1px solid #cfd7e3;
    border-radius: var(--wa-radius-sm);
    background: var(--wa-surface);
    color: var(--wa-text);
    padding: 10px 12px;
    transition:
        border-color var(--wa-transition),
        box-shadow var(--wa-transition);
}

.wa-input,
.wa-select {
    min-height: 44px;
}

.wa-textarea {
    min-height: 120px;
    resize: vertical;
}

.wa-input:hover,
.wa-select:hover,
.wa-textarea:hover {
    border-color: #aeb9c8;
}

.wa-input:focus,
.wa-select:focus,
.wa-textarea:focus {
    border-color: var(--wa-primary);
    outline: 0;
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}

.wa-input:disabled,
.wa-select:disabled,
.wa-textarea:disabled {
    cursor: not-allowed;
    background: var(--wa-surface-soft);
    color: var(--wa-text-light);
}

.wa-help {
    margin: 0;
    color: var(--wa-text-muted);
    font-size: 12px;
}

.wa-field-error {
    margin: 0;
    color: var(--wa-danger);
    font-size: 13px;
    font-weight: 600;
}

/* =========================
   Buttons
   ========================= */

.wa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--wa-radius-sm);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background var(--wa-transition),
        border-color var(--wa-transition),
        color var(--wa-transition),
        box-shadow var(--wa-transition);
}

.wa-button:hover {
    text-decoration: none;
}

.wa-button:disabled,
.wa-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.wa-button-primary {
    background: var(--wa-primary);
    border-color: var(--wa-primary);
    color: #ffffff;
}

.wa-button-primary:hover:not(:disabled) {
    background: var(--wa-primary-hover);
    border-color: var(--wa-primary-hover);
}

.wa-button-secondary {
    background: var(--wa-surface);
    border-color: var(--wa-border);
    color: var(--wa-text);
}

.wa-button-secondary:hover:not(:disabled) {
    background: var(--wa-surface-soft);
}

.wa-button-danger {
    background: var(--wa-danger);
    border-color: var(--wa-danger);
    color: #ffffff;
}

.wa-button-ghost {
    background: transparent;
    color: var(--wa-text-muted);
}

.wa-button-ghost:hover:not(:disabled) {
    background: var(--wa-surface-soft);
    color: var(--wa-text);
}

.wa-button-small {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 13px;
}

/* =========================
   Alerts
   ========================= */

.wa-alert {
    padding: 12px 14px;
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius-sm);
    font-size: 14px;
}

.wa-alert-success {
    background: var(--wa-success-soft);
    border-color: #bbf7d0;
    color: var(--wa-success);
}

.wa-alert-warning {
    background: var(--wa-warning-soft);
    border-color: #fde68a;
    color: var(--wa-warning);
}

.wa-alert-danger {
    background: var(--wa-danger-soft);
    border-color: #fecaca;
    color: var(--wa-danger);
}

.wa-alert-info {
    background: var(--wa-primary-soft);
    border-color: #bfdbfe;
    color: #1e40af;
}

/* =========================
   Badges and status
   ========================= */

.wa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--wa-surface-soft);
    color: var(--wa-text-muted);
    font-size: 12px;
    font-weight: 650;
}

.wa-badge-success {
    background: var(--wa-success-soft);
    color: var(--wa-success);
}

.wa-badge-warning {
    background: var(--wa-warning-soft);
    color: var(--wa-warning);
}

.wa-badge-danger {
    background: var(--wa-danger-soft);
    color: var(--wa-danger);
}

.wa-badge-primary {
    background: var(--wa-primary-soft);
    color: var(--wa-primary);
}

/* =========================
   Tables
   ========================= */

.wa-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.wa-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.wa-table th,
.wa-table td {
    padding: 13px 14px;
    border-block-end: 1px solid var(--wa-border);
    vertical-align: middle;
}

.wa-table th {
    background: var(--wa-surface-soft);
    color: var(--wa-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.wa-table tbody tr:last-child td {
    border-block-end: 0;
}

/* =========================
   Empty state
   ========================= */

.wa-empty {
    padding: 44px 24px;
    text-align: center;
}

.wa-empty-title {
    margin: 0 0 6px;
    font-size: 18px;
}

.wa-empty-text {
    max-width: 520px;
    margin: 0 auto 18px;
    color: var(--wa-text-muted);
}

/* =========================
   Authentication pages
   ========================= */

.wa-auth-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(
            circle at top,
            #eef4ff 0,
            var(--wa-bg) 45%
        );
}

.wa-auth-shell {
    width: min(100%, 430px);
}

.wa-auth-brand {
    display: flex;
    justify-content: center;
    margin-block-end: 20px;
}

.wa-auth-card {
    padding: 28px;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius-lg);
    box-shadow: var(--wa-shadow);
}

.wa-auth-title {
    margin: 0;
    text-align: center;
    font-size: 26px;
}

.wa-auth-description {
    margin: 8px 0 24px;
    color: var(--wa-text-muted);
    text-align: center;
}

.wa-auth-footer {
    margin-block-start: 18px;
    color: var(--wa-text-muted);
    font-size: 13px;
    text-align: center;
}

/* =========================
   Projects
   ========================= */

.wa-project-card {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    transition:
        transform var(--wa-transition),
        box-shadow var(--wa-transition),
        border-color var(--wa-transition);
}

.wa-project-card:hover {
    border-color: #bdc8d8;
    box-shadow: var(--wa-shadow);
    text-decoration: none;
    transform: translateY(-1px);
}

.wa-project-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.wa-project-description {
    margin: 8px 0 0;
    color: var(--wa-text-muted);
}

.wa-project-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: auto;
    padding-block-start: 20px;
    color: var(--wa-text-light);
    font-size: 12px;
}

/* =========================
   Conversation
   ========================= */

.wa-conversation {
    display: flex;
    flex-direction: column;
    min-height: 540px;
}

.wa-messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding: 20px;
}

.wa-message {
    max-width: min(760px, 88%);
    padding: 12px 14px;
    border-radius: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wa-message-user {
    align-self: flex-end;
    background: var(--wa-primary);
    color: #ffffff;
    border-end-end-radius: 4px;
}

[dir="rtl"] .wa-message-user {
    align-self: flex-start;
    border-end-end-radius: 14px;
    border-end-start-radius: 4px;
}

.wa-message-assistant {
    align-self: flex-start;
    background: var(--wa-surface-soft);
    color: var(--wa-text);
    border-end-start-radius: 4px;
}

[dir="rtl"] .wa-message-assistant {
    align-self: flex-end;
    border-end-start-radius: 14px;
    border-end-end-radius: 4px;
}

.wa-composer {
    display: flex;
    gap: 10px;
    padding: 16px;
    border-block-start: 1px solid var(--wa-border);
}

.wa-composer .wa-textarea {
    min-height: 46px;
    max-height: 180px;
}

/* =========================
   Utility classes
   ========================= */

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

.wa-text-danger {
    color: var(--wa-danger);
}

.wa-text-success {
    color: var(--wa-success);
}

.wa-text-center {
    text-align: center;
}

.wa-no-margin {
    margin: 0;
}

.wa-spacer {
    flex: 1 1 auto;
}

.wa-divider {
    block-size: 1px;
    margin-block: 18px;
    background: var(--wa-border);
    border: 0;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1050px) {
    .wa-grid-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 820px) {
    .wa-app,
    [dir="rtl"] .wa-app {
        display: block;
    }

    .wa-sidebar,
    [dir="rtl"] .wa-sidebar {
        position: static;
        min-height: auto;
        max-height: none;
        border-inline: 0;
        border-block-end: 1px solid var(--wa-border);
    }

    .wa-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-block-end: 4px;
    }

    .wa-nav-section {
        display: none;
    }

    .wa-nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .wa-topbar {
        padding-inline: 18px;
    }

    .wa-main {
        padding: 20px 18px;
    }

    .wa-page-header {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .wa-container {
        width: min(
            calc(100% - 24px),
            var(--wa-content-width)
        );
    }

    .wa-grid-2,
    .wa-grid-3,
    .wa-grid-4 {
        grid-template-columns: 1fr;
    }

    .wa-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .wa-topbar-actions,
    .wa-row-between {
        align-items: stretch;
        flex-direction: column;
    }

    .wa-auth-page {
        padding: 14px;
    }

    .wa-auth-card {
        padding: 22px 18px;
    }

    .wa-card-header,
    .wa-card-body,
    .wa-card-footer {
        padding-inline: 16px;
    }

    .wa-button {
        max-width: 100%;
    }

    .wa-message {
        max-width: 94%;
    }
}

/* =========================
   Reduced motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Step 1: the shared workspace shell. Page component geometry stays unchanged. */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/shell/fonts/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/shell/fonts/inter-600.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/shell/fonts/arabic-400.woff2") format("woff2");
    unicode-range: U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/shell/fonts/arabic-600.woff2") format("woff2");
    unicode-range: U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC;
}
html[data-workspace] {
    --wa-bg: #fafafa;
    --wa-surface: #fff;
    --wa-surface-soft: #f4f4f5;
    --wa-text: #18181b;
    --wa-text-muted: #52525b;
    --wa-text-light: #71717a;
    --wa-border: #e4e4e7;
    --wa-primary: #b4552f;
    --wa-primary-hover: #9e4826;
    --wa-primary-soft: #f9ece6;
    --ws-popover: #fff;
    --ws-strong-border: #d4d4d8;
    --ws-accent: #b4552f;
    --ws-main-width: 208px;
    color-scheme: light;
    scrollbar-width: thin;
    scrollbar-color: var(--ws-strong-border) var(--wa-bg);
}
html[data-workspace][data-theme="dark"] {
    --wa-bg: #0a0a0b;
    --wa-surface: #1c1c21;
    --wa-surface-soft: #141417;
    --wa-text: #f2f2f4;
    --wa-text-muted: #a1a1aa;
    --wa-text-light: #a1a1aa;
    --wa-border: #2a2a31;
    --wa-primary: #b4552f;
    --wa-primary-hover: #9e4826;
    --wa-primary-soft: #302018;
    --wa-success: #86efac;
    --wa-success-soft: #102b1d;
    --wa-warning: #fcd34d;
    --wa-warning-soft: #30250f;
    --wa-danger: #fca5a5;
    --wa-danger-soft: #35191c;
    --ws-popover: #1c1c21;
    --ws-strong-border: #3a3a42;
    --ws-accent: #d97757;
    color-scheme: dark;
}
html[data-nav="compact"] { --ws-main-width: 76px; }
.wa-workspace { font-family: Inter, system-ui, sans-serif; letter-spacing: 0; }
html[lang="ar"] .wa-workspace { font-family: "IBM Plex Sans Arabic", Inter, sans-serif; }
.wa-workspace .wa-app { display: block; min-height: 100svh; }
.wa-workspace .wa-app-content { margin-inline-start: var(--ws-main-width); min-width: 0; }
.wa-workspace .wa-main { overflow-wrap: anywhere; }
.wa-workspace #new-project { scroll-margin-block-start: 88px; }
.wa-workspace :focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
.wa-workspace .ws-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
.wa-workspace .ws-global {
    position: fixed; inset-block: 0; inset-inline-start: 0; top: 0;
    width: var(--ws-main-width); height: 100svh; min-height: 0; max-height: none;
    display: flex; flex-direction: column; gap: 22px;
    padding: 18px 14px; background: var(--wa-bg);
    border: 0; border-inline-end: 1px solid var(--wa-border);
    overflow-y: auto; overscroll-behavior: contain; z-index: 40;
    scrollbar-width: thin;
}
.ws-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; flex-shrink: 0; }
.ws-brand { position: relative; display: block; width: 112px; height: 44px; overflow: hidden; flex-shrink: 0; }
.ws-brand img { position: absolute; width: 128px; height: 64px; max-width: none; left: 50%; top: -10px; transform: translateX(-50%); }
.ws-logo-dark, .ws-compact-brand { display: none; }
[data-theme="dark"] .ws-logo-light { display: none; }
[data-theme="dark"] .ws-logo-dark { display: block; }
.ws-icon-button {
    display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 8px; background: transparent;
    color: var(--wa-text-muted); cursor: pointer;
}
.ws-icon-button:hover { color: var(--wa-text); background: var(--wa-surface-soft); }
.ws-main-links { display: grid; gap: 5px; }
.ws-nav-link {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 10px 12px; border: 0; border-radius: 9px; background: transparent;
    color: var(--wa-text-muted); font: inherit; font-size: 14px;
    text-align: start; line-height: 1.6; text-decoration: none;
}
.ws-nav-link > span { min-width: 0; overflow-wrap: anywhere; }
.ws-nav-link:hover, .ws-nav-link.is-active, .ws-nav-link.is-current {
    background: var(--wa-surface-soft); color: var(--wa-text); text-decoration: none;
}
.ws-nav-link.is-current > svg { color: var(--ws-accent); }
.ws-create { border: 1px solid var(--ws-strong-border); background: var(--wa-surface); color: var(--wa-text); margin-bottom: 10px; }
.ws-nav-caption { margin: 0; padding: 26px 12px 7px; font-size: 12px; color: var(--wa-text-muted); }
.ws-recent { margin: 0; font-size: 13px; }
.ws-no-project { margin: 0; padding: 0 12px; font-size: 12px; color: var(--wa-text-muted); }
.ws-disabled, .ws-disabled:hover { opacity: .6; cursor: not-allowed; background: none; }
.ws-nav-bottom { margin-top: auto; padding-top: 12px; display: grid; gap: 3px; }
.ws-upgrade {
    margin-bottom: 8px; border: 1px solid #eb672c;
    background: linear-gradient(135deg, #e95513, #c74617); color: #fff;
    font-weight: 600; box-shadow: 0 8px 22px #e9551338;
}
.ws-upgrade:hover { background: linear-gradient(135deg, #f26419, #d64b16); color: #fff; }
.ws-account-trigger {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
    padding: 8px; border-radius: 9px; color: var(--wa-text); font-size: 14px; cursor: pointer;
}
.ws-account-trigger:hover, .ws-account[open] > summary { background: var(--wa-surface-soft); }
.ws-account-name { flex: 1; min-width: 0; }
.ws-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--wa-border); border-radius: 50%; background: var(--wa-surface); color: var(--wa-text-muted); }
.ws-account-menu {
    position: fixed; inset-inline-start: 12px; bottom: 76px; z-index: 60;
    width: min(224px, calc(100vw - 24px)); max-height: calc(100svh - 100px); overflow-y: auto;
    padding: 5px; border: 1px solid var(--wa-border); border-radius: 12px;
    background: var(--ws-popover); color: var(--wa-text); box-shadow: 0 12px 32px #0002;
}
.ws-menu-label { padding: 10px 12px; border-bottom: 1px solid var(--wa-border); font-size: 14px; font-weight: 600; }
.ws-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--wa-text); text-align: start; font-size: 14px; text-decoration: none; }
.ws-menu-item:hover { background: var(--wa-surface-soft); color: var(--wa-text); text-decoration: none; }
.ws-menu-item .ws-icon { width: 17px; height: 17px; flex-basis: 17px; }
.ws-signout { color: var(--wa-danger); border-top: 1px solid var(--wa-border); border-radius: 0 0 7px 7px; }
.ws-signout:hover { color: var(--wa-danger); }
.ws-account-trigger, .ws-project-menu > summary { list-style: none; }
/* Avoid stale paint for fixed menu content after a native dialog closes. */
.ws-account::details-content { content-visibility: visible; }
.ws-account:not([open]) .ws-account-menu { display: none; }
.ws-account-trigger::-webkit-details-marker, .ws-project-menu > summary::-webkit-details-marker { display: none; }
.wa-workspace .ws-topbar {
    position: sticky; top: 0; z-index: 30; min-height: 68px;
    padding: 12px 24px; gap: 16px; flex-direction: row; align-items: center;
    background: var(--wa-bg); border-bottom: 1px solid var(--wa-border);
}
.ws-topbar .wa-topbar-title { flex: 1; }
.ws-topbar .wa-topbar-title h1 { font-size: 18px; overflow-wrap: anywhere; }
.ws-topbar .wa-topbar-title p { max-width: 720px; }
.ws-project-menu { position: relative; flex-shrink: 0; }
.ws-project-links {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 240px;
    max-width: calc(100vw - 24px); max-height: calc(100svh - 104px); overflow-y: auto;
    border: 1px solid var(--wa-border); border-radius: 12px; padding: 6px;
    background: var(--ws-popover); box-shadow: 0 12px 32px #0002;
}
.ws-shell-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--wa-border); border-radius: 9px; background: var(--wa-surface); color: var(--wa-text); font-size: 13px; line-height: 1.6; text-decoration: none; cursor: pointer; }
.ws-shell-button:hover { background: var(--wa-surface-soft); }
.ws-shell-button:disabled { opacity: .65; cursor: not-allowed; }
.ws-dialog {
    width: min(560px, calc(100vw - 28px)); max-width: 560px; max-height: calc(100svh - 28px);
    padding: 0; margin: auto; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--wa-border); border-radius: 16px;
    background: var(--wa-bg); color: var(--wa-text); font: inherit;
    box-shadow: 0 24px 80px #0004;
}
.ws-dialog::backdrop { background: #0008; }
.ws-dialog-header { position: relative; padding: 24px 26px 19px; border-bottom: 1px solid var(--wa-border); }
.ws-dialog-header h2 { margin: 0; padding-inline-end: 40px; font-size: 18px; line-height: 1.5; font-weight: 600; }
.ws-dialog-close { position: absolute; inset-inline-end: 12px; top: 14px; }
.ws-dialog-body { display: grid; gap: 18px; padding: 24px 26px; }
.ws-dialog-body p { margin: 0; }
.ws-note { color: var(--wa-text-muted); font-size: 13px; }
.ws-dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 26px; border-top: 1px solid var(--wa-border); }
.ws-danger-action { color: #fff; background: #b91c1c; border-color: #b91c1c; }
.ws-danger-action:hover { background: #991b1b; }
.ws-setting-group { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 16px 0; }
.ws-setting-group + .ws-setting-group { border-top: 1px solid var(--wa-border); }
.ws-setting-group h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ws-choice-row { display: flex; padding: 3px; margin: 0; border: 1px solid var(--wa-border); border-radius: 9px; background: var(--wa-surface); }
.ws-choice-row button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--wa-text-muted); font-size: 13px; }
.ws-choice-row button[aria-pressed="true"] { background: var(--wa-surface-soft); color: var(--wa-text); box-shadow: 0 1px 3px #0002; }
.ws-profile-head { display: flex; align-items: center; gap: 14px; }
.ws-profile-avatar { width: 58px; height: 58px; }
.ws-profile-data { display: grid; gap: 7px; margin: 0; font-size: 14px; }
.ws-profile-data dt { font-weight: 600; }
.ws-profile-data dd { margin: 0 0 12px; padding: 10px 13px; min-height: 44px; border: 1px solid var(--wa-border); border-radius: 9px; background: var(--wa-surface); overflow-wrap: anywhere; color: var(--wa-text-muted); }
.ws-plan-card { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--ws-strong-border); border-radius: 12px; background: var(--wa-surface); }
.ws-plan-card span { font-size: 13px; color: var(--wa-text-muted); }
.ws-plan-card strong { font-size: 18px; }
.ws-primary-action, .ws-primary-action:hover { background: #d94d17; color: #fff; border-color: #d94d17; }
.ws-action-list > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--wa-border); background: transparent; color: var(--wa-text); text-align: start; cursor: not-allowed; }
.ws-action-list > button:last-child { border: 0; }
.ws-action-list > button > span:last-child { display: grid; gap: 3px; }
.ws-action-list strong { font-size: 14px; font-weight: 600; }
.ws-action-list small { font-size: 12px; color: var(--wa-text-muted); }
.ws-action-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--wa-border); border-radius: 10px; background: var(--wa-surface); }
.ws-skip { position: fixed; top: -100px; inset-inline-start: 20px; z-index: 100; background: var(--wa-surface); color: var(--wa-text); padding: 12px; border: 1px solid var(--wa-border); border-radius: 8px; }
.ws-skip:focus { top: 12px; }
.ws-mobile-trigger, .ws-mobile-close { display: none; }
.ws-overlay-open { overflow: hidden; }
[data-nav="compact"] .ws-global .ws-brand,
[data-nav="compact"] .ws-global .ws-nav-link > span,
[data-nav="compact"] .ws-global .ws-nav-caption,
[data-nav="compact"] .ws-global .ws-no-project,
[data-nav="compact"] .ws-global .ws-recent,
[data-nav="compact"] .ws-global .ws-account-name,
[data-nav="compact"] .ws-global .ws-account-trigger > svg { display: none; }
[data-nav="compact"] .ws-global .ws-compact-brand { display: block; width: 28px; }
[data-nav="compact"] .ws-global .ws-brand-row { flex-direction: column; gap: 8px; }
[data-nav="compact"] .ws-global .ws-nav-link { justify-content: center; padding: 10px 0; }
[data-nav="compact"] .ws-global .ws-account-trigger { justify-content: center; padding: 5px 0; }
[data-theme="dark"] .wa-workspace .wa-input,
[data-theme="dark"] .wa-workspace .wa-select,
[data-theme="dark"] .wa-workspace .wa-textarea { border-color: var(--ws-strong-border); }
[data-theme="dark"] .wa-workspace .wa-alert-info { color: #93c5fd; background: #15243a; border-color: #294568; }
[data-theme="dark"] .wa-workspace .wa-alert-success { border-color: #28563b; }
[data-theme="dark"] .wa-workspace .wa-alert-warning { border-color: #634e20; }
[data-theme="dark"] .wa-workspace .wa-alert-danger { border-color: #683037; }
[data-theme="dark"] .wa-workspace .wa-button-danger { background: #b91c1c; }
[data-theme="dark"] .wa-workspace .wa-badge-primary { color: var(--ws-accent); }
@media (max-width: 900px) {
    .wa-workspace .wa-app-content { margin-inline-start: 0; }
    .wa-workspace .ws-global { position: static; width: 100%; height: auto; border-inline: 0; }
    .ws-js .ws-global { display: none; }
    .ws-js .ws-mobile-trigger { display: grid; }
    .ws-js.ws-mobile-open .ws-global {
        display: flex; position: fixed; inset-block: 0; inset-inline-start: 0;
        width: min(300px, 86vw); height: 100svh; padding: 24px 15px;
        z-index: 70; border-inline-end: 1px solid var(--wa-border);
    }
    .ws-mobile-open .ws-nav-backdrop { position: fixed; inset: 0; z-index: 65; background: #0008; }
    .ws-mobile-open .ws-global .ws-brand { display: block; }
    .ws-mobile-open .ws-global .ws-compact-brand,
    .ws-mobile-open .ws-global .ws-expand-toggle { display: none; }
    .ws-mobile-open .ws-global .ws-brand-row { flex-direction: row; }
    .ws-mobile-open .ws-global .ws-mobile-close { display: grid; }
    .ws-mobile-open .ws-global .ws-nav-link > span,
    .ws-mobile-open .ws-global .ws-nav-caption,
    .ws-mobile-open .ws-global .ws-no-project,
    .ws-mobile-open .ws-global .ws-account-name { display: block; }
    .ws-mobile-open .ws-global .ws-account-trigger > svg { display: block; }
    .ws-mobile-open .ws-global .ws-recent { display: block; }
    .ws-mobile-open .ws-global a.ws-recent { display: flex; }
    .ws-mobile-open .ws-global .ws-nav-link { justify-content: flex-start; padding: 10px 12px; }
    .ws-mobile-open .ws-global .ws-account-trigger { justify-content: flex-start; padding: 8px; }
    .wa-workspace .ws-topbar { min-height: 60px; padding: 8px; gap: 8px; }
    .ws-topbar .wa-topbar-title h1 { font-size: 16px; }
    .ws-topbar .wa-topbar-title p { display: none; }
    .ws-project-menu > summary > span, .ws-project-menu > summary > svg:last-child { display: none; }
    .ws-project-menu > summary { width: 44px; padding: 8px; }
}
@media (max-width: 600px) {
    .ws-dialog-header, .ws-dialog-body, .ws-dialog-footer { padding-inline: 18px; }
    .ws-setting-group { grid-template-columns: 1fr; }
    .ws-choice-row { width: 100%; }
    .ws-choice-row button { flex: 1; }
    .ws-dialog-footer { flex-wrap: wrap; }
}